JSFiddle - React, Tailwind, and code Playground

by RajamohanShilpa A

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-grid/2.0.11/ng-grid.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ng-grid/2.0.11/ng-grid.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.2/moment.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<div ng-app="sampleApp">
    <div ng-controller="sampleController">        
        <div class="col-lg-12">
            <div class="col-lg-2">
                 <h4>Category</h4>
            </div>
            <div class="col-lg-4">
                 <h4>Amount</h4>
            </div>
            <div class="col-lg-2 text-right">
                 <h4>Sum</h4>
            </div>
            <div ng-repeat="item in items" class="col-lg-12">
                <div class="col-lg-2">{{item.Category}}</div>
                <div class="col-lg-4">
                  <input type="text" ng-model="item.amount" ng-blur="checkAmount(item)" ng-class="{true:'border-red'}[totalAmount(item) > item.sum]" />
                </div>
                <div class="col-lg-2 text-right">{{item.sum}}</div>
            </div>           
        </div>
        <div ng-repeat="log in errorLogs" class="col-lg-12 text-red">
          <div>Category {{log.Category}} is greater then Sum. Amount {{log.amount}} - Sum {{log.sum}}</div>
        </div>
    </div>
</div>

CSS

.col-lg-2, .col-lg-4, .col-lg-8, .col-lg-12 {
  float: left;
  padding: 2px 0px;
}
.col-lg-12 {
  width: 100%;
}
.col-lg-8 {
  width: 66.66666667%;
}
.col-lg-4 {
  width: 33.33333333%;
}
.col-lg-2 {
  width: 16.66666667%;
}
.text-right {
  float: right;
}

.text-red {
 color:red;  
}
.border-red {
   border-color:red;
}

JavaScript

angular.module("sampleApp", []).controller("sampleController", function ($scope) {
    $scope.items = [
      {Category:'a',amount:0,sum:1000},
      {Category:'a',amount:300,sum:1000},
      {Category:'b',amount:200,sum:2000},
      {Category:'b',amount:500,sum:2000},
      {Category:'b',amount:200,sum:2000}
    ];
  
    $scope.errorLogs = [];
  
    $scope.totalAmount = function(item) {
    	var convertNumber = function (val1) {
      	return isNaN(parseInt(val1))? 0 : parseInt(val1);
      };
      
      var filterVal = _.filter($scope.items, function(value){
          return value.Category == item.Category
			});
     	var amount = _.reduce(filterVal, function(val1, val2) {       
          return convertNumber(val1.amount) + convertNumber(val2.amount);
			});
      return amount;
    };
  
    $scope.checkAmount = function (item) {      
      if($scope.totalAmount(item) > item.sum) {
        $scope.errorLogs.push(item);
      } else {
        var index = $scope.errorLogs.indexOf(item);
        if (index !== -1) {
          $scope.errorLogs.splice(index,1);
        }
      }
    };
});