Make a Stopwatch in JavaScript

Creating a stopwatch in JavaScript is a great way to practice working with time-based functions and DOM manipulation. This guide will walk you through the steps to build a basic stopwatch that can start, stop, and reset.

let startTime, updatedTime, difference;
let interval;
let running = false;

function startStopwatch() {
    if (!running) {
        startTime = new Date().getTime();
        interval = setInterval(updateTime, 1000);
        running = true;
    }
}

function stopStopwatch() {
    clearInterval(interval);
    running = false;
}

function resetStopwatch() {
    clearInterval(interval);
    document.getElementById("display").innerHTML = "00:00:00";
    running = false;
}

function updateTime() {
    updatedTime = new Date().getTime();
    difference = updatedTime - startTime;
    let hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    let minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
    let seconds = Math.floor((difference % (1000 * 60)) / 1000);
    document.getElementById("display").innerHTML = 
        (hours < 10 ? "0" + hours : hours) + ":" + 
        (minutes < 10 ? "0" + minutes : minutes) + ":" + 
        (seconds < 10 ? "0" + seconds : seconds);
}

You can create a simple stopwatch in JavaScript using setInterval to track time and updating the display with DOM manipulation:

Methods on How to Make a Stopwatch in JavaScript

A stopwatch is a simple yet practical tool that can be used in various scenarios, such as timing exercises, cooking, or tracking productivity. By building a stopwatch in JavaScript, you’ll get hands-on experience with time-based functions, event handling, and DOM manipulation.

Creating the HTML Structure

Start by setting up the basic HTML structure for your stopwatch. This will include a display area for the time and buttons to start, stop, and reset the stopwatch.

Example: Basic HTML Layout

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Stopwatch</title>
</head>
<body>
    <div id="stopwatch">
        <div id="display">00:00:00</div>
        <button onclick="startStopwatch()">Start</button>
        <button onclick="stopStopwatch()">Stop</button>
        <button onclick="resetStopwatch()">Reset</button>
    </div>
</body>
</html>

Writing the JavaScript Code

Next, you’ll need to write the JavaScript that powers the stopwatch. This involves tracking the time, updating the display, and handling the start, stop, and reset actions.

Example: Starting the Stopwatch

The stopwatch starts when the “Start” button is clicked. You’ll use setInterval to update the time every second.

let startTime, updatedTime, difference;
let interval;
let running = false;

function startStopwatch() {
    if (!running) {
        startTime = new Date().getTime();
        interval = setInterval(updateTime, 1000);
        running = true;
    }
}

Example: Stopping the Stopwatch

The stopwatch stops when the “Stop” button is clicked. You’ll use clearInterval to stop the updates.

function stopStopwatch() {
    clearInterval(interval);
    running = false;
}

Example: Resetting the Stopwatch

The “Reset” button clears the interval and resets the display to “00:00:00”.

function resetStopwatch() {
    clearInterval(interval);
    document.getElementById("display").innerHTML = "00:00:00";
    running = false;
}

Example: Updating the Time

The updateTime function calculates the elapsed time and updates the display.

function updateTime() {
    updatedTime = new Date().getTime();
    difference = updatedTime - startTime;
    let hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    let minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
    let seconds = Math.floor((difference % (1000 * 60)) / 1000);
    document.getElementById("display").innerHTML = 
        (hours < 10 ? "0" + hours : hours) + ":" + 
        (minutes < 10 ? "0" + minutes : minutes) + ":" + 
        (seconds < 10 ? "0" + seconds : seconds);
}

Styling the Stopwatch

You can add basic CSS to style the stopwatch display and buttons for a better user experience.

Example: Adding Basic CSS

<style>
    #stopwatch {
        text-align: center;
        font-family: Arial, sans-serif;
    }

    #display {
        font-size: 2em;
        margin-bottom: 10px;
    }

    button {
        margin: 5px;
        padding: 10px 20px;
        font-size: 1em;
    }
</style>

Conclusion

Building a stopwatch in JavaScript is a practical exercise that covers essential concepts such as time-based functions, event handling, and DOM manipulation. By following this guide, you can create a fully functional stopwatch that can be customized and expanded according to your needs.

How to Make a Stopwatch in JavaScript