Convert filter button code from jQuery to JavaScript
Opened this issue · 1 comments
brittanyrw commented
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 commented
Hey @brittanyrw, I would like to work on it. Can you assign this issue to me?