Stop Watch | Create A Stopwatch In Javascript | Start And Stop Timer







Stop Watch | Create A Stopwatch In Javascript | Start And Stop Timer 

Welcome🎉 to Code With Random blog. In this blog, we learn how we create the Stop Watch. We use HTML, Css, and javascript for this Stop Watch. I hope you enjoy our blog so let’s start with a basic HTML structure for the Stop Watch.

HTML Code 

 <html>  
<head>
<link rel="stylesheet" href="style.css">
<title>
Stop Watch
</title>
</head>
<body>
<script src="logic.js"></script>
<div class="windowshell">
<div class="outershell">
<div class="timerscreen" id="timerscreen">
<label>Stop Watch</label>
<div>
<label class="timer" id="timers">0</label>
<label class="timer" id="timers">seconds</label>
<label class="timer milli" id="timerms">00</label>
<label class="timer milli" id="timerms">milliseconds</label>
</div>
<!-- <label>Seconds </label> -->
<div class="buttonholder">
<button class="reset button" onclick="startTimer()">
Start
</button>
<button class="reset button" onclick="stopTimer()">
Stop
</button>
<button class="reset button" onclick="resetTimer()">
Reset
</button>
</div>
</div>
</div>
</div>
</body>
</html>

There is all the HTML code for the Stop Watch. Now, you can see an output with CSS, then we write javascript for the Stop Watch.

output

Stop Watch | Create A Stopwatch In Javascript | Start And Stop Timer

CSS code

 body{  
display: flex;
}
.windowshell{
background-color: rgba(127, 246, 255, 0.849);
flex-grow: 1;
display: flex;
align-items: center;
justify-content: center;
}
.outershell{
border-radius: 5%;
background-color: whitesmoke;
width: 80%;
padding: 10px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.userinputscreen{
display: flex;
flex-direction: column;
align-items: center;
}
.input{
margin: 10px;
font-size: large;
background-color: black;
color: white;
padding: 10px;
border: solid 4px grey ;
border-style: groove;
display: flex;
align-items: center;
}
.submit{}
.button{
margin: 20px;
color: rgb(255, 255, 255);
background-color: blueviolet;
border-radius: 10%;
padding: 20px;
font-size: larger;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.milli{
font-size: large;
}
.timerscreen{
display: flex;
flex-direction: column;
align-items: center;
}
.timer{
padding: 10px;
}
.reset{
}
label{
font-variant: small-caps;
font-family: fantasy;
font-size: xx-large;
}

Css Updated output


Stop Watch | Create A Stopwatch In Javascript | Start And Stop Timer

Javascript code 

 var intervalVariable = undefined;  
var timeleft = 0;
var totaltime = 0;
function startTimer() {
intervalVariable = setInterval(
updateTime
, 10
);
}
function resetTimer() {
stopTimer();
timeleft = -10;
updateTime();
}
function stopTimer() {
clearInterval(intervalVariable);
}
function updateTime() {
timeleft = timeleft + 10;
let timers = document.getElementById("timers");
let timerms = document.getElementById("timerms");
let milli = timeleft % 1000;
timers.innerHTML = Math.floor(timeleft / 1000);
timerms.innerHTML = Math.floor(milli / 10);
timers.style.color = "green";
timerms.style.color = "red";
}

Final output

Stop Watch | Create A Stopwatch In Javascript | Start And Stop Timer


Now that we have completed our javascript section,  Here is our updated output with javascriptHope you like the StopWatch. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕!

In this post, we learn how to create Stop Watch using simple HTML & CSS, and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning. 

Written by – Code With Random/Anki 

Share on:

Leave a Comment