How to Create Stopwatch by using HTML, CSS & JavaScript
Hi to all, in this article I am going to tell you all about how to create stopwatch by using HTML, CSS and JavaScript easily in just few minutes.
So, read this article carefully and completely to get clear understanding about creating stopwatch web app easily without any errors or issues.
What is stopwatch?
Basically stopwatch is a time piece created to measure the amount of time that elapses between it's activation and deactivation and a special watch with three buttons i.e. Start, Stop, and Reset.
Steps to Create Stopwatch by using Pure JavaScript
Please follow the below provided steps carefully and create your own stopwatch web app easily in just few minutes:
- First of all you need to open any code editor (Here I am using VS Code to edit).
- You need to create new folder with any name "Stopwatch_App".
- Create a file with a name of index and extension should be .html (index.html).
- Create a file with a name of style and extension should be .css (style.css).
- Create a file with a name of script and extension should be .js (script.js).
- Now you have to add the codes in respective files as shown below.
Adding HTML
First of all you need to open "index.html" file from the folder.
Paste the below provided HTML code inside the file.
Save the file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=1">
<title>Home</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div>
<h1>STOPWATCH</h1>
<div class="coutn-box">
<span id="sec">00</span>:<span id="msec">00</span>
</div>
<button id="startBtn">Start</button>
<button id="stopBtn">Stop</button>
<button id="resetBtn">Reset</button>
</div>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>
Adding CSS
Here you need to open "style.css" file from the folder.
Paste the below provided CSS code inside the file.
Save the file.
*,*:after,*:before{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
body{
font-family: arial;
font-size: 16px;
margin: 0;
background: #0276ad;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
text-align: center;
}
h1{
font-size: 66px;
letter-spacing: 5px;
font-weight: 400;
}
.coutn-box{
width: 400px;
text-align: center;
padding: 30px;
background: #024c6f;
font-size: 100px;
font-weight: 700;
border-radius: 20px;
margin: 0 auto 30px;
}
button{
border: 0;
padding: 10px 29px;
border-radius: 10px;
background-color: #012f45;
color: #fff;
font-size: 20px;
text-transform: uppercase;
margin: 0 4px;
}
button:hover{
background-color: #0da1e8;
}
Adding JavaScript
Now you need to open "script.js" file from folder.
Paste the below provided JavaScript code inside the file.
Save the file.
window.onload = function () {
var seconds = 0,
milliseconds = 0,
msec = document.getElementById("msec"),
sec = document.getElementById("sec"),
startBtn = document.getElementById('startBtn'),
stopBtn = document.getElementById('stopBtn'),
resetBtn = document.getElementById('resetBtn'),
Interval ;
startBtn.onclick = function() {
clearInterval(Interval);
Interval = setInterval(startTimer, 10);
}
stopBtn.onclick = function() {
clearInterval(Interval);
}
resetBtn.onclick = function() {
clearInterval(Interval);
milliseconds = "00";
seconds = "00";
msec.innerHTML = milliseconds;
sec.innerHTML = seconds;
}
function startTimer () {
milliseconds++;
if(milliseconds <= 9){
msec.innerHTML = "0" + milliseconds;
} if (milliseconds > 9){
msec.innerHTML = milliseconds;
} if (milliseconds > 99) {
console.log("seconds");
seconds++;
sec.innerHTML = "0" + seconds;
milliseconds = 0;
msec.innerHTML = "0" + 0;
} if(seconds > 9){
sec.innerHTML = seconds;
}
}
}
You have successfully created your own stopwatch web app easily by using HTML, CSS and Pure JavaScript.
Demo
Conclusion
I hope that you all have understood about creating stopwatch by using HTML, CSS and Pure JavaScript easily without any issue.
I you ran into an issue then please ask your quires through contact page.
