1st YearBeginnerWeb 1-2 weeks
To-Do List with Categories & Reminders
A task manager where users create to-dos grouped by category, set due dates, mark tasks complete, and get in-page reminders for items due today — all saved in the browser.
HTMLCSSJavaScriptLocalStorage
Find GitHub repos & source code →How to build it — step by step
- 1Data model: Define a task object: id, text, category, dueDate, done. Store the list as JSON in localStorage.
- 2CRUD UI: Build add/edit/delete and a checkbox toggle; re-render the list from state on every change.
- 3Filtering: Add category tabs and filters for All / Active / Completed / Due today.
- 4Reminders: On load, compare dueDate with today and surface a "due today" banner.
Key features to implement
- ✓Category grouping and colour tags
- ✓Due dates with "due today" highlighting
- ✓Active / completed filters
- ✓Persistent storage across reloads
- ✓Keyboard-friendly add (Enter)
💡 Unique twist to stand out
Add a lightweight productivity stat: a small streak counter that tracks how many days in a row the user cleared all tasks due that day.
🎓 What you'll learn
DOM manipulation, application state management, array methods, date handling, and browser storage.