vanilla js tag filter

index.html

<p>Filter:
<p>
  <a id="allBtn" href="#all">reset</a>
  <a id="designBtn" href="#design">design</a>
  <a id="illustrationBtn" href="#illustration">illustration</a>
  <a id="motionBtn" href="#motion">motion</a>
  <br />

<div class="wrapper">
  <div class="item" data-tags="design all" data-tags="illustration">design</div>
  <div class="item" data-tags="illustration all">illustration</div>
  <div class="item" data-tags="motion all">motion</div>
  <div class="item" data-tags="design motion all">design motion</div>
  <div class="item" data-tags="illustration design all">illustration design</div>
  <div class="item" data-tags="motion illustration all">motion illustration</div>
  <div class="item" data-tags="design all">design</div>
  <div class="item" data-tags="illustration all">illustration</div>
  <div class="item" data-tags="motion design all">motion design</div>
</div>

script.js

const items = document.getElementsByClassName("item");
//window.location.href.includes('design')

showTag = (event, tag) => {
  // console.log(window.location.hash)
  console.log("showing... ", tag);
  for (let i = 0; i < items.length; i++) {
    if (items[i].dataset.tags.includes(tag)) {
      items[i].style.display = "block";
    } else {
      items[i].style.display = "none";
    }
  }
};

document
  .getElementById("designBtn")
  .addEventListener("click", (event) => showTag(event, "design"));
document
  .getElementById("illustrationBtn")
  .addEventListener("click", (event) => showTag(event, "illustration"));
document
  .getElementById("motionBtn")
  .addEventListener("click", (event) => showTag(event, "motion"));
document
  .getElementById("allBtn")
  .addEventListener("click", (event) => showTag(event, "all"));

style.css

body {
  background: #111;
}
.wrapper {
  display: flex;
  flex-wrap: wrap;
}
p {
  color: white;
}
a {
  color: #ddd;
}
.item {
  font-size: 24px;
  background: white;
  height: auto;
  width: auto;
  margin: 10px;
  border: 1px solid #111;
  padding: 15px;
}

vanilla-js-tag-filter.markdown

vanilla js tag filter

A Pen by gilad on CodePen.

License.