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.
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
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
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.