Skip to content

Instantly share code, notes, and snippets.

@chrisk
Last active July 2, 2020 19:58
Show Gist options
  • Save chrisk/dd0facec209dc0a19bb6b02c6d3fc3e9 to your computer and use it in GitHub Desktop.
Save chrisk/dd0facec209dc0a19bb6b02c6d3fc3e9 to your computer and use it in GitHub Desktop.
FromHere.com rainbow countdown clock
<center id="timer-container">
<div id="times-up">
<div id="its-time">It's time!</div>
<div id="its-okay">(it's okay)</div>
</div>
<div id="timer">
<div id="days"></div>
<div id="hours"></div>
<div id="minutes"></div>
<div id="seconds"></div>
</div>
</center>
<h4 id="onepulse-link-container" style="display: none"><center><a href="https://www.facebook.com/onePULSEorg/videos/1342863069427522/">Click here to join us at 7 PM for the onePULSE Annual Remembrance Ceremony</a>&nbsp;&nbsp;<small>(<a href="https://www.facebook.com/onePULSEorg/videos/258859952050935/">en Español</a>)</small></center></h4>
<script>
function updateTimer() {
var endTime = new Date("June 12, 2020 21:00:00 EDT");
var endTime = (Date.parse(endTime)) / 1000;
var now = new Date();
var now = (Date.parse(now) / 1000);
var timeLeft = endTime - now;
var container = document.getElementById("timer-container");
if (!container) { return; }
var timesUp = document.getElementById("times-up");
var timer = document.getElementById("timer");
if (timeLeft < -120) {
timesUp.style.display = "none";
timer.style.display = "none";
} else if (timeLeft < -5) {
timesUp.style.display = "block";
timer.style.display = "none";
} else {
if (timeLeft < 0) { timeLeft = 0; }
var days = Math.floor(timeLeft / 86400);
var hours = Math.floor((timeLeft - (days * 86400)) / 3600);
var minutes = Math.floor((timeLeft - (days * 86400) - (hours * 3600 )) / 60);
var seconds = Math.floor((timeLeft - (days * 86400) - (hours * 3600) - (minutes * 60)));
if (hours < "10") { hours = "0" + hours; }
if (minutes < "10") { minutes = "0" + minutes; }
if (seconds < "10") { seconds = "0" + seconds; }
document.getElementById("days").innerHTML = days + "<span>Days</span>";
document.getElementById("hours").innerHTML = hours + "<span>Hours</span>";
document.getElementById("minutes").innerHTML = minutes + "<span>Minutes</span>";
document.getElementById("seconds").innerHTML = seconds + "<span>Seconds</span>";
timesUp.style.display = "none";
timer.style.display = "block";
}
var onePulseLinkContainer = document.getElementById("onepulse-link-container");
if (timeLeft > 600 && onePulseLinkContainer) {
onePulseLinkContainer.style.display = "block";
}
var backupStreamLinkContainer = document.getElementById("backup-stream-link-container");
if (timeLeft > -9000 && timeLeft < 30 && backupStreamLinkContainer) {
backupStreamLinkContainer.style.display = "block";
}
}
if (window.addEventListener) {
window.addEventListener('load', function() {
if (document.getElementById("timer-container")) {
updateTimer();
setInterval(function() { updateTimer(); }, 1000); }
});
}
</script>
<style>
@import url(https://fonts.googleapis.com/css?family=Covered+By+Your+Grace);
#timer, #days, #hours, #minutes, #seconds, #times-up {
font-family: 'Covered By Your Grace', cursive;
display: inline-block;
line-height: 1;
padding: 0 10px;
font-size: 250%;
}
@media only screen and (max-width: 768px) {
#timer, #days, #hours, #minutes, #seconds, #times-up {
font-size: 125%;
}
}
#timer, #times-up {
display: none;
padding: 0;
}
#times-up #its-time {
color: #f6da74;
font-size: 120%;
}
#times-up #its-okay {
color: #aaa;
font-size: 50%;
}
#days {
font-size: 300%;
color: #db4844;
}
#days > span {
color: #eee;
}
#hours {
font-size: 240%;
color: #f07c22;
}
#hours > span {
color: #eee;
}
#minutes {
font-size: 180%;
color: #f6da74;
}
#minutes > span {
color: #eee;
}
#seconds {
font-size: 120%;
color: #abcd58;
}
#seconds > span {
color: #eee;
}
#days > span,
#hours > span,
#minutes > span,
#seconds > span {
display: block;
font-size: 20px;
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment