Detalles de un producto

👀 ojo al siguiente tip. En el mobile-menu, si le damos el width del 100%, nos generará un pequeño scrool horizontal, debido a que tenemos un padding de 24px a los lados, es decir, nuestro width sería del 100% + 48px (24px de padding a cada lado).
.
Si no queremos que ocurra esto😎, podemos solucionarlo así:

//Me parece que el padding derecho es innecesario por lo que lo quito, sientete libre de dejarlo si lo deseas

.mobile-menu {
  position: absolute;
  background-color: var(--white);
  top: 61px;
  left: 0;
  width: calc(100% - 24px);
  padding-left: 24px;
} 

.
En mi caso solamente le dejé el padding del lado izquierdo, por lo que solamente tengo 24px de ‘sobra’ si le coloco el width del 100%. Entonces…😏 al width le podemos dar como valor el resultado de la resta entre el 100% menos esos 24px que nos sobran. Eso lo hacemos en CSS con la función calc(). Y listo, haciendo esto, evitamos que el indeseado scrool apareza.

yo para evitarme dolores de cabeza lo que hice fue todas las clases de este nuevo aside les agregue al final -secundary es decir si ya teniamos product-detail :: peroduct-detail-secondary y asi con todas las clases de este nuevo aside y todas las clases del css asi este seria completamente diferente a todo lo que ya teniamos antes y solo quedaria activar y desactivarlo en javascript

a la hora de reemplazar el nombre de cada clase:

1. presionas control + f
   en el primer apartado buscas el nombre,

2. despliegas la flecha y en el siguiente colocas el nuevo nombre que vas a reemplazar,

3. en la parte derecha le das a replace all y ya reemplazas cada línea de forma más automatizada!

Lo primero que escucho “Haz commit” y yo: Yisus craist es verdad!! JAJJAA
GRACIAS

Les recuerdo en este comentario cómo hacer un commit a sus trabajos:

• Abre tu terminal en mi caso Git Bash

• Entra a la carpeta donde tienes los archivos que modificaste o subiste y la forma de entrar es escribiendo:

cd (nombre de la carpeta)  aplica las veces que sean hasta llegar a la carpeta correcta.

• Cuando estés allí, escribe ls (la l de lalo no la i latina). Observa los documentos que estén en esa carpeta.

• Escribe git status (para ver qué archivos se modificaron, aparecen en rojo)

• Escribe git add . (o puedes utilizar) git add -A

• Escribe git commit -m "aquí el nombre de tu comentario a la subida de archivos

• Y por último, Escribe: git push. Ahora ve a tu repositorio en github y mira si hubo modificaciones.

Suerte.

¡Me encanta todo esto! Antes de tomar este curso, hice el curso definitivo de HTML y CSS, luego el curso práctico de HTML y CSS, después el de Maquetación Mobile First, el de Git y el básico de Javascript. ¡Y ahora todo hace click! Aunque me ha tomado más tiempo del que pensaba (trabajo 40 hr a la semana), veo el avance poco a poco, y todo comienza a cuajar. ¡Me encanta!

scroll horizontal Al darle un width del 100% En el mobile-menu, estamos generando un pequeño scrool horizontal, debido a que tenemos un padding de 24px a los lados, es decir, nuestro width sería del 100% + 48px (24px de padding a cada lado).
La mejor forma de solucionar esto en mi concepto es:

<code> 
  .mobile-menu {
    width: 100%;
    background-color: var(--white);
    padding: 24px;
    position: absolute;
    top: 60px;
    left: 0;
   ** box-sizing: border-box;**
  }

box-sizing: border-box; le da el tamaño a los contenedores, sumando tanto padding como margin

Yo cambie el nombre de la clase del carrito:

<aside class="product-detail inactive">

Lo cambie por:

<aside class="shopping-cart-detail inactive">

Y en el caso del product-info:

<div class="product-info">

Lo cambie por

<div class="product-detail-info">

Obviamente cambiando tambien el CSS y el JavaScript

Me parece mas facil cambiar nombres que selectores

Función para Activar y Desactivar </>

Tardé tres días en conseguirlo, pero estoy contento con el resultado 😊.

function  launchAndHide(linck,  element)  {
	const  push  =  document.querySelector(linck)
	const  launch  =  document.querySelector(element)

	let  inside;
	let  outside;
	let  allSide  =  true

	function  activate()  {
		launch.classList.toggle('inactive')
		inside  =  true
	}

	function  deactivate()  {

		if (allSide  &&  inside) {
			outside  =  true
			inside  =  false
			
		}  else  {
			launch.classList.add('inactive')
		}

		launch.addEventListener('click',  activate)
		}

	push.addEventListener('click',  activate)
	document.addEventListener('click',  deactivate)

}

Viendo esta clase de Juan David me hace recordar cuando tomé el curso de programación básica que era con Freddy, él todo el tiempo decía (Y ERA MUY INSISTENTE😂) que programar era tomar problemas grandes y convertirlos a la forma más pequeña que se pudiera y desde ahí empezar a resolver.

Pero bueno… Si necesitan dos formaatos diferentes en etiquetas diferentes, ¿no era mas facil con <BSIDE>? XD Perdon, lo tenia que hacer. XD

cambie las clases, a las nuevas les agregue aside-right y las que ya estaban aside-left.
todos felces, todos contentos y a otra cosa mariposa jajaja.

Yo había pensado en que esa misma clase podría ser un problema así que desde el curso de Teff, le asigne una clase diferente 😁

yo cambie el nombre del product-info y el product-detail del elemento que estaba introduciendo al código ya existente, me pareció mas fácil de manejar los distintos elementos de este modo

Solución al scroll del mobile menu

Vi que a algunos les aparecía un scroll en el mobile menu. Bueno, yo lo solucioné con la propiedad box-sizing: border-box, que lo que hace es tomar en cuenta el padding y el margen (el margen no estoy muy seguro), como tamaño completo del contenedor, así no tendrías que caulcular manualmente los tamaños e ir arreglando poco a poco los paddings. Quedaría de esta forma:

.mobile-menu {
    position: absolute;
    top: 60px;
    padding: 24px;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    background-color: var(--white);
}

Una solución, a mi parecer, bastante elegante 🎩.

Todo el día en esta clase, primero lo hice como lo veía yo y luego hacerlo como el prof para poder seguir el curso sin estar cambiando todo en casa paso, ahora tengo 2 ramas en este curso, bueno asi también practico con git

Bueno traigo dos aportes, uno es que decidi que el menu tiene que irse hasta abajo porque es mi gusto xd solo le agregue un “height: 100vh”

/*mobile menu*/
  .mobile-menu {
    background-color: var(--white);
    position: absolute;
    top: 60px;
    left: 0px;
    padding: 24px;
    width: 100%;
    height: 100vh;
  }

Y el segundo un vide de como editar varias linea a la vez en vscode
https://www.youtube.com/watch?v=Boy5XcFQ2As

Hay un atajo que ya estando seleccionada la palabra puede visual studio code encontrar la siguiente similitud y asi poder evitar seleccionarla de forma manual uno por uno.
windows es ctrl + d
mac es ⌘ + d

👋 Dato si ponen esto al empezar el CSS, haran que todos los elementos respeten el tamaño que les des y no se deformara con el padding y border.

Y ahora si, así tengo yo el menú para móvil :3

A mi se me hizo más fácil renombrar la primera clase del product-detail por product-overview, y el segundo product-detail lo dejé igual, ya que el product-overview debería mostrar un resumen del producto y el product detail ahora sí un detalle del producto, además del precio y la imagen.

Podemos seleccionar un elemento y pulsar después Ctrl+D, lo que irá añadiendo a nuestra selección una por una todas las ocurrencias de esa cadena, cuando hayamos seleccionado las que queremos bastará con editar una para que se editen todas.

nose si lo hice bien pero le agrege info a todas las clases del segundo aside infor-product-details

