This content originally appeared on DEV Community and was authored by Ajay Sharma
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";
}
This content originally appeared on DEV Community and was authored by Ajay Sharma
Print
Share
Comment
Cite
Upload
Translate
Updates
There are no updates yet.
Click the Upload button above to add an update.
APA
MLA
Ajay Sharma | Sciencx (2021-09-02T18:09:39+00:00) How to Create Stopwatch Using HTML, CSS and JavaScript.. Retrieved from https://www.scien.cx/2021/09/02/how-to-create-stopwatch-using-html-css-and-javascript/
" » How to Create Stopwatch Using HTML, CSS and JavaScript.." Ajay Sharma | Sciencx - Thursday September 2, 2021, https://www.scien.cx/2021/09/02/how-to-create-stopwatch-using-html-css-and-javascript/
HARVARDAjay Sharma | Sciencx Thursday September 2, 2021 » How to Create Stopwatch Using HTML, CSS and JavaScript.., viewed ,<https://www.scien.cx/2021/09/02/how-to-create-stopwatch-using-html-css-and-javascript/>
VANCOUVERAjay Sharma | Sciencx - » How to Create Stopwatch Using HTML, CSS and JavaScript.. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/09/02/how-to-create-stopwatch-using-html-css-and-javascript/
CHICAGO" » How to Create Stopwatch Using HTML, CSS and JavaScript.." Ajay Sharma | Sciencx - Accessed . https://www.scien.cx/2021/09/02/how-to-create-stopwatch-using-html-css-and-javascript/
IEEE" » How to Create Stopwatch Using HTML, CSS and JavaScript.." Ajay Sharma | Sciencx [Online]. Available: https://www.scien.cx/2021/09/02/how-to-create-stopwatch-using-html-css-and-javascript/. [Accessed: ]
rf:citation » How to Create Stopwatch Using HTML, CSS and JavaScript. | Ajay Sharma | Sciencx | https://www.scien.cx/2021/09/02/how-to-create-stopwatch-using-html-css-and-javascript/ |
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.