Stopwatch

[jsartisan]

Info

difficulty: medium
title: Stopwatch
type: question
template: react
tags: react, ui-coding

Question

Create a stopwatch component that tracks elapsed time. It should display the current timer and provide two buttons: Start/Stop and Reset.

Specifications

• Start/Stop: Toggles the stopwatch between running and paused states.
• Reset: Stops the stopwatch and resets the time to zero.
• Display: Show elapsed time in seconds with millisecond precision.
• Click-to-Toggle: Clicking the timer itself should also start/stop the stopwatch, with the button label updating to match the state.
• Format the display as hh:mm:ss:ms.

Template

template.react.md

import { Stopwatch } from "./Stopwatch";

export default function App() {
  return <Stopwatch />
}

export function Stopwatch() {
  return (
    <div>
      <p>0s 00ms</p>
      <div>
        <button>Start</button> <button>Reset</button>
      </div>
    </div>
  );
}

[github-actions]

#532 - Pull Request updated.