JSFiddle - React, Tailwind, and code Playground

by zishe

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<div ng-app>
    <div ng-controller="TodoCtrl">
        <a href="#" ng-click="pause()" class="btn btn-large">
            <i class="icon-pause"></i>
        </a>
        <a href="#" ng-click="play()" class="btn btn-large btn-primary">
            <i class="icon-play icon-white"></i>
        </a>
        <div id="text"></div>
        <div>{{num}}</div>
    </div>
</div>

JavaScript

function TodoCtrl($scope) {
  $scope.playing = false;
  $scope.num = 0;

  $scope.play = function() {
    $('#text').text($scope.num);
    if (!$scope.playing){
      $scope.playing = true;
      $scope.intervalId = setInterval($scope.change_text, 300);
    };
  };

  $scope.change_text = function() {
    $('#text').text($scope.num);
    $scope.num++;
  };

  $scope.pause = function() {
    if ($scope.playing){
      $scope.playing = false;
      $scope.change_text($scope);
      clearInterval($scope.intervalId);
    };
  };
}