Count-down Timer in WeWeb?

[fredo22]

I need to build a count-down timer in my app that will allow my SAAS subscribers to set the start time of a count-down clock, and start / pause the clock, and have a buzzer sound play when the timer is finished. Other users of the app need to see the count-down in real time on their devices. Any suggestions for how this might be accomplished in WeWeb and Xano? The only post I could find about Timers is this one [ How to create a timer in weweb? ] which suggests using array of 25 items for a 25 second timer, and looping with delays as the mechanism for advancing the clock. That sounds like hard-coding the value of the timer, which in my use-case needs to be set by the user.

[Alexis]

The array could be filled with a dynamic number

[sleeusis]

Maybe a little late to this but I was also looking for some sort of counter. The way it worked out for me is I used compareDate on a variable that I have assigned the currentdatetime (via a buttonclick) and the realdatetime comparing in secs the return can be used for the purpose of the elapsed secs. In my case, I use this on a progressbar component and trigger my logic on the onchange event.

Hopes this helps.

[Alexis]

Clever, thank you for sharing!

[imb]

i am attempting to do this in the form of a countdown over 20 minutes but am unable to create a script that can continuously update the progressbar component. On click of a button I store the submitTime and then begin a script that compares that submitTime to realTime until 20 minutes has elapsed by storing the value in another variable as a 1 - 100 value.

Any suggestions as to how the script should look?

[khara]

I made this recently - this is what I used.

Just replace the #countdown with the id of your element.

function startTimer(duration, display) {
    let timer = duration, minutes, seconds;
    const interval = setInterval(() => {
        minutes = parseInt(timer / 60, 10);
        seconds = parseInt(timer % 60, 10);

        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;

        display.textContent = minutes + ":" + seconds;

        if (--timer < 0) {
            clearInterval(interval);
            display.textContent = "00:00";
            // Optionally, trigger some action here when the timer ends
        }
    }, 1000);
}

const timeInSeconds = 3000 # Fill in here 

const display = document.querySelector('#countdown');
startTimer(timeInSeconds, display);
return