HTML Exercise: Build an Interactive To-Do List

A useful interface does not need to be complicated. Start with native HTML, then add JavaScript only when you need it.

What You Need to Know

An interactive to-do list needs a clear input, an Add button, and a visible list of tasks. Update the DOM with textContent so a task typed by a visitor is shown as text, not interpreted as HTML code.

In this example: add and remove task items.

Try the Example

Take a look at the example. We’ll explain the important lines right below it.

<label for="task-name">New task</label>
<input id="task-name" name="task-name">
<button id="add-task" type="button">Add task</button>
<ul id="task-list"></ul>
<script>
    const taskName = document.querySelector("#task-name");
    const taskList = document.querySelector("#task-list");
    document.querySelector("#add-task").addEventListener("click", () => {
        if (!taskName.value.trim()) return;
        const taskItem = document.createElement("li");
        taskItem.textContent = taskName.value;
        taskList.append(taskItem);
        taskName.value = "";
    });
</script>

Let’s Read the Code

<label>: The label tells people what the input is for. A matching for/id pair makes the label clickable.
<input>: The input is a control. Its type changes the way people enter information.
for: For connects a label or output with a control by ID.
id: An id uniquely identifies an element on this page.

What the example shows: The button adds a new list item using textContent, not unsafe innerHTML; empty tasks are ignored.

What Happens in the Browser?

When this example includes JavaScript, it supplies behavior that ordinary HTML does not automatically provide. Always think about a fallback.

What makes it interactive? Look for the JavaScript that finds an element and reacts to an event. HTML provides the initial controls and content; the script updates the page. Try removing the script to see which part still works natively.

Your Turn

Add a second task and explain how the list changes.

Common Beginner Mistakes

Assuming new HTML syntax works in every browser without testing.
The list exists in memory on the page and disappears on refresh until you add a persistence layer.

Key Takeaways

An interactive to-do list needs a clear input, an Add button, and a visible list of tasks.
<label>: The label tells people what the input is for. A matching for/id pair makes the label clickable.
Test the behavior you expect rather than trusting how the snippet looks in your editor.