Deviopath › React

Stopwatch with Laps

Hard · Timers

Build a stopwatch that ticks every 100ms.

Render <p className="time">0.0</p> (seconds with one decimal), a button that says "Start" (or "Stop" while running), a "Lap" button, a "Reset" button and an <ol> of laps.

- "Start" starts ticking: every 100ms the time grows by 0.1. "Stop" pauses it.

- "Lap" adds <li>Lap 1: 0.3</li> (lap number and the current time) to the list. It is disabled when the stopwatch is not running.

- "Reset" stops the stopwatch, sets the time back to "0.0" and clears the laps.

Tip: count ticks as an integer and format with (ticks / 10).toFixed(1). Clean up your interval.

Next: Theme Context