simple-web-countdown

A simple, configurable web page which counts down to a particular time.
git clone https://git.sr.ht/~jbauer/simple-web-countdown
Log | Files | Refs | README | LICENSE

commit b3d2bc42e5b0eaa5484da8f53378285f03d04ac9
Author: Jake Bauer <jbauer@paritybit.ca>
Date:   Thu,  8 Jul 2021 20:17:44 -0400

Initial commit

Diffstat:
AREADME.md | 14++++++++++++++
Aindex.html | 62++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
2 files changed, 76 insertions(+), 0 deletions(-)

diff --git a/README.md b/README.md @@ -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. diff --git a/index.html b/index.html @@ -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>