From 00f885971538ac6cd200c1c2b74580b371666b14 Mon Sep 17 00:00:00 2001 From: Conduit Agent Date: Tue, 17 Mar 2026 15:06:03 +0000 Subject: [PATCH] Initial commit: Todo app with vanilla JS and localStorage - 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 --- README.md | 64 +++++++++ index.html | 407 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 471 insertions(+) create mode 100644 README.md create mode 100644 index.html diff --git a/README.md b/README.md new file mode 100644 index 0000000..bf29584 --- /dev/null +++ b/README.md @@ -0,0 +1,64 @@ +# ✅ 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. \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..e01c86e --- /dev/null +++ b/index.html @@ -0,0 +1,407 @@ + + + + + + ✅ Todo App + + + +
+
+

✅ Todo App

+

Stay organized, get things done

+
+ +
+ + +
+ +
+
Total: 0
+
Active: 0
+
Completed: 0
+
+ +
+ + + +
+ + + + +
+ + + + \ No newline at end of file