~jbauer/simple-web-countdown

b3d2bc42e5b0eaa5484da8f53378285f03d04ac9 — Jake Bauer 11 months ago
Initial commit
2 files changed, 76 insertions(+), 0 deletions(-)

A README.md
A index.html
A  => README.md +14 -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.

A  => index.html +62 -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>