A reactive task list that cleans up after itself
Build a small task app. Keep the tasks in state.tasks, where state comes from a reactive(obj, onChange) helper you write with a Proxy: every property write calls onChange, which re-renders the list.
Clicking Add adds the trimmed text from #task (ignore empty text) and clears the input. Clicking a task in #list removes it. #count always shows the number of tasks. Update the state by assigning a new array (state.tasks = [...]), so the proxy sees the change.
Write a global stopApp() that removes all the app's event listeners at once with an AbortController (the Stop app button calls it). After stopApp(), clicking Add does nothing.
What Check tests
- Adding a task shows it and updates the count
- The input is cleared after adding
- Empty text is ignored
- A second task makes the count 2
- Clicking a task removes it
- State changes go through a Proxy
- After
stopApp(), Add does nothing
Stuck? One hint at a time
The solution unlocks after your first Check. Try first: that is where the learning happens.
Your page
Console
Nothing logged yet.