Step 5: Task Mutations & Filter Tabs

5. Task Mutations & Filter Tabs

Implement complete task mutations (add, complete, delete) and filter tabs.

Detailed Implementation Steps:

Write an add function triggered by form submissions. This function must read the text input value, instantiate a new task object, push it to the state array, and invoke your render function.

Implement toggle actions: clicking a task checkbox should toggle its completed status in the state array. Implement deletion actions: clicking a task delete button should filter out the target task by ID. Implement navigation filters (all, active, completed) that filter the tasks array before rendering.

Verification Checklist:

1. Test adding card actions: verify cards render on the page after submitting the input form.
2. Confirm completed task items toggle list visual layouts instantly.