Build a to-do list

You now have both halves: thinking in JavaScript, and building a page with HTML and CSS. This chapter puts them together. You are building a to-do list you can type into, add to, and clear away when things are done.

It moves differently from the other courses. Each lesson is one step of the build, and each one starts from the finished state of the last. So getting stuck is fine — the next step begins from "that far already done", and you will never be left behind.

Here are the five steps.

• Put the pieces on the page — a text box, a button, an empty list. Nothing moves yet
• Add what you typed — the page moves for the first time. Make it, fill it, attach it
• Let Enter add it too — wrap it in a form and stop the reload
• Clear away what is finished — a button per row that removes only that row
• Tidy it up and take it home — turn rows into cards and save it to your device

Marking works differently too. Your code gets actually run, buttons get actually pressed, and only then does anything look at the page. "Type into the box, press the button, and the list grows by one" — that is what has to happen for it to count. So your code does not have to match the answer, it just has to work.

In the last step you can save what you built. As one bundled file it runs the moment you tap it; as a three-file zip you can carry on in an editor on a computer. This is your first step out of the app.