Date vs Temporal — the mutation trap

<div class="pg">
    <h1 class="pg-title">🎮 The Mutation Trap: <code>Date</code> vs <code>Temporal</code></h1>
    <p class="pg-sub">
      Same reminder function — <code>nextOccurrence(event, -1)</code> — run twice: once
      backed by legacy <code>Date</code>, once by <code>Temporal.PlainDate</code>.
      Watch what happens to the <strong>event's own date</strong>, which no one asked to change.
    </p>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Pick the API powering the reminder helper</div>
      <div class="seg" id="apiSeg" role="group" aria-label="API">
        <button data-mode="date" aria-pressed="true">Legacy Date</button>
        <button data-mode="temporal" aria-pressed="false">Temporal.PlainDate</button>
      </div>
      <p class="hint" id="engineNote">Using native <code>Date</code> — built into every JS engine since 1995.</p>

<div class="btn-row" style="margin-top:14px">
        <button class="btn primary" id="run">Call reminderFor(event, -1)</button>
        <button class="btn ghost" id="reset">Reset event</button>
      </div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> Result</div>
      <div class="cards">
        <div class="card" id="eventCard">
          <h3>Event's own date</h3>
          <div class="val" id="eventVal">2026-09-14</div>
          <div class="sub">read by unrelated code — the events list, a display card</div>
        </div>
        <div class="card" id="reminderCard">
          <h3>Computed reminder</h3>
          <div class="val" id="reminderVal">—</div>
          <div class="sub">what <code>reminderFor()</code> handed back</div>
        </div>
      </div>

<div class="status" id="statusBox" style="margin-top:14px">
        <span class="dot info" id="dot"></span>
        <span id="statusText">Ready. Click "Call reminderFor" and watch the event card.</span>
      </div>
      <p class="hint" id="hint">
        The reminder helper only asked for a reminder date. Whether the event's own date
        survives that call depends entirely on which API is under it.
      </p>

preview

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