Countdown Page


#1

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


#2

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


#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


#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: https://blocstemplates.com/index.html


#7

casey


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

#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?


#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