1f4ba296e9
- Single-file HTML app with embedded CSS and JS - Add, complete, and delete todos - Filter by All/Active/Completed - Persistent storage via localStorage - Responsive design with clean UI - README with usage instructions
64 lines
2.0 KiB
Markdown
64 lines
2.0 KiB
Markdown
# ✅ Todo App
|
|
|
|
A clean, minimal todo application built with **vanilla JavaScript**, **HTML**, and **CSS** — no frameworks, no dependencies, no build tools.
|
|
|
|
|
|
|
|
|
|
|
|
## ✨ Features
|
|
|
|
- **Add todos** — type and press Enter or click Add
|
|
- **Complete todos** — click the circle checkbox to toggle
|
|
- **Delete todos** — hover and click the ✕ button
|
|
- **Filter todos** — view All, Active, or Completed
|
|
- **Clear completed** — bulk remove finished tasks
|
|
- **Persistent storage** — todos survive page refreshes via `localStorage`
|
|
- **Live stats** — see total, active, and completed counts
|
|
- **Responsive design** — works on desktop and mobile
|
|
- **Keyboard friendly** — press Enter to quickly add todos
|
|
|
|
## 🚀 Getting Started
|
|
|
|
No build step required! Just open the file:
|
|
|
|
```bash
|
|
# Option 1: Open directly in your browser
|
|
open index.html
|
|
|
|
# Option 2: Serve with Python
|
|
python3 -m http.server 8080
|
|
|
|
# Option 3: Serve with Node.js
|
|
npx serve .
|
|
```
|
|
|
|
Then visit `http://localhost:8080` (for options 2 & 3).
|
|
|
|
## 📁 Project Structure
|
|
|
|
```
|
|
todo-app/
|
|
├── index.html # The entire app — HTML, CSS, and JS in one file
|
|
└── README.md # You're reading it
|
|
```
|
|
|
|
## 🛠️ Tech Stack
|
|
|
|
| Tech | Purpose |
|
|
|------|---------|
|
|
| HTML5 | Structure |
|
|
| CSS3 | Styling with gradients, animations, and responsive layout |
|
|
| Vanilla JS | App logic, DOM manipulation, event handling |
|
|
| localStorage | Client-side data persistence |
|
|
|
|
## 💡 How It Works
|
|
|
|
1. Todos are stored as a JSON array in `localStorage`
|
|
2. Each todo has an `id` (timestamp), `text`, `completed` flag, and `createdAt` date
|
|
3. The `render()` function re-draws the list based on current state and active filter
|
|
4. All mutations (add, toggle, delete, clear) update state → save to localStorage → re-render
|
|
|
|
## 📝 License
|
|
|
|
MIT — do whatever you want with it. |