y cambie aside por div

Al aplicar width: 100% en el mobile menu estamos generando un scroll horizontal. Esto se debe a que el elemento cuenta con un padding de 24px. Podemos solucionarlo simplemente agregando right: 0 aprovechando que se trata de un elemento posicionado con el valor absolute.

.mobile-menu {
  position: absolute;
  background-color: var(--white);
  top: 61px;
  left: 0;
  right: 0;
  width: calc(100% - 24px);
  padding-left: 24px;
} 

Bueno para solucionar el problema con el css agregue con a las clases --2, y para agregarle un modal se me ocurrio hacerlo con dialog, aunque creo que ese aumento para los details seria mejor hacerlo con animaciones. asi quedo con dialog.

  <dialog id="dialog">
  <aside class="product-detail-2" >
    <div class="product-detail-2-close" onclick="dialog.close()">
      <img src="./icons/icon_close.png" alt="close">
    </div>
    <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="bike">
    <div class="product-info-2">
      <p>$35,00</p>
      <p>Bike</p>
      <p>With its practical position, this bike also fulfills a decorative function, add your hall or workspace.</p>
      <button class="primary-button add-to-cart-button">
        <img src="./icons/bt_add_to_cart.svg" alt="add to cart">
        Add to cart
      </button>
    </div>
  </aside>
</dialog>

main.js

/*render de productsList...*/
image.onclick = () => { dialog.showModal(); };

style.css

  dialog {
    width: 50%;
    height: 100%;
    overflow-block: 24px;
    border: transparent;
    border-radius: 15px;
    scroll-padding-top: 1200px;
  }

  @media (max-width: 640px) {
    .product-detail-2 {
      width: 100%;
    }
    .product-detail-2-close {
      left: 20px;
    }
    dialog {
      width: 100%;
    }
    .product-detail-2 > img:nth-child(2) {
      object-fit: contain;
      height: 100%;
    }
  }

un gif del modal en html >

Mis apuntes de este curso en Notion

Creo que es más sencillo, sólo cambiar todo lo que diga product-detail, shoppingCartContainer así todo mantendrá su mismo estado.

Si seleccionas el nombre de la variable o función y le das click derecho y seleccionas Rename Symbol todas las variables que tienen ese nombre cambian.
Y no tienes que ponerte a cambiar una por una.
No sé si funciona en todos los casos pero lo probé y me funcionó con la const aside que cambiamos por shoppingCartContainer

Agradezco que vscode tiene la linea de tiempo o de verdad que me hubiera rendido, me equivoque a lo grande y si no fuera por esa función del editor no seguiria aqui. Tuve que volver a ver la clase para entender mi error.

Me parece un poco tedioso el tema de cambiar los selectores, en el curso de teffy si vi algunos nombres de clases igual y sabia que en la fusion traeria problemas, he visto que mucha gente decidio solo cambiar clases lo cual me parece muy practico, aunque me gusta mucho la resolucion de este tipo de problemas que ha futuro se puedan presentar.

Yo le agregué una nueva clase al aside de product-detail, le cambié la clase al div que contenía la información del producto, para que no tomara los estilos cuando aparece la lista de productos.
En JS le agregué la función de aparecer el detalle del solo producto al hacer click en cualquier tarjeta.
Y bueno, hasta ahí llegué que luego quise hacer desaparecer la información del solo producto y no lo logré, ahora seguiré viendo la clase a ver cómo me quedó.
Aquí mi código:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <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>
    <img src="./icons/icon_menu.svg" alt="menu" class="menu">

    <div class="navbar-left">
      <img src="./logos/logo_yard_sale.svg" alt="logo" class="logo">

      <ul>
        <li>
          <a href="/">All</a>
        </li>
        <li>
          <a href="/">Clothes</a>
        </li>
        <li>
          <a href="/">Electronics</a>
        </li>
        <li>
          <a href="/">Furnitures</a>
        </li>
        <li>
          <a href="/">Toys</a>
        </li>
        <li>
          <a href="/">Others</a>
        </li>
      </ul>
    </div>

    <div class="navbar-right">
      <ul>
        <li class="navbar-email">[email protected]</li>
        <li class="navbar-shopping-cart">
          <img src="./icons/icon_shopping_cart.svg" alt="shopping cart">
          <div>2</div>
        </li>
      </ul>
    </div>

    <div class="desktop-menu inactive">
        <ul>
          <li>
            <a href="/" class="title">My orders</a>
          </li>
    
          <li>
            <a href="/">My account</a>
          </li>
    
          <li>
            <a href="/">Sign out</a>
          </li>
        </ul>
      </div>

      <div class="mobile-menu inactive">
        <ul>
          <li>
            <a href="/">CATEGORIES</a>
          </li>
          <li>
            <a href="/">All</a>
          </li>
          <li>
            <a href="/">Clothes</a>
          </li>
          <li>
            <a href="/">Electronics</a>
          </li>
          <li>
            <a href="/">Furnitures</a>
          </li>
          <li>
            <a href="/">Toys</a>
          </li>
          <li>
            <a href="/">Other</a>
          </li>
        </ul>
    
        <ul>
          <li>
            <a href="/">My orders</a>
          </li>
          <li>
            <a href="/">My account</a>
          </li>
        </ul>
    
        <ul>
          <li>
            <a href="/" class="email">[email protected]</a>
          </li>
          <li>
            <a href="/" class="sign-out">Sign out</a>
          </li>
        </ul>
      </div>
  </nav>

  <!-- <aside class="product-detail inactive">
    <div class="title-container">
      <img src="./icons/flechita.svg" alt="arrow">
      <p class="title">My order</p>
    </div>

    <div class="my-order-content">
      <div class="shopping-cart">
        <figure>
          <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="bike">
        </figure>
        <p>Bike</p>
        <p>$30,00</p>
        <img src="./icons/icon_close.png" alt="close">
      </div>

      <div class="shopping-cart">
        <figure>
          <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="bike">
        </figure>
        <p>Bike</p>
        <p>$30,00</p>
        <img src="./icons/icon_close.png" alt="close">
      </div>

      <div class="shopping-cart">
        <figure>
          <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="bike">
        </figure>
        <p>Bike</p>
        <p>$30,00</p>
        <img src="./icons/icon_close.png" alt="close">
      </div>

      <div class="order">
        <p>
          <span>Total</span>
        </p>
        <p>$560.00</p>
      </div>

      <button class="primary-button">
        Checkout
      </button>
    </div>
  </div>
  </aside>

  <aside class="product-detail">
    <div class="product-detail-close">
      <img src="./icons/icon_close.png" alt="close">
    </div>
    <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="bike">
    <div class="product-info">
      <p>$35,00</p>
      <p>Bike</p>
      <p>With its practical position, this bike also fulfills a decorative function, add your hall or workspace.</p>
      <button class="primary-button add-to-cart-button">
        <img src="./icons/bt_add_to_cart.svg" alt="add to cart">
        Add to cart
      </button>
    </div>
  </aside> -->
  
  <aside class="product-detail inactive product-detail-car">
    <div class="title-container">
      <img src="./icons/flechita.svg" alt="arrow">
      <p class="title">My order</p>
    </div>

    <div class="my-order-content">
      <div class="shopping-cart">
        <figure>
          <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="bike">
        </figure>
        <p>Bike</p>
        <p>$30,00</p>
        <img src="./icons/icon_close.png" alt="close">
      </div>

      <div class="shopping-cart">
        <figure>
          <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="bike">
        </figure>
        <p>Bike</p>
        <p>$30,00</p>
        <img src="./icons/icon_close.png" alt="close">
      </div>

      <div class="shopping-cart">
        <figure>
          <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="bike">
        </figure>
        <p>Bike</p>
        <p>$30,00</p>
        <img src="./icons/icon_close.png" alt="close">
      </div>

      <div class="order">
        <p>
          <span>Total</span>
        </p>
        <p>$560.00</p>
      </div>

      <button class="primary-button">
        Checkout
      </button>
    </div>
  </div>
  </aside>

  <aside class="product-detail inactive product-detail-menu">
    <div class="product-detail-close">
      <img src="./icons/icon_close.png" alt="close">
    </div>
    <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="bike">
    <div class="product-info-card">
      <p>$35,00</p>
      <p>Bike</p>
      <p>With its practical position, this bike also fulfills a decorative function, add your hall or workspace.</p>
      <button class="primary-button add-to-cart-button">
        <img src="./icons/bt_add_to_cart.svg" alt="add to cart">
        Add to cart
      </button>
    </div>
  </aside>

  <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>

