How to Create Stopwatch using HTML CSS and JavaScript ?

Last Updated : 02 Aug, 2024

In this article, we will learn How to create a Stopwatch using HTML CSS, and JavaScript. The StopWatch will have the Start, Stop, and Reset functionality.

Prerequisites:

Approach:

Create one container in which all the elements are present.
Inside this container add 2 divs that contain all time elements like an hour, minutes, seconds, and milliseconds, and another div contains 3 buttons for start, stop, and reset the stopwatch.
Now add Styles to center the div container.
Next, add a JavaScript file in which we will add onclick functions on all three buttons and create another function in which write all the logical code and add value to corresponding hours, minutes, seconds, milliseconds, etc.

Example: This example will illustrate how to create StopWatch using HTML CSS and JavaScript.

HTML

<!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>Design Stopwatch using HTML CSS and JavaScript</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="container">
        <h1>Geeks For Geeks <br>
            Stop Watch</h1>
        <div id="time">
            <span class="digit" id="hr">
                00</span>
            <span class="txt">Hr</span>
            <span class="digit" id="min">
                00</span>
            <span class="txt">Min</span>
            <span class="digit" id="sec">
                00</span>
            <span class="txt">Sec</span>
            <span class="digit" id="count">
                00</span>
        </div>
        <div id="buttons">
            <button class="btn" id="start">
                Start</button>
            <button class="btn" id="stop">
                Stop</button>
            <button class="btn" id="reset">
                Reset</button>
        </div>
    </div>

    <script src="script.js"></script>
</body>
  
</html>

CSS

body {
    padding: 0;
    margin: 0;
    font-family: verdana;
}

.container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    background-color: rgb(0, 61, 0);
}

h1 {
    color: rgb(10, 238, 10);
    text-align: center;
}

.digit {
    font-size: 150px;
    color: #fff;
}

.txt {
    font-size: 30px;
    color: #fffcd6;
}

#buttons {
    margin-top: 50px;
}

.btn {
    width: 100px;
    padding: 10px 15px;
    margin: 0px 20px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 4px;
    border-top-left-radius: 4px;
    cursor: pointer;
    font-size: 20px;
    transition: 0.5s;
    color: white;
    font-weight: 500;
}

#start {
    background-color: #009779;
}

#stop {
    background-color: #0e85fc;
}

#reset {
    background-color: #c91400;
}

JavaScript

let startBtn = document.getElementById('start');
let stopBtn = document.getElementById('stop');
let resetBtn = document.getElementById('reset');

let hour = 00;
let minute = 00;
let second = 00;
let count = 00;

startBtn.addEventListener('click', function () {
    timer = true;
    stopWatch();
});

stopBtn.addEventListener('click', function () {
    timer = false;
});

resetBtn.addEventListener('click', function () {
    timer = false;
    hour = 0;
    minute = 0;
    second = 0;
    count = 0;
    document.getElementById('hr').innerHTML = "00";
    document.getElementById('min').innerHTML = "00";
    document.getElementById('sec').innerHTML = "00";
    document.getElementById('count').innerHTML = "00";
});

function stopWatch() {
    if (timer) {
        count++;

        if (count == 100) {
            second++;
            count = 0;
        }

        if (second == 60) {
            minute++;
            second = 0;
        }

        if (minute == 60) {
            hour++;
            minute = 0;
            second = 0;
        }

        let hrString = hour;
        let minString = minute;
        let secString = second;
        let countString = count;

        if (hour < 10) {
            hrString = "0" + hrString;
        }

        if (minute < 10) {
            minString = "0" + minString;
        }

        if (second < 10) {
            secString = "0" + secString;
        }

        if (count < 10) {
            countString = "0" + countString;
        }

        document.getElementById('hr').innerHTML = hrString;
        document.getElementById('min').innerHTML = minString;
        document.getElementById('sec').innerHTML = secString;
        document.getElementById('count').innerHTML = countString;
        setTimeout(stopWatch, 10);
    }
}