What's new

Help Bot - Code

A

Astrazelle

Forum Veteran
Joined
Dec 6, 2020
Posts
1,098
Solutions
535
Reaction
1,285
Points
904
Age
24
Create a page to compute the payroll of an employee. Use the following specifications as guide:

  1. Employee Position and Monthly Basic Salary
  • Associate Professor = P 30,000.00
  • Assistant Professor = P 25,000.00
  • Instructor 7 = P 18,000.00
  • Instructor 6 = P 16,000.00
  • Instructor 5 = P 14,000.00
  • Instructor 4 = P 12,000.00
  • Instructor 3 = P 10,000.00
  • Instructor 2 = P 8,000.00
  • Instructor 1 = P 6,000.00
  1. Monthly Basic Salary is based on the Position held by the employee.
  2. Daily Rate is Monthly Basic / 26.
  3. Hourly Rate is Daily Rate / 8.
  4. Gross Pay is Daily Rate * Number of Days Present.
  5. Statutory Deductions
  • Tax is 10% of the Gross Pay
  • SSS is 5% of the Gross Pay
  • HDMF is P200.00
  • PhilHealth is P 100.00
  1. Net Pay is Gross Pay less Total Deductions.
  2. Create buttons to calculate the Gross Pay, Total Deductions, and Net Pay.
  3. Create functions in scripts for the buttons.
 
Here's an example of a webpage that computes the payroll of an employee based on the given specifications:

HTML: 
<!DOCTYPE html>
<html>
<head>
    <title>Employee Payroll Calculator</title>
    <script>
        function calculateGrossPay() {
            var position = document.getElementById("position").value;
            var daysPresent = parseInt(document.getElementById("daysPresent").value);
            var monthlyBasicSalary = getMonthlyBasicSalary(position);
            var dailyRate = monthlyBasicSalary / 26;
            var grossPay = dailyRate * daysPresent;
            
            document.getElementById("grossPay").value = grossPay.toFixed(2);
        }
        
        function calculateTotalDeductions() {
            var grossPay = parseFloat(document.getElementById("grossPay").value);
            var tax = 0.1 * grossPay;
            var sss = 0.05 * grossPay;
            var hdmf = 200;
            var philHealth = 100;
            var totalDeductions = tax + sss + hdmf + philHealth;
            
            document.getElementById("totalDeductions").value = totalDeductions.toFixed(2);
        }
        
        function calculateNetPay() {
            var grossPay = parseFloat(document.getElementById("grossPay").value);
            var totalDeductions = parseFloat(document.getElementById("totalDeductions").value);
            var netPay = grossPay - totalDeductions;
            
            document.getElementById("netPay").value = netPay.toFixed(2);
        }
        
        function getMonthlyBasicSalary(position) {
            switch (position) {
                case "Associate Professor":
                    return 30000;
                case "Assistant Professor":
                    return 25000;
                case "Instructor 7":
                    return 18000;
                case "Instructor 6":
                    return 16000;
                case "Instructor 5":
                    return 14000;
                case "Instructor 4":
                    return 12000;
                case "Instructor 3":
                    return 10000;
                case "Instructor 2":
                    return 8000;
                case "Instructor 1":
                    return 6000;
                default:
                    return 0;
            }
        }
    </script>
</head>
<body>
    <h1>Employee Payroll Calculator</h1>
    
    <label for="position">Position:</label>
    <select id="position">
        <option value="Associate Professor">Associate Professor</option>
        <option value="Assistant Professor">Assistant Professor</option>
        <option value="Instructor 7">Instructor 7</option>
        <option value="Instructor 6">Instructor 6</option>
        <option value="Instructor 5">Instructor 5</option>
        <option value="Instructor 4">Instructor 4</option>
        <option value="Instructor 3">Instructor 3</option>
        <option value="Instructor 2">Instructor 2</option>
        <option value="Instructor 1">Instructor 1</option>
    </select><br><br>
    
    <label for="daysPresent">Number of Days Present:</label>
    <input type="number" id="daysPresent"><br><br>
    
    <button onclick="calculateGrossPay()">Calculate Gross Pay</button><br><br>
    
    <label for="grossPay">Gross Pay:</label>
    <input type="text" id="grossPay" readonly><br><br>
    
    <button onclick="calculateTotalDeductions()">Calculate Total Deductions</button><br><br>
    
    <label for="totalDeductions">Total Deductions:</label>
    <input type="text" id="totalDeductions" readonly><br><br>
    
    <button onclick="calculateNetPay()">Calculate Net Pay</button><br><br>
    
    <label for="netPay">Net Pay:</label>
    <input type="text" id="netPay" readonly><br><br>
