javascripthtmlcssfilter

Why won't my filtering data-tag buttons work?

For some reason not all the buttons will filter. All still works, markdown and mermaid show some but not all of the cards they should.

Code:

const filterButtons = document.querySelectorAll(".filter-buttons button");
filterButtons.forEach(button => {
  button.addEventListener("click", function() {
    filterCards(this.getAttribute("data-tag"), this);
  });
});
});

function filterCards(tag, button) {
  console.log("filterCards called with tag:", tag);
  let cards = document.querySelectorAll(".card");
  let buttons = document.querySelectorAll(".filter-buttons button");

  // Remove "active" class from all buttons
  buttons.forEach(btn => btn.classList.remove("active"));

  // Add "active" class to the clicked button
  button.classList.add("active");

  // Filter cards
  cards.forEach(card => {
    let cardTags = card.getAttribute("data-tags").split(" ");
    if (tag === "all" || cardTags.includes(tag)) {
      card.classList.remove("hidden");
    } else {
      card.classList.add("hidden");
    }
  });
}
.filter-buttons {
  margin-bottom: 20px;
  text-align: center;
  width: 100%;
}

.filter-buttons button {
  margin: 5px;
  padding: 10px;
  cursor: pointer;
  border: none;
  background-color: var(--background-color);
  border-radius: 5px;
  outline-color: var(--primary-color);
}

.filter-buttons button.active {
  background-color: var(--primary-color);
  color: white;
}

.cards {
  display: flex;
  flex-wrap: wrap;
  /* Allows wrapping if necessary */
  gap: 20px;
  /* Adds space between cards */
  justify-content: center;
  /* Centers cards in the container */

}

.card {
  width: 200px;
  padding: 15px;
  border: 1px solid var(--accent-color);
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  text-align: center;
  display: block;
  cursor: pointer;
}

.card-link {
  background-color: #4CAF50;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  text-decoration: none;
}

.card-link:hover {
  background-color: #3e8e41;
}

.hidden {
  display: none;
}
<button data-tag="all">All</button> <!-- All projects button DO NOT DELETE -->

<button data-tag="design">Design</button> <!-- Design projects button -->
<button data-tag="UI/UX">UI/UX</button> <!-- UI/UX projects button -->
<button data-tag="database">Database</button> <!-- Database projects button -->
<button data-tag="scripting">Scripting</button> <!-- Scripting projects button -->
<button data-tag="HTML5">HTML5</button> <!-- HTML5 projects button -->
<button data-tag="CSS3">CSS3</button> <!-- CSS3 projects button -->
<button data-tag="JavaScript">JavaScript</button> <!-- JavaScript projects button -->

<div class="cards">
  <div class="card" data-tags=" design , css3 , html5 , Javascript , scripting , frontend , game , web , UI/UX , markdown , mobile ">
    <a href="https://alexmcvay.github.io/DragonFighter.github.io/">
      <h3>DragonFighter RPG</h3>
      <p>A text-based monster fighting role-playing game.</p>
    </a>
  </div>
  <div class="card" data-tags=" design , css3 , html5 , javascript , scripting , frontend , web , UI/UX , markdown , mobile ">
    <a href="https://alexmcvay.github.io/Portfolio/">
      <h3>Portfolio</h3>
      <p>This portfolio website.</p>
    </a>
  </div>
  <div class="card" data-tags=" UI/UX , design , css3 , html5 , javascript , frontend , web , react ">
    <a href="https://studentcalendar.netlify.app/">
      <h3>Student Calendar</h3>
      <p>A student calendar app.</p>
    </a>
  </div>
  <div class="card" data-tags=" UI/UX , design , css3 , html5 , javascript , frontend , web , mobile ">
    <a href="https://alexmcvay.github.io/Contact-Card/">
      <h3>LinkTree Clone</h3>
      <p>A linktree clone with a Download button for contact info.</p>
    </a>
  </div>
  <div class="card" data-tags=" Database , SQL , mermaid ">
    <a href="https://github.com/AlexMcVay/UBER-Data">
      <h3>UBER-Data</h3> 
      <p> A data analysis clone of UBER</p>
    </a>
  </div>
  <div class="card" data-tags=" UI/UX , design , css3 , html5 , javascript , frontend , web , mobile ">
    <a href="https://alexandra-mcvay.netlify.app/">
      <h3>Tic Tac Toe</h3>
      <p>A game of Tic Tac Toe</p>
    </a>
  </div>
</div>

The console is showing that everything should be working filterCards called with tag: CSS3

