Tip Calculator

Goals

• Read and parse numeric input from form fields
• Write a pure function that computes tip and total
• Update the DOM on every input event
• Format a number as currency with toFixed

Prerequisites

• Functions and return values
• Number parsing (Number, parseFloat)
• DOM selection and event listeners

Steps

2. 1

   Write the HTML

   Create two number inputs and a result span. Labels make the inputs clear; the span is where the result will appear.

   CodeCopy

   <label>Bill amount <input type="number" id="bill" value="20"></label>
   <label>Tip % <input type="number" id="tip" value="15"></label>
   <p id="result">Tip: $0.00 | Total: $0.00</p>

   Expected result

   Two labeled number inputs and a result paragraph appear.

4. 2

   Write the calculation function

   Write calcTip(bill, percent) that returns an object with tip and total. Keeping the math in a pure function makes it easy to test and reuse.

   CodeCopy

   function calcTip(bill, percent) {
     const tip = bill * percent / 100;
     return { tip, total: bill + tip };
   }

   Expected result

   calcTip(20, 15) returns { tip: 3, total: 23 }.

6. 3

   Read inputs and update the DOM

   Select the inputs and result span. Write an update() function that reads the values, calls calcTip, and sets the result text. Use toFixed(2) to always show two decimals.

   CodeCopy

   const billEl = document.getElementById("bill");
   const tipEl = document.getElementById("tip");
   const resultEl = document.getElementById("result");
   
   function update() {
     const bill = Number(billEl.value);
     const percent = Number(tipEl.value);
     const { tip, total } = calcTip(bill, percent);
     resultEl.textContent = `Tip: $${tip.toFixed(2)} | Total: $${total.toFixed(2)}`;
   }

   Expected result

   Calling update() shows the current tip and total based on the input values.

   Show hint
8. 4

   Listen for input events

   Attach an input listener to both inputs that calls update(). The input event fires on every keystroke, so the result updates live as the user types.

   CodeCopy

   billEl.addEventListener("input", update);
   tipEl.addEventListener("input", update);
   update(); // run once on load

   Expected result

   The result updates immediately when either input changes, and on page load.

Related Resources