JSFiddle - React, Tailwind, and code Playground

by Joerian Gauten

HTML

<p class="promo-counter">
    <span><strong>0</strong> days</span>
    <span><strong>0</strong> hrs</span>
    <span><strong>0</strong> mins</span>
    <span><strong>0</strong> sec</span>
</p>

JavaScript

(function($) {
    
    // traverse
    var counter_holder = $('.promo-counter'),
        days = $('span', counter_holder).eq(0),
        hours = $('span', counter_holder).eq(1),
        minutes = $('span', counter_holder).eq(2),
        seconds = $('span', counter_holder).eq(3),
        time_obj = {
            "days":0,
            "hours":0,
            "minutes":0,
            "seconds":0
        };
    
    // the dates
    var target_date = new Date(dateStr),
        now_date = new Date(),
        remaining_time = (Date.parse(target_date) - Date.parse(now_date))/1000;
    
    // init counter
    time_obj.seconds = remaining_time%60;
    time_obj.minutes = Math.floor(remaining_time/60)%60;
    time_obj.hours = Math.floor(remaining_time/60/60)%24;
    time_obj.days = Math.floor(remaining_time/60/60/24);
    
    // tick
    counter = setInterval(function() {
        
    }, 1000);
    
    // update
    
}(jQuery));