Build this JS STOPWATCH in 18 minutes! ⏱

[@BroCodez]

// STOPWATCH PROGRAM const display = document.getElementById("display"); let timer = null; let startTime = 0; let elapsedTime = 0; let isRunning = false; function start(){ if(!isRunning){ startTime = Date.now() - elapsedTime; timer = setInterval(update, 10); isRunning = true; } } function stop(){ if(isRunning){ clearInterval(timer); elapsedTime = Date.now() - startTime; isRunning = false; } } function reset(){ clearInterval(timer); startTime = 0; elapsedTime = 0; isRunning = false; display.textContent = "00:00:00:00"; } function update(){ const currentTime = Date.now(); elapsedTime = currentTime - startTime; 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"); display.textContent = `${hours}:${minutes}:${seconds}:${milliseconds}`; } Document Stopwatch 00:00:00:00 Start Stop Reset body{ display: flex; flex-direction: column; align-items: center; background-color: hsl(0, 0%, 90%); } #myH1{ font-size: 4rem; font-family: "Arial", sans-serif; color: hsl(0, 0%, 25%); } #container{ display: flex; flex-direction: column; align-items: center; padding: 30px; border: 5px solid; border-radius: 50px; background-color: white; } #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; } #startBtn{ background-color: hsl(115, 100%, 40%); } #startBtn:hover{ background-color: hsl(115, 100%, 30%); } #stopBtn{ background-color: hsl(10, 90%, 50%); } #stopBtn:hover{ background-color: hsl(10, 90%, 40%); } #resetBtn{ background-color: hsl(205, 90%, 60%); } #resetBtn:hover{ background-color: hsl(205, 90%, 50%); }

[@chesslars]

It would be nice if i could copy it

[@Loomisheep]

Thank you for this project! I added 2 more buttons to make it more challenging: one to list the times and the other to remove them This was a fun project to make, thank you again!

[@Nati-je8db]

paste your code to us if you have it

[@Ard1023]

It ıs very informational When watching someone while He is doing the job . i think learning that way better in some way

[@aleksandarfischer2242]

Thank you so much for your great videos! The amount of knowledge you are sharing for free is truely amazing and deeply apreciated!

[@yoyee8004]

Your videos bring me joy

[@LiceoVillaFontana1]

That was very good. It is a simple example that introduces a number of not so elementary stuff in a very logical way... Cool

[@salad333]

Thank you bro. You're super talented and a good teacher. ❤...... I wish you have a discord channel so I can ask you something about my career advice.

[@wanisfcb137]

I've been waiting for this video for a long time, thank you ❤

[@shaaliyana]

🤜🤜🤜🤙🤙🤙🤙👏👏👏👏thanks for good work in making stopwatch but your not only a teacher but also your a developer in codes thanks bro.

[@teacup5640]

"We use flexbox because I like flex" This man's arguments made me sweat respectfully

[@LukaszButch]

Hey Bro! Than you for your hard work. I have a question: I made it like below, but without "isRunning" parameter and seems to be working. What is this parameter and if function for in here?

[@kartikshivankar1943]

Can u please do a series on data science full course , it will be very helpful, its a kind request 🙏🙏🙏🙏 And thank u so much for ur work and efforts that u have been providing to people like me who cant afford to get paide course...love from India 🇮🇳 🫡🫡🤜🤛🫂

[@PraneeshRV-g2l]

double click start and you encounter a bug, cant stop it and reseting it gives garbage value in timer how do i fix it?

[@available2574]

Bro Please make a video react JS full course with a single video. Look like JavaScript course. Bye the way, you are not only good but also better and best teacher.

[@vice-108]

Let's try making Rock Paper Scissors game in JS 😏

[@BroCodez]

Already working on it

[@francogamer97]

Hey! love the video! im just starting the 8hours long js video and is amazing, will you do a compilation with this video and the lastest js ones too?

[@tone2812]

😭😭 bruh I was just following your old JS stopwatch tutorial omg

[@pjm4364]

stop and reset buttons aren’t working tho I did everything correct, any solutions?

[@ronaldoromerovergel8373]

it doesnt work... and the worst part is i dont know why..

[@brenthardt]

At the end, before dollar $ign use backtick `

[@IsThisReallySomeone]

I build it upon and I have icons and hiding buttons

[@MafiaQueen365]

Bro my timer ain't timing😐 any solutions please I'd really appreciate🙃🙂

[@ykfazzz]

Can you make a JS chatting app please ?

[@RadwanBenmoussa-n6t]

I did not understood java script 😢,please help me

[@himani1769]

thank you

[@AncientWonders-g5q]

Why let timer = null;?

[@kigamboni-dsm]

[@ipsnaveennayak6702]

$symbol not working

[@musaismail3854]

You have to use back ticks `` to use string literals($={}) to actually work

[@Ragehunter]

goated

[@RayquanRogers]

I don’t understand the math in the JS code

[@greenpikles7536]

can

[@murariram2881]

sorry to say but i didn't understand

[@novideo7316]

Us

[@shashank3374]

Small change in js start fn code If( !isRunning ) { // Rest of code isRunning= true }

[@vice-108]

Hello Bro 🙂