Article Categories

Selected Reading

How to Create StopWatch using HTML CSS and JavaScript ?

HTML Javascript CSS Front End Technology

To create a stopwatch using HTML, CSS, and JavaScript, we need a basic understanding of these three technologies. HTML creates the structure, CSS styles the interface, and JavaScript adds the functionality for timing operations.

In this tutorial, we will create a stopwatch with Start, Stop, and Reset functionality

Creating Structure of Stopwatch using HTML

We use a structured approach with div elements to organize our stopwatch components

The outer align div centers the stopwatch on the screen
The container div holds all stopwatch elements
The time div displays hours, minutes, seconds, and milliseconds
The buttons div contains Start, Stop, and Reset buttons

<!DOCTYPE html>
<html lang="en">
<head>
    <title>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="btn" id="start">Start</button>
                <button class="btn" id="stop">Stop</button>
                <button class="btn" id="reset">Reset</button>
            </div>
        </div>
    </div>
</body>
</html>

Designing the Structure using CSS

We style the stopwatch with modern CSS properties for an attractive interface

Use flexbox for centering and layout
Style the container with background colors and dimensions
Format time display with large, readable digits
Create interactive buttons with hover effects

body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.align {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.container {
    background-color: white;
    height: 350px;
    width: 550px;
    text-align: center;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    padding: 30px;
}

h4 {
    color: #764ba2;
    margin: 0 0 30px 0;
    font-size: 32px;
    font-weight: bold;
}

.digits {
    font-size: 60px;
    color: #333;
    font-weight: bold;
}

.text {
    font-size: 16px;
    color: #666;
    font-weight: 500;
}

.btn {
    width: 100px;
    height: 50px;
    margin: 20px 15px;
    border-radius: 25px;
    border: none;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    color: white;
    transition: all 0.3s ease;
}

#start {
    background: linear-gradient(45deg, #4CAF50, #45a049);
}

#stop {
    background: linear-gradient(45deg, #f44336, #da190b);
}

#reset {
    background: linear-gradient(45deg, #2196F3, #0b7dda);
}

.btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

Adding Functionality using JavaScript

JavaScript provides the core timing logic and button interactions

Use addEventListener for button click events
Implement timer logic with setTimeout
Handle time calculations for hours, minutes, seconds, and centiseconds
Update the display with proper formatting

let timer = false;
let hour = 0, minute = 0, second = 0, count = 0;

document.getElementById('start').addEventListener('click', function () {
    timer = true;
    stopWatch();
});

document.getElementById('stop').addEventListener('click', function () {
    timer = false;
});

document.getElementById('reset').addEventListener('click', function () {
    timer = false;
    hour = minute = second = count = 0;
    updateDisplay();
});

function stopWatch() {
    if (timer) {
        count++;
        if (count === 100) {
            second++;
            count = 0;
        }
        if (second === 60) {
            minute++;
            second = 0;
        }
        if (minute === 60) {
            hour++;
            minute = 0;
        }
        updateDisplay();
        setTimeout(stopWatch, 10);
    }
}

function updateDisplay() {
    document.getElementById('hour').innerHTML = formatTime(hour);
    document.getElementById('minute').innerHTML = formatTime(minute);
    document.getElementById('second').innerHTML = formatTime(second);
    document.getElementById('count').innerHTML = formatTime(count);
}

function formatTime(time) {
    return time 

Complete Example

Here is the complete working stopwatch implementation 

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Stopwatch using HTML CSS and JavaScript</title>
    <style>
        body {
            font-family: 'Arial', sans-serif;
            margin: 0;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        .align {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        .container {
            background-color: white;
            height: 350px;
            width: 550px;
            text-align: center;
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
            padding: 30px;
        }
        h4 {
            color: #764ba2;
            margin: 0 0 30px 0;
            font-size: 32px;
            font-weight: bold;
        }
        .digits {
            font-size: 60px;
            color: #333;
            font-weight: bold;
        }
        .text {
            font-size: 16px;
            color: #666;
            font-weight: 500;
        }
        .btn {
            width: 100px;
            height: 50px;
            margin: 20px 15px;
            border-radius: 25px;
            border: none;
            cursor: pointer;
            font-size: 16px;
            font-weight: bold;
            color: white;
            transition: all 0.3s ease;
        }
        #start {
            background: linear-gradient(45deg, #4CAF50, #45a049);
        }
        #stop {
            background: linear-gradient(45deg, #f44336, #da190b);
        }
        #reset {
            background: linear-gradient(45deg, #2196F3, #0b7dda);
        }
        .btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }
    </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="btn" id="start">Start</button>
                <button class="btn" id="stop">Stop</button>
                <button class="btn" id="reset">Reset</button>
            </div>
        </div>
    </div>
    <script>
        let timer = false;
        let hour = 0, minute = 0, second = 0, count = 0;

        document.getElementById('start').addEventListener('click', function () {
            timer = true;
            stopWatch();
        });

        document.getElementById('stop').addEventListener('click', function () {
            timer = false;
        });

        document.getElementById('reset').addEventListener('click', function () {
            timer = false;
            hour = minute = second = count = 0;
            updateDisplay();
        });

        function stopWatch() {
            if (timer) {
                count++;
                if (count === 100) {
                    second++;
                    count = 0;
                }
                if (second === 60) {
                    minute++;
                    second = 0;
                }
                if (minute === 60) {
                    hour++;
                    minute = 0;
                }
                updateDisplay();
                setTimeout(stopWatch, 10);
            }
        }

        function updateDisplay() {
            document.getElementById('hour').innerHTML = formatTime(hour);
            document.getElementById('minute').innerHTML = formatTime(minute);
            document.getElementById('second').innerHTML = formatTime(second);
            document.getElementById('count').innerHTML = formatTime(count);
        }

        function formatTime(time) {
            return time < 10 ? "0" + time : time;
        }
    </script>
</body>
</html>


A modern stopwatch interface with a gradient background appears, featuring a white rounded container with large time digits (00 Hr 00 Min 00 Sec 00) and three styled buttons (Start in green, Stop in red, Reset in blue). The buttons have hover effects and the stopwatch accurately tracks time when started.


Conclusion

This stopwatch demonstrates the power of combining HTML for structure, CSS for styling, and JavaScript for functionality. The implementation provides precise timing with an intuitive user interface and smooth interactions.

Eesha Gandhi

Updated on: 2026-03-15T18:00:06+05:30

6K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next