JSFiddle - React, Tailwind, and code Playground

Angular js Exercício

by Lucas Mahle

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-i18n/1.5.3/angular-locale_pt-br.min.js"></script>
<table ng-controller="GastosController as GastosCtrl">
	<tr>
		<th><strong>ITEM</strong></th>
		<th><strong>MARIDO</strong></th>
		<th><strong>ESPOSA</strong></th>
		<th><strong>TOTAL</strong></th>
	</tr>
	<tr>
		<td>Despesas Pagas</td>
		<td><input type="number" ng-model="despesas_marido" ng-change="calcular()"></td>
		<td><input type="number" ng-model="despesas_esposa" ng-change="calcular()"></td>
		<td>{{despesas_total | currency}}</td>
	</tr>
	<tr>
		<td>% Pago</td>
		<td>{{pago_marido | porcent: '0'}}</td>
		<td>{{pago_esposa | porcent: '0'}}</td>
		<td>{{pago_total | porcent: '0'}}</td>
	</tr>
	<tr>
		<td>Valor Devido</td>
		<td>{{devido_marido | currency}}</td>
		<td>{{devido_esposa | currency}}</td>
		<td>{{devido_total | currency}}</td>
	</tr>
	<tr>
		<td>Saldo</td>
		<td class="balance" ng-class="{'positive' : saldo_marido >= 0, 'negative' : saldo_marido < 0}">{{saldo_marido | currency}}</td>
		<td class="balance" ng-class="{'positive' : saldo_esposa >= 0, 'negative' : saldo_esposa < 0}">{{saldo_esposa | currency}}</td>
		<td><input type="button" value="Calcular" ng-click="calcular()"></td>
	</tr>
</table>

CSS

body {
	font-family: Arial;
	background-color: #FFF;
}
table {
	border-spacing: 0;
	margin: 50px 0 0 50px;
}
table, td, th{
	border: 1px solid #9A9A9A;
}
td, th{
	width: 175px;
}
[type=button]{
	width: 100%;
}
.balance {
	color: #F4F4F4;
}
.positive {
	background-color: #5cb85c;
}
.negative {
	background-color: #c9302c;
}

JavaScript

// APP
angular.module('gastosApp', []);


// Filter
angular.module('gastosApp').filter('porcent', function(){
	return function(val, fixed){
		fixed = fixed || 2;
		if(typeof(val) == "number"){
			return val.toFixed(fixed) + '%';
		} else {
			return 'Invalid Type';
		}
	}
});


// Factory
angular.module('gastosApp').factory('porcentFactory', function(){
	return {
		getPorcent: function(relative, absolute){
			return (relative / absolute) * 100;
		}
	}
});


// Controller
angular.module('gastosApp').controller('GastosController', ['$scope',  'porcentFactory', function($scope, porcentFactory){
	// Initi Values
	$scope.despesas_marido = 1;
	$scope.despesas_esposa = 1;
	$scope.despesas_total  = 0;
	
	$scope.pago_marido = 0;
	$scope.pago_esposa = 0;
	$scope.pago_total  = 0;
	
	$scope.devido_marido = 0;
	$scope.devido_esposa = 0;
	$scope.devido_total  = 0;
	
	$scope.saldo_marido = 0;
	$scope.saldo_esposa = 0;
	
	// Call all calculations
	calcular = function(){
		calculaTotal();
		calculaPorcentagem();
		calculaDevido();
		calculaSaldo();
	}
	
	// Get total expenses
	calculaTotal = function(){
		$scope.despesas_total = $scope.despesas_marido + $scope.despesas_esposa;
	}
	// Get relative value from total expenses
	calculaPorcentagem = function(){
		$scope.pago_marido = porcentFactory.getPorcent($scope.despesas_marido, $scope.despesas_total);
		$scope.pago_esposa = porcentFactory.getPorcent($scope.despesas_esposa, $scope.despesas_total);
		$scope.pago_total = $scope.pago_marido + $scope.pago_esposa;
	}
	// Get individual amount
	calculaDevido = function(){
		$scope.devido_marido = $scope.despesas_total / 2;
		$scope.devido_esposa = $scope.despesas_total / 2;
		$scope.devido_total  = $scope.despesas_total;
	}
	// Get individual balance
	calculaSaldo = function(){
		$scope.saldo_marido = $scope.despesas_marido - $scope.devido_marido;
		$scope.saldo_esposa = $scope.despesas_esposa - $scope.devido_esposa;
	}
	
	// Scope calculation
	$scope.calcular = calcular;
	
	// Call on...