Make buttons work

ReshetS · Apr 14, 2024 · 0ceb228 · 0ceb228
1 parent 57cb2da
commit 0ceb228
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 34 deletions.
diff --git a/src/index.html b/src/index.html
@@ -31,6 +31,6 @@
     </main>
     <load src="partials/footer.html" />
     <load src="partials/mobile-menu.html" />
-    <script src="./main.js"></script>
+    <script type="module" src="./main.js"></script>
   </body>
 </html>
diff --git a/src/main.js b/src/main.js
@@ -1,11 +1,17 @@
-'use strict';
+(() => {
+  const mobileMenu = {
+    modal: document.querySelector('#mobile-menu'),
+    menuOpenBtn: document.querySelector('.button-menu-open'),
+    menuCloseBtn: document.querySelector('.modal-btn'),
+    menuCloseByLink: document.querySelector('.modal-menu-link'),
+    menuCloseByLinkShop: document.querySelector('.modal-menu-link-shop'),
+  };
 
-function openMobileMenu() {
-  const modal = document.getElementById('mobile-menu');
-  modal.classList.add('is-open');
-}
-
-function closeMobileMenu() {
-  const modal = document.getElementById('mobile-menu');
-  modal.classList.remove('is-open');
-}
+  mobileMenu.menuOpenBtn.addEventListener('click', toogleIsOpen);
+  mobileMenu.menuCloseBtn.addEventListener('click', toogleIsOpen);
+  mobileMenu.menuCloseByLink.addEventListener('click', toogleIsOpen);
+  mobileMenu.menuCloseByLinkShop.addEventListener('click', toogleIsOpen);
+  function toogleIsOpen() {
+    mobileMenu.modal.classList.toggle('is-open');
+  }
+})();
diff --git a/src/partials/header.html b/src/partials/header.html
@@ -31,7 +31,7 @@
           </li>
         </ul>
       </nav>
-      <button type="button" class="button-menu-open" onclick="openMobileMenu()">
+      <button type="button" class="button-menu-open">
         <svg class="open-menu-mobile" width="32" height="32">
           <use
             class="open-menu-mob-icon"

diff --git a/src/partials/mobile-menu.html b/src/partials/mobile-menu.html
@@ -1,7 +1,7 @@
 <div class="backdrop" id="mobile-menu">
   <div class="mobile-menu">
     <div class="modal container">
-      <button type="button" class="modal-btn" onclick="closeMobileMenu()">
+      <button type="button" class="modal-btn">
         <svg
           class="modal-close-icon-mini"
           width="20"
@@ -21,33 +21,16 @@
       </button>
       <ul class="modal-menu">
         <li class="modal-menu-item">
-          <a
-            href="#how-it-works"
-            class="modal-menu-link"
-            onclick="closeMobileMenu()"
-            >how it works</a
-          >
+          <a href="#how-it-works" class="modal-menu-link">how it works</a>
         </li>
         <li class="modal-menu-item">
-          <a
-            href="#vegetables"
-            class="modal-menu-link"
-            onclick="closeMobileMenu()"
-            >vegetables</a
-          >
+          <a href="#vegetables" class="modal-menu-link">vegetables</a>
         </li>
         <li class="modal-menu-item">
-          <a href="#reviews" class="modal-menu-link" onclick="closeMobileMenu()"
-            >reviews</a
-          >
+          <a href="#reviews" class="modal-menu-link">reviews</a>
         </li>
         <li class="modal-menu-item-shop">
-          <a
-            href="#your-order"
-            class="modal-menu-link-shop"
-            onclick="closeMobileMenu()"
-            >shop now</a
-          >
+          <a href="#your-order" class="modal-menu-link-shop">shop now</a>
         </li>
       </ul>
     </div>