Hi there👋 Adding a Stopwatch to your WIX website was discussed in our previous tutorial. In this tutorial, however, we will learn how to add a Countdown timer. So let's say you want to display a specific time for your WIX users, maybe a countdown to the end of a promo or reservation, then this is the tutorial for you.

Initiating Countdown with onChange function

The image above displays the set of code that lets us initiate the functions that tells our main countdown function to remember the date and time values selected for our countdown target, which is displayed below ;

//MAIN TIMER FUNCTION ⚡
function updateTimer() {

    let countDownDay = Date.parse(`${dateSelected()} ${timeSelected()}`);
    let now = Number(new Date());
    let date = countDownDay - now;

    let days = Math.floor(date / (1000 * 60 * 60 * 24));
    let hours = Math.floor(date / (1000 * 60 * 60));
    let mins = Math.floor(date / (1000 * 60));
    let secs = Math.floor(date / 1000);

    let dayDisplay = checkTimerZeros((days).toLocaleString());
    let hourDisplay = checkTimerZeros((hours - days * 24).toLocaleString());
    let minuteDisplay = checkTimerZeros((mins - hours * 60).toLocaleString());
    let secondsDisplay = checkTimerZeros((secs - mins * 60).toLocaleString());

    //ADD FOR VALID TIME
    if (date > 0) {
        $w("#day").text = dayDisplay;
        $w("#hour").text = hourDisplay;
        $w("#minute").text = minuteDisplay;
        $w("#second").text = secondsDisplay;

        $w("#discountText").hide();
        $w("#box5, #box6, #box7, #box8").style.backgroundColor = "rgba(10, 10, 10, 0.80)";
        // $w("#countDownTimer").show()

        //SET COUNTDOWN TO DEFAULT IF THE TIME IS REACHED😍// ADD FOR INVALID TIME
    } else if (date < 0) {
        $w("#day").text = "00";
        $w("#hour").text = "00";
        $w("#minute").text = "00";
        $w("#second").text = "00";

        $w("#discountText").show();
        $w("#box5, #box6, #box7, #box8").style.backgroundColor = "rgba(245, 49, 49)";
        // $w("#countDownTimer").hide()
    }

}

The code below shows us the functions to get our date and time when selected from our date picker and time picker

🚀Please, scroll down to copy the code🚀