Countdown timer not working

Mytimer doesn’t count down, nor does it take the duration into account.

I’m stuck!

Here’s what I have -

Start time - now()
Duration - 0.15

I give these two values in the stopwatch elements, but the clock keeps going on even after 15 minutes.

Help please!

That’s how the Stopwatch component works. Once you start it, it keeps going until you stop or pause it.

It is NOT a countdown clock :slight_smile: it is a stopwatch, something which keeps on adding time rather than counting down.

I built this rather nice thing (with the help of @Darren_Murphy) which is an actual countdown. And the nice colors are thanks to CSS wizardry from @Lucas_Pires.

3 Likes

Hi, thanks for your screenshots. They look lovely.

But would it possible for you to help me with how to build the countdown timer? That’s where I’m stuck.

Yes, I understand it’s a stopwatch but I’m looking for a workaround to make it countdown

You have ‘Now’ - the time of now - this is part of Glide to do math
You have your start time - in my case ‘Photo’ - the time the user took the photo
You have your ‘wait time’ — in my case ‘min’ 15 mins as the min time to wait

First column is:

  • countdown end = photo + min (BUT you need to adjust the math as Glide is based on 24 hour days)
    —> this gives you how many minutes in the future your end point is

Second column is:

  • the time left = countdown end - now (adjusted for minutes)

And in the UX

  • set the max value to your max time (in my case ‘min’)
  • set the column (the data being shown) to your countdown
  • and have a 0 value



And I have some bonus CSS too:


[class="circle-progress-container"] >* >* :nth-of-type(1) {
stroke: green; 
}

--- this allows me to adjust the color of the progress bar
- and I have a visibility setting --> if countdown is less than X, show this color, otherwise show another color

I hope this makes sense - good luck!
6 Likes

Yes it does, thanks! I’ll try it out and get back to you