How to create a payroll management web page using JavaScript?-CSS Tutorial-php.cn

How to create a payroll management web page using JavaScript?

PHPz

Release： 2023-09-08 17:41:02

forward

1338 people have browsed it

如何使用 JavaScript 创建薪资管理网页？

Today, there are many companies and small businesses popping up in the world. There are many people working in these industries or companies. Managing employee payment records has become an important task for employers.

Therefore, every large or small company needs a proper payroll management system. It is almost impossible for employers to manually maintain payroll records for each employee in large companies. Therefore, they need a digital payroll management system. In this article, we will discuss how to create a payroll management web page using HTML, CSS, and JavaScript.

First let us understand the payroll management system.

Salary management system

A payroll management system is a software that enables companies to manage their employees' financial statements in an orderly and automated manner. It is used to manage employee wages, bonuses, health benefits, transportation allowances, deductions, etc. These software or websites simplify the tedious task of managing large amounts of data, thereby making payroll processing easier.

Steps to follow

Create a div container containing three input elements that contain information about the employee's name, daily salary, and number of days worked.
Design them to your liking.
Create a button that when clicked will execute the show_salary function. To achieve this, use the onclick() attribute.
Use JavaScript to create variables for storing input data. Create a function show_salary to display the employee's name and base salary.
The basic salary displayed is the product of the daily salary and the number of working days.
Use the .innerHTML method to display output inside a p element.

usage instructions

Here we use the following two methods -

tofixed() method - This method is used to convert a number to a string with the specified number of decimal places. The number of decimal places is specified within parentheses.

If there are more decimal places in the number, zeros are added by default. Following is the syntax of tofixed() method -

variable.tofixed();

Copy after login

parseFloat() method - The parseFloat() function is used to parse a string argument and return a floating point number. Following is the syntax of toFloat() method –

parseFloat(string);

Copy after login

The Chinese translation of

Example

is:

Example

The following example demonstrates how to create a simple payroll program. You need to provide the required inputs and the basic salary along with the 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>

Copy after login

in conclusion

In this article, you learned how to design a simple payroll management web page using HTML, CSS, and JavaScript. Payroll management is a tedious task that requires a proper app or website. This page is only a small part of the website. There are various features on the website such as monthly deductions, annual bonuses, employee’s financial history, etc. These features are added using various frameworks such as JSON, php, mySQL, Bootstrap, etc.

The above is the detailed content of How to create a payroll management web page using JavaScript?. For more information, please follow other related articles on the PHP Chinese website!