Stopwatches are essential tools for timing events, races, and performances, but did you know that you can create one using HTML, CSS, and JavaScript? In this tutorial, we will walk you through the development of a stopwatch with start, stop, and reset buttons.
HTML Code
First, we will create the HTML code for our stopwatch. We will use a simple table structure where each cell represents a digit of time. You can adjust the height and width of the cells to your liking.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stopwatch - Best Timer</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<h2>Stopwatch</h2>
<div id="timedisplay">00:00:00:00</div>
<div class="controls">
<button class="btn" id="stop-btn">Pause</button>
<button class="btn" id="start-btn">Start</button>
<button class="btn" id="reset-btn">Reset</button>
</div>
</div>
<script src="js/script.js"></script>
</body>
</html>
CSS Code
Next, we will add the CSS code that styles the stopwatch. You can customize the colors, font, and size of the digits.
body{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-family: 'Roboto', sans-serif;
background-color: #3598DB;
}
.container{
background-color: #fff;
padding: 30px 30px;
border-radius: 10px;
}
h2{
text-align: center;
font-size: 1.7rem;
}
#timedisplay{
text-align: center;
font-size: 2rem;
margin-bottom: 1.4rem;
background-color: #3598DB;
color: #fff;
padding: 15px 0px;
border-radius: 5px;
}
.btn{
font-size: 1rem;
background-color: #D4E8FF;
color: #3C98FD;
padding: 12px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-weight: bold;
}
.btn:hover,.btn:focus{
background-color: #3C98FD;
color: #D4E8FF;
transition: 0.4s;
}
JavaScript Code
The final step is to add the JavaScript code that makes the stopwatch functional. We will use the setInterval() method to start the stopwatch and count the milliseconds. We will also use the clearInterval() method to stop the stopwatch and reset the time to zero.
let timedisplay = document.getElementById("timedisplay");
let stopBtn = document.getElementById("stop-btn");
let startBtn = document.getElementById("start-btn");
let resetBtn = document.getElementById("reset-btn");
let timer = null;
let [hours,minutes,seconds,milliseconds] = [0,0,0,0];
stopwatch = () => {
milliseconds++;
if(milliseconds == 100){
milliseconds = 0;
seconds++;
}
if(seconds == 60){
seconds = 0;
minutes++;
}
if(minutes == 60){
minutes = 0;
hours++;
}
let hrs = hours < 10 ? ("0"+hours) : hours;
let min = minutes < 10 ? ("0"+minutes) : minutes;
let sec = seconds < 10 ? ("0"+seconds) : seconds;
let millisec = milliseconds < 10 ? ("0"+milliseconds) : milliseconds;
timedisplay.innerHTML = hrs+":"+min+":"+sec+":"+millisec;
}
startBtn.addEventListener("click",() => {
if(timer!=null){
clearInterval(timer);
}
timer = setInterval(stopwatch,10);
})
stopBtn.addEventListener("click",() => {
clearInterval(timer);
})
resetBtn.addEventListener("click",() => {
clearInterval(timer);
[hours,minutes,seconds,milliseconds] = [0,0,0,0];
timedisplay.innerHTML = "00:00:00:00"
})
By using the getelementById method we can access ID of HTML elements, and by using addEventListener method we can add an event to HTML elements. Finally, we have defined functions for starting, stopping, and resetting the stopwatch. We have also added a function called pad() that pads single numbers with a leading zero.
In conclusion, by following these simple steps, you can develop your own stopwatch using HTML, CSS, and JavaScript. You can customize your stopwatch by changing the colors, fonts, and sizes to your liking. Remember to test it out and have fun timing your events. Also You can download the using below download button or can view demo of this project.
