Todo List II

Build a Todo List component with timer functionality where users can:

• Add a new todo item.
• Start/Pause a timer for each todo.
• Reset a timer to zero.
• Delete a todo item.
• View the list of all todos with their timers.

Requirements

• The component should maintain a list of todos in its state.
• A todo has: id, title, time (in seconds), and isRunning (boolean).
• An input box with placeholder "Enter todo" to type a new todo.
• A button labeled "Add" to add a todo.
• Each todo item must be an <li> element with the attribute data-testid="todo-item"
• Example of a correctly structured todo item:

<li data-testid="todo-item">
  <span>Todo text</span>
  <div className="timer">00:00</div>
  <button>Start</button>
  <button>Reset</button>
  <button>Delete</button>
</li>

• Each todo should display its text and current time in MM:SS format.
• Each todo should have a labeled Start/Pause, Reset, and Delete buttons.
• The timer should increment every second when running.
• Multiple timers should be able to run simultaneously.

Constraints & Edge Cases

• Todo text should not be empty.
• Empty todos should not be added to the list.
• Deleting an item should not affect the remaining list or their timers.
• Pausing a timer should stop it from incrementing until resumed.
• Resetting a timer should set it to 00:00 and stop it.
• All operations should update the UI immediately.
• Timers should continue running even when other todos are being manipulated.

Implementation Details

• Use React hooks for state management.
• Implement proper cleanup for timers to prevent memory leaks.
• Format time display in MM:SS format (e.g., "01:45" for 1 minute and 45 seconds).
• Use appropriate styling to distinguish between running and paused timers.

Expected Output

A functional todo list application where:

• Users can add new todos
• Each todo has its own independent timer
• Timers can be started, paused, and reset
• Todos can be deleted
• The UI updates in real-time as timers increment

Reference UI