Master

code.js

@@ -0,0 +1,155 @@
+const menuEmail = document.querySelector('.navbar-email');
+const menuHamIcon = document.querySelector('.menu');
+const menuCarritoIcon = document.querySelector('.navbar-shopping-cart');
+const productDetailCloseIcon = document.querySelector('.product-detail-close')
+const desktopMenu = document.querySelector('.desktop-menu');
+const mobileMenu = document.querySelector('.mobile-menu');
+const shoppingCartContainer = document.querySelector('#shopping-cart-container');
+const productDetailContainer = document.querySelector('#product-detail-aside');
+const cardsContainer = document.querySelector('.cards-container');
+
+menuEmail.addEventListener('click', toggleDesktopMenu);
+menuHamIcon.addEventListener('click', toggleMobileMenu);
+menuCarritoIcon.addEventListener('click', toggleCarritoAside);
+productDetailCloseIcon.addEventListener('click', closeProductDetailAside);
+
+function toggleDesktopMenu() 
+{
+  const isAsideClosed = shoppingCartContainer.classList.contains('inactive');
+  const isProductDetailClosed = productDetailContainer.classList.contains('inactive');
+
+  if (!isAsideClosed) 
+  {
+    shoppingCartContainer.classList.add('inactive');
+  }
+  else if(!isProductDetailClosed)
+  {
+    productDetailContainer.classList.add('inactive');
+  }
+
+  desktopMenu.classList.toggle('inactive');
+}
+
+function toggleMobileMenu() 
+{
+  const isAsideClosed = shoppingCartContainer.classList.contains('inactive');
+
+  if (!isAsideClosed) 
+  {
+    shoppingCartContainer.classList.add('inactive'); 
+  }
+
+  openProductDetailAside();
+
+  mobileMenu.classList.toggle('inactive');
+}
+
+function toggleCarritoAside() 
+{
+  const isMobileMenuClosed = mobileMenu.classList.contains('inactive');
+  const isDesktopMenuClosed = desktopMenu.classList.contains('inactive');
+  const isProductDetailClosed = productDetailContainer.classList.contains('inactive');
+
+  if (!isMobileMenuClosed) 
+  {
+    mobileMenu.classList.add('inactive'); 
+  }
+  else if (!isDesktopMenuClosed)
+  {
+    desktopMenu.classList.add('inactive');
+  }
+  else if(!isProductDetailClosed)
+  {
+    productDetailContainer.classList.add('inactive');
+  }
+
+  shoppingCartContainer.classList.toggle('inactive');
+}
+
+function openProductDetailAside()
+{
+  shoppingCartContainer.classList.add('inactive');
+  desktopMenu.classList.add('inactive');
+  productDetailContainer.classList.remove('inactive');
+}
+
+function closeProductDetailAside()
+{
+  productDetailContainer.classList.add('inactive');
+}
+
+/*
+<div class="product-card">
+<img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
+<div class="product-info">
+    <div>
+    <p>$120,00</p>
+    <p>Bike</p>
+    </div>
+    <figure>
+    <img src="./icons/bt_add_to_cart.svg" alt="">
+    </figure>
+</div>
+</div>
+       */
+const productInfo = [];
+productInfo.push(
+{
+    name: 'Bike',
+    price: 120,
+    image: 'https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'
+});
+productInfo.push(
+{
+    name: 'Motocycle',
+    price: 720,
+    image: 'https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'
+});
+productInfo.push(
+{
+    name: 'Marihuana',
+    price: 420,
+    image: 'https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'
+});    
+
+function productsRender(x)
+{
+    for (product of x)
+    {
+        const productCard = document.createElement('div');
+        productCard.classList.add('product-card');
+
+        const productImg = document.createElement('img');
+        productImg.setAttribute('src', product.image);
+        productImg.addEventListener('click', openProductDetailAside);
+
+        const productDetails = document.createElement('div');
+        productDetails.classList.add('product-details');
+
+        const productDetailsDiv = document.createElement('div');
+
+        const productPrice = document.createElement('p');
+        productPrice.innerText = '$' + product.price;
+        const productName = document.createElement('p');
+        productName.innerText = product.name;
+
+        productDetailsDiv.appendChild(productPrice);
+        productDetailsDiv.appendChild(productName);
+
+        const productDetailsFigure = document.createElement('figure');
+        const productImgCart = document.createElement('img');
+        productImgCart.setAttribute('src', './icons/bt_add_to_cart.svg');
+
+        productDetailsFigure.appendChild(productImgCart);
+
+        productDetails.appendChild(productDetailsDiv);
+        productDetails.appendChild(productDetailsFigure);
+
+        productCard.appendChild(productImg);
+        productCard.appendChild(productDetails);
+
+        cardsContainer.appendChild(productCard);
+    }
+}
+
+productsRender(productInfo);

index.html

@@ -113,7 +113,7 @@
     </div>
   </nav>
 
-  <aside id="shoppingCartContainer" class="inactive">
+  <aside id="shopping-cart-container" class="inactive">
     <div class="title-container">
       <img src="./icons/flechita.svg" alt="arrow">
       <p class="title">My order</p>
@@ -158,10 +158,9 @@
         Checkout
       </button>
     </div>
-  </div>
   </aside>
 
-  <aside id="productDetail" class="inactive">
+  <aside id="product-detail-aside" class="inactive">
     <div class="product-detail-close">
       <img src="./icons/icon_close.png" alt="close">
     </div>
@@ -180,7 +179,8 @@
   <section class="main-container">
     <div class="cards-container">
 
-      <!-- <div class="product-card">
+      <!--
+      <div class="product-card">
         <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
         <div class="product-info">
           <div>
@@ -191,11 +191,10 @@
             <img src="./icons/bt_add_to_cart.svg" alt="">
           </figure>
         </div>
-      </div> -->
-
+      </div>-->
     </div>
   </section>
-
-  <script src="./main.js"></script>
+  
+  <script src="./code.js"></script>
 </body>
-</html>
+</html>