matchMedia — watch queries change live

<div class="pg">
    <h1 class="pg-title">🎮 matchMedia, watched live</h1>
    <p class="pg-sub">
      <code>window.matchMedia(query)</code> gives you a live object with a <code>change</code>
      event — it fires once, exactly when the query's answer flips. Resize this browser
      window and flip your OS dark-mode / reduced-motion settings to see it react in real time.
    </p>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Live dashboard</div>
      <div class="rows" id="dashboard"></div>
      <p class="hint" id="dashHint">
        Green = currently matches. Drag your browser window's edge to flip the width rows.
        Toggle dark mode or "reduce motion" in your OS settings to flip the others —
        no reload required.
      </p>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> resize vs. matchMedia: the event race</div>
      <div class="race-grid">
        <div class="race-card">
          <span class="race-label">❌ window <code>resize</code> events</span>
          <span class="big-num" id="resizeCount">0</span>
          <span class="muted">fires on every pixel of movement</span>
        </div>
        <div class="race-card">
          <span class="race-label">✅ matchMedia <code>change</code> events</span>
          <span class="big-num" id="matchCount">0</span>
          <span class="muted">fires only when a breakpoint actually flips</span>
        </div>
      </div>
      <div class="btn-row" style="margin-top:14px">
        <button class="btn ghost" id="resetRace">Reset counters</button>
      </div>
      <p class="hint">
        Same physical motion, same drag — count these while you slowly resize the window
        past 600px or 900px. The left number climbs continuously. The right number only
        moves when a row above actually changes color.
      </p>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">3</span> Test your own query</div>
      <div class="tester-row">
        <input type="text" id="customQuery" placeholder="(min-width: 1200px)" value="(min-width: 1200px)" />
        <button class="btn primary" id="testQuery">Watch it</button>
      </div>
      <div class="presets" style="margin-top:12px">
        <button class="btn sm" data-q="(orientation: landscape)">(orientation: landscape)</button>
        <button class="btn sm" data-q="(hover: hover) and (pointer: fine)">(hover: hover) and (pointer: fine)</button>
        <button class="btn sm" data-q="(prefers-contrast: more)">(prefers-contrast: more)</button>
      </div>
      <div class="status" id="testerStatus" style="margin-top:14px">
        <span class="dot info" id="testerDot"></span><span id="testerText">Enter a query and click "Watch it".</span>
      </div>
      <div class="log" id="log" style="margin-top:10px; max-height: 140px; overflow-y: auto;"></div>
      <p class="hint">Every "watch it" click subscribes fresh — the log below timestamps each change event as it fires.</p>
    </div>
  </div>

preview

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