Dynamic Countdown timer

Ask the community
,
1

Hi,

With the help of forums and tutorials, I’ve managed to piece together the code at the bottom of this post.

Now I want to connect my countdown timer to the date field in my database. The database name is “Bespoke-Game”. Currently, I have to manually enter the date within the code, rendering it useless as a dynamic element. I’ve been trying to do this for weeks with no luck!

Please can someone show me how to write the correct code, or write the code for me!

Many thanks,
Laurence

// For full API documentation, including code examples, visit http://wix.to/94BuAAs
import wixWindow from ‘wix-window’ ;

$w.onReady( () => {
$w( “#dynamicDataset” ).onReady( () => {
let itemObj = $w( “#dynamicDataset” ).getCurrentItem();
let date = itemObj.countdowndate;
} );
} );

$w.onReady( function () {

$w( '#message' ).text =  '' ; 
$w( '#group2' ).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( “Aug 29,2020 14:00: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( '#group2' ).show();

if (timeLeft > 0 ) {
$w( ‘#message’ ).text = “Time to play!” ;
} else {
clearInterval(countdown);
$w( ‘#group2’ ).hide();
$w( ‘#message’ ).text = “The time has come - Let’s party!!” ;
$w( ‘#cheers’ ).show( “puff” );

        } 
    },  1000 ); 
}

});

2

Try to complete this, this is your new improved code…
You will have to modify it and complete the code.

import wixWindow from 'wix-window';
import wixData from 'wix-data';

$w.onReady(async () => {
 await get_DATA()

    $w("#dynamicDataset").onReady( () => {
 let itemObj = $w("#dynamicDataset").getCurrentItem();
        console.log(itemObj)
 let date = itemObj.countdowndate;
        console.log(date)

        $w('#message').text = '';
        $w('#group2').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("Aug 29,2020 14:00: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('#group2').show();

 if (timeLeft > 0) {$w('#message').text = "Time to play!";}
 else {
                    clearInterval(countdown);
                    $w('#group2').hide();
                    $w('#message').text = "The time has come - Let's party!!";
                    $w('#cheers').show("puff");
                }
            }, 1000);
        }
    });
});



function get_DATA(parameter) {
    wixData.query("Bespoke-Game")
    .contains("Property", "Value") //<---change here
    .find()
    .then( (results) => {
 if(results.items.length > 0) {
 let firstItem = results.items[0]; 
 console.log(results.items)
 
        } 
 else {  }
    })
    .catch( (err) => {
 let errorMsg = err;
    });
}

Take also a look onto the RESULTS, showed in CONSOLE.

3

Ok I’ve found a way to do it! Thank you!

4

No problem!
Like it if you really liked it :wink:

Good luck!

5

Can you please tell me how you managed this?

6

@artwork Please add your own issue into a new post instead of bumping up an old post. Explain what you are trying to do, what works, and what doesn’t. Also, add any code in a code block as stated in the Forum Guidelines .

7

Where is grampsworkbench.com ? It is no longer exist.

8

@velogenius The domain changed. You can now find Yisrael’s helpful examples here: https://www.velobrewmaster.com/

9

@marlowe-shaeffer Thank you ! :grinning: