Sample Exam Question: Tip Calculator

Overview

Using the code you see here:


x
<body>
    <h1>Tip Calculator</h1>
    <label for="txtMealCost">How much was your meal?</label>
    <input type="text" id="txtMealCost">

    <p>How would you rate the service?
    <p>
    <input type="radio" name="serviceLevel" id="radFair">Fair (10%)
    <input type="radio" name="serviceLevel" id="radGood">Good (20%)
    <input type="radio" name="serviceLevel" id="radExcellent">Excellent (30%)

    <p><input type="button" value="Calculate Tip" onclick="calculateTip()">

<div id="output"></div>

<script>
</script>
</body>

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 suer's choice from a radio button
1. If the user selected the button showing “Fair” the tip amount should be calculated as the bill cost * 0.1 (i.e. 10%).
2. If the user selected the button showing “Good” the tip amount should be calculated as the bill cost * 0.2 (i.e. 20%).
3. 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 19.45 (i.e. 64.83 * 0.3).

You must use concatenation. So your ‘output’ section should say something like: The tip amount should be $19.45 Ensure that the answer is to exactly two decimal places).

For this exam question, you ONLY need to write the JavaScript function.

You can see my completed version in tip_calculator.html