In this machine problem we will practice using if-else conditional construct, working in a Javascript/HTML document, implement a useful program to help the Keystone Daily Newspapers delivery department.
The Keystone Daily Newspapers Delivery Department hires many newspaper delivery personnel. These personnel are paid according to the number of deliveries they made in each week. The following is the chart that describes how delivery personnel should be paid:
Number of deliveries made in a week Rate
Up to 50 15 cents per delivery
51 to 100 $8.00 plus 14 cents for each over 50
101 to 150 $17.50 plus 13 cents for each over 100
151 to 200 $25.00 plus 12 cents for each over 150
201 to 300 $35.00 plus 11 cents for each over 200
301 and over $50.00 plus 10 cents for each over 300
Develop an HTML based web page, including the necessary scripts that use if-else statements to accept as input the number deliveries made and compute and show the amount that delivery personnel should be paid. The input data and output results should appear in html elements. Messages to the user may appear in alert boxes popped up. Your program should check (validate) input and echo to the user politely when input is not valid. Please do spend time formatting your html page ensuring user friendliness and usability of your system. Your web page should display the overall pay scale information as in the table above that is being used as the basis for the calculation. The user can easily check the calculation of pay that way.
The following table contains examples of actual output data that might be reported. One row of this table would correspond to the output of a single submission by the user. The web page should be labeled nicely, explaining what information is being provided. Example output:
Deliveries made Salary Earned
48 $7.20
76 $11.64
137 $22.31
159 $26.08
279 $43.69
456 $65.60
See the output example for one implementation of this problem that was based on a different pay scale. When you click on Calculate, the salary earned for 69 deliveries wouold be displayed.
I will do the initial black box test of your code by opening the *.htm or *.html file with the IE/FireFox browser: make sure it works! (My test suite may include invalid input data be sure to handle it gracefully!)
The CIO of Keystone Daily is watching us! She realizes that a nave team would hard wire the payment formula data at the top of this page into both the java script that calculates the payments and the html code that displays the pay formula table. We need to impress her that we are not nave, but highly sophisticated. Your code should have the data in the top table as a set of defined variables or constants. These variables would then be used both in the javascript formulas to calculate salary and in assigning values to html output elements to render the table at the top. She will know that we put value on developing code that can be quickly modified without errors as the pay formula changes. She will be particularly offended if we incorporate the data as literal constants in the code statements always use named variables!!!
Download the file MP1TableDemo to see an example of a program that renders a three-row table. Row 1 is statically coded in the html file and would not impress the CIO. Rows 2 and 3 exhibit to ways of dynamically rendering the html that is in the table. The js code completes the table by either providing the .value attribute for the table elements or by providing the textcontent attribute for them. Only the constants need be changed to revise the table. This html file will be found in the download zip directory for MP1 specifications.