Creating a simple stopwatch with JavaScript

A stopwatch is a timepiece that allows you to measure the amount of time elapsed between two points in time. In this article, we'll show you how to create a simple stopwatch using JavaScript that can be used to time events or measure the execution time of a block of code.

Demo Application

Output - Creating a simple stopwatch with JavaScript - Clue Mediator

HTML and CSS

The first step is to create the HTML and CSS for the stopwatch. We'll create a simple layout consisting of a display area for the stopwatch, and three buttons for start, stop, and reset.

<div id="stopwatch">
  <div id="display">00:00:00</div>
  <button id="start">Start</button>
  <button id="stop">Stop</button>
  <button id="reset">Reset</button>
</div>

The CSS for the stopwatch is also simple, with some basic styling applied to the display area and the buttons.

#stopwatch {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#display {
    font-size: 48px;
    margin: 20px 0;
    padding: 10px;
    border: 2px solid #333;
    border-radius: 10px;
    background-color: #f5f5f5;
    color: #333;
    text-align: center;
}

button {
    font-size: 24px;
    padding: 10px 20px;
    margin: 10px;
    background-color: #333;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #555;
}

button:active {
    transform: translateY(1px);
}

#start {
    background-color: #28a745;
}

#start:hover {
    background-color: #218838;
}

#stop {
    background-color: #dc3545;
}

#stop:hover {
    background-color: #c82333;
}

#reset {
    background-color: #6c757d;
}

#reset:hover {
    background-color: #5a6268;
}

@keyframes blink {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

#display.running {
    animation: blink 1s linear infinite;
}

JavaScript

Now, we can start with the JavaScript code for the stopwatch. We'll use the setInterval function to increment the stopwatch display every millisecond. We'll also use a state object to keep track of the stopwatch state.

let state = {
  running: false,
  elapsed: 0,
  intervalId: null
};

function update() {
  let display = document.getElementById("display");
  let minutes = Math.floor(state.elapsed / 60000);
  let seconds = Math.floor((state.elapsed % 60000) / 1000);
  let milliseconds = Math.floor((state.elapsed % 1000) / 10);
  display.innerText = `${pad(minutes)}:${pad(seconds)}:${pad(milliseconds)}`;
}

function pad(number) {
  return number < 10 ? `0${number}` : number;
}

function start() {
  if (!state.running) {
    state.intervalId = setInterval(() => {
      state.elapsed += 10;
      update();
    }, 10);
    state.running = true;
  }
}

function stop() {
  if (state.running) {
    clearInterval(state.intervalId);
    state.running = false;
  }
}

function reset() {
  stop();
  state.elapsed = 0;
  update();
}

document.getElementById("start").addEventListener("click", start);
document.getElementById("stop").addEventListener("click", stop);
document.getElementById("reset").addEventListener("click", reset);

update();

Let's go through the code step by step.

We first declare a state object to keep track of the stopwatch state. The running property keeps track of whether the stopwatch is currently running, the elapsed property keeps track of the elapsed time, and the intervalId property holds the ID of the interval returned by the setInterval function.

The update function is responsible for updating the stopwatch display. It calculates the minutes, seconds, and milliseconds from the elapsed time and updates the display with the padded values.

The pad function is a utility function that pads a number with a leading zero if it is less than 10.

The start function starts the stopwatch by setting up an interval that increments the elapsed time every 10 milliseconds. It also sets the running property to true.

Let's combine all code together and see how it looks.

index.html

<!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>Creating a Simple Stopwatch with JavaScript</title>

    <style>
        #stopwatch {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        #display {
            font-size: 48px;
            margin: 20px 0;
            padding: 10px;
            border: 2px solid #333;
            border-radius: 10px;
            background-color: #f5f5f5;
            color: #333;
            text-align: center;
        }

        button {
            font-size: 24px;
            padding: 10px 20px;
            margin: 10px;
            background-color: #333;
            color: #fff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        button:hover {
            background-color: #555;
        }

        button:active {
            transform: translateY(1px);
        }

        #start {
            background-color: #28a745;
        }

        #start:hover {
            background-color: #218838;
        }

        #stop {
            background-color: #dc3545;
        }

        #stop:hover {
            background-color: #c82333;
        }

        #reset {
            background-color: #6c757d;
        }

        #reset:hover {
            background-color: #5a6268;
        }

        @keyframes blink {
            0% {
                opacity: 0;
            }

            50% {
                opacity: 1;
            }

            100% {
                opacity: 0;
            }
        }

        #display.running {
            animation: blink 1s linear infinite;
        }
    </style>
</head>

<body>
    <div id="stopwatch">
        <div id="display">00:00:00</div>
        <button id="start">Start</button>
        <button id="stop">Stop</button>
        <button id="reset">Reset</button>
    </div>
    <script type="text/javascript">
        let state = {
            running: false,
            elapsed: 0,
            intervalId: null
        };

        function update() {
            let display = document.getElementById("display");
            let minutes = Math.floor(state.elapsed / 60000);
            let seconds = Math.floor((state.elapsed % 60000) / 1000);
            let milliseconds = Math.floor((state.elapsed % 1000) / 10);
            display.innerText = `${pad(minutes)}:${pad(seconds)}:${pad(milliseconds)}`;
        }

        function pad(number) {
            return number < 10 ? `0${number}` : number;
        }

        function start() {
            if (!state.running) {
                state.intervalId = setInterval(() => {
                    state.elapsed += 10;
                    update();
                }, 10);
                state.running = true;
            }
        }

        function stop() {
            if (state.running) {
                clearInterval(state.intervalId);
                state.running = false;
            }
        }

        function reset() {
            stop();
            state.elapsed = 0;
            update();
        }

        document.getElementById("start").addEventListener("click", start);
        document.getElementById("stop").addEventListener("click", stop);
        document.getElementById("reset").addEventListener("click", reset);

        update();
    </script>
</body>

</html>

Conclusion

In this article, we explained to you how to create a simple stopwatch with JavaScript. We started with the basics of JavaScript, created the HTML structure, and implemented the JavaScript code.