Ticking things off
The best part of a to-do list is crossing things off. Today each task becomes an object with a done flag, and clicking a task toggles it. You'll also show how many are left.
Tasks as objects
const todos = [
{ text: "Buy milk", done: false },
{ text: "Call Aama", done: true },
];
const list = document.querySelector("#todos");
function render() {
list.textContent = "";
todos.forEach((todo, i) => {
const li = document.createElement("li");
li.textContent = todo.text;
if (todo.done) li.classList.add("done");
li.addEventListener("click", () => {
todos[i].done = !todos[i].done;
render();
});
list.append(li);
});
}
render();