Paycheck Version 2 Calculator
The Paycheck Version 2 assignment requires that we create an application that calculates paycheck
information. Save the paycheck.html form completed in the previous assignment as paycheck2.html and
save the paycheck.js file completed in the previous assignment as paycheck2.js. The user inputs First
Name, Last Name, Hours Worked, Hourly Pay Rate, FICA, State, and Federal Tax Rates. The application
calculates and displays the Regular Hours, Overtime Hours, Regular Pay, Overtime Pay, Gross Pay, Total
Taxes, and Net Pay. The application also performs the following user entry validation tests:
1. Ensure that Hours Worked is entered and is between 0 and 80.
2. Ensure that Hourly Pay Rate is entered and is between 0 and 100.00.
If both of the above conditions are not met, an e
or message alert window appears that says the
following: Please enter valid hours and a valid payrate!
Because the user isn’t entering Regular Hours and Overtime Hours as with the first paycheck
assignment, you must use an If statement to test Hours Worked to calculate Regular Hours and
OverTime Hours and Regular Pay and Overtime Pay. All Hours Worked over 40 are considered Overtime
Hours while Hours Worked between 0 and 40 are considered Regular Hours. As with the previous
assignment, Regular Pay is calculated as Regular Hours worked * Hourly Pay Rate. Overtime Pay is
calculate as Overtime Hours * Hourly Rate * 1.5. All of the remaining Gross Pay, Total Taxes, and Net Pay
variables are calculated as with the previous assignment.
The following screenshots demonstrate how the application works:
1. Upon entry to the paycheck2.html form,
the user sees the following:
2. Enter the First Name, Last Name, Hours
Worked, Hourly Rate, Fica Tax Rate, State
Tax Rate, and Federal Tax Rate: Test data
used for the example shown: Jane Doe, 80,
100.00, 5.65, 5.75, 28.00.
3. Test with Jane Doe, 0, 0, 5.65, 5.75, 28.00.
Although no pay will be calculated, the
Employee Name of Jane Doe should
appear at the bottom of the form.
4. Test with Jane Doe, Hours Worked of 40,
Hourly Pay Rate of 10.00, and 5.65, 5.75,
and 28.00 for tax rates respectively.
Regular Pay should display XXXXXXXXXX.
Overtime Pay should display 0. Gross Pay
should display XXXXXXXXXXTotal Taxes should
display XXXXXXXXXXand Net Pay should display
2424.00.
5. Click on Calculate and the following results
will display:
6. Perform Invalid Data Tests. Each of the
following tests should result in an alert
window:
Hours Worked less than 0.
Enter -.1 in the Hours Worked field.
Enter valid test data of Jane Doe and an
Hourly Rate of 100.00.
An alert window should appear:
Hours Worked greater than 80.
Enter 80.1 in the Hours Worked field.
Enter valid test data of Jane Doe and an
Hourly Rate of 100.00.
Hourly Rate less than 0.
Enter-.1 in the Hourly Rate field. Enter
valid test data of Jane Doe and Hours
Worked of 1.00.
Hourly Rate greater than100.
Enter 100.1 in the Hourly Rate field. Enter
valid test data of Jane Doe and Hours
Worked of 1.00.
Hours Worked and Hourly Rate less than
0.
Enter -.1 in the Hours Worked field. Enter -
.1 in the Hourly Rate field. Enter valid
name of Jane Doe.
Hours Worked and Hourly Rate more
than 0.
Enter 80.1 in the Hours Worked field.
Enter 100.1 in the Hourly Rate field. Enter
valid name of Jane Doe.
Based on the screenshots above, requirements are as follows:
1. Create an HTML5 file that contains a HTML form like the screenshots shown above that accepts
the First Name, Last Name, Hours Worked, Hourly Rate, Fica Tax Rate, State Tax Rate, and
Federal Tax Rate for entry and shows the Regular Hours Worked, Overtime Hours Worked,
Regular Pay, Overtime Pay, Gross Pay, Total Taxes, Employee Name, and Net Pay and a submit
utton with the label Calculate. Save the file as paycheck2.html and store it in your
Ch05directory. The paycheck2.html file must be free of e
ors and validated. Add the necessary
code to link to a CSS file called styles.css that is stored in your Ch05/css subdirectory. Add the
necessary code to use the paycheck2.js file that is stored in your Ch05/js subdirectory. (5 Points)
2. Download the styles.css file and store it in your Ch05/css subdirectory. (1 Point)
3. Create and debug a JavaScript file that processes the Paycheck information from the
paycheck.html file that meets the following specifications (43 Points Total as
oken down
elow):
a. Save the file as paycheck2.js in your Ch05/js subdirectory. (1 Point)
. Create a function that is called when the paycheck2.html form is submitted. The
function must include the following information. (3 Points)
c. Output variables for the Regular Hours, Overtime Hours, Regular Pay, Overtime Pay,
Gross Pay, Total Taxes, Net Pay, and Employee Name return results to the
paycheck2.html file. (2 Points)
d. Input variables for the First Name, Last Name, Hours Worked, Hourly Rate, Fica Tax,
State Tax, and Federal Tax use the document.getElementByID method to retrieve input
from the paycheck2.html file). (2 Points)
e. An if then else statement will be used to ensure that Hours Worked is entered and is
etween 0 and 80 and that Hourly Pay Rate is entered and is between 0 and XXXXXXXXXXIf
oth of the above conditions are not met, an e
or message alert window appears that
says the following: Please enter valid hours and a valid payrate! (10 Points)
f. An if then else statement will be used to determine Regular Hours and Overtime Hours
wherein Hours Worked over 40 are Overtime Hours and Hours Worked between 0 and
40 are Regular Hours. (10 Points)
g. Regular Pay will be co
ectly calculated and formatted with the toFixed() method. (2
Points)
h. Overtime Pay will be co
ectly calculated and formatted with the toFixed() method. (2
Points)
i. Gross Pay will be co
ectly calculated and formatted with the toFixed() method. (2
Points)
j. Fica Tax deducted will be co
ectly calculated. (1 Point)
k. State Tax deducted will be co
ectly calculated. (1 Point)
l. Federal Tax deducted will be co
ectly calculated. (1 Point)
m. Total Taxes will be co
ectly calculated and formatted. (2 Points)
n. The Employee Name will be co
ectly displayed. (1 Point)
o. The Net Pay will be co
ectly calculated and formatted with the toFixed() method. (2
Points)
p. The init() function will be co
ectly used. (1 Point)
4. Submit the paycheck2.html, styles.css, and paycheck2.js files to Blackboard. (1 Point)
Helpful Hints: The most helpful resources to review for completing this assignment are the paycheck.html and
paycheck.js files from the previous assignment and the membership.html, membership.js, sphere.html, sphere.js,
contact.html and contact.js files from Ch 05 in the textbook.