top of page

Live countdown timer

Wix Agency

W

Feb 5, 2023

Live countdown timer

A customized countdown timer fit for a mission to space.

Learn how to create this design in 15 steps

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


image of step 2

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


4. Center the container horizontally and vertically. 


image of step 4

5. Apply a 4X1 grid to the container.


image of step 5

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


image of step 6

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


image of step 7

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


image of step 8

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.) 


image of step 11

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();


image of step 12

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. 


Refresh your skills before you start by visiting Academy X.

More inspiration

{creatorName}

Tutorial

Editor X

The rest is up to you.

Close Site Navigation
bottom of page