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

[@yoyee8004]

Your videos bring me joy

[@aleksandarfischer2242]

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

[@wanisfcb137]

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

[@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

[@Ard1023]

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

[@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.

[@shaaliyana]

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

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

[@teacup5640]

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

[@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.

[@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?

[@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

[@vice-108]

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

[@BroCodez]

Already working on it

[@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?

[@brenthardt]

At the end, before dollar $ign use backtick `

[@pjm4364]

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

[@MafiaQueen365]

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

[@himani1769]

thank you

[@RadwanBenmoussa-n6t]

I did not understood java script 😢,please help me

[@ykfazzz]

Can you make a JS chatting app please ?

[@AncientWonders-g5q]

Why let timer = null;?

[@IsThisReallySomeone]

I build it upon and I have icons and hiding buttons

[@Ragehunter]

goated

[@ronaldoromerovergel8373]

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

[@kigamboni-dsm]

[@ipsnaveennayak6702]

$symbol not working

[@musaismail3854]

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

[@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 🙂