Stopwatch Due to HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>StopWatch</title>
<style>
body{
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
background-color: #f7f7f7;
display: grid;
place-items: center;
height: 100vh;
overflow: hidden;
-webkit-tap-highlight-color: transparent;
-webkit-font-smoothing: antialiased;
}
h1{
font-size: 3.5rem;
position: absolute;
display: inline-block;
background-image: url(https://i.ibb.co/5YPzx2w/png-clipart-sololearn-computer-programming-android-android-text-logo-thumbnail.png);
background-size: contain;
-webkit-background-clip:text;
color:rgb(16, 173, 187);
}
.container{
width: 100vw;
height: 100vh;
text-align: center;
}
.container__inner{
margin:0 auto;
width: 85%;
height: 60%;
background-color: rgb(0, 0, 0);
border-radius:10px;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
button:hover{
background-color: teal;
}
button{
outline: none;
border: none;
border-radius: 5px;
color: #fff;
background-color:#000;
padding:1rem 2rem;
margin-top: 1rem;
cursor: pointer;
transition: all .3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@media (max-width: 400px){
button{
padding: 0.8rem .8rem;
font-size: .8rem;
}
.container__inner{
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
}
</style>
</head>
<body>
<div class="container">
<h2>Stop_Watch (OOP-JS)</h2>
<div class="container__inner">
<h1 id="clock">0:0:00</h1>
</div>
<button id="startBtn">Start</button>
<button id='stopBtn'>Stop</button>
<button id="contBtn">continue</button>
<button id="resetBtn">reset</button>
</div>
<script>
//public variables
let c ; // it hold new clock object will be created on click
let h1 = document.getElementById('clock'); //grab h1 tag
let interval = null; //time in number set it to null/nothing
let timeline; //for holding interval function
let minutes = 0; //time in Minutes
let seconds = 0; //time in Seconds
let Mil = 0; //time in Milliseconds
let running; //checking if program is running
let ContinueState = true; //checking if program can cont..
//a class for storing all methods of the program
class clock {
// A start method for counting
start(){
if(running)
throw new Error('StopWatch is alredy started');
running = true;
interval = 10;
startCount();
}
//A stop method for count freezing
stop(){
if(!running)
throw new Error('StopWatch is not started');
clearInterval(timeline);
running = false;
this.paused = true;
ContinueState = true;
}
//continue method for resume counting
continue(){
if(!this.paused)
throw new Error('Reset first and start');
if(!ContinueState){
console.log('start a counter');
return false;
}
startCount();
running = true
}
//reset method for restarting a program
reset(){
minutes = 0;
seconds = 0;
Mil = 0;
running= false;
interval = null;
clearInterval(timeline);
h1.textContent = '0:0:0';
ContinueState = false;
}
}
//A function responsible for count after being called on method "start()";
const startCount = () => {
timeline = setInterval( () => { //interval function inside timeline variable
if(Mil>99){ //if milliseconds reach 100 it reset to 0 again
Mil = 0;
seconds++; // adding 1 to seconds
}
if(seconds>59){ //if seconds reach 60 it reset to 0 again
seconds= 0;
minutes++; //adding 1 to minutes
}
Mil++ //increasing Milliseconds by 1
h1.textContent = minutes + ':' + seconds + ":" + Mil;
//replace h1 in html with current values counted
}, interval);
};
//grab start button and add listener on click
document.getElementById('startBtn').addEventListener('click',function(){
c = new clock; //creating new object for counting
c.start(); //calling a start method for count within object created
})
//grab stop button and add listener on click
document.getElementById('stopBtn').addEventListener('click',function(){
c.stop(); //calling a stop method in the object
})
//grab a continue button and listen on click
document.getElementById('contBtn').addEventListener('click',function(){
c.continue(); //calling a continue method in the object
})
//grab a reset button and listen on click
document.getElementById('resetBtn').addEventListener('click',function(){
c.reset();//calling a reset method in the object
})
</script>
</body>
</html>
OUTPUT
Posts
48 Comments
Very good 🙂🙂🙂🙂🙂
ReplyDeleteAmazing 😘😘😘😘😘
ReplyDeleteWow 😘😘😘😘😘😘
ReplyDeleteNice workable stopwatch
ReplyDeleteVery very very very very very interesting
ReplyDeleteWow
ReplyDeleteAmazing
ReplyDeleteGood Good Very good 😘😘😘😘😘😘
ReplyDeleteSuperb
ReplyDeleteAttractive
ReplyDeleteInteresting
ReplyDeleteSuperb
ReplyDelete🙂🙂🙂🙂🙂 Rock
ReplyDeleteCool
ReplyDeleteincredible
ReplyDelete🙂🙂🙂🙂🙂 mind blowing 👌👌 👌👌👌👌👌👌👌👌
ReplyDelete🤘🤘
ReplyDeleteAmazing stopwatch ⏱⏱⏱⏱⏱⏱⏱⏱⏱
ReplyDelete⏱⏱⏱⏱⏱⏱⏱
⏱⏱⏱⏱⏱ Superb
ReplyDelete⏱F⏱a⏱n⏱t⏱a⏱s⏱t⏱i⏱c ⏱⏱⏱⏱⏱⏱⏱
ReplyDelete⏱F⏱a⏱n⏱t⏱a⏱s⏱t⏱i⏱c
ReplyDeleteperfect stopwatch 👌👌 👌👌👌👌👌
ReplyDeleteWonderful✨😍✨😍✨😍✨😍
ReplyDeleteeffective
ReplyDelete😎😎😎😎😎
ReplyDeleteWonderful program
ReplyDeleteGreat👏👏👏
ReplyDeletewonderful Program
ReplyDeleteFabulous idea 💡 Guys
ReplyDeleteNice Idea 💡💡💡💡💡
ReplyDeleteCool 😎😎😎😎😎😎
ReplyDelete😎😎😎😎😎 Perfect 👌 👌 👌 👌 👌 👌
ReplyDeleteTop 🔝 class
ReplyDelete👌 👌 👌 👌 👌 Superb
ReplyDeleteGreat
ReplyDeletemind blowing
ReplyDeleteWoww 👌 👌 👌 👌 👌
ReplyDeleteGood Thinking 💭💭💭💭💭💭
ReplyDelete💭 💭 lovely
ReplyDeleteexcellent
ReplyDeleteWhat I say about this programming I've no word for a amazing programming
ReplyDeleteCreate Awesome 👍👍👍👍👍
ReplyDeleteWonderful
ReplyDeleteKallu
ReplyDeleteSuper
excellent
ReplyDeleteWow
ReplyDeletegood understanding
ReplyDeleteKallu intresting
ReplyDelete