Project 2: To-Do List

Project 2: To-Do List

Build a to-do list where users can add tasks and mark them done.

Step 1: The HTML

<input id="taskInput" placeholder="New task">
<button id="addTask">Add</button>
<ul id="taskList"></ul>

Step 2: Add tasks

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

document.getElementById("addTask").addEventListener("click", function() {
  if (input.value.trim() === "") return;

  const li = document.createElement("li");
  li.textContent = input.value;
  li.addEventListener("click", function() {
    li.classList.toggle("done");
  });

  list.appendChild(li);
  input.value = "";
});

Step 3: How it works

• createElement makes a new element.
• appendChild adds it to the list.
• classList.toggle toggles a "done" class when clicked.
• input.value.trim() ignores empty tasks.

Step 4: Style it

Add CSS so .done tasks are crossed out:

.done { text-decoration: line-through; }

Bonus ideas

• Add a delete button per task.
• Save tasks in localStorage.
• Show a count of remaining tasks.

TL;DR

• createElement and appendChild build new page content.
• classList.toggle switches a class.
• Guard against empty input with trim().
• Combine events and DOM methods for apps.