Assignment 8
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
Charter pricing is complicated and BoatVenture's agents spend significant time determining prices for customized charters. Chris would like to provide an interactive pricing calculator on his website so that guests can provide their charter details, such as departure port, destination, number of guests, and charter length and be provided with a quote. Eventually, Chris would like to allow guests to book the charter online.
Tasks
Your tasks are to:
Hints: Be sure to save your code frequently into Notepad or paste into your web page. If your code does not work, refresh the editor window.
- add a custom form in HTML in your Reservations page that collects the information required to calculate the fee for a charter. Split the page so that the charter cost calculator is on the left side of the request form already on the page. Add the header "Calculate Charter Cost" with the explanatory text "Enter information about your charter and receive a quote." below.
- You will need to get the number of hours (number input), number of guests (number input), and if it is going to Oak Bluffs, Hyannis or Vineyard Haven (checkbox). You will also need a checkbox to indicate whether fishing is desired.
- Build a JavaScript program that calculates and displays the charter cost based on the following rules: $275 per hour plus a $15 charge per guest for refreshments; $20 dockage fee if the destination is Oak Bluffs; $50 for rods and bait if fishing is desired; a 10% discount is applied to the hourly fee if more than 8 hours are booked -- the discount ONLY applies to the hourly fee and no other services
- The maximum number of guests is 6. Any value over 6 should not be allowed -- use an <input type="number"> to restrict the values to 1 through 6.
- The result must be displayed within the HTML page under the button using the text "The total charter cost is $ppp" where ppp is your calculated cost estimate. You may not use an alert box to display the result.
Hints: Be sure to save your code frequently into Notepad or paste into your web page. If your code does not work, refresh the editor window.
Test Cases
Use the following test cases to determine if your form works correctly. The test cases are based on this Excel model that you can also download to develop additional test cases.
Test Case 1: 3 hour charter to Oak Bluffs, fishing, 5 guests
Test Case 2: 10 hour charter to Hyannis, no fishing, 6 guests
Test Case 3: 2 hour charter to Vineyard Haven, fishing, 8 guests
|
Result: $970
Result: $2,565
Result: Invalid charter; should not be submittable
|
What to Submit
You must submit your URL to your current BoatVentures website through Blackboard.
Getting Started
Here's a code fragment that will get you started. Be sure to program iteratively. Write one line of code, then test. Then write more. Do not try to write the whole solution at once and then "debug" it. Mistakes are hard to find if you do it that way.
Number of Guests: <input id="guests" /><br/>
<button onClick="calc()">Calculate Charter Cost</button>
<script>
function calc()
{
alert("step 1")
}
</script>
<button onClick="calc()">Calculate Charter Cost</button>
<script>
function calc()
{
alert("step 1")
}
</script>
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