Wed Apr 27 2022
Simple Countdown
JavaScript1853 views
Part 1:
Part 2:
File Name: JavaScript-Countdonw.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Countdown</title>
<style>
body {
background-color: #383838;
}
section {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-flow: column;
}
h1 {
font-size: 180px;
color: #fff;
text-shadow: 0 0 15px #ff8800;
}
</style>
<script>
let i = 100;
let timer;
function counter() {
timer = setInterval(() => {
i--;
let extraZ = (i < 10) ? '0' : '';
document.getElementById("counter").innerHTML = extraZ + i;
if(i <= 0) {
clearInterval(timer);
document.getElementById("startBtn").disabled = false;
document.getElementById("stopBtn").disabled = true;
document.getElementById("pauseBtn").disabled = true;
document.getElementById("resumeBtn").disabled = true;
}
}, 1000);
}
function start() {
document.getElementById("startBtn").disabled = true;
document.getElementById("stopBtn").disabled = false;
document.getElementById("pauseBtn").disabled = false;
document.getElementById("resumeBtn").disabled = true;
i = 100;
counter();
}
function pause() {
clearInterval(timer);
document.getElementById("pauseBtn").disabled = true;
document.getElementById("resumeBtn").disabled = false;
}
function resume() {
counter();
document.getElementById("pauseBtn").disabled = false;
document.getElementById("resumeBtn").disabled = true;
}
function stop() {
i = 0;
clearInterval(timer);
document.getElementById("counter").innerHTML = "00";
document.getElementById("startBtn").disabled = false;
document.getElementById("stopBtn").disabled = true;
document.getElementById("pauseBtn").disabled = true;
document.getElementById("resumeBtn").disabled = true;
}
</script>
</head>
<body>
<section>
<h1 id="counter">00</h1>
<div class="btn">
<button type="button" id="startBtn" onclick="start()">Start</button>
<button type="button" disabled id="pauseBtn" onclick="pause()">Pause</button>
<button type="button" disabled id="resumeBtn" onclick="resume()">Resume</button>
<button type="button" disabled id="stopBtn" onclick="stop()">Stop</button>
</div>
</section>
</body>
</html>
Result Screenshot(s)
Author:Geekboots