CSS

:root {
    --white: #FFFFFF;
    --black: #000000;
    --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;
  }

  .inactive {
    display: none;
  }

  nav {
    display: flex;
    justify-content: space-between;
    padding: 0 24px;
    border-bottom: 1px solid var(--very-light-pink);
  }
  .menu {
    display: none;
  }
  .logo {
    width: 100px;
  }
  .navbar-left ul,
  .navbar-right ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    height: 60px;
  }
  .navbar-left {
    display: flex;
  }
  .navbar-left ul {
    margin-left: 12px;
  }
  .navbar-left ul li a,
  .navbar-right ul li a {
    text-decoration: none;
    color: var(--very-light-pink);
    border: 1px solid var(--white);
    padding: 8px;
    border-radius: 8px;
  }
  .navbar-left ul li a:hover,
  .navbar-right ul li a:hover {
    border: 1px solid var(--hospital-green);
    color: var(--hospital-green);
  }
  .navbar-email {
    color: var(--very-light-pink);
    cursor: pointer;
    font-size: var(--sm);
    margin-right: 12px;
  }
  .navbar-shopping-cart {
    position: relative;
  }
  .navbar-shopping-cart div {
    width: 16px;
    height: 16px;
    background-color: var(--hospital-green);
    border-radius: 50%;
    font-size: var(--sm);
    font-weight: bold;
    position: absolute;
    top: -6px;
    right: -3px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .desktop-menu {
    position: absolute;
    top: 60px;
    right: 60px;
    background: var(--white);
    width: 100px;
    height: auto;
    border: 1px solid var(--very-light-pink);
    border-radius: 6px;
    padding: 20px 20px 0 20px;
  }
  .desktop-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .desktop-menu ul li {
    text-align: end;
  }
  .desktop-menu ul li:nth-child(1),
  .desktop-menu ul li:nth-child(2) {
    font-weight: bold;
  }
  .desktop-menu ul li:last-child {
    padding-top: 20px;
    border-top: 1px solid var(--very-light-pink);
  }
  .desktop-menu ul li:last-child a {
    color: var(--hospital-green);
    font-size: var(--sm);
  }
  .desktop-menu ul li a {
    color: var(--back);
    text-decoration: none;
    margin-bottom: 20px;
    display: inline-block;
  }


  .mobile-menu {
    position: absolute;
    top: 60px;
    padding: 24px;
    background: var(--white);
  }
  .mobile-menu a {
    text-decoration: none;
    color: var(--black);
    font-weight: bold;
    /* margin-bottom: 24px; */
  }
  .mobile-menu ul {
    padding: 0;
    margin: 24px 0 0;
    list-style: none;
  }
  .mobile-menu ul:nth-child(1) {
    border-bottom: 1px solid var(--very-light-pink);
  }
  .mobile-menu ul li {
    margin-bottom: 24px;
  }
  .email {
    font-size: var(--sm);
    font-weight: 300 !important;
  }
  .sign-out {
    font-size: var(--sm);
    color: var(--hospital-green) !important;
  }

/* Aside (producto detail car y carrito)  */

  .product-detail {
    width: 360px;
    padding: 0 24px;
    box-sizing: border-box;
    position: absolute;
    right: 0;
    background: var(--white);
  }

  .title-container {
    display: flex;
  }
  .title-container img {
    transform: rotate(180deg);
    margin-right: 14px;
  }
  .title {
    font-size: var(--lg);
    font-weight: bold;
  }
  .order {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px;
    align-items: center;
    background-color: var(--text-input-field);
    margin-bottom: 24px;
    border-radius: 8px;
    padding: 0 24px;
  }
  .order p:nth-child(1) {
    display: flex;
    flex-direction: column;
  }
  .order p span:nth-child(1) {
    font-size: var(--md);
    font-weight: bold;
  }
  .order p:nth-child(2) {
    text-align: end;
    font-weight: bold;
  }
  .shopping-cart {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: 16px;
    margin-bottom: 24px;
    align-items: center;
  }
  .shopping-cart figure {
    margin: 0;
  }
  .shopping-cart figure img {
    width: 70px;
    height: 70px;
    border-radius: 20px;
    object-fit: cover;
  }
  .shopping-cart p:nth-child(2) {
    color: var(--very-light-pink);
  }
  .shopping-cart p:nth-child(3) {
    font-size: var(--md);
    font-weight: bold;
  }
  .primary-button {
    background-color: var(--hospital-green);
    border-radius: 8px;
    border: none;
    color: var(--white);
    width: 100%;
    cursor: pointer;
    font-size: var(--md);
    font-weight: bold;
    height: 50px;
  }



    /* Aside product detail menu */

    .product-detail-menu {
      padding-bottom: 24px;
    }
    .product-detail-close {
      background: var(--white);
      width: 14px;
      height: 14px;
      position: absolute;
      top: 24px;
      left: 24px;
      z-index: 2;
      padding: 12px;
      border-radius: 50%;
    }
    .product-detail-close:hover {
      cursor: pointer;
    }
    .product-detail > img:nth-child(2) {
      width: 100%;
      height: 360px;
      object-fit: cover;
      border-radius: 0 0 20px 20px;
    }
    .product-info-card  {
      margin: 24px 24px 0 24px;
    }
    .product-info-card  p:nth-child(1) {
      font-weight: bold;
      font-size: var(--md);
      margin-top: 0;
      margin-bottom: 4px;
    }
    .product-info-card  p:nth-child(2) {
      color: var(--very-light-pink);
      font-size: var(--md);
      margin-top: 0;
      margin-bottom: 36px;
    }
    .product-info-card  p:nth-child(3) {
      color: var(--very-light-pink);
      font-size: var(--sm);
      margin-top: 0;
      margin-bottom: 36px;
    }
    .primary-button {
      background-color: var(--hospital-green);
      border-radius: 8px;
      border: none;
      color: var(--white);
      width: 100%;
      cursor: pointer;
      font-size: var(--md);
      font-weight: bold;
      height: 50px;
    }
    .add-to-cart-button {
      display: flex;
      align-items: center;
      justify-content: center;
    }

  /* Lista de productos  */

  .cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, 240px);
    gap: 26px;
    place-content: center;
    margin-top: 24px;
  }
  .product-card {
    width: 240px;
  }
  .product-card img {
    width: 240px;
    height: 240px;
    border-radius: 20px;
    object-fit: cover;
  }
  .product-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
  }
  .product-info figure {
    margin: 0;
  }
  .product-info figure img {
    width: 35px;
    height: 35px;
  }
  .product-info div p:nth-child(1) {
    font-weight: bold;
    font-size: var(--md);
    margin-top: 0;
    margin-bottom: 4px;
  }
  .product-info div p:nth-child(2) {
    font-size: var(--sm);
    margin-top: 0;
    margin-bottom: 0;
    color: var(--very-light-pink);
  }
 

  @media (max-width: 640px) {
    .menu {
      display: block;
    }
    .navbar-left ul {
      display: none;
    }
    .navbar-email {
      display: none;
    }
    .desktop-menu {
        display: none;
    }
    .product-detail {
      width: 100%;
    }

    .cards-container {
      grid-template-columns: repeat(auto-fill, 140px);
    }
    .product-card {
      width: 140px;
    }
    .product-card img {
      width: 140px;
      height: 140px;
    }

  }

  @media (min-width: 641px) {
    .mobile-menu {
        display: none;
    }
  }

