Creating a stopwatch with JavaScript

A stopwatch is used to measure the time that elapses between its activation and its deactivation. It measures the time taken for a specific activity. Building our JavaScript stopwatch using the setTimeout() and clearTimeout() JavaScript synchronization methods which help in implementations related to time intervals. The stopwatch has a display of three buttons. The screen displays the time and the three buttons to start, stop and reset the stopwatch. This tutorial explains how to build a stopwatch in JavaScript.

Our project is divided into 2 parts: the Front End and the Back End. We will create the structure of our stopwatch using HTML and beautify it using CSS in the Front-end part.

In the Back End part, we will give it a life, that is, make it work to solve the equations. The back-end part will be done using javascript

But before starting building our with javascript, we need the interface of our stopwatch (front end) and we shall use Html and CSS

1.HTML

So the first step is to create an HTML file that we shall name the file "stopwatch"

<h1><time>00:00:00</time></h1>
<button id="strt">start</button>
<button id="stp">stop</button>
<button id="rst">reset</button>

In the code above, we use HTML to display the stopwatch time and create the three required start, stop, and reset buttons.

But the stopwatch looks ugly. Let’s move on to the CSS section.

Also, remember that the stopwatch will not respond because it would have taken longer to explain. So, once you are able to understand this simple coding process, you can continue to make the stopwatch responsive.

So you need to create a CSS file named “style.css” and then we shall connect the new CSS file (say “style.css”) to the HTML page.

<link rel="stylesheet" href="style.css" type="text/css">
#stopwatch-container {
    width: 600px;
    margin: 10% auto;
    padding: 5% 0;
    color: #e7eafb;
    text-align: center;
    background-color: #202020;
    box-shadow: 1px 0px 4px 2px #9c9a9a;
    border-radius: 20px;
}

#stopwatch {
    font-size: 100px;
    margin-bottom: 10px;
}

button {
    width: 100px;
    height: 30px;
    background-color: #202020;
    color: white;
    border-radius: 6px;
    border: 2px solid #fff;
    margin-left: 5px;
    margin-right: 5px;
}

button:hover {
    background-color: #fff;
    color: #202020;
    cursor: pointer;
}

So we are done with our front end but still, our stopwatch is not alive

3 JavaScript

Now let's go to the back end and build our JavaScript stopwatch

var h1 = document.getElementsByTagName('h1')[0];
var start = document.getElementById('strt');
var stop = document.getElementById('stp');
var reset = document.getElementById('rst');
var sec = 0;
var min = 0;
var hrs = 0;
var t;

function tick(){
    sec++;
    if (sec >= 60) {
        sec = 0;
        min++;
        if (min >= 60) {
            min = 0;
            hrs++;
        }
    }
}
function add() {
    tick();
    h1.textContent = (hrs > 9 ? hrs : "0" + hrs) 
             + ":" + (min > 9 ? min : "0" + min)
                + ":" + (sec > 9 ? sec : "0" + sec);
    timer();
}
function timer() {
    t = setTimeout(add, 1000);
}

timer();
start.onclick = timer;
stop.onclick = function() {
    clearTimeout(t);
}
reset.onclick = function() {
    h1.textContent = "00:00:00";
    seconds = 0; minutes = 0; hours = 0;
}

If at the end of this tutorial your Stopwatch is not still functioning then probably you made a mistake when copying the codes but don't be frustrated.

Copy the code below in an HTML file;

<!DOCTYPE html>
<html>
<head>
<title> StopWatch</title>
<style>
#stopwatch-container {
    width: 600px;
    margin: 10% auto;
    padding: 5% 0;
    color: #e7eafb;
    text-align: center;
    background-color: #202020;
    box-shadow: 1px 0px 4px 2px #9c9a9a;
    border-radius: 20px;
}

#stopwatch {
    font-size: 100px;
    margin-bottom: 10px;
}

button {
    width: 100px;
    height: 30px;
    background-color: #202020;
    color: white;
    border-radius: 6px;
    border: 2px solid #fff;
    margin-left: 5px;
    margin-right: 5px;
}

button:hover {
    background-color: #fff;
    color: #202020;
    cursor: pointer;
}
</style>
</head>
<body>
    <div id="stopwatch-container">
        <h1> Stopwatch JavaScript</h1>
        <div id="stopwatch">00:00:00</div>
        <button onclick="start(true)" id="start-btn">Start</button>
        <button onclick="pause()">Pause</button>
        <button onclick="reset()">Reset</button>
    </div>
    <script>
        var stopwatch = document.getElementById("stopwatch");
        var startBtn = document.getElementById("start-btn");
        var timeoutId = null;
        var ms = 0;
        var sec = 0;
        var min = 0;

        /* function to start stopwatch */
        function start(flag) {
            if (flag) {
                startBtn.disabled = true;
            }

            timeoutId = setTimeout(function() {
                ms = parseInt(ms);
                sec = parseInt(sec);
                min = parseInt(min);

                ms++;

                if (ms == 100) {
                    sec = sec + 1;
                    ms = 0;
                }
                if (sec == 60) {
                    min = min + 1;
                    sec = 0;
                }
                if (ms < 10) {
                    ms = '0' + ms;
                }
                if (sec < 10) {
                    sec = '0' + sec;
                }
                if (min < 10) {
                    min = '0' + min;
                }

                stopwatch.innerHTML = min + ':' + sec + ':' + ms;

                // calling start() function recursivly to continue stopwatch
                start();

            }, 10); // setTimeout delay time 10 milliseconds
        }

        /* function to pause stopwatch */
        function pause() {
            clearTimeout(timeoutId);
            startBtn.disabled = false;
        }

        /* function to reset stopwatch */
        function reset() {
            ms = 0;
            sec = 0;
            min = 0;
            clearTimeout(timeoutId);
            stopwatch.innerHTML = '00:00:00';
            startBtn.disabled = false;
        }
    </script>
</body>
</html>

Creating a stopwatch with JavaScript

1.HTML

But the stopwatch looks ugly. Let’s move on to the CSS section.

3 JavaScript

Subscribe to my newsletter

Mbiakop Clinton

Mbiakop Clinton