The Database HTML5 CSS3 show no cards even though there are cards with the appropriate data-tags. I expected the buttons to filter out only the cards not containing the appropriate data-tags.

Screenshots:

Here it is when I click all:

Here it is when I click design ( a button that works):

Here is is when I click Database, one of the buttons that do not work:

Solution

  • If you use checkboxes instead of buttons you can use CSS to style the cards according to the checked boxes. And then use JavaScript to check if all or none should be checked.

    document.forms.menu.addEventListener('click', e => {
  let form = e.target.form;
  switch (e.target.name) {
    case 'all':
      [...form.others.elements].forEach(input => input.checked = e.target.checked);
      break;
    default:
      let otherschecked = ([...form.others.elements].filter(input => !input.checked).length == 0) ?? true;
      form.all.checked = otherschecked;
      break;
  }
});
    body .card {
  display: none;
}

body:has(input[name="design"]:checked) .card[data-tags~="design"] {
  display: flex;
}

body:has(input[name="UI/UX"]:checked) .card[data-tags~="UI/UX"] {
  display: flex;
}

body:has(input[name="database"]:checked) .card[data-tags~="database"] {
  display: flex;
}

label {
  display: inline-block;
  padding: 1em;
  border: solid thin orange;
}

label:has(input:checked) {
  background-color: orange;
}

label input {
  display: none;
}

fieldset {
  display: inline-block;
  border: none;
  margin: 0;
  padding: 0;
}

.filter-buttons {
  margin-bottom: 20px;
  text-align: center;
  width: 100%;
}

.filter-buttons button {
  margin: 5px;
  padding: 10px;
  cursor: pointer;
  border: none;
  background-color: var(--background-color);
  border-radius: 5px;
  outline-color: var(--primary-color);
}

.filter-buttons button.active {
  background-color: var(--primary-color);
  color: white;
}

.cards {
  display: flex;
  flex-wrap: wrap;
  /* Allows wrapping if necessary */
  gap: 20px;
  /* Adds space between cards */
  justify-content: center;
  /* Centers cards in the container */

}

.card {
  width: 200px;
  padding: 15px;
  border: 1px solid var(--accent-color);
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  text-align: center;
  display: block;
  cursor: pointer;
}

.card-link {
  background-color: #4CAF50;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  text-decoration: none;
}

.card-link:hover {
  background-color: #3e8e41;
}
    <form name="menu">
  <label><input type="checkbox" name="all">All</label>
  <fieldset name="others">
    <label><input type="checkbox" name="design">Design</label>
    <label><input type="checkbox" name="UI/UX">UI/UX</label>
    <label><input type="checkbox" name="database">Database</label>
  </fieldset>
</form>
<div class="cards">
  <div class="card" data-tags=" design , css3 , html5 , Javascript , scripting , frontend , game , web , UI/UX , markdown , mobile ">
    <a href="https://alexmcvay.github.io/DragonFighter.github.io/">
      <h3>DragonFighter RPG</h3>
      <p>A text-based monster fighting role-playing game.</p>
    </a>
  </div>
  <div class="card" data-tags=" design , css3 , html5 , javascript , scripting , frontend , web , UI/UX , markdown , mobile ">
    <a href="https://alexmcvay.github.io/Portfolio/">
      <h3>Portfolio</h3>
      <p>This portfolio website.</p>
    </a>
  </div>
  <div class="card" data-tags=" UI/UX , design , css3 , html5 , javascript , frontend , web , react ">
    <a href="https://studentcalendar.netlify.app/">
      <h3>Student Calendar</h3>
      <p>A student calendar app.</p>
    </a>
  </div>
  <div class="card" data-tags=" UI/UX , design , css3 , html5 , javascript , frontend , web , mobile ">
    <a href="https://alexmcvay.github.io/Contact-Card/">
      <h3>LinkTree Clone</h3>
      <p>A linktree clone with a Download button for contact info.</p>
    </a>
  </div>
  <div class="card" data-tags=" Database , SQL , mermaid ">
    <a href="https://github.com/AlexMcVay/UBER-Data">
      <h3>UBER-Data</h3> 
      <p> A data analysis clone of UBER</p>
    </a>
  </div>
  <div class="card" data-tags=" UI/UX , design , css3 , html5 , javascript , frontend , web , mobile ">
    <a href="https://alexandra-mcvay.netlify.app/">
      <h3>Tic Tac Toe</h3>
      <p>A game of Tic Tac Toe</p>
    </a>
  </div>
</div>