Add, complete and delete tasks with data saved in the browser.
Difficulty: Beginner · Technology: HTML, CSS, JavaScript
Features to build
- Add and remove tasks
- Mark complete
- Local storage persistence
- Filter by status
Step-by-step build plan
- Design the data as an array of task objects
- Render the list from that data
- Add, complete and delete with events
- Save to local storage and reload on start
- Add filters for all, active and completed
The part most people find hard
Keeping the screen and stored data in sync.
How to test it
Refresh after each action and confirm nothing is lost.
Suggested extensions
Add user accounts, better error handling, automated tests and a README with screenshots. Each extension is a new talking point in interviews.
How to describe it on your resume
Developed a to-do app with persistent storage using vanilla JavaScript.
Portfolio tip
Deploy it, link both the live version and the code, and write two paragraphs about what you learned and what you would improve.