Hello Learners, today we will learn how to create a Stopwatch in javascript. This will be a good project for those who are just getting started with javascript.
Check the demo Below.
Let’s first understand the problem statement, In other words, you can say what functionalities we want in our working stopwatch.
- There will be a display for a timer that displays the time and the time gets updated every second.
- There will be three buttons with the name start, stop and reset.
- When a user clicks on the start button the should start and stop when clicked stop, and the last button which will reset the watch to zero.
For doing this project we need three things Javascript, HTML, CSS, and Bootstrap to design buttons. This is a very easy project even if you are a beginner you will understand it right away.
And if not I am here to do so.
Let’s get started with the project breakdown step-by-step to understand it more clearly.
Shall we?
Stopwatch in Javascript (start, stop & reset)
I have taken some variables globally element, count, and mytimer, & status.
element – variable will hold the HTML element where text will be displayed.
count – variable will hold the count values.
status – variable will keep track of when to call the setInterval.
mytimer – will hold the activated interval to use it later to deactivate the setInterval.
1) startClock()
In this startClock function, we will use the counter and increment it every second by 1. This interval is set by a javascript function called setInterval.
setInterval(startClock, 1000) – Here the first parameter will call itself and the interval is set to 1000 milliseconds which is one second.
We have maintained a status var which will be initially activated as 0. When the first call is made the status will be changed to 2.
Why we are doing so? This is done to avoid setting intervals every time the first interval calls itself.
//function to start the watch
function startClock() {
//When first call for the start clock
if (status == 0) {
mytimer = setInterval(startClock, 1000);
status = 2;
}
count++;
element.innerHTML = formatTime(count);
//when stop and reset is activate
if (status == 1) {
mytimer = setInterval(startClock, 1000);
status = 2;
}
}
.
2) stopclock()
In this function, we have used a javascript function called clearInterval().
clearInterval(mytimer) – This function clears the interval which we have created on startClock function with the name mytimer.
//function to stop the watch
function stopClock() {
status = 1;
clearInterval(mytimer);
}
3) resetClock()
In this function, we set to reset the values of count to 0, status as 1 which indicates the stop/reset is activated.
clearInterval(mytimer) – This is called to stop clear the interval activated with the name mytimer.
//function to reset the watch
function resetClock() {
count = 0;
status = 1;
clearInterval(mytimer);
element.innerHTML = formatTime(count);
}
4) formatTime(count)
This function is used to convert the count values to give it a digital clock-like display. For that, we need to convert the count values to minutes, and seconds.
Here, In this project, I have not included hours. But you can add that too with ease.
Minutes- divide the count value by 60 and take the floor value.
Now, for seconds we need to get the remainder after dividing the count value by 60. since % gives the remainder we will do that and get the seconds.
To get the values in double digits for values less than 10 we added 0 to the string.
And finally returned the minutes and seconds.
//function to format the minutes and seconds
function formatTime(count) {
var minute = Math.floor(count / 60);
if (minute < 10) {
minute = '0' + minute;
}
var seconds = count % 60;
if (seconds < 10) {
seconds = '0' + seconds;
}
return minute + " : " + seconds;
}
So, I have explained all the functions used in this stopwatch project. And below I am giving the complete code including CSS and HTML.
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<style>
div.centerbox {
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
h1.timer {
background-image: -webkit-linear-gradient(#5bcbdfe0, rgb(170, 172, 65));
-webkit-background-clip: text;
background-clip:text;
-webkit-text-fill-color: transparent;
}
button.start {
/* background-image: linear-gradient( 73.1deg, rgba(34,126,34,1) 8%, rgba(99,162,17,1) 86.9% ); */
background-image: radial-gradient( circle farthest-corner at -1% 57.5%, rgba(19,170,82,1) 0%, rgba(0,102,43,1) 90% );
}
button.stop {
background-image: radial-gradient(circle farthest-corner at 10% 20%, rgba(247, 87, 0, 1) 0%, rgba(249, 0, 0, 1) 90.1%);
}
button.reset {
background-image: radial-gradient(circle farthest-corner at 10% 20%, rgba(0, 152, 155, 1) 0.1%, rgba(0, 94, 120, 1) 94.2%);
}
</style>
</head>
<body class="bg-dark">
<div class="container row mx-auto mt-auto mb-auto">
<div class="col-md-12 mx-auto w-50 centerbox">
<h1 id="clock" class="text-primary text-center timer" style="font-size: 200px;"> 00 : 00 </h1>
<div class="text-center">
<button onclick="startClock();" class="btn btn-success btn-lg text-light mx-3 start"> START</button>
<button onclick="stopClock();" class="btn btn-danger btn-lg text-light mx-3 stop"> STOP</button>
<button onclick="resetClock();" class="btn btn-secondary btn-lg text-light mx-3 reset"> RESET</button>
</div>
</div>
</div>
<script>
var count = 0;
var status = 0;
var mytimer;
const element = document.getElementById('clock');
//function to format the minutes and seconds
function formatTime(count) {
var minute = Math.floor(count / 60);
if (minute < 10) {
minute = '0' + minute;
}
var seconds = count % 60;
if (seconds < 10) {
seconds = '0' + seconds;
}
return minute + " : " + seconds;
}
//function to start the watch
function startClock() {
//When first call for the start clock
if (status == 0) {
mytimer = setInterval(startClock, 1000);
status = 2;
}
count++;
element.innerHTML = formatTime(count);
//when stop and reset is activate
if (status == 1) {
mytimer = setInterval(startClock, 1000);
status = 2;
}
}
//function to stop the watch
function stopClock() {
status = 1;
clearInterval(mytimer);
}
//function to reset the watch
function resetClock() {
count = 0;
status = 1;
clearInterval(mytimer);
element.innerHTML = formatTime(count);
}
</script>
</body>
</html>
I hope you find this article useful. Let me know in the comments below.
Happy coding.
00 : 00
.
.
){kind=link}