Countdown Timer

javascript

Display a simple countdown to a specific date and time.

How this works

This is a Javascript code that can be used on any site with a Business or Commerce subscription plan.

This code will display a countdown of the days, hours, minutes, and seconds until a specific time. The display is designed to match your paragraph font family; colors and fonts can be manually adjusted with simple CSS.

How to use this code

This code is designed to work on every page of your site. Copy this code using the copy button on the right.

It’s recommended that you add it to your site wide header code injection.

You’ll find this under Website → Website Tools → Code Injection

<div class="timer-background">
    <div class="countdown-wrapper">
        <div class="countdown-item">
            <span id="days">00</span>
            <span>Days</span>
        </div>
        <div class="countdown-item">
            <span id="hours">00</span>
            <span>Hours</span>
        </div>
        <div class="countdown-item">
            <span id="minutes">00</span>
            <span>Minutes</span>
        </div>
        <div class="countdown-item">
            <span id="seconds">00</span>
            <span>Seconds</span>
        </div>
    </div>
</div>

<style>
.timer-background {
    min-height: 300px;  /* Adjust this value to control background height */
    background-color: #f5f5f5;  /* Light gray background - change as needed */
    display: flex;
    align-items: center;
    justify-content: center;
}

.countdown-wrapper {
    display: flex;
    justify-content: center;
    gap: 20px;
    font-family: var(--body-font-font-family);
}

.countdown-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 80px;
}

.countdown-item span:first-child {
    font-size: 2.5rem;
    font-weight: bold;
    color: #333;
}

.countdown-item span:last-child {
    font-size: 0.875rem;
    color: #666;
    text-transform: uppercase;
    margin-top: 5px;
}
</style>

<script>
function updateCountdown() {
    const target = new Date('December 31, 2024 23:59:59 GMT-0500').getTime();
    
    function update() {
        const now = new Date().getTime();
        const diff = target - now;
        
        document.getElementById('days').textContent = Math.floor(diff / (1000 * 60 * 60 * 24));
        document.getElementById('hours').textContent = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        document.getElementById('minutes').textContent = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
        document.getElementById('seconds').textContent = Math.floor((diff % (1000 * 60)) / 1000);
    }
    
    update();
    setInterval(update, 1000);
}

updateCountdown();
</script>

Countdown Timer

javascript

How this works

How to use this code

Dark Mode Toggle

Scroll Indicator