JAVASCRIPT STOPWATCH

Keywords: Stopwatch using HTML CSS JavaScript | Simple JavaScript stopwatch | How to build a stopwatch | HTML source code for stopwatch | How to make a Stopwatch in JavaScript

Summary:

If you want to build an awesome stopwatch with JavaScript then you are in the right place. This page teaches you to build a beautiful and awesome stopwatch. This stopwatch has the following features:

Beautiful and awesome look.

Smooth work.

Created with easy codes.

Now, we start making stopwatch.

Procedures to build Stopwatch:

First, we create a folder named Stopwatch to hold HTML, CSS, and JS files.

Next, we open that folder in any text editor. I use vscode.

Now, we create an HTML file named stopwatch.html.

After that, we create a CSS file named stopwatchStyle.css.

Now, we make a JS file named stopwatchScript.js.

Now, its time to write the HTML.

Building HTML file:

First, we are going to write HTML structure like this,


<code><!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">
	</head>
	<body>
	
	</body>
	</html>

Now, we give a title (Stopwatch) to the page. After giving a title we connect the CSS and JS file to the HTML file. To connect the CSS file, we use the <link> tag, and to connect the JS file we use the <script> tag.

Remember to connect the CSS file to the HTML we must add the <link> tag into the <head> tag of the HTML file. And to connect the JS file you can add it to the <head> tag OR you can add it to the <body> tag.


<!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>Stopwatch</title>
	<link rel="stylesheet" href="stopwatchStyle.css">
	</head>
	<body>
	
	<script src="js/stopewatchScript.js"></script>
	</body>
	</html>

Now, we create a <div> with id name container. In this container, we are going to build a stopwatch.

Now, in this container we create 2 more div with id name btnContainer and timerContainer.

In btnContainer we create 3 buttons to start, stop and restart the stopwatch. All 3 buttons are having the same class named ‘btn’ but have different id names. The first button has the id name start and has one onclick property. This property has a function start (true) with the argument true.

The second button has the id name stop and this one also has an onclick property. This property has a function stop (false) with the argument false.

The third button has the id name restart with onclick property. This property has a function restart (false) with the argument false.

In timerContainer, we create 5 <span> tag to show hours, minutes, and seconds. These tags have the same class name (text) but have different id names.

Now, we use the <br> tag to break the line and we use 3 more <span> tags which are used to indicate hours, minutes, and seconds.


  <div id="container">
        <div id="btnContainer">
            <button class="btn" id="start" onclick="start(true)">Start</button>
            <button class="btn" id="stop" onclick="stop(false)">Stop</button>
            <button class="btn" id="restart" onclick="restart(false)">Restart</button>
        </div>
        <div id="timerContainer">
               <span class="text" id="hr">00</span>
               <span class="text">:</span>
               <span class="text" id="min">00</span>
               <span class="text">:</span>
               <span class="text" id="sec">00</span>
               <br>
               <span class="text2" >hrs</span>
               <span class="text2" >min</span>
               <span class="text2" >sec</span>
               
        </div>
    </div>

Here we completed our HTML file. The output looks like this,

Building CSS file:

Now, it's time to style the created HTML. To design HTML, we use CSS.

First, we clear the default margin and padding from the page. For that, we use the following properties for the whole page.


  *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

Now, we take down all contents of the body in the center with the help of the following code:


  body{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

Next, we style the start, stop, and restart buttons using the class the name btn with the help of the following code:

Now, let's add some effects on these buttons like, whenever we hover over these buttons the color of the background and text and font-weight of the font will change automatically.


  .btn{
    width: 70px;
    height: 30px;
   margin: 0px 15px;
   border: none;
   border-radius: 5px;
   cursor: pointer;
   font-weight: bold;
   background: linear-gradient(145deg, #e0dedd, #ffffff);
    box-shadow:  5px 5px 10px #b6b4b4,
                 -5px -5px 10px #ffffff;

}

#start:hover{
     background: #0072fe;
     font-weight: bold;
     color: white;
}

#stop:hover{
    background: rgb(233, 0, 233);
    font-weight: bold;
    color: white;
}

#restart:hover{
    background: red;
    font-weight: bold;
    color: white;
}

