Adjusted the clicking interaction in #duvida section

organized functions
TuaneLeao · Aug 17, 2024 · 8367a1d · 8367a1d
1 parent ce2ea49
commit 8367a1d
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 19 deletions.
diff --git a/index.html b/index.html
@@ -129,7 +129,7 @@ <h2>Venha conferir nosso petshop e farmácia</h2>
           <div>
             <h2>Ficou alguma dúvida?</h2>
             <div class="duvida">
-              <h3>Quais são os serviços oferecidos pela PetLife?</h3>
+              <h3 class='click_point'>Quais são os serviços oferecidos pela PetLife?</h3>
               <img src="assets/arrow-down.svg" alt="" />
               <p class="paragrafo">
                 A clínica da PetLife oferece uma ampla gama de serviços,
@@ -142,7 +142,7 @@ <h3>Quais são os serviços oferecidos pela PetLife?</h3>
             </div>
 
             <div class="duvida">
-              <h3>Quais espécies de animais a clínica veterinária atende?</h3>
+              <h3 class='click_point'>Quais espécies de animais a clínica veterinária atende?</h3>
               <img src="assets/arrow-down.svg" alt="" />
               <p class="paragrafo">
                 A clínica veterinária da PetLife atende animais de estimação de
@@ -154,7 +154,7 @@ <h3>Quais espécies de animais a clínica veterinária atende?</h3>
             </div>
 
             <div class="duvida">
-              <h3>
+              <h3 class='click_point'>
                 A clínica veterinária da PetLife possui serviços de emergência?
               </h3>
               <img src="assets/arrow-down.svg" alt="" />
@@ -169,7 +169,7 @@ <h3>
             </div>
 
             <div class="duvida">
-              <h3>A clínica oferece serviços de banho e tosa?</h3>
+              <h3 class='click_point'>A clínica oferece serviços de banho e tosa?</h3>
               <img src="assets/arrow-down.svg" alt="" />
               <p class="paragrafo">
                 Sim, a clínica veterinária da PetLife oferece serviços

diff --git a/index.js b/index.js
@@ -1,13 +1,29 @@
-var elementosDuvida = document.querySelectorAll(".duvida");
+const clickPointsNodeList = document.querySelectorAll(".click_point");
+const clickPointsDuvida = []
 const headerNav = document.getElementById("header_nav");
 const shape = document.getElementById("shape");
+const containersDuvida = document.querySelectorAll('.duvida')
 
-elementosDuvida.forEach(function (duvida) {
-  duvida.addEventListener("click", function () {
-    duvida.classList.toggle("ativa");
+clickPointsNodeList.forEach(el => clickPointsDuvida.push(el))
+clickPointsDuvida.forEach(function (duvida,i) {
+  duvida.addEventListener("click", (e) => {
+    const containerIndex = clickPointsDuvida.findIndex(container => container == e.target);
+    containersDuvida[containerIndex].classList.toggle('ativa')
   });
 });
 
+const verifyClick = (e,clickedEl,modifyEl)=>{
+    var isClickInside = clickedEl == e.target;
+
+    if (isClickInside) {
+      modifyEl.classList.toggle("visible");
+    } else if(!isClickInside || modifyEl.classList.contains('visible')){
+      modifyEl.classList.remove('visible')
+    }
+
+}
+
+
 const verifyResolution = () => {
   if (window.innerWidth <= 580) {
     headerNav.innerHTML = `
@@ -25,18 +41,9 @@ const verifyResolution = () => {
     const navButton = document.getElementById("navigation_button");
     let navBox = document.getElementById("nav_box");
 
-
-
-    document.onclick = (e) => {
-      var isClickInside = navButton == e.target;
-      console.log(isClickInside);
+    document.onclick = (e) => verifyClick(e,navButton,navBox)
 
-      if (isClickInside) {
-        navBox.classList.toggle("visible");
-      } else if(!isClickInside || navBox.classList.contains('visible')){
-        navBox.classList.remove('visible')
-      }
-    };
+
   }
   if (window.innerWidth > 580) {
     const icon = document.getElementById('navigation_icon');