DEV Community 👩‍💻👨‍💻

Cover image for How to Create a Stopwatch in JavaScript
Stackfindover
Stackfindover

Posted on • Updated on

How to Create a Stopwatch in JavaScript

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

Common Query

  1. How do you make a stopwatch in JavaScript?
  2. How to create a stopwatch with JavaScript
  3. 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>
Enter fullscreen mode Exit fullscreen mode

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

Stopwatch in JavaScript Video Output:

Stopwatch in JavaScript Codepen Output:

Top comments (3)

Collapse
akashshyam profile image
Akash Shyam

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.

Collapse
hansdenotter profile image
hansdenotter

How can I learn to do this kind of projects myself instead of copying the code?

Collapse
stackfindover profile image
Stackfindover Author • Edited on

You need to learn JavaScript :)
You can go with W3schools if you are beginner: w3schools.com/js/default.asp

🌚 Browsing with dark mode makes you a better developer.

It's a scientific fact.