This assignment will show you how to make the HTML form your created last week interactive by adding in
Name – Employee Name (stored in our array)
Hours – Hours worked in a given week
OT – Overtime Hours (total hours – 40.0) … 40 hours is a normal work week
Overtime Pay Factor – 1.5 (time and half) or 2.0 (double time)
Gross Pay – Normal Pay (wage * normal hours) + overtime pay (overtime hours * wage * overtime pay factor)
Employee Payroll information to test our Gross Pay Calculator (note: gross pay based on overtime pay at time and a half – 1.5):
Name Clock Wage Hours OT Gross Pay
|Connie Cobol 098401 10.60 51.0
|Mary Apl 526488 9.75 42.5
|Frank Fortran 765349 10.50 37.0
|Jeff Ada 034645 12.25 45.0
|Anton Pascal 127615 8.35 0.0
Test an array to determine the existence of a given employee number.
Ensure that all fields contain a value (not empty)
Ensure that specific fields contain a numeric value
The overtime rate used is either 1.5 (time and a half) or 2.0 (double time)
Like each week, there is a minimum assignment, and a challenge assignment, resulting in a different set of possible points. In either case, please use the template provided. The template will work out of the box, but only checking the clock and wage form fields … ignoring the others. Paste it into the HTML Real Time Editor and watch it run.
DO NOT start this assignment from scratch, go easy on yourself and use my template. Add a little bit of code at a time, test it in real time, then and more code, test, and so on. DO NOT just add all the code at once …
Minimum Assignment (80 point maximum) – Use the template provided and use the standard set of fields already provided. Simply add the missing code (its easy, you just mimic code in areas clearly marked in the template). Carefully follow the directions and you will have no problems. DO NOT add additional code not specified in the template.
Challenge Assignment (100 point maximum) – Add another field to your form called “Service” that shows the number of years an employee worked for the company. Like the other fields, ensure that the service value gets entered into the form field and is a numeric value.
Want to challenge yourself even more???
Submitting the Assignment
DO VERIFY that everything works. If you click the Calculate button and nothing happens, you likely have an error in one of your statements that you added. Add only a few statements at a time and click the Calculate button frequently to ensure that either an alert box is displaying for an invalid field entry or the gross pay is being calculated and displayed.
How to Submit the Assignment: Once satisfied, just attach the HTML file when you submit the
assignment. If you use the HTML Real Time Editor, simply copy and paste your final code from it into an HTML file (has an *.html or *.htm file extension) and submit that file. This file format will allow me to download your assignment submission to verify it is correct.
The sequence of screen shots below show how the form is designed to work. The first screen shot shows how the form should work if everything is correctly entered. In this case, the clock number has been defined in the two dimensional array, all fields have been filled out, the OT Pay factor is either 1.5 and 2.0, and each field is a number.
Note: The template will work out of the box with no changes on your part. Checking is already done on the Clock and Wage fields. Your job is to add the missing code to the template to verify the values entered into the Hours, OT, and OT Pay Factor fields.
The example above uses an overtime pay factor of 1.5, for time and half, which would pay all overtime hours at a wage of time and half. In this case, the 11 overtime hours would be paid at a wage rate of $15.90 (which is 1.5 multiplied by 10.60). If you type in an overtime pay factor of 2.0, for double time, it would pay all overtime hours at twice the hourly wage, which is $21.20 (calculated as 2.0 multiplied by 10.60). The OT Pay Factor field will only accept a value of 1.5 or 2.0
There is also some error checking involved. When implemented, all input fields must contain a value. Processing will start from the top and work its way down. If any field is left blank, an alert box message will show the user the first field it encountered that was missing a value.
Additionally, the clock number will be checked against a list of valid clock numbers and the rest of the fields will be checked for numeric values.