JSFiddle - React, Tailwind, and code Playground

by Avi Algaly

HTML

<div ng-app="myApp">
<div ng-controller="MainCtrl">    
  <!-- Hello {{name}}! -->
  <section ng-controller="AddCtrl">
      <input type="text" ng-model="opA" /> + <input type="text" ng-model="opB" /> = <span>{{ addResult() }}</span>
      | <span>{{ multResult() }}</span>
  </section>
  <section ng-controller="SubCtrl">
      <input type="text" ng-model="opA" /> - <input type="text" ng-model="opB" /> = <span>{{ subResult() }}</span>
      | <span>{{ multResult() }}</span>
  </section>
</div>
</div>

CSS

/* Put your css in here */
 input[type='text'] {
    width: 50px;
}

JavaScript

/* 
    1. cast to boolean
        var booleanA = !!someA
        
    2. cast to number
        var numberA = +someA
        
    3. cast to string
        var stringA = "" + someA
*/
var app = angular.module('myApp', []);

app.controller('MainCtrl', function ($scope) {
    $scope.name = 'World';
});

app.factory("CalcService", function () {
    var Calc = {
        add: function (a, b) {
            return (+a) + (+b);
        },
        sub: function (a, b) {
            return (+a) - (+b);
        },
        mul: function (a, b) {
            return (+a) * (+b);
        }
    };

    // export it
    return Calc;
});

app.controller('AddCtrl', function ($scope, CalcService) {
    $scope.opA = 0;
    $scope.opB = 0;
    $scope.addResult = function () {
        return CalcService.add($scope.opA, $scope.opB); //(+$scope.opA) + (+$scope.opB); 
    };
    $scope.multResult = function () {
        return CalcService.mul($scope.opA, $scope.opB);
    };
});
app.controller('SubCtrl', function ($scope, CalcService) {
    $scope.opA = 0;
    $scope.opB = 0;
    $scope.subResult = function () {
        return CalcService.sub($scope.opA, $scope.opB); //; 
    };
    $scope.multResult = function () {
        return CalcService.mul($scope.opA, $scope.opB);
    };
});