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

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

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!

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.

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?

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.

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

thank you

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

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

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

Can you make a JS chatting app please ?

$symbol not working

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

can

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

Hello Bro 🙂