Countdown Timer

<!-- Add this HTML where you want the timer to appear -->
<div class="countdown-container">
    <div class="countdown-box">
        <div id="countdown-days" class="flip-number">00</div>
        <div class="label">Days</div>
    </div>
    <div class="countdown-box">
        <div id="countdown-hours" class="flip-number">00</div>
        <div class="label">Hours</div>
    </div>
    <div class="countdown-box">
        <div id="countdown-minutes" class="flip-number">00</div>
        <div class="label">Minutes</div>
    </div>
    <div class="countdown-box">
        <div id="countdown-seconds" class="flip-number">00</div>
        <div class="label">Seconds</div>
    </div>
</div>

<style>
.countdown-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 20px;
    font-family: Arial, sans-serif;
}

.countdown-box {
    text-align: center;
}

.flip-number {
    background-color: #333;
    color: white;
    padding: 20px;
    border-radius: 8px;
    font-size: 2em;
    min-width: 60px;
}

.label {
    margin-top: 10px;
    font-size: 1.2em;
    color: #333;
}
</style>

<script>
// Wrap in IIFE to avoid global scope pollution
(function() {
    // Function to update the countdown
    function updateCountdown() {
        // Set your target date here
        const targetDate = new Date('2025-12-31T23:59:59').getTime();
        
        function update() {
            const now = new Date().getTime();
            const difference = targetDate - now;
            
            if (difference < 0) {
                // If past target date, show zeros
                ['days', 'hours', 'minutes', 'seconds'].forEach(unit => {
                    const element = document.getElementById('countdown-' + unit);
                    if (element) element.textContent = '00';
                });
                return;
            }
            
            // Calculate time units
            const days = Math.floor(difference / (1000 * 60 * 60 * 24));
            const hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            const minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
            const seconds = Math.floor((difference % (1000 * 60)) / 1000);
            
            // Update DOM elements if they exist
            const units = {
                'days': days,
                'hours': hours,
                'minutes': minutes,
                'seconds': seconds
            };
            
            Object.entries(units).forEach(([unit, value]) => {
                const element = document.getElementById('countdown-' + unit);
                if (element) {
                    element.textContent = value.toString().padStart(2, '0');
                }
            });
        }
        
        // Initial update
        update();
        
        // Update every second
        return setInterval(update, 1000);
    }
    
    // Function to initialize the countdown
    function initializeCountdown() {
        if (document.readyState === 'complete') {
            updateCountdown();
        } else {
            window.addEventListener('load', updateCountdown);
        }
    }
    
    // Start the initialization
    initializeCountdown();
})();
</script>