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>"
);
}
});
});
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.