DEV Community

Cover image for How to Create Stopwatch Using HTML, CSS and JavaScript.
Ajay Sharma
Ajay Sharma

Posted on

How to Create Stopwatch Using HTML, CSS and JavaScript.

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>
Enter fullscreen mode Exit fullscreen mode
@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;
    }
}
Enter fullscreen mode Exit fullscreen mode
// 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";
}
Enter fullscreen mode Exit fullscreen mode

Discussion (6)

Collapse
sojasmine profile image
Sojasmine Gjerstad

Thank you😊. Great job!

Collapse
wander_kev profile image
KelvinCi

Thank you mate. This is fascinating

Collapse
meo3w profile image
Phil Hasenkamp

This is awesome! Thank you for sharing your knowledge with us!

Collapse
ajaysharma12799 profile image
Ajay Sharma Author

Thank You Sir 😊

Collapse
notyourcoder profile image
Not-yourCoder

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.

Collapse
drjest profile image
Simone Albano

Nice, but you should also reset the counter variables in clearFields() 😀