Christmas Countdown

Santa is coming to town….

Days
Hours
Minutes
Seconds


CSS and Javascript for the christmas countdown is all below.

CSS

countdown{
font-family: ‘Righteous’, cursive;
color:white;
text-align: center;
background: #dd4848;
}

#clockdiv {
width: 1000px;
width: 100%;
top:50%;
left:50%;
font-size: 50px;
}

.inner {
display: inline-block;
border: 5px solid #ffd700;
padding: 20px;
width: 120px;
height: 100px;
background-color: #db3232;
}

.inner .smalltext {
font-size: 20px;
text-shadow: 4px 2px 3px rgba(0,0,0, 0.6);
}

.days {
text-shadow: 4px 2px 3px rgba(0,0,0, 0.6);
}
.hours {
text-shadow: 4px 2px 3px rgba(0,0,0, 0.6);
}
.minutes {
text-shadow: 4px 2px 3px rgba(0,0,0, 0.6);
}
.seconds {
text-shadow: 4px 2px 3px rgba(0,0,0, 0.6);
}

Javascript

function getTimeRemaining(endtime){
var t = Date.parse(endtime) – Date.parse(new Date());
var seconds = Math.floor( (t/1000) % 60);
var minutes = Math.floor( (t/1000 / 60) % 60);
var hours = Math.floor( (t/(1000 * 60 * 60)) % 24);
var days = Math.floor( t/(1000 * 60 * 60 * 24));
return {
‘total’: t,
‘days’: days,
‘hours’: hours,
‘minutes’: minutes,
‘seconds’: seconds
};
}

function initializeClock(id, endtime){
var clock = document.getElementById(id);
var daysSpan = clock.querySelector(‘.days’);
var hoursSpan = clock.querySelector(‘.hours’);
var minutesSpan = clock.querySelector(‘.minutes’);
var secondsSpan = clock.querySelector(‘.seconds’);


function updateClock(){
var t = getTimeRemaining(endtime);

daysSpan.innerHTML = t.days;
hoursSpan.innerHTML = (‘0’ + t.hours).slice(-2);
minutesSpan.innerHTML = (‘0’ + t.minutes).slice(-2);
secondsSpan.innerHTML = (‘0’ + t.seconds).slice(-2);

if(t.total <= 0){
clearInterval(timeinterval);
}
}

updateClock();
var timeinterval = setInterval(updateClock,1000);
}


var deadline = ‘2018-12-25’;
initializeClock(‘clockdiv’, deadline);