import React, { useState } from "react"; function round2(num) { return Math.round(num * 100) / 100; } export default function App() { const [bill, setBill] = useState(100); const [groupSize, setGroupSize] = useState(4); const [tipPct, setTipPct] = useState(15); // For handling custom paid amounts const [customPays, setCustomPays] = useState({}); // { 0: 30, 2: 40 } etc. const minGroup = 2; const maxGroup = 20; // Calculate const tipAmount = round2(bill * (tipPct / 100)); const total = round2(Number(bill) + tipAmount); const basePerPerson = groupSize > 0 ? round2(total / groupSize) : 0; // Compute what each person pays (use custom if filled, else equal) let actualPays = Array(groupSize) .fill(0) .map((_, i) => customPays.hasOwnProperty(i) && customPays[i] !== "" ? Number(customPays[i]) : basePerPerson ); const sumCustom = actualPays.reduce((a, b) => a + Number(b), 0); // If custom totals don't match, show difference const diff = round2(sumCustom - total); function handleCustomPay(i, value) { setCustomPays(prev => ({ ...prev, [i]: value })); } function clearCustomPays() { setCustomPays({}); } // Render return (

Quick Split Bill Calculator

Instantly split your bill, tip, and group payments. Handles custom shares, for effortless group dining.

{/* Bill Inputs */}

Total Bill Amount setBill(e.target.value === "" ? "" : Math.max(0, Number(e.target.value)))} className="w-full border border-border rounded-lg px-3 py-2 text-foreground bg-background text-base focus:outline-none focus:ring-2 focus:ring-primary" placeholder="$0.00" inputMode="decimal" />

Group Size

{ let v = Math.max(minGroup, Math.min(maxGroup, Number(e.target.value))); setGroupSize(v); // If number shrinks, prune customPays setCustomPays(prev => Object.fromEntries( Object.entries(prev).filter(([k]) => Number(k) < v) )); }} className="w-16 text-center border border-border rounded-lg px-2 py-2 text-foreground bg-background text-base" />

Tip Percentage

setTipPct(Number(e.target.value))} className="flex-1" style={{ accentColor: 'var(--ds-accent)' }} />

{tipPct}%

{/* Breakdown */}

Total with Tip ${total.toFixed(2)}

Bill${Number(bill).toFixed(2)}

Tip ({tipPct}%)${tipAmount.toFixed(2)}

Per Person${basePerPerson.toFixed(2)}

{/* Per Person Table */}

Who pays what? (optional override) {Object.keys(customPays).length > 0 && ( )}

{actualPays.map((amt, i) => { const base = basePerPerson; const val = customPays.hasOwnProperty(i) ? customPays[i] : ""; const override = val !== ""; const diff = round2(amt - base); let diffText = ""; let diffClass = ""; if (override && Math.abs(diff) > 0.005) { diffText = diff > 0 ? `+$${Math.abs(diff).toFixed(2)}` : `-$${Math.abs(diff).toFixed(2)}`; diffClass = diff > 0 ? "text-green-600" : "text-red-500"; } return (

{i + 1} handleCustomPay(i, e.target.value)} placeholder={basePerPerson.toFixed(2)} aria-label={`Person ${i + 1} payment`} /> {/* Show override delta */} {override && ( {diffText} )} ${amt.toFixed(2)}

); })}

{/* Over/under notification */} {Object.keys(customPays).length > 0 && (

{diff === 0 ? ( All set! 💸 Payments are exactly correct. ) : diff > 0 ? ( Total overpaid by ${diff.toFixed(2)} – reduce someone's share by this amount. ) : ( Total underpaid by ${Math.abs(diff).toFixed(2)} – distribute or add to someone. )}

)}

Built for effortless group splits — no more awkward calculator passing. 🍽️

); }