Hello Everyone, In this Post We Will be Seeing How to Create Stopwatch Using HTML, CSS and JavaScript.
Here is The Live Link of Page https://stopwatch-using-js.netlify.app/
Follow Me on LinkedIn https://www.linkedin.com/in/ajaysharma12799/
Follow Me on Github https://www.github.com/ajaysharma12799/
Steps to Create :-
- Choose Any Text Editor (VSCode Recommended).
- Create 3 Files in Current Project Directory, index.html, style.css and app.js.
- Use Below HTML, CSS and JS Code To Build Your Page.
<!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</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="watch">
<div class="hourDiv">
<h3 class="hour">01</h3>
<p class="hourTitle">Hour</p>
</div>
<div class="minuteDiv">
<h3 class="minute">30</h3>
<p class="minuteTitle">Min</p>
</div>
<div class="secondDiv">
<h3 class="second">01</h3>
<p class="secondTitle">Sec</p>
</div>
<div class="milliSecondDiv">
<h3 class="milliSecond">99</h3>
<p class="milliSecondTitle">Millis</p>
</div>
</div>
<div class="buttons">
<button class="start button">Start</button>
<button class="pause button">Pause</button>
<button class="stop button">Reset</button>
</div>
</div>
<script src="./app.js"></script>
<script>
let bodyWidth = screen.width;
if(bodyWidth === 250) {
alert("Web App Not Compatiable Choose Device Above 300 Width Otherwise UI Design Will be Messy.");
}
</script>
</body>
</html>
@import url('https://fonts.googleapis.com/css2?family=Zen+Loop&display=swap');
:root {
--mainColor1: #3DBE29;
--mainColor2: #EDC126;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
height: 100%;
width: 100%;
}
body {
font-family: 'Zen Loop', cursive;
background-color: #CAD5E2;
text-transform: uppercase;
min-height: 100%;
overflow: hidden;
}
.container {
width: 60%;
height: 100%;
margin: 0 auto;
}
.watch {
text-align: center;
font-size: 5rem;
font-weight: lighter;
color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
}
.hourDiv,
.minuteDiv,
.secondDiv,
.milliSecondDiv {
width: 20%;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.hour,
.minute,
.second,
.milliSecond {
padding: 5px;
background-color: var(--mainColor1);
}
.hourTitle,
.minuteTitle,
.secondTitle,
.milliSecondTitle {
background-color: var(--mainColor2);
font-size: 3rem;
padding: 5px;
font-weight: bold;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.button {
border: none;
border-radius: 10px;
font-size: 3rem;
padding: 10px;
width: 180px;
font-weight: bold;
font-family: 'Zen Loop', cursive;
}
.start {
margin-right: 5%;
color: var(--mainColor1);
transition: 0.5s ease-in-out;
}
.start:hover {
background-color: var(--mainColor2);
color: #fff;
}
.pause {
transition: 0.5s ease-in-out;
}
.pause:hover {
background-color: #E03B8B;
color: #fff;
}
.stop {
margin-left: 5%;
color: var(--mainColor2);
transition: 0.5s ease-in-out;
}
.stop:hover {
background-color: var(--mainColor1);
color: #fff;
}
.buttons {
margin-top: 2%;
margin-bottom: 2%;
display: flex;
justify-content: center;
align-items: center;
}
@media screen and (max-width: 768px) {
.container {
width: 100%;
}
.watch {
font-size: 2rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.hourTitle,
.minuteTitle,
.secondTitle,
.milliSecondTitle {
font-size: 2rem;
}
.button {
margin-top: 5%;
margin-bottom: 5%;
width: 50%;
}
.start, .stop {
margin: 0;
}
.buttons {
margin-top: 10%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
}
@media screen and (max-width: 550px) {
.watch {
font-size: 2rem;
}
.hourTitle,
.minuteTitle,
.secondTitle,
.milliSecondTitle {
font-size: 1.5rem;
}
}
// Timer Field
let hourElement = document.querySelector(".hour");
let minuteElement = document.querySelector(".minute");
let secondElement = document.querySelector(".second");
let millisecondElement = document.querySelector(".milliSecond");
// Button Field
let startButton = document.querySelector(".start");
let pauseButton = document.querySelector(".pause");
let stopButton = document.querySelector(".stop");
// Counter Variable
let hour = 00;
let minute = 00;
let second = 00;
let millisecond = 00;
let interval;
window.onload = () => clearFields();
startButton.onclick = function() {
clearInterval(interval); // If Some Error Happen and Interval is Setup, It Will Clear That Interval
interval = setInterval(startTimer, 10); //
};
pauseButton.onclick = function() {
clearInterval(interval); // On Clicking Pause Buttom We Will Clear Interval
};
stopButton.onclick = function() {
clearInterval(interval); // Clear Interval
clearFields(); // Clear Timer Fields
}
function startTimer() {
millisecond++;
if(millisecond < 9) {
millisecondElement.innerText = "0" + millisecond;
}
if(millisecond > 99) {
second++;
secondElement.innerText = "0" + second;
millisecond = 0;
millisecondElement.innerText = "0" + millisecond;
}
if(second > 60) {
minute++;
minuteElement.innerText = "0" + minute;
second = 0;
secondElement.innerText = "0" + second;
}
if(millisecond > 9) {
millisecondElement.innerText = millisecond;
}
if (second > 9){
secondElement.innerText = second;
}
if (minute > 9){
minuteElement.innerText = minute;
}
if(hour > 9) {
hourElement.innerText = hour;
}
}
function clearFields() {
hourElement.innerText = "00";
minuteElement.innerText = "00";
secondElement.innerText = "00";
millisecondElement.innerText = "00";
}
Oldest comments (6)
This is awesome! Thank you for sharing your knowledge with us!
Thank You Sir 😊
Thank you mate. This is fascinating
Thank you😊. Great job!
Nice, but you should also reset the counter variables in clearFields() 😀
am i the only one whos clock does not really resets to zero? like whenever i reset the clock and start again, it starts from wherever it was reset from.