✅ To-Do List Generator

A dynamic, fully functional To-Do application built with pure HTML, CSS, and JavaScript — no frameworks, no libraries. Features task persistence via localStorage so your tasks survive page refreshes.

---

🛠️ Built With

• HTML5 — Semantic structure
• CSS3 — Dark theme styling, glow effects, transitions
• JavaScript (Vanilla) — DOM manipulation, event handling, localStorage

No frameworks. No dependencies. Zero setup.

---

✨ Features

• ➕ Add Tasks — via button click or pressing Enter
• ✏️ Edit Tasks — inline editing with duplicate prevention
• 🗑️ Delete Tasks — remove individual tasks instantly
• ✔️ Mark as Completed — strikethrough styling with opacity change
• 🔢 Active Task Counter — live count of incomplete tasks
• 🔍 Filter Views — switch between All, Active, and Completed tasks
• 🧹 Clear Completed — bulk remove all completed tasks in one click
• 💾 localStorage Persistence — tasks saved across page refreshes
• 🚫 Duplicate Prevention — blocks adding or editing to a name that already exists

---

📁 Project Structure

To-Do-App/
├── index.html      # App structure and layout
├── style.css       # Dark theme styling and button effects
└── script.js       # All app logic and DOM interactions

---

🚀 How to Run

No installation or setup needed.

1. Clone the repository:

   git clone https://github.com/code-runner006/To-Do-App.git

2. Open index.html in any browser:

   cd To-Do-App
   start index.html      # Windows
   open index.html       # macOS

That's it — works instantly in any modern browser.

---

🧠 How It Works

Data Model

Each task is stored as an object in a tasks[] array:

{
  id: Date.now(),     // unique timestamp-based ID
  text: "Task name",  // task content
  completed: false    // completion status
}

The array is serialized to localStorage on every change so tasks persist across sessions.

Core Functions

Function	Purpose
createTask(task)	Builds and appends a task's DOM element with all buttons
addOrSaveTask()	Handles both new task creation and edit saving
saveTasks()	Serializes tasks[] to localStorage and updates counter
updateCounter()	Counts and displays active (incomplete) tasks

Filter Logic

Filters work by clearing the list and re-rendering only the matching subset:

// Active filter example
tasks.filter((t) => !t.completed).forEach(createTask);

---

🎨 Design Highlights

• Dark theme — #0a0a0a background with #1a1a1a cards
• Color-coded buttons — Yellow (Add), White (Complete), Green (Edit), Red (Delete)
• Glow hover effects — each button glows in its own color on hover using box-shadow
• Smooth transitions — 0.3s on all interactive elements

---

🧩 What I Learned

• Manipulating the DOM dynamically using createElement and appendChild
• Using localStorage for client-side data persistence across sessions
• Managing application state with a JavaScript array as the single source of truth
• Implementing inline edit mode by reusing the input field
• Writing reusable event-driven functions with clean separation of concerns

---

👤 Author

Umer Farooq Afridi
BS Computer Science — University of the Punjab, Lahore
🔗 LinkedIn  |  🐙 GitHub