CODEWITHSUNDEEP
javascriptangularjs
neo.abi1000
neo.abi1000

Reputation: 59

Simple calculator using two textboxes to be used for square in AngularJS?

Here is my code:

    <html>

<head>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>

<body>
  <div ng-app="app">
    <div ng-controller="CalculatorController">
      Enter a number:
      <input type="number" ng-model="number" />
      <br /> Enter a number:
      <input type="number" ng-model="number2" />
      <br />
      <div>
        <button ng-click="doSquare()">X<sup>2</sup></button>
        <button ng-click="doCube()">X<sup>3</sup></button>
      </div>
      <br />
      <div>
        <button ng-click="doAdd()">Add</button>
        <button ng-click="doSubstract()">Substract</button>
        <button ng-click="doMultiply()">Multiply</button>
        <button ng-click="doDivide()">Divide</button>
        <button ng-click="doModulus()">Modulus</button>
      </div>
      <div>Answer: {{answer}}</div>
      <div>
        <button type="button" ng-click="clear('filter')">Clear</button>
      </div>
    </div>
  </div>
  <script>
    var app = angular.module('app', []);

    app.service('MathService', function() {
      this.add = function(a, b) {
        return a + b
      };

      this.substract = function(a, b) {
        return a - b
      };

      this.multiply = function(a, b) {
        return a * b
      };

      this.divide = function(a, b) {
        return a / b
      };

      this.modulus = function(a, b) {
        return a % b
      };
    });

    app.service('CalculatorService', function(MathService) {

      this.square = function(a) {
        return MathService.multiply(a, a);
      };
      this.cube = function(a) {
        return MathService.multiply(a, MathService.multiply(a, a));
      };
      this.add = function(a, b) {
        return MathService.add(a, b);
      };
      this.substract = function(a, b) {
        return MathService.substract(a, b);
      };
      this.multiply = function(a, b) {
        return MathService.multiply(a, b);
      };
      this.divide = function(a, b) {
        return MathService.divide(a, b);
      };
      this.modulus = function(a, b) {
        return MathService.modulus(a, b);
      };
    });

    app.controller('CalculatorController', function($scope, CalculatorService) {

      $scope.doSquare = function() {
        $scope.answer = CalculatorService.square($scope.number);
        $scope.answer = CalculatorService.square($scope.number2);
      }

      $scope.doCube = function() {
        $scope.answer = CalculatorService.cube($scope.number);
        $scope.answer = CalculatorService.cube($scope.number2);
      }
      $scope.doAdd = function() {
        $scope.answer = CalculatorService.add($scope.number, $scope.number2);
      }
      $scope.doSubstract = function() {
        $scope.answer = CalculatorService.substract($scope.number, $scope.number2);
      }
      $scope.doMultiply = function() {
        $scope.answer = CalculatorService.multiply($scope.number, $scope.number2);
      }
      $scope.doDivide = function() {
        $scope.answer = CalculatorService.divide($scope.number, $scope.number2);
      }
      $scope.doModulus = function() {
        $scope.answer = CalculatorService.modulus($scope.number, $scope.number2);
      }
      $scope.clear = function(answer) {
       $scope.answer = null; 
      }
    });
  </script>
</body>

</html>

When I give input to first textbox and by clicking X^2 i should get the answer and when I will give the input to 2nd textbox and then also by clicking the X^2 I should get the answer. How to do that? Can anyone help me out? Here is the plunker link: http://plnkr.co/edit/8Y47MDICWdeBTiJzaUnP?p=preview

Upvotes: 0

Views: 310

Answers (1)

tanmay
tanmay

Reputation: 7911

When I give input to first textbox and by clicking X^2 i should get the answer and when I will give the input to 2nd textbox and then also by clicking the X^2 I should get the answer. How to do that?

You can utilize || (or) operator. 

$scope.doSquare = function() {
    $scope.answer = CalculatorService.square($scope.number) || 
                    CalculatorService.square($scope.number2);
}

It might not be the best way and I might not be fully convinced with how it should behave, but this would solve your problem.

Note that, with this code, if first textbox has value present, it won't go for second.

Upvotes: 1

Related Questions