HackerU_2020_09_23_AngularJS-Custom_Services_Task2.html

<!doctype html>
<html>

<head>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="utf-8" http-equiv="encoding">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
    <style>
        hr.hr1 {
            height: 5px;
            border: none;
            color: rgb(90, 90, 90);
            background-color: rgb(90, 90, 90);
        }
    </style>

</head>

<body>
    <div ng-app="myServices" style="width:800px; margin:0 auto;">
        <div ng-controller="myCtrl">
            <h3>Task 2 - Tax Deductions</h3>
            <p>enter salary in BRUTO amount: <input type="number" ng-model="salary" ng-keyup="calc()" />
            </p>
            <p> car tax worth (7%) of {{salary}}: {{car_tax}}</p>
            <p> income ar tax worth (20%) of {{salary}}: {{income_tax}}</p>
            <p> social security tax worth (12%) of {{salary}}: {{social_security_tax}}</p>
            </br>
            <p> after all tax deduction, u have left: {{after_tax}}</p>
            <br />
        </div>
        <hr class="h1" /><br />
    </div>
    <script>
        var app = angular.module('myServices', []);
        app.controller('myCtrl', function ($scope, salaryDeduction) {
            //function to listen to event on html when keypress
            $scope.calc = function () {
                var salary = parseFloat($scope.salary);
                $scope.car_tax = salaryDeduction.carTax(salary, 7);
                $scope.income_tax = salaryDeduction.incomeTax(salary, 20);
                $scope.social_security_tax = salaryDeduction.socialSecurityTax(salary, 12);
                $scope.after_tax = salary - $scope.car_tax - $scope.income_tax - $scope.social_security_tax;
            }
        });
        app.service('salaryDeduction', function () {
            this.carTax = function (x, percentage) {
                return parseFloat(x * (percentage / 100)).toFixed(2);
            }
            this.incomeTax = function (x, percentage) {
                return parseFloat(x * (percentage / 100)).toFixed(2);
            }
            this.socialSecurityTax = function (x, percentage) {
                return parseFloat(x * (percentage / 100)).toFixed(2);
            }
        });
    </script>
</body>

</html>