JavaScript Stopwatch Project: Code a Simple and Functional Timer

00:00:00:000

How to Build an Accurate Stopwatch with JavaScript, HTML, and CSS

In this article, we’ll walk you through how to create a simple but accurate stopwatch using JavaScript, HTML, and CSS. Whether you're just starting with web development or looking to implement an interactive feature for a project, this stopwatch project will help you understand the basics of JavaScript timing functions, CSS styling, and HTML structure.

We’ll also discuss why using requestAnimationFrame() is the best choice for this project, ensuring that our stopwatch runs smoothly and accurately. By the end of this article, you'll have a fully functional stopwatch, and you'll learn some key concepts that can be applied to other projects.

Step 1: HTML Structure

First, we create the basic HTML structure for the stopwatch. This will include a display area for the time and buttons to start, stop, and reset the stopwatch.

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

Step 2: CSS Styling

Now, we need to style the stopwatch to make it visually appealing. Here, we'll center the stopwatch on the screen and style the buttons to distinguish them as functional controls.

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
}

.container {
    max-width: 800px;
    margin: 40px auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

h1 {
    text-align: center;
    color: #333;
}

.content {
    font-size: 1.2em;
    color: #555;
}

.code {
    background-color: #2d2d2d;
    color: #fff;
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 20px;
    display: block;
    white-space: pre-wrap;
}

.stopwatch {
    text-align: center;
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin-top: 40px;
}

#display {
    font-size: 2em;
    margin-bottom: 20px;
    padding: 10px;
    background-color: #333;
    color: white;
    border-radius: 6px;
}

.buttons button {
    padding: 10px 20px;
    font-size: 1.2em;
    margin: 5px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#start {
    background-color: #4CAF50;
    color: white;
}

#stop {
    background-color: #f44336;
    color: white;
}

#reset {
    background-color: #008CBA;
    color: white;
}

.buttons button:hover {
    background-color: #ddd;
}
        

Step 3: JavaScript Functionality

Next, we will write the JavaScript code to make the stopwatch functional. The JavaScript will track the time, update the display, and manage the start, stop, and reset operations.

let seconds = 0;
let minutes = 0;
let hours = 0;
let milliseconds = 0;

let startTime;
let updatedTime;
let running = false;

function start() {
    if (!running) {
        startTime = Date.now() - updatedTime;
        running = true;
        stopwatch();
    }
}

function stop() {
    running = false;
}

function reset() {
    running = false;
    seconds = 0;
    minutes = 0;
    hours = 0;
    milliseconds = 0;
    updatedTime = 0;
    document.getElementById('display').innerHTML = '00:00:00:000';
}

function stopwatch() {
    if (running) {
        updatedTime = Date.now() - startTime;

        milliseconds = Math.floor(updatedTime % 1000);
        seconds = Math.floor((updatedTime / 1000) % 60);
        minutes = Math.floor((updatedTime / (1000 * 60)) % 60);
        hours = Math.floor((updatedTime / (1000 * 60 * 60)) % 24);

        let displayMilliseconds = milliseconds < 100 ? (milliseconds < 10 ? '00' + milliseconds : '0' + milliseconds) : milliseconds;
        let displaySeconds = seconds < 10 ? '0' + seconds : seconds;
        let displayMinutes = minutes < 10 ? '0' + minutes : minutes;
        let displayHours = hours < 10 ? '0' + hours : hours;

        document.getElementById('display').innerHTML = `${displayHours}:${displayMinutes}:${displaySeconds}:${displayMilliseconds}`;

        requestAnimationFrame(stopwatch);
    }
}

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

Download Full Code here

Download Now

Download Click here

Conclusion

In this article, we’ve built a simple but accurate stopwatch using HTML, CSS, and JavaScript. By using requestAnimationFrame(), we ensured that the stopwatch runs smoothly and with minimal delay, making it a great example of how to handle time-based tasks in JavaScript.

This project serves as a valuable exercise in learning how to manipulate time in web applications, and the skills you’ve learned here can be applied to a wide variety of interactive features, from animations to games and productivity tools.
We hope this guide was helpful in building your own stopwatch. Happy coding!