Creating a Stop Clock in JavaScript: A step by step guide

JavaScript stop watch or rather stop down timer can be implemented using the JavaScript timing methods which are executed in time intervals.JavaScript timing methods automate a particular task to be done on the fly without you having to click a button or call an event.

A stop clock, also known as a timer, is a type of clock that counts up or down from a specific time to zero. In JavaScript, you can create a stop clock by using the setInterval and clearInterval functions to start and stop the timer.

The setInterval function is used to run a specified function repeatedly, with a fixed time delay between each call. For example, you can use setInterval to run a function that updates the timer display every second.

The clearInterval function is used to stop the timer. It takes the ID of the interval as an argument, which is returned by the setInterval function when it is first called.

To create a stop clock, you can create a startTimer function that uses setInterval to start the timer and runs a function that updates the timer display every second. A stopTimer function can be created that uses clearInterval to stop the timer.

You can also add Event listeners to a button or any other UI element, to start and stop the timer by clicking on it.

In addition to this, you can also include features like pausing the timer, resetting the timer and laps feature.

Overall, creating a stop clock in JavaScript is a great way to learn more about JavaScript's timing functions and event handling. It can also be a useful tool for creating interactive applications and games.

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>Document</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="box">
      <h3>Stop Clock in JavaScript</h3>
      <div class="frame">
        <div class="hrs">00</div>
        <div class="colon">:</div>
        <div class="min">00</div>
        <div class="colon">:</div>
        <div class="sec">00</div>   
        <div class="colon">:</div>
        <div class="ms">00</div>
      </div>
      <div class="buttons">
        <button class="start">Start</button>
        <button class="stop">Stop</button>
        <button class="reset">Reset</button>
      </div>
    </div>
  <script src="js/script.js"></script>
</body>
</html>

css/style.css

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700&display=swap');

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;

}
@font-face {
  font-family: 'Digital-7';
  src: url('digital-7.ttf');
}
body{
  background-color: #eb4d4b;
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
}
.box{
  background-color: #fff;
  height: 200px;
  width: 400px;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  user-select: none;
  cursor: pointer;
  box-shadow: rgba(17, 17, 26, 0.05) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 0px 8px;
}

.frame{
  display: flex;
  gap: 3px;
}

h3{
  font-weight: 500;
  color:#130f40;
  text-transform: uppercase;
  margin-bottom: 25px;
}
.hrs,
.min,
.sec,
.ms,
.colon{
width: 50px;
height: 50px;
font-size: 50px;
text-align: center;
line-height: 50px;
color: #eb4d4b;
font-family: 'Digital-7';
}
.colon{
width: 10px;
height: 50px;
}
.buttons{
  margin-top: 25px;
}
.buttons button{
 border: none;
 padding: 5px 20px;
 color:white;
 border-radius: 3px;
 text-transform: uppercase;
}

.start{background-color: #6ab04c;}
.stop{background-color: #30336b;}
.reset{background-color:  #eb4d4b;}


.start-active,
.stop-active{
  pointer-events: none;
  opacity: 0.5;
}

The above code is using JavaScript to create a stopwatch, also known as a timer. The code first selects the start, stop, and reset buttons by querying the DOM for elements with class names start, stop, and reset respectively. Then it declares some variables, including hrs, min, sec, ms, and startTimer.

The code then uses event listeners to attach click events to the start, stop, and reset buttons. The btnStart.addEventListener('click',()=>{ function runs when the start button is clicked. It adds the class 'start-active' to the start button and removes the class 'stop-active' from the stop button.

It also starts the timer using setInterval method, which will run the function inside the setInterval every 10 milliseconds, and increments the ms by 1. It checks the value of ms, sec, and min and when it is equal to 100, 60, and 60 respectively it increments the value of sec, min and hrs by 1.

The btnStop.addEventListener('click',()=>{ function runs when the stop button is clicked. It stops the timer using the clearInterval method, passing the startTimer variable as an argument. It also removes the class 'start-active' from the start button and adds the class 'stop-active' to the stop button.

The btnReset.addEventListener('click',()=>{ function runs when the reset button is clicked. It resets the timer by setting the values of hrs, min, sec, and ms to 0. It also stops the timer using the clearInterval method, passing the startTimer variable as an argument. It also updates the display and removes class 'start-active' from the start button and class 'stop-active' from the stop button.

The updateDisplay() function is used to update the time display, it takes the values of hrs, min, sec, and ms and format it with leading zeroes if the value is less than 10, then it updates the time display with the formatted value. Overall, this code creates a functional stopwatch that can be started, stopped, and reset using buttons. It also updates the time display every 10 milliseconds and format the time display with leading zeroes.

js/script.js

const btnStart=document.querySelector('.start');
const btnStop=document.querySelector('.stop');
const btnReset=document.querySelector('.reset');

let hrs=min=sec=ms=0,startTimer;

btnStart.addEventListener('click',()=>{

  btnStart.classList.add('start-active');
  btnStop.classList.remove('stop-active');

  startTimer=setInterval(()=>{
    ms++;//ms=ms+1;
    if(ms==100){
      sec++;
      ms=0;
    }
    if(sec==60){
      min++;
      sec=0;
    }
    if(min==60){
      hrs++;
      min=0;
    }
    updateDisplay();
  },10);
});

btnStop.addEventListener('click',()=>{
  clearInterval(startTimer);
  btnStart.classList.remove('start-active');
  btnStop.classList.add('stop-active');

});

btnReset.addEventListener('click',()=>{
  hrs=min=sec=ms=0;
  clearInterval(startTimer);
  updateDisplay();
  btnStart.classList.remove('start-active');
  btnStop.classList.remove('stop-active');
});


function updateDisplay(){
  //Formated Display
  phrs=hrs<10?'0'+hrs:hrs;
  pmin=min<10?'0'+min:min;
  psec=sec<10?'0'+sec:sec;
  pms=ms<10?'0'+ms:ms;
  //Output
  document.querySelector('.hrs').innerText=phrs;
  document.querySelector('.min').innerText=pmin;
  document.querySelector('.sec').innerText=psec;
  document.querySelector('.ms').innerText=pms;
}

Output

Live Preview