Learn JS by building a stop watch

In todays tutorial, we'll create a stop watch as the first project. The special thing about this stopwatch is that you can count hours, minutes, seconds and milliseconds here. However, we'll do this work in 2 steps. First of all we'll design a simple interface using HTML and CSS. Then we'll make it functional.

HTML & CSS

At first, let's create a basic container for our stop watch.

Then, let's add some basic style in it.

Okay, let's move to the next. Now, we'll create a display so that all the time can be seen.

Add a new div with the class name of display like below,

Then, let's add some style for it so that it can get a pretty look.

Have you done it? Great! Now we'll create 3 buttons in our HTML code and then we'll make it functional using JavaScript.

For now, let's create the buttons. And add some style in it.

Add some CSS in our stylesheet like below.

Have you done? Now, it's time to implement some functionality using JavaScript.

JavaScript

First we'll collect some information using let. Such asset is a constant of display id and holds 0 for hours, minutes, seconds, and milliseconds.

Then, we'll create three function for start, pause, and reset the timer.

Now, we'll create a function that is already I used in the function to start the timer, dispayTimer. Now we have to create this function so that when you click on start button to start the stop watch then it can be able to start the countdown.
Don't worry, I'll give you a explanation that what am I doing here.

*Explanations: *
You can see that I used three "if" functions here. In the first 'if' function, I added a condition that if milliseconds is equal to 1000 then milliseconds value is 0 and seconds is incremented by 1.

➤ We know that 1 second equals 1000 milliseconds. So when the milliseconds value reaches 1000 after the countdown, the milliseconds value is zero and the seconds value is incremented by 1.

➤ Similarly, we used the second "if" function for time in seconds. We know that 1 minute equals 60 seconds. So if the seconds value equals 60, the seconds time is 0 and the minutes cell is incremented by 1.

➤ We know that 1 hour equals 60 minutes. So when the hour in minutes reaches 60, the minute cell is 0 and the hour cell is incremented.

This is how the countdown timer continues.

Now, we'll add a zero before each single digit point. Displays a number if the time is less than 10. we'll add a zero to each of these single digit numbers using the following four line code: If the hour, minute, second, and millisecond values ​​are less than 10, zeros are added before those hours.

We have to arrange all this information in the display using innerHTML. As above, the hours, minutes, seconds, and milliseconds are stored between h, m, s, and ms, respectively.

Have you done it! Congratulations, you just made a stop watch using basic JavaScript.

By the way, if you face any problem you can see the complete JavaScript code below-

let [milliseconds,seconds,minutes,hours] = [0,0,0,0];
let timerRef = document.querySelector('.display');
let int = null;

document.getElementById('startTimer').addEventListener('click', ()=>{
    if(int!==null){
        clearInterval(int);
    }
    int = setInterval(displayTimer,10);
});

document.getElementById('pauseTimer').addEventListener('click', ()=>{
    clearInterval(int);
});

document.getElementById('resetTimer').addEventListener('click', ()=>{
    clearInterval(int);
    [milliseconds,seconds,minutes,hours] = [0,0,0,0];
    timerRef.innerHTML = '00 : 00 : 00 : 000 ';
});

function displayTimer(){
    milliseconds+=10;
    if(milliseconds == 1000){
        milliseconds = 0;
        seconds++;
        if(seconds == 60){
            seconds = 0;
            minutes++;
            if(minutes == 60){
                minutes = 0;
                hours++;
            }
        }
    }

 let h = hours < 10 ? "0" + hours : hours;
 let m = minutes < 10 ? "0" + minutes : minutes;
 let s = seconds < 10 ? "0" + seconds : seconds;
 let ms = milliseconds < 10 ? "00" + milliseconds : milliseconds < 100 ? "0" + milliseconds : milliseconds;

 timerRef.innerHTML = ` ${h} : ${m} : ${s} : ${ms}`;
}

I hope this tutorial has taught you how to create a simple JavaScript stopwatch make sense about JavaScript too.

Connect with me

Twitter
Happy coding!