webdevpuneet.com

Related Snippets

67 in Tools & Calculators category
55–60 of 60

Split Payment Calculator

Calculator

Stopwatch

Pomodoro Timer

BMI Calculator

Mortgage Calculator

Split Payment Calculator — Bill Splitter HTML CSS JS

Split Payment Calculator · Tools · Plain HTML, CSS & JS · Live preview

CategoryTools & Calculators
TagsE-Commerce

Copy & paste

Source Code

<div class="spc-card">
  <h3>Split the bill</h3>

  <div class="spc-field">
    <label for="spcTotal">Bill total</label>
    <div class="spc-input-wrap">
      <span>$</span>
      <input type="number" id="spcTotal" value="186.40" min="0" step="0.01">
    </div>
  </div>

  <div class="spc-field">
    <label>Tip</label>
    <div class="spc-tip-row">
      <button type="button" class="spc-tip-btn" data-tip="0">0%</button>
      <button type="button" class="spc-tip-btn" data-tip="15">15%</button>
      <button type="button" class="spc-tip-btn active" data-tip="18">18%</button>
      <button type="button" class="spc-tip-btn" data-tip="20">20%</button>
      <div class="spc-input-wrap spc-tip-custom">
        <input type="number" id="spcTipCustom" placeholder="Custom %" min="0">
      </div>
    </div>
  </div>

  <div class="spc-field">
    <label>Split between</label>
    <div class="spc-stepper">
      <button type="button" id="spcMinus" aria-label="Fewer people">−</button>
      <span id="spcPeople">4</span>
      <button type="button" id="spcPlus" aria-label="More people">+</button>
    </div>
  </div>

  <label class="spc-uneven-toggle">
    <input type="checkbox" id="spcUneven">
    Uneven split (set each person's share manually)
  </label>

  <div class="spc-uneven-list" id="spcUnevenList" hidden></div>

  <div class="spc-totals">
    <div class="spc-totals-row"><span>Subtotal</span><span id="spcSubtotalOut">$0.00</span></div>
    <div class="spc-totals-row"><span>Tip</span><span id="spcTipOut">$0.00</span></div>
    <div class="spc-totals-row spc-grand"><span>Total</span><span id="spcGrandOut">$0.00</span></div>
  </div>

  <div class="spc-per-person" id="spcPerPerson"></div>
</div>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month, 7 days free), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Tip presets with custom override
Four quick percentages plus a custom field, kept mutually exclusive so the UI never shows a contradictory selected state.
Bounded people stepper
Clamped between 2 and 20 people, with the relevant button disabled at each boundary.
Uneven split with live validation
Per-person percentage inputs default to an even split and are validated to sum to exactly 100% before showing dollar amounts.
Specific, actionable error messages
An invalid share total shows exactly what it currently sums to, not just a generic "invalid" message.
Single calculate() function
Every input change re-runs one calculation function, keeping subtotal, tip, total, and per-person output always in sync.
Tip included in per-person amounts
Uneven-split percentages apply to the grand total (bill + tip), not just the pre-tip subtotal, matching real-world bill splitting.
Auto-rebuilding share inputs
Changing the headcount while uneven mode is active regenerates the right number of percentage fields automatically.
Currency-formatted output throughout
Every dollar amount displays with toFixed(2), reading like real currency instead of a raw floating-point number.

About this UI Snippet

Split Payment Calculator — Tip Presets, People Stepper & Validated Uneven Split

Screenshot of the Split Payment Calculator snippet rendered live

Splitting a restaurant bill fairly is simple math that's annoying to do by hand, especially with a tip and an odd number of people — which is exactly why every group-dinner app ships some version of this calculator. This snippet builds a complete bill splitter: quick tip presets with a custom override, a people stepper, an even split by default, and an optional uneven-split mode that validates percentages sum to 100% before showing per-person amounts.

Tip presets that share state with a custom field

Four preset buttons (0/15/18/20%) and a custom number input all write to the same tipPct variable. Clicking a preset clears the custom field and highlights the matching button; typing in the custom field clears every preset's active state instead — so the UI never shows a highlighted preset that disagrees with a manually typed percentage, a small consistency detail that's easy to get wrong when two inputs can set the same value.

