About this set
The to-do app most people search for when they want a working to-do list in HTML, CSS and JavaScript. Full app with filters is a Saturday errands list: an add field with an Add button, five tasks with real checkboxes and a delete button each, a count of tasks left, All, Active and Done filter buttons, and a Clear done button. Compact widget is a shopping list for a Sunday roast with round checkboxes, the count in the header and the add field under the list, for a sidebar or a dashboard card. About a hundred lines of vanilla JavaScript drive both. New rows are cloned from a template element, so the markup of a row lives in the HTML rather than in the script, and each list saves its tasks to localStorage under its own key and falls back to the tasks in the markup when storage is blocked. Every change is announced through a polite status region, such as Task added or 3 tasks left. After a delete, focus moves to the next row, the previous row or the add field, and a row that the current filter hides hands focus to its neighbour.
What’s included
- Add, tick off, delete, filter All, Active and Done, and clear finished tasks
- Remaining count and an empty-state message for each filter
- Tasks saved to localStorage, one key per list
- Rows cloned from a template element, about a hundred lines of vanilla JavaScript
- Full app and compact widget variants share one script
Accessibility
Each task is a real checkbox with a label, and each delete button is named after its task, such as Delete “Buy milk, eggs and a sourdough loaf”. Filter buttons expose their state with aria-pressed, and a polite status region announces added, ticked and deleted tasks with the number left. Focus moves to the neighbouring row after a delete, every control has a visible focus outline, and colour transitions stop under prefers-reduced-motion.
Customise it
Change --td-accent, --td-accent-dark, --td-box and --td-radius on .td for colour and shape. The Bootstrap version maps the same variables onto --bs-card-*, --bs-btn-* and the .form-check-input colours; in Tailwind swap the #c2410c and #9a3412 colour utilities.