JS

const menuEmail = document.querySelector (".navbar-email")
const desktopMenu = document.querySelector (".desktop-menu")
const menuHamIcon = document.querySelector (".menu")
const menuCarIcon = document.querySelector (".navbar-shopping-cart")
const mobileMenu = document.querySelector (".mobile-menu")
const aside = document.querySelector (".product-detail-car")
const cardsContainer = document.querySelector (".cards-container")
const asideProduct = document.querySelector(".product-detail-menu")


menuEmail.addEventListener ("click", toggleDesktopMenu)
menuHamIcon.addEventListener ("click", toggleMobileMenu)
menuCarIcon.addEventListener ("click", toggleCarAside)
cardsContainer.addEventListener ("click", toggleProductAside)

function toggleDesktopMenu () {
    const isCarClosed = aside.classList.contains ("inactive")

    if  (!isCarClosed) {
        aside.classList.add ("inactive")
    } 
    desktopMenu.classList.toggle("inactive")
}

function toggleMobileMenu () {
    const isCarClosed = aside.classList.contains ("inactive")
    

    if  (!isCarClosed) {
        aside.classList.add ("inactive")
    } 

   
    mobileMenu.classList.toggle("inactive")
}

function toggleCarAside () {
    const isMobileMenuClosed = mobileMenu.classList.contains ("inactive")
    const isDesktopMenuClosed = desktopMenu.classList.contains ("inactive")
    

    if  (!isMobileMenuClosed || !isDesktopMenuClosed) {
        mobileMenu.classList.add ("inactive")
        desktopMenu.classList.add ("inactive")
    }
    
   

    aside.classList.toggle("inactive")
}

function toggleProductAside () {
    
    asideProduct.classList.toggle("inactive")
}

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"
})

productList.push ( {
    name: "Pantalla",
    price: 250,
    image: "https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
})

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"
})

productList.push ( {
    name: "Pantalla",
    price: 250,
    image: "https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
})

productList.push ( {
    name: "Computador",
    price: 520,
    image: "https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
})

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"
})

productList.push ( {
    name: "Pantalla",
    price: 250,
    image: "https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
})

productList.push ( {
    name: "Computador",
    price: 520,
    image: "https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
})

function renderProducts (arr) {
    for (product of arr) {
        const productCard = document.createElement ("div")
        productCard.classList.add ("product-card")
    
        const productImg = document.createElement ("img")
        productImg.setAttribute("src", product.image)
    
        const productInfo = document.createElement ("div")
        productInfo.classList.add ("product-info")
        
        const productInfoDiv = document.createElement ("div")
    
        const productPrice = document.createElement ("p")
        productPrice.innerText = "$" + product.price
        const productName = document.createElement ("p")
        productName.innerText = product.name
    
        productInfoDiv.appendChild(productPrice)
        productInfoDiv.appendChild(productName)
    
        const productInfoFigure = document.createElement ("figure")
        const productImgCart = document.createElement ("img")
        productImgCart.setAttribute ("src", "./icons/bt_add_to_cart.svg")
    
        productInfoFigure.appendChild(productImgCart)
    
        productInfo.appendChild(productInfoDiv)
        productInfo.appendChild(productInfoFigure)
    
        productCard.appendChild (productImg)
        productCard.appendChild (productInfo)
        
        cardsContainer.appendChild (productCard)
        
    }
}

renderProducts(productList)

Excelente clase

solo agrege un 1 al final de cada clase de la clase 12 y a sus estilos y listo

yo lo que hice para no modificar tanto código fue cambiar el nombre de las clases de product detail y product info tanto html como en css, quizá no queda tan descriptivo pero lo solucioné rápido sin tocar mi .js :v

Yo resolví el problema de las clases iguales desde el curso práctico de frontend, dado que se suponía que en cursos posteriores se iba a integrar todo supuse que tener esas clases con el mismo nombre sería contraproducente. Ahora estoy muy agradecido con mi yo del pasado

MI APORTE
me parecio mas sencillo hacer un div contenedor de los aside y las clases por ahora una en español y la otra en ingles …
<div class= “contenedor-aside”>
<aside class = "product-detail inactive></aside>
<aside class = “detalle-producto”></aside>
</div>

yo creo que seria mejor cambiar el nombre de la clase product-detail a cart-detail, pienso que es mejor, voy a ensayar a ver que pasa ajjajja

profe no cree que se enreda mucho con la explicacion??

Mi aporte, no se si alguien ya lo dijo pero en vs en windows si seleccionas una palabra y das ctrl + f , te muestra todas las palabras con el mismo nombre y las puedes cambiar el nombra a todas a la vez.

😄La forma en como resolvi el problema fue simple.

coment’ el %80 de todo el contenido que no me aportaba nada (me hizo ver el problema demasiado facil).

para comenzar obte por modificar el product-datail desde cambiarle de nombre y modificarlo en JS.

🥐 Una vez cambie el nombre el resto fue pan comido!

En el 2° product-detail hice solo unas modificaciones en product-info tanto en HTML y CSS ya que esta colisionaba con el datos del main-content.

hasta el momento me había salvado de hacer un git reset --hard, pero siempre hay una primera vez

Yo solo reemplace en el VSCODE los items de la clase 12 y despues lo pegue en el index

Aunque no sé si sea la solución más óptima, yo lo que hice fue agregarle a las clases “product-detail” en el archivo de clase12.html un “-2”

Para seleccionarlos todos al mismo tiempo solo tuve que seleccionar una de las clases y presionar en Visual Studio Code la combinación CTRL+SHIFT+L, luego quedan todos seleccionados incluyendo los que están en la etiqueta style y procedí a agregar el “-2”, eso me permitió no romper el código que ya estaba hecho en la clase 12 y al mismo tiempo eliminar el conflicto que generaba al agregarlo al index.html

Nota: En este caso fue una ventaja tener los stilos CSS en el mismo archivo porque me permitió cambiar todas las clases al mismo tiempo 😄

El detalle del scroll en el menú móbil se resuelve agregando la propiedad box-sizing: border-box a la clase .mobile-menu, así:

no sé que solución ha dado para los product-detail, apenas voy por minuto 3:14 pero lo lógico que veo yo es sencillamente poner product-detail-two en los html y css

Como supo que no habia hecho commit de hace unas clases 😮

