Todo List

Requirements

• Start with an empty list and display No tasks yet. when no tasks exist.
• Add a task by submitting the New task form using Add task or Enter. Trim surrounding whitespace and ignore empty or whitespace-only submissions.
• Append new tasks in insertion order, mark them active, and clear the input after a successful addition.
• Toggle completion using a native checkbox; completed tasks must look visually distinct and can be reopened.
• Delete a task using its Delete button. Duplicate titles are allowed; each item needs a stable unique identity so toggling or deleting one never changes another.
• Use a labeled input, native form, checkbox, and buttons with accessible names and visible focus indicators. Render titles as text, never HTML.
• Keep the supplied data-testid attributes on the corresponding controls and list items so the automated checks can locate them.
• Use in-memory component state. Persistence, editing, filtering, and backend integration are out of scope.

Examples

Input: Initial render
Output: No tasks yet.

Input: Enter "  Read docs  " and submit
Output: One active task: Read docs. Input is empty.

Input: Check Read docs, then uncheck it
Output: The task becomes completed, then active again.

Input: Delete the last task
Output: No tasks yet.