Intl.DurationFormat — interactive playground

<div class="pg">
    <h1 class="pg-title">⏱️ The Duration Formatter That Only Spoke English</h1>
    <p class="pg-sub">
      Pick a duration, a locale, and a style. On the left: a typical hand-rolled
      <code>formatDuration()</code> helper. On the right: <code>Intl.DurationFormat</code>,
      built into the browser. Switch the locale and watch only one of them stay correct.
    </p>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Pick a duration</div>
      <div class="sliders">
        <div class="field">
          <div class="ctl-label"><span>Hours: <strong id="hLabel">1</strong></span></div>
          <input type="range" id="h" min="0" max="12" value="1" step="1" />
        </div>
        <div class="field">
          <div class="ctl-label"><span>Minutes: <strong id="mLabel">46</strong></span></div>
          <input type="range" id="m" min="0" max="59" value="46" step="1" />
        </div>
        <div class="field">
          <div class="ctl-label"><span>Seconds: <strong id="sLabel">40</strong></span></div>
          <input type="range" id="s" min="0" max="59" value="40" step="1" />
        </div>
      </div>
      <div class="presets" style="margin-top:14px">
        <button class="btn sm" data-preset="1,46,40">1h 46m 40s</button>
        <button class="btn sm" data-preset="0,1,0">Exactly 1 minute</button>
        <button class="btn sm" data-preset="0,0,30">30 seconds</button>
        <button class="btn sm" data-preset="2,0,0">2 hours flat</button>
      </div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> Locale &amp; style</div>
      <div class="field">
        <div class="ctl-label"><span>Locale</span></div>
        <div class="seg" id="localeSeg" role="group" aria-label="Locale">
          <button type="button" aria-pressed="true" data-locale="en">en (English)</button>
          <button type="button" aria-pressed="false" data-locale="fr-FR">fr-FR (French)</button>
          <button type="button" aria-pressed="false" data-locale="ar-EG">ar-EG (Arabic)</button>
          <button type="button" aria-pressed="false" data-locale="ja-JP">ja-JP (Japanese)</button>
        </div>
      </div>
      <div class="field" style="margin-top:12px">
        <div class="ctl-label"><span>Style (<code>Intl.DurationFormat</code> only)</span></div>
        <div class="seg" id="styleSeg" role="group" aria-label="Style">
          <button type="button" aria-pressed="false" data-style="long">long</button>
          <button type="button" aria-pressed="true" data-style="short">short</button>
          <button type="button" aria-pressed="false" data-style="narrow">narrow</button>
          <button type="button" aria-pressed="false" data-style="digital">digital</button>
        </div>
      </div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">3</span> Result</div>
      <div class="compare">
        <div class="card bad">
          <h3>Hand-rolled formatDuration()</h3>
          <div class="readout" id="naiveOut">—</div>
        </div>
        <div class="card good">
          <h3>Intl.DurationFormat</h3>
          <div class="readout" id="nativeOut">—</div>
        </div>
      </div>
      <div class="status" id="status" style="margin-top:12px">
        <span class="dot good" id="dot"></span><span id="statusText">Both sides use the same hours/minutes/seconds.</span>
      </div>
      <p class="hint" id="hint">
        The left card is plain JS string-building — it always talks in English. The right card
        asks the engine for this locale's own words, order, and plural rules.
      </p>
      <div class="parts" id="parts"></div>
    </div>
  </div>

preview

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