#02ToDo List

Overview

Create a simple ToDo list app with add, delete, complete, and clear completed tasks.

Requirements

Implement a task list where the user can:

• Add new tasks.
  • A task is added when submitting the form (pressing Enter in the input or clicking the Add button).
• Delete existing tasks.
• Mark tasks as complete and toggle their completion status.
• Clear all completed tasks.
  • The Clear button should only appear if there are completed tasks.

Notes

• Consider how to manage the list of tasks in state efficiently.
• Think about how to conditionally render the Clear button only when needed.
• Remember to update the UI immediately when tasks are added, deleted, or toggled.
• Use keys properly when rendering lists in React to avoid unnecessary re-renders.

Tests

1. adds a task when submitting the form
2. toggles task completion and apply line-through when checkbox is clicked
3. deletes a task when delete button is clicked
4. shows only 'Clear complete' button when there is at least one completed task
5. clears completed tasks when 'Clear complete' is clicked