Build a Stopwatch using React in 20 minutes! ⏱ 

import Stopwatch from './Stopwatch.jsx'; function App() { return (); } export default App; import React, {useState, useEffect, useRef} from 'react'; function Stopwatch(){ const [isRunning, setIsRunning] = useState(false); const [elapsedTime, setElapsedTime] = useState(0); const intervalIdRef = useRef(null); const startTimeRef = useRef(0); useEffect(() => { if(isRunning){ intervalIdRef.current = setInterval(() => { setElapsedTime(Date.now() - startTimeRef.current); }, 10); } return () => { clearInterval(intervalIdRef.current); } }, [isRunning]); function start(){ setIsRunning(true); startTimeRef.current = Date.now() - elapsedTime; } function stop(){ setIsRunning(false); } function reset(){ setElapsedTime(0); setIsRunning(false); } function formatTime(){ let hours = Math.floor(elapsedTime / (1000 * 60 * 60)); let minutes = Math.floor(elapsedTime / (1000 * 60) % 60); let seconds = Math.floor(elapsedTime / (1000) % 60); let milliseconds = Math.floor((elapsedTime % 1000) / 10); hours = String(hours).padStart(2, "0"); minutes = String(minutes).padStart(2, "0"); seconds = String(seconds).padStart(2, "0"); milliseconds = String(milliseconds).padStart(2, "0"); return `${minutes}:${seconds}:${milliseconds}`; } return( {formatTime()} Start Stop Reset ); } export default Stopwatch body{ display: flex; flex-direction: column; align-items: center; background-color: hsl(0, 0%, 95%); } .stopwatch{ display: flex; flex-direction: column; align-items: center; border: 5px solid; border-radius: 50px; background-color: white; padding: 30px; } .display{ font-size: 5rem; font-family: monospace; font-weight: bold; color: hsl(0, 0%, 30%); text-shadow: 2px 2px 2px hsla(0, 0%, 0%, 0.75); margin-bottom: 25px; } .controls button{ font-size: 1.5rem; font-weight: bold; padding: 10px 20px; margin: 5px; min-width: 125px; border: none; border-radius: 10px; cursor: pointer; color: white; transition: background-color 0.5s ease; } .start-button{ background-color: hsl(115, 100%, 40%); } .start-button:hover{ background-color: hsl(115, 100%, 35%); } .stop-button{ background-color: hsl(10, 90%, 50%); } .stop-button:hover{ background-color: hsl(10, 90%, 45%); } .reset-button{ background-color: hsl(205, 90%, 60%); } .reset-button:hover{ background-color: hsl(205, 90%, 55%); }

Best project tutorial ever! simple and to the point, thanks Bro

You beautiful man, keep adding to this playlist

So this bro gets 830 views while dancing toys get millions what a shame

Thanks man. Helped a lot

Bro you drop ur crown 👑❤

Please make Reactjs projects as well

Just waiting for 12:00:00 hours React video to come By the way I have watched all the web development courses you’ve been uploading. Thanks bro because of you i can understand and learn web dev. Big heart for BRO ARMY 💜💜💜💜💜

hey bro can u make a course about laravel for beginners u r so good and now i only can learn anything from you thanks a lot

bro are bringing backend development also

Hi, I am based in the USA.I really love your videos and they are interview oriented. Can you explain why you used useRef variable?

please sir make a playlist on PANDAS, NUMPY please🌸 🌺🌼

bro start next js using JavaScript waiting to learn from your channel

Sir please upload react form validations

Hi Bro....Please make more videos.

Bro continue the react series, enjoying it try to upload next videos faster

bro, please do C# on NET. development

so we can conclude that even if we stop the countdown for a couple of minutes still the time in between when we restart still gonna carry over because we based our elapsed time only on a date?

So, technicaly, timer re-renders every 10 miliseconds, just because of changing useState variable "elapsedTime" in Stopwatch component, what provide full re-render of Stopwatch component? Or re-render happens as a result of changing that useState variable "elapsedTime", which is mentioned in function "formatTime", which (this function) is mapped to timer component? And because of this bound React re-renders component? Can someone explain me this technical details?

Make java 2024 plz bro code love from Nepal 💓💓

bro how many languages do you know

Bro please i need help I just started learning jave script and I'm watching your full course so when I linked my css ,js and HTML and tried the same code that you wrote and opened it with live server nothing appeared on the web and its console it says error404 Sorry for my poor words I hope that you understand what I mean, thanks

hey bro code I am facing difficulties while learning js what should i do?

hey Bro Code can you make a course about lua

Hey i just wanted to say your last 5 videos don't appear in my sub feed. What is going on

Hello, I'm a beginner I wonder what app you use, is it html or eclipse?

Bring parallax plz

Do u tutor