Project: To-do app

Overview of the 5-lesson DOM-based to-do project: UI, events and localStorage.

Project: Todo application

In this 5-lesson project we'll build a todo application. The user will add tasks, mark them as done with a single click, and delete them with a double click. All interaction happens through the DOM API.

We'll combine these concepts:

Selecting a container with getElementById
Creating elements with createElement
Adding them with appendChild
Listening for events with addEventListener
Managing classes with classList

Each lesson continues from the previous one's solution.

The app skeleton

The app skeleton is simple: a #app container holds a heading, an input field, an add button, and a task list. HTML stays static; all dynamic content will be created with JavaScript.

By the end of this lesson we'll select the #app container and add an h1 heading inside it. Later lessons will add the input, button, and list on top of this skeleton.

Our code keeps the app reference in a variable; every insertion goes through it.

Exercise Add the heading to the container

In this first step, select the #app container, create an h1 element, set its text to "Todo list", and append it to the container.

Show example solution

First select the container with getElementById, then create an h1 with createElement, set textContent, and append with appendChild.

Example solution:
// Todo application
const app = document.getElementById("app");
const title = document.createElement("h1");
title.textContent = "Todo list";
app.appendChild(title);

Test yourself

Which method is used to add tasks to the list?
- console.log()
- appendChild()
- JSON.parse()
- Number()
Show answer

appendChild() — Correct! appendChild attaches a new element to a parent.

Create an h1 element

const title = document.____;

Show answer

const title = document.createElement("h1");

Match method to purpose

getElementById

Select element by id
createElement

Create new element
appendChild

Add element to parent
textContent

Set text content

Next lesson: UI skeleton

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies