• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer
WittySparks Logo White

WittySparks

Ignite Your Thoughts

  • Topics
  • Reviews
  • Newsletter
WittySparks / Technology / Programming / Simple Profit or Loss Calculator with AngularJS
AngularJS Framework from Google

Simple Profit or Loss Calculator with AngularJS

Programming Updated: August 20, 2022 by Sravan K

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.

Previous Post: « The Organic Clothing Debate – Worth Considering?
Next Post: Price Comparison Mobile App is launched for Android by PriceDekho »
Profile picture for Sravan K

About Sravan K

Contributor at WittySparks
WittySparks Staff

Sravan is a highly experienced web designer, user experience designer and developer. You can connect with him on Twitter or LinkedIn and initiate a chat.

View all posts by Sravan K

Primary Sidebar

Featured Productivity Software

Notion logo
Notion

Whether you’re a solo entrepreneur or a large team, Notion Workspace can help you stay organized and get more done. Get started today and take your productivity to the next level.

Try Notion for FREE

Related Topics

  • PHP: Is it the best Programming Language ever?
  • How To Build A Great Search Box On Your Website
  • How to make Python3 version default in Windows OS?
  • Latest Java Technologies & Trends for 2020
  • Facts about React Native you are still unaware of!
  • Top JavaScript trends for 2020

Exclusive Coupons

  • Moqups coupon code: WITTYSPARKS for 20% or PARTNERS50 for 50% discount.
  • WPForms coupon code: WITTYSPARKS for 50% off.
  • Serpstat coupon code: wittysparks_discount for 30% off.
  • SEO Buddy coupon code: WITTYSPARKS for 25% off.
  • Morningscore coupon code: wittysparks for 30% off for 3 months.
  • FlexClip coupon code: WITTYSPARKS for 30% off.
  • Uplead coupon code: “witty” for 30-day free trial.
  • FastestVPN coupon codes: WITTYSPARKS15 or WITTYSPARKS10 or Get up to 93% OFF.
  • Outranking.io coupon code: WITTYSPARKS50 for 50% off.

For more such offers visit our exclusive offers for SEO, Bloggers, Marketers and for Business owners.

Footer

Affiliate Disclosure

If you make a purchase from WittySparks links, we will receive a small commission. See our Affiliate Disclosure.

Sponsors

Partnered with FreePik to use the licensed images.

turn to dhgate for smartphone

Follow Us

  • Facebook
  • Twitter
  • Pinterest
  • LinkedIn
  • Instagram
  • YouTube
  • RSS

Copyright © 2023 · Hosting sponsored by Rocket.net (Affiliate link)

  • About Us
  • Contact Us
  • Privacy Policy
  • LinkedIn
  • Twitter
  • Like
  • Pinterest