Calculating And Displaying Values

Section overview

In this lesson we improve our tip calculator by calculating the tip amounts, split bills, then dynamically updates our interface with the results.

You'll learn how to work with numbers in JavaScript, perform calculations, and use DOM manipulation to display those values back to the user.

Understanding the calculations needed

Before we dive into the code, let's understand what we need to calculate:

Tip value: The amount of tip based on the bill and tip percentage
Total with tip: The original bill plus the tip amount
Bill each: How much each person pays when splitting the total
Tip each: How much tip each person pays when splitting

These calculations will happen every time the user changes any input value.

Converting strings to numbers

Input values from HTML forms are always strings, even for number inputs. We need to convert them to actual numbers before performing calculations. Update your update function:

function update() {
  // wrap input value with the Number function:
  let bill = Number(document.getElementById('yourBill').value);
  let tipPercent = document.getElementById('tipInput').value;
  let split = document.getElementById('splitInput').value;

  console.log({ bill, tipPercent, split });
}

Number() converts a string value to a number data type.
Without this conversion, JavaScript would try to concatenate (join) strings instead of adding the actual numbers.
For example, "10" + "5" gives "105" (string concatenation), but Number("10") + Number("5") gives 15 (mathematical addition).

Only the bill input needs Number() here because we'll be performing calculations on it immediately.

Calculating the tip value

Now let's calculate the actual tip amount. The tip is calculated as a percentage of the bill. Add this calculation to your update function:

function update() {
  let bill = Number(document.getElementById('yourBill').value);
  let tipPercent = document.getElementById('tipInput').value;
  let split = document.getElementById('splitInput').value;

  let tipValue = bill * (tipPercent / 100);

  console.log({ bill, tipPercent, split, tipValue });
}

tipPercent / 100 converts the percentage to a decimal (e.g. 15% becomes 0.15).
bill * (tipPercent / 100) calculates the tip amount.
For example, a $100 bill with 15% tip: 100 * (15 / 100) = 100 * 0.15 = 15.

The tip slider value ranges from 0 to 100, representing percentages. Dividing by 100 converts this to a decimal that we can multiply with the bill amount.

Calculating tip per person

When splitting the bill, we need to know how much tip each person pays. Add the tipEach calculation:

let tipValue = bill * (tipPercent / 100);
// add
let tipEach = tipValue / split;

tipValue / split divides the total tip by the number of people.
For example, a $15 tip split between 3 people: 15 / 3 = 5 each.

Calculating the total per person

Finally, let's calculate how much each person pays in total (their share of the bill plus tip):

let tipValue = bill * (tipPercent / 100);
let tipEach = tipValue / split;
// add
let newBillEach = (bill + tipValue) / split;

bill + tipValue gives us the total amount including tip.
(bill + tipValue) / split divides this total by the number of people.
For example, a $100 bill with $15 tip split between 3 people: (100 + 15) / 3 = 115 / 3 = 38.33 each.
The parentheses are used to first add the bill and tip before dividing.

Completed calculations

Your update function should now look like this:

function update() {
  let bill = Number(document.getElementById('yourBill').value);
  let tipPercent = document.getElementById('tipInput').value;
  let split = document.getElementById('splitInput').value;

  let tipValue = bill * (tipPercent / 100);
  let tipEach = tipValue / split;
  let newBillEach = (bill + tipValue) / split;

  console.log({ bill, tipPercent, split, tipValue, tipEach, newBillEach });
}

Test this in your browser console and you should see all the calculated values updating as you interact with the inputs!

Displaying the tip percentage

Now let's start updating the actual interface with our calculated values. We'll begin by showing the selected tip percentage. Add this line below your calculations:

let newBillEach = (bill + tipValue) / split

document.getElementById('tipPercent').innerHTML = tipPercent + '%';

document.getElementById('tipPercent') finds the <span> element where we want to display the percentage.
.innerHTML sets the content inside that element.
tipPercent + '%' adds a percent symbol after the number (e.g. "15%").

Now when you move the tip slider, you'll see the percentage value appear next to the "Select tip" label!

Displaying the tip amount

Let's show the calculated tip value:

document.getElementById('tipPercent').innerHTML = tipPercent + '%';
document.getElementById('tipValue').innerHTML = tipValue;

This updates the <span> next to "Tip" with the calculated tip amount.
The value will update dynamically as the user changes the bill amount or tip percentage.

