Example: tip_calculator.htm
The example below was the highest point-value question on a previous final exam. This example puts together nearly of the concepts we have covered in the course. You will be asked to do something similar on your exam. So it is extremely important that you really understand and be able to create this program on your own.
(15) Using the HTML code you see here:
Write a JavaScript function that will:
Retrieve the value from the text field. Assume the text field is called 'txtMealCost'
Calculate the tip based on the user’s choice from a radio button.
• If the user selected the button showing “Fair” the tip amount should be calculated as the bill cost * 0.1 (i.e. 10%).
• If the user selected the button showing “Good” the tip amount should be calculated as the bill cost * 0.2 (i.e. 20%).
• If the user selected the button showing “Excellent” the tip amount should be calculated as the bill cost * 0.3 (i.e. 30%).
Output the amount of the tip to the div section called 'output'.
For example, if the user enters 64.83 for the meal amount and selects ‘Excellent’ as the level of service, your calculation should output 20.53 (i.e. 64.83 * 0.3).
You must use concatenation. So your ‘output’ section should say something like: The tip amount should be $20.53. (Bonus point if you ensure that the answer is to exactly two decimal places).
For this exam question, you ONLY need to write the JavaScript function.
Once you have completed this example on your own, feel free to check out this video of my version of this exam question.
NOTE: This video is a little bit older than some of the others, so you'll notice some subtle differences such as the fact that the script is in the <head> section and a couple of other very minor details. Those are not important. The key issues to focus on are retrieving the value from the form, parsing it (when necessary), determining if a given radio button was clicked, keeping track of a cost variable, and outputting using innerHTML. All of this is "old news" to you, of course! And as a result, I hope and imagine that most -- and hopefully all -- of you are going to nail this part of the exam!