Capstone — Todo App

Ship a todo app on your reactivity engine with add, toggle, remove, and empty state.

~/playground — 07-capstone-todo · edit app.js

Live

editing app.js⌘↵ run tests

import { createSignal, createComputed } from './engine.js'
import { createBlock, text } from './renderer.js'

export function mountTodoApp(root) {
  const todos = createSignal([])

  // TODO: build input, buttons, list, remaining count, empty state
  // TODO: wire add / toggle / remove
  // TODO: return { add(text), toggle(index) } API

  root.innerHTML = '<p>Implement mountTodoApp — see steps in task panel</p>'

  return {
    add() {},
    toggle() {},
  }
}

Preview goal: Add todos, toggle done, remove items; remaining count updates live.

Checkpoints

›Add, toggle, and remove todos work
›Remaining count updates reactively
›Empty state shows when list is empty
›All Sandpack tests pass