Countdown timer

CSS

// Countdown Timer
ul#countdown{
  text-align:center;
  margin: 0 auto;
}
ul#countdown li {
    color:#000;
    display: inline-block;
    margin-right:18px;
    margin-bottom:10px;
    width: 100px;
    height:100px;
    text-align: center;
    line-height:0px;
}
ul#countdown li span {
    font-size: 50px;
    font-weight: 500;
    color: #428957;
  letter-spacing: 2px;
    position: relative;
    line-height: 65px;
  top: 7px;
}

ul#countdown li p.timeRefDays,
ul#countdown li p.timeRefHours,
ul#countdown li p.timeRefMinutes,
ul#countdown li p.timeRefSeconds {
    text-transform:capitalize;
    text-align:center;
  font-weight: 500;
  font-size: 20px;
    padding-right:0px;
    line-height: 1px;
}

HTML

<ul id="countdown">
   <li><span class="days">00</span><p class="timeRefDays">days</p></li>
   <li><span class="hours">00</span><p class="timeRefHours">hours</p></li>
   <li><span class="minutes">00</span><p class="timeRefMinutes">minutes</p></li>
   <li><span class="seconds">00</span><p class="timeRefSeconds">seconds</p></li>
</ul>

JS

PAGE HEADER CODE INJECTION (ON PAGE OR INDEX)

You'll need to change the date and time on Line 8 of the JS.  The time is in military time (24 hour clock) Hours: Minutes: Seconds. 

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(document).ready(function() {
                           
    $("#countdown").countdown({
                date: "16 March 2018 00:00:00 PST",
                format: "on"
            },
            
            function() {
                // callback function
            });
});





(function($) {
    $.fn.countdown = function(options, callback) {

        thisEl = $(this);

        var settings = { 
            'date': null,
            'format': null
        };

        if(options) {
            $.extend(settings, options);
        }
        
        function countdown_proc() {
            
            eventDate = Date.parse(settings['date']) / 1000;
            currentDate = Math.floor($.now() / 1000);
            
            if(eventDate <= currentDate) {
                callback.call(this);
                clearInterval(interval);
            }
            
            seconds = eventDate - currentDate;
            
            days = Math.floor(seconds / (60 * 60 * 24)); 
            seconds -= days * 60 * 60 * 24;
            
            hours = Math.floor(seconds / (60 * 60));
            seconds -= hours * 60 * 60;
            
            minutes = Math.floor(seconds / 60);
            seconds -= minutes * 60;
            
            if (days == 1) { thisEl.find(".timeRefDays").text("day"); } else { thisEl.find(".timeRefDays").text("days"); }
            if (hours == 1) { thisEl.find(".timeRefHours").text("hour"); } else { thisEl.find(".timeRefHours").text("hours"); }
            if (minutes == 1) { thisEl.find(".timeRefMinutes").text("minute"); } else { thisEl.find(".timeRefMinutes").text("minutes"); }
            if (seconds == 1) { thisEl.find(".timeRefSeconds").text("second"); } else { thisEl.find(".timeRefSeconds").text("seconds"); }
            
            if(settings['format'] == "on") {
                days = (String(days).length >= 2) ? days : "0" + days;
                hours = (String(hours).length >= 2) ? hours : "0" + hours;
                minutes = (String(minutes).length >= 2) ? minutes : "0" + minutes;
                seconds = (String(seconds).length >= 2) ? seconds : "0" + seconds;
            }
            
            if(!isNaN(eventDate)) {
                thisEl.find(".days").text(days);
                thisEl.find(".hours").text(hours);
                thisEl.find(".minutes").text(minutes);
                thisEl.find(".seconds").text(seconds);
            } else { 
                alert("Invalid date. Here's an example: 12 Tuesday 2012 17:30:00");
                clearInterval(interval); 
            }
        }
        
        countdown_proc();
        
        interval = setInterval(countdown_proc, 1000);
        
    }
}) (jQuery);
</script>