From 2669e339523508b14836952b187a61186c947070 Mon Sep 17 00:00:00 2001
From: Nwamini Emmanuel Onyedikachi <emmanuelgodwin558@gmail.com>
Date: Tue, 31 Oct 2023 13:39:38 +0100
Subject: [PATCH] Update app.js

  // Converted the code for the filters from jQuery into JavaScript.
---
 app.js | 88 +++++++++++++++++++++++++++++++++++++++++++---------------
 1 file changed, 66 insertions(+), 22 deletions(-)

diff --git a/app.js b/app.js
index 97c1b943..416e6b65 100644
--- a/app.js
+++ b/app.js
@@ -77,30 +77,74 @@ $(document).ready(function() {
   }
 
   // The code that runs the filter buttons at the top of the page. This currently allows users to filter by 'type' (ie musical, movie or tv show).
-  $("#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>"
-        );
-      }
+  // $("#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>"
+  //       );
+  //     }
+  //   });
+  // });
+
+
+  // Converted the code for the filters from jQuery into JavaScript. 
+  const filterButtons = document.querySelectorAll("#filters button");
+
+filterButtons.forEach(function (button) {
+  button.addEventListener("click", function () {
+    const filtertag = button.getAttribute("data-filter");
+    const message = document.getElementById("message");
+    const emojiCardTitles = document.querySelectorAll("div.emoji-card-title");
+
+    message.style.display = "none";
+
+    emojiCardTitles.forEach(function (title) {
+      title.classList.add("hide-card");
     });
+
+    if (filtertag === "view-all") {
+      // If the user clicks on "view all," show all cards.
+      document.querySelectorAll("div.emoji-card").forEach(function (card) {
+        card.style.display = "block";
+      });
+    } 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.
+      document.querySelectorAll(`div.emoji-card[data-filter='${filtertag}']`).length > 0
+    ) {
+      document.querySelectorAll("div.emoji-card").forEach(function (card) {
+        card.style.display = "block";
+      });
+
+      document.querySelectorAll(`div.emoji-card:not([data-filter='${filtertag}'])`).forEach(function (card) {
+        card.style.display = "none";
+      });
+    } else {
+      // If there are no cards that match the filter, display a message that says there are no cards for that category.
+      document.querySelectorAll("div.emoji-card").forEach(function (card) {
+        card.style.display = "none";
+      });
+
+      message.style.display = "block";
+      message.innerHTML = `<p>There are no ${filtertag} cards on this page. 🙁</p>`;
+    }
   });
+});
 
   // Reveal the movie or show title when the user clicks on the emojis.