Create a Stopwatch using Bootstrap & JavaScript

Last Updated : 28 Feb, 2024

A stopwatch tracks elapsed time, typically in hours, minutes, seconds, and fractions of a second. It can be started, stopped, and reset, providing precise timing for various activities, such as sports, experiments, or productivity tracking.

Screenshot-2024-02-25-085509

Prerequisites

Approach

HTML, Bootstrap, and JavaScript were used to create the stopwatch.
Bootstrap is used for layout, including card structure. JavaScript manages stopwatch functionality.
Time values are updated every 10 milliseconds.
Event listeners trigger actions for start, stop, and reset buttons.
The stopwatch accurately increments seconds, minutes, and hours.
Single-digit values padded with zeros for consistency. Provides a visually appealing interface.
Enables tracking of elapsed time in various contexts.
Combines styling and functionality for effective stopwatch implementation.

Example: This example shows the implementation of the above-explained approach.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,
                                   initial-scale=1.0">
    <title>Bootstrap Stopwatch</title>
    <link href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
 
<body>
    <div class="container mt-5">
        <div class="card">
            <div class="card-body">
                <div class="row">
                    <div class="col-12 text-center">
                        <h1>Bootstrap Stopwatch</h1>
                    </div>
                </div>
                <div class="row mt-5">
                    <div class="col-12">
                        <div class="card">
                            <div class="card-body">
                                <div class="card text-white bg-primary">
                                    <div class="card-body text-center" 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>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row mt-3 justify-content-center">
                    <button class="btn btn-success mx-2"
                            id="start">Start</button>
                    <button class="btn btn-primary mx-2"
                            id="stop">Stop</button>
                    <button class="btn btn-danger mx-2"
                            id="reset">Reset</button>
                </div>
            </div>
        </div>
    </div>
 
    <script>
        let startBtn = document.getElementById('start');
        let stopBtn = document.getElementById('stop');
        let resetBtn = document.getElementById('reset');
 
        let hour = 0;
        let minute = 0;
        let second = 0;
        let count = 0;
        let timer;
 
        startBtn.addEventListener('click', function () {
            // Check if timer is not already running
            if (!timer) {
                timer = setInterval(stopWatch, 10);
            }
        });
 
        stopBtn.addEventListener('click', function () {
            clearInterval(timer);
            timer = null; // Reset timer variable
        });
 
        resetBtn.addEventListener('click', function () {
            clearInterval(timer);
            timer = null; // Reset timer variable
            hour = 0;
            minute = 0;
            second = 0;
            count = 0;
            updateDisplay();
        });
 
        function stopWatch() {
            count++;
 
            if (count == 100) {
                second++;
                count = 0;
            }
 
            if (second == 60) {
                minute++;
                second = 0;
            }
 
            if (minute == 60) {
                hour++;
                minute = 0;
                second = 0;
            }
 
            updateDisplay();
        }
 
        function updateDisplay() {
            document.getElementById('hr').textContent =
                hour.toString().padStart(2, '0');
            document.getElementById('min').textContent =
                minute.toString().padStart(2, '0');
            document.getElementById('sec').textContent =
                second.toString().padStart(2, '0');
            document.getElementById('count').textContent =
                count.toString().padStart(2, '0');
        }
    </script>
 
</body>
 
</html>

Output:

darkMode

Suggest improvement

How to create multi step progress bar using Bootstrap ?

TypeScript String match() method

Share your thoughts in the comments

Create a Stopwatch using Bootstrap & JavaScript

Prerequisites

Approach

HTML

Please Login to comment...

Similar Reads

What kind of Experience do you want to share?