Hello readers, welcome to another blog post, today we will learn to Create Stopwatch in HTML CSS, and JavaScript as you know I have created lots of useful JavaScript projects and you are showing so much love for them
Stopwatch watch is like a watch that shows us the time from zero. Stopwatch is mostly used in the competition or personal use to know that time we took to do some activities.
As you can see on the given image of your project [Stopwatch in HTML CSS and JavaScript], generally stopwatch contains three buttons as on the image. One button is for to start time, the second is for stop the time and the third is for resetting the time. Our stopwatch can show us time till the hour.
Let’s see the real demo of this stopwatch timer and try to get some ideas about all the codes that I have used to make this stopwatch using HTML CSS and javascript.
Create Stopwatch in HTML CSS and JavaScript
I have provided all the HTML CSS and JavsScript code below, before jumping into the code, you need to know some basic things about this video tutorial of this stopwatch.
As we have seen on the video tutorial of this stopwatch. At first, we saw all the time in the stopwatch is in zero condition. When I clicked on the start button the millisecond time starts to increase from 0 to a hundred and when it crosses the second number increased by one and the milliseconds number comes in its initial condition.
When the second’s number cross 60 seconds, the minute number increases by one, and the minute number comes in its initial condition which is one. As like this when the minute number cross the 60 number increases by one and the minute number comes to its initial condition which is on.
To make this stopwatch times I have used only HTML CSS and JavsSctipt code and you can download those code forms below.
You Might Like This
Stopwatch Timer [Source Code]
<!DOCTYPE html>
<!-- Coding By CodingNepal - codingnepalweb.com -->
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title> Stopwatch Timer application | CodingLab </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="time">
<span class="hour">00</span>
<span class="colon">:</span>
<span class="minute">00</span>
<span class="colon">:</span>
<span class="second">00</span>
<span class="colon ms-colon">:</span>
<span class="millisecond">00</span>
</div>
<div class="buttons">
<button class="start">Start</button>
<button class="stop">Stop</button>
<button class="reset">Reset</button>
</div>
</div>
<script>
let hr = min = sec = ms = "0" + 0,
startTimer;
const startBtn = document.querySelector(".start"),
stopBtn = document.querySelector(".stop"),
resetBtn = document.querySelector(".reset");
startBtn.addEventListener("click", start);
stopBtn.addEventListener("click", stop);
resetBtn.addEventListener("click", reset);
function start() {
startBtn.classList.add("active");
stopBtn.classList.remove("stopActive");
startTimer = setInterval(()=>{
ms++
ms = ms < 10 ? "0" + ms : ms;
if(ms == 100){
sec++;
sec = sec < 10 ? "0" + sec : sec;
ms = "0" + 0;
}
if(sec == 60){
min++;
min = min < 10 ? "0" + min : min;
sec = "0" + 0;
}
if(min == 60){
hr++;
hr = hr < 10 ? "0" + hr : hr;
min = "0" + 0;
}
putValue();
},10); //1000ms = 1s
}
function stop() {
startBtn.classList.remove("active");
stopBtn.classList.add("stopActive");
clearInterval(startTimer);
}
function reset() {
startBtn.classList.remove("active");
stopBtn.classList.remove("stopActive");
clearInterval(startTimer);
hr = min = sec = ms = "0" + 0;
putValue();
}
function putValue() {
document.querySelector(".millisecond").innerText = ms;
document.querySelector(".second").innerText = sec;
document.querySelector(".minute").innerText = min;
document.querySelector(".hour").innerText = hr;
}
</script>
</body>
</html>
/* Google fonts import link */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins',sans-serif;
}
body{
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #7D2Ae8;
}
.wrapper{
user-select: none;
}
.wrapper .time{
height: 100px;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px;
box-shadow: 10px 10px 20px rgba(0,0,0,0.09);
padding: 0 10px;
}
.wrapper .time span{
width: 100px;
text-align: center;
font-size: 50px;
font-weight: 500;
color: #333;
}
.time span.colon{
width: 10px;
}
.time span.ms-colon,
.time span.millisecond{
color: #7D2Ae8;
}
.wrapper .buttons{
text-align: center;
margin-top: 20px;
}
.buttons button{
padding: 6px 16px;
outline: none;
border: none;
margin: 0 5px;
color: #7D2Ae8;
background: #fff;
font-size: 19px;
font-weight: 500;
border-radius: 4px;
cursor: pointer;
box-shadow: 10px 10px 20px rgba(0,0,0,0.09);
}
.buttons button.active,
.buttons button.stopActive{
pointer-events: none;
opacity: 0.7;
}
If you face any difficulties while creating your Stopwatch Application or your code is not working as expected, you can download the source code files for this Stopwatch Application for free by clicking on the download button, and you can also view a live demo of this card slider by clicking on the view live button.
