Preplp
HTML CSS JS Projects
Project 3HTML · CSS · JS~45 min

Tip Calculator

User input, switch logic, and formatted currency

Track progress0/3 days
x

What you'll learn

getElementByIdparseFloatswitchtextContentevent listeners
  • Read bill amount, service rating, split count, and meal type
  • Calculate tip % with a switch statement
  • Split the total between people
  • Apply a dinner bonus and display formatted dollars

Lesson & examples

Read the code, then the explanation — try changing values before the project.

Read inputs
const billAmount = parseFloat(document.getElementById("billAmount").value);
const serviceRating = parseFloat(document.getElementById("serviceRating").value);
Switch on rating
switch (serviceRating) {
  case 1: tip = billAmount * 0.05; break;
  case 2: tip = billAmount * 0.10; break;
  case 3: tip = billAmount * 0.15; break;
  case 4: tip = billAmount * 0.20; break;
}
Display with toFixed
tipAmountOutput.textContent = `Tip: $${tip.toFixed(2)}`;

Today's project: Tip Calculator

Enter bill amount, rate the service, choose how many people split the bill, and pick a meal type. Dinner adds a flat $5 to tip and total.

Open index.html in your browser, fill the form, and click Calculate.

Steps

  1. 1

    Layout the form

    Create input groups for bill, service rating (1–4), split count, and meal type (breakfast/lunch/dinner).

  2. 2

    Dark theme styling

    Style .container with a dark card, pink accents, and full-width inputs.

  3. 3

    Wire the Calculate button

    Add a click listener that calls calculateTip().

  4. 4

    Validate and compute

    If any value is NaN, show an error. Otherwise use switch for tip %, add tip to bill, divide by split count.

  5. 5

    Dinner bonus

    If mealType is dinner, add $5 to tip, total, and per-person amount before displaying.

Full project source — copy into a folder or use the zip above

Open index.html in your browser, fill the form, and click Calculate.

index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tip Calculator</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <h1>Tip Calculator</h1>

    <div class="input-group">
      <label for="billAmount">Bill Amount:</label>
      <input type="number" id="billAmount" placeholder="Enter the bill amount">
    </div>

    <div class="input-group">
      <label for="serviceRating">Service Rating:</label>
      <select id="serviceRating">
        <option value="1">Poor</option>
        <option value="2">Average</option>
        <option value="3">Good</option>
        <option value="4">Excellent</option>
      </select>
    </div>

    <div class="input-group">
      <label for="splitCount">Number of People:</label>
      <input type="number" id="splitCount" placeholder="Number of people">
    </div>

    <div class="input-group">
      <label for="mealType">Meal Type:</label>
      <select id="mealType">
        <option value="breakfast">Breakfast</option>
        <option value="lunch">Lunch</option>
        <option value="dinner">Dinner</option>
      </select>
    </div>

    <div class="result">
      <h2>Result:</h2>
      <div id="tipAmount"></div>
      <div id="totalAmount"></div>
      <div id="amountPerPerson"></div>
    </div>

    <button id="calculateBtn">Calculate</button>
  </div>
  <script src="script.js"></script>
</body>
</html>
style.css
body {
  font-family: Arial, sans-serif;
  background-color: #4f4657;
  margin: 0;
}

.container {
  max-width: 500px;
  margin: 80px auto;
  padding: 20px;
  background-color: #252525;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}

h1 {
  text-align: center;
  color: #fff;
  border-bottom: 2px solid #f2f2f2;
  padding-bottom: 20px;
}

.input-group {
  margin-bottom: 20px;
}

.input-group label {
  display: block;
  margin-bottom: 10px;
  color: #fff;
  font-weight: bold;
}

.input-group input,
.input-group select {
  width: 100%;
  padding: 12px;
  font-size: 16px;
  border: 2px solid #c50752;
  border-radius: 5px;
  background-color: #252525;
  color: #fff;
  box-sizing: border-box;
}

.result {
  margin-top: 30px;
  border-top: 2px solid #f2f2f2;
  padding-top: 20px;
  color: #fff;
}

#calculateBtn {
  padding: 12px 20px;
  background-color: #c50752;
  border: none;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  margin-top: 10px;
}

#calculateBtn:hover {
  background-color: #53031b;
}
script.js
function calculateTip() {
  const billAmount = parseFloat(document.getElementById("billAmount").value);
  const serviceRating = parseFloat(document.getElementById("serviceRating").value);
  const splitCount = parseInt(document.getElementById("splitCount").value);
  const mealType = document.getElementById("mealType").value;

  const tipAmountOutput = document.getElementById("tipAmount");
  const totalAmountOutput = document.getElementById("totalAmount");
  const amountPerPersonOutput = document.getElementById("amountPerPerson");

  if (isNaN(billAmount) || isNaN(serviceRating) || isNaN(splitCount) || splitCount < 1) {
    tipAmountOutput.textContent = "Please enter valid numbers";
    totalAmountOutput.textContent = "";
    amountPerPersonOutput.textContent = "";
    return;
  }

  let tip;
  switch (serviceRating) {
    case 1: tip = billAmount * 0.05; break;
    case 2: tip = billAmount * 0.10; break;
    case 3: tip = billAmount * 0.15; break;
    case 4: tip = billAmount * 0.20; break;
    default: tip = 0;
  }

  let totalAmount = billAmount + tip;
  let amountPerPerson = totalAmount / splitCount;

  if (mealType === "dinner") {
    tip += 5;
    totalAmount += 5;
    amountPerPerson = totalAmount / splitCount;
  }

  tipAmountOutput.textContent = `Tip: $${tip.toFixed(2)}`;
  totalAmountOutput.textContent = `Total: $${totalAmount.toFixed(2)}`;
  amountPerPersonOutput.textContent = `Per person: $${amountPerPerson.toFixed(2)}`;
}

document.getElementById("calculateBtn").addEventListener("click", calculateTip);

Code explained

  1. 1.switch on rating

    Each case maps a service level to a tip percentage. break prevents fall-through to the next case.

    Snippet
    switch (serviceRating) {
  case 1: tip = billAmount * 0.05; break;
  // ...
}

  2. 2.Dinner bonus

    After calculating tip and total, dinner adds a flat $5 — then per-person is recalculated from the new total.

  3. 3.Validation with isNaN

    isNaN catches empty or non-numeric input early so you don't show misleading dollar amounts.

Sample output

Tip: $15.00
Total: $115.00
Per person: $57.50

One rehearsal platform

Certification mocks, daily lessons, project labs, and in-browser drills

Structured for exam day and portfolio proof — timed tests, guided builds, and quick reps on one platform.