How to Create a Stopwatch in JavaScript

#html #css #javascript #beginners

Hello, guys in this tutorial we will create a Stopwatch using HTML CSS, and JavaScript.

Common Query

How do you make a stopwatch in JavaScript?
How to create a stopwatch with JavaScript
JavaScript simple stopwatch

Hello, guys In this tutorial we will try to solve above mention query. and also we will learn how to create a Stopwatch using HTML CSS and JavaScript.

First, we need to create three files index.html and style.css then we need to do code for it.

Step:1

Add below code inside index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Create a Stopwatch in JavaScript</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="style.css" />
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@200;300;400&display=swap" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  </head>
  <body>  
    <div class="wrapper">
      <div id="stopwatch">00:00:00:00</div>
      <ul id="buttons">
        <li><button id="start">Start</button></li>
        <li><button id="pause">Stop</button></li>
        <li><button id="reset">Reset</button></li>
      </ul>
    </div>

    <script>
      const watch = document.querySelector("#stopwatch");
      let millisecound = 0;
      let timer;

      function timeStart(){
        watch.style.color = "#0f62fe";
        clearInterval(timer);
        timer = setInterval(() => {
          millisecound += 10;

          let dateTimer = new Date(millisecound);

          watch.innerHTML = 
          ('0'+dateTimer.getUTCHours()).slice(-2) + ':' +
          ('0'+dateTimer.getUTCMinutes()).slice(-2) + ':' +
          ('0'+dateTimer.getUTCSeconds()).slice(-2) + ':' +
          ('0'+dateTimer.getUTCMilliseconds()).slice(-3,-1);
        }, 10);
      }


      function timePaused() {
        watch.style.color = "red";
        clearInterval(timer);
      }

      function timeReset(){
        setInterval(timer)
        millisecound = 0;
        watch.innerHTML = "00:00:00:00";
      }

      document.addEventListener('click', (e) => {
        const el = e.target;

        if(el.id === 'start') timeStart();
        if(el.id === 'pause') timePaused();
        if(el.id === 'reset') timeReset();
      })
    </script>
  </body>
</html>

Step:2

Then we need to add code for style.css which code I provide in the below screen.

* {
  padding: 0;
  margin: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-family: 'IBM Plex Sans', sans-serif;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: #f2f4f6;
}
.wrapper {
  width: 400px;
  padding: 20px;
  background: #fff;
  box-shadow: 0 10px 20px rgb(64 64 64 / 5%);
  border: 1px solid rgb(64 64 64 / 5%);
}
div#stopwatch {
  font-size: 50px;
  line-height: 60px;
  text-align: center;
  padding: 0 0 50px 0;
}
ul#buttons {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
ul#buttons button {
  background: #0f62fe;
  border: transparent;
  width: 100px;
  color: #fff;
  font-size: 18px;
  text-align: left;
  display: block;
  padding: 10px 0 10px 20px;
  cursor: pointer;
}

Stopwatch in JavaScript Video Output:

Stopwatch in JavaScript Codepen Output:

Top comments (3)

Akash Shyam • Mar 18 '21

Just for your information, setTimeout() and setInterval() are not very accurate. This is not very apparent since we mostly use it for short periods. Again, I'm not saying this post is wrong, just a little fact.