Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
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.
Payroll 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 ease the hectic work of managing loads of data hence, makes the payroll processing easier.
Implementation Steps
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 using CSS.
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 displaying the basic salary, the value of daily wage and number of days worked is multiplied.
Use .innerHTML method to display the output within the section 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 decimal places is specified within the brackets.
variable.toFixed(decimals);
The parseFloat() method The parseFloat() function is used to parse a string argument and then return a float number.
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>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
padding: 20px;
}
.container {
max-width: 600px;
margin: 0 auto;
background: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
h2 {
text-align: center;
color: #333;
margin-bottom: 30px;
border-bottom: 2px solid #007bff;
padding-bottom: 10px;
}
.input-group {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
color: #555;
}
input[type="text"], input[type="number"] {
width: 100%;
padding: 12px;
border: 2px solid #ddd;
border-radius: 5px;
font-size: 16px;
box-sizing: border-box;
}
input:focus {
border-color: #007bff;
outline: none;
}
button {
background-color: #007bff;
color: white;
padding: 15px 30px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
width: 100%;
margin-top: 20px;
}
button:hover {
background-color: #0056b3;
}
.result {
margin-top: 30px;
padding: 20px;
background-color: #e9f7ff;
border-radius: 5px;
border-left: 4px solid #007bff;
}
.result p {
margin: 10px 0;
font-size: 18px;
color: #333;
}
</style>
</head>
<body>
<div class="container">
<h2>Payroll Management System</h2>
<div class="input-group">
<label for="user_name">Employee's Name:</label>
<input type="text" id="user_name" placeholder="Enter the name of employee">
</div>
<div class="input-group">
<label for="daily_wage">Daily Wage (INR):</label>
<input type="number" id="daily_wage" placeholder="Enter the daily wages">
</div>
<div class="input-group">
<label for="no_days_work">Number of Days Worked:</label>
<input type="number" id="no_days_work" placeholder="Enter number of days worked">
</div>
<button onclick="show_salary()">Calculate Salary</button>
<div class="result" id="result_section" style="display: none;">
<p id="demo1"></p>
<p id="demo2"></p>
</div>
</div>
<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;
// Validate inputs
if (!user || !wage || !working_days) {
alert("Please fill in all fields");
return;
}
var pay = parseFloat(wage) * parseInt(working_days);
var results1 = "<strong>Employee's Name:</strong> " + user;
var results2 = "<strong>Total Salary:</strong> INR " + pay.toFixed(2);
document.getElementById("demo1").innerHTML = results1;
document.getElementById("demo2").innerHTML = results2;
document.getElementById("result_section").style.display = "block";
}
</script>
</body>
</html>
The output of the above code displays an interactive payroll calculator ?
A professional-looking payroll management form appears with: - A centered container with white background and shadow - Three input fields for employee name, daily wage, and days worked - A blue "Calculate Salary" button - When filled and submitted, displays the employee name and calculated total salary - Form includes validation to ensure all fields are completed
Key Features
Input Validation: Ensures all fields are filled before calculation
Professional Styling: Modern CSS with hover effects and responsive design
Accurate Calculation: Uses parseFloat() and toFixed() for precise salary computation
User-Friendly Interface: Clear labels and intuitive layout
Conclusion
In this article, you have learned how to design a simple payroll management webpage using HTML, CSS and JavaScript. This basic implementation demonstrates the core functionality of salary calculation and can be extended with additional features like deductions, bonuses, and employee records management.
2K+ Views