:root {
    --white: #FFFFFF;
    --black: #000000;
    --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;
  }
  /* IN-ACTIVE */
  .inactive{
    display: none;
  }

  /* NAV */
  nav {
    display: flex;
    justify-content: space-between;
    padding: 0 24px;
    border-bottom: 1px solid var(--very-light-pink);
  }
  .menu {
    display: none;
  }
  .logo {
    width: 100px;
  }
  .navbar-left ul,
  .navbar-right ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    height: 60px;
  }
  /* contenedores del nav */
  .navbar-left {
    display: flex;
    outline: 1px solid red;
  }
  .navbar-right{
    outline: 1px solid red;
    /* cursor: pointer; */
    padding: 5px;
    /* width: 100%; */
  }

  /*  */
  .navbar-left ul {
    margin-left: 12px;
  }
  .navbar-left ul li a,
  .navbar-right ul li a {
    text-decoration: none;
    color: var(--very-light-pink);
    border: 1px solid var(--white);
    padding: 8px;
    border-radius: 8px;
  }
  .navbar-left ul li a:hover,
  .navbar-right ul li a:hover {
    border: 1px solid var(--hospital-green);
    color: var(--hospital-green);
  }
  .navbar-email {
    cursor: pointer;
    color: var(--very-light-pink);
    font-size: var(--sm);
    margin-right: 12px;
    padding: 5px;
  }
  .navbar-email:hover{
    background-color: var(--hospital-green);
    border-radius: 20px;
    color: var(--white);
    text-decoration: underline;
    /* padding: 5px; */

  }
  .navbar-shopping-cart {
    position: relative;
  }
  .navbar-shopping-cart div {
    width: 16px;
    height: 16px;
    background-color: var(--hospital-green);
    border-radius: 50%;
    font-size: var(--sm);
    font-weight: bold;
    position: absolute;
    top: -6px;
    right: -3px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /* DESKTOP MENU */
  .desktop-menu {
    position: absolute;
    top: 60px;
    right: 60px;
    background-color: var(--white);
    width: 100px;
    height: auto;
    border: 1px solid var(--very-light-pink);
    border-radius: 6px;
    padding: 20px 20px 0 20px;
  }
  .desktop-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .desktop-menu ul li {
    text-align: end;
  }
  .desktop-menu ul li:nth-child(1),
  .desktop-menu ul li:nth-child(2) {
    font-weight: bold;
  }
  .desktop-menu ul li:last-child {
    padding-top: 20px;
    border-top: 1px solid var(--very-light-pink);
  }
  .desktop-menu ul li:last-child a {
    color: var(--hospital-green);
    font-size: var(--sm);
  }
  .desktop-menu ul li a {
    color: var(--back);
    text-decoration: none;
    margin-bottom: 20px;
    display: inline-block;
  }

  /* MOBILE MENU */
  .mobile-menu {
    background-color: var(--white);
    position: absolute;
    top: 60px;
    left: 0;
    width: 100%;
    padding: 24px;
  }
  .mobile-menu a {
    text-decoration: none;
    color: var(--black);
    font-weight: bold;
    /* margin-bottom: 24px; */
  }
  .mobile-menu ul {
    padding: 0;
    margin: 24px 0 0;
    list-style: none;
  }
  .mobile-menu ul:nth-child(1) {
    border-bottom: 1px solid var(--very-light-pink);
  }
  .mobile-menu ul li {
    margin-bottom: 24px;
  }
  .email {
    font-size: var(--sm);
    font-weight: 300 !important;
  }
  .sign-out {
    font-size: var(--sm);
    color: var(--hospital-green) !important;
  }

  /* ASIDE - PRODUCT DETAIL Y SHOPPING CAR */
  aside{
    background-color: var(--white);
    width: 360px;
    /* padding: 0 24px; */
    box-sizing: border-box;
    position: absolute;
    right: 0;
  }

  /* SHOPPING CART */
  #shoppingCartContainer{
    padding: 0 24px;
  }
  .title-container {
    display: flex;
  }
  .title-container img {
    transform: rotate(180deg);
    margin-right: 14px;
  }
  .title {
    font-size: var(--lg);
    font-weight: bold;
  }
  .order {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px;
    align-items: center;
    background-color: var(--text-input-field);
    margin-bottom: 24px;
    border-radius: 8px;
    padding: 0 24px;
  }
  .order p:nth-child(1) {
    display: flex;
    flex-direction: column;
  }
  .order p span:nth-child(1) {
    font-size: var(--md);
    font-weight: bold;
  }
  .order p:nth-child(2) {
    text-align: end;
    font-weight: bold;
  }
  .shopping-cart {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: 16px;
    margin-bottom: 24px;
    align-items: center;
  }
  .shopping-cart figure {
    margin: 0;
  }
  .shopping-cart figure img {
    width: 70px;
    height: 70px;
    border-radius: 20px;
    object-fit: cover;
  }
  .shopping-cart p:nth-child(2) {
    color: var(--very-light-pink);
  }
  .shopping-cart p:nth-child(3) {
    font-size: var(--md);
    font-weight: bold;
  }
  .primary-button {
    background-color: var(--hospital-green);
    border-radius: 8px;
    border: none;
    color: var(--white);
    width: 100%;
    cursor: pointer;
    font-size: var(--md);
    font-weight: bold;
    height: 50px;
  }

  /* PRODUCT DETAILS */
  .product-detail-close {
    background: var(--white);
    width: 14px;
    height: 14px;
    position: absolute;
    top: 24px;
    left: 24px;
    z-index: 2;
    padding: 12px;
    border-radius: 50%;
  }
  .product-detail-close:hover {
    cursor: pointer;
  }
  #productDetail > img:nth-child(2) {
    width: 100%;
    height: 360px;
    object-fit: cover;
    border-radius: 0 0 20px 20px;
  }
  #productDetail .product-info {
    margin: 24px 24px 0 24px;
  }
  #productDetail .product-info p:nth-child(1) {
    font-weight: bold;
    font-size: var(--md);
    margin-top: 0;
    margin-bottom: 4px;
  }
  #productDetail .product-info p:nth-child(2) {
    color: var(--very-light-pink);
    font-size: var(--md);
    margin-top: 0;
    margin-bottom: 36px;
  }
  #productDetail .product-info p:nth-child(3) {
    color: var(--very-light-pink);
    font-size: var(--sm);
    margin-top: 0;
    margin-bottom: 36px;
  }
  .primary-button {
    background-color: var(--hospital-green);
    border-radius: 8px;
    border: none;
    color: var(--white);
    width: 100%;
    cursor: pointer;
    font-size: var(--md);
    font-weight: bold;
    height: 50px;
  }
  .add-to-cart-button {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* PRODUCT LIST */
  .cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, 240px);
    gap: 26px;
    place-content: center;
    margin-top: 20px;
  }
  .product-card {
    width: 240px;
  }
  .product-card img {
    width: 240px;
    height: 240px;
    border-radius: 20px;
    object-fit: cover;
  }
  .product-card .product-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
  }
  .product-card .product-info figure {
    margin: 0;
  }
  .product-card .product-info figure img {
    width: 35px;
    height: 35px;
  }
  .product-card .product-info div p:nth-child(1) {
    font-weight: bold;
    font-size: var(--md);
    margin-top: 0;
    margin-bottom: 4px;
  }
  .product-card .product-info div p:nth-child(2) {
    font-size: var(--sm);
    margin-top: 0;
    margin-bottom: 0;
    color: var(--very-light-pink);
  }

  /* MEDIA QUERIES */
  /* MAX-WIDTH */
  @media (max-width: 640px) {
    .menu {
      display: block;
    }
    .navbar-left ul {
      display: none;
    }
    .navbar-email {
      display: none;
    }

    /*  */
    .desktop-menu{
      display: none;
    }
    #productDetail {
      width: 100%;
    }

    /*  */
    .cards-container {
      grid-template-columns: repeat(auto-fill, 140px);
    }
    .product-card {
      width: 140px;
    }
    .product-card img {
      width: 140px;
      height: 140px;
    }
  }

  /* MIN-WIDTH */
  @media (min-width: 641px) {
    .mobile-menu{
      display: none;
    }
  }

Se me había olvidado hacer los commits
😥

Atajos de git en tu terminal de VSCODE:
gd: te sale un menú y para salir presionas "q"
gaa
gcmsg "Commit name"
ggpush

Se me olvidaba hacer Commit ;v

En mi caso modifique las class de la otra etiqueta <aside> en el html y el los estilos por:
product-detail-individual
product-info-individual
creo que evite dañar mucho la página web.

este es mi codigo por si quieren conservar su padding y se mantenga en la posición que esta y que el background ocupe el 100% sin crear un scroll horizontal

background-color: var(–hospital-green);
padding: 24px;
position: absolute;
top: 60px;
left: 0;
width: -webkit-fill-available;
height: -webkit-fill-available;

Para cambiar la variable, Seleccionan y F2… Escriben el nuevo nombre.

I think the easiest way to tackle the aside issue is to create two separate asides within the body tag, and have each of them with a different class name. For example what I did was to keep the product-detail class, and then labeled the other aside with a class of product-detail-info. That did solve the problem, but keep in mind you must also have to change the name to the CSS stylesheet, but overall it worked just fine

