jQuery Countdown Timer

Countdown timers are a common feature on many websites, adding some fun to upcoming events or special dates. In this article we will go through creating a simple and stylish countdown timer using HTML, CSS and jQuery. The countdown will display the remaining days, hours, minutes and seconds each in a separate box with a different design.

How to Create a Stylish Countdown Timer Using jQuery and CSS?

Setting Up the Structure

First we need a basic HTML structure that has a section for our countdown timer. We will use a class sf-countdown to define this section. Each unit of time (days, hours, minutes and seconds) will be displayed in its own div with a specific class to target it later using jQuery. Here is the HTML code:

HTML

<div class="sf-countdown">

<h2 class="title">Countdown to the End of 2024</h2>
<div class="countdown-item">
    <div class="number" id="days">0</div>
    <div class="label">Days</div>
</div>
<div class="countdown-item">
    <div class="number" id="hours">0</div>
    <div class="label">Hours</div>
</div>
<div class="countdown-item">
    <div class="number" id="minutes">0</div>
    <div class="label">Minutes</div>
</div>
<div class="countdown-item">
    <div class="number" id="seconds">0</div>
    <div class="label">seconds</div>
</div>

</div>

Styling the Countdown Timer

The CSS above defines the styling for the timer. We use a flexbox to center the content vertically and horizontally on the page so it looks good on all screen sizes. Each unit of time is in a .countdown-item with a grey background, rounded corners and some padding to make it stand out. The numbers are in green so they pop against the grey background and the labels are in black.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #f1f4f7;
    color: #3b495e;
    font-family: Inter;
    font-size: 1rem;
    line-height: 1.5;
    padding: 50px 30px;
}

/* ------------------------------*/
/*   Snippflow Countdown Timer   */
/* ------------------------------*/

.sf-countdown {
    text-align: center;
    background-color: #fff;
    padding: 30px 15px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    max-width: 500px;
    margin: 0 auto;
}
.sf-countdown .title {
    margin: 0 0 15px;
    font-size: 24px;
    margin-bottom: 20px;
}
.sf-countdown .countdown-item {
    display: inline-block;
    margin: 7px;
    padding: 15px;
    background-color: rgba(0,0,0,0.05);
    border-radius: 5px;
    min-width: 90px;
}
.sf-countdown .countdown-item .number {
    font-size: 30px;
    color: #24A47B;
}
.sf-countdown .countdown-item .label {
    font-size: 14px;
    color: #000;
}

Implementing the Countdown Logic with jQuery

The JavaScript part is done with jQuery. The updateCountdown function calculates the difference between the current date and the target date (December 31, 2024, 23:59:59). It updates the respective elements for days, hours, minutes and seconds left until the target date.

This function is called immediately after the document is ready with $(document).ready() and set to update every second with setInterval(updateCountdown, 1000). This creates a live countdown.

function updateCountdown() {
    const now = new Date();
    const endOf2024 = new Date('December 31, 2024 23:59:59');
    const timeDifference = endOf2024 - now;

    if (timeDifference < 0) {
        $('.sf-countdown #days').text("0");
        $('.sf-countdown #hours').text("0");
        $('.sf-countdown #minutes').text("0");
        $('.sf-countdown #seconds').text("0");
        return;
    }

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

    $('.sf-countdown #days').text(days);
    $('.sf-countdown #hours').text(hours);
    $('.sf-countdown #minutes').text(minutes);
    $('.sf-countdown #seconds').text(seconds);
}

$(document).ready(function() {
    updateCountdown();
    setInterval(updateCountdown, 1000);
});

See the Pen jQuery Countdown Timer by Snippflow (@snippflow) on CodePen.