Learn Coding Basics in JavaScript/

...

/

To-Do List App

To-Do List App

Learn how to make the to-do list interactive using event listeners.

We'll cover the following...

We’re going to finish the chapter by putting a few of the things we’ve learned together to build a slightly more sophisticated to-do list app than we built previously. It will allow us to add items to the list and strike them out by clicking on them—this time without having to mess with the console.

To get started, we enter the following into the index.html file:

Press + to interact
<form name='addTask'>
  <input type='text' name='newTask'>
  <button type='submit'>ADD</button>
</form>
<ul id='list'></ul>

Interactive features of To-Do list app

This is almost identical to the HTML code we used earlier in the chapter for our form input example. It creates a form with a single input box and submit button. There’s also an empty unordered list element (<ul>) That we’ll dynamically place the items into when the program is running.

Now for the code to get it working! First of all, we need to get some JavaScript references to the HTML elements:

const list = document.getElementById('list');
const form =
...