Todo App

A browser todo list — HTML, CSS, and vanilla JavaScript.
No frameworks. No backend. Your list stays in localStorage.

Open the live app  ·  Ivan Ivanov  ·  MIT

---

Features

Lists Add from the form Check to complete, uncheck to restore Completing a normal task collapses the row, then it moves to Completed (repeating tasks stay Active) Empty-state messages Saved across refresh in the browser Show Completed Todos and Bin toggles (pure CSS) Bin Cream × on a row moves one task to the Bin Move all to Bin for every completed task Restore one, restore all, or the cream × to delete forever (hover goes faded rose) Empty bin with an in-app confirm (Cancel or Empty bin)

Editor (pencil) Name, notes, due date, repeat, remind, priority, tag, subtasks, created date, completed Double-click a name to rename (Enter / click away to save, Escape to cancel) Subtasks: count (2 of 3), progress bar, olive rail; Enter adds; circle shows a tick Repeat: None, Daily, Weekly (Mon–Fri), Weekend, Fortnight (×2), Monthly, Custom Remind: Off, Due today, 15m, 30m, 1h, 1d (toast while the tab is open) Toolbar Search by name (hidden, not deleted) with a glass / × Search in: All / Active / Completed / Bin Sort: date added, due, priority, or Custom order Tag filter: All / Work / Home / Personal

On the row Due chips: Overdue, Today, Tomorrow Tag chips: Work, Home, Personal Repeat Last done and remind caption on one line (In 15m • Last done 31 Aug) Gray ⋮, then the pencil to open the editor; cream × bins

Reorder & look Drag the 6-dot grip (sets Custom order). On a phone, hold the dots ~300ms until the olive ring, then slide Keyboard: Tab to the grip, Space, ↑ / ↓, Space (Escape cancels). Bin has no grip Light / Dark sun–moon pill Circular checkboxes, gold/tan cards, hover styles, accessible labels

---

How to use

Step	What to do
1	Type a task and click Add (or press Enter)
2	Search as you type. Search in picks All / Active / Completed / Bin. × clears the box
3	Sort by date added, due, priority, or Custom order. Tag filters Work / Home / Personal
4	Drag the 6 dots, or Tab → Space → arrows → Space. On a phone, hold the dots until the olive ring, then slide. Check the circle to complete. Move all to Bin clears Completed
5	Double-click to rename, or the pencil for the full editor. Close or click the backdrop to save
6	Cream × sends one task to the Bin
7	Open Bin to restore, restore all, delete forever (cream ×, rose hover), or empty
8	Click the sun / moon switch for Light / Dark

Each visitor’s list is stored only in their own browser.

---

Run locally

Open index.html in a browser, or use Live Server. No install step.

todo-app/
├── index.html
├── README.md
├── LICENSE
├── .gitignore
└── assets/
    ├── css/style.css
    ├── js/script.js
    └── screenshots/

---

Version gallery

Screenshots of the real HTML and CSS at each main release live in a closed section below. Bugfix tags (v1.3.1, v1.7.1, v1.7.2, v1.8.1, v1.8.2, v1.9.1, v1.12.1, v1.15.1) are skipped. Same sample todos in every shot.

Show version screenshots

v1.0.0 First public	v1.1.0 Bin	v1.2.0 Dark mode
v1.3.0 Task editor	v1.4.0 Search	v1.5.0 Move all to Bin
v1.6.0 Sort	v1.7.0 Search scope	v1.8.0 Due hints
v1.9.0 Tags	v1.10.0 Subtasks	v1.11.0 Drag
v1.12.0 Recurring	v1.13.0 Reminders	v1.14.0 Keyboard reorder
v1.15.0 Touch drag	v1.16.0 Row editor / pencil	v1.17.0 Cream ×

Build history

The app was built in phases — structure and styling first, then behavior, then persistence and a public release.

Phase	Focus	Status
Phase 1	HTML structure, semantic markup, accessibility basics	Done
Phase 2	CSS styling, layout, completed toggle, custom checkboxes	Done
Phase 3	JavaScript — add, delete, complete, move todos	Done
Phase 4	Persist todos, empty states, and inline edit	Done
Phase 5	GitHub Pages deploy and README for v1.0.0	Done
Phase 6	Bin — restore, restore all, empty, delete forever	Done
Phase 7	Dark mode with saved theme	Done
Phase 8	Task editor overlay — notes, due date, priority, created date	Done
Phase 9	Search / filter by todo name	Done
Phase 10	Move all completed todos to the Bin	Done
Phase 11	Sort by date added, due date, or priority	Done
Phase 12	Search scope — All / Active / Completed / Bin	Done
v1.7.1	Search toolbar card — Search, Search in, and Sort grouped	Done
v1.7.2	Add text box hover — gold border only, no bronze fill	Done
Phase 13	Due-soon hint on the row — Overdue / Today / Tomorrow	Done
v1.8.1	Theme switch — sun / moon pill instead of the Dark / Light chip	Done
v1.8.2	Even sun rays (SVG) and Safari press hop fix	Done
Phase 14	Tags / color — Work, Home, Personal, and a filter by tag	Done
v1.9.1	Search glass on the right, and a matching × to clear	Done
Phase 15	Subtasks in the editor — count, progress bar, left rail	Done
Phase 16	Drag to reorder — left grip, custom order	Done
Phase 17	Recurring tasks — Repeat in ☰, weekday circles, Last done	Done
v1.12.1	Custom order restore, collapse on complete, editor polish	Done
Phase 18	Reminders — pills in ☰, row caption, toast	Done
Phase 19	Keyboard reorder — Space to pick up, arrows to move	Done
Phase 20	Touch drag — hold the 6-dot grip, olive ring, slide	Done
v1.15.1	iOS freeze fix — follow the finger on document after a touch hold	Done
v1.16.0	Row editor control — gray kebab, pencil button, dark-theme charcoal	Done
v1.17.0	Cream × on the row and in Bin; Bin hover faded rose	Done

---

License

MIT — see LICENSE.