Vanilla JavaScript Projects

Project 56, Website sections

Pricing Table with Toggle

The pricing section every SaaS and service site needs. Prices update as you switch billing, currency and team size, formatted properly for each currency.

$29
Main API
Intl.NumberFormat
Pattern
Switch and live totals
Dependencies
None
Your browser
Checking

Pick a plan

Flip between monthly and yearly, change the currency and drag the team size slider.

5 people

How it works

  1. Keep prices in one placePlans live in one small array with a base price in dollars. Everything on screen is worked out from it.
  2. Convert and discountThe price is multiplied by the exchange rate and by 0.8 for yearly billing, then by team size for the total.
  3. Format for the currencyIntl.NumberFormat shows the right symbol, separators and decimals for each currency.
const fmt = (v, cur) => new Intl.NumberFormat(undefined, {
  style: "currency", currency: cur
}).format(v);

const perSeat = plan.price * rates[cur] * (yearly ? 0.8 : 1);
const total = perSeat * seats * (yearly ? 12 : 1);
priceEl.textContent = fmt(perSeat, cur);   // $23.20
totalEl.textContent = fmt(total, cur) + " billed yearly";