Stopwatch in React
Markus Wedler
Posted on August 7, 2022
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 millisecondelapsedTime
=Date.now()
-startTime
andtime
=stopTime
+elapsedTime
which is the same aselapsedTime
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
Posted on August 7, 2022
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.