Create Stopwatch Using HTML, CSS, and JavaScript

HTML Javascript CSS Front End Technology

To create Stopwatch using HTML, CSS, and Javascript, we need to have basic understanding of working of HTML, CSS and JavaScript. HTML and CSS will be used to make UI of stopwatch where HTML will create structure of stopwatch, CSS styles the stopwatch and Javascript will be adding functionality to our stopwatch.

In this tutorial, we will understand how to create stopwatch with the functionality of Start, Stop and Reset, using HTML, CSS, and JavaScript. We'll be following three steps:

Creating structure of stopwatch using HTML

We have used four div elements out of which first div element with class name align sets our stopwatch at the center of the screen. Seconds div element with class name container contains all of the elements.
Further, we added two divs inside this container, one containing all time elements such as an hour, minutes, seconds, and milliseconds and the other div containing three buttons for the start, stop, and reset functionality.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        Create StopWatch using HTML CSS and JavaScript
    </title>
</head>
<body>
    <div class="align">
        <div class="container">
            <h4>Stopwatch</h4>
            <div id="time">
                <span class="digits" id="hour">
                    00
                </span>
                <span class="text"> Hr </span>
                <span class="digits" id="minute">
                    00
                </span>
                <span class="text"> Min </span>
                <span class="digits" id="second">
                    00
                </span>
                <span class="text"> Sec </span>
                <span class="digits" id="count">
                    00
                </span>
            </div>
            <div id="buttons">
                <button class="btn1" id="start">
                    Start
                </button>
                <button class="btn2" id="stop">
                    Stop
                </button>
                <button class="btn3" id="reset">
                    Reset
                </button>
            </div>
        </div>
    </div>
</body>
</html>

Designing the structure using CSS

We have implemented following steps:

We have used align class to make a flexible container using display property and aligned the stopwatch at the center using justify-content and align-items.
We have used container class to set height, width and background-color of stopwatch.
We have styled buttons and buttons upon hovering using CSS properties like padding, font-size, margin, border-radius, color, cursor, etc.

Here is the CSS implementation of above mentioned steps:

body {
    font-family: Times New Roman;
}
.align {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
.container {
    background-color: thistle;
    height: 350px;
    width: 550px;
    text-align: center;
}
h4 {
    color: purple;
    padding: 20px;
    font-size: 30px;
    font-weight: bold;
}
.digits {
    font-size: 70px;
    color: white;
}
.text {
    font-size: 20px;
    color: hotpink;
    font-weight: bold;
}
#buttons {
    margin-top: 35px;
}
.btn1,.btn2,.btn3 {
    width: 90px;
    height: 50px;
    padding: 8px 5px 8px 2px;
    margin: 10px 25px 20px 10px;
    border-radius: 50px;
    cursor: pointer;
    font-size: 20px;
    transition: 0.7s;
    color: white;
    font-weight: 550;
    border: 0;
    font-family: Times new Roman;
}
.btn1:hover,.btn2:hover,.btn3:hover {
    color: indigo;
}
#start {
    background-color: indigo;
}
#stop {
    background-color: mediumpurple;
}
#reset {
    background-color: plum;
}
#start:hover,#stop:hover,
#reset:hover {
    background-color: white;
}

Adding functionalities using JavaScript

We have added JavaScript with click functions using addEventListener() for all three buttons: Start, Stop and Reset.
The startButton starts by setting timer to true and calling the stopWatch function. Similarly, stopButton stops timer and set the timer to false while reset button sets all values to 0 and updates all value to 00.
Lastly, we write a common function i.e stopWatch() for start, stop and reset functionalities which on being called, performs logical calculations based on the state of the timer and values of hour, minute, second and milliseconds.
It includes when to update the second, minute and hour counter using conditional statement. It also maintains the double digit by checking each value < 10.

Here is the implementation of above mentioned steps:

let startButton = document.getElementById('start');
let stopButton = document.getElementById('stop');
let resetButton = document.getElementById('reset');

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

