In this article, we will learn How To Make a Stopwatch In Javascript. Of course, we will use some HTML, CSS but main role will be of JavaScript. This stopwatch will have three buttons and a timer, buttons will be for starting time, for pausing time, and last will be for restarting the timer. It is a very basic and beginner-friendly project so if you’re new to HTML, CSS, and JavaScript, that you also can make it very easily.
Pre-requisites To Make Stopwatch In JavaScript
- Basic knowledge of HTML.
- Basic knowledge of CSS.
- Good knowledge of JavaScript.
Creating Basic Structure for Stopwatch
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stopwatch</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="wrapper">
<p>
<span class="mins">00</span>:<span class="seconds">00</span>:<span class="tens">00</span>
</p> <br>
<button class="btn-start">Start</button>
<button class="btn-stop">Stop</button>
<button class="btn-reset">Reset</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600&display=swap');
*{
margin: 0;
padding: 0;
font-family: 'Source Sans Pro', sans-serif;
}
.container{
background-color: #222242;
height: 100vh;
width: 100%;
text-align: center;
position: absolute;
}
.wrapper{
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}First of all, we will include all the required elements here like spans for timer and three buttons, This is what we have to add for our HTML file, also we have included our CSS and JS file here. Now let’s set this structure to the center, for that we have used text-align to center. And we have repositioned it with top and left property, Then we have used transform property to place all elements in the center of the screen. Of course, we have set our background with #222242 color.
Styling and Animating The Timer
.wrapper p{
position: relative;
display: inline-block;
color: #ffffff;
z-index: 99;
font-size: 48px;
margin-bottom: 120px;
}
.wrapper p::before{
content: '';
position: absolute;
width: 200px;
height: 200px;
background-color: #151538;
z-index: -1;
border-radius: 50%;
left: -10%;
top: -118%;
animation-name: shine;
animation-duration: 3s;
animation-iteration-count: infinite;
}
@keyframes shine{
0%,100%{
box-shadow: 0px 0px 32px -12px rgba(246, 180, 0, .5);
}
50%{
box-shadow: 0px 0px 32px 3px rgba(246, 180, 0, .5);
}
}Now lets style our timer, before that we have gave white color to timer, so it will visible. We have put the timer into the inline block, so the timer will be in a square block. Then we have provided z-index which is pretty huge number, but it is not necessary you can simply give any number more than 1.
After that, in before element we have gave some background color, and here we have z-index to -1, so this element would be behind of our timer and other elements. Now we have set border-radius to 50%, so the square block will get turn in to a circle. Lastly, we have added some animations to this block with 3 seconds duration for infinite times.
In animation part, we are just applying the box shadow with some colors.
Styling Buttons
button{
background-color: #222242;
padding: 10px 38px;
border: 1px solid #A9A9A9;
border-radius: 28px;
color: #fff;
transition: all .2s ease;
outline: 0;
}
button:not(:last-child){
margin-right: 20px;
}
button:hover,
button:focus
{
border-color: #F6B400;
color: #F6B400;
box-shadow: 0px 4px 27px -12px #F6B400;
}Now for buttons, we have gave same basic styles, and we have also added margin from right except last button. Also, we have added focus and hover effects we with border, color and box-shadow colors.
Adding Functionalities To Buttons
let seconds = 00;
let tens = 00;
let mins = 00;
let getSeconds = document.querySelector('.seconds');
let getTens = document.querySelector('.tens');
let getMins = document.querySelector('.mins');
let btnStart = document.querySelector('.btn-start');
let btnStop = document.querySelector('.btn-stop');
let btnReset = document.querySelector('.btn-reset');
let interval;
btnStart.addEventListener('click', () => {
clearInterval(interval);
set = setInterval(startTimer, 10);
})
btnStop.addEventListener('click', () => {
clearInterval(set);
})
btnReset.addEventListener('click', () => {
clearInterval(set);
tens = '00';
seconds = '00';
mins = '00';
getSeconds.innerHTML = seconds;
getTens.innerHTML = tens;
getMins.innerHTML = mins;
})
function startTimer(){
tens++;
if(tens <= 9){
getTens.innerHTML = '0' + tens;
}
if(tens > 9){
getTens.innerHTML = tens;
}
if(tens > 99){
seconds++;
getSeconds.innerHTML = '0' + seconds;
tens = 0;
getTens.innerHTML = '0' + 0;
}
if(seconds > 9){
getSeconds.innerHTML = seconds;
}
if(seconds > 59){
mins++;
getMins.innerHTML = '0' + mins;
seconds = 0;
getSeconds.innerHTML = '0' + 0;
}
if(mins > 9){
getSeconds.innerHTML = mins;
}
}
In JavaScript part, we have got all necessary elements using querySelector. Now for start button, we have added an onClick event listener in which we are calling a function startTimer. In this function, we are checking conditions for tens if they are less than 9 then we will put the 0 before the tens, if it is greater than 9 then we don’t need 0 before it.
If tens greater than 99 then we need to increment a second and reset tens to 0, also we require 0 before the seconds if it is less than 9. After that, if seconds greater than 9 then we will put seconds as it is. And seconds passes the 59 then we will increment the minute. Again we will put the 0 if minute less than 9 otherwise we will remove it.
For stop button, we just need to stop the timer, we have used here clearInterval(set) to stop timer. And lastly, we need to reset timer, for that we have assigned 0 value to each of the value, and we have printed on screen using innerHTML.
Full Source Code of How To Make a Stopwatch In JavaScript
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stopwatch</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="wrapper">
<p>
<span class="mins">00</span>:<span class="seconds">00</span>:<span class="tens">00</span>
</p> <br>
<button class="btn-start">Start</button>
<button class="btn-stop">Stop</button>
<button class="btn-reset">Reset</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>style.css
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600&display=swap');
*{
margin: 0;
padding: 0;
font-family: 'Source Sans Pro', sans-serif;
}
.container{
background-color: #222242;
height: 100vh;
width: 100%;
text-align: center;
position: absolute;
}
.wrapper{
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.wrapper p{
position: relative;
display: inline-block;
color: #ffffff;
z-index: 1;
font-size: 48px;
margin-bottom: 120px;
}
.wrapper p::before{
content: '';
position: absolute;
width: 200px;
height: 200px;
background-color: #151538;
z-index: -1;
border-radius: 50%;
left: -10%;
top: -118%;
animation: shine 3s infinite;
}
@keyframes shine{
0%,100%{
box-shadow: 0px 0px 32px -12px rgba(246, 180, 0, .5);
}
50%{
box-shadow: 0px 0px 32px 3px rgba(246, 180, 0, .5);
}
}
button{
background-color: #222242;
padding: 10px 38px;
border: 1px solid #A9A9A9;
border-radius: 28px;
color: #fff;
transition: all .2s ease;
outline: 0;
}
button:not(:last-child){
margin-right: 20px;
}
button:hover,
button:focus
{
border-color: #F6B400;
color: #F6B400;
box-shadow: 0px 4px 27px -12px #F6B400;
}script.js
let seconds = 00;
let tens = 00;
let mins = 00;
let getSeconds = document.querySelector('.seconds');
let getTens = document.querySelector('.tens');
let getMins = document.querySelector('.mins');
let btnStart = document.querySelector('.btn-start');
let btnStop = document.querySelector('.btn-stop');
let btnReset = document.querySelector('.btn-reset');
let interval;
btnStart.addEventListener('click', () => {
clearInterval(interval);
set = setInterval(startTimer, 10);
})
btnStop.addEventListener('click', () => {
clearInterval(set);
})
btnReset.addEventListener('click', () => {
clearInterval(set);
tens = '00';
seconds = '00';
mins = '00';
getSeconds.innerHTML = seconds;
getTens.innerHTML = tens;
getMins.innerHTML = mins;
})
function startTimer(){
tens++;
if(tens <= 9){
getTens.innerHTML = '0' + tens;
}
if(tens > 9){
getTens.innerHTML = tens;
}
if(tens > 99){
seconds++;
getSeconds.innerHTML = '0' + seconds;
tens = 0;
getTens.innerHTML = '0' + 0;
}
if(seconds > 9){
getSeconds.innerHTML = seconds;
}
if(seconds > 59){
mins++;
getMins.innerHTML = '0' + mins;
seconds = 0;
getSeconds.innerHTML = '0' + 0;
}
if(mins > 9){
getSeconds.innerHTML = mins;
}
}
Output
