Convert filter button code from jQuery to JavaScript

[brittanyrw]

In the project, there are a set of filters at the top that will allow a user to show only movie, TV show or musical cards. The code for this is located in the app.js.

Convert the code for the filters from jQuery into JavaScript. Only convert this specific section of code.

$("#filters button").each(function () {
  $(this).on("click", function () {
    const filtertag = $(this).attr("data-filter");
    $("#message").hide();
    $("div.emoji-card-title").addClass("hide-card");
    if (filtertag == "view-all") {
      // If the user clicks on view all, show all cards.
      $("div.emoji-card").show();
    } else if (
      // If the user clicks on movies, musicals or tv shows, show the cards that fall into that category and hide all cards that do not fall into that category.
      $("div.emoji-card[data-filter='" + filtertag + "']").length > 0
    ) {
      $("div.emoji-card").show();
      $("div.emoji-card:not([data-filter='" + filtertag + "'])").hide();
    } else {
      // If there are no cards that match the filter, display a message that says that there are no cards for that category.
      $("div.emoji-card").hide();
      $("#message").show();
      $("#message").html(
        "<p>There are no " + filtertag + " cards on this page. 🙁</p>"
      );
    }
  });
});

[harmit17]

Hey @brittanyrw, I would like to work on it. Can you assign this issue to me?