JavaScript
UI skeleton
Build the task list UI with createElement and appendChild.
UI components
The todo app UI has three core components: an input field (to type a new task), an add button (to add the task to the list), and a task list (to show the added tasks).
We'll create them with the DOM: createElement("input"), createElement("button"), and createElement("ul"). Each will be appended to the app container with appendChild.
For the input we'll set a placeholder attribute; for the button we'll set textContent as its label.
Building the skeleton with the DOM
We'll create the three components in order and append them to the app container. First we'll make the input element and give it a hint text with placeholder. Then we'll make the button element and set its label with textContent. Finally we'll create the ul element.
After creating each one, we'll attach it to the container with app.appendChild(...). This way the user sees the input, the button, and the empty list.
Order matters: input and button on top, list below.
Exercise Build the UI skeleton
Continue on top of the previous lesson's solution. Create three components: input (placeholder "New task"), button (textContent "Add"), and ul. Append all of them to the app container.
Show example solution
Create all three components with document.createElement, set their placeholder and textContent, then append each to the container with app.appendChild.
Example solution:
// Todo application
const app = document.getElementById("app");
const title = document.createElement("h1");
title.textContent = "Todo list";
app.appendChild(title);
const input = document.createElement("input");
input.placeholder = "New task";
const addButton = document.createElement("button");
addButton.textContent = "Add";
const list = document.createElement("ul");
app.appendChild(input);
app.appendChild(addButton);
app.appendChild(list);
Test yourself
-
Which HTML element fits a task list?
Show answer
<ul> — Correct! ul (unordered list) fits a task list.
-
Set placeholder on the input
const input = document.createElement("input");
input.____ = "New task";
Show answer
const input = document.createElement("input");
input.placeholder = "New task";
-
Match component to purpose
- input
- Task text entry
- button
- Add task trigger
- ul
- Task list container
Next lesson: Adding a task
