Advanced

Build a todo app

Time to combine everything: signals, events, lists, and conditional classes. You will build a working todo list.

# The features

  • Add a todo from the input.
  • Toggle a todo's done state by clicking its text.
  • Delete a todo with a button.
  • Count how many todos are incomplete.

# Hints

  • Use ${() => repeat(todos.value, (t) => t.id, (t) => html\...`)}` for the list.
  • Toggle: todos.value = todos.value.map(t => t.id === id ? { ...t, done: !t.done } : t).
  • Delete: todos.value = todos.value.filter(t => t.id !== id).
  • Strike-through done items with a done class (the preview CSS already styles .done).

# Your task

Complete the App function. The add helper is already written — wire up the input and add button, then implement toggle, delete, and the remaining count.

💡 Tip

This is the final lesson. If you got here, you understand signals, templates, events, lists, and effects — the core of Elur. Congratulations!

Need a hint?
Use ${() => repeat(todos.value, ...)} to list todos. Each item: a span (toggle done on click) and a delete button. Show a count of incomplete items at the bottom.