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
doneclass (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.