New Year Eve

Countdown

by Brock Callahan

HTML

<div id="now"></div>
<div id="targetTime"></div>
<div id="clock"></div>

CSS

@import url('https://fonts.googleapis.com/css?family=Permanent+Marker');

html {
  background-image: radial-gradient(white, lightblue, cyan);
  font-family: "Permanent Marker";
  height: 100%;
}

h1 {
  text-shadow: 1px 1px 1px lightblue;
}

#clock > span,
#clock > h1,
#clock > h2 {
  animation: festive .5s infinite;
  font-size: 5em;
  text-align: center;
}

#clock > span {
  margin: auto;
  display: block;
}

@keyframes festive {
  0% { text-shadow: 1px 1px 1px red; }
  10% { text-shadow: 1px 1px 1px orange; }
  20% { text-shadow: 1px 1px 1px yellow; }
  40% { text-shadow: 1px 1px 1px green; }
  60% { text-shadow: 1px 1px 1px blue; }
  80% { text-shadow: 1px 1px 1px indigo; }
  100% { text-shadow: 1px 1px 1px violet; }
}

JavaScript

var newYears = new Date(2016, 11, 31, 23, 59, 30);
var now = new Date();
var i = 30;
var timePoll = setInterval(function () {
	now = new Date();
  // document.getElementById("now").innerHTML = now;
	if (now.getTime().toString().substr(0,9) == newYears.getTime().toString().substr(0,9)) {
      clearInterval(timePoll);
      var countdown = setInterval(function () {
        if (i > 0) {
          document.getElementById("clock").innerHTML = "<span id='countDown'>"+i+"</span>";
          i--;
        } else {
          document.getElementById("clock").innerHTML = "<h2>Happy New Year!</h2>";
          clearInterval(countdown);
        }
      }, 1000);
  }
}, 1000);

document.getElementById("clock").innerHTML = "<h2>New Years Eve, 2016</h2>";

// Testing
// var newYears = new Date(2016, 11, 31, 5, 53, 30);
// document.getElementById("targetTime").innerHTML = newYears;