# ✅ Todo App

A clean, minimal todo application built with **vanilla JavaScript**, **HTML**, and **CSS** — no frameworks, no dependencies, no build tools.

![Made with HTML](https://img.shields.io/badge/Made%20with-HTML%2FJS%2FCSS-blue)
![No Dependencies](https://img.shields.io/badge/Dependencies-Zero-brightgreen)
![Storage](https://img.shields.io/badge/Storage-localStorage-orange)

## ✨ 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.