No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Curso Pr谩ctico de JavaScript

Curso Pr谩ctico de JavaScript

Juan David Castro Gallego

Juan David Castro Gallego

Detalles de un producto

23/29
Recursos

Aportes 77

Preguntas 18

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

馃憖 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 鈥榮obra鈥 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 鈥淗az 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 鈥渉eight: 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 >

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

Me parece que esta vez si decidiste ahogarte en un vaso con agua. era tan simple como cambiar el nombre de solo uno. tanto en el html como en el css

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= 鈥渃ontenedor-aside鈥>
<aside class = "product-detail inactive></aside>
<aside class = 鈥渄etalle-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 鈥減roduct-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
馃槬

![](https://static.platzi.com/media/user_upload/image-7e6322b1-d348-4f81-889c-329f5c98f170.jpg)
Hecho el commit![](https://static.platzi.com/media/user_upload/Platzi13-dc8493c2-9ac2-41b3-9145-5857dcded00a.jpg)

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(鈥揾ospital-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 鈥減roduct-detail鈥 -> "product-description"
Y en vez de 鈥減roduct-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铆鈥olo 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 鈥渃alc鈥. 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 鈥榩roduct-detail鈥 por 鈥榤enu-container鈥 para ser mas especifico, y el 鈥榩roduct-info鈥 de la vista principal a 鈥榤ain-product-info鈥, asi me elimino ese problema de una vez

Detecci贸n de problema en estilos aplicados a clase 鈥減roduct-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 鈥渃alc()鈥, 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;
}