Here is another simple application I have come up with AngularJS and used Twitter Bootstrap for presentation or look and feel etc. The things which I have used here is a couple of functions within directives to show the total spent or earned, and used filters to show only spent or to show only earned and also used filter currency and forEach is also used effectively.
Demo
And actually I have also used if-else like this to display loss, profit, or balanced messages, but I run this through the AngularJS community in Google Plus and I received good feedback with a couple of other alternatives to replace it with just a single line as suggested in the thread and I see AngularJS is very friendly to use.
if($scope.spent > $scope.earned){
$scope.loss = true;
$scope.profit = false;
}else{
$scope.loss = false;
$scope.profit = true;
}
and the above code was chopped to:
$scope.loss = function(){return $scope.totalspent > $scope.totalearned;}
I never thought AngularJS would be very fast and tiny in terms of coding. One can quickly build the application with a proper plan, in this Profit and Loss Calculator – one can find whether their business is in profit or loss for that particular month or year etc. As I do these kind of calculations every month, thought I could build one calculator in AngularJS and here is the result of it.
I request every one to go through the code and suggest if there are any changes we can make in terms of cropping the code etc. As a starter I would like to learn more AngularJS coding techniques.
Here is the code which the app is totally based on, its pretty tiny code and I am sure we can still crop it – suggestions are appreciated. And I think the calculator is pretty self explainatory in terms of look and feel or usage of the app is considered.
While Adding or Removing the item or records, I am doing $scope.totalSE(); – I think I can avoid these lines for sure, if so can I have some better suggestions to crop the code further and make it simple and awesome app? Appreciate all your suggestions.
JavaScript Code:
var wittyApp = angular.module('wittyApp', []);
function ProLosCalc($scope){
$scope.totalspent = 0;
$scope.totalearned = 0;
$scope.amounts = [];
$scope.addAmount = function(){
if($scope.expenses && $scope.purpose && $scope.amountse){
$scope.amounts.push({expenses:$scope.expenses, purpose:$scope.purpose, amountse:$scope.amountse});
$scope.amountse = '';
$scope.purpose = '';
$scope.totalSE();
}
}
$scope.removeItem = function (index) {
$scope.amounts.splice(index, 1);
$scope.totalSE();
};
$scope.loss = function(){return $scope.totalspent > $scope.totalearned;}
$scope.profit = function(){return $scope.totalspent < $scope.totalearned;}
$scope.balanced = function(){return $scope.totalspent === $scope.totalearned;}
$scope.totalFeatureLength = function() {
return $scope.amounts.reduce(function(current, amountse) { return current + amountse.amountse; }, 0);
};
$scope.totalSE = function() {
$scope.totalspent = 0;
$scope.totalearned = 0;
angular.forEach($scope.amounts, function (item) {
if(item.expenses == "Spent"){
$scope.totalspent += item.amountse;
}
if(item.expenses == "Earned"){
$scope.totalearned += item.amountse;
}
})
};
}
HTML Code:
<div class="container" ng-app="wittyApp" id="ng-app" ng-controller="ProLosCalc">
<h1>Profit or Loss Calculator</h1>
<p>This calculator is purely built with pure AngularJS and used Twitter Bootstrap for presenting it well.</p>
<form ng-submit="addAmount()" class="form-inline">
<button class="btn btn-success" style="float:right" ng-click="shrows='Earned'" type="button">Show Earned</button> <button ng-click="shrows='Spent'" class="btn btn-danger" style="float:right;margin-right:5px" type="button">Show Spent</button> <button ng-click="shrows=''" class="btn" style="float:right;margin-right:5px" type="button">Show All</button>
<select name="expenses" ng-model="expenses" style="width:100px" required>
<option value="">Select</option>
<option selected="selected" value="Spent">Spent</option>
<option value="Earned">Earned</option>
</select>
<input type="text" placeholder="Purpose" ng-model="purpose" value="" required>
<input type="number" class="input-small" placeholder="Amount" ng-model="amountse" min="0" required>
<button class="btn" type="submit">Add</button>
</form>
<table class="table table-bordered">
<thead>
<tr>
<th>Expenses</th>
<th>Purpose</th>
<th>Amount</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="amount in amounts | filter:shrows" ng-class='{error : amount.expenses == "Spent", success : amount.expenses == "Earned"}'>
<td>{{amount.expenses}}</td>
<td>{{amount.purpose}}</td>
<td>{{amount.amountse | currency}}</td>
<td>[ <a href ng:click="removeItem($index)">Remove</a> ]</td>
</tr>
</tbody>
</table>
<table class="table table-bordered">
<thead>
<tr>
<th colspan=3>Total ({{amounts.length}} Records Entered)
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Amount<h3>{{totalFeatureLength() | currency}}</h3></td>
<td>Spent<h3 class="text-error">{{totalspent | currency}}</h3></td>
<td>Earned<h3 class="text-success">{{totalearned | currency}}</h3></td>
</tr>
</tbody>
</table>
<div ng-show="loss()" class="alert alert-error">Hoo no you are in LOSS :(</div>
<div ng-show="profit()" class="alert alert-success">Yeh it's party time - you are in PROFIT :)</div>
<div ng-show="balanced()" class="alert alert-info">WoW - Wonderful balanced business you have :)</div>
</div>
Hope you liked this example – if so just drop us your feedback about it and spread the example too in your social communities.
Article by