Capstone part 2: filters, clear done and saving
Finish the task app. The starter is a working core (part 1). Add:
1. Saving: after every change, store the tasks array as JSON in localStorage under the key hectal-tasks (each item { id, text, done }).
2. Loading: write a function loadTasks() that returns the saved array, or [] if nothing is saved, the JSON is broken, or the value isn't an array. Use it to set the starting state.
3. Filters: the three data-filter buttons show all, active (not done) or done tasks. The current filter's button has aria-pressed="true", the others "false". The counter always counts all unfinished tasks, whatever the filter.
4. Clear done: the #clear button removes every done task.
What Check tests
- Adding a task saves it to localStorage under
hectal-tasks - Ticking a task is saved too
- The Active filter shows only unfinished tasks and is pressed
- The Done filter shows only finished tasks, and the counter still counts all unfinished tasks
- Clear done removes finished tasks from the page and storage
loadTasks()returns the saved array, or [] for broken or wrong data, and is used at startup
Stuck? One hint at a time
The solution unlocks after your first Check. Try first: that is where the learning happens.
Your page
Console
Nothing logged yet.