Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to Create StopWatch using HTML CSS and JavaScript ?
In this tutorial, we will create a stopwatch with the functionality of start, stop and reset, using HTML, CSS, and JavaScript.
We'll start by creating the stopwatch's user interface with HTML and CSS. Then, using JavaScript, we'll make the user interface functional.
Creating a User Interface for the Stopwatch
The first step is to make a single container that contains all of the elements.
Further, we proceed to add two divs inside this container, one containing all time elements such as an hour, minutes, seconds, and milliseconds and the other div containing three buttons for the start, stop, and reset functionality.
Now, we style the stopwatch and align the elements using CSS styling properties.
Adding Functionality to the User Interface
We add JavaScript with onclick functions for all three buttons and another function with all the logical code and values for hours, minutes, seconds, milliseconds, and so on.
We begin by including a click event listener. A click event listener is basically a function that is called whenever the user clicks on the element to which it is attached. We want to activate the stopwatch by activating the Start, Stop and Reset buttons. When we click a button, we will use addEventListener to call the function with the state of the timer and appropriate values of hour, minute, second and millisecond.. We can store the button elements in variables to avoid calling document.getElementById multiple times in the future.
Lastly, we write a common function for start, stop and reset functionalities which on being called, performs logical calculations based on the state of the timer and values of hour, minute, second and milliseconds. This function is solely responsible for the proper functioning of the stopwatch.
Example
Let us implement the above approach and create a functional stopwatch.
<!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> How to Create StopWatch using HTML CSS and JavaScript ? </title>
<style>
body {
background-color: papayawhip;
margin: 50px;
font-family: Times New Roman;
}
.container {
background-color: thistle;
height: 350px;
width: 550px;
text-align: center;
}
p {
color: purple;
padding: 20px;
font-size: 30px;
font-weight: bold;
}
.digits {
font-size: 70px;
color: papayawhip;
}
.text {
font-size: 20px;
color: hotpink;
font-weight: bold;
}
#buttons {
margin-top: 35px;
}
.btn1, .btn2, .btn3 {
width: 90px;
height: 50px;
padding: 8px 5px 8px 2px;
margin: 10px 25px 20px 10px;
border-radius: 50px;
cursor: pointer;
font-size: 20px;
transition: 0.7s;
color: white;
font-weight: 550;
border: 0;
font-family: Times new Roman;
}
.btn1:hover, .btn2:hover, .btn3:hover{
color: indigo;
}
#start {
background-color: indigo;
}
#stop {
background-color: mediumpurple;
}
#reset {
background-color: plum;
}
#start:hover, #stop:hover, #reset:hover {
background-color: white;
}
</style>
</head>
<body>
<div class= "container">
<p> Functional stopwatch. Try it </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>
</div>
<div id= "buttons">
<button class= "btn1" id= "start">
Start </button>
<button class= "btn2" id= "stop">
Stop </button>
<button class= "btn3" id= "reset">
Reset </button>
</div>
</div>
<script>
let startButton = document.getElementById('start');
let stopButton = document.getElementById('stop');
let resetButton = document.getElementById('reset');
let hour = 00;
let minute = 00;
let second = 00;
let count = 00;
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>
928 Views
