Building a To-Do List

Overview

In this lesson, we will use the DOM manipulation techniques we have learned to implement a fully-functional To-Do list application. We will start by setting up the to-do list with HTML and CSS and then use Javascript to implement the functionality step by step. Finally, we will try to have a functional To-Do application like the one given below:

Setup

Let’s define the structure of our To-Do list using HTML as follows:

The contents of the To-Do application are wrapped in a <div> container, with the id todos. The actual list is stored in an unordered list with the id todoList. We also create another ...