A people stepper with sane bounds

The stepper clamps between 2 and 20 people, disabling the relevant button at each boundary rather than letting the count go to 1 (at which point "splitting" stops meaning anything) or to an unreasonably large number. Every increment or decrement immediately recalculates the per-person amount and, if uneven mode is active, regenerates the share-percentage inputs for the new headcount.

Uneven split with real validation

Toggling "Uneven split" reveals one percentage input per person, defaulting to an even 100 / people split that's then free to be adjusted. calculate() sums every entered percentage and refuses to show per-person dollar amounts until that sum rounds to exactly 100% — instead surfacing a specific error ("Shares add up to 92% — should total 100%") so the user knows exactly how far off they are, rather than silently showing wrong numbers or blocking the whole calculator.

One calculate function, every output

Every visible number — subtotal, tip, grand total, and the per-person breakdown in both modes — flows through a single calculate() call triggered by every relevant input. There's no per-field update logic to keep in sync; changing the bill total, the tip, the people count, or any individual share simply re-runs the same function against the current state.

Rounding, the part most bill splitters get wrong

Dividing a grand total evenly across several people in floating-point arithmetic can leave the displayed shares off by a cent from the actual total — three people splitting $10.00 each get $3.33, and $3.33 × 3 is $9.99, not $10.00. This demo accepts that tiny float-formatting reality for clarity; a finance-grade version should round every share with toFixed(2), sum the rounded values, and silently add or subtract the few-cent remainder to the largest share so the displayed numbers always reconcile exactly with the bill.

Step by step

How to Use

  1. 1
    Paste HTML, CSS, and JSA bill-splitting card renders with a $186.40 example total, an 18% tip selected, and a 4-person even split.
  2. 2
    Adjust the bill total or tipEdit the total field or pick a different tip preset (or type a custom percentage) — the subtotal, tip, and total update instantly.
  3. 3
    Change the headcountUse the +/− stepper to change how many people are splitting; the per-person amount recalculates immediately.
  4. 4
    Turn on uneven splitCheck "Uneven split" to reveal a percentage input per person, defaulting to an even share.
  5. 5
    Adjust individual sharesChange any person's percentage — if the total doesn't sum to 100%, an error shows exactly how far off it is instead of a wrong dollar amount.
  6. 6
    Fix the shares to see amountsOnce the percentages sum to 100%, each person's exact dollar share (including their portion of the tip) displays.

Real-world uses

Common Use Cases

Restaurant and group dining apps
The classic "split the check" feature for any dining, delivery, or expense-sharing app.
Roommate and shared-expense tools
Use uneven split mode for rent or utility bills where shares aren't meant to be equal.
Trip and event cost-sharing
Split a shared Airbnb, car rental, or group-event cost among attendees with flexible per-person shares.
Expense-tracking and budgeting apps
Pair with a budget tracker card to log a split bill against a category.
Payment app "request money" flows
Calculate exact amounts to request from each person before generating individual payment requests.
Learning validated multi-input forms
A clear example of cross-field validation (percentages summing to 100%) — compare with a tip calculator for the single-payer case.

Got questions?

Frequently Asked Questions

Floating-point per-person division can leave the sum off by a cent due to rounding; compute every person's amount with toFixed(2), sum those rounded values, and add or subtract the few-cent difference to/from the largest share so the displayed amounts reconcile exactly with the grand total.

Add a toggle between "percentage" and "dollar amount" modes for the uneven-split inputs; in dollar mode, validate that the entered amounts sum to the grand total (with the same actionable error message pattern) instead of validating percentages summing to 100%.

Replace the hardcoded "$" in the input wrapper and output strings with a currency symbol from a selected locale, and use toLocaleString(locale, { style: 'currency', currency }) instead of a manual "$" + toFixed(2) concatenation for correct formatting per currency.

Add a button that computes the tip percentage needed to make the grand total a round number (Math.ceil(total) - total, converted to a percentage of the subtotal) and calls setTip() with that computed value.

In React, keep total, tipPct, people, and an array of share percentages in useState and derive every output with useMemo; in Vue, use ref()/computed(); in Angular, use component fields with getters. The 100%-sum validation logic ports directly into each framework's reactive model.