juandc · orlancst · May 14, 2023 · May 17, 2023 · May 17, 2023 · May 19, 2023
diff --git a/index.html b/index.html
@@ -4,14 +4,11 @@
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-
+  <title>YardSale: Tienda online de cosas bacanas</title>
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;500;700&display=swap" rel="stylesheet">
-
   <link rel="stylesheet" href="./styles.css">
-
-  <title>YardSale: tienda online de cositas chidas</title>
 </head>
 <body>
   <nav>
@@ -51,7 +48,7 @@
         </li>
       </ul>
     </div>
-
+    
     <div class="desktop-menu inactive">
       <ul>
         <li>
@@ -111,9 +108,10 @@
         </li>
       </ul>
     </div>
+
   </nav>
 
-  <aside id="shoppingCartContainer" class="inactive">
+  <aside id="shoppingCartContainer" class=" inactive">
     <div class="title-container">
       <img src="./icons/flechita.svg" alt="arrow">
       <p class="title">My order</p>
@@ -161,7 +159,7 @@
   </div>
   </aside>
 
-  <aside id="productDetail" class="inactive">
+  <aside id="productDetail" class=" inactive">
     <div class="product-detail-close">
       <img src="./icons/icon_close.png" alt="close">
     </div>
@@ -179,23 +177,8 @@
 
   <section class="main-container">
     <div class="cards-container">
-
-      <!-- <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> -->
-
     </div>
   </section>
-
   <script src="./main.js"></script>
 </body>
-</html>
+</html>
diff --git a/main.js b/main.js
@@ -1,8 +1,8 @@
 const menuEmail = document.querySelector('.navbar-email');
+const desktopMenu = document.querySelector('.desktop-menu');
 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 productDetailCloseIcon = document.querySelector('.product-detail-close');
 const mobileMenu = document.querySelector('.mobile-menu');
 const shoppingCartContainer = document.querySelector('#shoppingCartContainer');
 const productDetailContainer = document.querySelector('#productDetail');
@@ -13,46 +13,54 @@ menuHamIcon.addEventListener('click', toggleMobileMenu);
 menuCarritoIcon.addEventListener('click', toggleCarritoAside);
 productDetailCloseIcon.addEventListener('click', closeProductDetailAside);
 
