Implement the core interaction

What you will build

Use a clear data model and one-way rendering for add, complete, filter, and delete.

Understand the idea first

Use a clear data model and one-way rendering for add, complete, filter, and delete.

Build it step by step

state → render(state) → user event → update state → render(state)

1. Open the previous project and record its result.
2. Type the example and complete: Finish four operations and test normal, empty, and boundary cases.
3. Change one input, predict, then verify.
4. Create and repair: Do not mutate the DOM from many places; render predictably from state.

Read the important lines

• Use a clear data model and one-way rendering for add, complete, filter, and delete.
• Read input, processing, and output separately.
• Verify another input and an edge case.

Common mistakes and what to check

Practice without copying

Finish four operations and test normal, empty, and boundary cases.

Completion check

• I produced the required visible result
• I can explain the input, processing, and output
• I tested normal, edge, and failure cases