# ToDo List

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

- Difficulty: beginner
- Tags: useState
- Estimated time: 30 minutes
- Tests: 5
- Requires subscription: yes

## 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

01. adds a task when submitting the form
02. toggles task completion and apply line-through when checkbox is clicked
03. deletes a task when delete button is clicked
04. shows only 'Clear complete' button when there is at least one completed task
05. clears completed tasks when 'Clear complete' is clicked