Displaying the total with tip

Next, the total bill amount including the tip:

document.getElementById('tipValue').innerHTML = tipValue;
document.getElementById('totalWithTip').innerHTML = bill + tipValue;

This calculates and displays the complete total the group will pay.
We add the bill and tip value together in the innerHTML assignment.

Displaying the split value

Let's now show how many people are splitting the bill:

document.getElementById('totalWithTip').innerHTML = bill + tipValue;

document.getElementById('splitValue').innerHTML = split;

This displays the number from the split slider (1-10 people).
The value updates immediately as the slider is moved.

Displaying bill per person

Now let's show how much each person pays for their share of the total:

document.getElementById('splitValue').innerHTML = split;
document.getElementById('billEach').innerHTML = newBillEach;

This displays the per-person total (their share of bill + tip).
The value automatically recalculates when any input changes.

Displaying tip per person

Finally, let's show how much tip each person contributes:

document.getElementById('billEach').innerHTML = newBillEach;
document.getElementById('tipEach').innerHTML = tipEach;

This shows each person's share of the tip.
All calculations and displays now update together dynamically.

Removing the `console.log`

Now that we're displaying values in the interface, we don't need the console.log anymore. You can remove or comment it out:

// console.log({ bill, tipPercent, split, tipValue, tipEach, newBillEach })

Testing your calculator

Open your project in a browser and test:

Enter a bill amount
Move the tip slider
Move the split slider

Try different combinations to check all calculations are working correctly, you should see all values update instantly

Final code

Here's the complete HTML with the updated JavaScript for your tip calculator:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,700;1,400&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="styles.css" />
    <title>Quick Tip</title>
  </head>
  <body>
    <main id="container">
      <h1>Quick Tip</h1>

      <section>
        <div class="bill">
          <label for="yourBill">Bill</label>
          <input type="number" placeholder="Your bill" id="yourBill" />
        </div>
        <div>
          <div class="space-between">
            <label for="tipInput">Select tip</label
            ><span id="tipPercent"></span>
          </div>
          <input type="range" value="0" id="tipInput" class="range" />
        </div>
        <div class="space-between">
          <span>Tip</span>
          <span id="tipValue"></span>
        </div>
        <hr />
        <div class="space-between total">
          <span>Total</span>
          <span id="totalWithTip"></span>
        </div>
      </section>

      <section>
        <div>
          <div class="space-between">
            <label for="splitInput">Split</label>
            <span id="splitValue"></span>
          </div>
          <input
            type="range"
            min="1"
            max="10"
            value="1"
            id="splitInput"
            class="range"
          />
        </div>
        <div class="space-between">
          <span>Bill each</span>
          <span id="billEach"></span>
        </div>
        <div class="space-between">
          <span>Tip each</span>
          <span id="tipEach"></span>
        </div>
      </section>
    </main>
    <script>
      function update() {
        let bill = Number(document.getElementById('yourBill').value)
        let tipPercent = document.getElementById('tipInput').value
        let split = document.getElementById('splitInput').value
        let tipValue = bill * (tipPercent / 100)
        let tipEach = tipValue / split
        let newBillEach = (bill + tipValue) / split

        document.getElementById('tipPercent').innerHTML = tipPercent + '%'
        document.getElementById('tipValue').innerHTML = tipValue
        document.getElementById('totalWithTip').innerHTML = bill + tipValue

        document.getElementById('splitValue').innerHTML = split
        document.getElementById('billEach').innerHTML = newBillEach
        document.getElementById('tipEach').innerHTML = tipEach
      }
      const container = document.getElementById('container')
      container.addEventListener('input', update)
    </script>
  </body>
</html>

Summary

In this lesson, you learned how to:

Convert string values to numbers using Number().
Calculate tip amounts.
Perform division to split costs between multiple people.
Use innerHTML to update HTML content with JavaScript.
Select elements using getElementById() to both read input values and update display elements.
Chain multiple DOM updates together.

Section overview
Understanding the calculations needed
Converting strings to numbers
Calculating the tip value
Calculating tip per person
Calculating the total per person
Completed calculations
Displaying the tip percentage
Displaying the tip amount
Displaying the total with tip
Displaying the split value
Displaying bill per person
Displaying tip per person
Removing the console.log
Testing your calculator
Final code
Summary

Calculating And Displaying Values

Table of contents