To-Do List App Using HTML CSS and JavaScript (Local Storage Project)
Build a modern To-Do list app using HTML, CSS, and JavaScript with task filters, edit/delete options, and localStorage. Learn DOM manipulation and create a real-world beginner project.
This To-Do List App project is a modern productivity web application created using HTML, CSS, and JavaScript. It demonstrates how real task manager tools work with dynamic UI updates and browser storage.
The app allows users to add tasks, mark them complete, edit them, filter tasks, and store data locally so tasks remain saved even after refreshing the page.
Info!
This project is perfect for learning DOM manipulation, local storage, event handling, and interactive UI design.
Project Features
| Feature | Description |
|---|---|
| Add Tasks | Create tasks instantly with input field |
| Edit Tasks | Modify task text anytime |
| Delete Tasks | Remove tasks individually |
| Filters | View All, Active, or Completed tasks |
| Local Storage | Tasks remain saved after refresh |
| Responsive UI | Works smoothly on mobile and desktop |
Technologies Used
- HTML5 – Structure and layout
- CSS3 – Modern styling and responsiveness
- JavaScript (ES6) – Logic and interactivity
- Browser localStorage – Data persistence
- Font Awesome – Icons
Project Preview
View Live Demo Download Source Code
How This To-Do App Works
Folder Structure
todo-app/
├── index.html
├── style.css
├── script.js
└── images/
Working Logic
The application stores tasks in a JavaScript array and renders them dynamically into the DOM. Every action such as adding, editing, or deleting updates the array and saves it into localStorage. When the page reloads, saved tasks are loaded back automatically.
Main Function Example
function addNewTask(){
const task = {
id: Date.now(),
text: input.value,
completed:false
}
tasks.push(task)
localStorage.setItem("tasks",JSON.stringify(tasks))
render()
}
How to Run This Project
- Download the project files
- Open folder in VS Code
- Run index.html in browser
- Add tasks and test filters
- Refresh page to see saved data
Warning!
Clearing browser storage will permanently delete saved tasks.
Explore More Projects
Conclusion
Building this To-Do app improves your understanding of real frontend logic such as state updates, event listeners, UI rendering, and browser storage. It is a great beginner portfolio project that demonstrates practical JavaScript skills.
FAQs
Is this To-Do app beginner friendly?
Yes. Anyone with basic HTML, CSS, and JavaScript knowledge can easily understand and build this project.
Does the app save tasks after refresh?
Yes. It uses browser localStorage so tasks remain saved even after reloading the page.
What features can I add next?
You can add drag-and-drop sorting, dark mode, task deadlines, priority labels, or cloud database syncing.