Definitivamente esta clase fue bastante complicada por el spaguetti de clases mezcladas, es un gran ejemplo de cómo hay que tener paciencia para solucionar conflictos como este.

Yo lo que hice fue cambiarle la clase al padre y a los hijos, tipo:
En vez de “product-detail” -> "product-description"
Y en vez de “product-info” -> "product-description-info"
Y pues también hacer lo mismo en CSS, así dejaba en paz al aside que se había hecho antes.

Yo le agregué simplemente un “-right” a la clase del div creo que es una manera bastante simple y fácil, si darme cuenta arregle todo el código de la clase 😃

La verdad, en esta clase ya me perdí… Creo que, para evitar eso, era mejor desde un principio crear el CSS aparte y hacer que todo funcionara adecuadamente desde ahí.

commit hecho…

seme hizo muy confuso esta clase la verdad solo copie el codigo pero luego entendi comose hacia, y si me toca ami algo similar se me ocurrio que antes de agregar el componente al index pirmero cambio el nombre de las clases y lo oganizo andes de meterlo al index,

pero me imagino que esto es solo un ejemplo basico para comprender y que mas adelante con reac.js sera muy simple

**buen profesor aun no puedo creer que yo ya sepa leer el codigo **

a ver antes de ver la clase me imagine las tareas a hacer, e hice las siguientes modificaciones para que los detalles de los productos aparecieran cuando les doy click, aparte para solucionar el problema de los nombres de las clases, le cambie el nombre de la clase a la segunda side bar y arregle el css para que coincida

js

const menuEmail = document.querySelector(".navbar-email");
const menuDesktop = document.querySelector(".desktop-menu");
const menuHamburguer = document.querySelector(".menu");
const mobileMenu = document.querySelector(".mobile-menu");
const carrito = document.querySelector(".navbar-shopping-cart");
const compra = document.querySelector(".product-detail");
const cardContainer = document.querySelector(".cards-container")
const productDetail = document.querySelector(".product-detail-main")

const productList = []

menuEmail.addEventListener("click", toggleDesktopMenu);
menuHamburguer.addEventListener("click", toggleMobileMenu);
carrito.addEventListener("click", toggleCompraMenu);


function toggleDesktopMenu(){
    // if (menuDesktop.classList[1] == "inactive") {
    //     menuDesktop.classList.remove("inactive")
    // } else {
    //     menuDesktop.classList.add("inactive")
    // }
    menuDesktop.classList.toggle("inactive");
    compra.classList.add("inactive");
};

function toggleMobileMenu(){
    mobileMenu.classList.toggle("inactive");
    compra.classList.add("inactive");
};

function toggleCompraMenu (){
    compra.classList.toggle("inactive");
    mobileMenu.classList.add("inactive");
    menuDesktop.classList.toggle("inactive");
}

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",
    description: "bicicleta clasica muy comoda para recorridos recreativos comodos al aire libre, como plus en tu casa puede servir de decoracion debido a su estilo vintage"
})
productList.push({
    name: "Laptop",
    price: 2000,
    image: "https://images.unsplash.com/photo-1496181133206-80ce9b88a853?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1471&q=80",
    description: "Laptop de altas prestaciones escelente para el uso de hogar y oficina, 16gb de ram, i7 1150U, alamcenamiento m.2 NVME de 1 TeraByte"
})
productList.push({
    name: "Desktop Computer",
    price: 3000,
    image: "https://images.unsplash.com/photo-1619597455322-4fbbd820250a?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80",
    description: "PC especial si quieres adentrarte en el mundo GAMER o de diseño 32gb de ram, i9-12900k, alamcenamiento m.2 NVME de 1 TeraByte, grafica nvidia GTX3080"
})

/* <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> */

function renderProducts(array) {
    for (product of array) {
        const productCard = document.createElement("div")
        productCard.classList.add("product-card")
    
        const img = document.createElement("img")
        img.setAttribute("src",product.image)
    
        const productInfo = document.createElement("div")
        productInfo.classList.add("product-info")
    
        const productData = document.createElement("div")
    
        const productPrice = document.createElement("p")
        productPrice.innerText = product.price + "$"
    
        const productName = document.createElement("p")
        productName.innerText = product.name
    
        productData.appendChild(productPrice)
        productData.appendChild(productName)
    
        const productInfoFigure = document.createElement("figure")
        const productInfoLogo = document.createElement("img")
        productInfoLogo.setAttribute("src","./icons/bt_add_to_cart.svg")
    
        productInfoFigure.appendChild(productInfoLogo)
    
        productInfo.appendChild(productData)
        productInfo.appendChild(productInfoFigure)
    
        productCard.appendChild(img)
        productCard.appendChild(productInfo)
    
        cardContainer.appendChild(productCard)
    }
}

renderProducts(productList)

const cardsCreated = document.getElementsByClassName ("product-card") //aqui creo una variable con los bloques html creados por la anterior funcion
const imgDetail = document.querySelector(".imageDetail")
const priceDetail = document.querySelector(".price-detail")
const nameDetail = document.querySelector(".name-detail")
const especDetail = document.querySelector(".espec-detail")
const detailClose = document.querySelector(".product-detail-main-close")

detailClose.addEventListener("click", closeDetailWindow) // funcion de cerrado de la ventana

function closeDetailWindow () {
    productDetail.classList.add("inactive")
}

//aqui creo un for que me crea un evenListener de click para cada tarjeta creada en la anterior funcion y le asigno dinamicamente los valores correspondientes con el array productList para que los datos de las caracteristicas coincidan con la tarjeta a la que se le da click
for (let index = 0; index < cardsCreated.length; index++){
    cardsCreated[index].addEventListener("click", showDetails)
    function showDetails() {
        productDetail.classList.remove("inactive")
        imgDetail.setAttribute("src" ,productList[index].image)
        priceDetail.innerText = productList[index].price
        nameDetail.innerText = productList[index].name
        especDetail.innerText = productList[index].description
    }
}

css