After adding effects, we are going to style the timerContainer and the items of the timerContainer with the help of the following code:


  #timerContainer{
    text-align: center;
    margin-top: 30px;
    padding: 10px;
    border-radius: 15px;
    background: linear-gradient(145deg, #e0dedd, #ffffff);
    box-shadow:  5px 5px 10px #b6b4b4,
                 -5px -5px 10px #ffffff;
}

.text{
    font-size: 60px;
    font-weight: bold;
}

.text2{
    font-size: 17px;
    margin: 0px 30px;
    font-weight: bold;
    color: #0072fe;
}

In the final stage, we use a beautiful font named kanit. This font is taken from google fonts. The website link is given below go on that page and copy the import link and paste it into the first line of the CSS file. After that copy the font family and paste it into the ‘body’ and ‘.btn’ section of the CSS file.

Website link: click me

Now, we did the styling of HTML. Now, we see the result of this design.

Building JS file:

This is the most important file. Without this file, we cannot make a successful stopwatch.

Ok! Let’s start the real game.

To create a stopwatch, we need 4 main variables are hr, min, sec, and TimeControler. Here, hr indicates hours, min indicates minutes, and sec indicates seconds. These 3 variables are initialized with 0 value but TimeControler has the value false.


 let hr=0;
 let min=0;
 let sec=0;
 let TimeControler=false;

Here, TimeControler is used to control the stopwatch. This means it helps us to start, stop, and restart the stopwatch. Whenever TimeControler has false value then it means the stopwatch was stopped or restarted. If TimeControler has true value then it means the stopwatch is start.

Now, remember, in HTML we added some functions on the buttons. In the start button, we called start(true) function with the argument true. In the stop button, we called the stop(false) function with the argument false. In the restart button, we called the restart(false) function with the argument false.

Now, we define these functions in this file. Here, we give true value as an argument to the function start() it means whenever a user clicks on this button, the argument value of start() function is stored into the TimControler variable and calls the timer() function and then the stopwatch starts. Here, the timer() function holds the code of the stopwatch.

If the argument of stop() function is false then the argument value of the stop() function is stored into the variable TimeControler but the function does not call the timer function. So, when a user clicked on this button the stopwatch stops at that time.

If the argument of restart() function is false then the restart() function calls the stop function and makes the value of variables hr = 0, min = 0, and sec = 0. Also change the text of the id’s hr, min, and sec to 00.


  function start(controler){
      TimeControler=controler;
      Timer();
}

function stop(controler2){ 
         TimeControler=controler2;
}

function restart(controler3){
        stop(controler3);
        hr=0;
        min=0;
        sec=0;
        document.getElementById('hr').innerHTML = "00";
        document.getElementById('min').innerHTML = "00";
        document.getElementById('sec').innerHTML = "00";
}

Now, it’s time to define our main and important function which is the timer() function. Here, we add a condition that is if TimeControler == true then increment the value of sec (sec++). If the sec value goes to greater than 59 then increment min value (min++) and set value of sec = 0. If min > 69 then increment hr value (hr++) and set min = 0 and sec = 0.

Here, we do some corrections. Here we add conditions for when a value of sec, min, or hr is smaller than 10, we do some changes in the text of hours, minutes, and seconds. That change is we add 0 before sec, min, hr, and then we concatenate the value of sec, min, hr.

Now, lastly, we use setTimeout(timer, 1000) function. setTimeout() function is used to delay the work of a function. Here, we can see setTimeout has 2 arguments one is the timer which is the main function, and one in seconds. Remember 1000 ms = 1s. Here, setTimeout() function runs the timer() function with 1 second of delay.


  function timer(){
    
    if (TimeControler == true) {
  
        sec++;

        if (sec > 59) {
            min++;
            sec=0;
            
        }

        if (min > 59) {
            hr++;
            min=0;
            sec=0;
           
        }

        if(sec < 10){
            document.getElementById('sec').innerHTML = "0" + sec;
        }else{
            document.getElementById('sec').innerHTML = sec;
        }

        if(min < 10){
            document.getElementById('min').innerHTML = "0" + min;
        }else{
            document.getElementById('min').innerHTML = min;
        }

        if(hr < 10){
            document.getElementById('hr').innerHTML = "0" + hr;
        }else{
            document.getElementById('hr').innerHTML = hr;
        }

    
    setTimeout(timer, 1000);
 }
}

