Hi everyone. I’m trying to create a countdown timer on a dynamic page, that links to a date and time within one of my collections. My goal is to have multiple countdown timers, counting down to different events I’m running.
My current code is pasted below. I have a working countdown timer, but it’s not linked to any of my collections. I need to somehow link the date and time section to a date and time in my collection.
// For full API documentation, including code examples, visit Velo API Reference - Wix.com
import wixWindow from ‘wix-window’ ;
$w( '#message' ).text = '' ;
$w( '#group1' ).hide();
if (wixWindow.rendering.env === ‘browser’ || wixWindow.viewMode === ‘Preview’ ) {
// only when in Front End so we get the user’s local time (and not the server time)
// otherwise, the display “flashes” - first the server’s rendering, and then the local rendering
let countDownDate = new Date( “Sep 21,2020 16:55:00” ).getTime(); // Countdown date and time
let countdown = setInterval( function () {
let now = new Date().getTime();
let timeLeft = countDownDate - now;
let days = Math.floor(timeLeft / ( 1000 * 60 * 60 * 24 ));
let hours = Math.floor((timeLeft % ( 1000 * 60 * 60 * 24 )) / ( 1000 * 60 * 60 ));
let minutes = Math.floor((timeLeft % ( 1000 * 60 * 60 )) / ( 1000 * 60 ));
let seconds = Math.floor((timeLeft % ( 1000 * 60 )) / 1000 );
$w( "#days" ).text = "" + days;
$w( "#hours" ).text = "" + hours;
$w( "#minutes" ).text = "" + minutes;
$w( "#seconds" ).text = "" + seconds;
$w( '#group1' ).show();
if (timeLeft > 0 ) {
$w( ‘#message’ ).text = “Time to play!” ;
} else {
clearInterval(countdown);
$w( ‘#group1’ ).hide();
$w( ‘#message’ ).text = “The time has come - Let’s party!!” ;
$w( ‘#cheers’ ).show( “puff” );
}
}, 1000 );
}
});