Assignment 9
Collecting data and information through custom forms created in HTML and processing form information through client-side JavaScript.
Required Knowledge & Skills
- Forms development with HTML
- JavaScript
Case Study Background
Chris Kelly wants to get a better handle on pricing custom multi-day charters. The cost of a charter depends on the following rules:
- The cost for each hour of running time is calculated by multiplying the gallons burned per hour by the current price of fuel.
- The gallons consumed depends on the speed of the boat (14kt = 18gph, 18kt = 24gph, 20kt = 30gph, 22kt = 37gph). Use a drop down menu for this field.
- Make the current price of fuel a text input field and set a default value of $4.25 for the price of fuel. You must validate that the user is entering a number and not text. Display an error message in a small, red, italicized font next to the input field and change the focus to the field (Hint: use the isNaN() function and the focus() method); clear the error message after the error has been repaired
- The number of hours depends on the distance and the speed. Common destinations have the following one-way distances (Falmouth to Nantucket = 28nm, Falmouth to Edgartown = 11nm, Falmouth to Oak Bluffs = 7.6nm, Falmouth to Newport = 38nm).
Test Case
- Falmouth to Nantucket at 18kt should cost $158.67 assuming gas is $4.25 per gallon.
Tasks
Your tasks are to:
- build a JavaScript program that calculates and displays the charter cost based on the above rules
- format the output of your results to two digits after the decimal point using this approach.
- add this calculator in the Reservations page below the calculator for the previous lab (in practice you would eventually combine the two calculators into one); be sure to make all of the ID's of your HTML elements and the JavaScript function names unique
- set the focus to the field containing an error using this approach and the code in the demo.
- use the debugger to find errors in the code
Grading Rubric
If you only use text fields, then you will receive no more than 20 points. You must use drop down menus.
- missing error message for empty fuel cost or incorrect input next to input field (-10)
- error message not in small red font or not italized (-5)
- incorrect calculation (-10)
- focus not set to field that has error (-5)
- error messages as an alert box and not next to field (-10)
- result displayed in an alert box and not as embedded HTML text (-10)
- fuel input field does not have a default value (-5)
- error message is not erased after error has been corrected (-5)
- the output field displays "$NaN" when an incorrect input is entered instead of "$0" or left blank (-5)
What to Submit
You must submit your URL to your current BoatVentures website through Blackboard.
Resources Required & Notes
Total Number of Earnable Points: 100 Points
Approximate Time to Complete: 2.5 Hours
Due Date: see Syllabus or Blackboard
Approximate Time to Complete: 2.5 Hours
Due Date: see Syllabus or Blackboard