Angular custom calculator with multiple functions

Question

I need some help with a test calculator.
I managed to make the Add functionality work, but i'm stuck on what i have to do next in order to add an extra functionality like Multiply work when the Calculate button is pressed.

Here is a JSFiddle Link, and i will also add most of the code.
I chose Angular, but a jQuery example would do fine also.

Examples of the calculator lifecycle might be:

JS

angular.module('myApp', [])

.controller('MyController', function ($scope) {

    $scope.items = [];

    $scope.addItem = function(){
        $scope.items.push({
            myOperation: $scope.selectedOperation,
            myNumber: $scope.selectedNumber 
        });

        $scope.selectedOperation = '';
        $scope.selectedNumber = '';
    };

    $scope.AddToTotal = function(){
        var total = 0;
        for(var i=0; i<$scope.items.length; i++){
            total += $scope.items[i].myNumber;
        }
        return total;
    }
});

Html

<body ng-app="myApp">
<div ng-controller="MyController" class="container">
    <div class="row">
        <div class=".col-md-6 .col-md-offset-3">
            <form role="form" class="form-inline">
                <div class="row">
                    <div class="col-lg-6">
                        <div class="form-group">
                            <!--Select-->
                            <select ng-model="selectedOperation" class="form-control input-lg" id="operators">
                                <option value="Add">Add</option>
                                <option value="Multiply">Multiply</option>
                                <option value="Apply">Apply</option>
                            </select>
                            <!--Input-->
                            <input ng-model="selectedNumber" class="form-control input-lg" type="number" placeholder="enter a number" />
                            <!--AddStep-->
                            <button ng-click="addItem()" id="btnAdd" class="btn btn-default btn-lg">Add step</button>
                            <p>{{selectedOperation}} {{selectedNumber}} = {{ AddToTotal()}}</p>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-6">
                        <ol id="instructions" class="jumbotron" style="margin-top: 2em;">
                            <li ng-repeat="item in items">{{item.myOperation}} {{item.myNumber}}</li>
                        </ol>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-6">
                        <button ng-click="getTotal()" id="btnCalculate" class="btn btn-primary btn-lg">
                            Calculate
                        </button>
                        <button id="btnReset" class="btn btn-danger btn-lg">Reset</button>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-6">
                        <h2>Result: 
                            <span id="result" class="result">{{ AddToTotal() }}</span>
                        </h2>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

jtsnr · Accepted Answer · 2016-11-27 13:39:39Z

0

Update your AddToTotal function with this:

   $scope.AddToTotal = function() {
      var total = 0;
      for (var i = 0; i < $scope.items.length; i++) {
        if ($scope.items[i].myOperation === 'Add') {
          total += $scope.items[i].myNumber;
        } else if ($scope.items[i].myOperation === 'Divide') {
          total /= $scope.items[i].myNumber;
        } else if ($scope.items[i].myOperation === 'Subtract') {
          total -= $scope.items[i].myNumber;
        } else if ($scope.items[i].myOperation === 'Multiply') {
          total *= $scope.items[i].myNumber;
        }
      }
      return total;
    }

answered Nov 27, 2016 at 13:39

jtsnr

1,22012 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular custom calculator with multiple functions

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related