DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Learn JS by building a stop watch
tanzirulhuda
tanzirulhuda

Posted on

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.

Basic HTML for the container of stop watch

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

Basic CSS Style

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,

Tanzirul Huda

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

Tanzirul Huda

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.

Tanzirul Huda

Add some CSS in our stylesheet like below.

Tanzirul Huda

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.

Tanzirul Huda

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

Tanzirul Huda

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.

Tanzirul Huda

*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.

Tanzirul Huda

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.

Tanzirul Huda

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}`;
}
Enter fullscreen mode Exit fullscreen mode

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!

Top comments (0)

An Animated Guide to Node.js Event Loop

Node.js doesn’t stop from running other operations because of Libuv, a C++ library responsible for the event loop and asynchronously handling tasks such as network requests, DNS resolution, file system operations, data encryption, etc.

What happens under the hood when Node.js works on tasks such as database queries? We will explore it by following this piece of code step by step.