To-Do List
Abstract
This project is a To-Do List Web App built with HTML, CSS, and JavaScript that
helps users manage tasks efficiently. It allows users to add, mark as complete,
and delete tasks, with data saved in localStorage for persistence across
sessions.
Objective / Aim
The primary goal of this To-Do List Web Application is to:
1. Demonstrate Core Web Development Skills
o Implement a functional front-end application using HTML, CSS,
and JavaScript.
o Practice DOM manipulation, event handling, and localStorage for
data persistence.
2. Create a Practical User Tool
o Provide an intuitive interface for users to add, track, and manage
tasks efficiently.
o Ensure tasks persist even after closing/reopening the browser.
3. Learn Key Programming Concepts
o Understand dynamic element creation and event delegation.
o Explore client-side storage (localStorage) for offline functionality.
4. Serve as a Foundation for Future Enhancements
o Designed to be scalable for additional features (e.g., task
categories, due dates, or syncing with backend APIs).
Overview / Introduction
This To-Do List Web Application is a lightweight, interactive tool designed to
help users organize daily tasks with ease. Built entirely with HTML, CSS, and
JavaScript, the project emphasizes simplicity, functionality, and user
experience.
Key Aspects:
• Purpose: A practical solution for task management, enabling users to
add, complete, and delete tasks dynamically.
Technology Stack:
• HTML for structure (input fields, buttons, task list).
• CSS for styling (responsive layout, visual feedback).
• JavaScript for logic (task manipulation, localStorage persistence).
User Flow:
• Add tasks via an input field.
• Mark tasks as complete with one click.
• Delete tasks permanently when no longer needed.
Data Persistence: Tasks are saved in the browser’s localStorage, ensuring they
remain available after page refreshes or restarts.
Tools and Technologies Used
1. HTML - For structure
2. CSS - For styling
3. JavaScript - For functionality
4. LocalStorage - For saving tasks
5. VS Code - For writing code
Code
function addTask() {
if (inputBox.value === "") {
alert("Enter a task!");
} else {
let li = document.createElement("li");
li.innerHTML = inputBox.value;
listContainer.appendChild(li);
let span = document.createElement("span");
span.innerHTML = "×";
li.appendChild(span);
}
inputBox.value = "";
saveData();
}
listContainer.addEventListener("click", (e) => {
if (e.target.tagName === "LI") {
e.target.classList.toggle("checked");
saveData();
} else if (e.target.tagName === "SPAN") {
e.target.parentElement.remove();
saveData();
}
});
function saveData() {
localStorage.setItem("data", listContainer.innerHTML);
}
function showTask() {
listContainer.innerHTML = localStorage.getItem("data") || "";
}
showTask();
Working / Implementation
1. Add Task
o Type task in the input box → Click "Add"
o Appears in the list with a delete button (×)
2. Complete Task
o Click on any task → Marks it as complete (strikethrough)
3. Delete Task
o Click the × button → Removes the task
4. Auto-Save
o All tasks are saved in browser storage (works even after
closing/reopening)
Output
Conclusion
This To-Do List Web App successfully demonstrates how to build a functional
task manager using just HTML, CSS, and JavaScript. Key achievements include:
• Simple but effective task management (add, complete, delete)
• Data persistence using localStorage (no database needed)
• Clean UI with intuitive interactions
The project covers core web development concepts like DOM manipulation,
event handling, and client-side storage, making it ideal for beginners to learn
while creating something practical.
Future potential: Could be enhanced with features like due dates, categories,
or dark mode.
A perfect blend of learning and utility!
