A Simple To-Do List

Learn to create a simple to-do list by manipulating the DOM using JavaScript.

We'll cover the following

Creating a to-do list

We’re going to finish this by writing some code that will create a to-do list and allow us to add items to it and cross them off when they’re done. All of this will be done using dynamic HTML, created with JavaScript.

Let’s start off by creating the list element:

const list = document.createElement('ul');
document.body.appendChild(list);

This creates an unordered list ( <ul> ) and appends it to the <body> tag of the document. You won’t see anything rendered yet, because the list is empty—but it is there!

Next, we’ll write a function for adding tasks. We add the following code in index.js file:

Get hands-on with 1400+ tech skills courses.