Hello, guys in this tutorial we will create a Stopwatch using HTML CSS, and JavaScript.
Common Query
- How do you make a stopwatch in JavaScript?
- How to create a stopwatch with JavaScript
- JavaScript simple stopwatch
Hello, guys In this tutorial we will try to solve above mention query. and also we will learn how to create a Stopwatch using HTML CSS and JavaScript.
First, we need to create three files index.html and style.css then we need to do code for it.
Step:1
Add below code inside index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Create a Stopwatch in JavaScript</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="style.css" />
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@200;300;400&display=swap" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="wrapper">
<div id="stopwatch">00:00:00:00</div>
<ul id="buttons">
<li><button id="start">Start</button></li>
<li><button id="pause">Stop</button></li>
<li><button id="reset">Reset</button></li>
</ul>
</div>
<script>
const watch = document.querySelector("#stopwatch");
let millisecound = 0;
let timer;
function timeStart(){
watch.style.color = "#0f62fe";
clearInterval(timer);
timer = setInterval(() => {
millisecound += 10;
let dateTimer = new Date(millisecound);
watch.innerHTML =
('0'+dateTimer.getUTCHours()).slice(-2) + ':' +
('0'+dateTimer.getUTCMinutes()).slice(-2) + ':' +
('0'+dateTimer.getUTCSeconds()).slice(-2) + ':' +
('0'+dateTimer.getUTCMilliseconds()).slice(-3,-1);
}, 10);
}
function timePaused() {
watch.style.color = "red";
clearInterval(timer);
}
function timeReset(){
setInterval(timer)
millisecound = 0;
watch.innerHTML = "00:00:00:00";
}
document.addEventListener('click', (e) => {
const el = e.target;
if(el.id === 'start') timeStart();
if(el.id === 'pause') timePaused();
if(el.id === 'reset') timeReset();
})
</script>
</body>
</html>
Step:2
Then we need to add code for style.css which code I provide in the below screen.
* {
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-family: 'IBM Plex Sans', sans-serif;
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background: #f2f4f6;
}
.wrapper {
width: 400px;
padding: 20px;
background: #fff;
box-shadow: 0 10px 20px rgb(64 64 64 / 5%);
border: 1px solid rgb(64 64 64 / 5%);
}
div#stopwatch {
font-size: 50px;
line-height: 60px;
text-align: center;
padding: 0 0 50px 0;
}
ul#buttons {
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
}
ul#buttons button {
background: #0f62fe;
border: transparent;
width: 100px;
color: #fff;
font-size: 18px;
text-align: left;
display: block;
padding: 10px 0 10px 20px;
cursor: pointer;
}
Stopwatch in JavaScript Video Output:
Stopwatch in JavaScript Codepen Output:
Top comments (3)
Just for your information,
setTimeout()
andsetInterval()
are not very accurate. This is not very apparent since we mostly use it for short periods. Again, I'm not saying this post is wrong, just a little fact.How can I learn to do this kind of projects myself instead of copying the code?
You need to learn JavaScript :)
You can go with W3schools if you are beginner: w3schools.com/js/default.asp