Finally, we completed our JavaScript Stopwatch successfully. Now, we see the output of this script.

On this page, we learned about how to build a simple good looking JavaScript Stopwatch. For that, we first created a folder, and then in that folder, we created our HTML, CSS, and JavaScript files. After that, we created the structure of the stopwatch with the help of HTML. Next, we designed the stopwatch using CSS, and lastly, we created a successful script for the stopwatch. If you understood this code then please support me and write a comment about how you liked this post. Thank you.

Full Source Code:


<!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>Stopwatch</title>
    <link rel="stylesheet" href="stopwatchStyle.css">
</head>
<body>
    <div id="container">
        <div id="btnContainer">
            <button class="btn" id="start" onclick="start(true)">Start</button>
            <button class="btn" id="stop" onclick="stop(false)">Stop</button>
            <button class="btn" id="reset" onclick="reset(false)">Reset</button>
        </div>
        <div id="timerContainer">
               <span class="text" id="hr">00</span>
               <span class="text">:</span>
               <span class="text" id="min">00</span>
               <span class="text">:</span>
               <span class="text" id="sec">00</span>
               <br>
               <span class="text2" >hrs</span>
               <span class="text2" >min</span>
               <span class="text2" >sec</span>
               
        </div>
    </div>

    <script src="js/stopewatchScript.js"></script>
</body>
</html>


@import url('https://fonts.googleapis.com/css2?family=Kanit&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    font-family: 'Kanit', sans-serif;
}

.btn{
    width: 70px;
    height: 30px;
   margin: 0px 15px;
   border: none;
   border-radius: 5px;
   cursor: pointer;
   font-family: 'Kanit', sans-serif;
   font-weight: bold;
   background: linear-gradient(145deg, #e0dedd, #ffffff);
    box-shadow:  5px 5px 10px #b6b4b4,
                 -5px -5px 10px #ffffff;

}

#start:hover{
     background: #0072fe;
     font-weight: bold;
     color: white;
}

#stop:hover{
    background: rgb(233, 0, 233);
    font-weight: bold;
    color: white;
}

#reset:hover{
    background: red;
    font-weight: bold;
    color: white;
}

#timerContainer{
    text-align: center;
    margin-top: 30px;
    padding: 10px;
    border-radius: 15px;
    background: linear-gradient(145deg, #e0dedd, #ffffff);
    box-shadow:  5px 5px 10px #b6b4b4,
                 -5px -5px 10px #ffffff;
}

.text{
    font-size: 60px;
    font-weight: bold;
}

.text2{
    font-size: 17px;
    margin: 0px 30px;
    font-weight: bold;
    color: #0072fe;
}


let hr=0;
let min=0;
let sec=0;

let Timecontroler=false;

function start(controler){
      Timecontroler=controler;
      Timer(Timecontroler);
}

function stop(controler2){ 
         Timecontroler=false;
}

function reset(controler3){
        stop(controler3);
        hr=0;
        min=0;
        sec=0;
        document.getElementById('hr').innerHTML = "00";
        document.getElementById('min').innerHTML = "00";
        document.getElementById('sec').innerHTML = "00";
}

function Timer(parameter){
    
    if (Timecontroler == true) {
  
        sec++;

        if (sec > 59) {
            min++;
            sec=0;
            
        }

        if (min > 59) {
            hr++;
            min=0;
            sec=0;
           
        }

        if(sec < 10){
            document.getElementById('sec').innerHTML = "0" + sec;
        }else{
            document.getElementById('sec').innerHTML = sec;
        }

        if(min < 10){
            document.getElementById('min').innerHTML = "0" + min;
        }else{
            document.getElementById('min').innerHTML = min;
        }

        if(hr < 10){
            document.getElementById('hr').innerHTML = "0" + hr;
        }else{
            document.getElementById('hr').innerHTML = hr;
        }

    
    setTimeout(Timer, 1000);
 }
}