What you will build
A tip calculator needs three inputs: the bill before the tip, a tip percentage, and the number of people paying. It then shows the tip, the total, and each person’s share. The interesting part is splitting a total that does not divide evenly into whole cents. This version gives any leftover cents to the first people in the list, so the shares always add up to the displayed total.
You need a desktop browser with a JavaScript console and support for const, let, addEventListener, and Intl.NumberFormat. No package manager, library, or server is required. Open a blank browser tab, such as about:blank, then open its developer tools and select the Console. The controls will appear on that page when you run the code. Some browsers warn before allowing code to be pasted into the console; only run code you understand.
Create the calculator
Paste the following JavaScript into the console and run it. It creates a form, reads its values when you select Calculate, and writes the result below the button. The example uses US dollars; change the currency setting if your project uses another currency.
const app = document.createElement('main'); const heading = document.createElement('h1'); heading.textContent = 'Split a bill'; app.append(heading); const form = document.createElement('form'); function addField(labelText, type, value) { const label = document.createElement('label'); label.textContent = labelText + ' '; const input = document.createElement('input'); input.type = type; input.value = value; input.required = true; label.append(input); form.append(label, document.createElement('br')); return input; } const bill = addField('Bill amount', 'text', '47.50'); bill.inputMode = 'decimal'; const tip = addField('Tip percent', 'text', '18'); tip.inputMode = 'decimal'; const people = addField('Number of people', 'number', '3'); people.min = '1'; people.max = '100'; people.step = '1'; const button = document.createElement('button'); button.type = 'submit'; button.textContent = 'Calculate'; form.append(button); const result = document.createElement('p'); result.setAttribute('aria-live', 'polite'); app.append(form, result); document.body.append(app); const money = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }); function toCents(text) { if (!/^(0|[1-9]\d*)(\.\d{1,2})?$/.test(text)) return null; const [whole, fraction = ''] = text.split('.'); return Number(whole) * 100 + Number(fraction.padEnd(2, '0')); } form.addEventListener('submit', function (event) { event.preventDefault(); const billCents = toCents(bill.value.trim()); const percent = Number(tip.value.trim()); const count = Number(people.value); if (billCents === null || billCents > 100000000 || !/^(0|[1-9]\d*)(\.\d{1,2})?$/.test(tip.value.trim()) || percent > 100 || !Number.isInteger(count) || count < 1 || count > 100) { result.textContent = 'Enter a bill from 0 to 1000000 with at most two decimal places, a tip from 0 to 100, and 1 to 100 people.'; return; } const tipCents = Math.round(billCents * percent / 100); const totalCents = billCents + tipCents; const base = Math.floor(totalCents / count); const extra = totalCents % count; const shares = Array.from({ length: count }, function (_, index) { return money.format((base + (index < extra ? 1 : 0)) / 100); }); result.textContent = 'Tip: ' + money.format(tipCents / 100) + '. Total: ' + money.format(totalCents / 100) + '. Shares: ' + shares.join(', ') + '.'; });
Why calculate in cents?
The bill is converted to an integer number of cents before the tip is added. This makes the final split a whole-number problem: divide the total cents by the number of people, then distribute the remainder one cent at a time. Without that step, rounding every person’s fractional share independently could leave the group a cent short or over.
A percentage can still produce part of a cent, so the calculator rounds the tip to the nearest cent once, before splitting the total. That is a project rule rather than the only possible tipping convention. Tell users which rule you chose if you adapt the calculator for real use.
Test the inputs and the split
Start with the values already in the form: a 47.50 bill, an 18 percent tip, and three people. The tip should be 8.55 and the total should be 56.05. The shares should be 18.69, 18.68, and 18.68. Add those shares to confirm they equal the total. Next try a 10.00 bill, a 15 percent tip, and three people: the 11.50 total should split into 3.84, 3.83, and 3.83.
Also try one person, a zero percent tip, a blank field, more than two decimal places in the bill, and zero people. Valid inputs should produce shares; invalid inputs should show a message instead of a misleading calculation. If nothing appears, check the console for a typing error and run the code again in a fresh blank tab. As a next improvement, give each person a name and display the shares on separate lines so the extra-cent assignment is easier to see.
