ba-block-cli/src/blocks/countdown/countdown.js

Auto-create blocks for WordPress ACF

// DOM content loaded event listener
document.addEventListener('DOMContentLoaded', function() {
    
    // Get the date container
    var cds = document.querySelectorAll('.countdown-section .countdown');
    if (cds && cds.length) {
        cds.forEach(function(cd) {
            var date = cd.getAttribute('data-date');
            console.log(date);

            // Set the date we're counting down to
            var cdDate = new Date(date).getTime();

            // Update the count down every 1 second
            var x = setInterval(function() {

                // Get today's date and time
                var now = new Date().getTime(),

                // Find the distance between now and the count down date
                distance = cdDate - now;

                // If the count down is finished, write some text
                if (distance < 0) {
                    clearInterval(x);
                } else {
                    // Time calculations for days, hours, minutes and seconds
                    var days = Math.floor(distance / (1000 * 60 * 60 * 24)),
                    hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)),
                    minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)),
                    seconds = Math.floor((distance % (1000 * 60)) / 1000);

                    // Display the result
                    cd.querySelector('.days .value').textContent = ('0' + days).slice(-2);
                    cd.querySelector('.hours .value').textContent = ('0' + hours).slice(-2);
                    cd.querySelector('.minutes .value').textContent = ('0' + minutes).slice(-2);
                    cd.querySelector('.seconds .value').textContent = ('0' + seconds).slice(-2);
                }
            }, 1000);
        });
    }
});