Update script.js

assets/js/script.js

@@ -1,76 +1,60 @@
 'use strict';
 
-
-
 /**
- * element toggle function
+ * Utility function to toggle an element's "active" class.
+ * @param {HTMLElement} element - The element to toggle.
  */
-
-const toggleElem = function (elem) { elem.classList.toggle("active"); }
-
-
+const toggleElement = (element) => {
+  element.classList.toggle('active');
+};
 
 /**
- * navbar toggle
+ * Navbar Toggle Functionality
  */
-
-const navbar = document.querySelector("[data-navbar]");
-const navTogglers = document.querySelectorAll("[data-nav-toggler]");
-const overlay = document.querySelector("[data-overlay]");
-
-for (let i = 0; i < navTogglers.length; i++) {
-  navTogglers[i].addEventListener("click", function () {
-    toggleElem(navbar);
-    toggleElem(overlay);
+const navbar = document.querySelector('[data-navbar]');
+const navTogglers = document.querySelectorAll('[data-nav-toggler]');
+const overlay = document.querySelector('[data-overlay]');
+
+navTogglers.forEach((toggler) => {
+  toggler.addEventListener('click', () => {
+    toggleElement(navbar);
+    toggleElement(overlay);
   });
-}
-
-
+});
 
 /**
- * header sticky & back to top button
+ * Sticky Header & Back to Top Button
  */
-
-const header = document.querySelector("[data-header]");
-const backTopBtn = document.querySelector("[data-back-top-btn]");
-
-window.addEventListener("scroll", function () {
-  if (window.scrollY >= 100) {
-    header.classList.add("active");
-    backTopBtn.classList.add("active");
-    header.classList.add("header-anim");
-  } else {
-    header.classList.remove("active");
-    backTopBtn.classList.remove("active");
-    header.classList.remove("header-anim");
-  }
+const header = document.querySelector('[data-header]');
+const backTopBtn = document.querySelector('[data-back-top-btn]');
+
+window.addEventListener('scroll', () => {
+  const isScrolled = window.scrollY >= 100;
+
+  header.classList.toggle('active', isScrolled);
+  backTopBtn.classList.toggle('active', isScrolled);
+  header.classList.toggle('header-anim', isScrolled);
 });
 
-
-
 /**
- * search box toggle
+ * Search Box Toggle
  */
+const searchBox = document.querySelector('[data-search-box]');
+const searchTogglers = document.querySelectorAll('[data-search-toggler]');
 
-const searchTogglers = document.querySelectorAll("[data-search-toggler]");
-const searchBox = document.querySelector("[data-search-box]");
-
-for (let i = 0; i < searchTogglers.length; i++) {
-  searchTogglers[i].addEventListener("click", function () {
-    toggleElem(searchBox);
+searchTogglers.forEach((toggler) => {
+  toggler.addEventListener('click', () => {
+    toggleElement(searchBox);
   });
-}
-
-
+});
 
 /**
- * whishlist button toggle
+ * Wishlist Button Toggle
  */
+const wishlistButtons = document.querySelectorAll('[data-whish-btn]');
 
-const whishlistBtns = document.querySelectorAll("[data-whish-btn]");
-
-for (let i = 0; i < whishlistBtns.length; i++) {
-  whishlistBtns[i].addEventListener("click", function () {
-    toggleElem(this);
+wishlistButtons.forEach((button) => {
+  button.addEventListener('click', () => {
+    toggleElement(button);
   });
-}
+});