StopwatchLoading saved progress…

Stopwatch

Build a stopwatch with start, stop, and reset. The catch that trips people up: don't measure time by counting interval ticks (they drift and pause when the tab is throttled). Measure it from the wall clock — record when you started and compute elapsed = Date.now() - origin. The interval only exists to refresh the display.

Signature

// A self-contained component. No props.
function App(): JSX.Element;

A time display (mm:ss.cs) and Start / Stop / Reset controls.

Examples

Start -> display counts up in real time
Stop  -> display freezes at the elapsed value
Start again -> resumes from where it stopped (not from 0)
Reset -> back to 00:00.00

Notes

  • Wall-clock, not tick-counting. elapsed = Date.now() - origin; an interval that adds +10ms per tick drifts.
  • Resume correctly. On Start, set origin = Date.now() - elapsed so the count continues from the frozen value.
  • Interval is just for rendering. It re-reads the clock (every ~50ms); clear it on Stop/unmount.
  • Format mm:ss.cs. Minutes, seconds, and centiseconds, each zero-padded.
Loading editor…
Loading preview…