HTML Stopwatch

We will understand the HTML stopwatch in this article.

Stopwatch

It is a special kind of watch with a hand or a digital screen that consists of a start button, stop button and reset button. It calculates how much time something will require to complete such as time to cover the distance of 30 miles per hour. It is used to measure the accurate time.

We can make a stopwatch with the help of HTML, CSS and JavaScript.

Demonstration for creating a stopwatch:

We will construct a stopwatch utilizing HTML, CSS and JavaScript.

Code:

<!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>HTML Stopwatch</title>
    <style>
        body {
            font-family: 'Courier New', Courier, monospace;
            background-color: khaki;
            margin: 45px;
        }
        .stopwatch-container {
            background-color: black;
            width: 500px;
            height: 250px;
            text-align: center;
        }
        p {
            padding: 15px;
            color: plum;
            font-size: 24px;
            font-weight: 600;
        }
        .digits {
            font-size: 45px;
            color: khaki;
        }
        .text {
            font-size: 20px;
            color: plum;
            font-weight: bold;
        }
        #buttons {
            margin-top: 35px;
        }
        .button-1, .button-2, .button-3 {
            margin: 9px 24px 19px 9px;
            padding: 7px 4px 7px 4px;
            height: 46px;
            width: 85px;
            border: 0;
            border-radius: 45px;
            font-size: 18px;
            color: khaki;
            cursor: pointer;
            transition: 0.5s;
            font-weight: 600;
            font-family:Verdana, Tahoma, sans-serif;
        }
        .button-1:hover, .button-2:hover, .button-3:hover{
            color: brown;
        }
        #start {
            background-color: plum;
        }
        #stop {
            background-color: darkorchid;
        }
        #reset {
            background-color: purple;
        }
        #start:hover, #stop:hover, #reset:hover  {
            background-color: white;
        }
    </style>
</head>
<body>
    <div class= "stopwatch-container">
        <p> Stopwatch </p>
        <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>
            <span class= "text">Millisec</span>
        </div>
        <div id= "buttons">
            <button class= "button-1" id= "start">
              Start </button>
            <button class= "button-2" id= "stop">
              Stop </button>
            <button class= "button-3" id= "reset">
              Reset </button>
        </div>
    </div>
    <script>
        let startButton = document.getElementById('start');
        let stopButton = document.getElementById('stop');
        let resetButton = document.getElementById('reset');
          
        let hour = 0;
        let minute = 0;
        let second = 0;
        let count = 0;
          
        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>

Description:

Constructing a user interface for the stopwatch utilizing HTML

First of all, we have created the <div> element with the class of stopwatch-container that consists of two <div> elements. The first <div> element with id as time consists of time elements which are hours, minutes, seconds and milliseconds. The second <div> element with id as buttons consists of three buttons which are the start button, the stop button and the reset button. The start button is used to start the stopwatch, the stop button is used to stop the stopwatch and the reset button is used to reset the time of the stopwatch.

Styling the stopwatch utilizing CSS

We have styled the stopwatch to make it look attractive with the help of the CSS properties such as background-color, font-family, margin, padding, font-size, color, text-align, width, height, etc.

Adding the functionality utilizing JavaScript

We have added onclick functionality to the start button, stop button and reset button. We have activated the start, stop and reset button for activating the stopwatch. We have utilized the addEventListener to call the function when the button is clicked.

We have created functions that consist of logical code for adding value to hours, minutes, seconds and milliseconds.

Output:

We can witness a stopwatch in the output provided downwards:

Conclusion:

We have understood the HTML stopwatch in this article. We have comprehend how to construct a stopwatch with the help of HTML, CSS and JavaScript.

Next TopicHTML Subheader

← prev next →