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

22/26
Recursos

Aportes 22

Preguntas 9

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Reg铆strate o inicia sesi贸n para participar.

馃憖 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.

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!

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

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.

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.

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

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.

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

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

Excelente clase

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:[email protected];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)

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

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

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

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

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

y cambie aside por div

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

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.