</body>
</html>

In this webpage, the employee selects their position from a dropdown menu and enters the number of days they were present. Upon clicking the respective buttons, the gross pay, total deductions, and net pay are calculated and displayed in the appropriate input fields.

The calculateGrossPay() function calculates the gross pay by obtaining the monthly basic salary based on the selected position and multiplying it by the number of days present. The result is then displayed in the "Gross Pay" input field.

The calculateTotalDeductions() function calculates the total deductions by calculating the tax, SSS, HDMF, and PhilHealth contributions based on the gross pay. The individual deductions are then summed up and displayed in the "Total Deductions" input field.

The calculateNetPay() function calculates the net pay by subtracting the total deductions from the gross pay. The result is displayed in the "Net Pay" input field.

The getMonthlyBasicSalary() function is a helper function that returns the monthly basic salary corresponding to the selected position.

Note that the calculations assume a 26-day work month and do not take into account overtime or other additional factors.
 
🤖 said:
Here's an example of a webpage that computes the payroll of an employee based on the given specifications:

HTML: 
<!DOCTYPE html>
<html>
<head>
    <title>Employee Payroll Calculator</title>
    <script>
        function calculateGrossPay() {
            var position = document.getElementById("position").value;
            var daysPresent = parseInt(document.getElementById("daysPresent").value);
            var monthlyBasicSalary = getMonthlyBasicSalary(position);
            var dailyRate = monthlyBasicSalary / 26;
            var grossPay = dailyRate * daysPresent;
         
            document.getElementById("grossPay").value = grossPay.toFixed(2);
        }
     
        function calculateTotalDeductions() {
            var grossPay = parseFloat(document.getElementById("grossPay").value);
            var tax = 0.1 * grossPay;
            var sss = 0.05 * grossPay;
            var hdmf = 200;
            var philHealth = 100;
            var totalDeductions = tax + sss + hdmf + philHealth;
         
            document.getElementById("totalDeductions").value = totalDeductions.toFixed(2);
        }
     
        function calculateNetPay() {
            var grossPay = parseFloat(document.getElementById("grossPay").value);
            var totalDeductions = parseFloat(document.getElementById("totalDeductions").value);
            var netPay = grossPay - totalDeductions;
         
            document.getElementById("netPay").value = netPay.toFixed(2);
        }
     
        function getMonthlyBasicSalary(position) {
            switch (position) {
                case "Associate Professor":
                    return 30000;
                case "Assistant Professor":
                    return 25000;
                case "Instructor 7":
                    return 18000;
                case "Instructor 6":
                    return 16000;
                case "Instructor 5":
                    return 14000;
                case "Instructor 4":
                    return 12000;
                case "Instructor 3":
                    return 10000;
                case "Instructor 2":
                    return 8000;
                case "Instructor 1":
                    return 6000;
                default:
                    return 0;
            }
        }
    </script>
</head>
<body>
    <h1>Employee Payroll Calculator</h1>
 
    <label for="position">Position:</label>
    <select id="position">
        <option value="Associate Professor">Associate Professor</option>
        <option value="Assistant Professor">Assistant Professor</option>
        <option value="Instructor 7">Instructor 7</option>
        <option value="Instructor 6">Instructor 6</option>
        <option value="Instructor 5">Instructor 5</option>
        <option value="Instructor 4">Instructor 4</option>
        <option value="Instructor 3">Instructor 3</option>
        <option value="Instructor 2">Instructor 2</option>
        <option value="Instructor 1">Instructor 1</option>
    </select><br><br>
 
    <label for="daysPresent">Number of Days Present:</label>
    <input type="number" id="daysPresent"><br><br>
 
    <button onclick="calculateGrossPay()">Calculate Gross Pay</button><br><br>
 
    <label for="grossPay">Gross Pay:</label>
    <input type="text" id="grossPay" readonly><br><br>
 
    <button onclick="calculateTotalDeductions()">Calculate Total Deductions</button><br><br>
 
    <label for="totalDeductions">Total Deductions:</label>
    <input type="text" id="totalDeductions" readonly><br><br>
 
    <button onclick="calculateNetPay()">Calculate Net Pay</button><br><br>
 
    <label for="netPay">Net Pay:</label>
    <input type="text" id="netPay" readonly><br><br>
