# 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:** 1

<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 16, 2022, 1:10pm UTC](https://community.glideapps.com/t/custom-countdown/38574/1 "2022-02-16T13:10:32Z")

</div>

Taking the idea from this thread.

> [@Can I display countdown timer in a column?](https://community.glideapps.com/t/can-i-display-countdown-timer-in-a-column/38528/1):
>
> Sorry, as it is in Bahasa Indonesia: but you can see that there is the number 3 there. This is my last feature for my app before release! So happy! What I want is to start a 3 day countdown timer for member who want to join with discount price. All steps already done, but I don’t know whether I can display countdown timer in Glideapps. Has glide already support this feature? Thanks!

I created a countdown “component” using a guide from w3schools, then plugged it in Experimental Code column.

**Demo:**

**Link to use:**

```auto
https://thinhdinhlca.github.io/custom-countdown/

```

**Custom fields:**

Time (you can reference a date/time column or write it out like I did in the video)  
Font weight  
Text align  
Font size

Hope it helps your use cases!

---

<div class="post-metadata">

**Author:** ![gvalero](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/gvalero/32/1037_2.png) [@gvalero](https://community.glideapps.com/u/gvalero)\
**Post date:** [February 16, 2022, 1:30pm UTC](https://community.glideapps.com/t/custom-countdown/38574/2 "2022-02-16T13:30:14Z")

</div>

🤯🤯 I have to see this code!!

---

<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 16, 2022, 1:32pm UTC](https://community.glideapps.com/t/custom-countdown/38574/3 "2022-02-16T13:32:38Z")

</div>

Nice! 👏🏽  
problem… web view only in PRO

---

<div class="post-metadata">

**Author:** ![Dilon\_Perera](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/dilon_perera/32/85652_2.png) [@Dilon\_Perera](https://community.glideapps.com/u/Dilon_Perera)\
**Post date:** [February 16, 2022, 2:05pm UTC](https://community.glideapps.com/t/custom-countdown/38574/4 "2022-02-16T14:05:20Z")

</div>

[https://media.giphy.com/media/3ohzdIuqJoo8QdKlnW/giphy.gif(image larger than 4 MB)](https://media.giphy.com/media/3ohzdIuqJoo8QdKlnW/giphy.gif)

Superb Thinh! 🤩 👊

---

<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 16, 2022, 2:10pm UTC](https://community.glideapps.com/t/custom-countdown/38574/5 "2022-02-16T14:10:05Z")

</div>

Awesome, I’ve been waiting a long time.  
I’m using an iframe from [free.timeanddate.com](http://free.timeanddate.com) all along

 ![Screenshot 2022-02-16 211410](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/f/cfb1eeb1dc016134ef133b8ecc8ff61a0e26e76f.png)

---

<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 16, 2022, 2:19pm UTC](https://community.glideapps.com/t/custom-countdown/38574/6 "2022-02-16T14:19:13Z")

</div>

[![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/)

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

---

<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 16, 2022, 2:32pm UTC](https://community.glideapps.com/t/custom-countdown/38574/7 "2022-02-16T14:32:35Z")

</div>

Hi Thinh, can you add a color parameter for the text to make it visible in the dark theme? Also the size of the webview component that fits the text. Thank you.

---

<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 16, 2022, 4:39pm UTC](https://community.glideapps.com/t/custom-countdown/38574/8 "2022-02-16T16:39:56Z")

</div>

Thank you so much for sharing this and spending the time!! Was on my to do list to figure out this week and this is a HUGE help!

---

<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 16, 2022, 9:23pm UTC](https://community.glideapps.com/t/custom-countdown/38574/9 "2022-02-16T21:23:58Z")

</div>

Nice job @ThinhDinh !

---

<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, 12:05am UTC](https://community.glideapps.com/t/custom-countdown/38574/10 "2022-02-17T00:05:35Z")

</div>

This is now supported. White for dark theme, black for light theme.

Width and height of the element will now function as a percentage of the viewport using vw and vh. I default them to 100, so people who don’t want to mess with it can just leave those empty.

---

<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 17, 2022, 12:43am UTC](https://community.glideapps.com/t/custom-countdown/38574/11 "2022-02-17T00:43:47Z")

</div>

@ThinhDinh can you set and read cookies with EC?

---

<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, 2:18am UTC](https://community.glideapps.com/t/custom-countdown/38574/12 "2022-02-17T02:18:53Z")

</div>

Thinh, vh not working.

 ![Screenshot 2022-02-17 091241](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/5/6/560f6bc63f28e60d2f4f919d3ea26e69add7721b.png)

---

<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, 4:36am UTC](https://community.glideapps.com/t/custom-countdown/38574/13 "2022-02-17T04:36:56Z")

</div>

What exactly do you wish to achieve? My setting means the element size will respond to the numbers you input.

---

<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, 4:37am UTC](https://community.glideapps.com/t/custom-countdown/38574/14 "2022-02-17T04:37:27Z")

</div>

Sorry I don’t have an idea if we can do that.

---

<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, 5:24am UTC](https://community.glideapps.com/t/custom-countdown/38574/15 "2022-02-17T05:24:33Z")

</div>

The wide column in the experimental column can react. However, the height column doesn’t respond to the numbers entered into it, still leaving a blank space underneath. Or is this just happening to my app?

 ![Screenshot 2022-02-17 124427](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/0/5/05204f464188322268474bb2c45b90229608bcd1.png)

 ![Screenshot 2022-02-17 124324](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/b/b/bbd6f26da33690bce1e7890dbe72c126f54b8571.png)

---

<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, 5:58am UTC](https://community.glideapps.com/t/custom-countdown/38574/16 "2022-02-17T05:58:25Z")

</div>

This is the smallest height that can be achieved through the settings in the panel, not by the percentage entered in the height column. I have also tried with a ratio of 1:1.

 ![Screenshot 2022-02-17 125531](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/9/1/91940f185b0697a619302f25a4b2e0469625d983.jpeg)

---

<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, 8:52am UTC](https://community.glideapps.com/t/custom-countdown/38574/17 "2022-02-17T08:52:49Z")

</div>

I can’t seem to control the webview component’s actual width or height via XC, the only thing that I can do is control the element inside.

To change the webview’s height, you can use this CSS.

```auto
<pre><span><style>

[data-test="app-web-view"] {
padding-bottom: calc(20%) !important;
}

```

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/b/8/b8f9840a7c1e9c213322f8b0e61294a69dfc0d66.png)

---

<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, 9:01am UTC](https://community.glideapps.com/t/custom-countdown/38574/18 "2022-02-17T09:01:07Z")

</div>

Yes, I can understand, thank you.

---

<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:00pm UTC](https://community.glideapps.com/t/custom-countdown/38574/19 "2022-02-17T15:00:16Z")

</div>

Would it be possible to remove days and hours from the countdown to only show hours and minutes? Also, do you mind sharing the guide you used to create? I would love to play around. Thank you so much!!

---

<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, 3:01pm UTC](https://community.glideapps.com/t/custom-countdown/38574/20 "2022-02-17T15:01:33Z")

</div>

> **[How To Create a Countdown Timer](https://www.w3schools.com/howto/howto_js_countdown.asp)**
>
> W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

Here you go.

It might be a bit of a problem to customize my solution, so I would advise you to fork and change that on your end. Let me know if you have any questions.

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