Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create Pay Roll Management Webpage using JavaScript?
Nowadays, there are many companies and small-scale businesses rising and booming in the world. There are so many people working in these industries or firms. It has become a crucial task for the employer to manage the payment records of his employee.
Thus, arises the need of proper payroll management system in every big or small firm. It is almost impossible for the employer to manually maintain the pay roll record of each and every employee in big firms. So, they need digital pay roll management system. In this article, we will discuss about how to create a pay roll management webpage using HTML, CSS and JavaScript
Let’s first understand about pay roll management system.
Pay Roll Management System
A payroll management system is a software which enables companies to manage the financial statements of their employees in a sorted and automated manner. It is used to manage the employee’s salaries, bonuses, health facilities, conveyance, deductions etc., These software or websites eases the hectic work of managing loads of data hence, makes the payroll processing easier.
Steps to be Followed
Create a div container which consists of three input elements containing information about the employee’s name, daily wage and number of days worked.
Style them according to your preferences.
Create a button which on clicking will perform the function show_salary. For achieving this, use the onclick() property.
Using JavaScript, create variables which will store the input data. Create a function show_salary which displays the employee’s name and the basic salary.
For displayed the basic salary, the value of daily wage and number of days worked is multiplied.
Use .innerHTML method to display the output within the p element.
Methods Used
In this we are using the following two methods –
The tofixed() method − This method is used for conversion of a number to a string with a specified number of decimals. The number of decimals places is specified within the brackets.
If the number of decimals are higher in a number, then zeros are added by default. Following is the syntax of the tofixed() method –
variable.tofixed();
The parseFloat() method − The parseFloat() function is used to parse a string argument and then return a float number. Following is the syntax of the toFloat() method –
parseFloat(string);
Example
The following example demonstrates how to create a simple payroll program. You need to give the required input and the basic salary along with the employee’s name will be displayed.
<!DOCTYPE html>
<html>
<head>
<title>Payroll Management Program</title>
<style>
h2{
text-align: center;
text-decoration: underline;
}
body, p {
font-family: verdana;
font-size: 16px;
font-weight: bold;
}
.container {
width: 600px;
clear: both;
}
.container input {
width: 100%;
clear: both;
}
</style>
<script>
function show_salary() {
var user = document.getElementById("user_name").value;
var wage = document.getElementById("daily_wage").value;
var working_days = document.getElementById("no_days_work").value;
pay= parseFloat(wage) * working_days;
results1 = "Employee's Name: " + user + ".";
results2 ="Basic Salary: INR " + pay.toFixed(2) +".";
document.getElementById("demo1").innerHTML = results1;
document.getElementById("demo2").innerHTML = results2;
}
</script>
</head>
<body>
<div class= "container">
<h2>Payroll Program using JavaScript</h2>
<br> <br> Employee's Name
<input type= "text" id= "user_name" name= "user_name" placeholder= "Enter the name of employee">
<br>
<br> Daily Wage
<input type= "text" id= "daily_wage" name= "daily_wage" placeholder= "Enter the daily wages">
<br>
<br> Number of Days of Work
<input type= "text" id= "no_days_work" name= "no_days_work" placeholder= "Enter number of days worked">
<br>
<br>
<button onclick= "show_salary()"> Show Salary </button>
<br> <br> <br>
<section id= "demo1"> </section>
<section id= "demo2"> </section>
</div>
</body>
</html>
Conclusion
In this article, you have learnt about how to design a simple pay roll management webpage using HTML, CSS and JavaScript. Payroll management is a cumbersome task which requires a proper application or website. This webpage is just a small part of the website. There are various features like monthly deductions, yearly bonus, financial history of the employee etc., which is present in the website. These features are added using various frameworks like JSON, php, mySQL, Bootstrap etc.,
1K+ Views