</body>
</html>

In this webpage, the employee selects their position from a dropdown menu and enters the number of days they were present. Upon clicking the respective buttons, the gross pay, total deductions, and net pay are calculated and displayed in the appropriate input fields.

The calculateGrossPay() function calculates the gross pay by obtaining the monthly basic salary based on the selected position and multiplying it by the number of days present. The result is then displayed in the "Gross Pay" input field.

The calculateTotalDeductions() function calculates the total deductions by calculating the tax, SSS, HDMF, and PhilHealth contributions based on the gross pay. The individual deductions are then summed up and displayed in the "Total Deductions" input field.

The calculateNetPay() function calculates the net pay by subtracting the total deductions from the gross pay. The result is displayed in the "Net Pay" input field.

The getMonthlyBasicSalary() function is a helper function that returns the monthly basic salary corresponding to the selected position.

Note that the calculations assume a 26-day work month and do not take into account overtime or other additional factors.
Click to expand...
add a code or alert method when the result in grosspay, total deductions and netpay is NaN
 
Astrazelle said:
add a code or alert method when the result in grosspay, total deductions and netpay is Nan
Click to expand...
Certainly! You can add a check in each calculation function to see if the result is NaN. If it is, you can display an alert message to notify the user that the input is invalid. Here's an updated version of the code that includes this check:

```html
<!DOCTYPE html>
<html>
<head>
<title>Employee Payroll Calculator</title>
<script>
function calculateGrossPay() {
var position = document.getElementById("position").value;
var daysPresent = parseInt(document.getElementById("daysPresent").value);
var monthlyBasicSalary = getMonthlyBasicSalary(position);
var dailyRate = monthlyBasicSalary / 26;
var grossPay = dailyRate * daysPresent;

if (isNaN(grossPay)) {
alert("Invalid input. Please enter a valid number of days.");
return;
}

document.getElementById("grossPay").value = grossPay.toFixed(2);
}

function calculateTotalDeductions() {
var grossPay = parseFloat(document.getElementById("grossPay").value);
if (isNaN(grossPay)) {
alert("Invalid input. Please calculate Gross Pay first.");
return;
}

var tax = 0.1 * grossPay;
var sss = 0.05 * grossPay;
var hdmf = 200;
var philHealth = 100
 
🤖 said:
Certainly! You can add a check in each calculation function to see if the result is NaN. If it is, you can display an alert message to notify the user that the input is invalid. Here's an updated version of the code that includes this check:

```html
<!DOCTYPE html>
<html>
<head>
<title>Employee Payroll Calculator</title>
<script>
function calculateGrossPay() {
var position = document.getElementById("position").value;
var daysPresent = parseInt(document.getElementById("daysPresent").value);
var monthlyBasicSalary = getMonthlyBasicSalary(position);
var dailyRate = monthlyBasicSalary / 26;
var grossPay = dailyRate * daysPresent;

if (isNaN(grossPay)) {
alert("Invalid input. Please enter a valid number of days.");
return;
}

document.getElementById("grossPay").value = grossPay.toFixed(2);
}

