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

WittySparks

Ignite Your Thoughts

  • Topics
  • Reviews
  • Services
  • Newsletter
WittySparks / Technology / Programming / Simple Profit or Loss Calculator with AngularJS

Simple Profit or Loss Calculator with AngularJS

Updated: August 20, 2022 by Sravan K • 3 min read

AngularJS Framework from Google

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.

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

Topic: Programming

Profile picture for Sravan K Article by

Sravan K

Contributor at WittySparks
WittySparks Staff

Sravan is a Web enthusiast, who keeps on eye on all the latest happenings on web from AI to Web3, etc.

View all posts by Sravan K

Primary Sidebar

Featured Productivity Software

Notion logo
Notion

Notion Workspace can help you stay organized and take your productivity to the next level. Use Skillshare coupon code WITTYSPARKSFREE to watch the Notion Masterclass by Ali Abdaal for FREE.

Take Free Notion Masterclass

The Best Digital Marketing Tool

Semrush logo
Semrush

Semrush helps grow your business on your terms and gets to the top with 55+ marketing tools in 1. Get a flat 40% discount on Guru plan or Try 14-day PRO Trial.

Try Semrush for FREE

Footer

Explore Topics

  • Technology
  • Business
  • Marketing
  • SEO
  • View All Topics

Sponsors

Partnered with FreePik to use the licensed images.

turn to dhgate for smartphone

Affiliate Link Disclosure

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

Follow Us

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

Copyright © 2023 WittySparks - All rights reserved.
Hosted on Rocket.net

  • About Us
  • Contact Us
  • Privacy Policy