Web development | Build Stopwatch Website
--
Step 1:-Front-end code containing Stopwatch Display
//create a file with name home.html
Stop watch (ss:tt) — HackMeFu
Stopwatch HackMeFu
00:00 Start Stop Reset
Step 2:-Back-end code containing functions to start and stop stopwatch
//create a file with name script.js
window.onload = function(){
var seconds = 00;
var tens = 00;
var appendTens = document.getElementById(“tens”);
var appendSeconds = document.getElementById(“seconds”);
var buttonStart = this.document.getElementById(“button-start”);
var buttonStop = this.document.getElementById(“button-stop”);
var buttonReset = this.document.getElementById(“button-reset”);
var Interval;
/First Step/
/first function that start timer working/
function startTimer(){
tens++;
//console.log(tens);
if(tens < 9){ appendTens.innerHTML = “0” + tens; } if(tens > 9){
appendTens.innerHTML = tens;
}
if(tens > 99){
seconds++;
console.log(seconds);
appendSeconds.innerHTML = “0” + seconds;
tens = 0;
appendTens.innerHTML = “0” + tens;
}
if(seconds > 9){
appendSeconds.innerHTML = seconds;
}
}
/Button to Start Timer/
buttonStart.onclick = function(){
clearInterval(Interval);
Interval = setInterval(startTimer, 10);
}
/Button to Stop Timer/
buttonStop.onclick = function(){
clearInterval(Interval);
}
/Button to Resst Timer/
buttonReset.onclick = function(){
clearInterval(Interval);
tens = “00”;
seconds = “00”;
appendTens.innerHTML = tens;
appendSeconds.innerHTML = seconds;
}
}
Step 3:-Back-end code containing style-sheet to style the page stopwatch
//create a file with name style.css
body{
background: coral;
height: 100%;
}
.container{
width: 800px;
margin: 150px auto;
color: #fff;
text-align: center;
}
h2{
font-family: “Roboto”, sans-serif;
font-weight: 100;
font-size: 2.6em;
text-transform: uppercase;
}
seconds, #tens, .dots{
font-size: 2em;
font-weight: bold;
}
button{
border-radius: 5px;
background: coral;
color: #fff;
border: 1px solid #fff;
text-decoration: none;
cursor: pointer;
font-size: 1.2em;
padding: 18px 10px;
width: 150px;
margin: 10px;
outline: none;
margin-top: 20px;
}
button:hover{
transition: all 0.5s ease-in-out;
background: #fff;
color: coral;
border: 1px solid #fff;
}
Step 4 Host Website using xampp on local system and CPanel on live website and Getting Output
Image for post
Stopwatch HACKMEFU
