From fbcf78553cb4cdd9ed80c7c1c1cd229c366b3bd6 Mon Sep 17 00:00:00 2001
From: Nwamini Emmanuel Onyedikachi <emmanuelgodwin558@gmail.com>
Date: Sun, 22 Oct 2023 16:14:49 +0100
Subject: [PATCH] Update app.js

jQuery code to plain JavaScript
---
 app.js | 35 +++++++++++++++++++++++++++--------
 1 file changed, 27 insertions(+), 8 deletions(-)

diff --git a/app.js b/app.js
index 97c1b943..89aec93e 100644
--- a/app.js
+++ b/app.js
@@ -114,15 +114,34 @@ $(document).ready(function() {
     element.addEventListener("click", toggleCard);
   });
 
-  // Display a hint (type ie tv, movie or musical) when hovering over the question mark.
-  $("#emojis").on("mouseover", ".hint-container", function () {
-    $(this).find(".hint").addClass("hint-reveal");
-  });
+  // // Display a hint (type ie tv, movie or musical) when hovering over the question mark.
+  // $("#emojis").on("mouseover", ".hint-container", function () {
+  //   $(this).find(".hint").addClass("hint-reveal");
+  // });
+
+  // // Hide hint (type ie tv, movie or musical) when the user stops hovering over the question mark.
+  // $("#emojis").on("mouseleave", ".hint-container", function () {
+  //   $(this).find(".hint").removeClass("hint-reveal");
+  // });
+
+  // Get the element that triggers the hover event
+const emojisContainer = document.getElementById("emojis");
+
+// Add a mouseover event listener
+emojisContainer.addEventListener("mouseover", function (event) {
+  if (event.target.classList.contains("hint-container")) {
+    const hint = event.target.querySelector(".hint");
+    hint.classList.add("hint-reveal");
+  }
+});
 
-  // Hide hint (type ie tv, movie or musical) when the user stops hovering over the question mark.
-  $("#emojis").on("mouseleave", ".hint-container", function () {
-    $(this).find(".hint").removeClass("hint-reveal");
-  });
+// Add a mouseleave event listener
+emojisContainer.addEventListener("mouseleave", function (event) {
+  if (event.target.classList.contains("hint-container")) {
+    const hint = event.target.querySelector(".hint");
+    hint.classList.remove("hint-reveal");
+  }
+});
 
   // Toggle to expand or hide all of the movie/show names by clicking an icon
   $(".btn-reveal-all").click(function () {