How to make a stopwatch in basic javascript with laps! | Code Fingers

Today in this video we will learn how to make a stopwatch in javascript.
This stopwatch also features the lap button. It is very simple to make and does not take any time at all!

Comment down if you would like more videos like this.

Song: Sapajou - Toch
Music provided by Vlog No Copyright Music.
Creative Commons - Attribution 3.0 Unported

All the CSS code :
(Note: The fonts were preinstalled on my pc)

body {
height: 100vh;
margin: 40px 0px 0px 0px;
background-color: #58e065;
display: flex;
justify-content: center;
overflow: hidden;
}

.display {
display: flex;
left: 50%;
align-items: center;
justify-content: center;
font-family: "nunito","poppins", sans-serif;
font-weight: 700;
font-size: 60px;
color: white;
text-shadow: 3px 3px 0px rgba(150, 150, 150, 1);
}

p {
margin: 5px;
}

.buttons {
display: flex;
justify-content: center;
}

button {
cursor: pointer;
height: 30px;
width: 80px;
border: none;
outline: none;
border-radius: 4px;
background-color: #3b85ed;
font-family: "nunito","poppins", sans-serif;
font-size: 18px;
font-weight: 700;
color: white;
box-shadow:
1px 1px 0px #224f8f,
2px 2px 0px #224f8f,
3px 3px 0px #224f8f,
4px 4px 0px #224f8f;

margin: 8px;
transform: translate(-4px, 4px);

}
button:hover {
box-shadow: none;
transform: translate3d(4px, 4px, 0px);
background-color: #224f8f;
transition-duration: 100ms;
transition-property: all;
}

h1 {
background-color: #ff961d;
display: flex;
justify-content: center;
margin: 30px;
font-family: "nunito", "poppins", sans-serif;
font-size: 40px;
font-weight: 700;
color: white;
text-shadow: 3px 3px 0px rgba(150, 150, 150, 1);
border-radius: 10px;
box-shadow: 3px 3px 0px rgb(179, 101, 0);
}

#header {
width: 100%;
height: 100px;
position: sticky;
}

#lapRecord {
margin-top: 20px;
}

#laps {
scroll-behavior: smooth;
background-color: #ff961d;
border-radius: 6px;
height: 15rem;
font-family: "nunito", "poppins", sans-serif;
font-size: 40px;
font-weight: 700;
text-shadow:
3px 3px 0px rgba(150, 150, 150, 1);

text-align: center;
color: white;
overflow-y: scroll;
box-shadow: 4px 4px 0px #be7016;
}
#laps::-webkit-scrollbar {
width: 10px;
}
#laps::-webkit-scrollbar-track {
background-color: transparent;
border-radius: 6px;
}
#laps::-webkit-scrollbar-thumb {
background-color: #3b85ed;
border-radius: 6px;
}
#laps::-webkit-scrollbar-thumb:hover {
background-color: #224f8f;
border-radius: 6px;
}

.display {
padding: 0px 20px;
border: 4px solid white;
border-radius: 16px;
}

[codefingers]

Guys here's an edit. At 4:54 in the video all those display values are assigned value of hours that is wrong. It should just be:
let displayHours;
let displayMins;
let displaySec;
let displayMilisec;
It will still work fine without this but its better to remove that. Thanks!

[movieshorts]

This is the only correct video regarding stopwatch . Otherwise all have bugs in their stopwatch program. And your codes are understandable too . Thnks bruh

[boguslawsawicki]

Where can I find "wrapper" class in css ?

[nabijonov_a]

Hi, can u plz send all html and js codes from this video?