Build a Todo List in Vanilla JavaScript with Event Delegation

Putting C2 together

You'll combine every C2 idea into a working todo list:

1. Form submit to add an item → C2-06 (preventDefault + FormData)
2. createElement + textContent to render each item safely → C2-07
3. Event delegation for the "remove" button on each item → C2-08
4. classList for the "completed" line-through state → C2-04
5. querySelector for everything else → C2-02

No framework. ~30 lines of JavaScript. Same skills run any non-trivial framework you'll meet later.

The shape

<form id="f">
  <input id="text" required />
  <button>Add</button>
</form>
<ul id="list"></ul>

const form  = document.getElementById("f");
const input = document.getElementById("text");
const list  = document.getElementById("list");

form.addEventListener("submit", (e) => {
  e.preventDefault();
  const value = input.value.trim();
  if (!value) return;
  const li  = document.createElement("li");
  const txt = document.createElement("span");
  const btn = document.createElement("button");
  txt.textContent = value;
  btn.textContent = "×";
  btn.className   = "remove";
  li.append(txt, btn);
  list.appendChild(li);
  input.value = "";
});

list.addEventListener("click", (e) => {
  if (e.target.closest(".remove")) e.target.closest("li").remove();
  else if (e.target.tagName === "SPAN") e.target.classList.toggle("done");
});

Form adds → delegation handles remove + toggle. Two listeners total, regardless of list length.