2015 Women's World Cup Countdown Clock

Simple countdown clock to the 2015 Women's World Cup

by Jonathan McGlone

HTML

<script src="//fonts.googleapis.com/css?family=Fugaz+One"></script>
<div id="clock">
     <h1>2015 Women's World Cup Countdown</h1>

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

</div>

CSS

@import url(//fonts.googleapis.com/css?family=Fugaz+One);
 body {
    background: url('http://www.ussoccer.com/~/media/images/kits/2015/216-launch-imagefb.jpeg') no-repeat fixed center center / cover;
}
h1 {
    font-size: 4em;
    text-align: center;
    font-family:'Fugaz One', cursive;
    color: red;
    text-shadow: -3px 6px 5px rgba(70, 70, 70, 0.5);
}
#countdown {
    font-size: 3em;
    margin: 0 auto;
    width: 4em;
    display: block;
    font-family:'Fugaz One', cursive;
    color: rgb(227, 243, 117);
    text-shadow: -3px 6px 5px rgba(70, 70, 70, 0.5);
}
.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 6, 2015").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><br> " + hours + " <span class\=\"calendar\">hours<\/span><br> " + minutes + " <span class\=\"calendar\">minutes<\/span><br> " + seconds + " <span class\=\"calendar\">seconds<\/span>";

}, 1000);