/* estilos generales */
:root {
    --white: #FFFFFF;
    --black: #000000;
    --very-light-pink: #C7C7C7;
    --text-input-field: #F7F7F7;
    --hospital-green: #ACD9B2;
    --sm: 14px;
    --md: 16px;
    --lg: 18px;
  }

  .inactive{
    display: none;
  }

  body {
    margin: 0;
    font-family: 'Quicksand', sans-serif;
  }

  /* estilos de la Navbar General */
  nav {
    display: flex;
    justify-content: space-between;
    padding: 0 24px;
    border-bottom: 1px solid var(--very-light-pink);
  }
  .menu {
    display: none;
  }
  .logo {
    width: 100px;
  }
  .navbar-left ul,
  .navbar-right ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    height: 60px;
  }
  .navbar-left {
    display: flex;
  }
  .navbar-left ul {
    margin-left: 12px;
  }
  .navbar-left ul li a,
  .navbar-right ul li a {
    text-decoration: none;
    color: var(--very-light-pink);
    border: 1px solid var(--white);
    padding: 8px;
    border-radius: 8px;
  }
  .navbar-left ul li a:hover,
  .navbar-right ul li a:hover {
    border: 1px solid var(--hospital-green);
    color: var(--hospital-green);
  }
  .navbar-email {
    color: var(--very-light-pink);
    cursor: pointer;
    font-size: var(--sm);
    margin-right: 12px;
  }
  .navbar-shopping-cart {
    position: relative;
  }
  .navbar-shopping-cart div {
    width: 16px;
    height: 16px;
    background-color: var(--hospital-green);
    border-radius: 50%;
    font-size: var(--sm);
    font-weight: bold;
    position: absolute;
    top: -6px;
    right: -3px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /*Menu Desktop */
  .desktop-menu {
    background-color: var(--white);
    position: absolute;
    top: 60px;
    right: 60px;
    width: 100px;
    height: auto;
    border: 1px solid var(--very-light-pink);
    border-radius: 6px;
    padding: 20px 20px 0 20px;
  }
  .desktop-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .desktop-menu ul li {
    text-align: end;
  }
  .desktop-menu ul li:nth-child(1),
  .desktop-menu ul li:nth-child(2) {
    font-weight: bold;
  }
  .desktop-menu ul li:last-child {
    padding-top: 20px;
    border-top: 1px solid var(--very-light-pink);
  }
  .desktop-menu ul li:last-child a {
    color: var(--hospital-green);
    font-size: var(--sm);
  }
  .desktop-menu ul li a {
    color: var(--back);
    text-decoration: none;
    margin-bottom: 20px;
    display: inline-block;
  }

  /* Mobile Menu */
  .mobile-menu {
    background-color: var(--white);
    position: absolute;
    top: 61px;
    padding: 24px;
  }
  .mobile-menu a {
    text-decoration: none;
    color: var(--black);
    font-weight: bold;
    /* margin-bottom: 24px; */
  }
  .mobile-menu ul {
    padding: 0;
    margin: 24px 0 0;
    list-style: none;
  }
  .mobile-menu ul:nth-child(1) {
    border-bottom: 1px solid var(--very-light-pink);
  }
  .mobile-menu ul li {
    margin-bottom: 24px;
  }
  .email {
    font-size: var(--sm);
    font-weight: 300 !important;
  }
  .sign-out {
    font-size: var(--sm);
    color: var(--hospital-green) !important;
  }


  /* Aside (product-detail) */
  .product-detail, .product-detail-main {
    background-color: var(--white);
    width: 360px;
    padding: 0 24px;
    box-sizing: border-box;
    position: absolute;
    right: 0;
  }
  .title-container {
    display: flex;
  }
  .title-container img {
    transform: rotate(180deg);
    margin-right: 14px;
  }
  .title {
    font-size: var(--lg);
    font-weight: bold;
  }
  .order {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 16px;
    align-items: center;
    background-color: var(--text-input-field);
    margin-bottom: 24px;
    border-radius: 8px;
    padding: 0 24px;
  }
  .order p:nth-child(1) {
    display: flex;
    flex-direction: column;
  }
  .order p span:nth-child(1) {
    font-size: var(--md);
    font-weight: bold;
  }
  .order p:nth-child(2) {
    text-align: end;
    font-weight: bold;
  }
  .shopping-cart {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: 16px;
    margin-bottom: 24px;
    align-items: center;
  }
  .shopping-cart figure {
    margin: 0;
  }
  .shopping-cart figure img {
    width: 70px;
    height: 70px;
    border-radius: 20px;
    object-fit: cover;
  }
  .shopping-cart p:nth-child(2) {
    color: var(--very-light-pink);
  }
  .shopping-cart p:nth-child(3) {
    font-size: var(--md);
    font-weight: bold;
  }
  .primary-button {
    background-color: var(--hospital-green);
    border-radius: 8px;
    border: none;
    color: var(--white);
    width: 100%;
    cursor: pointer;
    font-size: var(--md);
    font-weight: bold;
    height: 50px;
  }

  /* product detail main */

  .product-detail-main-close {
    background: var(--white);
    width: 14px;
    height: 14px;
    position: absolute;
    top: 24px;
    left: 24px;
    z-index: 2;
    padding: 12px;
    border-radius: 50%;
  }
  .product-detail-main-close:hover {
    cursor: pointer;
  }
  .product-detail-main > img:nth-child(2) {
    width: 100%;
    height: 360px;
    object-fit: cover;
    border-radius: 0 0 20px 20px;
  }
  .product-info-main {
    margin: 24px 24px 0 24px;
  }
  .product-info-main p:nth-child(1) {
    font-weight: bold;
    font-size: var(--md);
    margin-top: 0;
    margin-bottom: 4px;
  }
  .product-info-main p:nth-child(2) {
    color: var(--very-light-pink);
    font-size: var(--md);
    margin-top: 0;
    margin-bottom: 36px;
  }
  .product-info-main p:nth-child(3) {
    color: var(--very-light-pink);
    font-size: var(--sm);
    margin-top: 0;
    margin-bottom: 36px;
  }
  .primary-button-main {
    background-color: var(--hospital-green);
    border-radius: 8px;
    border: none;
    color: var(--white);
    width: 100%;
    cursor: pointer;
    font-size: var(--md);
    font-weight: bold;
    height: 50px;
  }
  .add-to-cart-button {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* lista de productos */

  .cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, 240px);
    gap: 26px;
    place-content: center;
    margin-top: 20px;
  }
  .product-card {
    width: 240px;
  }
  .product-card img {
    width: 240px;
    height: 240px;
    border-radius: 20px;
    object-fit: cover;
  }
  .product-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
  }
  .product-info figure {
    margin: 0;
  }
  .product-info figure img {
    width: 35px;
    height: 35px;
  }
  .product-info div p:nth-child(1){
    font-weight: bold;
    font-size: var(--md);
    margin-top: 0;
    margin-bottom: 4px;
  }
  .product-info div p:nth-child(2) {
    font-size: var(--sm);
    margin-top: 0;
    margin-bottom: 0;
    color: var(--very-light-pink);
  }

  @media (max-width: 640px) {
    .menu {
      display: block;
    }
    .navbar-left ul {
      display: none;
    }
    .navbar-email {
      display: none;
    }
    .desktop-menu {
        display: none;
    }
    .product-detail {
        width: 100%;
    }
    .cards-container {
        grid-template-columns: repeat(auto-fill, 140px);
    }
    .product-card {
        width: 140px;
    }
    .product-card img {
        width: 140px;
    }
    .product-detail-main {
          width: 100%;
    }
    
  }

  @media (min-width: 641px) {
    .mobile-menu {
        display: none;
        height: 140px;
        }
    }

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./style.css">
  <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">

  <title>YardSale: tienda de cosas de la casa</title>
</head>
<body>
  <nav>
    <img src="./icons/icon_menu.svg" alt="menu" class="menu">

    <div class="navbar-left">
      <img src="./logos/logo_yard_sale.svg" alt="logo" class="logo">

      <ul>
        <li>
          <a href="/">All</a>
        </li>
        <li>
          <a href="/">Clothes</a>
        </li>
        <li>
          <a href="/">Electronics</a>
        </li>
        <li>
          <a href="/">Furnitures</a>
        </li>
        <li>
          <a href="/">Toys</a>
        </li>
        <li>
          <a href="/">Others</a>
        </li>
      </ul>
    </div>

    <div class="navbar-right">
      <ul>
        <li class="navbar-email">[email protected]</li>
        <li class="navbar-shopping-cart">
          <img src="./icons/icon_shopping_cart.svg" alt="shopping cart">
          <div>2</div>
        </li>
      </ul>
    </div>

    <div class="desktop-menu inactive">
        <ul>
          <li>
            <a href="/" class="title">My orders</a>
          </li>
    
          <li>
            <a href="/">My account</a>
          </li>
    
          <li>
            <a href="/">Sign out</a>
          </li>
        </ul>
    </div>

    <div class="mobile-menu inactive">
        <ul>
          <li>
            <a href="/">CATEGORIES</a>
          </li>
          <li>
            <a href="/">All</a>
          </li>
          <li>
            <a href="/">Clothes</a>
          </li>
          <li>
            <a href="/">Electronics</a>
          </li>
          <li>
            <a href="/">Furnitures</a>
          </li>
          <li>
            <a href="/">Toys</a>
          </li>
          <li>
            <a href="/">Other</a>
          </li>
        </ul>
    
        <ul>
          <li>
            <a href="/">My orders</a>
          </li>
          <li>
            <a href="/">My account</a>
          </li>
        </ul>
    
        <ul>
          <li>
            <a href="/" class="email">[email protected]</a>
          </li>
          <li>
            <a href="/" class="sign-out">Sign out</a>
          </li>
        </ul>
      </div>
  </nav>
  <aside class="product-detail inactive">
    <div class="title-container">
      <img src="./icons/flechita.svg" alt="arrow">
      <p class="title">My order</p>
    </div>

    <div class="my-order-content">
      <div class="shopping-cart">
        <figure>
          <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="bike">
        </figure>
        <p>Bike</p>
        <p>$30,00</p>
        <img src="./icons/icon_close.png" alt="close">
      </div>

      <div class="shopping-cart">
        <figure>
          <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="bike">
        </figure>
        <p>Bike</p>
        <p>$30,00</p>
        <img src="./icons/icon_close.png" alt="close">
      </div>

      <div class="shopping-cart">
        <figure>
          <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="bike">
        </figure>
        <p>Bike</p>
        <p>$30,00</p>
        <img src="./icons/icon_close.png" alt="close">
      </div>

      <div class="order">
        <p>
          <span>Total</span>
        </p>
        <p>$560.00</p>
      </div>

      <button class="primary-button">
        Checkout
      </button>
    </div>
  </div>
  </aside>
  <aside class="product-detail-main inactive">
    <div class="product-detail-main-close">
      <img src="./icons/icon_close.png" alt="close">
    </div>
    <img class="imageDetail">
    <div class="product-info-main">
      <p class="price-detail"></p>
      <p class="name-detail"></p>
      <p class="espec-detail">With its practical position, this bike also fulfills a decorative function, add your hall or workspace.</p>
      <button class="primary-button-main add-to-cart-button">
        <img src="./icons/bt_add_to_cart.svg" alt="add to cart">
        Add to cart
      </button>
    </div>
  </aside>
  <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>

