todo-app/README.md

✅ 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:

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