JSFiddle - React, Tailwind, and code Playground

by mickeyvip

HTML

<div id="main">
    <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);
    };
});

angular.element(document).ready(function () {
    angular.bootstrap(angular.element(document.getElementById("main")), ["myApp"]);
});