Multi-Resource Usage Billing Simulator — Free HTML CSS JS Snippet

Real usage-based products rarely bill on a single dimension — infrastructure tools charge separately for compute, storage, and bandwidth, each with its own free allowance and its own overage rate. This calculator models that directly: three independent sliders, each representing a different resource with its own included-free tier and per-unit rate, summing into one live estimated monthly bill alongside a flat base platform fee.

Each resource is a self-contained object, not three parallel variable sets

Rather than tracking three separate rate variables, three included variables, and three slider references as loose globals, resources is built once with .map() into an array of objects — each bundling its own el, rate, included, slider, valueEl, and costEl. This means adding a fourth resource is purely a matter of adding a fourth .mru-resource block to the HTML with matching data-rate/data-included attributes and IDs; the .map() construction and every function that follows already operates generically over "however many resources exist."

The included allowance is subtracted before the rate is ever applied

costForResource() computes billableUnits = Math.max(0, usage - resource.included) before multiplying by the rate — so a resource never bills for its free tier, and the Math.max(0, ...) guard means a usage value at or below the included allowance always produces exactly $0 for that resource, never a negative charge.

One `recalc()` re-sums everything, every single time

Just like avoiding a drifting running total in a seat calculator, recalc() starts fresh from BASE_FEE on every call and adds each resource's freshly computed cost in a loop — nothing is incrementally adjusted. This guarantees the grand total displayed always exactly equals the sum of what's currently shown on each resource's own cost line, since both are computed from the same pass over the same slider values.

Rate and included-allowance data live on the markup, not hardcoded in JavaScript

Each .mru-resource div carries its own data-rate and data-included attributes, read once when resources is built. This keeps the pricing model's actual numbers visible directly in the HTML rather than buried in a JavaScript array literal disconnected from the resource it describes — useful both for maintainability and for anyone skimming the page source to understand the pricing shown.

`toLocaleString` handles two different formatting jobs

formatUnits() rounds and comma-formats a raw usage number (e.g. API request counts, which are always whole numbers), while formatMoney() uses toLocaleString with explicit minimumFractionDigits/maximumFractionDigits set to 2, guaranteeing every dollar figure always shows exactly two decimal places even when the underlying float happens to compute to a whole number.

Customizing it

Add a fourth resource (e.g. "Compute hours") by copying an .mru-resource block with its own data-rate/data-included values and a matching slider/value/cost element ID sequence — the .map()-built resources array and recalc() both already generalize to any number of resource blocks found on the page. Adjust BASE_FEE to match your actual platform's flat monthly fee, or set it to 0 for a purely usage-based model with no base charge.