Yo voy así…solo tengo un inconveniente con que la vista de detalle de producto abra para cada producto en específico y no para el primero 😅. Espero se puede ver la solución en la siguiente clase.

Yo solo cambié los nombres de las clases 🗿

Me estrese entero en esta clase y eso que ya no tenia ninguno de estos problemas porque los preví en el curso de teff y arregle los estilos de los menú en clases pasadas. Pero dios, esta clase dolió aunque no debió XD

también agregue que si damos clic en la imagen del primer producto aparezca el product detail pero en javascript tuve que poner ese pedazo de código después de la función de render de productos ya que si lo hago antes me genera error ya que intenta tomar un query selector a un elemento que aun no esta renderizado como el contenedor de los productos

Para solucionar el scroll horizontal en el mobile menu, hay que ponerle un width 100%, pero al estar en absolute y tener padding, se sigue creando el scroll horizontal. para solucionar eso utilice la funcion “calc”. lo pegue a la izquierda con el left:0, le puse el padding left (24px), y al utilizar la funcion calc reste el 100view width con el padding (24px)

    .mobile-menu {
        position: absolute;
        top: 60px;
        left: 0;
        padding: 0 0 0 24px;
        background-color: var(--white);
        width: calc(100vw - 24px);
      }

En mi caso lo que hice fue cambiar el primer aside de ‘product-detail’ por ‘menu-container’ para ser mas especifico, y el ‘product-info’ de la vista principal a ‘main-product-info’, asi me elimino ese problema de una vez

Detección de problema en estilos aplicados a clase “product-info”

• Esta clase se utilizaba por partida doble, una en la lista de productos (contenedor debajo de la foto del producto) y otra en el aside de la presente clase (contenedor también debajo de la foto del producto)

_
Detección

_
Solución

Objetivo de la clase

• Vista desktop 💻
  
  
• Vista mobile 📱
  
  

Yo dejaria un product-details… y la otra página solo en esa página le cambio los nombres repetidos. y luego de cambiar allí si importo los cambios…

uff el profesor se fue por el camino mas largo es cuestion de solo agregarle algo mas a la clases y asi evitar de usar los identificadores y cambias muy poco codigo gracias a todos los cursos de ccs puedes buscar las mejores manera y rapida de solucionar pero me encanta el entusiamos del profe 😄

Para usar ancho del 100% y restar el padding se puede usar el valor “calc()”, yo por ejemplo lo utilicé así:

  .mobile-menu {
    width: calc(100% - 48px);
  }

En VScode Windows, Ctrl + 6 facilita el cambio de las clases para el aside en los archivos.

me parece mucho más sencillo agregar un diferenciador al segundo elemento product-detail

asi como:

  <aside class="product-detail--2">
    <div class="product-detail-close">
      <img src="./icons/icon_close.png" alt="close">
    </div>
    <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="bike">
    <div class="product-info--2">
      <p>$35,00</p>
      <p>Bike</p>
      <p>With its practical position, this bike also fulfills a decorative function, add your hall or workspace.</p>
      <button class="primary-button add-to-cart-button">
        <img src="./icons/bt_add_to_cart.svg" alt="add to cart">
        Add to cart
      </button>
    </div>
  </aside>

quedando el css como…

/*Aside  (product detail) */

.product-detail {
  background-color: var(--white);
  width: 360px;
  padding: 10px 24px;
  box-sizing: border-box;
  position: absolute;
  right: 0;
}
.title-container {
  display: flex;
}
.title-container img {
  transform: rotate(180deg);
  margin-right: 14px;
}
.title {
  font-size: var(--lg);
  font-weight: bold;
}
.order {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: center;
  background-color: var(--text-input-field);
  margin-bottom: 24px;
  border-radius: 8px;
  padding: 0 24px;
}
.order p:nth-child(1) {
  display: flex;
  flex-direction: column;
}
.order p span:nth-child(1) {
  font-size: var(--md);
  font-weight: bold;
}
.order p:nth-child(2) {
  text-align: end;
  font-weight: bold;
}
.shopping-cart {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 16px;
  margin-bottom: 24px;
  align-items: center;
}
.shopping-cart figure {
  margin: 0;
}
.shopping-cart figure img {
  width: 70px;
  height: 70px;
  border-radius: 20px;
  object-fit: cover;
}
.shopping-cart p:nth-child(2) {
  color: var(--very-light-pink);
}
.shopping-cart p:nth-child(3) {
  font-size: var(--md);
  font-weight: bold;
}
.primary-button {
  background-color: var(--hospital-green);
  border-radius: 8px;
  border: none;
  color: var(--white);
  width: 100%;
  cursor: pointer;
  font-size: var(--md);
  font-weight: bold;
  height: 50px;
} 
/* segundo aside product detail */

.product-detail--2 {
  background-color: var(--white);
  border: 1px solid #cdcdcd;
  border-radius: 20px;
  padding: 2px;
  width: 360px;
  padding-bottom: 24px;
  position: absolute;
  right: 0;
}
.product-detail-close {
  background: var(--white);
  width: 14px;
  height: 14px;
  position: absolute;
  top: 24px;
  left: 24px;
  z-index: 2;
  padding: 12px;
  border-radius: 50%;
}
.product-detail-close:hover {
  cursor: pointer;
}
.product-detail--2 > img:nth-child(2) {
  width: 100%;
  height: 360px;
  object-fit: cover;
  border-radius: 20px;
}
.product-info--2 {
  margin: 24px 24px 0 24px;
}
.product-info--2 p:nth-child(1) {
  font-weight: bold;
  font-size: var(--md);
  margin-top: 0;
  margin-bottom: 4px;
}
.product-info--2 p:nth-child(2) {
  color: var(--very-light-pink);
  font-size: var(--md);
  margin-top: 0;
  margin-bottom: 36px;
}
.product-info--2 p:nth-child(3) {
  color: var(--very-light-pink);
  font-size: var(--sm);
  margin-top: 0;
  margin-bottom: 36px;
}
.primary-button {
  background-color: var(--hospital-green);
  border-radius: 8px;
  border: none;
  color: var(--white);
  width: 100%;
  cursor: pointer;
  font-size: var(--md);
  font-weight: bold;
  height: 50px;
}
.add-to-cart-button {
  display: flex;
  align-items: center;
  justify-content: center;
}