cleaned up the files + distructured the js file to each logic its own…

… file

src/home.js → src/OperationsCard.js

@@ -1,25 +1,3 @@
-//   NAVBAR //
-//
-//
-// selecting elements
-const burgerMenuWrap = document.getElementsByClassName("burger-Menu-Wrap")[0];
-const navRightLinksWrapEl = document.getElementsByClassName(
-  "nav-Right-Links-Wrap"
-)[0];
-
-// functions
-const openNav = () => {
-  navRightLinksWrapEl.classList.toggle("active");
-};
-
-// event linsters
-burgerMenuWrap.addEventListener("click", openNav);
-//
-//
-//
-//   Operations //
-//
-//
 // selecting elements
 const operationsBottomIcon = document.getElementById(
   "operations-Bottom-Text-Wrap-Left-Icon"
@@ -74,52 +52,3 @@ operationsTextWrap.forEach((operationBtn, index) => {
   operationBtn.addEventListener("click", () => changeOperationCard(index));
 });
 changeOperationCard(0);
-//
-//
-//
-//   Customers //
-//
-//
-// selecting elements
-const customerBottomsLRIds = document.querySelectorAll(
-  "#customer-Bottoms-L-R-Ids"
-);
-const customersCardsHolderEl = document.getElementsByClassName(
-  "customers-Cards-Holder"
-)[0];
-const customerBottomBtns = document.querySelectorAll(".customer-Bottom-Btns");
-
-// gelobal variables
-slideCount = 0;
-
-// functions
-const changeCustomerCard = (index) => {
-  customerBottomBtns.forEach((customerBBtn) => {
-    customerBBtn.classList.remove("active");
-  });
-  customersCardsHolderEl.style.transform = `translateX(-${index}00%)`;
-  customerBottomBtns[index].classList.add("active");
-};
-
-// dots logic
-const dotBottomStylingLogic = (index) => {
-  index === 0
-    ? slideCount >= 1
-      ? slideCount--
-      : (slideCount = customerBottomBtns.length - 1)
-    : slideCount < 2
-    ? slideCount++
-    : (slideCount = 0);
-  changeCustomerCard(slideCount);
-};
-
-// event linsters
-customerBottomsLRIds.forEach((lrBtns, index) => {
-  lrBtns.addEventListener("click", () => dotBottomStylingLogic(index));
-});
-
-customerBottomBtns.forEach((customerDownBtn, index) => {
-  customerDownBtn.addEventListener("click", () =>
-    changeCustomerCard((slideCount = index))
-  );
-});

src/customerCard.js

@@ -0,0 +1,43 @@
+// selecting elements
+const customerBottomsLRIds = document.querySelectorAll(
+  "#customer-Bottoms-L-R-Ids"
+);
+const customersCardsHolderEl = document.getElementsByClassName(
+  "customers-Cards-Holder"
+)[0];
+const customerBottomBtns = document.querySelectorAll(".customer-Bottom-Btns");
+
+// gelobal variables
+let slideCount = 0;
+
+// functions
+const changeCustomerCard = (index) => {
+  customerBottomBtns.forEach((customerBBtn) => {
+    customerBBtn.classList.remove("active");
+  });
+  customersCardsHolderEl.style.transform = `translateX(-${index}00%)`;
+  customerBottomBtns[index].classList.add("active");
+};
+
+// dots logic
+const dotBottomStylingLogic = (index) => {
+  index === 0
+    ? slideCount >= 1
+      ? slideCount--
+      : (slideCount = customerBottomBtns.length - 1)
+    : slideCount < 2
+    ? slideCount++
+    : (slideCount = 0);
+  changeCustomerCard(slideCount);
+};
+
+// event linsters
+customerBottomsLRIds.forEach((lrBtns, index) => {
+  lrBtns.addEventListener("click", () => dotBottomStylingLogic(index));
+});
+
+customerBottomBtns.forEach((customerDownBtn, index) => {
+  customerDownBtn.addEventListener("click", () =>
+    changeCustomerCard((slideCount = index))
+  );
+});

src/home.html

@@ -349,6 +349,8 @@ <h3 class="card-Location">Lisbon, Portugal</h3>
         </div>
       </div>
     </section>
-    <script src="home.js"></script>
+    <script type="module" src="OperationsCard.js"></script>
+    <script type="module" src="customerCard.js"></script>
+    <script type="module" src="navbar.js"></script>
   </body>
 </html>

src/navbar.js

@@ -0,0 +1,13 @@
+// selecting elements
+const burgerMenuWrap = document.getElementsByClassName("burger-Menu-Wrap")[0];
+const navRightLinksWrapEl = document.getElementsByClassName(
+  "nav-Right-Links-Wrap"
+)[0];
+
+// functions
+const openNav = () => {
+  navRightLinksWrapEl.classList.toggle("active");
+};
+
+// event linsters
+burgerMenuWrap.addEventListener("click", openNav);