Tip Calculator

by kirupa (https://www.kirupa.com/about/whatiskirupa.htm) | filed under Coding Exercises (https://www.kirupa.com/codingexercises/index.htm)

You've just finished a great dinner with friends. The bill arrives, and now comes the hard part: figuring out the tip and how much each person owes. Doing percentage math in our heads after a big meal isn't much fun, so let's build a tip calculator that does the work for us. Play with the one below (or open it in a new window (https://www.kirupa.com/codingexercises/examples/tip_calculator.htm)):

Your tip calculator needs to do the following:

1. Provide a field for entering the bill amount
2. Allow choosing a tip percentage of 10%, 15%, 18%, 20%, or 25%
3. Allow setting the number of people splitting the bill. This number can never go below 1
4. Display the tip per person and the total per person, formatted as money with two decimal places (such as $12.50)
5. Update the results immediately whenever anything changes. No Calculate button allowed!

For extra credit, add a field where people can enter their own custom tip percentage. Also, make sure your calculator doesn't fall apart when the bill field is empty or contains something that isn't a number.

Onwards!

Starting Point

Create a new HTML document in your favorite code editor (like Visual Studio Code) and copy/paste the following starting content into it:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tip Calculator</title>
  <style>
    
  </style>
</head>
<body>
  <h1>Tip Calculator</h1>

  <label for="bill">Bill</label>
  <input id="bill" type="number" min="0" step="0.01" placeholder="0.00">

  <p>Tip</p>
  <div class="tips">
    <button data-tip="10">10%</button>
    <button data-tip="15">15%</button>
    <button data-tip="18">18%</button>
    <button data-tip="20">20%</button>
    <button data-tip="25">25%</button>
  </div>

  <label for="people">People</label>
  <input id="people" type="number" min="1" value="1">

  <p>Tip per person: <span id="tipPerPerson">$0.00</span></p>
  <p>Total per person: <span id="totalPerPerson">$0.00</span></p>

  <script>
    
  </script>
</body>
</html>

This gives us inputs for the bill and the number of people, buttons for picking a tip, and spots for displaying the results. Keep in mind that the value we get from an input element is always a string, even when its type is set to number. The styling and the JavaScript for doing all of the math are what you will add entirely on your own!

Hint: Some Learning Resources

The following tutorials may provide some helpful tips and techniques to help you with this exercise: Events in JavaScript (https://www.kirupa.com/html5/javascript_events.htm), Going from a String to a Number (https://www.kirupa.com/html5/going_from_a_string_to_a_number.htm), Rounding Numbers in JavaScript (https://www.kirupa.com/html5/rounding_numbers_in_javascript.htm), Custom Data (data-*) Attributes (https://www.kirupa.com/html5/custom_data_attributes.htm), Handling Events for Many Elements (https://www.kirupa.com/html5/handling_events_for_many_elements.htm)

Getting Your Badge

Once you have completed this challenge, you have earned the awesome bragworthy privilege of adding the following badge to your collection (https://forum.kirupa.com/badges/):

[Image: Tip Calculator badge] (https://www.kirupa.com/codingexercises/images/tip_calculator_badge.png)

To claim it, head over to the forums and respond in the Tip Calculator topic (https://forum.kirupa.com/t/tip-calculator-frontend-coding-exercise/683596). Be sure to include a link to your solution or insert a copy of your HTML/CSS/JS in the body of the message:

[Image: ] (https://www.kirupa.com/codingexercises/images/create_forum_topic.webp)

Once you have created your topic, Kirupa will give you a virtual high-five and ensure this badge is added to your list of assigned badges.

Stuck? Need Help? Want a Code Review?

We want to make this a fun learning activity. If you are stuck and need help, please ask on the forums (https://forum.kirupa.com). Please explain your problem in detail and one of the many helpful forum members will help you out.

Similarly, if you want feedback on your code, please also ask in the forums. This would be an excellent chance for you to learn how you can improve your solution from other web developers!