Build a Stopwatch using React in 20 minutes! ⏱

[@BroCodez]

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%); }

[@RealRower1]

hey Bro Code can you make a course about lua @BroCodez

[@avanguly4843]

i dont think he plays roblox lil bro@@RealRower1

[@l213dhanesh3]

Where are u code bro help me with angular js..... Missing u bro mava

[@-_SleepAndEat_-]

Bro can you do Kali Linux ?

[@YoniYo12]

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

[@tofu7736]

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 💜💜💜💜💜

[@nesa6582]

Its over, it is only 4h. :D

[@syedmajid3202]

Thanks a lot, i completed your react course today, i learned alot from your tutorials, keep making new videos! 👍👍👍

[@premkulkarni7578]

Thankyouuu , Finally wrapped up with react playlist (It took quite long for me to complete this but yeah totally worth watching it once again thankyouuu sooo muchhh...) feels bit confident about react after this

[@حذيفةأحمد]

i start switching the milliseconds to the logical time from the smaller unit to the bigger one, so it can be easy to read and understand : function formatTime() { let millieSeconds = Math.floor((elapsedtime / 10) % 100); let seconds = Math.floor(elapsedtime / 1000); let minutes = Math.floor(seconds / 60); let hours = Math.floor(minutes / 60); return `${hours}:${minutes}:${seconds}:${millieSeconds}`; } it give the same result.

[@Dylan12kpo1k2pDylan]

You beautiful man, keep adding to this playlist

[@ejebeueh9113]

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

[@RadheKrishno-xr8ew]

Let the good things be with us 😁

[@fahimsium1013]

Respect and love,brother. timer func is really crazy with setInterval

[@abdulbasit9364]

Bro you drop ur crown 👑❤

[@samaali6589]

Keep it up! Appreciate the efforts

[@syedmajid3202]

Thanks a lot bro, keep making new videos, please make a tutorials on node.js and express.js!

[@siddhantraj9425]

Thanks man. Helped a lot

[@vanshgoyal-uo5cf]

superb tutorial bro

[@hinatashoyo3891]

BRO CAN WE GO AHEAD OF THIS NOW!!!! PLEAASEE

[@ranjithkumar7896]

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

[@cobragaming-jv7iz]

Baga cheppara bro

[@rishabhkedia9304]

Please make Reactjs projects as well

[@yogii1108]

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

[@Ashwini243]

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?

[@Prateek_Mantry]

useRef is used to stop re-rendering your component when the variable(ref) is changed, which is not possible using useState().

[@ideology8323]

Thank you bro!

[@Prateek_Mantry]

Hi Bro....Please make more videos.

[@حذيفةأحمد]

شكرا صديقي

[@AbdalazezALBOGA]

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

[@worldnothing1928]

bro are bringing backend development also

[@arkartm9989]

True Chad bro..❤

[@HabibHaris-fe7fy]

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

[@BrunoTran-q6q]

this is the end :( Can we have more react tutorials please ? :(

[@astartesidon609]

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?

[@tasfin660]

I want more react videos

[@java_learn6447]

Sir please upload react form validations

[@Delicatamente]

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?

[@IgorTr]

every useState update causes a re-render. So in a case like this, where you have to re-render a lot, it would be best to try and make the part of your app that relies on that state as simple and tiny as possible, so you don't re-render more parts of your app than you have to.

[@RealRower1]

hey Bro Code can you make a course about lua

[@RealRower1]

ye but atleast he has something to post about and i think he is gonna get alot of views because lot of people want to learn lua for game dev in roblox and there is not a good course to learning it so he will be the first

[@mohammedshehinthoombil1610]

can you make redux tutorial

[@BishanTamang-rk5ji]

Make java 2024 plz bro code love from Nepal 💓💓

[@gayantha6654]

why elapsed time declared as a state variable? cannot use ref variable instead??

[@OffsideFX_7]

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

[@1CDzy]

look at the documentation on JS, maybe it will help

[@anandv1391]

Mbuf

[@abhishekagrawal1236]

Is it full course?

[@1CDzy]

bro, please do C# on NET. development

[@ejebeueh9113]

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

[@aman1589]

did u install live server?

[@reynaldobuscagan7731]

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

[@yaroslavluchko8492]

this is VSCode

[@something636-rr]

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

[@_amonimus_]

bro how many languages do you know

[@udoydas6513]

bro advance topics please

[@l4n1skyy]

i love you

[@jacklagos936]

Bring parallax plz

[@Beanbag59]

Do u tutor