MediaWiki:Citizen.js

/* All JavaScript here will be loaded for users of the Citizen skin */
(function() {
    function formatTime(time) {
        return time < 10 ? `0${time}` : time;
    }
    function updateCountdown(element) {
        const targetDateString = element.getAttribute('data-target-date');
        const targetDate = new Date(targetDateString).getTime();
        if (isNaN(targetDate)) {
            return;
        }
        const now = new Date().getTime();
        const distance = targetDate - now;
        const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
        const seconds = Math.floor((distance % (1000 * 60)) / 1000);
        element.innerHTML = `
            <span class="countdown-value">${formatTime(hours)}</span> <span class="countdown-unit">Hours</span>
            <span class="countdown-value">${formatTime(minutes)}</span> <span class="countdown-unit">Minutes</span>
            <span class="countdown-value">and ${formatTime(seconds)}</span> <span class="countdown-unit">Seconds</span>
        `;
    }
    $(document).ready(function() {
        $('.mw-countdown').each(function() {
            const element = this;
            updateCountdown(element);
            setInterval(function() {
                updateCountdown(element);
            }, 1000);
        });
    });
})();