jbauer
/
simple-web-countdown
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Initial commit

This commit is contained in:
Jake Bauer 2021-07-08 20:17:44 -04:00
commit b3d2bc42e5
2 changed files with 76 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
README.md Normal file
View File

@ -0,0 +1,14 @@
# Simple Web Countdown
A simple, configurable web page which counts down to a particular time.
# Usage
Edit the three variables in `index.html` between the `// Config` comments to set
the page title, name of the event being counted down to, and the time being
counted down to.
The time is in ISO 8601 format.
The page can then be served by any static webserver, and should run in any
recent browser.

62
index.html Normal file
View File

@ -0,0 +1,62 @@
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Count down to some event.">
<title>????</title>
<style>
html {
text-align: center;
}
body {
color: #121421;
background-color: #e2e4e8;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-55%, -55%);
font-size: 200%;
}
@media (prefers-color-scheme: dark) {
body {
color: #e2e4e8;
background-color: #121421;
}
}
</style>
</head>
<body>
<noscript>This page requires JavaScript to be enabled.</noscript>
<h1 id="clock">0d 00:00:00</h1>
<h2 id="event">Until: ????</h2>
<script>
// Config
let pageTitle = "TITLE";
let eventName = "NAME";
let eventTime = "1970-01-01T00:00:00.000+00:00";
// End Config
document.title = pageTitle;
document.getElementById("event").innerHTML = "Until: " + eventName;
let countdownDate = new Date(eventTime).getTime();
let x = setInterval(function() {
let now = new Date().getTime();
distance = countdownDate - now;
clock = document.getElementById("clock");
if (distance < 0) {
clearInterval(x);
clock.innerHTML = "!!!HYPE!!!";
document.getElementById("event").innerHTML = "It's " + eventName + " time!";
}
let days = Math.floor(distance / (1000 * 60 * 60 * 24));
let hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
let minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
let seconds = Math.floor((distance % (1000 * 60)) / 1000);
clock.innerHTML = days + "d " + ("00" + hours).slice(-2) + ":" +
("00" + minutes).slice(-2) + ":" + ("00" + seconds).slice(-2);
}, 1000);
</script>
</body>