When nothing matches the filter

If we filter for Spring and Edible, there is nothing that matches the filter.

It's a little strange from a user-experience point of view to have a blank space. We should provide some feedback.

First, we can add a message that's normally hidden:

<div class="no-matches" hidden>No matches for these filters</div>

And then we can hide/show as needed.

First, we can create a variable called hasVisibleCards. We need to use let here, because we'll switch it between true and false.

const noResultsMessage = document.querySelector(".no-results-message");

function filterCards() {
  let hasVisibleCards = false;

  /* all the filtering logic */
}

Then in our if/else, we can change it to true if any card is visible:

if (matchesSeason && matchesEdible) {
  console.log(currentFilters);
  card.removeAttribute("hidden");
  hasVisibleCards = true;
} else {
  card.setAttribute("hidden", "");
}

And then, we can hide/show based on whether or not we have visible cards.

if (hasVisibleCards) {
  noResultsMessage.hidden = true;
} else {
  noResultsMessage.hidden = false;
}

There are more concise ways to do this, but for a simple thing like this, I don't mind an extra 2 lines of JS when it's a lot more readable and easy to understand what's happening.