Project: Interactive To-Do List

The brief

Build a to-do list where you can type a task, add it to the list, and remove it. No frameworks — just the JavaScript you now know.

Everything here is something you have already met: getElementById to grab elements, addEventListener for clicks, createElement/appendChild to build the page, and .remove() to delete. Read the code, then we will walk the whole flow.

<input id="task" placeholder="What needs doing?">
<button id="add">Add</button>
<ul id="list"></ul>

<script>
  const input = document.getElementById("task");
  const list = document.getElementById("list");

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

    const li = document.createElement("li");
    li.textContent = text;

    const del = document.createElement("button");
    del.textContent = " ✕";
    del.addEventListener("click", () => li.remove());

    li.appendChild(del);
    list.appendChild(li);
    input.value = "";
  });
</script>

Here is the full add-and-delete flow, step by step:

1. We grab the text box (input) and the empty list (list) once at the top so we can reuse them.
2. When Add is clicked, input.value.trim() reads what was typed and trims spaces.
3. if (text === "") return guards against empty tasks — if the box is blank, we stop early and add nothing.
4. createElement("li") makes a new list item and li.textContent = text puts the task words in it.
5. We also build a small ✕ button, and give it its own click handler: () => li.remove() deletes that exact item.
6. li.appendChild(del) puts the ✕ inside the item, then list.appendChild(li) adds the finished item to the page.
7. Finally input.value = "" clears the box, ready for the next task.