Getting Time Left (Countdown) -- Html, Javascript, AngularJS

Question

Basically, I'm trying to build a spaceship launch app that pulls data from say, a spreadsheet, and displays the time left for each spacecraft's launch. BTW, I did look at the (few) questions on Stack right now about getting time left, but they don't seem very comprehensive and I'm confused on how to implement them into my code.

Here's a snippet from my html:

<h2>Rocket Launch: {{launch.name}}</h2>
            <p>Time left: x minutes</p>
            <script>
            var currentdate = new Date(); 
            var datetime = (currentdate.getMonth()+1) + "/" + currentdate.getDate() + "/"
            + currentdate.getFullYear() + " "  
            + currentdate.getHours() + ":"  
            + currentdate.getMinutes() + ":" 
            + currentdate.getSeconds();
            </script>

As you can see, I'm using angularJS's $scope to get the launch's name in line 1. Then I'm trying to display the time left until the launch...but I'm kind of unsure how to do so? In the script part starting in line 3, I found out how to display the Current time/date, but how am I supposed to be able to display the time remaining (launchtime - currenttime) in the HTML? I'm kind of confused and would like a few pointers to guide me.

By the way, I'm just starting out in AngularJS and hoping to put something somewhat simple yet meaningful together. Sorry about pretty much being a newb.

Thanks

Sorry, not sure what you meant by that, do you mind rephrasing that? — Freedom
– Freedom, Commented Jun 29, 2016 at 19:06
I mean can you access the date from launch.date? for example — Efe Omoregie Elijah
– Efe Omoregie Elijah, Commented Jun 29, 2016 at 19:13
Yeah, I can pull {{launch.date}} from my code to get the launch date--I'm just wondering how to do the subtraction currenttime-launchdate/time then display it in place of the Time left: x minutes — Freedom
– Freedom, Commented Jun 29, 2016 at 19:17
You can calculate the difference in JavaScript Date objects: stackoverflow.com/a/7763335/1828744 — JonK
– JonK, Commented Jun 29, 2016 at 19:18

Efe Omoregie Elijah · Accepted Answer · 2016-06-29 19:33:47Z

11

I took a few minutes to write up a countdown algorithm

$scope.CountDown = {
    getTimeRemaining: function(endtime) {
      var t = Date.parse(endtime) - Date.parse(new Date());
      var seconds = Math.floor((t / 1000) % 60);
      var minutes = Math.floor((t / 1000 / 60) % 60);
      var hours = Math.floor((t / (1000 * 60 * 60)) % 24);
      var days = Math.floor(t / (1000 * 60 * 60 * 24));
      return {
        'total': t,
        'days': days,
        'hours': hours,
        'minutes': minutes,
        'seconds': seconds
      };
    },

    initializeClock: function(endtime) {
      function updateClock() {
        var t = $scope.CountDown.getTimeRemaining(endtime);

        $scope.CountDown.days = t.days;
        $scope.CountDown.hours = ('0' + t.hours).slice(-2);
        $scope.CountDown.minutes = ('0' + t.minutes).slice(-2);
        $scope.CountDown.seconds = ('0' + t.seconds).slice(-2);

        if (t.total <= 0) {
          $interval.cancel(timeinterval);
        }
      }

      updateClock();
      var timeinterval = $interval(updateClock, 1000);
    }
}

All you have to do is add the CountDown object to your scope and call $scope.CountDown.initializeClock($scope.launch.date);

I made a plunker here https://plnkr.co/edit/x0BkVPgPLjD8rtbfADtY?p=preview

You can display CountDown.days, CountDown.hours, CountDown.minutes and CountDown.seconds on your html view

edited Jun 29, 2016 at 19:33

answered Jun 29, 2016 at 19:24

Efe Omoregie Elijah

4884 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Efe Omoregie Elijah Over a year ago

I'm happy I could be of assistance. Happy coding :)

Freedom Over a year ago

Thank you so much! :)) Sorry about the delayed response...the code didn't work for a while and I had to play around with it but it finally did. You saved me ahhaahhaha!

Roxx Over a year ago

Where we can pass the date to compare? I am not sure on which scope or variable i need to pass the date from database. At the moment it is auto generating the date. It starts from 24 hours.

Efe Omoregie Elijah Over a year ago

@CalculatingMachine if you are not comparing to current datetime change "new Date()" to your custom compare date on line => var t = Date.parse(endtime) - Date.parse(new Date());

Efe Omoregie Elijah Over a year ago

@CalculatingMachine You could also export it to a parameter so you'll have the structure getTimeRemaining(starttime, endtime) and initializeClock(starttime, endtime)

|

AndrewLeonardi · Accepted Answer · 2016-06-29 19:10:30Z

2

This might help. Below is a pretty simple way to handle a basic countdown. Set the "counter" to any number. Then simply have a span with ID count in your html and it should do the trick. May be able to implement this into your code.

HTML:

 <span id="count"></span>

JS

var counter = 91;

setInterval(function() {
    counter--;
    if (counter >= 0) {
      span = document.getElementById("count");
      span.innerHTML = counter;

edited Jun 29, 2016 at 19:10

answered Jun 29, 2016 at 19:02

AndrewLeonardi

3,51211 gold badges59 silver badges110 bronze badges

2 Comments

Freedom Over a year ago

Thanks, but I'm wondering how I will be able to get the difference between the current time/date and the date/time of the launch?

AndrewLeonardi Over a year ago

Sure thing! I would say set the counter to the launch time/date and the (counter >= 0). to the current time/date.

Community · Accepted Answer · 2017-05-23 10:28:54Z

Check here. It discusses the how to find the difference between 2 dates. You would need to have you launch time in the date format along with the current time.

Now that you have both dates, here is where you need to get clever.

Part 1: The difference between the two dates will give you the difference in milliseconds, so you'll need to convert it back to the format you want (ie 0 day, 1 hour, 1 minute, 10 seconds etc).

Part 2: I'm assuming you'll want to update it every second so that it looks like a countdown. To do this, you will need to do everything I've described in a function and assign the result to a scope variable:

var countdown = function () {
    var launchTime = new Date(//whatever it is);
    var currentTime = new Date(//current Time);
    var difference = (launchTime - currentTime)
    $scope.currentTimeLeft = difference; //this is in milliseconds. If you don't want that you'll have to do some logic
}

Then in your html you'll be able to access the currentTimeLeft by this:

<p>Time left: {{currentTimeLeft}} minutes</p>

However, this will only calculate once and will be "old" literally after one second. So, you can add the setInterval function to call the countdown function every second.

setInterval(function(){ countdown() }, 1000); //1000 == 1 second.

You could also look at using the native AngularJS $interval to call the countdown function every second.

Collectives™ on Stack Overflow

Getting Time Left (Countdown) -- Html, Javascript, AngularJS

3 Answers 3

8 Comments

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

8 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related