<div id="container">
  <div>
    <span>Set one</span>
    <ul id="set-one">
      <li>A</li>
      <li>B</li>
      <li>C</li>
    </ul>
  </div>
  <div>
    <span>Set two</span>
    <ul id="set-two">
      <li>C</li>
      <li>D</li>
      <li>E</li>
    </ul>
  </div>
  <div>
    <span>Set three</span>
    <ul id="set-three">
      <li>F</li>
      <li>G</li>
      <li>H</li>
    </ul>
  </div>
</div>

<span>Disjoint from:</span>

<ul>
  <li id="1disjointFrom2">Set one is disjoint from set two</li>
  <li id="2disjointFrom3">Set two is disjoint from set three</li>
  <li id="3disjointFrom1">Set three is disjoint from set one</li>
</ul>

body {
  font-family: sans-serif;
}
#container {
  display: flex;
  gap: 1rem;
  justify-content: space-evenly;
}

li {
  font-weight: bold;
}

#container ul {
  border-radius: 10px;
  display: flex;
  gap: 2rem;
  padding: 1rem;
  justify-content: space-evenly;
  list-style: none;
  border: 1px solid black;
}

#set-one {
  background-color: paleturquoise;
}
#set-two {
  background-color: lightsteelblue;
}

#set-three {
  background-color: lavender;
}

const listOneItems = document.querySelectorAll("#set-one li");
const listTwoItems = document.querySelectorAll("#set-two li");
const listThreeItems = document.querySelectorAll("#set-three li");

// Create sets
const set1 = new Set();
const set2 = new Set();
const set3 = new Set();

// Add list items to each set
listOneItems.forEach((item) => {
  set1.add(item.textContent.trim());
});
listTwoItems.forEach((item) => {
  set2.add(item.textContent.trim());
});
listThreeItems.forEach((item) => {
  set3.add(item.textContent.trim());
});

// Assertions
const oneDisjointTwo = document.getElementById("1disjointFrom2");
const twoDisjointThree = document.getElementById("2disjointFrom3");
const threeDisjointOne = document.getElementById("3disjointFrom1");

if (set1.isDisjointFrom(set2)) {
  oneDisjointTwo.textContent += " [TRUE]";
} else {
  oneDisjointTwo.textContent += " [FALSE]";
}

if (set2.isDisjointFrom(set3)) {
  twoDisjointThree.textContent += " [TRUE]";
} else {
  twoDisjointThree.textContent += " [FALSE]";
}

if (set3.isDisjointFrom(set1)) {
  threeDisjointOne.textContent += " [TRUE]";
} else {
  threeDisjointOne.textContent += " [FALSE]";
}