JSFiddle - React, Tailwind, and code Playground

It's a Count Down!

by Jennifer Perrin

HTML

<!-- Throw in a nice looking font just for the fun of it -->
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,700,300,200"/>

<div id="countMe">
    <h1><a href="" target="_blank">It's a Count Down!</a></h1>
    <ul id="countMe">
        <li class="days"><span></span><br />Days</li>
        <li class="hours"><span></span><br />Hours</li>
        <li class="minutes"><span></span><br />Minutes</li>
        <li class="seconds"><span></span><br />Seconds</li>
    </ul>
</div>

CSS

body {
    margin: 0;
    background: url("http://jenniferperrin.com/image/background.gif");
    font-family: 'Yanone Kaffeesatz';
}
#countMe {
    width: 600px;
    margin: 20px auto;
}

#countMe h1 a {
    display: block;
    margin: 0;
    font-size: 90px;
    color: rgba(255,255,255,0.2);
    text-decoration: none;
}
#countMe h1 a:hover {
    color: rgba(255,255,255,0.3);
}
#countMe ul {
    list-style: none;
    padding: 0;
}
#countMe ul li {
    padding-bottom: 10px;
    background: rgba(255,255,255,0.1);
    border-radius: 20px;
    -moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    display: inline-block;
    width: 120px;
    font-size: 24px;
    color: rgba(255,255,255,0.2);
    text-align: center;
}
#countMe ul li a {
    color: #d79800;
}
#countMe ul li a:hover {
    color: #bf4c24;
}

#countMe ul li span {
    color: #fff;
    font-size: 70px;
}
#countMe ul li span a {
    padding-left: 10px;
}

JavaScript

/**
 * Months start from 0, not from 1
 *     Months:
 *     0 == January        1 == February
 *     2 == March          3 == April
 *     4 == May            5 == June
 *     6 == July           7 == August
 *     8 == September      9 == October
 *     10 == November      11 == December
 **/

                // yyyy, mm, dd, hh, mm, ss
var end = new Date(2015, 10, 18, 23, 59, 59),
    countMe = $('#countMe'),
    days = countMe.find('.days span'),
    hours = countMe.find('.hours span'),
    minutes = countMe.find('.minutes span'),
    seconds = countMe.find('.seconds span'),
    set_count_down, time_loop;

set_count_down = function () {
    var now = new Date(),
        time_left = (end.getTime() - now.getTime()) / 1000,
        d, h, m;

    // Any call back you want to put when the countdown finishes
    if(time_left <= 0) {
        clearInterval(time_loop);
        window.location.reload();
        return;
    }

    d = Math.floor(time_left/86400);
    time_left -= d*86400;

    h = Math.floor(time_left/3600);
    time_left -= h*3600;

    m = Math.floor(time_left/60);
    time_left -= m*60;

    days.html(d);
    hours.html(h);
    minutes.html(m);
    seconds.html(Math.floor(time_left));
};

time_loop = setInterval(set_count_down, 1000);