2014 World Cup Countdown Clock

Simple countdown clock to the 2014 World Cup

HTML

<span id="countdown"></span>

CSS

h1 { font-size: 4em; }
#countdown { font-size: 3em; margin: 0 auto; width: 75%; }
.calendar { font-size: .4em; }

JavaScript

// https://mindgrader.com/tutorials/1-how-to-create-a-simple-javascript-countdown-timer

// set the date we're counting down to`
var target_date = new Date('jun,15,2018,01:00:00').getTime();

var days, hours, minutes, seconds;

//get tag element
var countdown = document.getElementById("countdown");

// update the tag with id "countdown" every 1 second
setInterval(function () {
    
    //find the amount of "seconds" between now and target
    var current_date = new Date().getTime();
    var seconds_left = (target_date - current_date) / 1000;

    // do some time calculations    
    days = parseInt( seconds_left / 86400 );
    seconds_left = seconds_left % 86400;
    
    hours = parseInt( seconds_left / 3600 );
    seconds_left = seconds_left % 3600;
    
    minutes = parseInt( seconds_left / 60 );
    seconds = parseInt( seconds_left % 60 );
    
    // format countdown string + set tag value
    countdown.innerHTML = days + "<span class\=\"calendar\">days<\/span>" + hours + " <span class\=\"calendar\">hours<\/span>" + minutes + "<span class\=\"calendar\">minutes<\/span> " + seconds + " <span class\=\"calendar\">seconds<\/span>";
        
}, 1000);