Lab Exercise 14: Eagle or Beagle?
Should be completed on or before 11:59pm, August 3rd. No extension.
Be sure to open the Error/Web Console.
Clear the console messages if necessary.
Background
The cost of shipping a package by Eagle-Beagle Express depends on the type of service used. The total shipping cost is calculated using the rules:
The two types of service have base charges as follows:
| Service | Base charge |
|---|---|
| Eagle | $17 |
| Beagle | $12 |
That is:
- if the shipping method is Eagle service, the charge is $17;
- if the shipping method is Beagle service, the charge is $12.
- Package size is not taken into account.
The page
Save the three pictures that are in this lab folder. The page should look similar to this image.
To use the swap_pic function, link to the external library http://wyrd.hood.edu/~dong/it581/s2015/lib/library_581.js
For this lab exercise, you need to start from scratch. Refer to lab13, part 1 or lecture notes on how to add a form to a web page. The code for fieldset and ratio button can be found in HTML Form part II lecture notes.
Your task
Your task is to add a form to the page and write the event handler for the button onclick event.
The action will depend on which shipping method the user types in. It should:
- calculate the cost.
- change the image to the appropriate picture (eagle.jpg or beagle.jpg)
- report cost in the textarea araDisplay
Submit your work
- Upload your file and the three image files to your public_html directory on wyrd.hood.edu.
- Provide a hyperlink to the page in the submission form on Blackboard.