How to Create Stopwatch using HTML CSS and JavaScript ? (original) (raw)

Last Updated : 19 Jun, 2025

Creating a **stopwatch using **HTML, CSS, and JavaScript is a great way to practice core web development skills, including DOM manipulation, styling, and handling time-based events. With more than **65% of interactive web projects involving some form of timer, counter, or time-tracking component, building a stopwatch is both a practical and foundational project. In this article, we'll walk through the step-by-step process of designing a responsive stopwatch that includes start, stop, and reset functionalities — all without relying on any external libraries.

**Prerequisites:

• HTML
• CSS
• JavaScript

**Step-by-Step Guide to Create a Stopwatch

• 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 **onclickfunctions 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 a StopWatch using HTML, CSS, and JavaScript.

index.html `

style.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; }

index.js

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);
}

}

`

**Output:

Stop Watch Timer

How to Create Stopwatch using HTML CSS and JavaScript ?