Skip to content

Instantly share code, notes, and snippets.

@kyrias

kyrias/mickeygoespublic.html

Created November 8, 2017 21:19
Show Gist options
  • Save kyrias/692e2ca5f19c0960e289d832993e84b9 to your computer and use it in GitHub Desktop.
Save kyrias/692e2ca5f19c0960e289d832993e84b9 to your computer and use it in GitHub Desktop.
Download ZIP
Simple countdown timer until Mickey Mouse enters the public domain
Raw
mickeygoespublic.html
<!DOCTYPE html>
<html>
<head>
<title>Mickey Goes Public</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.container {
font-size: 2em;
font-weight: bold;
font-family: sans;
display: flex;
flex-direction: column;
}
.title {
margin: auto;
}
.countdown-container {
display: flex;
flex-direction: row;
margin: auto;
}
.segment {
display: flex;
flex-direction: column;
margin-left: 0.25em;
}
.label {
margin: auto;
font-size: 0.5em;
}
</style>
</head>
<body>
<div class="container">
<div class="title">Mickey goes public in</div>
<div class="countdown-container">
<div class="segment"><div class="value days"></div><div class="label">Days</div></div>
<div class="segment"><div class="value">:</div></div>
<div class="segment"><div class="value hours"></div><div class="label">Hrs</div></div>
<div class="segment"><div class="value">:</div></div>
<div class="segment"><div class="value minutes"></div><div class="label">Mins</div></div>
<div class="segment"><div class="value">:</div></div>
<div class="segment"><div class="value seconds"></div><div class="label">Secs</div></div>
</div>
</div>
<script>
String.prototype.paddingLeft = function (paddingValue) {
return paddingValue.slice(this.toString().length) + this;
};
let elems = [
document.getElementsByClassName("value days")[0],
document.getElementsByClassName("value hours")[0],
document.getElementsByClassName("value minutes")[0],
document.getElementsByClassName("value seconds")[0],
];
let enddate = new Date("01-01-2024 00:00:00");
let second = 1000, minute = second * 60, hour = minute * 60, day = hour * 24;
function getRemaining() {
let now = new Date();
let difference = enddate - now;
let days = Math.floor(difference / day).toString();
let hours = Math.floor((difference % day) / hour).toString().paddingLeft("00");
let minutes = Math.floor((difference % hour) / minute).toString().paddingLeft("00");
let seconds = Math.floor((difference % minute) / second).toString().paddingLeft("00");
return [days, hours, minutes, seconds];
}
function updateDisplay() {
let timeSegments = getRemaining();
for (let segment of timeSegments.entries()) {
elems[segment[0]].innerHTML = segment[1];
}
}
updateDisplay();
setInterval(updateDisplay, 1000);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment