JSFiddle - React, Tailwind, and code Playground

by johnwun

HTML

<div ng-app ng-controller = "countController"> 

{{countDown}} 
    
    &nbsp; &nbsp; &nbsp;   
    
    <input 
        type="button" 
        value="{{ when( isPaused(), 'Resume', 'Pause' ) }} "
        ng-click="onToggleCounter()" >
    
</div>

JavaScript

function countController( $scope, $timeout )
{
    // Provide ternary like support for controller...
    $scope.when  = function( booleanExpr, trueValue, falseValue) {       
          return booleanExpr ? trueValue : falseValue;
    };
    
    
    var isPaused  = false,
        pause = function() {
            isPaused = true;
        },
        resume = function() {
            isPaused = false;
            runCounter();
        },
        runCounter = function() {
            if ( isPaused ) return;
                
            $scope.countDown -= 1;            
            if ( $scope.countDown > 0)        
                $timeout(runCounter, 1000); 
        },
        toggleCounter = function() {
            isPaused = !isPaused;
            runCounter();    
        };

    //debugger;
    
    $scope.countDown = 15;
    
    $scope.pause     = pause;
    $scope.resume    = resume;
    $scope.isPaused  = function() { 
        return isPaused; 
    };
    $scope.onToggleCounter = toggleCounter;
    runCounter();
}