JSFiddle - React, Tailwind, and code Playground

jQuery Countdown Script

by Jennifer Perrin

HTML

<div id="container">

    <!-- Countdown dashboard start -->
    <div id="countdown_dashboard">
        
        <div class="dash weeks_dash" style="display: none;">
            <span class="dash_title">weeks</span>
            <div class="digit">0</div>
            <div class="digit">2</div>
        </div>

        <div class="dash days_dash">
            <span class="dash_title">days</span>
            <div class="digit">0</div>
            <div class="digit">3</div>
        </div>

        <div class="dash hours_dash">
            <span class="dash_title">hours</span>
            <div class="digit">1</div>
            <div class="digit">7</div>
        </div>

        <div class="dash minutes_dash">
            <span class="dash_title">minutes</span>
            <div class="digit">3</div>
            <div class="digit">5</div>
        </div>

        <div class="dash seconds_dash">
            <span class="dash_title">seconds</span>
            <div class="digit">5</div>
            <div class="digit">5</div>
        </div>
        
    </div>
    <!-- Countdown dashboard end -->
    
<div class="info_message" id="complete_info_message" style="display: none;">
    Countdown complete
</div>

</div>

CSS

html, body {
    margin: 0;
    padding: 0;
    font-family: Tahoma;
}

body {
    text-align: center;
    background-color: #2e2e2e;
}

#container {
    margin: 20px auto;
    width: 780px;
    color: #eee;
}

#countdown_dashboard {
    height: 96px;

}

.dash {
    width: 138px;
    height: 96px;
    background: transparent url('../images/dash.png') 0 0 no-repeat;
    float: left;
    margin-left: 2px;
    padding-left: 13px;
    position: relative;
    color: #333;
}

.weeks_dash {
width: 138px;
height: 96px;
background-repeat: no-repeat;
background-image:...

JavaScript

(function($) {

    $.fn.countDown = function(options) {
        config = {};
        $.extend(config, options);
        diffSecs = this.setCountDown(config);

        $('#' + $(this).attr('id') + ' .digit').html('<div class="top"></div><div class="bottom"></div>');
        $(this).doCountDown($(this).attr('id'), diffSecs, 500);

        if (config.onComplete) {
            $.data($(this)[0], 'callback', config.onComplete);
        }
        if (config.omitWeeks) {
            $.data($(this)[0], 'omitWeeks', config.omitWeeks);
        }
        return this;
    };
    $.fn.stopCountDown = function() {
        clearTimeout($.data(this[0], 'timer'));
    };
    $.fn.startCountDown = function() {
        this.doCountDown($(this).attr('id'), $.data(this[0], 'diffSecs'), 500);
    };
    $.fn.setCountDown = function(options) {
        var targetTime = new Date();

        if (options.targetDate) {
            targetTime.setDate(options.targetDate.day);
            targetTime.setMonth(options.targetDate.month - 1);
            targetTime.setFullYear(options.targetDate.year);
            targetTime.setHours(options.targetDate.hour);
            targetTime.setMinutes(options.targetDate.min);
            targetTime.setSeconds(options.targetDate.sec);
        }
        else if (options.targetOffset) {
            targetTime.setDate(options.targetOffset.day + targetTime.getDate());
            targetTime.setMonth(options.targetOffset.month + targetTime.getMonth());
            targetTime.setFullYear(options.targetOffset.year + targetTime.getFullYear());
            targetTime.setHours(options.targetOffset.hour + targetTime.getHours());
            targetTime.setMinutes(options.targetOffset.min + targetTime.getMinutes());
            targetTime.setSeconds(options.targetOffset.sec + targetTime.getSeconds());
        }

        var nowTime = new Date();
        diffSecs = Math.floor((targetTime.valueOf() - nowTime.valueOf()) / 1000);
        $.data(this[0], 'diffSecs',...