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

Answer 1

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

Answer 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;

Answer 3

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.