Countdown Page

I Need Help
1

I want to create a Countdown Page. Can you suggest how to implement this? Thank you in advance :slight_smile:

1 Like
2

I was thinking about the same. Searching at the brics but couldn’t find it.
Something like that would be nice

launch
launch.jpg1440×900 117 KB

3

There is no bric as such and I agree it would be useful. You may find something here that can work for you.

https://codepen.io/search/pens?q=countdown&page=1&order=popularity&depth=everything&show_forks=on

2 Likes
4

Thanks for the link.
I’ll have a look, but the last time I searched for it it was always at least a HTML + Javascript. I didn’t find a pure HTML one, which would naturally be the easiest to integrate for poor buddies like me we can’t code :slight_smile:

5

@mackyangeles , @Eldar has one in his Event Template. Maybe he could share where he found it and how he implemented it.

casey

6

Which template are you talking about?
I can’t find one with a countdown: The best premium templates for Blocs 5 website builder

7

29%20AM
Screen Shot 2019-01-11 at 5.53.29 AM.png884×746 145 KB

07%20AM
Screen Shot 2019-01-11 at 5.54.07 AM.png1328×514 34.3 KB

casey

1 Like
8

LOL. I missed it! Thanks.
Yes, it would be great. Usually Eldar is pretty cool to share info. Let’s wait for his reply :slight_smile:

9

Hi guys,

@casey1823, thanks for mentioning me!
@Muppet and yes, I am always happy to help!

So, below is the video explaining how I have done it, and under the video is the code I used. I actually think I found it on the same site as you have mentioned above.

Video Explanation:

Code for script:

 <script>
// Set the date we're counting down to
var countDownDate = new Date("Jan 28, 2019 00:00:00").getTime();

// Update the count down every 1 second
var x = setInterval(function() {

    // Get todays date and time
    var now = new Date().getTime();
    
    // Find the distance between now and the count down date
    var distance = countDownDate - now;
    
    // Time calculations for days, hours, minutes and seconds
    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);
    
    // Output the result in an element with id="demo"
    document.getElementById("demo").innerHTML = days + " days  " + hours + " hours  "
    + minutes + " minutes  " + seconds + " seconds ";
    
    // If the count down is over, write some text 
    if (distance < 0) {
        clearInterval(x);
        document.getElementById("demo").innerHTML = "EXPIRED";
    }
}, 1000);
</script>

The code for the timer itself:

<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
h2 {
  text-align: center;
  margin-top:0px;
}
</style>



<h2 id="demo" class="tc-2 tc-1566"><p></p></h2>
3 Likes
10

I’m curious why the code goes in the analytics section and whether this will change with the update due in 3.1 for the code editor?

1 Like
11

This way it is added to all pages at once. It’s not necessarily to add it there though. I think page settings will also work.

And yeah, I hope in Blocs 3 it will be easier to add code to the global header and footer.

12

I think Norm said yesterday that the code editor is receiving an upgrade with 3.1 and the first beta is due next week. I have always found the options for adding code in Blocs rather confusing, so I am hoping it will become clearer. https://twitter.com/blocsapp/status/1083358236202422273

1 Like
13

Hi @Eldar
great tutorial. thanks for this … I have tried to put this in my site. Is it the same way in Blocs 3? I don’t get it to work … after watching in browser I don´t see the html widget ? must it be online ?

UPDATE!
It works … But >I don´t see it because my background is white :smile:
Is there a way to change the color font ? And the name of the words, for example “days” in German (Tage)

thanks a lot
tom :blush:

14

Hello @tom2
To change the elements language, just change the items, inside the " ", not the others:
Ex. For Days: innerHTML = days + " Tage "

About the fonts, colors, etc… just change this code:

To This:

<meta name="viewport" content="width=device-width, initial-scale=1">
<h2 id="demo" class="tc-2 tc-1566"><p></p></h2>

Then just add a class to that html bric and change everything that you need…

15

Hi @Pealco
thanks for your help! :slight_smile:
tom

16

Hi @Eldar

is It easy to make a brick which can calculate the duration.

for example a review was left on 13-02-2020 so website will show Published: 6 months ago etc.

is it possible to calculate past date similar to your countdown timer but calculating for past date

I find these 2 urls:

but have no idea how to embed it into blocs-app which can be used as brick

will also be really helpful for blog posts.

a video with how to build a custom brick with this will be great

thanks