You Might Also Like
Learn Coding Visually
Learn to code with interactive, live-preview playgrounds — HTML, CSS, JavaScript, React & more.
HTML Playground42 lessons · Click-based · Live preview
CSS PlaygroundLearn CSS with a live editor
JavaScript Playground60 lessons · DOM · Async · Canvas
React PlaygroundLearn React with a live code editor
GSAP PlaygroundLearn GSAP animation interactively
SVG Playground44 lessons · shapes · paths · animation
SCSS Playground45 lessons · Sass modules · tokens
Tailwind PlaygroundLearn Tailwind CSS with a live editor
Bootstrap 5 Playground50 lessons · live previewExpense Split Calculator — Free Equal & Unequal Bill Splitter
Expense Split Calculator · Forms · Plain HTML, CSS & JS · Live preview
What's included
Features
About this UI Snippet
Expense Split Calculator — Equal and Unequal Splits, With Real Validation Math
Splitting a bill evenly is the easy case; the harder, more useful case is when one person had the extra appetizer and everyone needs to agree the numbers actually add up. This calculator handles both — an equal split with a tip and a people count, and an unequal split where each named person gets a custom amount that's validated live against the real total.
Equal mode: total, tip, and people
The total and tip percentage (four presets or a custom field) compute a grand total, which is then divided by the people-stepper count for a live per-person amount — the standard bill-split calculation, recomputed on every input change via a single calculate() function.
Unequal mode: named people with real balance validation
Toggling to unequal split swaps in a list of named people, each with an independently editable amount. The core of this mode is the validation math: var sum = unequalPeople.reduce((s, p) => s + p.amount, 0); var diff = grand - sum; — the actual signed difference between what the named amounts sum to and what the bill (plus tip) really comes to. A near-zero difference (within half a cent, to absorb floating-point rounding) reports balanced; a negative difference means the individual amounts *exceed* the total and reports "Over by $X"; a positive difference reports "Under by $X". This isn't a cosmetic check — it's the exact arithmetic a group needs before actually paying.
Shared totals, mode-specific results
Both modes share the same subtotal/tip/grand-total breakdown at the bottom; only the final result differs — a single per-person figure in equal mode, or the live balance message in unequal mode. Switching modes doesn't lose your total or tip settings, since both live in state independent of mode. Pair this with a tip calculator for a simpler single-purpose version, or a currency converter for splitting a bill across currencies.
Build with AI
Build, Understand, Optimize, and Extend It With AI
Paste this snippet's HTML, CSS, and JS into an AI coding assistant like Claude and ask it to walk through exactly how the unequal-split validation computes diff = grandTotal - sum and why a small tolerance (half a cent) is used instead of a strict equality check against floating-point currency math. It's also useful for reasoning about state design — ask why total and tip are kept independent of which split mode is active, so switching modes never resets values the user already entered. For extensions, ask it to add a "split remaining evenly" button that distributes any unbalanced difference across people who haven't set a custom amount, add per-person percentage-of-total display, or persist named people across sessions with localStorage. Treat the code less like a finished artifact and more like a starting point for a conversation.
Prompt to recreate it
Copy this into your AI assistant of choice to build the effect from scratch, or as a jumping-off point for your own variant:
Build an "expense split calculator" in plain HTML, CSS, and JavaScript with two modes — no libraries.
Requirements:
- A total-amount currency input and a tip-percentage selector (a few preset percentage buttons plus a custom numeric input), which together compute a grand total (total + tip amount) shown in a totals breakdown (subtotal, tip, grand total).
- Equal-split mode (the default): a number-of-people stepper (increment/decrement buttons with a minimum of 1) whose count divides the grand total evenly, displayed live as a per-person amount that recalculates on every relevant input change.
- Unequal-split mode: a toggle that switches to a list of named people, each with their own editable name and individual currency amount, with add/remove controls to grow or shrink the list. Keep the shared total/tip settings unchanged when switching between modes.
- CRITICAL validation logic for unequal mode: sum every person's individual amount, compute the signed difference between that sum and the true grand total (grandTotal - sum), and display a clear status message showing whether the amounts are balanced (within a small floating-point tolerance like half a cent), over the total by a specific dollar amount, or under the total by a specific dollar amount — using the actual computed difference, not a placeholder.
- Give each person in unequal mode a small avatar showing their initials, derived live from their typed name.Want to tighten it up first? Run this prompt through the AI Prompt Studio to score it across 8 quality dimensions, catch anti-patterns, and tune the wording for Claude, ChatGPT, or Gemini before you paste it in.
Step by step
How to Use
- 1Paste HTML, CSS, and JSA $240 bill splits four ways with 15% tip by default.
- 2Enter the total and tipPick a preset percentage or type a custom one.
- 3Adjust the people stepperThe equal per-person amount recomputes live.
- 4Switch to "Unequal split"Named people with individual amounts appear instead.
- 5Edit names and amountsAdd or remove people; each amount is independent.
- 6Watch the validation messageSee exactly how far over or under the total you are.
Real-world uses
Common Use Cases
Got questions?
Frequently Asked Questions
The code sums every named person's individual amount with unequalPeople.reduce((s, p) => s + p.amount, 0), then computes diff = grandTotal - sum. If the absolute difference is under half a cent (to absorb floating-point rounding), it reports "Balanced." A negative diff means the entered amounts add up to more than the real total, reported as "Over by $X"; a positive diff means they fall short, reported as "Under by $X" — the exact signed gap in both cases.
JavaScript floating-point arithmetic on decimal currency values (like 0.1 + 0.2) can produce results that are off by a fraction of a cent even when the numbers are conceptually equal. Checking Math.abs(diff) < 0.005 treats anything within half a cent as balanced, which is below any amount that would actually matter for splitting a real bill, while still catching genuine discrepancies.
No. The total amount and tip percentage are stored independently of which mode is active, so toggling between "Equal split" and "Unequal split" only changes which panel and result are shown — both modes calculate from the same live subtotal, tip, and grand total shown at the bottom.
Yes. "+ Add person" appends a new named row with a default $0 amount, and each row has a remove button. Both re-render the list and immediately recalculate the validation message, so the balance check always reflects the current set of people and amounts.
Keep total, tip percentage, mode, people count, and the unequal-people array all in component state. Derive the grand total, per-person equal amount, and the unequal-mode sum/diff from that state with plain arithmetic (no need to store derived values separately) so every input change automatically recomputes the displayed results.