TodoMVC demo
A todo list app that helps users manage tasks by adding, filtering, and clearing them.
1. TodoMVC demo
The app is a classic vanilla JavaScript todo list with client-side routing and local storage persistence.
2. Task entry
The input field accepts new todos and binds Enter to submit, a pattern common in task management UIs.
3. Task entry
Text typed here is captured and queued for addition on submit.
4. Task entry
Submitting creates an item in the list and appends it to the local storage-backed model.
5. Task entry
The input is reused to add multiple todos, each submission updating the underlying array.
6. Task entry
A second task is typed, demonstrating that the form accepts repeat submissions.
7. Task entry
Entering this todo updates the counter and list, reflecting the model's state changes.
8. Todo completion
Toggling a checkbox flips the item's completed flag and applies the strikethrough style.
9. Active filter
The Active filter is a hash-based route that re-renders the list showing only incomplete items.
10. Completed filter
The Completed route filters the same data to show finished tasks, preserving the model.
11. All filter
Returning to the All route restores the full list, demonstrating the view is derived from state.
12. Clear completed
Clear completed removes all finished items from storage and recalculates the remaining count.