Search⌘ K
Home
Courses
Learn Coding Basics in JavaScript

To-Do List App

Explore how to build an interactive to-do list app by adding tasks and marking them complete with clicks. Understand event listeners, form handling, and event delegation to efficiently manage user interactions and update the UI dynamically.

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:

HTML
<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 =
...