Stopwatch in React

markuswedler

Markus Wedler

Posted on August 7, 2022

Stopwatch in React

The Website: Link

I made a stopwatch in React.
The source code is located down below.

❔How it works

We have variables: time which we can see on the display, startTime (the time when we click play button), stopTime = 0 (the time when we click pause/stop button), elapsedTime (the time between start and pause/stop clicks).
1. If you click start and it's 9h00m00s00ms right now
startTime = 9h00m00s00ms. Now every millisecond elapsedTime = Date.now() - startTime and time = stopTime + elapsedTime which is the same as elapsedTime until the first stop.
2. If you click pause button and it's 9h1m20s10ms now
stopTime = time (1m20s10ms). If we click again, we'll return to the first step but it'll start count not from 0s but from 1m20s10ms.
3. If you click reset
All variables are reset and stopwatch stops.
4. If you click lap button
Current time is recorded

The Source Code

GitHub: Link

💖 💪 🙅 🚩
markuswedler
Markus Wedler

Posted on August 7, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related