Put the pieces on the page

01 / 03

Here is what you are building

Over the next five steps you are going to build a to-do list. Type something, press Add, and it shows up below. When you are done with it, you can clear it away.

At the end you get to take it home — onto your own device. What you build here becomes the starting point when you pick this up on a computer.

02 / 03

Only three things go down first

Do not try to make it move yet. The trick is to put the things you will be talking to on the page first. Three of them this time.

input — where you type what needs doing
button — press it to add
ul — where the added things line up

No JavaScript in this step. If pressing the button does nothing, that is exactly right.

<input id="task"><button id="add">Add</button><ul id="list"></ul>

03 / 03

An id is a name you call later

All three have an id. That is the name JavaScript will use to find them starting next step.

Unlike a class, an id appears only once on a page. Think of it as a way to point at something and say "this text box", "this button".

We will keep using task, add and list right through to the end of this course.