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