AngularJS - Fee Experiment
HTML
<div class="panel panel-info" ng-app="CrewDemo" ng-controller="CalcCtrl">
<div class="panel-heading">
<h3 class="panel-title">Fee Service</h3>
</div>
<div class="panel-body">
<div class="form-group">
<label>Client Pays</label>
<input class="form-control" type="text"
ng-model="calculator.clientCharge" ng-change="clientChargeChanged()">
</div>
<div class="form-group">
<label>You Get Paid</label>
<input class="form-control" type="text"
ng-model="calculator.vendorPayout" ng-change="vendorPayoutChanged()">
</div>
<button class="btn btn-info" ng-click="roundClientCharge()">Round Client Charge</button>
</div>
</div>
CSS
html, body {
width: 100%;
height: 100%;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
background: #34495e;
}
.panel {
margin: 20px auto;
width: 300px;
}
JAVASCRIPT
console.clear();
var app = angular.module('CrewDemo', []),
roundTo = 100,
vendorPercent = 0.85;
app.controller('CalcCtrl', function($scope) {
var calc = $scope.calculator = {};
$scope.clientChargeChanged = function() {
calc.vendorPayout = Math.round(parseFloat(calc.clientCharge) * vendorPercent);
};
$scope.vendorPayoutChanged = function() {
calc.clientCharge = Math.round(parseFloat(calc.vendorPayout) / vendorPercent);
};
$scope.roundClientCharge = function() {
calc.clientCharge = Math.round(parseFloat(calc.clientCharge) / roundTo) * roundTo;
$scope.clientChargeChanged();
};
});