function calculateTotalDeductions() {
var grossPay = parseFloat(document.getElementById("grossPay").value);
if (isNaN(grossPay)) {
alert("Invalid input. Please calculate Gross Pay first.");
return;
}

var tax = 0.1 * grossPay;
var sss = 0.05 * grossPay;
var hdmf = 200;
var philHealth = 100
Click to expand...
add focus to daysPresent when the code run
 
Astrazelle said:
add focus to daysPresent when the code run
Click to expand...
Certainly! You can add the focus method to automatically set the focus to the "daysPresent" input field when the code runs. Here's the updated code:

```html
<!DOCTYPE html>
<html>
<head>
<title>Employee Payroll Calculator</title>
<script>
function calculateGrossPay() {
var daysPresent = parseInt(document.getElementById("daysPresent").value);
var monthlyBasicSalary = getMonthlyBasicSalary(document.getElementById("position").value);
var dailyRate = monthlyBasicSalary / 26;
var grossPay = dailyRate * daysPresent;

if (isNaN(grossPay)) {
alert("Invalid input. Please enter a valid number of days.");
return;
}

document.getElementById("grossPay").value = grossPay.toFixed(2);
}

function calculateTotalDeductions() {
var grossPay = parseFloat(document.getElementById("grossPay").value);
if (isNaN(grossPay)) {
alert("Invalid input. Please calculate Gross Pay first.");
return;
}

var tax = 0.1 * grossPay;
var sss = 0.05 * grossPay;
var hdmf = 200;
var philHealth = 100;
var totalDeductions = tax + sss + hdmf + philHealth;

document.getElementById("totalDeductions").value = totalDeductions.toFixed(2);
}

function calculateNetPay() {
var grossPay = parseFloat(document.getElementById("grossPay").value);
var totalDeductions = parseFloat(document.getElementById("totalDeductions").value);
if (isNaN(grossPay) || isNaN(totalDeductions)) {
alert("Invalid input. Please calculate Gross Pay and Total Deductions first.");
return;
}

var netPay = grossPay - totalDeductions;
document.getElementById("netPay").value = netPay.toFixed(2);
}

function getMonthlyBasicSalary(position) {
switch (position) {
case "Associate Professor":
return 30000;
case "Assistant Professor":
return 25000;
case "Instructor 7":
return 18000;
case "Instructor 6":
return 16000;
case "Instructor 5":
return 14000;
case "Instructor 4":
return 12000;
case "Instructor 3":
return
 
🤖 said:
Certainly! You can add the focus method to automatically set the focus to the "daysPresent" input field when the code runs. Here's the updated code:

```html
<!DOCTYPE html>
<html>
<head>
<title>Employee Payroll Calculator</title>
<script>
function calculateGrossPay() {
var daysPresent = parseInt(document.getElementById("daysPresent").value);
var monthlyBasicSalary = getMonthlyBasicSalary(document.getElementById("position").value);
var dailyRate = monthlyBasicSalary / 26;
var grossPay = dailyRate * daysPresent;

if (isNaN(grossPay)) {
alert("Invalid input. Please enter a valid number of days.");
return;
}

document.getElementById("grossPay").value = grossPay.toFixed(2);
}

function calculateTotalDeductions() {
var grossPay = parseFloat(document.getElementById("grossPay").value);
if (isNaN(grossPay)) {
alert("Invalid input. Please calculate Gross Pay first.");
return;
}

var tax = 0.1 * grossPay;
var sss = 0.05 * grossPay;
var hdmf = 200;
var philHealth = 100;
var totalDeductions = tax + sss + hdmf + philHealth;

document.getElementById("totalDeductions").value = totalDeductions.toFixed(2);
}

function calculateNetPay() {
var grossPay = parseFloat(document.getElementById("grossPay").value);
var totalDeductions = parseFloat(document.getElementById("totalDeductions").value);
if (isNaN(grossPay) || isNaN(totalDeductions)) {
alert("Invalid input. Please calculate Gross Pay and Total Deductions first.");
return;
}

var netPay = grossPay - totalDeductions;
document.getElementById("netPay").value = netPay.toFixed(2);
}

function getMonthlyBasicSalary(position) {
switch (position) {
case "Associate Professor":
return 30000;
case "Assistant Professor":
return 25000;
case "Instructor 7":
return 18000;
case "Instructor 6":
return 16000;
case "Instructor 5":
return 14000;
case "Instructor 4":
return 12000;
case "Instructor 3":
return
Click to expand...
where is the focus method?
 

Similar threads

Popular Tags

android api app arduino bot c c++ capstone capstone project code coding coding and programming css database developer development help how how to html in java javascript language laravel mag mysql need patulong php program programmer programming programming language project python question react script sql system thesis tutorial udemy vb.net visual basic web web development website with

About this Thread

  • 6
    Replies
  • 330
    Views
  • 2
    Participants
Last reply from:
Astrazelle

New Topics

Popular On This Forum

Online statistics

Members online
706
Guests online
5,084
Total visitors
5,790
Back
Top