Create a countdown timer to any date

Create a simple countdown timer that counts down in seconds, minutes, hours and days to any date. Here's a step-by-step guide to doing so. It only requires a bit of JavaScript, CSS and HTML.

Example

Here's an example with everything put together:

OK, that's what we want, so let's make it happen!

Step 1: Set an end date and write some text if the countdown is over

First, you need to copy this code to Look & Feel > Advanced settings > JavaScript:

<script>
 // The data/time we want to countdown to
 var countDownDate = new Date("Jul 25, 2021 16:37:52").getTime();
 // Run myfunc every second
 var myfunc = setInterval(function() {
 var now = new Date().getTime();
 var timeleft = countDownDate - now;
 // Calculating the days, hours, minutes and seconds left
 var days = Math.floor(timeleft / (1000 * 60 * 60 * 24));
 var hours = Math.floor((timeleft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
 var minutes = Math.floor((timeleft % (1000 * 60 * 60)) / (1000 * 60));
 var seconds = Math.floor((timeleft % (1000 * 60)) / 1000);
 // Result is output to the specific element
 document.getElementById("days").innerHTML = "J-"+ days +" "
 document.getElementById("hours").innerHTML = hours + "h "
 document.getElementById("mins").innerHTML = minutes + "m "
 document.getElementById("secs").innerHTML = seconds + "s "
 // Display the message when countdown is over
 if (timeleft < 0) {
 clearInterval(myfunc);
 document.getElementById("days").innerHTML = ""
 document.getElementById("hours").innerHTML = "" 
 document.getElementById("mins").innerHTML = ""
 document.getElementById("secs").innerHTML = ""
 document.getElementById("counter-end").innerHTML = "Time's up!";
 }
 }, 10);
</script>

Step 2: Prepare your countdown for display

Next, you'll also need to add this code in Look & Feel > Advanced settings > CSS:

.counter-row { 
display: flex; 
justify-content: center; 
color: white; 
} 

.counter-column { 
float: left; 
width: 20%; 
padding: 10px; 
} 

.counter-row:after { 
content: ""; 
display: table; 
clear: both; 
} 

@media (max-width: 600px) { 
.counter-column { width: 100%; } 
} 

.counter-row span { display: none; font-weight: bold; }

You said you wanted to change the colours of the cells? Use this code:

.counter-row .counter-column:nth-child(2n+1) { 
background: #12384a !important; 
} 
.counter-row .counter-column:nth-child(2n) { 
background: #fba026 !important; 
} 

Step 3: Set up the time labels

Finally, let's add this code where you want to display your countdown:

<div class="counter-row">

<div class="counter-column" style="background-color:#aaa;"><span>DAYS</span>
<div id="days">&nbsp;</div>
</div>

<div class="counter-column" style="background-color:#bbb;"><span>HOURS</span>
<div id="hours">&nbsp;</div>
</div>

<div class="counter-column" style="background-color:#aaa;"><span>MINUTES</span>
<div id="mins">&nbsp;</div>
</div>

<div class="counter-column" style="background-color:#bbb;"><span>SECONDS</span>
<div id="secs">&nbsp;</div>
</div>

</div>

<div id="counter-end">&nbsp;</div>

There you go!

Need some help?

Have a question or a special request? Please contact us and we will be happy to assist!