Intl.NumberFormat vs. hand-rolled formatMoney()

<div class="pg">
    <h1 class="pg-title">🎮 Intl.NumberFormat vs. hand-rolled formatMoney()</h1>
    <p class="pg-sub">
      Same amount, same currency, two formatters. Change the locale, the decimal
      places, or try a preset bug — <code>Intl.NumberFormat</code> adapts; the
      regex-based formatter doesn't know it's wrong.
    </p>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Controls</div>
      <div class="field-row">
        <div class="field">
          Amount
          <input type="number" id="amount" value="1234.5" step="any" />
        </div>
        <div class="field">
          Decimal places
          <input type="number" id="decimals" value="2" min="0" max="6" />
        </div>
        <div class="field">
          Locale
          <select id="locale">
            <option value="en-US">en-US</option>
            <option value="de-DE">de-DE</option>
            <option value="fr-FR">fr-FR</option>
          </select>
        </div>
        <div class="field">
          Currency
          <select id="currency">
            <option value="USD">USD</option>
            <option value="EUR">EUR</option>
            <option value="GBP">GBP</option>
          </select>
        </div>
      </div>
      <div class="presets" style="margin-top:10px">
        <button class="btn sm" data-preset="basic">Basic price</button>
        <button class="btn sm" data-preset="refund">Refund (negative)</button>
        <button class="btn sm" data-preset="unitcost">Per-unit cost (4 decimals)</button>
        <button class="btn sm" data-preset="german">German customer, same price</button>
      </div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> Result</div>
      <div class="compare">
        <div class="outbox" id="naiveBox">
          <div class="who">Hand-rolled formatMoney()</div>
          <div class="val" id="naiveOut">$1,234.50</div>
          <span class="tag" id="naiveTag">looks fine</span>
        </div>
        <div class="outbox good" id="intlBox">
          <div class="who">Intl.NumberFormat</div>
          <div class="val" id="intlOut">$1,234.50</div>
          <span class="tag">correct for this locale</span>
        </div>
      </div>
      <div class="status" id="statusRow" style="margin-top:12px">
        <span class="dot good" id="dot"></span><span id="statusText">Both formatters agree.</span>
      </div>
      <p class="hint" id="hint">
        The regex formatter always uses "$" and comma/period the US way, no matter which
        locale you pick — it can't do otherwise, because it never read the locale in the
        first place.
      </p>
    </div>
  </div>

preview

Edits run in a sandbox in your browser — nothing is saved and nothing leaves the page.