Build a to-do list

9 min 20 XP + 10 for no hints

Time to combine everything: read what someone types, then add it to the page. An input's text is in its value property.

document.createElement("li") makes a new list item. Set its textContent, then append it to the list so it appears on the page.

Finish by clearing the input, so the next task starts fresh.

Example

<button id="add">Add a star</button>
<ul id="list"></ul>
<script>
  document.querySelector("#add").addEventListener("click", () => {
    const li = document.createElement("li");
    li.textContent = "Star";
    document.querySelector("#list").append(li);
  });
</script>

Type a task in the preview and click Add to try your list yourself.

Your tasks

0 of 3 done

Create a list item with document.createElement
Clicking Add puts the typed task at the end of the list
The input is cleared after adding

Quick check

What does list.append(li) do?

todo.htmlUpdates as you type

<input id="task" placeholder="New task">
<button id="add">Add</button>
<ul id="todo"></ul>

<script>
  const input = document.querySelector("#task");
  const button = document.querySelector("#add");
  const list = document.querySelector("#todo");

  // When the button is clicked:
  // 1. create an li  2. set its text to input.value  3. append it to list

</script>

Build a to-do list

Your tasks

Tutor

Quick check