Video Tutorial:
Before we move on to the actual tutorial, you can check out the video tutorial of this post here. If you like video tutorials like this subscribe to my YouTube channel, where I post new projects based on HTML, CSS, and Javascript regularly.
Project Folder Structure:
Let’s build the project folder structure before we begin writing the code. We create a project folder called ‘Stopwatch’. Inside this folder, we have three files. These files are index.html, style.css, and script.js.
HTML:
We begin with the HTML Code. First, create a file called – ‘index.html’. Copy the code below and paste it into your HTML file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Stopwatch Javascript</title>
<!-- Google Font -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins&family=Roboto+Mono:wght@700&display=swap"
rel="stylesheet"
/>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="timer-display">00:00:00:000</div>
<div class="buttons">
<button id="pause-timer">Pause</button>
<button id="start-timer">Start</button>
<button id="reset-timer">Reset</button>
</div>
</div>
<!-- Script -->
<script src="script.js"></script>
</body>
</html>
CSS:
Next, we style our heading using CSS. For this copy, the code provided to you below and paste it into your stylesheet.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: #dbe9ff;
}
.container {
background-color: #f0f9ff;
position: absolute;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
width: min(90%, 31.25em);
padding: 3.75em 0;
border-radius: 0.8em;
box-shadow: 0 1.97em 3.75em rgba(1, 87, 185, 0.2);
}
.timer-display {
position: relative;
width: 110%;
background-color: #3c98ff;
left: -5%;
padding: 1em 0;
font-family: "Roboto Mono", monospace;
color: #f0f9ff;
font-size: 2.5em;
display: flex;
align-items: center;
justify-content: space-around;
border-radius: 0.3em;
box-shadow: 0 0.5em 1em rgba(1, 87, 185, 0.2);
}
.buttons {
width: 80%;
margin: 3.8em auto 0 auto;
display: flex;
justify-content: space-around;
}
.buttons button {
font-size: 1.12em;
background-color: #dbe9ff;
color: #3c98ff;
border: none;
font-family: "Poppins", sans-serif;
border-radius: 0.5em;
padding: 1em 1.5em;
cursor: pointer;
outline: none;
}
#start-timer {
background-color: #3c98ff;
color: #f0f9ff;
}
Javascript:
Finally, we add functionality using Javascript. Once again copy the code below and paste it into your script file.
We begin by creating intial variables and creating references. In a stopwatch, the user can start, pause or reset the timer.
When a user clicks on the start button we clear any previous intervals and start calling the ‘displayTimer’ function at an interval of 10ms. The ‘displayTimer’ function is responsible for doing the calculations for milliseconds, seconds, minutes, and hours and then displaying the timer on UI.
When the user clicks on the pause timer we simply clear the interval. For the reset timer, we clear the interval and set the milliseconds, seconds, minutes, and hours to 0 and finally, we display the timer in our UI.
let [milliseconds, seconds, minutes, hours] = [0, 0, 0, 0];
let timerRef = document.querySelector(".timer-display");
let int = null;
document.getElementById("start-timer").addEventListener("click", () => {
if (int !== null) {
clearInterval(int);
}
int = setInterval(displayTimer, 10);
});
function displayTimer() {
milliseconds += 10;
seconds = milliseconds == 1000 ? (seconds + 1) % 60 : seconds;
minutes = seconds == 0 && milliseconds == 0 ? (minutes + 1) % 60 : minutes;
hours = minutes == 0 && seconds == 0 && milliseconds == 0 ? hours + 1 : hours;
milliseconds = milliseconds == 1000 ? 0 : milliseconds;
let h = String(hours).padStart(2, "0");
let m = String(minutes).padStart(2, "0");
let s = String(seconds).padStart(2, "0");
let ms = String(milliseconds).padStart(3, "0");
timerRef.innerHTML = `${h} : ${m} : ${s} : ${ms}`;
}
document.getElementById("pause-timer").addEventListener("click", () => {
clearInterval(int);
});
document.getElementById("reset-timer").addEventListener("click", () => {
clearInterval(int);
[milliseconds, seconds, minutes, hours] = [0, 0, 0, 0];
timerRef.innerHTML = "00 : 00 : 00 : 000";
});
That’s all for this tutorial. If you face any issues while creating this code you can download the source code by clicking on the ‘Download Code’ button below. Now all you have to do is extract the files from the zipped folder.
Assalam-walaikum, Can you teach me JavaScript
Can you teach me javascript
I am fond of learning JavaScript