How to create a payroll management webpage using JavaScript
How to Create a Payroll Management Webpage with JavaScript
Today, there are many companies and small businesses emerging and thriving around the world. With so many people working in these industries or companies, managing employee payment records has become a critical task for employers.
Therefore, a proper payroll management system is necessary in every company, big or small. For large employers, it’s almost impossible to manually maintain payroll records for every employee. Therefore, they need a digital payroll management system. In this article, we’ll discuss how to create a payroll management webpage using HTML, CSS, and JavaScript.
Let’s first take a look at payroll management systems.
Payroll Management System
A payroll management system is software that enables companies to manage their employees’ financial statements in a categorized and automated manner. It’s used to manage employee salaries, bonuses, health facilities, transportation, deductions, and more. These software or websites alleviate the stress of managing large amounts of data, making payroll processing easier.
Steps to Follow
- Create a div container consisting of three input elements that contain information about the employee’s name, daily salary, and number of days worked.
-
Style them to your liking.
-
Create a button that, when clicked, will execute the show_salary function. To achieve this, use the onclick() attribute.
-
Using JavaScript, create variables to store the input data. Create a function **show_salary** to display the employee’s name and base salary.
-
To display the base salary, the daily wage value is multiplied by the number of days worked.
-
Use the .innerHTML method to display the output in the p element.
Methods Used
Here, we use the following two methods
tofixed() Method – This method is used to convert a number into a string with a specified number of decimal places. The number of decimal places is specified within the brackets.
If the number of decimal places in the number is higher, then zeros are added by default. Following is the syntax of the tofixed() method –
variable.tofixed();
parseFloat() Method – The parseFloat() function parses a string argument and returns a floating-point number. Following is the syntax of the toFloat() method:
parseFloat(string);
Example
The following example demonstrates how to create a simple payroll application. You need to provide the required input, and the base salary and employee 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’ve learned how to design a simple payroll management webpage using HTML, CSS, and JavaScript. Payroll management is a tedious task that requires a suitable application or website. This webpage is just a small part of the website. Various features, such as monthly deductions, annual bonuses, and employee financial history, are all present in the website. These features are added using various frameworks such as JSON, PHP, MySQL, Bootstrap, and others.