How to Create Stopwatch Using HTML, CSS and JavaScript.
Tags: html, css, javascript, webdev
Published: 2021-09-02 18:09:39

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 :-

1. Choose Any Text Editor (VSCode Recommended).
2. Create 3 Files in Current Project Directory, index.html, style.css and app.js.
3. 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";
}
```