Cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 

Creating a day countdown

ANSWERED

I'm looking to create a countdown in days to something important like a meeting or birthday.  Is there a simple way to do this? 

I've tried using the command below, but I'm unable to make this work.

.getTime();

 

Best Answer
0 Votes
1 BEST ANSWER

Accepted Solutions

A simple JavaScript example could be easily adapted.

 

https://www.w3schools.com/howto/howto_js_countdown.asp

 

View best answer in original post

Best Answer
0 Votes
8 REPLIES 8

A simple JavaScript example could be easily adapted.

 

https://www.w3schools.com/howto/howto_js_countdown.asp

 

Best Answer
0 Votes

@JonFitbit

I'm trying the same thing but I can't seem to make the javascript work. Is there something simple I'm missing? Thanks for any help. Code I'm trying below:

import document from "document";


// Set the date we're counting down to
var countDownDate = new Date("Jan 5, 2019 15:37:25").getTime();

// Update the count down every 1 second
var x = setInterval(function() {

    // Get todays date and time
    var now = new Date().getTime();
    
    // Find the distance between now and the count down date
    var distance = countDownDate - now;
    
    // Time calculations for days, hours, minutes and seconds
    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);
    
    // Output the result in an element with id="demo"
    document.getElementById("demo").innerHTML = days + "d " + hours + "h "
    + minutes + "m " + seconds + "s ";
    
    // If the count down is over, write some text 
    if (distance < 0) {
        clearInterval(x);
        document.getElementById("demo").innerHTML = "EXPIRED";
    }
  
let demo = document.getElementById("demo"); 
  
}, 1000);
Ionic, retired Blaze.
Best Answer
0 Votes

Do you need:

import clock from "clock";

to get the Date functionality?

Best Answer
0 Votes

@FlyFrosty

Thanks.

Added that doesn't seem to make a difference though. Just returns a blank screen.

Ionic, retired Blaze.
Best Answer
0 Votes

Have you tried using a <text> element to display the countdown? innerHTML is for html documents but watchfaces are svg.

Best Answer
0 Votes

Hello, I have a Fitbit versa 2. How can I make this work? Or is there an app for this that I am not aware of?

Thanks 

Best Answer
0 Votes

Did you ever get the days countdown  timer to work? I'm looking for that type of watch face for fitbit versa 4 and at 70 yo I don't want to learn coding? 😉

Best Answer
0 Votes

Hi @Mtn-Mike, I haven’t developed a watch face since 2020, but I’m considering making a countdown for my next one. I’ll let you know and post here if I get it working. 

the problem is being able to allow the user to set a date in their phone that would update the watch face timer and keep that date in the watch until it’s changed. 

I was able to get a date and countdown going in 2020, but linking it to the app and saving that date to the watch so the code can do the calculations was not working. 

I’ll update this if I figure that out. 

Best Answer