How can I convert a vanilla JS stop watch to a Angular one?

Question

new to JS and will delete if not allowed. I have got some regular JS code which I have been working with trying to switch this into a controller.

For the given example what would be the most optimised way. I have seen cases with directives, counters and so on however I am thinking this is very complicated for what I am doing. I have so far manage to bind seconds and tens to screen however I am having issues with the $interval for updating, do I require .watch, .promises .then? (sorry for newb question any help would be great)

JS Script

   window.onload = function() {

     var seconds = 00;
     var tens = 00;
     var appendTens = document.getElementById("tens");
     var appendSeconds = document.getElementById("seconds");
     var buttonStart = document.getElementById('button-start');
     var buttonStop = document.getElementById('button-stop');
     var buttonReset = document.getElementById('button-reset');
     var Interval;


     buttonStart.onclick = function () {

       clearInterval(Interval);
       Interval = setInterval(startTimer, 10);
     };

     buttonStop.onclick = function () {
       clearInterval(Interval);
     };


     buttonReset.onclick = function () {
       clearInterval(Interval);
       tens = "00";
       seconds = "00";
       appendTens.innerHTML = tens;
       appendSeconds.innerHTML = seconds;
       console.log("clear()");
     };


     function startTimer() {
       tens++;

       if (tens < 9) {
         appendTens.innerHTML = "0" + tens;
       }

       if (tens > 9) {
         appendTens.innerHTML = tens;

       }

       if (tens > 99) {
         console.log("seconds");
         seconds++;
         appendSeconds.innerHTML = "0" + seconds;
         tens = 0;
         appendTens.innerHTML = "0" + 0;
       }

       if (seconds > 9) {
         appendSeconds.innerHTML = seconds;
       }

     }

   };

This is how I am binding HTML to the screen

<span id="seconds">{{ seconds+":"+tens }}</span>

If you comment out all your code, it (a) won't run, and (b) won't syntax highlight when shown to others. Remove the `//` in front of every line. — Phrogz, May 06 '17 at 21:05
fixed** CMD / (I assume CTRL for windows) usually the shortcut on some IDE's to fix this — Fabian, May 06 '17 at 23:03

score 1 · Answer 1 · answered May 06 '17 at 20:48

1

I have this set up with a simple $interval loop that updates the seconds and minutes:

angular.module('plunker', []).controller('MainCtrl', function($interval) {
  var interval_;

  this.seconds = 0;
  this.minutes = 0;

  this.start = function() {
    interval_ = $interval(function() {
      this.seconds++;
      if(this.seconds > 59) {
        this.seconds = 0;
        this.minutes++;
      }
    }.bind(this), 1000)
  }

  this.stop = function() {
    $interval.cancel(interval_)
  }
})
.filter('adjustTime', function(){
  return function(input) {
    if(input < 10) {
      return '0' + input;
    }
    return input;
  }
});

I'm a fan of delegation, so I made the filter you see to handle adding the extra 0 if it's less than 10; no need to muck up the $interval logic.

Plnkr

answered May 06 '17 at 20:48

Phix

9,364
4
35
62

2

You do know that the `<>` button will create a snippet HERE instead of at Plnkr? – mplungjan May 06 '17 at 20:54
1

Also `.filter('adjustTime', function(){ return function(input) { return String("0"+input).slice(-2); }` – mplungjan May 06 '17 at 20:56
1

I did not. Thanks @mplungjan – Phix May 06 '17 at 21:00
@mplungjan can you describe what .filter function does? `.filter('adjustTime', function(){ return function(input) { return String("0"+input).slice(-2); }` – Fabian May 06 '17 at 21:34
Pad a number : Take the last 2 chars of a string which contains 3 chars if input is 2 chars - 11 -> 011 -> 11; 3-> 03 -> 03 – mplungjan May 07 '17 at 04:24

How can I convert a vanilla JS stop watch to a Angular one?

1 Answers1