Project: tip calculator

25 min 60 XP + 10 for no hints

Build a tool people really use at restaurants: type the bill, pick a tip and see the total.

You'll combine an HTML form, a little CSS and JavaScript. Read numbers from inputs with Number(input.value), and round money with total.toFixed(2), which always shows two decimal places.

Test it yourself in the preview: change the bill, pick a tip and click Calculate.

Your tasks

0 of 5 done

Listen for clicks on the Calculate button
A 50 bill with a 20% tip shows a total of 60
It works for other amounts (80 with 15% is 92)
The total is rounded to 2 decimal places
Add a CSS rule that styles the button

tip.htmlUpdates as you type

<style>
  body { font-family: sans-serif; padding: 20px; }
</style>

<h1>Tip calculator</h1>
<label for="bill">Bill amount</label>
<input id="bill" type="number" value="50">

<label for="tip">Tip</label>
<select id="tip">
  <option value="10">10%</option>
  <option value="15">15%</option>
  <option value="20">20%</option>
</select>

<button id="calc">Calculate</button>
<p id="total">Total: </p>

<script>
  // When the button is clicked, show the bill plus the tip in #total

</script>

Project: tip calculator

Your tasks

Tutor