Filters

This is the code that powers the page. It uses bitty for the basic wiring.

HTML

<bitty-1-1 data-send="init">
  <div class="filter-line">
    <label>Find animals with the letter:
      <span data-receive="letter">-</span><br />
    <input type="range" value="0" 
      min="0" max="26" step="1" 
      data-send="letter" />
    </label>
  </div>
  <div data-receive="init"></div>
</bitty-1-1>

<script src="/components/bitty-1.1.0-rc1.min.js" type="module"></script>

JavaScript

// `animals` is just an array. it's not shown becuse
// there are 207 items in it.

class State {
  setLetter(index) {
    if (index === 0) {
      this.letter = "-";
    } else {
      this.letter = String.fromCharCode(index + 96);
    }
  }
}

const s = new State();

window.BittyClass = class {
  init(_event, el) {
    animals.forEach((animal) => {
      const aEl = document.createElement("div");
      aEl.dataset.animal = animal;
      aEl.dataset.receive = "filter";
      aEl.innerHTML = animal;
      el.appendChild(aEl);
    });
  }

  filter(_event, el) {
    const letters = el.dataset.animal.split("");
    if (s.letter === "-") {
      el.classList.remove("in");
      el.classList.remove("out");
    } else if (letters.includes(s.letter)) {
      el.classList.add("in");
      el.classList.remove("out");
    } else {
      el.classList.add("out");
      el.classList.remove("in");
    }
  }

  letter(event, el) {
    const index = parseInt(event.target.value, 10);
    s.setLetter(index);
    el.innerHTML = s.letter;
    this.api.forward(event, "filter");
  }
};

CSS

[data-receive=init] {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

[data-receive=filter] {
  width: 10rem;
}

.filter-line {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.in {
  font-weight: 900;
}

input {
  width: 19rem;
}

.out {
  text-decoration: line-through;
  color: var(--default-faded);
}