add listeners for navigation

HectorVilas · Apr 27, 2023 · 2c7f1f3 · 2c7f1f3
1 parent 23ab97f
commit 2c7f1f3
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 14 deletions.
diff --git a/main.js b/main.js
@@ -1,20 +1,14 @@
 import header from "./modules/header.js";
 import footer from "./modules/footer.js";
-import home from "./modules/pages/home.js";
-import shop from "./modules/pages/shop.js";
+import { goToPage } from "./modules/functions.js";
 
 const body = document.querySelector('body');
 const main = document.createElement('main');
 
-main.append(
-  ...home(),
-);
-
 body.append(
   header(),
   main,
   footer(),
-);
-
-// temporal function for testing
-main.replaceChildren(...shop());
+  );
+
+  goToPage("home");
diff --git a/modules/header.js b/modules/header.js
@@ -1,3 +1,5 @@
+import { goToPage } from "./functions.js";
+
 const svgNs = 'http://www.w3.org/2000/svg';
 
 export default function header() {
@@ -22,6 +24,8 @@ function logo() {
   span2.textContent = 'Living';
 
   logo.setAttribute('src', './media/images/icons/plant-logo.png');
+
+  logoGroup.addEventListener('click', () => goToPage('home'));
 
   h1.append(span1, span2);
   logoGroup.append(logo, h1);
@@ -47,9 +51,9 @@ function nav() {
   const user = document.createElement('div');
 
   icons.classList.add('nav-icons');
-  home.classList.add('nav-home', 'active');
-  about.classList.add('nav-about');
-  shop.classList.add('nav-shop');
+  home.classList.add('nav-item', 'nav-home');
+  about.classList.add('nav-item', 'nav-about');
+  shop.classList.add('nav-item', 'nav-shop');
   home.textContent = 'Home';
   about.textContent = 'About us';
   shop.textContent = 'Shop';
@@ -70,6 +74,8 @@ function nav() {
       counter.classList.remove('counter-animate');
     });
   });
+  home.addEventListener('click', () => goToPage("home"));
+  shop.addEventListener('click', () => goToPage("shop"));
 
   favorites.append(favoritesCount);
   cart.append(cartCount);

diff --git a/modules/pages/home.js b/modules/pages/home.js
@@ -1,3 +1,5 @@
+import { goToPage } from "../functions.js";
+
 const svgNs = 'http://www.w3.org/2000/svg';
 
 export default function home() {
@@ -45,6 +47,8 @@ function hero() {
   hero.classList.add('home-hero');
   div.classList.add('home-hero-div');
 
+  btn.addEventListener('click', () => goToPage('shop'));
+
   svg.append(svgImg1, svgImg2, svgImg3, svgText);
   btn.append(btnPara, btnArrow);
   div.append(svg, para, btn);
@@ -107,6 +111,8 @@ function categories() {
     button.textContent = 'Shop Collection';
     image.setAttribute('src', cardsData[i].src);
 
+    button.addEventListener('click', () => goToPage('shop'));
+
     card.classList.add('category-card');
     card.append(h2, line, button, image);
     categories.append(card);

diff --git a/modules/pages/shop.js b/modules/pages/shop.js
@@ -3,7 +3,7 @@ import shopCard from "../shopCard.js";
 
 const shopCategories = ['All Collections', 'Cacti', 'Plants', 'Succulents'];
 
-export default function home() {
+export default function shop() {
   const shop = [categories(), banner(), catalog()];
 
   return shop;