Build a Stop-Watch Web App Using JavaScript

If you wen to create Stop-Watch web app, then this tutorial blog can help you. Today in this blog, you will learn how to create Stop-Watch Using HTML CSS and pure JavaScript.

Video tutorial of Stop-Watch Web using JavaScript

This tutorial video can help you to create Stop-Watch Web using JavaScript

Create Stop-Watch Web using JavaScript[Source Codes]

HTML Code

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=1">
<title>Home</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
    <div>
        <h1>STOPWATCH</h1>
        <div class="coutn-box">
            <span id="sec">00</span>:<span id="msec">00</span>
        </div>
        <button id="startBtn">Start</button>
        <button id="stopBtn">Stop</button>
        <button id="resetBtn">Reset</button>
    </div>


<script type="text/javascript" src="js/script.js"></script>
</body>
</html>

CSS Code

Copy

*,*:after,*:before{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
body{
	font-family: arial;
	font-size: 16px;
	margin: 0;
	background: #0276ad;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	text-align: center;
}
h1{
	font-size: 66px;
	letter-spacing: 5px;
	font-weight: 400;
}
.coutn-box{
	width: 400px;
    text-align: center;
    padding: 30px;
    background: #024c6f;
    font-size: 100px;
	font-weight: 700;
	border-radius: 20px;
	margin: 0 auto 30px;
}
button{
	border: 0;
    padding: 10px 29px;
    border-radius: 10px;
    background-color: #012f45;
    color: #fff;
    font-size: 20px;
    text-transform: uppercase;
    margin: 0 4px;
}
button:hover{
	background-color: #0da1e8;
}

JavaScript Code

Copy

window.onload = function () {
  
    var seconds = 0, 
     milliseconds = 0, 
     msec = document.getElementById("msec"),
     sec = document.getElementById("sec"),
     startBtn = document.getElementById('startBtn'),
     stopBtn = document.getElementById('stopBtn'),
     resetBtn = document.getElementById('resetBtn'),
     Interval ;
  
    startBtn.onclick = function() {
      
      clearInterval(Interval);
       Interval = setInterval(startTimer, 10);
    }
    
    stopBtn.onclick = function() {
         clearInterval(Interval);
    }
    
  
    resetBtn.onclick = function() {
       clearInterval(Interval);
       milliseconds = "00";
        seconds = "00";
        msec.innerHTML = milliseconds;
        sec.innerHTML = seconds;
    }
    
     
    
    function startTimer () {
        milliseconds++; 
      
      if(milliseconds <= 9){
        msec.innerHTML = "0" + milliseconds;

      } if (milliseconds > 9){
        msec.innerHTML = milliseconds;
        
      } if (milliseconds > 99) {
        console.log("seconds");
        seconds++;
        sec.innerHTML = "0" + seconds;
        milliseconds = 0;
        msec.innerHTML = "0" + 0;
      } if(seconds > 9){
        sec.innerHTML = seconds;
      }
    
    }
    
  
  }