Project: A To-Do App

Time to put it all together. In this final lesson you'll build a complete to-do app: adding, completing, editing and deleting tasks, filtering them, and saving everything so it survives a reload. It uses variables, functions, arrays, objects, DOM manipulation, events, delegation and storage — most of this course in about 80 lines.

The finished app

Try it first: add a few tasks, tick some off, double-click a task to edit it, switch filters, then press Reset on the editor — your tasks are still there.

const STORAGE_KEY = "codeatlas-todos";

// ---- state ----
let todos = load();
let filter = "all";

// ---- elements ----
const form = document.querySelector("#new-todo");
const input = form.querySelector("input");
const list = document.querySelector("#list");
const counter = document.querySelector("#counter");
const filters = document.querySelector("#filters");

// ---- storage ----
function load() {
  try {
    return JSON.parse(localStorage.getItem(STORAGE_KEY)) ?? [];
  } catch {
    return [];
  }
}
function save() {
  try { localStorage.setItem(STORAGE_KEY, JSON.stringify(todos)); } catch {}
}

// ---- rendering ----
function visibleTodos() {
  if (filter === "active") return todos.filter(t => !t.done);
  if (filter === "done") return todos.filter(t => t.done);
  return todos;
}

function render() {
  list.replaceChildren(
    ...visibleTodos().map(todo => {
      const li = document.createElement("li");
      li.dataset.id = todo.id;
      li.className = todo.done ? "done" : "";
      li.innerHTML = `<input type="checkbox" class="toggle"><span class="text"></span><button class="delete" aria-label="Delete">✕</button>`;
      li.querySelector(".toggle").checked = todo.done;
      li.querySelector(".text").textContent = todo.text;
      return li;
    })
  );
  const left = todos.filter(t => !t.done).length;
  counter.textContent = `${left} item${left === 1 ? "" : "s"} left`;
  for (const btn of filters.querySelectorAll("button")) {
    btn.classList.toggle("active", btn.dataset.filter === filter);
  }
  save();
}

// ---- actions ----
form.addEventListener("submit", e => {
  e.preventDefault();
  const text = input.value.trim();
  if (!text) return;
  todos.push({ id: crypto.randomUUID(), text, done: false });
  input.value = "";
  render();
});

list.addEventListener("click", e => {
  const id = e.target.closest("li")?.dataset.id;
  if (!id) return;
  if (e.target.matches(".toggle")) {
    todos = todos.map(t => (t.id === id ? { ...t, done: !t.done } : t));
  } else if (e.target.matches(".delete")) {
    todos = todos.filter(t => t.id !== id);
  } else return;
  render();
});

list.addEventListener("dblclick", e => {
  const li = e.target.closest("li");
  if (!li) return;
  const todo = todos.find(t => t.id === li.dataset.id);
  const text = prompt("Edit task", todo.text);
  if (text?.trim()) {
    todo.text = text.trim();
    render();
  }
});

filters.addEventListener("click", e => {
  const btn = e.target.closest("button[data-filter]");
  if (!btn) return;
  filter = btn.dataset.filter;
  render();
});

document.querySelector("#clear").addEventListener("click", () => {
  todos = todos.filter(t => !t.done);
  render();
});

render();

Result

How it's structured

The app follows a pattern used by almost every front-end framework:

State — a single array, todos, plus the current filter. This is the source of truth.
Render — one function rebuilds the list from the state. It never reads data back out of the page.
Actions — event handlers change the state, then call render().

Because the page is always drawn from the state, it can't drift out of sync. React, Vue and Svelte automate exactly this loop — understanding it here makes those frameworks much easier to learn.

Key techniques used

Technique	Where	Lesson
Objects in an array as state	`todos`	29, 36
`map`, `filter`, `find`	Rendering and updates	31
Spread to update immutably	`{ ...t, done: !t.done }`	33
Creating elements, `replaceChildren`	`render()`	43
`textContent` for user text (XSS-safe)	Task text	43
Form submit + `preventDefault`	Adding tasks	44, 46
Event delegation with `closest` and `data-*`	List and filter clicks	45
`localStorage` + JSON with `try`/`catch`	`load()`, `save()`	41, 48, 54
`crypto.randomUUID()` for IDs	New tasks	50

Challenges

Extend the app in the editor above. Each challenge practises a different part of the course:

Due dates — add a date input to the form, store due on each task, and show overdue tasks in red (lesson 20).
Sort — add a button that sorts tasks alphabetically with localeCompare (lesson 32).
Inline editing — replace the prompt with an input that appears in place of the text, saving on Enter and cancelling on Escape (lesson 44).
Keyboard shortcut — focus the new-task field when the user presses / (lesson 44).
Modules — move the app into your own project, split into storage.js, render.js and main.js (lesson 55).
Sync — load initial tasks from https://jsonplaceholder.typicode.com/todos?_limit=5 with fetch when storage is empty (lesson 49).

What next?

Test yourself with the exercises and the quiz.
Add types to your JavaScript with the TypeScript course.
Build interfaces with a framework: React, Vue or Angular.
Run JavaScript on the server with Node.js.

PreviousModern JavaScript NextPlayground