Fulfledge

Build a to-do list

INPUT · Slides

Add what you typed

01 / 03

Writing "when this gets pressed"

To make something happen when a button is pressed, you register a function to be called on press. That is what addEventListener does.

The first argument, "click", is the "when pressed" part. The second is what to do about it.

const button = document.getElementById("add")button.addEventListener("click", () => {  console.log("pressed")})

02 / 03

What you typed lives in value

Whatever you typed comes out of input.value — literally the text you can see on screen.

Watch out for one thing: it is not textContent. An input is not a box with contents, it is a control with a value.

const input = document.getElementById("task")console.log(input.value)

03 / 03

Make it, fill it, attach it

Adding one row takes three moves.

  • document.createElement("li") — make an li (it is nowhere yet)
  • item.textContent = ... — fill it with text
  • list.appendChild(item) — attach it inside the ul

The part that trips people up: making it does not put it on screen. It only shows up once you attach it.

const item = document.createElement("li")item.textContent = "buy milk"list.appendChild(item)