ecki/JavaScript-from-Beginner-to-Professional
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Delete countdown timer

Browse Source
This commit is contained in:
Karan 2021-12-03 14:50:49 +05:30 committed by GitHub
parent 6b1b3ed7c1
commit 2cd5ff488a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 0 additions and 101 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
Chapter 14/countdown timer
View File

@ -1,101 +0,0 @@
<!doctype html>
<html>
<head>
<title>JavaScript</title>
<style>
.clock {
background-color: blue;
width: 400px;
text-align: center;
color: white;
font-size: 1em;
}
.clock > span {
padding: 10px;
border-radius: 10px;
background-color: black;
}
.clock > span > span {
padding: 5px;
border-radius: 10px;
background-color: red;
}
input {
padding: 15px;
margin: 20px;
font-size: 1.5em;
}
</style>
</head>
<body>
<div>
<input type="date" name="endDate">
<div class="clock"> <span><span class="days">0</span> Days</span> <span><span class="hours">0</span> Hours</span> <span><span class="minutes">0</span> Minutes</span> <span><span class="seconds">0</span> Seconds</span>
</div>
</div>
<script>
const endDate = document.querySelector("input[name='endDate']");
const clock = document.querySelector(".clock");
let timeInterval;
let timeStop = true;
const savedValue = localStorage.getItem("countdown") || false;
if (savedValue) {
startClock(savedValue);
let inputValue = new Date(savedValue);
endDate.valueAsDate = inputValue;
}
endDate.addEventListener("change", function (e) {
e.preventDefault();
clearInterval(timeInterval);
const temp = new Date(endDate.value);
localStorage.setItem("countdown", temp);
startClock(temp);
timeStop = true;
})
function startClock(d) {
function updateCounter() {
let tl = (timeLeft(d));
if (tl.total <= 0) {
timeStop = false;
}
for (let pro in tl) {
let el = clock.querySelector("." + pro);
if (el) {
el.innerHTML = tl[pro];
}
}
}
updateCounter();
if (timeStop) {
timeInterval = setInterval(updateCounter, 1000);
}
else {
clearInterval(timeInterval);
}
}
function timeLeft(d) {
let currentDate = new Date();
let t = Date.parse(d) - Date.parse(currentDate);
let seconds = Math.floor((t / 1000) % 60);
let minutes = Math.floor((t / 1000 / 60) % 60);
let hours = Math.floor((t / (1000 * 60 * 60)) % 24);
let days = Math.floor(t / (1000 * 60 * 60 * 24));
return {
"total": t
, "days": days
, "hours": hours
, "minutes": minutes
, "seconds": seconds
};
}
</script>
</body>
</html>