startButton.addEventListener('click', function () {
    timer = true;
    stopWatch();
});
stopButton.addEventListener('click', function () {
    timer = false;
});
resetButton.addEventListener('click', function () {
    timer = false;
    hour = 0;
    minute = 0;
    second = 0;
    count = 0;
    document.getElementById('hour').innerHTML = "00";
    document.getElementById('minute').innerHTML = "00";
    document.getElementById('second').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 hourString = hour;
        let minuteString = minute;
        let secondString = second;
        let countString = count;
        if (hour 
Complete Example Code
Here is the complete example code to create Stopwatch using HTML, CSS, and Javascript.
<!DOCTYPE html>
<html lang="en">
<head>
    <title> 
        Create StopWatch using HTML CSS and JavaScript
    </title>
    <style>
        body {
            font-family: Times New Roman;
        }
        .align {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        .container {
            background-color: thistle;
            height: 350px;
            width: 550px;
            text-align: center;
        }
        h4 {
            color: purple;
            padding: 20px;
            font-size: 30px;
            font-weight: bold;
        }
        .digits {
            font-size: 70px;
            color: white;
        }
        .text {
            font-size: 20px;
            color: hotpink;
            font-weight: bold;
        }
        #buttons {
            margin-top: 35px;
        }
        .btn1,.btn2,.btn3 {
            width: 90px;
            height: 50px;
            padding: 8px 5px 8px 2px;
            margin: 10px 25px 20px 10px;
            border-radius: 50px;
            cursor: pointer;
            font-size: 20px;
            transition: 0.7s;
            color: white;
            font-weight: 550;
            border: 0;
            font-family: Times new Roman;
        }
        .btn1:hover,.btn2:hover,.btn3:hover {
            color: indigo;
        }
        #start {
            background-color: indigo;
        }
        #stop {
            background-color: mediumpurple;
        }
        #reset {
            background-color: plum;
        }
        #start:hover,#stop:hover,
        #reset:hover {
            background-color: white;
        }
    </style>
</head>
<body>
    <div class="align">
        <div class="container">
            <h4>Stopwatch.</h4>
            <div id="time">
                <span class="digits" id="hour">
                    00
                </span>
                <span class="text"> Hr </span>
                <span class="digits" id="minute">
                    00
                </span>
                <span class="text"> Min </span>
                <span class="digits" id="second">
                    00
                </span>
                <span class="text"> Sec </span>
                <span class="digits" id="count">
                    00
                </span>
            </div>
            <div id="buttons">
                <button class="btn1" id="start">
                    Start 
                </button>
                <button class="btn2" id="stop">
                    Stop 
                </button>
                <button class="btn3" id="reset">
                    Reset 
                </button>
            </div>
        </div>
    </div>
    <script>
        let startButton = document.getElementById('start');
        let stopButton = document.getElementById('stop');
        let resetButton = document.getElementById('reset');
        
        let hour = 00;
        let minute = 00;
        let second = 00;
        let count = 00;

        startButton.addEventListener('click', function () {
            timer = true;
            stopWatch();
        });
        stopButton.addEventListener('click', function () {
            timer = false;
        });
        resetButton.addEventListener('click', function () {
            timer = false;
            hour = 0;
            minute = 0;
            second = 0;
            count = 0;
            document.getElementById('hour').innerHTML = "00";
            document.getElementById('minute').innerHTML = "00";
            document.getElementById('second').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 hourString = hour;
                let minuteString = minute;
                let secondString = second;
                let countString = count;
                if (hour < 10) {
                    hourString = "0" + hourString;
                }
                if (minute < 10) {
                    minuteString = "0" + minuteString;
                }
                if (second < 10) {
                    secondString = "0" + secondString;
                }

                if (count < 10) {
                    countString = "0" + countString;
                }
                document.getElementById('hour').innerHTML = hourString;
                document.getElementById('minute').innerHTML = minuteString;
                document.getElementById('second').innerHTML = secondString;
                document.getElementById('count').innerHTML = countString;
                setTimeout(stopWatch, 10);
            }
        }
    </script>
</body>
</html>

Conclusion
In this article, we learnt and understood how to create stopwatch using HTML, CSS, and Javascript. We used HTML and CSS for creating structure and designing UI of stopwatch while added functionalities of buttons using JavaScript which performs three basic function of Start, Stop and Reset.

Eesha Gandhi

Updated on: 2024-08-07T17:26:40+05:30

5K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started