Effortlessly track the remaining time until a specific date. The countdown comes with no CSS classes, allowing you to customize it based on your style and look. To use it, simply create  <div>'s and add the below data-attributes then execute the countdown function.

data-null-countdown="Days"
data-null-countdown="Hours"
data-null-countdown="Minutes"
data-null-countdown="Seconds"

In the example below, we have provided a default style with our predefined classes. To execute the countdown, use the following function: null_countdown(). This function takes one argument, which is the countdown date. You can pass a string representation of the date, a timestamp, or a Date object.

Note: after the countdown date is reached, the countdown will be removed from the DOM.

<div class="null-countdown-container">

    <div class="null-countdown null-display-flex null-align-items-center null-justify-content-center null-flex-wrap-wrap null-gap-20">

                <div class="null-padding-20 null-box-shadow null-border-radius null-display-inline-block">
                    <div class="null-font-weight-bold null-font-size-22 null-margin-bottom-10 null-color-main" data-null-countdown="Days"></div>
                    <div>Days</div>
                </div><!--End null-padding-20-->

                <div class="null-padding-20 null-box-shadow null-border-radius null-display-inline-block">
                    <div class="null-font-weight-bold null-font-size-22 null-margin-bottom-10" data-null-countdown="Hours"></div>
                    <div>Hours</div>
                </div><!--End null-padding-20-->

                <div class="null-padding-20 null-box-shadow null-border-radius null-display-inline-block">
                    <div class="null-font-weight-bold null-font-size-22 null-margin-bottom-10" data-null-countdown="Minutes"></div>
                    <div>Minutes</div>
                </div><!--End null-padding-20-->

                <div class="null-padding-20 null-box-shadow null-border-radius null-display-inline-block">
                    <div class="null-font-weight-bold null-font-size-22 null-margin-bottom-10" data-null-countdown="Seconds"></div>
                    <div>Seconds</div>
                </div><!--End null-padding-20-->

    </div><!--End null-countdown-->

</div><!--End null-countdown-container-->

Example usage with different date representations:

// Using a string representation of the date
let countdownDateStr = 'Dec 25, 2023 23:59:59';
null_countdown(countdownDateStr);

// Using a timestamp
let countdownTimestamp = 1746575999000; // December 25, 2024 23:59:59
null_countdown(countdownTimestamp);

// Using a Date object
let countdownDateObj = new Date('Dec 29, 2023 23:59:59');
null_countdown(countdownDateObj);