How to create a Stopwatch in JavaScript?

In this article, you will be creating a small JavaScript project “StopWatch”. The stopwatch will start when the user clicks the start button and it will run every second, displaying the full clock as 00:00. This project gives you more practice with JavaScript and it is easy to build.

Skills you need for JavaScript Stopwatch:

HTML
CSS
JavaScript.

Steps to create Stopwatch project by using JavaScript.

1.HTML code

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width-device-width ,initial-scale=1.0">
	<title>StopWatch</title>
	<link rel="stylesheet" type="text/css" href="stopwatch.css"/	>
</head>
<body>
 		<div class="main-container">
 			<h1>JavaScript Stop Watch</h1>
 			<p> <span id="seconds"></span>: <spen id="tens"></spen></p>
 			<button id="button-start">Start</button>
 			<button id="button-stop">Stop</button>
 			<button id="button-restart">Restart</button>
			 <script src="stopwatch.js"></script>
			 
 		</div>
</body>
 </html>

2. Css

body{
	font-family: lota;
	height:100%;
	background-image: url("pics/2.png");
	background-repeat: no-repeat;
	background-size: cover;
}
.main-container{
	width: 600px;
	margin: 10% auto;
	padding: 5% 0;
	color:#e7eafb;
	text-align: center;
	background-color: rgb(97 97 97 / 86%);
	box-shadow: 1px 0px 4px 2px #9c9a9a;
	cursor: pointer;
}
h1,
h2,
h3{
  font-family:lota;
  font-weight : 800;
  font-size:2.6rem;
  text-transform: capitalize;
}
#seconds, 
#tens{
	font-size: 2em;
} 
button{
	width:150px;
	height: 50px;
	background-color: #ebaf7c;
	color:white;
	border-radius: 6px;
	border:2px solid white;
	margin-right: 10px;
	outline: none;
}
button:hover{
	background-color: white;
	color:#ebaf7c;
	font-weight: 800;
	text-transform: capitalize;
	cursor: pointer;
}

3. JavaScript

var seconds = 00;
var tens =00;
var appendTens =document.getElementById("tens");
var appendSeconds =document.getElementById("seconds");
var buttonStart = document.getElementById("button-start");
var buttonStop = document.getElementById("button-stop");
var buttonRestart = document.getElementById("button-restart");
var interval; //to store timer values

//this function will run when click on start
 function startTimer(){
 	tens++;
 	 if(tens < 9){
 	 	appendTens.innerHTML = "0" + tens;
 	 }
 	 if(tens > 9){
		appendTens.innerHTML =tens;
 	 }
 	 if(tens > 99){
 	 	seconds++;
 	 	appendSeconds.innerHTML = "0" +seconds;
 	 	tens =0;
 	 	appendTens.innerHTML = "0" + 0; 	
 	 }
 	 if (seconds>9){
 	 	appendSeconds.innerHTML =seconds;

 	 }
 }
 buttonStart.onclick =function(){
 	interval =setInterval(startTimer);
 };
 buttonStop.onclick=function(){
 	clearInterval(interval);
 };
 buttonRestart.onclick= function(){
 	clearInterval(interval);
 	tens ="00";
 	seconds="00";
 	appendSeconds.innerHTML = seconds;
 	appendTens.innerHTML = tens;
 }