Live countdown timer

1. Add a title text element from the Add panel and change it to say “Days.” Add another text element underneath it with a 2-digit number. Adjust the text style. 

2. Select both text elements and stack them. From the Inspector panel, set the width of the stack to Max content. 

3. Right-click the stack and place it in a container. 

4. Center the container horizontally and vertically. 

5. Apply a 4X1 grid to the container.

6. Duplicate the text stack 3 times and place each duplicate in a grid cell. 

7. Dock each text stack to the left and top of the grid cell with margins of 0px. 

8. Change the “Days” title in the 3 duplicated stacks so they’re in descending order of time: hours, minutes, seconds. 

9. Turn on Dev Mode. 

10. Open the Layers panel to edit the element IDs. Change the container’s element ID to #countdownContainer. 

11. Change the element ID for each number text element according to the title above it (#days, #hours, etc.) 

12. Paste the following countDownDate variable into the first line of the built-in IDE: 

const countDownDate = new Date("Mar 30, 2023 10:00:00 GMT +02:00").getTime();

13. Update the event date and time after Date. Make sure the time zone is correct (relative to GMT). 

14. Paste the countdown functions and make sure the element IDs are correct.  

$w.onReady(function () {

   startCountDown();

});

// COUNTDOWN - Set the date we're counting down to

function startCountDown() {

   // set the clock for the first time

   getDistanceOfTimer();

   //show the clock

   $w('#countdownContainer').show();

   // Update the count down every 1 second

   setInterval(function () {

       getDistanceOfTimer();

   }, 1000);

}

function getDistanceOfTimer() {

   // Get today's date and time

   const now = new Date().getTime();

   // Find the distance between now and the countdown date

   const distance = countDownDate - now;

   // Time calculations for days, hours, minutes and seconds

   let days = Math.floor(distance / (1000 * 60 * 60 * 24));

   let hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));

   let minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));

   let seconds = Math.floor((distance % (1000 * 60)) / 1000);

   console.log(seconds);

   $w('#days').text = ('0' + days.toString()).slice(-2);

   $w('#hours').text = ('0' + hours.toString()).slice(-2);

   $w('#minutes').text = ('0' + minutes.toString()).slice(-2);

   $w('#seconds').text = ('0' + seconds.toString()).slice(-2);

}

15. Preview the site to see the timer counting down to the date and time you set.