Simple Todo List

Goals

• Keep todo state in an array of objects
• Render the list from state on every change
• Add, toggle, and delete items via DOM events
• Use unique ids to identify items in the DOM

Prerequisites

• Arrays and array methods (push, filter, map)
• Objects and property access
• DOM selection and event listeners

Steps

2. 1

   Set up state and HTML

   Create an input, an Add button, and an empty ul. In JS, declare a todos array and a nextId counter. State drives everything; the DOM is just a view of it.

   CodeCopy

   <input id="task-input" placeholder="Add a task">
   <button id="add-btn">Add</button>
   <ul id="list"></ul>
   
   <script>
     let todos = [];
     let nextId = 1;
   </script>

   Expected result

   An input, a button, and an empty list area appear.

4. 2

   Write the render function

   Write render() that clears the ul and rebuilds it from the todos array. Each li gets a checkbox, the title, and a delete button, plus a data-id attribute to identify it.

   CodeCopy

   const listEl = document.getElementById("list");
   
   function render() {
     listEl.innerHTML = "";
     todos.forEach(t => {
       const li = document.createElement("li");
       li.innerHTML = `
         <input type="checkbox" ${t.done ? "checked" : ""} data-id="${t.id}">
         <span style="text-decoration:${t.done ? "line-through" : "none"}">${t.title}</span>
         <button data-id="${t.id}" class="del">x</button>
       `;
       listEl.appendChild(li);
     });
   }

   Expected result

   Calling render() draws the current todos; an empty array shows nothing.

   Show hint
6. 3

   Wire the Add button

   On Add click, read the input value, push a new task object to todos, increment nextId, clear the input, and call render(). Empty input is ignored.

   CodeCopy

   const inputEl = document.getElementById("task-input");
   const addBtn = document.getElementById("add-btn");
   
   addBtn.addEventListener("click", () => {
     const title = inputEl.value.trim();
     if (!title) return;
     todos.push({ id: nextId++, title, done: false });
     inputEl.value = "";
     render();
   });

   Expected result

   Typing a task and clicking Add adds it to the list and clears the input.

8. 4

   Handle toggle and delete with delegation

   Add one click listener on the ul. If the clicked element is a checkbox, toggle that task's done flag. If it is a delete button, filter the task out. Then re-render. Event delegation handles all current and future items with one listener.

   CodeCopy

   listEl.addEventListener("click", (e) => {
     const id = Number(e.target.dataset.id);
     if (e.target.type === "checkbox") {
       const t = todos.find(t => t.id === id);
       if (t) t.done = e.target.checked;
     } else if (e.target.classList.contains("del")) {
       todos = todos.filter(t => t.id !== id);
     }
     render();
   });

   Expected result

   Checking a box strikes through the task; clicking x removes it.

Related Resources