# Dynamic Countdown timer

**URL:** <https://forum.wixstudio.com/t/dynamic-countdown-timer/39766>\
**Category:** Ask the community\
**Tags:** question, code\
**Created:** [August 27, 2020, 6:18pm UTC](https://forum.wixstudio.com/t/dynamic-countdown-timer/39766 "2020-08-27T18:18:03Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![laurencestephan69](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/laurencestephan69/32/21942_2.png) [@laurencestephan69](https://forum.wixstudio.com/u/laurencestephan69)\
**Post date:** [August 27, 2020, 6:18pm UTC](https://forum.wixstudio.com/t/dynamic-countdown-timer/39766/1 "2020-08-27T18:18:03Z")

</div>

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

```

});

---

<div class="post-metadata">

**Author:** ![CODE-NINJA](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/code-ninja/32/110588_2.png) [@CODE-NINJA](https://forum.wixstudio.com/u/CODE-NINJA)\
**Post date:** [August 27, 2020, 10:15pm UTC](https://forum.wixstudio.com/t/dynamic-countdown-timer/39766/2 "2020-08-27T22:15:36Z")

</div>

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

```javascript
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.

---

<div class="post-metadata">

**Author:** ![laurencestephan69](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/laurencestephan69/32/21942_2.png) [@laurencestephan69](https://forum.wixstudio.com/u/laurencestephan69)\
**Post date:** [August 28, 2020, 2:36pm UTC](https://forum.wixstudio.com/t/dynamic-countdown-timer/39766/3 "2020-08-28T14:36:38Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![CODE-NINJA](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/code-ninja/32/110588_2.png) [@CODE-NINJA](https://forum.wixstudio.com/u/CODE-NINJA)\
**Post date:** [August 28, 2020, 2:41pm UTC](https://forum.wixstudio.com/t/dynamic-countdown-timer/39766/4 "2020-08-28T14:41:42Z")

</div>

No problem!  
Like it if you really liked it 😉

Good luck!

---

<div class="post-metadata">

**Author:** ![artwork](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/artwork/32/24236_2.png) [@artwork](https://forum.wixstudio.com/u/artwork)\
**Post date:** [October 25, 2020, 1:49pm UTC](https://forum.wixstudio.com/t/dynamic-countdown-timer/39766/5 "2020-10-25T13:49:38Z")

</div>

Can you please tell me how you managed this?

---

<div class="post-metadata">

**Author:** ![yisrael-wix](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/yisrael-wix/32/1107_2.png) [@yisrael-wix](https://forum.wixstudio.com/u/yisrael-wix)\
**Post date:** [October 25, 2020, 4:02pm UTC](https://forum.wixstudio.com/t/dynamic-countdown-timer/39766/6 "2020-10-25T16:02:14Z")

</div>

@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](https://www.wix.com/corvid/forum/community-discussion/forum-policies-and-guidelines) .

---

<div class="post-metadata">

**Author:** ![Bizimuhit](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/bizimuhit/32/66184_2.png) [@Bizimuhit](https://forum.wixstudio.com/u/Bizimuhit)\
**Post date:** [April 22, 2022, 5:18pm UTC](https://forum.wixstudio.com/t/dynamic-countdown-timer/39766/7 "2022-04-22T17:18:27Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![marlowe-shaeffer](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/marlowe-shaeffer/32/669_2.png) [@marlowe-shaeffer](https://forum.wixstudio.com/u/marlowe-shaeffer)\
**Post date:** [April 22, 2022, 5:24pm UTC](https://forum.wixstudio.com/t/dynamic-countdown-timer/39766/8 "2022-04-22T17:24:12Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Bizimuhit](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/bizimuhit/32/66184_2.png) [@Bizimuhit](https://forum.wixstudio.com/u/Bizimuhit)\
**Post date:** [April 22, 2022, 5:28pm UTC](https://forum.wixstudio.com/t/dynamic-countdown-timer/39766/9 "2022-04-22T17:28:06Z")

</div>

@marlowe-shaeffer Thank you ! 😀