Why rebuild the entire list on every render?

Simplicity. For a todo app with <100 items, innerHTML replacement is fast enough (sub-millisecond). Virtual DOM diffing only matters at scale. This approach is predictable and bug-free — no stale DOM state.

When would I use a framework instead?

When the app grows: multiple views, complex state interactions, team collaboration. Frameworks (React, Vue) provide structure for large apps. But understanding vanilla patterns first makes framework usage much more effective.

How do I add drag-and-drop reordering?

Use the HTML Drag and Drop API: add draggable='true' to items, listen for dragstart/dragover/drop events, reorder the todos array based on drop position, then re-render. Or use a library like SortableJS.

Should I use a class-based approach?

Either works. A TodoApp class can encapsulate state and methods cleanly. But for learning, the functional approach shown here makes the data flow more visible. Use classes when you want encapsulation and multiple instances.

JavaScript Todo App Project

CRUD mastery. Create, read, update, delete — with persistence and filtering.

Module 11 · JavaScript Projects

Theory becomes skill through building. These guided projects — calculator, todo app, weather app, and more — combine everything you've learned into real applications you can extend, share, and put in a portfolio.

Learn Todo App in JavaScript — covering Architecture, Data Model, Rendering, CRUD Operations with interactive visual examples and step-by-step explanations.

About this module

Reading about JavaScript is not the same as building with it. These guided projects combine variables, functions, DOM manipulation, async fetch, and state management into applications you can run, extend, and showcase.

Each project walks through architecture decisions, common pitfalls, and incremental steps. By the end you will have portfolio-ready apps and the confidence to start your own projects from scratch.

Why this matters

Understanding todo app is essential for every JavaScript developer. It shows up in frontend UI code, backend APIs, and framework internals — and getting it wrong leads to bugs that are hard to trace. This chapter builds intuition with visuals so the behavior sticks.

Key topics covered

Architecture
Data Model
Rendering
CRUD Operations
Persistence

Where you'll use it

Building interactive web applications with todo app
Processing and transforming data in frontend and backend code
Writing cleaner, more maintainable JavaScript modules
Debugging and reviewing code during development

Architecture

Separate data, logic, and rendering cleanly.

// Architecture: Model → Controller → View
//
// Model: Array of todo objects (the data)
// Controller: Functions that modify the data
// View: Functions that render the DOM
//
// Flow: User action → update model → re-render view
//
// Project structure:
// todo-app/
// ├── index.html
// ├── style.css
// └── app.js

// HTML skeleton:
// <div class="app">
//   <h1>Todos</h1>
//   <form class="todo-form">
//     <input type="text" placeholder="What needs to be done?">
//     <button type="submit">Add</button>
//   </form>
//   <div class="filters">
//     <button data-filter="all" class="active">All</button>
//     <button data-filter="active">Active</button>
//     <button data-filter="completed">Completed</button>
//   </div>
//   <ul class="todo-list"></ul>
//   <div class="footer">
//     <span class="count"></span>
//     <button class="clear-completed">Clear completed</button>
//   </div>
// </div>

Data Model

Each todo is an object with id, text, and completed status.

// app.js — Data layer:
let todos = [];
let currentFilter = "all";

// Todo shape:
// {
//   id: "a1b2c3",        — unique identifier
//   text: "Buy groceries", — the task description
//   completed: false,      — toggle state
//   createdAt: 1704067200  — timestamp for ordering
// }

function createTodo(text) {
  return {
    id: crypto.randomUUID(),
    text: text.trim(),
    completed: false,
    createdAt: Date.now(),
  };
}

// Filtered views (never mutate the source array):
function getFilteredTodos() {
  switch (currentFilter) {
    case "active":
      return todos.filter(t => !t.completed);
    case "completed":
      return todos.filter(t => t.completed);
    default:
      return todos;
  }
}

function getActiveTodoCount() {
  return todos.filter(t => !t.completed).length;
}

Rendering

One render function rebuilds the list from data.

// DOM references:
const form = document.querySelector(".todo-form");
const input = form.querySelector("input");
const list = document.querySelector(".todo-list");
const countEl = document.querySelector(".count");
const filterButtons = document.querySelectorAll("[data-filter]");

// The single render function:
function render() {
  const filtered = getFilteredTodos();

  // Rebuild the list:
  list.innerHTML = filtered.map(todo => `
    <li class="todo-item ${todo.completed ? "completed" : ""}" data-id="${todo.id}">
      <label class="checkbox">
        <input type="checkbox" ${todo.completed ? "checked" : ""}>
        <span class="checkmark"></span>
      </label>
      <span class="todo-text">${escapeHtml(todo.text)}</span>
      <button class="edit-btn" aria-label="Edit">✎</button>
      <button class="delete-btn" aria-label="Delete">×</button>
    </li>
  `).join("");

  // Update counter:
  const count = getActiveTodoCount();
  countEl.textContent = `${count} item${count !== 1 ? "s" : ""} left`;

  // Update filter buttons:
  filterButtons.forEach(btn => {
    btn.classList.toggle("active", btn.dataset.filter === currentFilter);
  });

  // Save to localStorage:
  saveTodos();
}

// XSS prevention — ALWAYS escape user content:
function escapeHtml(str) {
  const div = document.createElement("div");
  div.textContent = str;
  return div.innerHTML;
}

CRUD Operations

Create, toggle, edit, delete, and filter.