-function toggleDesktopMenu() {
+function toggleDesktopMenu(){
   const isAsideClosed = shoppingCartContainer.classList.contains('inactive');
-
-  if (!isAsideClosed) {
+  
+  if (!isAsideClosed){
     shoppingCartContainer.classList.add('inactive');
   }
-  
+
   desktopMenu.classList.toggle('inactive');
 }
 
-function toggleMobileMenu() {
+function toggleMobileMenu(){
   const isAsideClosed = shoppingCartContainer.classList.contains('inactive');
-
-  if (!isAsideClosed) {
-    shoppingCartContainer.classList.add('inactive'); 
+  
+  if (!isAsideClosed){
+    shoppingCartContainer.classList.add('inactive');
   }
 
+  //en mobile, si se quiere abrir el menu lateral izquierdo hay que cerrar cualquier otro elemento que esté activo.
   closeProductDetailAside();
-  
+
   mobileMenu.classList.toggle('inactive');
 }
 
-function toggleCarritoAside() {
+function toggleCarritoAside(){
   const isMobileMenuClosed = mobileMenu.classList.contains('inactive');
+  const isDesktopMenuClosed = desktopMenu.classList.contains('inactive');
+
+  if (!isDesktopMenuClosed){
+    desktopMenu.classList.add('inactive');
+  }
 
-  if (!isMobileMenuClosed) {
+  if (!isMobileMenuClosed){
     mobileMenu.classList.add('inactive');
   }
 
   const isProductDetailClosed = productDetailContainer.classList.contains('inactive');
-  
+
   if (!isProductDetailClosed) {
-    productDetailContainer.classList.add('inactive'); 
+    productDetailContainer.classList.add('inactive');
   }
-  
+
   shoppingCartContainer.classList.toggle('inactive');
+
 }
 
 function openProductDetailAside() {
   shoppingCartContainer.classList.add('inactive');
+
   productDetailContainer.classList.remove('inactive');
 }
 
@@ -61,28 +69,30 @@ function closeProductDetailAside() {
 }
 
 const productList = [];
+
 productList.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',
+  image: 'https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"'
 });
+
 productList.push({
   name: 'Pantalla',
-  price: 220,
-  image: 'https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940',
+  price: 200,
+  image: 'https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"'
 });
+
 productList.push({
-  name: 'Compu',
-  price: 620,
-  image: 'https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940',
+  name: 'Computador',
+  price: 420,
+  image: 'https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"'
 });
 
-function renderProducts(arr) {
+function renderProducts(arr){
   for (product of arr) {
-    const productCard = document.createElement('div');
+    const productCard = document.createElement('div')
     productCard.classList.add('product-card');
 
-    // product= {name, price, image} -> product.image
     const productImg = document.createElement('img');
     productImg.setAttribute('src', product.image);
     productImg.addEventListener('click', openProductDetailAside);
@@ -92,9 +102,10 @@ function renderProducts(arr) {
 
     const productInfoDiv = document.createElement('div');
 
-    const productPrice = document.createElement('p');
+    const productPrice = document.createElement('p')
     productPrice.innerText = '$' + product.price;
-    const productName = document.createElement('p');
+
+    const productName = document.createElement('p')
     productName.innerText = product.name;
 
     productInfoDiv.appendChild(productPrice);
@@ -114,6 +125,7 @@ function renderProducts(arr) {
 
     cardsContainer.appendChild(productCard);
   }
+
 }
 
-renderProducts(productList);
+renderProducts(productList);
diff --git a/styles.css b/styles.css
@@ -1,24 +1,24 @@
-/* General */
+/* Generales */
+
 :root {
-  --white: #FFFFFF;
+  --white: #ffffff;
   --black: #000000;
-  --very-light-pink: #C7C7C7;
-  --text-input-field: #F7F7F7;
-  --hospital-green: #ACD9B2;
+  --very-light-pink: #c7c7c7;
+  --text-input-field: #f7f7f7;
+  --hospital-green: #acd9b2;
   --sm: 14px;
   --md: 16px;
   --lg: 18px;
 }
 body {
   margin: 0;
-  font-family: 'Quicksand', sans-serif;
+  font-family: "Quicksand", sans-serif;
 }
+
 .inactive {
   display: none;
 }
 
-
-/* Navbar (general) */
 nav {
   display: flex;
   justify-content: space-between;
@@ -61,12 +61,13 @@ nav {
 }
 .navbar-email {
   color: var(--very-light-pink);
-  cursor: pointer;
   font-size: var(--sm);
   margin-right: 12px;
+  cursor: pointer;
 }
 .navbar-shopping-cart {
   position: relative;
+  cursor: pointer;
 }
 .navbar-shopping-cart div {
   width: 16px;
@@ -83,7 +84,6 @@ nav {
   align-items: center;
 }
 
-/* Menu en desktop */
 .desktop-menu {
   position: absolute;
   top: 60px;
@@ -122,14 +122,13 @@ nav {
   display: inline-block;
 }
 
-/* Menu en mobile */
 .mobile-menu {
   background-color: var(--white);
   position: absolute;
   top: 60px;
+  padding: 24px;
   left: 0;
   width: 100%;
-  padding: 24px;
 }
 .mobile-menu a {
   text-decoration: none;
@@ -157,8 +156,8 @@ nav {
   color: var(--hospital-green) !important;
 }
 
+/* aside product detil */
 
-/* Aside (product detail y carrito) */
 aside {
   background-color: var(--white);
   width: 360px;
@@ -167,7 +166,6 @@ aside {
   right: 0;
 }
 
-/* ShoppingCart */
 #shoppingCartContainer {
   padding: 0 24px;
 }
@@ -178,6 +176,8 @@ aside {
   transform: rotate(180deg);
   margin-right: 14px;
 }
+
+
 .title {
   font-size: var(--lg);
   font-weight: bold;
@@ -239,7 +239,6 @@ aside {
   height: 50px;
 }
 
-/* ProductDetail */
 .product-detail-close {
   background: var(--white);
   width: 14px;
@@ -251,6 +250,7 @@ aside {
   padding: 12px;
   border-radius: 50%;
 }
+
 .product-detail-close:hover {
   cursor: pointer;
 }
@@ -298,14 +298,14 @@ aside {
   justify-content: center;
 }
 
+/* product list */
 
-/* Product List */
 .cards-container {
+  margin-top: 20px;
   display: grid;
   grid-template-columns: repeat(auto-fill, 240px);
   gap: 26px;
   place-content: center;
-  margin-top: 20px;
 }
 .product-card {
   width: 240px;
@@ -342,7 +342,6 @@ aside {
   color: var(--very-light-pink);
 }
 
-
 @media (max-width: 640px) {
   .menu {
     display: block;
@@ -356,11 +355,9 @@ aside {
   .desktop-menu {
     display: none;
   }
-
   aside {
     width: 100%;
   }
-
   .cards-container {
     grid-template-columns: repeat(auto-fill, 140px);
   }