Tip Calculator JavaScript Example

Complete HTML

<form id="tip-form"> <label>Bill <input id="bill" type="number" min="0.01" step="0.01" required></label> <label>Tip % <input id="rate" type="number" min="0" step="0.1" required></label> <label>People <input id="people" type="number" min="1" step="1" value="1" required></label> <button>Calculate</button> </form> <output id="result" aria-live="polite"></output>

JavaScript with validation

const form = document.querySelector('#tip-form'); const result = document.querySelector('#result'); form.addEventListener('submit', (event) => { event.preventDefault(); const bill = Number(document.querySelector('#bill').value); const rate = Number(document.querySelector('#rate').value); const people = Number(document.querySelector('#people').value); if (!Number.isFinite(bill) || bill <= 0 || !Number.isFinite(rate) || rate < 0 || !Number.isInteger(people) || people < 1) { result.textContent = 'Check the inputs.'; return; } const tip = bill * rate / 100; const total = bill + tip; result.textContent = `Tip: ${tip.toFixed(2)} | Total: ${total.toFixed(2)} | Each: ${(total / people).toFixed(2)}`; });

Why explicit number conversion matters

Input values are strings. Addition can concatenate strings, so convert with Number() before arithmetic. Number.isFinite() rejects missing or invalid conversions, while Number.isInteger() keeps the people count whole.

Rounding and money

toFixed(2) is appropriate for display, but JavaScript numbers use binary floating point. For payments or accounting records, calculate in integer minor units or use a carefully tested decimal-money library. This example is a client-side learning project, not a payment system.

Accessible behavior

Labels connect inputs to their purpose, the submit event works with mouse or keyboard, and aria-live="polite" announces the updated result. The explanatory content remains available without JavaScript.

Next step

Add optional tax and service-charge inputs only after defining which amount forms the tip base. The working percentage to tip calculator demonstrates that distinction.