Set algebra — interactive playground

<div class="pg">
    <h1 class="pg-title">🎮 Set algebra, live</h1>
    <p class="pg-sub">
      Edit Set A and Set B below and watch <code>.union()</code>, <code>.intersection()</code>,
      <code>.difference()</code>, and <code>.symmetricDifference()</code> update instantly —
      plus the three boolean checks, <code>.isSubsetOf()</code>, <code>.isSupersetOf()</code>,
      and <code>.isDisjointFrom()</code>.
    </p>

<div class="banner warn" id="banner">
      Your browser doesn't have the native ES2025 Set methods yet, so this demo is computing the
      same results by hand (the old <code>filter</code> + <code>has</code> way) just to keep working.
      The results below are correct either way.
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">1</span> Edit the two sets</div>
      <div class="setline">
        <div class="field">
          <label class="label" for="setA">Set A (comma-separated)</label>
          <input type="text" id="setA" value="1, 2, 3" autocomplete="off" spellcheck="false" />
          <div class="parsed" id="parsedA" aria-live="polite"></div>
        </div>
        <div class="field">
          <label class="label" for="setB">Set B (comma-separated)</label>
          <input type="text" id="setB" value="3, 4, 5" autocomplete="off" spellcheck="false" />
          <div class="parsed" id="parsedB" aria-live="polite"></div>
        </div>
      </div>
      <div class="btn-row" style="margin-top:14px">
        <button class="btn ghost" id="reset">Reset</button>
      </div>
      <p class="hint">Type any comma-separated values — numbers or words. Duplicates and blanks are ignored, same as <code>new Set(...)</code>.</p>
      <div class="presets" style="margin-top:10px">
        <button class="btn sm" data-preset="numbers">Preset: numbers (from the intro)</button>
        <button class="btn sm" data-preset="tags">Preset: tag diff (before/after)</button>
      </div>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">2</span> The four set-algebra methods</div>
      <pre class="code" id="resultCode"></pre>
      <div class="status good" id="status" style="margin-top:12px">
        <span class="dot good" id="dot"></span><span id="statusText">Ready.</span>
      </div>
      <p class="hint">
        <code>union</code> merges both, <code>intersection</code> keeps only what's shared,
        <code>difference</code> keeps what's in one but not the other, and
        <code>symmetricDifference</code> keeps what's in exactly one. None of these mutate A or B —
        every line above returns a brand-new <code>Set</code>.
      </p>
    </div>

<div class="panel">
      <div class="panel-label"><span class="n">3</span> The three yes/no checks</div>
      <div class="predicates">
        <div class="predicate-row">
          <span class="q"><code>A.isSubsetOf(B)</code> — is every element of A also in B?</span>
          <span class="pill" id="pillSubset">—</span>
        </div>
        <div class="predicate-row">
          <span class="q"><code>A.isSupersetOf(B)</code> — does A contain every element of B?</span>
          <span class="pill" id="pillSuperset">—</span>
        </div>
        <div class="predicate-row">
          <span class="q"><code>A.isDisjointFrom(B)</code> — do A and B share nothing at all?</span>
          <span class="pill" id="pillDisjoint">—</span>
        </div>
      </div>
      <p class="hint" id="predicateHint">These three always return a plain <code>true</code> or <code>false</code> — never a new Set.</p>
    </div>
  </div>

preview

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