Function For Countdown

Function For Countdown V1

    document.addEventListener("DOMContentLoaded", function() {
    // Fungsi untuk menampilkan countdown
    function displayCountdown(element) {
        var endTime = new Date(element.dataset.datetime).getTime();
        var daysElement = element.querySelector(".countdown-timer .day");
        var hoursElement = element.querySelector(".countdown-timer .hour");
        var minutesElement = element.querySelector(".countdown-timer .minute");
        var secondsElement = element.querySelector(".countdown-timer .second");

        function updateCountdown() {
            var now = new Date().getTime();
            var timeRemaining = endTime - now;

            var days = Math.floor(timeRemaining / (1000 * 60 * 60 * 24));
            var hours = Math.floor((timeRemaining % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            var minutes = Math.floor((timeRemaining % (1000 * 60 * 60)) / (1000 * 60));
            var seconds = Math.floor((timeRemaining % (1000 * 60)) / 1000);

            daysElement.textContent = days.toString().padStart(2, '0');
            hoursElement.textContent = hours.toString().padStart(2, '0');
            minutesElement.textContent = minutes.toString().padStart(2, '0');
            secondsElement.textContent = seconds.toString().padStart(2, '0');

            if (timeRemaining < 0) {
                clearInterval(interval);
                daysElement.textContent = "00";
                hoursElement.textContent = "00";
                minutesElement.textContent = "00";
                secondsElement.textContent = "00";
            }
        }

        var interval = setInterval(updateCountdown, 1000);
        updateCountdown();
    }

    // Memulai countdown untuk setiap elemen dengan kelas 'agenda-wrapper'
    var countdownElements = document.querySelectorAll(".agenda-wrapper");
    countdownElements.forEach(function(element) {
        displayCountdown(element);
    });
});

Function For Countdown V2

document.addEventListener("DOMContentLoaded", function() {
    // Fungsi untuk menampilkan countdown
    function displayCountdown(element) {
        var dateTime = element.dataset.datetime;
        if (!dateTime) {
            // Set ke "00" jika data-datetime tidak ada
            setToZero(element);
            return;
        }

        var endTime = new Date(dateTime).getTime();
        if (isNaN(endTime)) {
            // Set ke "00" jika endTime tidak valid
            setToZero(element);
            return;
        }

        var daysElement = element.querySelector(".countdown-timer .day");
        var hoursElement = element.querySelector(".countdown-timer .hour");
        var minutesElement = element.querySelector(".countdown-timer .minute");
        var secondsElement = element.querySelector(".countdown-timer .second");

        function updateCountdown() {
            var now = new Date().getTime();
            var timeRemaining = endTime - now;

            if (timeRemaining <= 0) {
                clearInterval(interval);
                setToZero(element);
                return;
            }

            var days = Math.floor(timeRemaining / (1000 * 60 * 60 * 24));
            var hours = Math.floor((timeRemaining % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            var minutes = Math.floor((timeRemaining % (1000 * 60 * 60)) / (1000 * 60));
            var seconds = Math.floor((timeRemaining % (1000 * 60)) / 1000);

            daysElement.textContent = days.toString().padStart(2, '0');
            hoursElement.textContent = hours.toString().padStart(2, '0');
            minutesElement.textContent = minutes.toString().padStart(2, '0');
            secondsElement.textContent = seconds.toString().padStart(2, '0');
        }

        var interval = setInterval(updateCountdown, 1000);
        updateCountdown();
    }

    // Fungsi untuk mengatur elemen countdown ke "00"
    function setToZero(element) {
        var daysElement = element.querySelector(".countdown-timer .day");
        var hoursElement = element.querySelector(".countdown-timer .hour");
        var minutesElement = element.querySelector(".countdown-timer .minute");
        var secondsElement = element.querySelector(".countdown-timer .second");

        daysElement.textContent = "00";
        hoursElement.textContent = "00";
        minutesElement.textContent = "00";
        secondsElement.textContent = "00";
    }

    // Memulai countdown untuk setiap elemen dengan kelas 'agenda-wrapper'
    var countdownElements = document.querySelectorAll(".agenda-wrapper");
    countdownElements.forEach(function(element) {
        displayCountdown(element);
    });
});

Check for data-datetime:

Ensure data-datetime exists before using it. If data-datetime is not available, call the setToZero function to set all countdown elements to “00”.
Validity Check for endTime:

Check if endTime is valid using isNaN(endTime).
If endTime is not valid, call the setToZero function to set all countdown elements to “00”.

This function sets the text content of the countdown elements to “00” if the time is not valid or has already passed. With these changes, the countdown elements will display “00” instead of NaN when the time is not set or is invalid.