Showing posts with label payroll system in angularjs. Show all posts
Showing posts with label payroll system in angularjs. Show all posts

Sunday, March 6, 2016

Payroll System in AngularJS

A simple Payroll System that I have create using AngularJS as my JavaScript framework the code is very simple and easy to understand.  I just learning how to program in AngularJS and I find it easy and very interesting to explore and learn.

If you have some questions please send me an email at jakerpomperada@gmail.com and jakerpomperada@yahoo.com.

My mobile number here in the Philippines is 09173084360.



Sample Program Output


Program Listing

<html>
<head> 
<title> Payroll Program in AngularJS </title>
</head>
<style>
p,h3 {
   color:blue;
     display: inline-block;
    float: left;
    clear: left;
    width: 380px;
    text-align: right;
   font-family: "arial";
   font-style: bold;
   size: 16;
  };
  
  input {
  display: inline-block;
  float: left;
}

 </style>
<script type="text/javascript" src="angular.js"></script>
<body bgcolor="yellow">
<script>
var app = angular.module('myApp', []);

app.filter('singleDecimal', function ($filter) {
    return function (input) {
        if (isNaN(input)) return input;
        return Math.round(input * 10) / 10;
    };
});

app.filter('setDecimal', function ($filter) {
    return function (input, places) {
        if (isNaN(input)) return input;
         var factor = "1" + Array(+(places > 0 && places + 1)).join("0");
        return Math.round(input * factor) / factor;
    };
});

app.controller('Ctrl', function ($scope) {
    $scope.val = 1.56;
});
</script>
<br><br>
<h3>Payroll System in AngularJS</h3>
<div ng-app="myApp">
<p>Employee's Name :
        <input type="text" ng-model="emp" placeholder="employee's name" size="20"/>
    </p>
    <p>Number of Days Work :
        <input type="text" ng-model="days" placeholder="no. days works" size="15"/>
    </p>
    <p>Rate Per Day :
        <input type="text" ng-model="rate" placeholder="rate per day" size="15"/>
    </p>
<br>
<p> Employee's Name is  {{emp}}. </p><br>
<p> The Number of Days Worked is {{days}}.</p><br>
<p> The Rate Per Day is ${{rate | setDecimal:2 }}. </p><br><br>
    <p>The salary of {{emp}} is  $ {{ days * rate  | setDecimal:1 }}</p>
</div>
</html>