Lesson 6: Final Project

Everything from this course, combined into one real app: an array to store tasks, functions to manage them, the DOM to display them, and events to respond to the user adding and removing items.

Try the finished version right now

This is fully working JavaScript, live on this page:

Building it step by step

Store tasks in an array

let tasks = []; — an empty array that will hold every task as a simple string, or an object if you want to track "done" status per task.

Write an addTask function

Grabs the input's value, pushes it into the array, clears the input, and re-renders the list.

Write a render function

Clears the <ul>, then loops through the array with .forEach(), creating a new <li> for each task.

Wire up the button

addEventListener("click", addTask) on the Add button, calling everything above.

Add a delete button per task

Each rendered <li> gets its own delete button, removing that specific task from the array and re-rendering.

let tasks = [];

function addTask() {
  const input = document.getElementById("todo-input");
  const text = input.value.trim();
  if (text === "") return; // ignore empty submissions

  tasks.push(text);
  input.value = "";
  render();
}

function render() {
  const list = document.getElementById("todo-list");
  list.innerHTML = ""; // clear before re-drawing

  tasks.forEach(function(task, index) {
    const item = document.createElement("li");
    item.textContent = task;

    const deleteBtn = document.createElement("button");
    deleteBtn.textContent = "✕";
    deleteBtn.addEventListener("click", function() {
      tasks.splice(index, 1); // removes one item at this position
      render();
    });

    item.appendChild(deleteBtn);
    list.appendChild(item);
  });
}

quick tip

createElement and appendChild build new HTML elements directly from JavaScript, safely — this is the preferred alternative to innerHTML when you're inserting dynamic content, since it avoids the security risk mentioned in Lesson 4.

Build it yourself

the project

Build this in your own index.html, typing every line yourself instead of copy-pasting. Once it works, extend it: add a "mark as complete" button that adds a done CSS class (strikethrough text) instead of deleting the task — you already have every tool needed from Lessons 1-5 to do this on your own.

What you actually just learned

Storing changing data in an array (tasks)
Functions that do one clear job each (addTask, render)
Looping through data to build UI dynamically (.forEach)
Responding to real user actions (addEventListener)
Safely creating and removing elements (createElement, appendChild)

This exact pattern — data in an array, a render function, events triggering updates — is the conceptual foundation behind every modern JavaScript framework (React, Vue, and the rest). You just built a simplified version of it by hand.

Final Project: Interactive To-Do List

Try the finished version right now

Building it step by step

Store tasks in an array

Write an addTask function

Write a render function

Wire up the button

Add a delete button per task

Build it yourself

What you actually just learned