In this tutorial, we will delve into the concept of an HTML stopwatch.
Stopwatch
The timepiece in question is a unique device featuring either analog hands or a digital display. It incorporates functions like a start button, stop button, and reset button. This device is capable of computing the duration required for specific tasks, such as estimating the time needed to travel a distance of 30 miles at a speed of one hour. Its primary function is to accurately measure time.
Creating a stopwatch is achievable by utilizing HTML, CSS, and JavaScript.
Demonstration for creating a stopwatch:
We are going to build a timer using HTML, CSS, and JavaScript.
Code:
<!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>HTML Stopwatch</title>
<style>
body {
font-family: 'Courier New', Courier, monospace;
background-color: khaki;
margin: 45px;
}
.stopwatch-container {
background-color: black;
width: 500px;
height: 250px;
text-align: center;
}
p {
padding: 15px;
color: plum;
font-size: 24px;
font-weight: 600;
}
.digits {
font-size: 45px;
color: khaki;
}
.text {
font-size: 20px;
color: plum;
font-weight: bold;
}
#buttons {
margin-top: 35px;
}
.button-1, .button-2, .button-3 {
margin: 9px 24px 19px 9px;
padding: 7px 4px 7px 4px;
height: 46px;
width: 85px;
border: 0;
border-radius: 45px;
font-size: 18px;
color: khaki;
cursor: pointer;
transition: 0.5s;
font-weight: 600;
font-family:Verdana, Tahoma, sans-serif;
}
.button-1:hover, .button-2:hover, .button-3:hover{
color: brown;
}
#start {
background-color: plum;
}
#stop {
background-color: darkorchid;
}
#reset {
background-color: purple;
}
#start:hover, #stop:hover, #reset:hover {
background-color: white;
}
</style>
</head>
<body>
<div class= "stopwatch-container">
<p> Stopwatch </p>
<div id= "time">
<span class= "digits" id= "hour">00</span>
<span class= "text">Hr</span>
<span class= "digits" id= "minute">
00</span>
<span class= "text">Min</span>
<span class= "digits" id= "second">00</span>
<span class= "text">Sec</span>
<span class= "digits" id= "count">00</span>
<span class= "text">Millisec</span>
</div>
<div id= "buttons">
<button class= "button-1" id= "start">
Start </button>
<button class= "button-2" id= "stop">
Stop </button>
<button class= "button-3" id= "reset">
Reset </button>
</div>
</div>
<script>
let startButton = document.getElementById('start');
let stopButton = document.getElementById('stop');
let resetButton = document.getElementById('reset');
let hour = 0;
let minute = 0;
let second = 0;
let count = 0;
startButton.addEventListener('click', function () {
timer = true;
stopWatch();
});
stopButton.addEventListener('click', function () {
timer = false;
});
resetButton.addEventListener('click', function () {
timer = false;
hour = 0;
minute = 0;
second = 0;
count = 0;
document.getElementById('hour').innerHTML = "00";
document.getElementById('minute').innerHTML = "00";
document.getElementById('second').innerHTML = "00";
document.getElementById('count').innerHTML = "00";
});
function stopWatch() {
if (timer) {
count++;
if (count == 100) {
second++;
count = 0;
}
if (second == 60) {
minute++;
second = 0;
}
if (minute == 60) {
hour++;
minute = 0;
second = 0;
}
let hourString = hour;
let minuteString = minute;
let secondString = second;
let countString = count;
if (hour < 10) {
hourString = "0" + hourString;
}
if (minute < 10) {
minuteString = "0" + minuteString;
}
if (second < 10) {
secondString = "0" + secondString;
}
if (count < 10) {
countString = "0" + countString;
}
document.getElementById('hour').innerHTML = hourString;
document.getElementById('minute').innerHTML = minuteString;
document.getElementById('second').innerHTML = secondString;
document.getElementById('count').innerHTML = countString;
setTimeout(stopWatch, 10);
}
}
</script>
</body>
</html>
Description:
Creating a user interface for the stopwatch using HTML.
First of all, we have created the <div> element with the class of stopwatch-container that consists of two <div> elements. The first <div> element with id as time consists of time elements which are hours, minutes, seconds and milliseconds. The second <div> element with id as buttons consists of three buttons which are the start button , the stop button and the reset button . The start button is used to start the stopwatch, the stop button is used to stop the stopwatch and the reset button is used to reset the time of the stopwatch.
Styling the stopwatch utilizing CSS
The stopwatch appearance has been enhanced using CSS attributes like background-color, font-family, margin, padding, font-size, color, text-align, width, height, and more to create an appealing design.
Adding the functionality utilizing JavaScript
The onclick feature has been implemented for the start, stop, and reset buttons to enable the stopwatch functionality. The start, stop, and reset buttons have been enabled to operate the stopwatch. The addEventListener method has been used to trigger the function upon button click.
Functions have been developed to contain logical operations for incrementing time values such as hours, minutes, seconds, and milliseconds.
Output:
A stopwatch is visible in the output displayed below:
Conclusion:
In this tutorial, we have explored the concept of an HTML stopwatch. We have learned how to create a stopwatch using HTML, CSS, and JavaScript.