Build this JS STOPWATCH in 18 minutes! ⏱ 

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

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

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

Your videos bring me joy

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?

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

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

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

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.

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

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.

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 🇮🇳 🫡🫡🤜🤛🫂

Can you make a JS chatting app please ?

bro thanks but where the gdscript4 , bunjs, nim2 , zig , dart ?

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

$symbol not working

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

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

Hello Bro 🙂