🧮 Day 18 — Mini Project: Interactive To-Do List App

Welcome to Day 18 🎉 It’s time to apply everything you’ve learned! In this mini project, you’ll build a **To-Do List App** that lets users add, remove, and mark tasks as complete — all powered by DOM manipulation and JavaScript logic.

🧩 1️⃣ Project Overview

Features you’ll build:

• Add tasks dynamically
• Mark tasks as complete
• Delete tasks
• Store tasks temporarily

⚙️ 2️⃣ HTML Structure

<div class="todo-container">
  <h2>My To-Do List</h2>
  <input id="taskInput" type="text" placeholder="Enter a task...">
  <button id="addBtn">Add</button>
  <ul id="taskList"></ul>
</div>

🎨 3️⃣ Basic CSS (Optional)

.todo-container {
  width: 400px;
  margin: 30px auto;
  text-align: center;
  background: #e8f5e9;
  padding: 20px;
  border-radius: 12px;
}
li {
  list-style: none;
  background: white;
  margin: 8px 0;
  padding: 10px;
  border-radius: 5px;
}
.completed {
  text-decoration: line-through;
  color: gray;
}

💻 4️⃣ JavaScript Logic

let input = document.getElementById("taskInput");
let list = document.getElementById("taskList");

document.getElementById("addBtn").addEventListener("click", () => {
  if (input.value.trim() === "") return alert("Enter a task!");
  let li = document.createElement("li");
  li.textContent = input.value;
  li.addEventListener("click", () => li.classList.toggle("completed"));
  li.addEventListener("dblclick", () => li.remove());
  list.appendChild(li);
  input.value = "";
});

🧠 5️⃣ Practice Task

1. Add a “Clear All” button to remove all tasks.
2. Store tasks in localStorage so they persist after reload.
3. Display a task count.

🎯 Summary

You’ve just built your first complete interactive project in JavaScript! You now know how to manipulate the DOM, handle user inputs, and dynamically manage UI — skills that form the foundation of modern front-end frameworks like React.

← Prev Next →