# Custom countdown

**URL:** <https://community.glideapps.com/t/custom-countdown/38574>\
**Category:** Ask for Help\
**Tags:** custom-code\
**Created:** [February 16, 2022, 1:10pm UTC](https://community.glideapps.com/t/custom-countdown/38574 "2022-02-16T13:10:31Z")\
**Posts on this page:** 20\
**Page:** 2

<div class="post-metadata">

**Author:** ![bru](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/bru/32/37841_2.png) [@bru](https://community.glideapps.com/u/bru)\
**Post date:** [February 17, 2022, 3:07pm UTC](https://community.glideapps.com/t/custom-countdown/38574/21 "2022-02-17T15:07:17Z")

</div>

That’s what I figured, thank you so much!!

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [February 17, 2022, 6:04pm UTC](https://community.glideapps.com/t/custom-countdown/38574/22 "2022-02-17T18:04:12Z")

</div>

This is a first step to be proud of by relying on the limitations of Glide. So far I have used [free.timeanddate.com](http://free.timeanddate.com) but only limited to countdown. Although there are analog or digital clocks with all the customizations, if you click it it will connect to the website.  
Different if it can be developed in Glide will remain our own.

---

<div class="post-metadata">

**Author:** ![Nadir\_Abdelrahman\_MD](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/nadir_abdelrahman_md/32/5237_2.png) [@Nadir\_Abdelrahman\_MD](https://community.glideapps.com/u/Nadir_Abdelrahman_MD)\
**Post date:** [February 17, 2022, 10:25pm UTC](https://community.glideapps.com/t/custom-countdown/38574/23 "2022-02-17T22:25:09Z")

</div>

Great work

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [February 17, 2022, 11:51pm UTC](https://community.glideapps.com/t/custom-countdown/38574/24 "2022-02-17T23:51:11Z")

</div>

Yeah, and we can manipulate it just like what we want 😉

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [February 18, 2022, 12:49am UTC](https://community.glideapps.com/t/custom-countdown/38574/25 "2022-02-18T00:49:14Z")

</div>

Yes @ThinhDinh, still leaving the alignment issue. I can’t find a way to align it to the center when dealing with webview components. And turn off hover.

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [February 18, 2022, 12:59am UTC](https://community.glideapps.com/t/custom-countdown/38574/26 "2022-02-18T00:59:43Z")

</div>

Can you send me a screenshot of the problem?

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [February 18, 2022, 1:06am UTC](https://community.glideapps.com/t/custom-countdown/38574/27 "2022-02-18T01:06:09Z")

</div>

If you look at my image above it’s the top left alignment. If it’s a digital countdown, there is an option for setting the padding. But I plan to add a small analog clock (no padding option) in the center or upper right corner that has not been implemented.

This is the HTML code:

```auto
<iframe src="https://free.timeanddate.com/clock/i87e54u3/n108/szw110/szh110/hoc000/hbw4/cf100/hgr0/hcw2/fav0/fiv0/mqc000/mqs3/mql25/mqw2/mqd96/mhc000/mhs3/mhl20/mhw2/mhd96/mmc000/mms3/mml5/mmw2/mmd96/hhs2/hhw8/hms2/hmw8/hmr4/hsc000/hss3/hsl90" frameborder="0" width="110" height="110"></iframe>

```

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [February 18, 2022, 1:14am UTC](https://community.glideapps.com/t/custom-countdown/38574/28 "2022-02-18T01:14:52Z")

</div>

with all respect to Thin… you know that you can do that with the rich text component, without using a PRO feature web view? just CSS. I posted the demo on top.

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [February 18, 2022, 1:27am UTC](https://community.glideapps.com/t/custom-countdown/38574/29 "2022-02-18T01:27:24Z")

</div>

My app is pro so no problem if using webview. Maybe you can share your CSS here to share with others.

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [February 18, 2022, 3:41am UTC](https://community.glideapps.com/t/custom-countdown/38574/30 "2022-02-18T03:41:39Z")

</div>

> [@Uzo](#):
>
> [![Screen Shot 2022-02-16 at 9.17.51 AM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/9/e/9ea6308edddc25be51cc4700b01ba35e3dab6bf8.jpeg) ](https://delay-action-demo.glideapp.io/)
> 
> [https://delay-action-demo.glideapp.io/](https://delay-action-demo.glideapp.io/)

Small bug though…when I enter 75 seconds, the delay only lasts for 15 seconds.

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [February 18, 2022, 3:43am UTC](https://community.glideapps.com/t/custom-countdown/38574/31 "2022-02-18T03:43:32Z")

</div>

thank you for testing… I set CSS for 1 min… i need to upgrade it 😉 I did not think someone would test it for more than 1 min lol… but I will fix it

---

<div class="post-metadata">

**Author:** ![Robert\_Petitto](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/robert_petitto/32/25193_2.png) [@Robert\_Petitto](https://community.glideapps.com/u/Robert_Petitto)\
**Post date:** [February 18, 2022, 3:47am UTC](https://community.glideapps.com/t/custom-countdown/38574/32 "2022-02-18T03:47:32Z")

</div>

It’s a clever use of CSS to make an animated second hand. In @ThinhDinh’s case, he wants actual numerals counting down to zero. I was able to coerce the stopwatch component to be a countdown timer, but it looks funny because it has negative numbers:  
 ![CleanShot 2022-02-17 at 22.46.48](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/e/ce45a339aca464ce514c70bf0ae06f31da8e4db3.gif)

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [February 18, 2022, 3:50am UTC](https://community.glideapps.com/t/custom-countdown/38574/33 "2022-02-18T03:50:26Z")

</div>

i just test it for 75 sec and it goes well… can you describe more details… what exactly you do?

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [February 18, 2022, 4:00am UTC](https://community.glideapps.com/t/custom-countdown/38574/34 "2022-02-18T04:00:49Z")

</div>

[![](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/5/7/572f5c8be61f35ac7893900af8d2f88572ef0d90.jpeg "Screen Recording 2022 02 17 at 10 54 50 PM") ](https://www.youtube.com/watch?v=LHt_RZztj1w)

> **[Delay Action - DEMO](https://delay-action-demo.glideapp.io/)**
>
> delay actions by blocking screen for a specific time

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [February 18, 2022, 4:12am UTC](https://community.glideapps.com/t/custom-countdown/38574/35 "2022-02-18T04:12:59Z")

</div>

Glide reminds me of Facebook a few months ago… putting cookies everywhere and embedding everything… Facebook stopped doing it… after a few lawsuits now you can run secure apps there… without crushing.

---

<div class="post-metadata">

**Author:** ![Himaladin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/himaladin/32/71023_2.png) [@Himaladin](https://community.glideapps.com/u/Himaladin)\
**Post date:** [February 18, 2022, 5:09am UTC](https://community.glideapps.com/t/custom-countdown/38574/36 "2022-02-18T05:09:04Z")

</div>

> [@Himaladin](#):
>
> to add a small analog clock (no padding option) in the center or upper right corner

Look no further, I’ve found a way with CSS to set the clock position and clock size except for the hover popup.

 ![Screenshot 2022-02-18 111027](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/1/e/1e16379a74275ab5b54d3cc3c527c5a770cd34c9.png)

---

<div class="post-metadata">

**Author:** ![bru](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/bru/32/37841_2.png) [@bru](https://community.glideapps.com/u/bru)\
**Post date:** [June 15, 2022, 7:54pm UTC](https://community.glideapps.com/t/custom-countdown/38574/37 "2022-06-15T19:54:35Z")

</div>

@ThinhDinh Do you know if it’s possible to add a sound that plays when the timer is finished? Forked your original code and made a few updates and have found references for adding sound but can’t seem to get it to work. [Here](https://github.com/bruce5283/timerwithbeep/blob/main/function.js) is a link to the code I’m using. Thank you so much for your help, it has gone a long way and really appreciate it!

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [June 16, 2022, 12:46am UTC](https://community.glideapps.com/t/custom-countdown/38574/38 "2022-06-16T00:46:48Z")

</div>

There is something called “autoplay policy” for Chrome, Safari, and many other browsers to make sure you get a user’s “approval” before playing audio.

Personally, I have no experience in doing something like this, but you may get some idea with the answer below.

> <https://stackoverflow.com/questions/55490155/how-to-autoplay-audio-when-the-countdown-timer-is-finished/55490393#55490393>

---

<div class="post-metadata">

**Author:** ![bru](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/bru/32/37841_2.png) [@bru](https://community.glideapps.com/u/bru)\
**Post date:** [June 16, 2022, 11:44am UTC](https://community.glideapps.com/t/custom-countdown/38574/39 "2022-06-16T11:44:01Z")

</div>

Thank you!

---

<div class="post-metadata">

**Author:** ![Alexander\_Rubino](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/alexander_rubino/32/48638_2.png) [@Alexander\_Rubino](https://community.glideapps.com/u/Alexander_Rubino)\
**Post date:** [November 7, 2022, 11:30am UTC](https://community.glideapps.com/t/custom-countdown/38574/40 "2022-11-07T11:30:30Z")

</div>

I have made a couple of adjustments (removing the days and hour function + setting the date to the selected date instead of now). How can I make a link similar to yours? And how can I make the different info-boxes in glide (Ending time, font size…)?

[Previous page](https://community.glideapps.com/t/custom-countdown/38574.md?page=1)

[Next page](https://community.glideapps.com/t/custom-countdown/38574.md?page=3)
