The classic first app
Almost every developer has built a to-do list. It uses everything from this unit: finding elements, events, forms and creating elements. Over two lessons, you'll build one.
Data first, then draw
A tidy way to build apps: keep the data in an array, and write one render() function that redraws the page from that data. Change the data → call render.
const todos = ["Buy milk", "Call Aama"];
const list = document.querySelector("#todos");
function render() {
list.textContent = "";
for (const t of todos) {
const li = document.createElement("li");
li.textContent = t;
list.append(li);
}
}
render();This "data → render" idea is how big tools like React work too.