JSFiddle - React, Tailwind, and code Playground

Rework- Its Yet Another jQuery Powered Countdown

by Jennifer Perrin

HTML

<link rel='stylesheet' type='text/css' media='all' href='http://fonts.googleapis.com/css?family=Droid+Sans' />

<div id="container">
<div id="countdownCont">
    
<div class="time weeks_time time-bottom">
    <span class="number">0</span>
    <span class="number">2</span>
</div>

<div class="time days_time time-bottom">
    <span class="number">0</span>
    <span class="number">2</span>
</div>

<div class="time hours_time time-bottom">
    <span class="number">0</span>
    <span class="number">2</span>
</div>

<div class="time minutes_time time-bottom">
    <span class="number">0</span>
    <span class="number">2</span>
</div>

<div class="time seconds_time time-bottom">
    <span class="number">0</span>
    <span class="number">2</span>
</div>

<div class="timeTitle">
    <p>Weeks</p>
</div>

<div class="timeTitle">
    <p>Days</p>
</div>

<div class="timeTitle">
    <p>Hours</p>
</div>

<div class="timeTitle">
    <p>Minutes</p>
</div>

<div class="timeTitle">
    <p>Seconds</p>
</div>

</div>
</div>

CSS

body { margin:50px; }

#countdownCont {
}

.time {
    position: relative;
    background-color: #444;
    min-width: 90px;
    height: 75px;
    line-height: 75px;
    color: white;
    text-align: center;
    border-radius: 10px;
    float: left;
    margin-left: 6px;
}

.time:after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border: 10px solid;
}

.time-bottom:after {
    border-top-color: #444;
    top: 100%;
    left: 50%;
    margin-left: -10px;
}

.time .number {
    font: bold 50px 'Droid Sans';
    line-height: 75px;
}

.timeTitle {
    position: relative;
    background-color: #444;
    min-width: 90px;
    height: 30px;
    line-height: 30px;
    color: white;
    text-align: center;
    border-radius: 10px;
    float: left;
    margin-left: 6px;
    margin-top: 12px;
}

JavaScript

/**    =============================================================================================
 *    Countdown : jQuery Powered count down script
 *    v1.0
 *
 *    Demo and Documentation:
 *    http://jenniferperrin.com/blog/
 *    =============================================================================================
 *
 *    Author: Jennifer Perrin (http://www.jenniferperrin.com)
 *    Date: 2012-12-17
 *
 *    Copyright 2012, Jennifer Perrin
 *    Creative Commons Attribution 3.0 License (http://creativecommons.org/licenses/by/3.0)
 *
 *    ============================================================================================= **/
 
 (function($) {

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

        $('#' + $(this).attr('id') + ' .number').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) {
           ...