Simple Stopwatch using JavaScript & CSS

In this article you will learn how to make a simple stopwatch using JavaScript and CSS. Earlier I shared with you a tutorial on Simple JavaScript StopWatch.

First I created a box at the top of the webpage. Then I made three small boxes which can be seen in the times. At the end there are two buttons that will control the stopwatch.

Simple Stopwatch using JavaScript

The design shown in this tutorial is absolutely simple. There are no restart buttons but only start and stop buttons.

Watch its live demo to learn how it works. Here I have tried to share step-by-step tutorial. For this you need to have a basic idea about HTML CSS and JavaScript.

1. Make a box on the webpage

I created a box using the following HTML and CSS codes. The width of this box: 300px, height: 90px and background color white has been used.

<div id="stopwatch">

</div>

body {
  font-family: arial;
  background: #0776de;
}

#stopwatch {
  width: 300px;
  height: 90px;
  margin: 100px auto;
  background: white;
  color: #333;
  border-radius: 10px;
  padding: 60px 50px 100px;
  text-align: center;
  font-size: 30px;
}

2. Create a count view display

Now a display has been created in which the times can be seen. There will be countdown in minutes, seconds and milliseconds. I made three small boxes for the times. These boxes depend on width: 55px and height padding.

<div class="time">
 <span id="minute">00</span>
 <span id="second">00</span>
 <span id="ms">00</span>
</div>

.time{
  margin-left: -25px;
} 

#stopwatch span {
  background: #c7e0f8;
  color: #0776de;
  padding: 10px;
  width: 55px;
  border-radius: 5px;
  margin: 3px;
  display: inline-block;
  margin-left: 20px;
}

3. Stop and Start buttons of JavaScript Stopwatch

Now two buttons have been created which will control this Simple Stopwatch. The first button is to start the count and the second button is to turn off the count. However, there is no restart button.

I have previously designed a simple JavaScript Stopwatch with a restart button. You can watch that tutorial. width: 140px, height: 50px used. I have used different background-colors for the two buttons.

In addition, hover effect has been used in each button. The color of the background will change when you click on the buttons or move the mouse.

  <button id="start" onclick="start();">Start</button>
  <button id="stop" onclick="stop();">Stop</button>

#stopwatch button {
  font-size: 22px;
  -webkit-appearance: none;
  border: none;
   background-color: #2e80b3;
  color: white;
  border-radius: 5px;
  width: 140px;
  height: 50px;
  transition: .3s;
}
#stopwatch button:first-of-type {
  margin-top: 15px;
}

#stopwatch button:last-child{
    background-color: #ae7617;
}

#stopwatch button:hover {
  background: #333;
  color: #fff;
  cursor: pointer;
}

4. Activate Simple Stopwatch using JavaScript

Now is the time to implement this Simple Stopwatch using JavaScript. If you know basic JavaScript you can easily understand the following code. Here I have given the necessary explanation of each line.

//The current count of the timer is zero
var timer = 0;
var timerInterval;
//One of the id functions of the three time boxes has been assigned a global constant.
var ms = document.getElementById('ms');
var second = document.getElementById('second');
var minute = document.getElementById('minute');

function start() {
  stop();
//All calculations are stored in "timerInterval".
//Here "setInterval" is used and 1000/60 seconds is set.
//As a result, this calculation will be updated every 1 millisecond
  timerInterval = setInterval(function() {
//Now the value of 'timer' has been set
//We know x + = y => x = x + y
    timer += 1/60;
//Now the value of 'milliseconds' has been set. It is also stored in "msVal".
    msVal = Math.floor((timer - Math.floor(timer))*100);
//The value of 'seconds' has been determined in the same way.
    secondVal = Math.floor(timer) - Math.floor(timer/60) * 60;
//The value of 'minute' has been determined.
    minuteVal = Math.floor(timer/60);

//With the help of 'innerHTML' all the information is displayed in the webpage
//The condition here is that when the value of time is less than 10 then a 0 will be added before that time.
// For milliseconds
ms.innerHTML = msVal < 10 ? "0" + msVal.toString() : msVal;
//For seconds
second.innerHTML = secondVal < 10 ? "0" + secondVal.toString() : secondVal;
// For Minute
minute.innerHTML = minuteVal < 10 ? "0" + minuteVal.toString() : minuteVal;

  }, 1000/60);
}
//Now you have to activate the stop button
//The clearInterval() function in javascript clears the interval which has been set by setInterval() function before that.
function stop() {
  clearInterval(timerInterval);
}

Hopefully the above code and tutorial has helped you to know how Simple Stopwatch was created using HTML CSS JavaScript.

Related Post:

1. Simple Weather App using JavaScript
2. Make a Todo List using JavaScript
3. Simple Stopwatch using JavaScript
4. Skeleton Screen Loading Animation
5. Javascript Age Calculator
6. Random Password Generator with JavaScript
7. Automatic Image Slider in Html, CSS
8. Sidebar Menu Using HTML CSS

If you want to download the required source code of this Stopwatch then you can use this link. If you have any problems, you can comment.

You can visit my blog for more tutorials like this. 😊
https://www.foolishdeveloper.com/