Todo List

A picture is worth a thousand words...

Let's break it down.

Start with HTML and CSS

For this assignment you'll be starting from scratch to force you to keep your CSS skills sharp. Don't even touch the JS until you've got the UI built. Put some todos on the page with HTML and use an <input type="checkbox"> to make them checkable. This is a great chance to use a label and some advanced CSS to create the desired affect. I would recommend the following markup for each todo:

That extra <span> allows you to do something clever. Use the :checked pseudo-class and the adjacent sibling selector to cross out checked items:

Don't get too hung up on this. It's fine if checking an item doesn't cross it out.


Once you know exactly what the markup for each todo looks like, you should probably write a function that can make one and append it to the page—I don't know, maybe you call it addTodo() and pass in the text you want to appear. The function isn't entirely necessary but start by writing the code that makes a todo appear and work your way backwards.

When the todo list form is submitted:

  1. Remove the element that says "Nothing to do". Can you think of how to do this? Think about what CSS property you can set that makes something disappear. Can you apply that rule via CSS?
  2. Run the code that makes a todo, using the input's value as the textContent. Nothing new here!
  3. Update the number of total todos in the upper right. You can do this a few ways so I'll let you solve this problem on your own too.

Bonus: Adding Multiple Items at Once

Adding multiple items at once is actually isn't as hard as you might think. All you need to do is split() the string that comes out of input.value. split() is a method on all strings that takes in a delimiter, like a ",". It returns an array. Here's an example: