JavaScript closures — interactive playground

<div class="pg">
    <h1 class="pg-title">🎮 JavaScript closures</h1>
    <p class="pg-sub">
      Two live demos: the classic loop bug that closures cause, and the private
      state that closures make possible. Flip the switch, click the buttons.
    </p>

<div class="seg" id="demoSwitch" role="tablist" aria-label="Choose a demo">
      <button type="button" aria-pressed="true" data-demo="loop">Loop bug</button>
      <button type="button" aria-pressed="false" data-demo="counter">Private counter</button>
    </div>

<div class="demo-block show" id="demo-loop">
      <div class="panel">
        <div class="panel-label"><span class="n">1</span> Controls</div>
        <label class="toggle">
          <input type="checkbox" id="useLet" checked /><span class="switch"></span>
          <span>Use <code>let</code> (checked) instead of <code>var</code> (unchecked)</span>
        </label>
        <div class="btn-row" style="margin-top:14px">
          <button class="btn primary" id="build">Build 5 buttons</button>
          <button class="btn ghost" id="resetLoop">Reset</button>
        </div>
      </div>

<div class="panel">
        <div class="panel-label"><span class="n">2</span> Click any button — see what it thinks its own number is</div>
        <div class="btn-grid" id="buttonStage"></div>
        <div class="status" id="loopStatus" style="margin-top:14px">
          <span class="dot info" id="loopDot"></span>
          <span id="loopStatusText">Build the buttons, then click one.</span>
        </div>
        <p class="hint">
          Every button's click handler is a closure created inside the same loop.
          With <code>var</code>, all five handlers share one <code>i</code> — by the
          time you click, the loop is long finished, so every handler reports the
          same, final value. With <code>let</code>, each iteration gets its own
          binding, so each button correctly remembers its own number.
        </p>
      </div>
    </div>

<div class="demo-block" id="demo-counter">
      <div class="panel">
        <div class="panel-label"><span class="n">1</span> Two independent counters, each built from the same factory function</div>
        <div class="counter-row">
          <div class="counter-card">
            <div class="label">Counter A</div>
            <span class="big-num" id="valA">0</span>
            <div class="btn-row" style="justify-content:center">
              <button class="btn primary sm" data-counter="A" data-op="inc">+1</button>
              <button class="btn ghost sm" data-counter="A" data-op="dec">-1</button>
            </div>
          </div>
          <div class="counter-card">
            <div class="label">Counter B</div>
            <span class="big-num" id="valB">0</span>
            <div class="btn-row" style="justify-content:center">
              <button class="btn primary sm" data-counter="B" data-op="inc">+1</button>
              <button class="btn ghost sm" data-counter="B" data-op="dec">-1</button>
            </div>
          </div>
        </div>
        <div class="status" style="margin-top:14px">
          <span class="dot good" id="counterDot"></span>
          <span id="counterStatusText">Each card has its own hidden `count` variable.</span>
        </div>
        <p class="hint">
          <code>counterA</code> and <code>counterB</code> came from two separate calls
          to the same <code>makeCounter()</code> factory. Each call created a brand-new
          <code>count</code> variable that only its own closure can see — clicking A
          never touches B's state, and there is no public <code>.count</code> property
          on either one to read or overwrite from outside.
        </p>
      </div>
    </div>
  </div>

preview

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