Build a Stopwatch using React in 20 minutes! ⏱

Рет қаралды 40,334

Күн бұрын

Пікірлер: 51

@BroCodez 10 ай бұрын

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 10 ай бұрын

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

@avanguly4843 10 ай бұрын

i dont think he plays roblox lil bro@@RealRower1

@l213dhanesh3 10 ай бұрын

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

@-_SleepAndEat_- 7 ай бұрын

Bro can you do Kali Linux ?

@YoniYo12 7 ай бұрын

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

@ejebeueh9113 10 ай бұрын

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

@RadheKrishno-xr8ew 10 ай бұрын

Let the good things be with us 😁

@Dylan12kpo1k2pDylan 10 ай бұрын

You beautiful man, keep adding to this playlist

@tofu7736 10 ай бұрын

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 10 ай бұрын

Its over, it is only 4h. :D

@fahimsium1013 2 ай бұрын

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

@rishabhkedia9304 10 ай бұрын

Please make Reactjs projects as well

@syedmajid3202 2 ай бұрын

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

@hinatashoyo3891 3 ай бұрын

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

@yogii1108 8 ай бұрын

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

@Ashwini243 9 ай бұрын

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 8 ай бұрын

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

@worldnothing1928 10 ай бұрын

bro are bringing backend development also

@HabibHaris-fe7fy 9 ай бұрын

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

@abdulbasit9364 7 ай бұрын

Bro you drop ur crown 👑❤

@ranjithkumar7896 9 ай бұрын

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

@cobragaming-jv7iz 6 ай бұрын

Baga cheppara bro

@Prateek_Mantry 8 ай бұрын

Hi Bro....Please make more videos.

@java_learn6447 9 ай бұрын

Sir please upload react form validations

@AbdalazezALBOGA 8 ай бұрын

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

@samaali6589 6 ай бұрын

Keep it up! Appreciate the efforts

@Delicatamente 7 ай бұрын

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?

@vanshgoyal-uo5cf 4 ай бұрын

superb tutorial bro

@mohammedshehinthoombil1610 4 ай бұрын

can you make redux tutorial

@astartesidon609 6 ай бұрын

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?

@its-SK 10 ай бұрын

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

@1CDzy 10 ай бұрын

look at the documentation on JS, maybe it will help

@anandv1391 7 ай бұрын

Mbuf

@1CDzy 10 ай бұрын

bro, please do C# on NET. development

@RealRower1 10 ай бұрын

hey Bro Code can you make a course about lua

@RealRower1 10 ай бұрын

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

@tasfin660 6 ай бұрын

I want more react videos

@siddhantraj9425 7 ай бұрын

Thanks man. Helped a lot

@BishanTamang-rk5ji 10 ай бұрын

Make java 2024 plz bro code love from Nepal 💓💓

@ejebeueh9113 10 ай бұрын

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 10 ай бұрын

did u install live server?