// CREATE — form submit:
form.addEventListener("submit", (e) => {
  e.preventDefault();
  const text = input.value.trim();
  if (!text) return;

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

// DELETE & TOGGLE — event delegation on the list:
list.addEventListener("click", (e) => {
  const item = e.target.closest(".todo-item");
  if (!item) return;
  const id = item.dataset.id;

  // Delete:
  if (e.target.closest(".delete-btn")) {
    todos = todos.filter(t => t.id !== id);
    render();
    return;
  }

  // Toggle complete:
  if (e.target.closest(".checkbox")) {
    const todo = todos.find(t => t.id === id);
    if (todo) todo.completed = !todo.completed;
    render();
  }
});

Create adds to the array. Delete filters it out. Toggle flips the completed boolean. All end with render().

1 / 2

Persistence

Save to localStorage so todos survive page reload.

const STORAGE_KEY = "todo-app-data";

function saveTodos() {
  const data = JSON.stringify({ todos, currentFilter });
  localStorage.setItem(STORAGE_KEY, data);
}

function loadTodos() {
  try {
    const raw = localStorage.getItem(STORAGE_KEY);
    if (!raw) return;
    const data = JSON.parse(raw);
    // Validate structure before using:
    if (Array.isArray(data.todos)) {
      todos = data.todos.filter(t =>
        typeof t.id === "string" &&
        typeof t.text === "string" &&
        typeof t.completed === "boolean"
      );
    }
    if (["all", "active", "completed"].includes(data.currentFilter)) {
      currentFilter = data.currentFilter;
    }
  } catch {
    // Corrupted data — start fresh
    todos = [];
  }
}

// Initialize:
loadTodos();
render();

// Key patterns in this project:
// ✓ CRUD operations on an array
// ✓ Data-driven rendering (render from state, not DOM)
// ✓ Event delegation for dynamic elements
// ✓ XSS prevention (escapeHtml)
// ✓ localStorage with validation
// ✓ Defensive parsing (try/catch, type checks)
// ✓ Immutable updates where possible (filter creates new array)

FAQ

Common questions about todo app.

// Architecture: Model → Controller → View // // Model: Array of todo objects (the data) // Controller: Functions that modify the data // View: Functions that render the DOM // // Flow: User action → update model → re-render view // // Project structure: // todo-app/ // ├── index.html // ├── style.css // └── app.js // HTML skeleton: // <div class="app"> // <h1>Todos</h1> // <form class="todo-form"> // <input type="text" placeholder="What needs to be done?"> // <button type="submit">Add</button> // </form> // <div class="filters"> // <button data-filter="all" class="active">All</button> // <button data-filter="active">Active</button> // <button data-filter="completed">Completed</button> // </div> // <ul class="todo-list"></ul> // <div class="footer"> // <span class="count"></span> // <button class="clear-completed">Clear completed</button> // </div> // </div>

// app.js — Data layer: let todos = []; let currentFilter = "all"; // Todo shape: // { // id: "a1b2c3", — unique identifier // text: "Buy groceries", — the task description // completed: false, — toggle state // createdAt: 1704067200 — timestamp for ordering // } function createTodo(text) { return { id: crypto.randomUUID(), text: text.trim(), completed: false, createdAt: Date.now(), }; } // Filtered views (never mutate the source array): function getFilteredTodos() { switch (currentFilter) { case "active": return todos.filter(t => !t.completed); case "completed": return todos.filter(t => t.completed); default: return todos; } } function getActiveTodoCount() { return todos.filter(t => !t.completed).length; }

// DOM references: const form = document.querySelector(".todo-form"); const input = form.querySelector("input"); const list = document.querySelector(".todo-list"); const countEl = document.querySelector(".count"); const filterButtons = document.querySelectorAll("[data-filter]"); // The single render function: function render() { const filtered = getFilteredTodos(); // Rebuild the list: list.innerHTML = filtered.map(todo => ` <li class="todo-item ${todo.completed ? "completed" : ""}" data-id="${todo.id}"> <label class="checkbox"> <input type="checkbox" ${todo.completed ? "checked" : ""}> <span class="checkmark"></span> </label> <span class="todo-text">${escapeHtml(todo.text)}</span> <button class="edit-btn" aria-label="Edit">✎</button> <button class="delete-btn" aria-label="Delete">×</button> </li> `).join(""); // Update counter: const count = getActiveTodoCount(); countEl.textContent = `${count} item${count !== 1 ? "s" : ""} left`; // Update filter buttons: filterButtons.forEach(btn => { btn.classList.toggle("active", btn.dataset.filter === currentFilter); }); // Save to localStorage: saveTodos(); } // XSS prevention — ALWAYS escape user content: function escapeHtml(str) { const div = document.createElement("div"); div.textContent = str; return div.innerHTML; }

// CREATE — form submit: form.addEventListener("submit", (e) => { e.preventDefault(); const text = input.value.trim(); if (!text) return; todos.push(createTodo(text)); input.value = ""; render(); }); // DELETE & TOGGLE — event delegation on the list: list.addEventListener("click", (e) => { const item = e.target.closest(".todo-item"); if (!item) return; const id = item.dataset.id; // Delete: if (e.target.closest(".delete-btn")) { todos = todos.filter(t => t.id !== id); render(); return; } // Toggle complete: if (e.target.closest(".checkbox")) { const todo = todos.find(t => t.id === id); if (todo) todo.completed = !todo.completed; render(); } });

About this chapter

About this module

Why this matters

Key topics covered

Where you'll use it

Architecture

Data Model

Rendering

CRUD Operations

Persistence

FAQ

About this chapter

About this module

Why this matters

Key topics covered

Where you'll use it

Architecture

Data Model

Rendering

CRUD Operations

Persistence

FAQ