Custom countdown

Taking the idea from this thread.

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

Demo:

Link to use:

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!

13 Likes

:exploding_head::exploding_head: I have to see this code!!

1 Like

Nice! :clap:t4:
problem… web view only in PRO

1 Like

Superb Thinh! :star_struck: :facepunch:

1 Like

Awesome, I’ve been waiting a long time.
I’m using an iframe from free.timeanddate.com all along

4 Likes

Screen Shot 2022-02-16 at 9.17.51 AM

1 Like

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.

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!

1 Like

Nice job @ThinhDinh !

1 Like

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.

6 Likes

@ThinhDinh can you set and read cookies with EC?

Thinh, vh not working.

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

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

1 Like

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?

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.

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.

<pre><span><style>

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

3 Likes

Yes, I can understand, thank you.

1 Like

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!!

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.

3 Likes