Countdown

countdown.markdown

Countdown

A Pen by Joshua Pike on CodePen.

License.

index.html

<div id="timer" class="centered">
  <div id="hours"></div>
  <div id="minutes"></div>
  <div id="seconds"></div>
</div>

script.js

Date.prototype.addHours = function(h) {    
   this.setTime(this.getTime() + (h*60*60*1000)); 
   return this;   
}

var hours = prompt("Please enter the hours", "240");
//var hours = 210;

var nowTemp = new Date();
      var endTime = nowTemp.setHours(nowTemp.getHours()+parseInt(hours)) / 1000;

function makeTimer() {
      

			var nowDate = new Date();
			var now = nowDate.getTime() / 1000;

			var timeLeft = endTime - now;

			var days = Math.floor(timeLeft / 86400); 
			var hours = Math.floor((timeLeft) / 3600);
      var realHours = Math.floor((timeLeft - (days * 86400)) / 3600);
			var minutes = Math.floor((timeLeft - (days * 86400) - (realHours * 3600 )) / 60);
			var seconds = Math.floor((timeLeft - (days * 86400) - (realHours * 3600) - (minutes * 60)));

			if (hours < "10") { hours = "0" + hours; }
			if (minutes < "10") { minutes = "0" + minutes; }
			if (seconds < "10") { seconds = "0" + seconds; }

			$("#days").html(days);
			$("#hours").html(hours + " : ");
			$("#minutes").html(minutes  + " : ");
			$("#seconds").html(seconds);		

	}

	setInterval(function() { makeTimer(); }, 1000);

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

@import url(https://fonts.googleapis.com/css?family=Covered+By+Your+Grace);

.centered {
  width:100%;
  position: fixed;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
}

#days {
  font-size: 150px;
  color: #db4844;
}
#hours {
  font-size: 150px;
  color: #fff;
}
#minutes {
  font-size: 150px;
  color: #fff;
}
#seconds {
  font-size: 150px;
  color: #fff;
}

div {
  display: inline-block;
  line-height: 1;
  padding: 20px;
  font-size: 40px;
}

span {
  display: block;
  font-size: 20px;
  color: white;
}

body {
  text-align: center;
  /*font-family: 'Covered By Your Grace', cursive;
  */
  color: white;
  background: #222;
}