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

Interacci贸n entre todos los componentes

24/29
Recursos

Aportes 154

Preguntas 28

Ordenar por:

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

o inicia sesi贸n.

Personalmente, resolvi todas las funciones del siguiente modo. Me parece mucho mas sencillo y probe todas las combinaciones de colisiones posibles y funciona todo a la perfeccion. Al principio tenia la duda de que se podria llegar a a帽adir la clase de inactive mas de una vez a los elementos, rompiendo todo el codigo, pero finalmente pude observar que eso no ocurria.
PD: algunos nombres son diferentes, como el de orderDetail, porque asi fue mi solucion al conflicto de la clase pasada, pero funciona con cualquier nombre.

al principio no me sentia convencido de estar en este curso, pero ahora que he avanzado un poco, solo digo tu eres un maquina.

Esta fue mi soluci贸n para abrir y cerrar elementos seg煤n fuera el caso. Utilic茅 una funci贸n que recibe como par谩metros el principal elemento a abrir (o cerrar), un array de los dem谩s elementos que se deber铆an cerrar, y por 煤ltimo un valor booleano para indicar si unicamente se quiere abrir el elemento.

function toggleDesktopMenu() {
  toggleDisplayedViews(desktopMenu, [shoppingCartView, productDetailsPanel]);
}

function toggleMobileMenu() {
  toggleDisplayedViews(mobileMenu, [shoppingCartView, productDetailsPanel]);
}

function toggleCartAside() {
  toggleDisplayedViews(shoppingCartView, [desktopMenu, mobileMenu, productDetailsPanel]);
}

function toggleProductDetailsAside(event) {
  var open = event.path[1].classList.contains("product-card");
  toggleDisplayedViews(productDetailsPanel, [desktopMenu, mobileMenu, shoppingCartView], open);
}

function toggleDisplayedViews(elementToDisplay, elementsToHide, onlyOpen = false) {
  for (let element of elementsToHide) {
    const isElementDisplayed = !element.classList.contains("inactive");

    if (isElementDisplayed) {
      element.classList.toggle("inactive");
    }
  }

  if (onlyOpen) {
    elementToDisplay.classList.remove("inactive");
    return;
  }

  elementToDisplay.classList.toggle("inactive");
}

De igual forma, considero que se puede cerrar y abrir los elementos de esta forma:

queria que los datos del aside fueran dinamicos y mostraran los datos de cada uno, es decir, si un producto tenia el precio de $20 que mostrara al abrir el aside los $20 y asi con cada uno鈥 entonces ME ROMPI LA CABEZA tratando de hacerlo con el for que utilizo el profe para crear los productos y para mi fue mision imposible ya que siempre me arrojaba los datos del ultimo objeto del arreglo鈥 ENTONCES PROB脡 鈥> 鈥渇oreach()鈥 este metodo TE FACILITA LA VIDA鈥 ya que recorre cada elemento de cada arreglo extrayendo los datos que desees de cada uno sin ningun problema y con un codigo super resumido y limpio鈥 asi que mis amigos鈥 les recomiedo al 1000% foreach鈥 les comparto un poco mi codigo

const showProductsOnScreen= (lista)=>{ //crea los productos en el menu
    
    lista.forEach(product => { //recorre cada elemento del arreglo
        const productCard= document.createElement('div');
        productCard.classList.add('product-card');

        productCard.addEventListener('click',()=>{ //evento de escucha
            openProductInfo(product); //llamo a la funcion

        })

        const image = document.createElement('img');
        image.src= product.img;
        
        const infoProduct = document.createElement('div');
        infoProduct.classList.add('product-info');
        
        const div = document.createElement('div');
        const infoPrice = document.createElement('p');
        infoPrice.innerHTML = '$'+ product.price;
        
        const infoName = document.createElement('p');
        infoName.innerHTML= product.name;
        const figure = document.createElement('figure');
        const figureImg = document.createElement('img');
        figureImg.src= "./icons/bt_add_to_cart.svg";
        
        
        //AGREGAR HTML
        div.appendChild(infoPrice);
        div.appendChild(infoName);
        figure.appendChild(figureImg);
        infoProduct.appendChild(div);
        infoProduct.appendChild(figure);
        productCard.appendChild(image);
        productCard.appendChild(infoProduct);
        cardsContainer.appendChild(productCard);
        mainContainer.appendChild(cardsContainer);
        
    });

const openProductInfo = (product)=>{ //muestra el aside con la info del producto seleccionado
    const aside = document.querySelector('.product-detail-main');
    const productImg = document.querySelector('.product-detail-main-img');
    const productPrice = document.querySelector('.product-info .product-price');
    const productName= document.querySelector('.product-info .product-name');
        aside.classList.remove('inactive');
        productImg.setAttribute('src',product.img);
        productPrice.textContent= product.price;
        productName.textContent= product.name;


}

Quer铆a que los productos del aside mostraran los datos de cada producto al cual le daba click, aqu铆 dejo la soluci贸n que le di al problema.

Cree la funcion displayInfoInProductDetail , la cual recibe como par谩metro un evento(en este caso el evento resultado del click) , la cual llamo en openProductDetailAside

function openProductDetailAside(event){    

    displayInfoInProductDetail(event);

    desktopMenu.classList.add('inactive');
    shoppingCartContainer.classList.add('inactive');
    
    productDetailContainer.classList.remove('inactive');
}


La funci贸n displayInfoInProductDetail quedo de la siguiente forma, tratare de explicarlo lo mejor que pueda.

function displayInfoInProductDetail(event){
    
    const new_img_product_detail = event.path[0].src;

    const product_info = event.path[1].childNodes[1];

    const price = product_info.querySelector('div p:first-child');
    const name = product_info.querySelector('div p:nth-child(2)');

    const product_detail_img = productDetailContainer.querySelector('img:nth-child(2)');
    product_detail_img.setAttribute('src', new_img_product_detail);
    product_detail_img.setAttribute('alt', name.textContent);

    const product_detail_price = productDetailContainer.querySelector('.product-info p:nth-child(1)');
    product_detail_price.innerText = price.textContent;

    const product_detail_name = productDetailContainer.querySelector('.product-info p:nth-child(2)');
    product_detail_name.innerText = name.textContent;
    
}


si hacemos un console.log(event), veriamos lo siguiente


si lo desplegamos y hacemos scroll hasta hasta el elemto path, y tambien desplegamos este veremos lo siguente:



si pasamos el mouse sobre cada elemento que se encuentra dentro del path veremos lo que selecciona en pantalla.

entonces como vemos lo que har铆a la primera linea de la funci贸n displayInfoInProductDetail , es obtener el valor del atributo src de la imagen

const new_img_product_detail = event.path[0].src;


Luego si desplegamos el elemento de la posici贸n 1 de path, buscamos el elemento childNodes veremos que el elemto de la posicion 1 en childNotees es el <div> con la clase product-info, una vez selecionado, usando el querySelector accedemos a las dos <p> correspondientes al precio y nombre del producto.

una vez selecionados y almacenos(en varibles) estos elemtos, los asignarimos en los lugares correnpodientes del productDetailContainer

HACIENDO QUE APAREZCA CADA PRODUCTO EN EL DETALLE DEL PRODUCTO.

Mostrar productos en el aside dependiendo de que producto se seleccione.

HTML

dejamos el aside pero con los elementos vaci贸, colocamos id para la imagen y los p谩rrafos.

<!-- detalle de producto -->
  <aside id="productDetail" class="inactive">
    <div class="product-detail-close">
      <img src="./icons/icon_close.png" alt="close">
    </div>
    <img src="" alt="bike" id="img_product">
    <div class="product-info">
      <p id="product_price"></p>
      <p id="product_name"></p>
      <p id="product_descrip"></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>

JAVASCRIPT

seleccionamos la imagen creada en el array de productos y le colocamos el evento click.

// evento para mostrar producto
        producImg.addEventListener("click",() => {
            mostrarProductDetail(element);
        });

Creamos la funci贸n para mostrar el producto respectivo. Ac谩 haremos uso de los id鈥檚 para ir agregando su respectiva propiedad.

// funci贸n para mostrar detalle del producto
const mostrarProductDetail = elemento =>{
    aside.classList.remove("inactive");

    const imgProduct = document.querySelector('#img_product');
    imgProduct.src = elemento.imagen;

    const priceProd = document.querySelector('#product_price');
    priceProd.textContent = 'Q.'+elemento.price;
    const nameProd = document.querySelector('#product_name');
    nameProd.textContent = elemento.name;
    const descripProd = document.querySelector('#product_descrip');
    descripProd.textContent = elemento.descrip;
}

RESULTADO

Buenas amigos, encontr茅 un error debido a que agregu茅 15 elementos a la lista de productos, en el cual me di cuenta que el aside del detalle de producto ten铆a una falla entre el bot贸n y el contenido, me sal铆a de esta forma![](
Entonces me puse a revisar un poco mi css y primero intent茅 agregarle un background y no me funcion贸, entonces revisando el propio contenedor en donde los ten铆a vi que ten铆a un margin ![](
Entonces pens茅, y si en lugar de ponerle margin, le pongo un padding y de esa forma agarro el contenedor completo? y as铆 lo hice, le agregu茅 a mis estilos de ese contenedor estas clases

    padding: 24px;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    background: var(--white);

y con eso logr茅 resolverlo
![](

馃殌 Soluci贸n, para que cuando le des click en cualquier producto, muestre los detalles del producto seleccionado (name, price, image). 馃殌

Utilice:

event.target.src => Al hacer clic en la imagen, obtenemos su atributo src.
event.target.nextElementSibling.innerText =>  Al hacer click en la imagen, devuelve el siguiente elemento en el mismo nivel del 谩rbol.

C贸digo:

const navEmail = document.querySelector(".navbar-email");
const menuHamIcon = document.querySelector(".menu");
const menuCarritoIcon = document.querySelector(".navbar-shopping-cart");
const productDetailCloseIcon = document.querySelector(".product-detail-close");
const desktopMenu = document.querySelector(".desktop-menu");
const mobileMenu = document.querySelector(".mobile-menu");
const shoppingCartContainer = document.querySelector("#shoppingCartContainer");
const productDetailContainer = document.querySelector("#productDetail");
const cardsContainer = document.querySelector(".cards-container");
const imagen = document.querySelector("#infoImages");
const priceProduct = document.querySelector("#price");

//const mediaQuery = window.matchMedia("(max-width: 640px)");

navEmail.addEventListener("click", toggleDesktopMenu);
menuHamIcon.addEventListener("click",  toggleMobileMenu);
menuCarritoIcon.addEventListener("click", toggleCarritoAside);
productDetailCloseIcon.addEventListener("click", closeProductDetailAside);

function toggleDesktopMenu() {
    const isAsideClose = shoppingCartContainer.classList.contains("inactive");
    const isproductDetailContainer = productDetailContainer.classList.contains("inactive");

    desktopMenu.classList.toggle("inactive");

    if(!isAsideClose){
        shoppingCartContainer.classList.add("inactive");
    }

    if(!isproductDetailContainer){
        productDetailContainer.classList.add("inactive");
    }
// //     // if(!desktopMenu.classList.toggle("inactive")){
// //     //     desktopMenu.classList.remove("inactive");
// //     //  }else{
// //     //     desktopMenu.classList.add("inactive");
// //     //  }
    
}

function toggleMobileMenu() {
    const isAsideClose = shoppingCartContainer.classList.contains("inactive");

    mobileMenu.classList.toggle("inactive"); //Si esta lo elimina, si no esta lo activa 
    if(!isAsideClose){
        shoppingCartContainer.classList.add("inactive");
    }
    closeProductDetailAside();
}

function toggleCarritoAside(){    
    const isMobileMenuClose =  mobileMenu.classList.contains("inactive");
    const isDesktopMenuClose = desktopMenu.classList.contains("inactive"); // El elemento contiene la clase inactive = true (cerrado)
                                                                           // El elemento no contiene la clase inactive = falso (abierto)
    const isProductDetailClose = productDetailContainer.classList.contains("inactive");

    shoppingCartContainer.classList.toggle("inactive");
    if(!isMobileMenuClose){ // si esta abierto 
        mobileMenu.classList.add("inactive");
    }

    if(!isDesktopMenuClose){
        desktopMenu.classList.add("inactive")
    }   

    if(!isProductDetailClose){
        productDetailContainer.classList.add("inactive");
    }
}

function openProductDetailAside(event){
    shoppingCartContainer.classList.add("inactive");
    mobileMenu.classList.add("inactive");
    productDetailContainer.classList.remove("inactive");
    desktopMenu.classList.add("inactive");
    imagen.setAttribute("src", event.target.src);
    priceProduct.innerText = event.target.nextElementSibling.innerText; 
}

function closeProductDetailAside(){
    productDetailContainer.classList.add("inactive");
}


//Utilizando solo una funci贸n para mostrar los menus
//  function toggleMenus (){
//      if(mediaQuery.matches){
//          mobileMenu.classList.toggle("inactive");

//      } else {
//          desktopMenu.classList.toggle("inactive");
//      }
    
//  }

const productList = [];
productList.push({
    name: "Aceler贸metro ADXL345",
    price: 11600,
    image: "https://moviltronics.com/wp-content/uploads/2015/10/1538-thickbox_default-Modulo-Acelerometro-3-ejes-ADXL345-600x600.jpg",
});
productList.push({
    name: "Arduino Nano CH340",
    price: 48200,
    image: "https://moviltronics.com/wp-content/uploads/2018/06/M10009-600x450.png",
});
productList.push({
    name: "Paquete Resistencias surtidas",
    price: 2500,
    image: "https://moviltronics.com/wp-content/uploads/2020/05/Resistencias-600x600.jpg",
})
productList.push({
    name: "Bluetooth CC2541",
    price: 23000,
    image: "https://moviltronics.com/wp-content/uploads/2018/07/2083-thickbox_default-Modulo-Bluetooth-CC2541-600x600.jpg",
})
productList.push({
    name: "Potenci贸metro Sencillo",
    price: 900,
    image: "https://moviltronics.com/wp-content/uploads/2019/10/56-1-600x585.jpg",
})
productList.push({
    name: "Brazo Robotico Dobot Magician Basic",
    price: 9200,
    image: "https://moviltronics.com/wp-content/uploads/2018/07/2471-thickbox_default-Brazo-Robotico-Dobot-Magician-Basic-600x600.jpg",
})
productList.push({
    name: "Chasis Mini Sumo",
    price: 199000,
    image: "https://moviltronics.com/wp-content/uploads/2019/07/Chasis-Mini-Sumo_0000_DSC00342-600x600.jpg",
})
productList.push({
    name: "Kit Arduino Starter",
    price: 264600,
    image: "https://moviltronics.com/wp-content/uploads/2018/07/Kit-Arduino-Starter-600x600.jpg",
}) 
productList.push({
    name: "Kit Arduino Starter",
    price: 264600,
    image: "https://moviltronics.com/wp-content/uploads/2018/07/Kit-Arduino-Starter-600x600.jpg",
}) 
productList.push({
    name: "Kit Arduino Starter",
    price: 264600,
    image: "https://moviltronics.com/wp-content/uploads/2018/07/Kit-Arduino-Starter-600x600.jpg",
}) 
productList.push({
    name: "Kit Arduino Starter",
    price: 264600,
    image: "https://moviltronics.com/wp-content/uploads/2018/07/Kit-Arduino-Starter-600x600.jpg",
}) 
productList.push({
    name: "Kit Arduino Starter",
    price: 264600,
    image: "https://moviltronics.com/wp-content/uploads/2018/07/Kit-Arduino-Starter-600x600.jpg",
}) 
productList.push({
    name: "Kit Arduino Starter",
    price: 264600,
    image: "https://moviltronics.com/wp-content/uploads/2018/07/Kit-Arduino-Starter-600x600.jpg",
}) 
productList.push({
    name: "Kit Arduino Starter",
    price: 264600,
    image: "https://moviltronics.com/wp-content/uploads/2018/07/Kit-Arduino-Starter-600x600.jpg",
}) 

function renderProducts(arr){
    for(product of arr){
        const productCard = document.createElement("div");
            productCard.classList.add("product-card");
    
        //product = {name, price, image} -> product.image
        const productImg = document.createElement("img");
            productImg.setAttribute("src", product.image);
            productImg.setAttribute("id", "imagen");
            productImg.addEventListener("click", openProductDetailAside);

        const productInfo = document.createElement("div");
            productInfo.classList.add("product-info");
    
        const productInfoDiv = document.createElement("div");
    
        const productInfoPrice = document.createElement("p");
            productInfoPrice.innerText = "$ " + product.price;
    
        const productInfoName = document.createElement("p");
            productInfoName.innerText = product.name;
    
            productInfoDiv.appendChild(productInfoPrice);
            productInfoDiv.appendChild(productInfoName);
    
        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);

Mi soluci贸n fue completamente diferente


Lo que hice fue b谩sicamente generar una constante que tuviera las conexiones e irlas iterando

connect ['.navbar-email'] ='.desktop-menu';
connect ['.menu'] ='.mobile-menu';
connect ['.navbar-shopping-cart'] ='.product-detail-shopping-cart';
const productInfo = connect ['.product-detail-close'] = '.product-detail-info';

tambi茅n decid铆 agregarle un distintivo a product-detail como info y shopping-cart

si quieren checar el c贸digo completo se los dejo en mi github por si alguien le interesa

const signals= {};
const connect = {};

connect ['.navbar-email'] ='.desktop-menu';
connect ['.menu'] ='.mobile-menu';
connect ['.navbar-shopping-cart'] ='.product-detail-shopping-cart';
const productInfo = connect ['.product-detail-close'] = '.product-detail-info';


function connections(connect_ref){
    for(let SLOT in connect_ref){
      const SIGNAL = connect_ref[SLOT];
      const slot = document.querySelector(`${SLOT}`);
      signals[SIGNAL] = document.querySelector(`${SIGNAL}`);
      
      showEventListener(slot, signals[SIGNAL], SIGNAL);}}


function showEventListener(slot, signal, exception, __function__ = undefined){
    slot.addEventListener('click', ()=>{
        signal.classList.toggle('visible');
        for(let s in signals)
            if(s != exception) signals[s].classList.add('visible');
            
        if(typeof(__function__) == 'function')  __function__();}); }


const bicis = ['https://m.media-amazon.com/images/I/81-L-Q-0Q1L._AC_SX569_.jpg',
               'https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940',
               'https://http2.mlstatic.com/D_NQ_NP_671487-MLM50849732725_072022-O.webp',
               'https://resources.claroshop.com/medios-plazavip/mkt/5bd8e4bf90990_1jpg.jpg'];


function products(){
    const productos = new Array();
    for(let img of bicis)
        productos.push({['name']:'Bike', ['price']:120, ['img']:img});
    return productos;}


function connectProductRender(selector, product){
    const img = document.querySelector('.img-product-detail-info');
    const slot = document.querySelector(`.${selector}`);

    showEventListener(slot, signals[productInfo], productInfo,()=>{
        signals[productInfo].classList.remove('visible');
        img.setAttribute('src', product.img);});}


function productRender(arr){
    let idx = 0;
    const contenedor = document.querySelector('.cards-container');
    
    for(const product of arr){
        const productCard = document.createElement('div');
        productCard.classList.add('product-card');
        productCard.classList.add(`N${idx}`);
        
        const img = document.createElement('img');
        img.setAttribute('src', product.img);

        const productInfo = document.createElement('div');
        productInfo.classList.add('product-info');

        const div = document.createElement('div');
        div.innerHTML =`<p>\$${product.price}</p><p>${product.name}</p>`;

        const figure = document.createElement('figure');
        figure.innerHTML = '<img src="./icons/bt_add_to_cart.svg">';

        productInfo.append(div,figure);
        productCard.append(img,productInfo);
        contenedor.appendChild(productCard);

        connectProductRender(`N${idx}`,product);
        idx++;}}

/* main */

connections(connect);
productRender(products());

Faltaba que se cerraran los men煤 en mobile y desktop, cuando se abr铆a el detalle del producto.
As铆 lo solucion茅:

function openProductDetail () {
    desktopMenu.classList.add ("inactive")
    shoppingCartContainer.classList.add ("inactive")
    mobileMenu.classList.add ("inactive")

    productDetailContainer.classList.remove ("inactive") 
}

Se sent铆a un poco raro que el aside de los detalles del producto no mostrara los detalles del producto seleccionado, entonces decid铆 agregarle eso y hacerle los bordes redondos a los menus y tambi茅n agregarles un sombreado para que se diferenciara un poco donde termianaban.

C贸digo JavaScript:
No voy a colocar todo el c贸digo porque ya todos lo tenemos. Solo las partes que agregu茅.

//Hay que agregarle un id a las etiquetas para precio e imagen del aside
const productDetailPrice = document.querySelector('#productDetail-price');
const productDetailImg = document.querySelector('#productDetail-img');

//En la funci贸n para abrir el aside "openProductDetailAside" 
productDetailImg.setAttribute("src", event.target.src);
    productDetailPrice.innerText = event.target.nextElementSibling.innerText; 

C贸digo CSS:

.desktop-menu {
/*...
...
...*/
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.mobile-menu {
/*...
...
...*/
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}

Aside {
/*...
...
...*/
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}

#productDetail {
    margin-right: 5px;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
    overflow: hidden;
  }

As铆 le hice para que al momento de mostrar el product info, muestre la imagen del producto seleccionado, tambien se podria hacer lo mismo con el precio nombre y descripci贸n

Yo me percate que esta el icono de volver (como para quitar el menu del carrito de compras) y lo que hice fue lo siguiente:
HTML
<img src="./icons/flechita.svg" alt=鈥渁rrow鈥 class=鈥渋con1鈥>
JS
const iconCarritoBack = document.querySelector(".icon1");
iconCarritoBack.addEventListener(鈥渃lick鈥, closeCarritoAside);
function closeCarritoAside () {
shoppingCartContainer.classList.add(鈥渋nactive鈥);
}

Mi propuesta es crear una funci贸n que reciba c贸mo par谩metros el elemento a poner visible, y un array de los elementos a hacer invisibles

const menuEmail = document.querySelector('.navbar-email');
const menuHamIcon = document.querySelector('.menu');
const menuCarritoIcon = document.querySelector('.navbar-shopping-cart');
const productDetailCloseIcon = document.querySelector('.product-detail-close');
const desktopMenu = document.querySelector('.desktop-menu');
const mobileMenu = document.querySelector('.mobile-menu');
const shoppingCartContainer = document.querySelector('#shoppingCartContainer');
const productDetailContainer = document.querySelector('#productDetail');

menuEmail.addEventListener('click', () => toggleAside(desktopMenu));
menuHamIcon.addEventListener('click', () => toggleAside(mobileMenu));
menuCarritoIcon.addEventListener('click', () => toggleAside(shoppingCartContainer, [mobileMenu, productDetailContainer]));
productDetailCloseIcon.addEventListener('click', () => toggleAside(productDetailContainer));

function toggleAside(element, hide = []) {
  hide.forEach(el => el.classList.add('inactive'));
  element.classList.toggle('inactive');
}

Yo cree esas dos funciones y las utilizo dentro de las demas que hacen el toggle de los demas iconos

function verifyOpeningAsideShoppingCart() {
    const isAsideOpen = !shoppingCartContainer.classList.contains('inactive');

    if (isAsideOpen) {
        shoppingCartContainer.classList.add('inactive')
    }
}

function verifyOpeningAsideProductDetail() {
    const isProductDetailOpen = !productDetailContainer.classList.toggle('inactive');

    if (isProductDetailOpen) {
        closeProductDetailAside()
    }
}

Lo que yo haria seria meter en un array todas las variables de ventanas que se pueden abrir, luego crear una funcion que reciba el nombre de la ventana objetivo que se abrirar, en esta funcion al principio va a recorrer el array con todas las ventanas agregandole a cada una(sin excepcion) la clase 鈥渉idden鈥 lo cual las va a esconder, luego de esto al final de la funcion vas a remover la clase 鈥樷榟idden鈥欌 anteriormente agregada de la ventana objetivo que se desea abrir, de esta forma solo se mostraria la ventana deseada y ocultaria las demas.

Para la ejecuci贸n de esta interacci贸n decid铆 usar el operador ternario, junto con un arrray.

Primero cree un array donde guarde los selectores en los cuales necesito usar la clase 鈥渋nactive鈥, estos que se sobreponen cuando los uso:

const windowsList = [];

windowsList.push(shoppingCartContainer);
windowsList.push(desktopMenu);
windowsList.push(mobileMenu);
windowsList.push(productDetailContainer);

Luego cree una funci贸n que me verifica dos cosas, primero en cual de estos estoy generando la llamada, y segundo cual de los otros esta 鈥渁ctivo鈥 por asi decirlo:

function closeSuperImposeWindow(element, array) {
    // Aqui verificamos cual de los que hay en la lista genero la llamada
    for (item of array) {
        item == element ? true
            // con el ternario cuando no es el que genero la llamada verifico si esta cerrado, sino le inserto la clase inactive
            : item.classList.contains('inactive') ? true : item.classList.add('inactive');
    }
}

Asi solo tuve que llamar a la funcion cada vez que hago toggle o abro una pesta帽a y esto permite cerrar el resto de las pesta帽as.

function openProductDetailAside() {
    closeSuperImposeWindow(productDetailContainer, windowsList);
    productDetailContainer.classList.remove('inactive');
    
}

function toggleMobileMenu() {
    // shoppingCartContainer.classList.contains('inactive') ? true : shoppingCartContainer.classList.add('inactive');
    closeSuperImposeWindow(mobileMenu, windowsList);
    mobileMenu.classList.toggle('inactive');
    
}

Y ya, es toda wey.

Para resolver el tema de las visualizaciones cre茅 una funci贸n que oculta cualquier 鈥渙bjeto鈥 visible que no sea el que quiero mostrar y la llamo en cada funci贸n de mostrar/ocultar un objeto.
arr es un array con los objetos que aparecen o desaparecen en pantalla y obj es el objeto que quiero mostrar.

function hideElements(arr,obj){
    for (element of arr){
        if(!element.classList.contains("inactive") && element!=obj){
            element.classList.add("inactive");
        }
    }
}

fALTO ARREGLAR EL mENU EMAIL.

LO CORREGI ASI :

unction toggleDesktopMenu() {
const isAsideClosed = shoppingCartContainer.classList.contains(鈥渋nactive鈥);

if (!isAsideClosed) {
shoppingCartContainer.classList.add(鈥渋nactive鈥);
}
closeProductDetailAside();

desktopMenu.classList.toggle(鈥渋nactive鈥);
}

A煤n que mi c贸digo no es el m谩s optimizado que digamos鈥βunciona! y me siento muy feliz por ello. Supongo que con la practica mi c贸digo dejara de se tan 鈥渟paghetti鈥 馃馃懡馃弳

<function toggleDesktop_menu (){
    closeShoppingCart = shoppingCart.classList.contains('inactive');
    closeMenuEmail = desktop_menu.classList.contains('inactive');
    cerrarCarrito();
    if(!closeShoppingCart){
        shoppingCart.classList.toggle('inactive');   
    }
    desktop_menu.classList.toggle('inactive');    
    
    }

function toggleMobil_menu (){
    closeMobil = menuMobil.classList.contains('inactive');
    closeShoppingCart = shoppingCart.classList.contains('inactive');
    closeMenuEmail = desktop_menu.classList.contains('inactive');
    cerrarCarrito();
    if(!closeShoppingCart){
        shoppingCart.classList.toggle('inactive');
    }
    menuMobil.classList.toggle('inactive');       
    }

function toggleShoppingCart (){ 
    closeMobil = menuMobil.classList.contains('inactive');
    closeShoppingCart = shoppingCart.classList.contains('inactive');
    closeMenuEmail = desktop_menu.classList.contains('inactive');
    cerrarCarrito();
    if(!closeMobil){
        menuMobil.classList.toggle('inactive');
         }
     if(!closeMenuEmail){
            desktop_menu.classList.toggle('inactive');
         }
         shoppingCart.classList.toggle('inactive');
    }

    function openCart(){
        productDetail.classList.remove('inactive');
        shoppingCart.classList.add('inactive');
        menuMobil.classList.add('inactive');
        desktop_menu.classList.add('inactive');
    };

    function cerrarCarrito(){
        productDetail.classList.add('inactive');
    };> 

Todo bien hasta aqu铆鈥β縫ero como van con su CSS 馃槄? Mi archivo cuenta con 623 l铆neas鈥β縴 el suyo?

En mi punto de vista ve铆a que se replicaba el mismo procedimiento asi que lo que hice fue una funci贸n que tuviera dos parametros: el primero seria el la vista que me interesa abrir o cerrar y el segundo es un array en donde est谩n todas las vistas. Esto sirve para que se haga la comparaci贸n de todas para que solo tenga una coincidencia y a esa coincidencia que la active para que las dem谩s que no coincidan se desactive, pero antes pregunto si est谩 abierto el elemento porque si esta abierto lo que quiero hacer es cerrarlo.
Espero que les sea entendible el c贸digo.

El 煤nico detalle que tuve fue que en la foto cuando le daba clic me abr铆a y cerraba la misma pesta帽a as铆 que esa fue la 煤nica que s铆 lo deje con el Open.
La finalidad de esto es que se tenga m谩s vistas o pesta帽as en un futuro y no tengamos que ir viendo las miles de combinaciones y sea m谩s f谩cil con esta funci贸n. Saludos desde M茅xico.

Falto que al darle click a cualquier parte de la pantalla que no sea producto se deseleccione ya sea el detalle de producto o cualquier otro menu, para ello llamamos a la clase:
const contenedorProductos = document.querySelector(鈥.main-container鈥);

luego:

contenedorProductos.addEventListener(鈥榗lick鈥,funcionClick);

luego:

function funcionClick(){
detalleCompra.classList.add(鈥榠nactive鈥);
mobileMenu.classList.add(鈥榠nactive鈥);
desktopMenu.classList.add(鈥榠nactive鈥);

}

馃槂

Para que el product detail mostrara los datos del producto que seleccionaba hice esto:

for (product in productList) {
//Use in para generar un id

  let name = productList[product].name;
  let price = productList[product].price;
  let image = productList[product].image;

  const cardsContainer = document.querySelector('.cards-container')

  const productCard = document.createElement('div');
  productCard.setAttribute("id", product)
  //Aqui le asigno un id a cada item

  productCard.classList.add('product-card')
  productCard.addEventListener("click", openInfoScreen);
  //addEvenListener nos permite usar this, eso nos sirve para despues

Despues en la parte donde desplegamos el product detail:

function openInfoScreen() {
  let id = Number(this.getAttribute("id")); 
  //Aqui this entra en accion, nos sirve para acceder al array y leer los valores del item que queremos mostrar

  let itemImage = document.querySelector(".itemImg");
  let itemName = document.querySelector(".itemName");
  let itemPrice = document.querySelector(".itemPrice");
  let itemDescription = document.querySelector(".itemDescription");
  //Cree variables para cada valor y que se me haga mas facil

  itemImage.setAttribute("src", productList[id].image);
  itemName.innerText = productList[id].name;
  itemPrice.innerText = "$" + productList[id].price;
  itemDescription.innerText = productList[id].description;
 //Aqui ya solo modificamos el HTML para que tenga lo que queremos

Probablemente se pueda optimizar muchisimo mas pero fue lo que se me ocurrio, ojala le sirva a alguien.

Este problema de ocultar y mostrar los elementos interactivos me ha demostrado que es cierto que 鈥渘o porque la soluci贸n de tu colega sea diferente a la tuya, significa que sea mejor o peor鈥, todos tenemos nuestro estilo, quiz谩s hay soluciones con m谩s l铆neas que otra, pero todas nos dan el resultado que esperamos (por lo regular).

Pero recuerda que es mejor hacer c贸digo que sea mas comprensible al leerlo.

Tenia la idea de que, cada vez que seleccionara un producto diferente se habriera la descripcion para el producto especifico, mire algunas soluciones en los aportes y no logre entender la logica, asi que despues de 2 dias, tantas vueltas y pruebas, muchos console.log buscando seleccionar el evento correcto, esta es mi solucion:

function cardsConstruction() {
    products.forEach((products) => {
        const productCardDiv = document.createElement('div')
        productCardDiv.classList.add('product-card')    
        cardMain.appendChild(productCardDiv)
        productCardDiv.addEventListener('click', details)

        optProducts =  `
        <img src=${products.image} alt=${products.alt} >
        <div class="product-info">
            <div>
                <p>${products.price}</p>
                <p>${products.name}</p>
            </div>
            <figure>
                <img src="./icons/bt_add_to_cart.svg" alt="">
            </figure>
        </div>
        `
        productCardDiv.innerHTML += optProducts

        productCardDiv.addEventListener('click', (e) => {
            if (e.target.src === products.image) {
                const figureClose = document.createElement('figure')
                const imgClose = document.createElement('img')
                imgClose.classList.add('close')
                imgClose.setAttribute('src', './icons/icon_close.png')
                imgClose.setAttribute('alt', 'close')
                imgClose.addEventListener('click', closeDetails)
        
                figureClose.appendChild(imgClose)
                
                dtlProducts = `
                <picture>
                    <img src=${products.image} alt=${products.name} >
                </picture>
                <div class="product-description">
                    <p>${products.price}</p>
                    <p>${products.name}</p>
                    <p>${products.description}</p>
                </div>
                <div class="shopping-detail" >
                    <button><img src="./icons/bt_add_to_cart.svg" alt="cart"> Add to cart</button>
                </div>
               `
               productDetail.innerHTML = dtlProducts
               productDetail.appendChild(figureClose)
            }
        })
    })
        
}```

quise reducir el codigo ya que se repetian muchas cosas en cada una de las funciones, asi que creen una funcion la cual mediante un parametro funcionaria para cada uno de los casos:

function openMenu(clickToevent) {

  if (clickToevent == navEmail) {
    aside.classList.add("inactive");
    productDetailAside.classList.add("inactive");
    desktopMenu.classList.toggle("inactive");

  } else if (clickToevent == burguerMenu) {

    closeProductDetailAside();
    aside.classList.add("inactive");
    mobileMenu.classList.toggle("inactive");

  } else if (clickToevent == shoppingCartMenu) {

    mobileMenu.classList.add("inactive");
    desktopMenu.classList.add("inactive");
    productDetailAside.classList.add("inactive");
    aside.classList.toggle("inactive");
  }
}

Y lo que uego hice fue lamar esa funcion para cada uno de los casos.

function toggleDesktopMenu() {
  openMenu (navEmail);
}

function toggleMobileMenu() {
  openMenu (burguerMenu);
}

function toggleAsideCart() {
  openMenu (shoppingCartMenu);
}

//en este caso no la inclui e la funcion debido a que el evento es llamado en la funcion donde creamos los product-container.
function openProductDetailAside() {
  desktopMenu.classList.add("inactive");
  aside.classList.add("inactive");
  productDetailAside.classList.remove("inactive");
}

function closeProductDetailAside() {
  productDetailAside.classList.add("inactive");
}

y asi logre reducir el codigo a mas de 40 lineas, lo hice de igual forma con las condicionales que el profe Juan uso, pero igual se hizo algo largo el codigo

Yo trat茅 de reducir el c贸digo y me qued贸 de la siguiente forma:

import products from '../data.js';

const menuEmail = document.querySelector('.navbar-email');
const desktopMenu = document.querySelector('.desktop-menu');
const burgerMenuIcon = document.querySelector('.menu-hamburger');
const mobileMenu = document.querySelector('.mobile-menu');
const menuCartIcon = document.querySelector('.navbar-shoping-cart');
const asideCartList = document.querySelector('.product-detail-shopping-cart');
const cardContainer = document.querySelector('.cards-container');
const asideProductDetail = document.querySelector('.aside-product-detail');
const closeProductDetail = document.querySelector('.product-detail-close');

function toggleItem(showElement, hideElement1, hideElement2, hideElement3) {
  showElement.classList.toggle('inactive');
  hideElement1?.classList.add('inactive');
  hideElement2?.classList.add('inactive');
  hideElement3?.classList.add('inactive');
}
function openAsideProductDetail(
  openElement,
  hideElement1,
  hideElement2,
  hideElement3
) {
  openElement.classList.remove('inactive');
  hideElement1?.classList.add('inactive');
  hideElement2?.classList.add('inactive');
  hideElement3?.classList.add('inactive');
}
function closeAsideProductDetail(closeElement) {
  closeElement.classList.add('inactive');
}

menuEmail.addEventListener('click', () =>
  toggleItem(desktopMenu, asideCartList, mobileMenu, asideProductDetail)
);
burgerMenuIcon.addEventListener('click', () =>
  toggleItem(mobileMenu, asideCartList, desktopMenu, asideProductDetail)
);
menuCartIcon.addEventListener('click', () =>
  toggleItem(asideCartList, desktopMenu, mobileMenu, asideProductDetail)
);
closeProductDetail.addEventListener('click', () => {
  closeAsideProductDetail(asideProductDetail);
});

// index products

function renderPRoducts(arr) {
  for (let product of arr) {
    const productCard = document.createElement('div');
    productCard.classList.add('product-card');

    const productImg = document.createElement('img');
    productImg.setAttribute('src', product.image);
    productImg.setAttribute('alt', product.name);
    productImg.addEventListener('click', () =>
      openAsideProductDetail(
        asideProductDetail,
        desktopMenu,
        asideCartList,
        mobileMenu
      )
    );

    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', './assets/icons/bt_add_to_cart.svg');
    productImgCart.setAttribute('alt', 'cart-icon');

    productInfoFigure.appendChild(productImgCart);
    productInfo.append(productInfoDiv, productInfoFigure);
    productCard.append(productImg, productInfo);

    cardContainer.append(productCard);
  }
}
renderPRoducts(products);

hay cosas que se pueden mejorar como cuando se selecciona un producto y que en el aside aparezca la info del producto seleccionado, ya que siempre sale el mismo, eso lo pude lograr usando un metodo del curso de programacion basica, forEach en vez del for, tambien icertando el html del aside completo desde java scrip con un inner.html:

function renderProducts(arr) {
  arr.forEach((product) => {
    const productCard = document.createElement('div');
    productCard.classList.add('product-card');
    
    productCard.addEventListener('click',()=>{
            openProductDetailAside(product);
    })

    // product= {name, price, image} -> product.image
    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);

function selectedProduct(product) {
  const productoSeleccionado = `
  <div class="product-detail-close">
            <img src="./icons/icon_close.png" alt="close">
          </div>
      <img src=${product.image} alt=${product.name}>
      <div class="product-info">
        <p>$${product.price}</p>
        <p>${product.name}</p>
        <p>With its practical position, this ${product.name} 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">
          <img>/   Add to cart
        </button> 
      </div>
    `
    productDetailContainer.innerHTML = productoSeleccionado
    const productDetailCloseIcon = document.querySelector('.product-detail-close')
    productDetailCloseIcon.addEventListener('click', closeProductDetailAside);

}

tuve que hacer muchos cambios ya que se alteraban los estilos y salian errores asi que mi solucion esta un poco extensa tal vez haya una manera mas practica de hacerlo pero no supe como mas, asi quedo la funcion de open aside:

function openProductDetailAside(product) {
  console.log(product)
  desktopMenu.classList.add('inactive');
  shoppingCartContainer.classList.add('inactive');
  selectedProduct(product);
  productDetailContainer.classList.remove('inactive');
}

tambien se puede mejorar con esa misma logica el carrito de ordenes para que solo salgan los productos agregados al carrito, agregando un event listener a este boton en el forEach y guardando en un arreglo los seleccionados.

adjunto una imagen donde se ve el resultado y como con el forEach podemos obtener en la consola los valores del objeto clickeado:

Les comparto una soluci贸n m谩s sencilla utilizando una funci贸n que a帽ade la clase 鈥渋nactive鈥 a una lista de elementos.
.

function toggleDesktopMenu() {
  desktopMenu.classList.toggle("inactive");
  addInactive(cartDetail, mobileMenu, productDetail);
}

function toggleMobileMenu() {
  mobileMenu.classList.toggle("inactive");
  addInactive(cartDetail, desktopMenu, productDetail);
}

function toggleAsideCart() {
  cartDetail.classList.toggle("inactive");
  addInactive(mobileMenu, desktopMenu, productDetail);
}

function openAsideProuctDetail() {
  productDetail.classList.remove("inactive");
  addInactive(cartDetail, mobileMenu, desktopMenu);
}

function closeAsideProuctDetail() {
  productDetail.classList.add("inactive");
  addInactive(cartDetail, mobileMenu, desktopMenu);
}

// Esta es la funci贸n
function addInactive(...elements) {
  elements.forEach((element) => {
    element.classList.add("inactive");
  });
}

.
Como la funci贸n 鈥渁ddInactive鈥 utiliza el spread operator para recibir los elementos y guardarlos en un array 鈥渆lements鈥, se puede llamar a la funci贸n sin importar la cantidad de elementos a las que tengamos que a帽adir la clase 鈥渋nactive鈥.

Creo que otro issue que podr铆a pasar es que al abrir el men煤 desktop y despu茅s el productDetail, se quedar铆a abierto y al intentar abrir el men煤 no se cierra el productDetail

Mi soluci贸n a este problema (evitando el posible error que ten铆amos de que se mantuviera abierto el men煤 desktop) seria:

function toggleDesktopMenu() {
    const isAsideclose = shoppingCartContainer.classList.contains('inactive');

    if(!isAsideclose) {
        shoppingCartContainer.classList.add('inactive');
    }

    closeProductDetailAside();

    desktopMenu.classList.toggle('inactive');
}

function openProductDetailAside() {
    shoppingCartContainer.classList.add('inactive');
    desktopMenu.classList.add('inactive');
    productDetailContainer.classList.remove('inactive');
}

Yo al product detail lo cre茅 abajo de le funci贸n renderProducts, y solo me estaba funcionando el primero

![](

Utilice esta sintexis para ver si me podr铆a dar problemas:

menuEmail.addEventListener("click", () => {
 
});

Lo que aprend铆 es que efectivamente da problemas al momento de dar mantenimiento al codigo, es mejor tener separdo todo en funciones como hace JuanDc

En la clase se muestra que al hacer click sobre un producto, muestra un el detalle de un producto 鈥済enerico鈥, creado previamente con html que no varia, sea cual sea el producto seleccionado, siempre nos va a mostrar los detalles de una bici, que su valor es 35.
Para cambiar esto se me ocurri贸 hacer un render de los detalles de productos, que simule que por medio de una API obtiene todos los detalles de producto, pero ya con la clase inactive para que no se vean:

function renderProductDetail(arr){
    for(product of arr){
        const containerDetailProduct = document.createElement('div')
        containerDetailProduct.classList.add('inactive', 'container-product')

        const productDetailClose = document.createElement('div')
        productDetailClose.classList.add('product-detail-close')

        const imageClose = document.createElement('img')
        imageClose.setAttribute('src', './icons/icon_close.png')

        const imageProduct = document.createElement('img')
        imageProduct.setAttribute('src', product.image)
        imageProduct.classList.add('img-cont-product-detail')

        const productDetailInfo = document.createElement('div')
        productDetailInfo.classList.add('product-detail-info')


        const productPrice = document.createElement('p')
        productPrice.innerText = '$' + product.price;
        const productName = document.createElement('p')
        productName.innerText = product.name;
        productName.classList.add('name')
        const productDescription = document.createElement('p')
        productDescription.innerText = product.description;
        
        const buttonAddCart = document.createElement('button');
        buttonAddCart.classList.add('primary-button', 'add-to-cart-button')

        const imageAddtoCart = document.createElement('img')
        imageAddtoCart.setAttribute('src', './icons/bt_add_to_cart.svg')

        buttonAddCart.append(imageAddtoCart)

        productDetailInfo.append(productPrice, productName, productDescription, buttonAddCart)

        productDetailClose.append(imageClose)

        containerDetailProduct.append(productDetailClose, imageProduct, productDetailInfo)

        productDetail.append(containerDetailProduct)
    }
}

renderProductDetail(productList);
renderProductList(productList);

Despu茅s, con una funci贸n, comparo el nombre del producto seleccionado, con el nombre de la lista de producto que simulo traer por un API (para esto recorro todo el arreglo), y le quito la clase 鈥渋nactive鈥 solo a la que coincida el nombre, en un futuro se podr铆a asignar un id y despu茅s verificar que los id sean los mismos.

let productsCard= document.querySelectorAll('.product-card')



productsCard.forEach(producto => {
    producto.addEventListener('click', () => {
        const todosLosProductos = document.querySelectorAll('.container-product')
        todosLosProductos.forEach(producto => {
            producto.classList.add('inactive')
        })

        let name = producto.querySelector('.name').textContent;
        console.log('El nombre del articulo seccionado es: ', name)
       
        let containerProducts = document.querySelectorAll('.container-product')
        containerProducts.forEach(productoDetalle =>{
            let nombreProducto = productoDetalle.querySelector('.container-product .product-detail-info .name').textContent
            if(name === nombreProducto){
                productoDetalle.classList.remove('inactive')
            }
        })
        
    })
})


let btnsDetailProductClose = document.querySelectorAll('.product-detail-close')

btnsDetailProductClose.forEach(btn =>{
    btn.addEventListener('click', function(){
        console.log('click boton close')
        const todosLosProductos = document.querySelectorAll('.container-product')
            todosLosProductos.forEach(producto => {
                producto.classList.add('inactive')
        })
    })
})

Es un aporte capaz a alguien como a mi le molestaba que siempre muestre el detalle del producto gen茅rico de la bici.

Aplicar interacci贸n entre los dem谩s productos de la web (men煤 desktop, detalles de producto, carrito de compra)

Mis apuntes

  • Yo tambi茅n realic茅 la interacci贸n para cuando quieres abrir un detalle de producto y ya hab铆a otro detalle de producto abierto
    Aqu铆 dejo todas las interacciones entre elementos que realic茅:
    Mira aqu铆

  • Por otro lado, cuando se tiene diferentes productos en la web, se entiende que cada detalle de producto ser谩 de acuerdo al producto solicitado, es por eso que realic茅 el detalle de producto desde JavaScript, tal como se hizo con la lista de productos.
    En el siguiente tutorial muestro como lo hice: Mira el tutorial

  • Una vez elaborado el detalle de producto desde JavaScript, hay que darles interacci贸n para que se abran con el producto correcto. Mira el tutorial aqu铆

Me encantaaaaa!!!

Para mostrar u ocultar los elementos organice una 煤nica funci贸n que recibe como par谩metro el elemento a mostrar y un array con las clases a ocultar, hasta el momento me funciona perfecto.



function toggleElement(element, checkElement=[]){
    const  element_modify = document.querySelector(element);
    element_modify.classList.toggle('inactive');

    if(checkElement.length > 0){
        for(check of checkElement){
            const  element1 = document.querySelector(check);
            if(!element1.classList.contains('inactive')){
                element1.classList.add('inactive');
            }
        }
    }
}

Para m铆 fue m谩s sencillo mandar a traer la funci贸n que cierra el aside de la informaci贸n del producto que hacer otra comparaci贸n al momento de abrir el carrito.

function toggleCarrito(){
    
    if(!menuMobile.classList.contains('inactive')){

        menuMobile.classList.add('inactive')
        
    }
    productDetailClose();
    shoppingCartContainer.classList.toggle('inactive')
}

Ac谩 les dejo mi aporte. Lo dejo en forma de captura para que se lea mejor.

Considero que de esta forma les podria faciliar mucho mas su js, basicamente no uso ningun condicional, mi funcionalidad se basa en add y remove, de esta manera solo tengo que cerrar todos los elementos y abrirlos sin necesidad de preguntar cosas

const menu = document.querySelector('.desktop-menu');
const navEmail = document.querySelector('.nav-email');
const menuMobile = document.querySelector('.mobile-menu');
const IconHam = document.querySelector('.menu');
const cart = document.querySelector('.shopping-car');
const aside = document.querySelector('.section-container');

const asideDetails =document.querySelector('.aside-container') ;
const detailsClosed = document.querySelector('.closed-details');

const mainContainer = document.querySelector('.main-container');



navEmail.addEventListener('click',block);
IconHam.addEventListener('click',blockMobile);
cart.addEventListener('click',blockCart);
detailsClosed.addEventListener('click',XDetails)
/* defined inactive-stated */

mainContainer.classList.remove('inactive');
// active default


function block()
{
    menu.classList.toggle('inactive');
    aside.classList.add('inactive');
    asideDetails.classList.add('inactive');

}


function blockMobile()
{ 
    menuMobile.classList.toggle('inactive');
     aside.classList.add('inactive');
     asideDetails.classList.add('inactive');

}

function blockCart()
{
    aside.classList.toggle('inactive');
    menuMobile.classList.add('inactive');
    menu.classList.add('inactive');
    asideDetails.classList.add('inactive');


}
function Details()
{
    asideDetails.classList.remove('inactive');
    menu.classList.add('inactive');
    menuMobile.classList.add('inactive');
    aside.classList.add('inactive');
    mainContainer.classList.add('inactive');



    
}
function XDetails()
{
    asideDetails.classList.add('inactive');
    mainContainer.classList.remove('inactive');

    
}
//main-container-products
// arr
const productList =[];
productList.push({
    name:'Bike',
    price:120,
    image:'Product/Bike.jpg',
});
productList.push({
    name:'TV',
    price:100,
    image:'Product/Bike.jpg',
});
productList.push({
    name:'Tablet',
    price:70,
    image:'Product/Bike.jpg',
});
productList.push({
    name:'Bike',
    price:120,
    image:'Product/Bike.jpg',
});
productList.push({
    name:'TV',
    price:100,
    image:'Product/Bike.jpg',
});
productList.push({
    name:'Tablet',
    price:70,
    image:'Product/Bike.jpg',
});
productList.push({
    name:'Bike',
    price:120,
    image:'Product/Bike.jpg',
});
productList.push({
    name:'TV',
    price:100,
    image:'Product/Bike.jpg',
});
productList.push({
    name:'Tablet',
    price:70,
    image:'Product/Bike.jpg',
});
//layout-for-of
function renderProducts(arr)
{
    for(product of arr){
        const cardsContainer=document.querySelector('.cards-container');
        const productCard = document.createElement('div');
        productCard.classList.add('product-card-order');
        const productImg = document.createElement('img');
        productImg.classList.add('images-main');
        productImg.setAttribute('src',product.image);
        productImg.addEventListener('click', Details);

    
        const informationDiv =document.createElement('div');
        informationDiv.classList.add('buy-information');
        const priceParagraph=document.createElement('p');
        const nameParagraph=document.createElement('p');
    priceParagraph.innerText= '$'+ product.price;
        nameParagraph.innerText = product.name;
        informationDiv.append(priceParagraph,nameParagraph);
    
        const figure =document.createElement('figure');
        figure.classList.add('buy-Logo');
        const LogoImage =document.createElement('img');
        LogoImage.setAttribute('src', './Icons/Platzi_YardSale_Icons/bt_add_to_cart.svg' );
        figure.append(LogoImage);
        productCard.append(productImg,informationDiv,figure);
        cardsContainer.appendChild(productCard);
    
        
    
    
    
    }    

}
renderProducts(productList);



La solucion mas limpia y simple que encontre es esta, no estoy seguro que sea la mejor, juzguen ustedes:

<function showDesktopMenu(){
    shoppingCartContainer.classList.add("inactive");
    productDetailContainer.classList.add("inactive");
    desktopMenu.classList.remove("inactive");
}
function showMobileMenu(){
    shoppingCartContainer.classList.add("inactive");
    productDetailContainer.classList.add("inactive");
    mobileMenu.classList.remove("inactive");
}
function showShoppingCartContainer(){
    mobileMenu.classList.add("inactive");
    productDetailContainer.classList.add("inactive");
	shoppingCartContainer.classList.remove("inactive");
}> 

En vez de alentar al estudiante, lo que hace es dar miedo por lo que viene鈥 Malo malo eso.

Solo falto la combinaci贸n del men煤 de deskto pero aplicando la misma l贸gica que ya tra铆amos er谩 s煤per sencillo ponerlas a funcionar todas.

Yo me bas茅 en los condicionales hechos anteriormente.

        const productImg=document.createElement('img');
        productImg.setAttribute('src',product.image);
        productImg.addEventListener('click',()=>{
            if(!mobileMenu.classList.contains('inactive') ||!desktopMenu.classList.contains('inactive') || !aside.classList.contains('inactive')){
                mobileMenu.classList.add('inactive');
                desktopMenu.classList.add('inactive');
                aside.classList.add('inactive');
                
            }
            productDetailContainer.classList.toggle('inactive')
        });

Otra que genera problemas,es al momento de darle click al correo y esta el aside abierto.

Soluci贸n para esto

navEmail.addEventListener('click',()=>{
    if(!aside.classList.contains('inactive')|| !productDetailContainer.classList.contains('inactive')){
        aside.classList.add('inactive');
        productDetailContainer.classList.add('inactive');
        
    }
    desktopMenu.classList.toggle('inactive');  
});```

Les dejo mi 煤nica funci贸n de toggle que maneja la apertura y cierre de todas las sub secciones del marketplace tal como la vengo llevando hasta ahora:

function toggleMenu(event) {
    /* console.log(event); */
    if (event.srcElement.className === 'menu') {
        const isshoppingCartContainerClose = shoppingCartContainer.classList.contains('inactive');
        const isProductDetailContainerClosed = productDetailContainer.classList.contains('inactive');

        if (!isshoppingCartContainerClose) {
            shoppingCartContainer.classList.add('inactive');
        } else if (!isProductDetailContainerClosed) {
            productDetailContainer.classList.add('inactive');
        }

        mobileMenu.classList.toggle('inactive');
    } else if (event.srcElement.className === 'navbar-email') {
        const isshoppingCartContainerClose = shoppingCartContainer.classList.contains('inactive');
        const isProductDetailContainerClosed = productDetailContainer.classList.contains('inactive');

        if (!isshoppingCartContainerClose) {
            shoppingCartContainer.classList.add('inactive');
        } else if (!isProductDetailContainerClosed) {
            productDetailContainer.classList.add('inactive');
        }

        desktopMenu.classList.toggle('inactive');

    } else if (event.srcElement.className === 'navbar-shopping-cart') {
        const isMobileMenuClosed = mobileMenu.classList.contains('inactive'); /* True si el mobileMenu est谩 inactive */
        const isDesktopMenuClosed = desktopMenu.classList.contains('inactive');
        const isProductDetailContainerClosed = productDetailContainer.classList.contains('inactive');


        if (!isMobileMenuClosed) {
            mobileMenu.classList.add('inactive');
        } else if (!isDesktopMenuClosed) {
            desktopMenu.classList.add('inactive');
        } else if (!isProductDetailContainerClosed) {
            productDetailContainer.classList.add('inactive');
        }
        
        /* Si el men煤 mobile o el men煤 desktop no est谩n cerrados entonces los cierro. */

        shoppingCartContainer.classList.toggle('inactive'); /* Y luego hago toggle de inactive para el aside de product detail */
    } else if (event.srcElement.className === 'product-img') {
        const isMobileMenuClosed = mobileMenu.classList.contains('inactive'); 
        const isDesktopMenuClosed = desktopMenu.classList.contains('inactive');
        const isshoppingCartContainerClose = shoppingCartContainer.classList.contains('inactive');

        if (!isMobileMenuClosed) {
            mobileMenu.classList.add('inactive');
        } 
        if (!isDesktopMenuClosed) {
            desktopMenu.classList.add('inactive');
        } 
        if (!isshoppingCartContainerClose) {
            shoppingCartContainer.classList.add('inactive');
        }

        // console.log(event);  Entra bien al seleccionar la imagen
        productDetailContainer.classList.remove('inactive');
    } else if (event.srcElement.className === 'product-detail-close') {
        // console.log(event);
        productDetailContainer.classList.add('inactive');
    }
}

El productDetail que estamos mostrando con esta soluci贸n est谩 hardcodeado desde HTML. Deberiamos abrir un product detail por cada uno de nuestros productos publicados. En el caso del ejemplo del profe pareciera que no es tal ya que tiene 3 bicis iguales. Pero 驴Y si fuesen distintos? 鈥 Voy a pensar la soluci贸n al problema y vuelvo.

De esta manera lo resolv铆 yo para abrir y cerrar los elementos seg煤n fuera el caso, lo 煤nico que agregu茅 fue una variable booleano. Quisiera explicar a detalle pero el c贸digo lo explica todo y mucho mejor 馃槃

Les dejo el c贸digo que me sirvi贸 sin darle tantas vueltas, hice una funcion con toggle como las demas, y luego lo unico que le cambi茅 fue el toggle por el remove, luego cree la funcion para cerrarlo y ya, pero la demas l贸gica la dej茅 igual que con las otras ventanas,

function openProductDetails() {
  // This function closes all the other menus, so nothing is behind.
  const mobileMenuClosed = mobileMenu.classList.contains("inactive");
  const desktopMenuClosed = desktopMenu.classList.contains("inactive");
  const shoppingCartClosed = shoppingCart.classList.contains("inactive");

  if (!mobileMenuClosed) {
    mobileMenu.classList.toggle("inactive");
  } else if (!desktopMenuClosed) {
    desktopMenu.classList.toggle("inactive");
  } else if (!shoppingCartClosed) {
    shoppingCart.classList.toggle("inactive");
  }

  productDetails.classList.remove("inactive");
}

function closeProductDetails() {
  const productDetailsClosed = productDetails.classList.contains("inactive");

  if (!productDetailsClosed) {
    productDetails.classList.add("inactive");
  }
}

Para evitar usar muchos condicionales, yo us茅 este c贸digo:

  • Cree funciones para cada men煤
function closeAside(){
    productDetail.classList.add('inactive');
    desktopMenu.classList.add('inactive');
    
}

function showDesktopMenu() {
    shoppingCartResume.classList.add('inactive');
    desktopMenu.classList.toggle('inactive');
    productDetail.classList.add('inactive');
}

function showMobileMenu() {
    shoppingCartResume.classList.add('inactive');
    desktopMenu.classList.add('inactive');
    mobileMenu.classList.toggle('inactive');
    productDetail.classList.add('inactive');
}

function showShoppingCart() {
    mobileMenu.classList.add('inactive');
    desktopMenu.classList.add('inactive');
    productDetail.classList.add('inactive');
    shoppingCartResume.classList.toggle('inactive');
}
  • Luego mand茅 llamar a estas funciones
navEmail.addEventListener('click', showDesktopMenu);
menu.addEventListener('click', showMobileMenu);
shoppingCartIcon.addEventListener('click', showShoppingCart);
asideClose.addEventListener('click', closeAside);
renderProducts(productList);

馃憖 Esta fue la soluci贸n a la que llegu茅 despu茅s de varias iteraciones. Hice una fuci贸n para cerrar todos los dem谩s elementos antes de abrir uno nuevo, y la llam茅 como un callback en funciones para abrir y hacer toggle.

//functions
function closeBeforeOpen(menuB, menuC, menuD) {
  const isMenuBOpen = !menuB.classList.contains('inactive');
  const isMenuCOpen = !menuC.classList.contains('inactive');
  const isMenuDOpen = !menuD.classList.contains('inactive');

  if (isMenuBOpen || isMenuCOpen || isMenuDOpen) {
    menuB.classList.add('inactive');
    menuC.classList.add('inactive');
    menuD.classList.add('inactive');
  }
}

function toggleElement(menuA, menuB, menuC, menuD) {
  closeBeforeOpen(menuB, menuC, menuD);
  menuA.classList.toggle('inactive');
}

function openElement(menuA, menuB, menuC, menuD) {
  closeBeforeOpen(menuB, menuC, menuD);
  menuA.classList.remove('inactive');
}

function closeElement(element) {
  element.classList.add('inactive');
}

馃 Para referirme a la funci贸n closeBeforeOpen, decid铆 utilizar el condicional if junto con un operador l贸gico **or ( ||) ** en lugar de simplemente ejecutar el c贸digo cada vez que se mande a llamar. Esta decisi贸n fue algo arbitraria, pero me prece que hace mas legible y comprensible el c贸digo, adem谩s evita que se ejecute en el 100% de los casos (cuando todo est谩 cerrado de antemano).

馃摉 Me pareci贸 que ser铆a lo mas pr谩ctico, mejorando (a mi parecer) la legibilidad y reduciendo la necesidad de repetir c贸digo. Esto es posible gracias al uso de arrow function para envolver los llamados en el event listener.

//event listeners
userIcon.addEventListener('click', () => toggleElement(
  desktopMenu, mobileMenu, shoppingCartContainer, productDetailBar
));

burgerIcon.addEventListener('click', () => toggleElement(
  mobileMenu, desktopMenu, shoppingCartContainer, productDetailBar
));

cartIcon.addEventListener('click', () => toggleElement(
  shoppingCartContainer, desktopMenu, mobileMenu, productDetailBar
));

productDetailCloseIcon.addEventListener('click', () => closeElement(productDetailBar));

//as铆 va el event listener dentro del ciclo for
  productCard.addEventListener('click', () => openElement(
    productDetailBar, desktopMenu, mobileMenu, shoppingCartContainer
  ));
//

馃 驴Qu茅 les parece? Ser铆a de mi agrado conocer sus opiniones al respecto.

faltaba corregir la combinacion de menuEmail de esta manera lo corregi

<const menuEmail = document.querySelector('.navbar-email');
const desktopMenu = document.querySelector('.desktop-menu');
const menuHamIcon = document.querySelector('.menu');
const menuShoppingCartIcon = document.querySelector('.navbar-shopping-cart');
const producDetailCloseIcon=document.querySelector('.product-detail-close');
const mobileMenu = document.querySelector('.mobile-menu');
const shoppingCartContainer = document.querySelector('#shoppingCartContainer');
const producDetailContainer = document.querySelector('#productDetail');
const cardContainer = document.querySelector('.cards-container');
menuEmail.addEventListener('click', () => {
    const isAsideClosed = shoppingCartContainer.classList.contains('inactive');
    const isProductDetailClosed = producDetailContainer.classList.contains('inactive'); 
    if(!isProductDetailClosed){
        producDetailContainer.classList.add('inactive');
    }
    if (!isAsideClosed) {
        shoppingCartContainer.classList.add('inactive')
    }
    desktopMenu.classList.toggle('inactive');
});
menuHamIcon.addEventListener('click', () => {
    const isAsideClosed = shoppingCartContainer.classList.contains('inactive');
    const isProductDetailClosed = producDetailContainer.classList.contains('inactive'); 
    if(!isProductDetailClosed){
        producDetailContainer.classList.add('inactive');
    }
    if (!isAsideClosed) {
        shoppingCartContainer.classList.add('inactive')
    }
    mobileMenu.classList.toggle('inactive');
});
menuShoppingCartIcon.addEventListener('click', () => {
    const isMobileMenuClosed = mobileMenu.classList.contains('inactive');
    const isDesktopMenuClosed = desktopMenu.classList.contains('inactive');
    const isProductDetailClosed = producDetailContainer.classList.contains('inactive');
    if (!isMobileMenuClosed) {
        mobileMenu.classList.add('inactive');
    } 
    if(!isProductDetailClosed){
        producDetailContainer.classList.add('inactive');
    }
    if (!isDesktopMenuClosed) {
        desktopMenu.classList.add('inactive');
    }
    shoppingCartContainer.classList.toggle('inactive');
});
producDetailCloseIcon.addEventListener('click', () => {
    producDetailContainer.classList.add('inactive')
});
const productList = [];
productList.push({
    name: 'Monky fachero',
    price: 300,
    image: 'https://i.pinimg.com/736x/5d/16/cd/5d16cd4b1568c1628689360f306ecb62.jpg'
});
productList.push({
    name: 'Monky fachero',
    price: 300,
    image: 'https://i.pinimg.com/736x/bf/db/08/bfdb0852163ac36468dbe39b00601e34.jpg'
});
productList.push({
    name: 'Monky fachero',
    price: 300,
    image: 'https://wallpaperaccess.com/full/8054300.jpg'
});
productList.push({
    name: 'Monky fachero',
    price: 300,
    image: 'https://stockse.com.br/wp-content/uploads/2022/03/picrew-monkey.jpg'
});
productList.push({
    name: 'Monky fachero',
    price: 300,
    image: 'https://static.techspot.com/images2/news/bigimage/2021/09/2021-09-10-image-18.jpg'
});
productList.push({
    name: 'Monky fachero',
    price: 300,
    image: 'https://i.pinimg.com/736x/5d/16/cd/5d16cd4b1568c1628689360f306ecb62.jpg'
});
productList.push({
    name: 'Monky fachero',
    price: 300,
    image: 'https://i.pinimg.com/736x/bf/db/08/bfdb0852163ac36468dbe39b00601e34.jpg'
});
productList.push({
    name: 'Monky fachero',
    price: 300,
    image: 'https://wallpaperaccess.com/full/8054300.jpg'
});
productList.push({
    name: 'Monky fachero',
    price: 300,
    image: 'https://stockse.com.br/wp-content/uploads/2022/03/picrew-monkey.jpg'
});
productList.push({
    name: 'Monky fachero',
    price: 300,
    image: 'https://static.techspot.com/images2/news/bigimage/2021/09/2021-09-10-image-18.jpg'
});
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);
        productImg.addEventListener('click',() =>{
        desktopMenu.classList.add('inactive');
        shoppingCartContainer.classList.add('inactive');
        producDetailContainer.classList.remove('inactive');
        });
        
        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', "./iconos/Platzi_YardSale_Icons/bt_add_to_cart.svg")

        productInfoFigure.appendChild(productImgCart);

        productInfo.appendChild(productInfoDiv);
        productInfo.appendChild(productInfoFigure);

        productCard.appendChild(productImg);
        productCard.appendChild(productInfo);

        cardContainer.appendChild(productCard);
    }
}
renderProducts(productList);> 

En mi caso debido a que el cerrar las otras ventanas era repetitivo para cada elemento decid铆 crear unas funciones y as铆 solo llamarlas en cada toggle, les dejo mi c贸digo en caso de que les sirva

const menuEmail = document.querySelector('.navbar-email')
const desktopMenu = document.querySelector('.desktop-menu')
const menuHamIcon = document.querySelector('.menu')
const mobileMenu = document.querySelector('.mobile-menu')
const menuCarritoIcon = document.querySelector('.navbar-shopping-cart')
const cartMenu = document.querySelector('.product-detail')
const cardsContainer = document.querySelector('.cards-container')
const productDescriptionContainer = document.querySelector('.product-description')
const closeDescriptionIcon = document.querySelector('.product-description-close')


menuEmail.addEventListener('click', toggleDesktopMenu);
menuHamIcon.addEventListener('click', toggleMobileMenu);
menuCarritoIcon.addEventListener('click', toggleCartMenu);
closeDescriptionIcon.addEventListener('click', closeProductDescription);

function closeCart () {
    const isCartMenuClosed = cartMenu.classList.contains('inactive')

    if (!isCartMenuClosed) {
        cartMenu.classList.add('inactive')
    }
}

function closeEmailMenu () {
    const isEmailMenuClosed = desktopMenu.classList.contains('inactive')
    
    if (!isEmailMenuClosed) {
        desktopMenu.classList.add('inactive')
    }
}

function closeMenuMobile () {
    const isMobileMenuClosed = mobileMenu.classList.contains('inactive')

    if (!isMobileMenuClosed) {
        mobileMenu.classList.add('inactive')
    }
}

function toggleDesktopMenu () {
    closeCart();
    closeProductDescription();

    desktopMenu.classList.toggle('inactive');
}

function toggleMobileMenu () {
    closeCart();
    closeProductDescription();

    mobileMenu.classList.toggle('inactive');
}

function toggleCartMenu () {
    closeMenuMobile();
    closeEmailMenu();
    closeProductDescription();

    cartMenu.classList.toggle('inactive');
}

function openProductDescription () {
    productDescriptionContainer.classList.remove('inactive');
    closeCart();
    closeEmailMenu();
    closeMenuMobile();
}

function closeProductDescription () {
    productDescriptionContainer.classList.add('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: 'Skate',
        price: 80,
        image: 'https://images.pexels.com/photos/5069290/pexels-photo-5069290.jpeg?cs=srgb&dl=pexels-anna-shvets-5069290.jpg&fm=jpg&_gl=1*12r1825*_ga*NjY3MjIwNDUwLjE2NjUxMDU3MDU.*_ga_8JE65Q40S6*MTY2NzY2OTc2MS4xMC4xLjE2Njc2Njk3ODEuMC4wLjA.'
    })
    productList.push ({
        name: 'Motocross',
        price: 590,
        image: 'https://images.pexels.com/photos/160882/pexels-photo-160882.jpeg?cs=srgb&dl=pexels-daniel-160882.jpg&fm=jpg&_gl=1*on63cz*_ga*NjY3MjIwNDUwLjE2NjUxMDU3MDU.*_ga_8JE65Q40S6*MTY2NzY2OTc2MS4xMC4xLjE2Njc2Njk4NDkuMC4wLjA.'
    })

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);
        productImg.addEventListener('click', openProductDescription);
    
        const productInfo = document.createElement ('div');
        productInfo.classList.add('product-info');
    
        const productInfoDiv = document.createElement ('div');
    
        const productPriece = document.createElement('p');
        productPriece.innerText = '$' + product.price;
    
        const productName = document.createElement('p');
        productName.innerText = product.name;
    
        productInfoDiv.appendChild(productPriece);
        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);

隆Est谩 padr铆simo lo mucho que se emociona JuanDC cuando todo funciona! Esto me dice que 茅l mismo prob贸 el c贸digo, adem谩s que contagia su entusiasmo a los que estamos tomando el curso. (O por lo menos yo lo siento as铆)

es mejor superponer porque si ocupas la informaci贸n del producto al abrir el menu la b谩sica quito lo que estorba y lo dejo funcional pero se rompe la l贸gica y la armon铆a de donde estabas

Soluci贸n con toggle

Llegu茅 a esta soluci贸n porque me daba pereza pensar en que si seguimos agregando menus el c贸digo para cerrar las ventanas ser铆a interminable. La soluci贸n es una funci贸n que recibe como par谩metro un elemento de una colecci贸n de menus. Y haciendo las comparaciones correspondientes cierra todos los menus que no hayas presionado, pero si presionas un menu que ya est谩 activo (visible) lo cerrar谩. Aqu铆 mi c贸digo:

const menuEmail = document.querySelector(".navbar-email");
const desktopMenu = document.querySelector(".desktop-menu");
const burgerMenu = document.querySelector("img.menu");
const shoppingCartButton = document.querySelector(".navbar-shopping-cart");
const shoppingCartMenu = document.querySelector(".product-detail-cart");
const productDetailMenu = document.querySelector(".product-detail");
const productDetailCloseButton = document.querySelector(
  ".product-detail-close"
);
const mobileMenu = document.querySelector(".mobile-menu");
const cardsContainer = document.querySelector(".cards-container");

const menus = [desktopMenu, shoppingCartMenu, mobileMenu, productDetailMenu];

menuEmail.addEventListener("click", toggleDesktopMenu);
burgerMenu.addEventListener("click", toggleMobileMenu);
shoppingCartButton.addEventListener("click", toggleShoppingCartMenu);
productDetailCloseButton.addEventListener("click", closeProductDetailMenu);

function toggleDesktopMenu() {
  openCloseMenu(desktopMenu);
}

function toggleMobileMenu() {
  openCloseMenu(mobileMenu);
}

function toggleShoppingCartMenu() {
  openCloseMenu(shoppingCartMenu);
}

function toggleProductDetailMenu() {
  openCloseMenu(productDetailMenu);
}

function openCloseMenu(menuToInteract) {
  // Si el men煤 que intentamos abrir ya est谩 abierto, entonces lo que queremos es cerrarlo
  if (!menuToInteract.classList.contains("inactive")) {
    menuToInteract.classList.add("inactive");
  }
  // Si intentamos abrir otro menu que no sea el que ya esta abierto entonces seguimos la siguiente l贸gica: cerrar los dem谩s menus
  // y abrir el men煤 de inter茅s.
  else {
    // Recorremos el arreglo de menus y filtramos el men煤 de inter茅s que presionamos para removerle la clase inactive, y a los dem谩s
    // agregarle la clase inactive
    for (const menuItem of menus) {
      if (!menuItem.classList.contains(menuToInteract.classList[0])) {
        menuItem.classList.add("inactive");
      } else {
        menuItem.classList.remove("inactive");
      }
    }
  }
}

// function openProductDetailMenu() {
//   productDetailMenu.classList.remove("inactive");
// }

function closeProductDetailMenu() {
  productDetailMenu.classList.add("inactive");
}

Y continuaci贸n les dejo el c贸digo de la funci贸n renderProducts para no hacer muy largo este show:

function renderProducts(arr) {
  for (product of arr) {
    const productCard = document.createElement("div");
    productCard.classList.add("product-card");
    // productCard.addEventListener("click", toggleProductDetailMenu);

    // product= {name, price, image} -> product.image
    const productImg = document.createElement("img");
    productImg.setAttribute("src", product.image);
    productImg.addEventListener("click", toggleProductDetailMenu);

    const productOverview = document.createElement("div");
    productOverview.classList.add("product-overview");

    const productOverviewDiv = document.createElement("div");

    const productPrice = document.createElement("p");
    productPrice.innerText = "$" + product.price;
    const productName = document.createElement("p");
    productName.innerText = product.name;

    productOverviewDiv.appendChild(productPrice);
    productOverviewDiv.appendChild(productName);

    const productOverviewFigure = document.createElement("figure");
    const productImgCart = document.createElement("img");
    productImgCart.setAttribute("src", "./icons/bt_add_to_cart.svg");

    productOverviewFigure.appendChild(productImgCart);

    productOverview.append(productOverviewDiv, productOverviewFigure);

    productCard.append(productImg, productOverview);

    cardsContainer.appendChild(productCard);
  }
}

renderProducts(productList);

As铆 lo hice y me funcion贸 bien:

const menuEmail = document.querySelector('.navbar-email');
const menuHamIcon = document.querySelector('.menu');
const menuCarritoIcon = document.querySelector('.navbar-shopping-cart');
const productDetailCloseIcon = document.querySelector('.product-detail-close');

const desktopMenu = document.querySelector('.desktop-menu');
const mobileMenu = document.querySelector('.mobile-menu');
const shoppingCartContainer = document.querySelector('#shoppingCartContainer');
const productDetailContainer = document.querySelector('#productDetail');

const cardsContainer = document.querySelector('.cards-container');    // Requerido para poder agregar un nodo al contenedor principal

menuEmail.addEventListener('click', toggleDesktopMenu);
menuHamIcon.addEventListener('click', toggleMobileMenu);
menuCarritoIcon.addEventListener('click', toggleCarritoAside);
productDetailCloseIcon.addEventListener('click', closeProductDetailAside);

function toggleDesktopMenu() {
  desktopMenu.classList.toggle('inactive');   // Activa s贸lo el men煤 Desktop
  mobileMenu.classList.add('inactive');
  shoppingCartContainer.classList.add('inactive');
  productDetailContainer.classList.add('inactive');
}

function toggleMobileMenu() {
  desktopMenu.classList.add('inactive');
  mobileMenu.classList.toggle('inactive');    // Activa s贸lo el men煤 Mobile
  shoppingCartContainer.classList.add('inactive');
  productDetailContainer.classList.add('inactive');
}

function toggleCarritoAside() {
  desktopMenu.classList.add('inactive');
  mobileMenu.classList.add('inactive');
  shoppingCartContainer.classList.toggle('inactive');   // Activa s贸lo el men煤 Carrito
  productDetailContainer.classList.add('inactive');
}

function openProductDetailAside() {
  shoppingCartContainer.classList.add('inactive');
  desktopMenu.classList.add('inactive');
  mobileMenu.classList.add('inactive');
  productDetailContainer.classList.remove('inactive');    // Activa s贸lo el men煤 Detalle
}

function closeProductDetailAside() {
  productDetailContainer.classList.add('inactive');
}

Creo que seria lo mas logico cerrar todos y solo abrir el que se utilice

menuHamburguer.addEventListener('click',()=>{
  detailProduct.classList.remove('product-detailMostrar');
  menucart.classList.remove('my-orderActive');
  menuDesktop.classList.remove('desktop-menuActive');
  mobileMenu.classList.toggle('activeMenu');
})

shoppingCart.addEventListener('click',()=>{
  detailProduct.classList.remove('product-detailMostrar');
  menucart.classList.toggle('my-orderActive');
  menuDesktop.classList.remove('desktop-menuActive');
  mobileMenu.classList.remove('activeMenu')
})

email.addEventListener('click',()=>{
  detailProduct.classList.remove('product-detailMostrar');
  menucart.classList.remove('my-orderActive');
  menuDesktop.classList.toggle('desktop-menuActive');
  mobileMenu.classList.remove('activeMenu');
})

function mostrar(){
  detailProduct.classList.add('product-detailMostrar');
  menucart.classList.remove('my-orderActive');
  menuDesktop.classList.remove('desktop-menuActive');
  mobileMenu.classList.remove('activeMenu');
}

cerrarDetailProduct.addEventListener('click',()=>{
  detailProduct.classList.remove('product-detailMostrar');
})

Les comparto el c贸digo que me ha funcionado a mi hasta el momento. Espero a alguien mas le funcione la l贸gica de poner y quitar la class inactive.

menHamIcon.addEventListener("click", aparecerMenuMobil);
menuEmail.addEventListener("click", aparecerMenu);
menuCarritoIcon.addEventListener("click", aparecerMenuCarrito);
closeProductDetail.addEventListener("click", closeDetailProd);

function aparecerMenu() {
  desktopMenu.classList.toggle("inactive");
  carritoCompras.classList.add("inactive");
  productDetail.classList.add("inactive");
}

function aparecerMenuMobil() {
  mobileMenu.classList.toggle("inactive");
  carritoCompras.classList.add("inactive");
  productDetail.classList.add("inactive");
}

function aparecerMenuCarrito() {
  carritoCompras.classList.toggle("inactive");
  mobileMenu.classList.add("inactive");
  desktopMenu.classList.add("inactive");
  productDetail.classList.add("inactive");
}

function mostrarDetalleProducto(){
  productDetail.classList.remove("inactive");
  mobileMenu.classList.add("inactive");
  desktopMenu.classList.add("inactive");
}

function closeDetailProd(){
  productDetail.classList.add("inactive");

mi solucion siguiendo con dialog fue creando una funcion.

function dialogOpen(dialog) {
    if(dialog.open) {
        console.log('open')
        mobileMenu.classList.add('inactive');
        openCartMenu.classList.add('inactive');
        desktopMenu.classList.add('inactive');
    }
}

/*productslist.....*/
        image.onclick = () => { 
            dialog.showModal();  
            dialogOpen(dialog)
        };

tengo pendiente ver los nuevos cursos de front-end y si puedo a 2x

Hola, hasta el momento pude resolverlo con .toggle y .add sin condicionales. Creo haber probado todas las posibilidades y funciona 馃檪

function toggleDesktopMenu () {
    shoppingCartContainer.classList.add('inactive');
    productDetailAside.classList.add('inactive');
    desktopMenu.classList.toggle('inactive');
}

function toggleMobileMenu () {
    shoppingCartContainer.classList.add('inactive')
    productDetailAside.classList.add('inactive');
    mobileMenu.classList.toggle('inactive')
}

function toggleMyOrderAside () {
    mobileMenu.classList.add('inactive')
    productDetailAside.classList.add('inactive');
    shoppingCartContainer.classList.toggle('inactive')
}

function openProductDetailAside (){
    productDetailAside.classList.remove('inactive')
    shoppingCartContainer.classList.add('inactive')
    desktopMenu.classList.add('inactive');
}

function closeProductDetailAside (){
    productDetailAside.classList.add('inactive')
}

Un problema que vi y que quise solucionar es cuando estamos en la versi贸n de Mobile, hacemos scroll, y luego seleccionamos alg煤n producto (dar click en su imagen), se ve de esta manera:

Para solucionar esto, es sencillo, simplemente en el CSS, debemos modificar el contenedor perteneciente al AsideCart que es el que aparece cuando se activa el evento en click

.product-detail-secondary {
    height: calc(100vh - var(--navHeight));
    width: 100%;
    position: fixed;
    top: 60px;
  }

Agregamos un position: fixed, que lo que nos permite es que el elemento (aside) aparezca 鈥減egado鈥 en la pantalla sin que se desplaze, independiente de los dem谩s elementos, y un top:60px simplemente para que no colisione con la barra de navegacion.

De esta manera, en Mobile, si hacemos scroll ahora y seleccionamos alg煤n elemento, ya no saldr谩 en la posici贸n donde inician los productos, sino en toda nuestra pantalla

Al realizar condiciones se pueden concatenar, de esa manera se comprime un poco las condiciones por Ejemplo

function toggleCaraside() {
  const isDesktopmenu = desktopMenu.classList.contains('inactive');
  const isMobileMenuClosed = mobileMenu.classList.contains('inactive');
  const isProductDetailClosed = productDetailContainer.classList.contains('inactive');
  if (!isMobileMenuClosed || !isDesktopmenu || !isProductDetailClosed) {
    mobileMenu.classList.add('inactive');
    desktopMenu.classList.add('inactive');
    productDetailContainer.classList.add('inactive');
  }
  shoppingCartContainer.classList.toggle('inactive');
}

Mi soluci贸n fue integrar un condicional en cada evento, preguntando si esta contenia la clase 鈥渋nactive鈥 (esta abierta) y a帽adir la clase a los componentes que deberian estar cerrados.

Todo con el fin de tener mayor claridad dentro del codigo 馃懢

const productList = [];

function toggleShow(btn, elementToToggle, leaveEvent) {
btn.addEventListener(鈥渃lick鈥, () => {
elementToToggle.classList.toggle(鈥渉idden鈥);
});

if (leaveEvent) {
elementToToggle.addEventListener(鈥渕ouseleave鈥, (e) => {
elementToToggle.classList.add(鈥渉idden鈥);
});
}
}

function renderProduct(array) {
let index = 0;
for (product of array) {
productNode = <div --data-product-id="${index++}" class="product-card"> <img src=${product.img} alt=""> <div class="product-info"> <div> <p>$${product.price}</p> <p>${product.name}</p> </div> <figure> <img src="./icons/bt_add_to_cart.svg" alt=""> </figure> </div> </div>;
cardsContainer.innerHTML += productNode;
}
}

function renderProductDetails(product) {
let productDetailsInfo = document.querySelector(".product_details-info");
productDetailsInfo.replaceChildren();

let pPrice = document.createElement(鈥減鈥);
pPrice.append($${product.price});
let pName = document.createElement(鈥減鈥);
pName.append(${product.name});
let pDescrip = document.createElement(鈥減鈥);
pDescrip.append(${product.desc});

productDetailsInfo.append(pPrice, pName, pDescrip);
}

function openProduct() {
let productId = document.querySelectorAll("[鈥揹ata-product-id]");

for (let i = 0; i < productId.length; i++) {
productId[i].addEventListener(鈥渃lick鈥, () => {
renderProductDetails(productList[i]);
});
toggleShow(productId[i], productDetail,true);
}
}

Este proyecto lo realic茅 con React en lugar de javascript puro pero es un buen ejercicio hacerlo con javascript puro aunque hubiera preferido separar el c贸digo en es-modulos

Falta el desktopMenu, que se queda abierto debajo al hacer click en otro, y lo he resuelto a帽adiendo la funci贸n closeProductDetailAside en la funci贸n toggleDesktopMenu:

function toggleDesktopMenu() {
const isAsideClosed = shoppingCartContainer.classList.contains('inactive');

if (!isAsideClosed) {
    shoppingCartContainer.classList.add('inactive');
}

closeProductDetailAside();

desktopMenu.classList.toggle('inactive');
}

y en la funci贸n toggleCarritoAside a帽ad铆 una nueva variable llamada isDesktopMenuClosed con un condicional if:

function toggleCarritoAside() {
const isMobileMenuClosed = mobileMenu.classList.contains('inactive');

if (!isMobileMenuClosed) {
    mobileMenu.classList.add('inactive');
}

const isProductDetailClosed = productDetailContainer.classList.contains('inactive');

if (!isProductDetailClosed) {
    productDetailContainer.classList.add('inactive');
}

const isDesktopMenuClosed = desktopMenu.classList.contains('inactive');

if (!isDesktopMenuClosed) {
    desktopMenu.classList.add('inactive');
}

shoppingCartContainer.classList.toggle('inactive');
}
function toggleDesktopMenu() {
    mobileMenu.classList.add('inactive');
    shoppingCartContainer.classList.add('inactive');
    productDetailContainer.classList.add('inactive')    

    desktopMenu.classList.toggle('inactive');
}

function toggleMobileMenu() {
    desktopMenu.classList.add('inactive');
    shoppingCartContainer.classList.add('inactive');
    productDetailContainer.classList.add('inactive')

    mobileMenu.classList.toggle('inactive');
}

function toggleCartAside() {
    mobileMenu.classList.add('inactive');
    desktopMenu.classList.add('inactive');
    productDetailContainer.classList.add('inactive');

    shoppingCartContainer.classList.toggle('inactive');
}

function openProductDetailAside() {
    mobileMenu.classList.add('inactive');
    desktopMenu.classList.add('inactive');
    shoppingCartContainer.classList.add('inactive');

    productDetailContainer.classList.remove('inactive')
}

function closeProductDetailAside() {
    productDetailContainer.classList.add('inactive')
}

Yo lo hice con puras condiciones l贸gicas, la unica manera de que no se me active es que ninguna de las condiciones sean verdaderas.

Dejo mi aporte

//Productos
//Carga

const productList = [];

productList.push({
    name:'Bike',
    price: 10000,
    image:'https://pedalia.cc/wp-content/uploads/2016/07/FeatureBiciMontana-770x513.jpg',
    id:0,
});

productList.push({
    name:'Computadora',
    price: 200000,
    image:'https://drawfolio.s3.amazonaws.com/public/system/pictures/images/000/032/729/original/compu.jpg?1430413991',
    id:1,
});

productList.push({
    name:'Celular',
    price: 80600,
    image:'https://marcimex.vteximg.com.br/arquivos/ids/188520-320-320/34663---CELULAR-I_APPLE_IPHONE-13-PRO-128GB_GRA.jpg?v=637902369438870000',
    id:2,
});

productList.push({
    name:'Bike 3',
    price: 10000,
    image:'https://pedalia.cc/wp-content/uploads/2016/07/FeatureBiciMontana-770x513.jpg',
    id:3,
});

productList.push({
    name:'Computadora 4',
    price: 200000,
    image:'https://drawfolio.s3.amazonaws.com/public/system/pictures/images/000/032/729/original/compu.jpg?1430413991',
    id:4,
});

productList.push({
    name:'Celular 5',
    price: 80600,
    image:'https://marcimex.vteximg.com.br/arquivos/ids/188520-320-320/34663---CELULAR-I_APPLE_IPHONE-13-PRO-128GB_GRA.jpg?v=637902369438870000',
    id:5,
});

//Creamos las tarjetas con JS

function createCards (arr) {

    for (product of arr){

        const productDiv = document.createElement('div');
        productDiv.classList.add('product-card');
        
        productDiv.addEventListener('click', openDetails);
    
        const productImg = document.createElement('img');
        productImg.setAttribute('src', product.image);

        const containerDescription = document.createElement('div');
        containerDescription.classList.add('container-desciption');

        const containerDescriptionDiv = document.createElement('div');
        containerDescriptionDiv.classList.add('product-card_description');


        console.log(product.id);

       
        //accion
        
        const productPrice = document.createElement('p');
        productPrice.classList.add('product-price');
        productPrice.innerText= '$' + product.price;

        const productName = document.createElement('p');
        productName.classList.add('product-description');
        productName.innerText = product.name;

        containerDescriptionDiv.appendChild(productPrice);
        containerDescriptionDiv.appendChild(productName);
        

        const productFigure = document.createElement('figure');
        
        const productImgIconCart = document.createElement('img');
        productImgIconCart.classList.add('iconCard');
        productImgIconCart.setAttribute('src', "../iconos-img/carrito-compras.png");

        productFigure.appendChild(productImgIconCart);

        containerDescription.appendChild(containerDescriptionDiv);
        containerDescription.appendChild(productFigure);

        productDiv.appendChild(productImg);
        productDiv.appendChild(containerDescription);

        cardsContainer.appendChild(productDiv);

    
    }
}
//Cerrar aside detalles
function closeDetails(){
    productDetails.classList.add('inactivo');
}
function openDetails(e){
    productDetails.classList.remove('inactivo');
    productDetailsImg.setAttribute('src' , e.target.src );
    cardDescripcionPrice.innerText = e.target.nextElementSibling.firstChild.firstChild.innerText;
    cardDescripcionTitle.innerText = e.target.nextElementSibling.firstChild.lastChild.innerText;

    console.log(e);
}

createCards(productList);

Mi soluci贸n al toggle de todos los elementos.

Se que es algo peque帽o pero me tomos varios minutos resolverlo. cuando abres el desktopMenu y en el siguiente paso abres prductDetailAside, ocurre que el desktop queda abierto por debajo. mi soluci贸n fue agregar una linea de c贸digo

function openProductDetailAside(){
//esta linea agrega desactivar el desktop mientras el productDetailAside este abierto.

    desktopMenu.classList.add('inactive');

    shoppingCartContainer.classList.add('inactive')

    productDetailContainer.classList.remove('inactive');
}```

Mi soluci贸n a esta clase sin condicionales

function toggleMiniMenu() {
    
    miniMenu.classList.toggle('inactive');
    carritoMenu.classList.add('inactive');
    detalleProducto.classList.add('inactive');
}

function toggleMobileMenu() {
    mobileMenu.classList.toggle('inactive');
    carritoMenu.classList.add('inactive');
    detalleProducto.classList.add('inactive');
}

function toggleCarritoMenu() {
    mobileMenu.classList.add('inactive');
    miniMenu.classList.add('inactive');
    carritoMenu.classList.toggle('inactive');
    detalleProducto.classList.add('inactive');
    
}

function abrirDetalleProducto() {
    detalleProducto.classList.remove('inactive');
    mobileMenu.classList.add('inactive');
    miniMenu.classList.add('inactive');
    carritoMenu.classList.add('inactive');
}

function cerrarDetalleProducto() {
    detalleProducto.classList.add('inactive');
}

Logr茅 abrir y cerrar todos los menus y asides en una sola funci贸n (o algo parecido) y pude hacer que el datalle de cada producto renderice al que se le hace click y no uno fijo

// desktop menu
const email = document.querySelector(".navbar-email");
email.addEventListener("click", toggleMenu);

// mobile menu
const burgerMenu = document.querySelector(".menu");
burgerMenu.addEventListener("click", toggleMenu);

// shopping cart
const cartButton = document.querySelector(".navbar-shopping-cart");
cartButton.addEventListener("click", toggleMenu);

// product detail
const close = document.querySelector(".detail-close");
close.addEventListener("click", toggleMenu);

const components = [];
const mobileMenu = document.querySelector(".mobile-menu");
const desktopMenu = document.querySelector(".desktop-menu");
const shoppingCart = document.querySelector(".product-detail");
const detail = document.querySelector(".detail");
components.push(mobileMenu, desktopMenu, shoppingCart, detail);

function closeAll() {
  for (const component of components) {
    component.classList.add("toggleMenu");
  }
}

function openDetail(product) {
  closeAll();
  deleteDetail();

  detail.classList.remove("toggleMenu");
  detail.innerHTML = `
  <div class="detail-close">
    <img class="close" src="./icons/icon_close.png" alt="close">
  </div>
  <img
    src="${product.image}"
    alt="${product.name}"
  />
  <div class="info">
    <p>$${product.price}</p>
    <p>${product.name}</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>`;
  const close = document.querySelector(".detail-close");
  close.addEventListener("click", toggleMenu);
}

function deleteDetail() {
  const productDetail = document.querySelector(".detail");
  productDetail.innerHTML = "";
}

//abrir y cerrar los menus
function toggleMenu(event) {
  console.log({ event });
  console.log(event.target.className);

  const mobileMenu = document.querySelector(".mobile-menu");
  const desktopMenu = document.querySelector(".desktop-menu");
  const shoppingCart = document.querySelector(".product-detail");
  const detail = document.querySelector(".detail");

  switch (event.target.className) {
    case "navbar-email":
      openOne(desktopMenu);
      break;

    case "menu":
      openOne(mobileMenu);
      break;

    case "carrito":
      openOne(shoppingCart);
      if (!desktopMenu.classList.contains("toggleMenu")) {
        desktopMenu.classList.add("toggleMenu");
      }
      break;

    case "close":
      detail.classList.add("toggleMenu");
      break;

    case "detail-close":
      detail.classList.add("toggleMenu");
      break;

    default:
      break;
  }

  function openOne(open) {
    for (const component of components) {
      if (!component.classList.contains("toggleMenu") && component != open) {
        component.classList.add("toggleMenu");
      }
    }
    open.classList.toggle("toggleMenu");
  }
}

//products
const productList = [
  {
    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",
  },
  {
    name: "TV",
    price: 220,
    image:
      "data:image/jpeg;base64,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",
  },
  {
    name: "Phone",
    price: 1100,
    image:
      "data:image/jpeg;base64,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",
  },
  {
    name: "Plane",
    price: 650000,
    image:
      "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQJve9Ih1rK8iOC0H71GhQdT6r09qdPmzk93Q&usqp=CAU",
  },
  {
    name: "T-Shirt",
    price: 20,
    image:
      "data:image/jpeg;base64,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",
  },
  {
    name: "Shoes",
    price: 50,
    image:
      "data:image/jpeg;base64,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",
  },
  {
    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",
  },
  {
    name: "TV",
    price: 220,
    image:
      "data:image/jpeg;base64,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",
  },
  {
    name: "Phone",
    price: 1100,
    image:
      "data:image/jpeg;base64,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",
  },
  {
    name: "Plane",
    price: 650000,
    image:
      "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQJve9Ih1rK8iOC0H71GhQdT6r09qdPmzk93Q&usqp=CAU",
  },
  {
    name: "T-Shirt",
    price: 20,
    image:
      "data:image/jpeg;base64,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",
  },
  {
    name: "Shoes",
    price: 50,
    image:
      "data:image/jpeg;base64,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",
  },
];

function getProducts(arr) {
  const cardsContainer = document.querySelector(".cards-container");
  arr.forEach((product) => {
    const productCard = document.createElement("div");
    productCard.classList.add("product-card");

    const image = document.createElement("img");
    image.setAttribute("src", product.image);
    image.addEventListener("click", () => {
      openDetail(product);
    });
    productCard.append(image);

    const productInfo = document.createElement("div");
    productInfo.classList.add("product-info");
    productCard.append(productInfo);

    const div = document.createElement("div");
    productInfo.append(div);

    const price = document.createElement("p");
    price.innerText = `$${product.price}`;
    div.append(price);

    const name = document.createElement("p");
    name.innerText = product.name;
    div.append(name);

    const figure = document.createElement("figure");
    productInfo.append(figure);

    const cartImg = document.createElement("img");
    cartImg.setAttribute("src", "./icons/bt_add_to_cart.svg");
    figure.append(cartImg);

    cardsContainer.append(productCard);
  });
}

getProducts(productList);

Lo hice viendo como resolvimos los problemas anteriores con el If, asi funciona con todas las combinaciones y usando el toggle en el open, con esto funciona tanto cerrando con el boton de cerrar como dandole click denuevo a la imagen

const menuEmail = document.querySelector ('.navbar-email');
const desktopMenu = document.querySelector ('.desktop-menu');
const menuHamIcon = document.querySelector ('.menu');
const mobileMenu = document.querySelector ('.mobile-menu');
const carrito = document.querySelector ('.navbar-shopping-cart');
const productDetailCloseIcon = document.querySelector ('.product-detail-close');
const shoppingCartContainer = document.querySelector ('#shoppingCartContainer');
const productDetailContainer = document.querySelector ('#productDetail');
const cardsContainer = document.querySelector('.cards-container');

menuEmail.addEventListener('click', toggleDesktopMenu);
menuHamIcon.addEventListener('click', toggleMobileMenu);
carrito.addEventListener('click', togglecarrito);
productDetailCloseIcon.addEventListener('click', closeProductDetailAside);

function toggleDesktopMenu() {
    const isAsideClosed = shoppingCartContainer.classList.contains('inactive');
    const isProductDetailClosed = productDetailContainer.classList.contains('inactive');
    if (!isAsideClosed) {
        shoppingCartContainer.classList.add('inactive');
    } if (!isProductDetailClosed) {
        productDetailContainer.classList.add('inactive');
    }
    desktopMenu.classList.toggle('inactive');
};

function toggleMobileMenu() {
    const isAsideClosed = shoppingCartContainer.classList.contains('inactive');
    const isProductDetailClosed = productDetailContainer.classList.contains('inactive');
    if (!isAsideClosed) {
        shoppingCartContainer.classList.add('inactive');
    } if (!isProductDetailClosed) {
        productDetailContainer.classList.add('inactive');
    }
    mobileMenu.classList.toggle('inactive');
    
};

function togglecarrito() {
    const isMenuMobileClosed = mobileMenu.classList.contains('inactive');
    const isMenuDesktopClosed = desktopMenu.classList.contains('inactive');
    const isProductDetailClosed = productDetailContainer.classList.contains('inactive');
if (!isMenuMobileClosed) {
    mobileMenu.classList.add('inactive');
} if (!isMenuDesktopClosed) {
    desktopMenu.classList.add('inactive');
} if (!isProductDetailClosed) {
    productDetailContainer.classList.add('inactive');
}
shoppingCartContainer.classList.toggle('inactive');
}

function openProductDetailAside() {
    productDetailContainer.classList.toggle('inactive');
    const isMenuMobileClosed = mobileMenu.classList.contains('inactive');
    const isMenuDesktopClosed = desktopMenu.classList.contains('inactive');
    const isAsideClosed = shoppingCartContainer.classList.contains('inactive');
    if (!isMenuMobileClosed) {
        mobileMenu.classList.add('inactive');
    } if (!isMenuDesktopClosed) {
        desktopMenu.classList.add('inactive');
    } if (!isAsideClosed) {
    shoppingCartContainer.classList.add('inactive');
}
}

function closeProductDetailAside() {
    productDetailContainer.classList.add('inactive');

}

Cerrar y abrir elementos con un solo toggle en una unica funci贸n
En los ejercicios realizados en clase se desarrollaron 4 funciones para poder aplicar el valor 鈥渋nactive鈥 a los elementos que no quer铆amos abrir y este mismo valor se le remov铆a al elemento que si deseamos mostrar. Desarrolle una funci贸n corta que se pudiera utilizar en lugar de las 4 funciones desarrolladas en clase, teniendo as铆 una funci贸n totalmente reutilizable en todos los addEventListener para ocultar o mostrar elementos.

Esto me funcion贸 super, no se si est茅 bien

const ProductCardsDetails = document.querySelector('.product-cards-details');
const closeProductCardsDetails = document.querySelector('.product-cards-details-close');

function openProductCardsDetails(){
    ProductCardsDetails.classList.remove('inactive');
    categoryBurgerMenu.classList.add('inactive');
    carProductsAside.classList.add('inactive'); 
}
closeProductCardsDetails.addEventListener('click', closeProductCDetails)
function closeProductCDetails(){
    ProductCardsDetails.classList.add('inactive');
}

Esta es mi soluci贸n:

Yo cuando vi que ahora necesitabamos jugar con las combinaciones para hacer cerrar y abrir los elementos me puse como reto hacerlo sin ver c贸mo lo hac铆a Juan. Como igual ya era algo que hemos hecho me pareci贸 sencillo y me qued贸 funcionando al 1000% ya despu茅s me salte hasta que v铆 que Juan lo hab铆a concluido y era el fin de la clase 馃槃 Muy feliz. Saludos!

Fui resolviendo de esta manera, aparentemente todo funciona y los colapsos se mantienen bien. Cuantas formas de hacer lo mismo pueden pensar?

Que tremendo curso!
Bueno, en mi caso, yo intent茅 hacerle as铆 a la creaci贸n del contenedor principal.

function renderProducts (arr) {

var contador = 0;

for(product of arr){

    stringHTML = `<div class='product-card'>
    <img src="` + product.img + `" id="imagen-`+contador+`" alt="Imagen del producto">
    <div class="product-info">
    <div>
        <p>` + product.price+ `</p>
        <p>` + product.name + `</p>
        </div>
        <figure>
            <img src="./icons/bt_add_to_cart.svg" alt="">
        </figure>
    </div>
    </div>
    `;

    cardsContainer.innerHTML += stringHTML;
    contador++;

}

}

脡ntonces, decid铆 trabajar con el mismo paradigma de realizar un for y asignar a cada imagen un id diferente con un contador num茅rico鈥olo por reto鈥

function renderProductsForImg(arr){
var contador = 0;
for(product of arr){
const imgProduct = document.querySelector(鈥#imagen-鈥+contador+鈥欌);
imgProduct.addEventListener(鈥榗lick鈥,openProductDetailAside);

    const detailMenu = document.querySelector('#product-detail');
    function openProductDetailAside() {
        detailMenu.classList.remove('inactive');

        if(!shoppingMenu.classList.contains('inactive')){
            shoppingMenu.classList.add('inactive');
        }

    }

    const closeDetailMenu = document.querySelector('.product-detail-close, .title-container');
    closeDetailMenu.addEventListener('click',closeProductDetailAside);

    function closeProductDetailAside() {
        detailMenu.classList.add('inactive');

        if(!shoppingMenu.classList.contains('inactive')){
            shoppingMenu.classList.add('inactive');
        }

    }

    contador++;

}

}

Y si me pregunta, no s茅 si sea una buena pr谩ctica o no xD pero no me arrepiento xD

Hola.

Comparto mi soluci贸n para la creaci贸n del aside(detalles del producto).
Recordando que la variable 鈥榩roducto鈥 guarda la lista de productos definida anteriormente.

Cuando el usuario da click a una imagen de un producto invocar谩 una 煤nica funci贸n que abre, ycrea el aside con los datos, tambi茅n cierra los men煤s abiertos.

Buenas, falt贸 cerrar el men煤 desktop al abrir el product detail y vice versa, aqui esta mi soluci贸n.

function toggleDesktopMenu() {
    const isCarritoComprasClosed = carritoDeCompras.classList.contains('inactive');

    if (!isCarritoComprasClosed) {

            carritoDeCompras.classList.add("inactive");
       
    }
    //mando cerrar el produtc detail siempre antes de abrir el menu desktop
 productDetailContainer.classList.add('inactive');
 
desktopMenu.classList.toggle('inactive');
}

y vice versa 

function openProductDetailContainer() {
    desktopMenu.classList.toggle('inactive');
    carritoDeCompras.classList.toggle("inactive")
    productDetailContainer.classList.remove('inactive');

    
}

Debo mejorar mi orden del c贸digo, tengo un desmaaaye. Y debo manejar mejor el nombre de las variables, creo que desde la maquetacion y estilos podemos mejorar por mucho eso.

Me encantaaaaaaaa

Lo hice sin usar condicionales, funciona todo correctamente 馃槃

opcEmail?.addEventListener("click", showHideMenuDesktop);
iconMenu?.addEventListener("click", showHideMenuMobile);
iconShopping?.addEventListener("click", showHideShoppingCar);
btnClose?.addEventListener('click', hideDetailProduct)

function showHideMenuDesktop() {
  desktopMenu?.classList.toggle("inactive");
  productShopping?.classList.add("inactive");
  showDetail?.classList.add("inactive");
}
function showHideMenuMobile() {
  mobileMenu?.classList.toggle("inactive");
  productShopping?.classList.add("inactive");
  showDetail?.classList.add("inactive");
}
function showHideShoppingCar() {
  productShopping?.classList.toggle("inactive");
  mobileMenu?.classList.add("inactive");
  desktopMenu?.classList.add("inactive");
  showDetail?.classList.add("inactive");
}
function showDetailProduct(){
  showDetail?.classList.remove('inactive');
  productShopping?.classList.add("inactive");
  mobileMenu?.classList.add("inactive");
  desktopMenu?.classList.add("inactive");
}

function hideDetailProduct(){
  showDetail?.classList.add("inactive");
}

Asi quedo mi soluci贸n

function toggleDesktopMenu()
{
    mobileMenu.classList.add('inactive');
    aside.classList.add('inactive');
    productDetailContainer.classList.add('inactive');
    desktopMenu.classList.toggle('inactive');
}

function toggleMobileMenu()
{
    desktopMenu.classList.add('inactive');
    aside.classList.add('inactive');
    productDetailContainer.classList.add('inactive');
    mobileMenu.classList.toggle('inactive');
}

function toggleCartAside()
{
    desktopMenu.classList.add('inactive');
    mobileMenu.classList.add('inactive');
    productDetailContainer.classList.add('inactive');
    aside.classList.toggle('inactive');
}

function openProductDetail()
{
    desktopMenu.classList.add('inactive');
    mobileMenu.classList.add('inactive');
    aside.classList.add('inactive');
    productDetailContainer.classList.remove('inactive');
}

function closeProductDetail()
{
    productDetailContainer.classList.add('inactive');
} 

Esta es la forma que lo hice yo, funciona todo


navmenu.addEventListener("click", toggleMenuDesktop);
burguerMenu.addEventListener("click", toggleMenuMobile);
menuCarritoIcon.addEventListener("click", toggleCarrito);
closeMenuInfo.addEventListener("click", removeMenuInfo);
function toggleMenuDesktop() {
  aside.classList.add("inactive");
  productDetailsContainer.classList.add("inactive");
  desktopMenu.classList.toggle("inactive");

}

function toggleMenuMobile() {
  aside.classList.add("inactive");
  productDetailsContainer.classList.add("inactive");
  menuMobile.classList.toggle("inactive");

}

function toggleCarrito() {
  menuMobile.classList.add("inactive");
  desktopMenu.classList.add("inactive");
  productDetailsContainer.classList.add("inactive");
  aside.classList.toggle("inactive");
}
function openProductDetails(){
    productDetailsContainer.classList.remove("inactive");
    menuMobile.classList.add("inactive");
    desktopMenu.classList.add("inactive");
    aside.classList.add("inactive");

}

function removeMenuInfo(){
    productDetailsContainer.classList.add("inactive");
}

鉁煢

Para m铆 la l贸gica m谩s adecuada es la que implica utilizar el return de la funci贸n toggle()
Con las funciones que muestro a continuaci贸n se pudieron hacer todas las combinaciones funcionando realmente bien! c:

function toogleMobileMenu() {
  // Si el men煤 m贸vil se activa (es decir, se remueve la clase "inactive-mobile_menu")
  if (!mobileMenu.classList.toggle("inactive-mobile_menu")) {
    mobileMenuBlurBackground.classList.remove("inactive-mobile_menu");
    // Bloquea el scroll del body
    bodyElement.classList.add("no-scroll");
    // Si el carrito de compras est谩 activo, lo desactiva
    if (!shoppingCartContainer.classList.contains("inactive-shopping-cart")) {
      shoppingCartContainer.classList.add("inactive-shopping-cart");
    }
  } else {
    // Si el men煤 m贸vil se desactiva, desbloquea el scroll del body
    bodyElement.classList.remove("no-scroll");
    mobileMenuBlurBackground.classList.add("inactive-mobile_menu");
  }
}

function toogleShoppingCart() {
  // Si el carrito de compras se activa (es decir, se remueve la clase "inactive-shopping-cart")
  if (!shoppingCartContainer.classList.toggle("inactive-shopping-cart")) {
    // Si el men煤 m贸vil est谩 activo, lo desactiva
    if (!mobileMenu.classList.contains("inactive-mobile_menu")) {
      mobileMenu.classList.add("inactive-mobile_menu");
      mobileMenuBlurBackground.classList.add("inactive-mobile_menu");
    }
    //Si el detalle del producto est谩 abierto, lo cerramos
    if (!productDetail.classList.contains("inactive-shopping-cart")) {
      productDetail.classList.add("inactive-shopping-cart");
    }
  }
}

function openProductDetailAside() {
  productDetail.classList.remove("inactive-shopping-cart");
  if (!shoppingCartContainer.classList.contains("inactive-shopping-cart")) {
    shoppingCartContainer.classList.add("inactive-shopping-cart");
  }
}

function closeProductDetailAside() {
  productDetail.classList.add("inactive-shopping-cart");
}
intent茅 de todas las maneras posible y nunca pode encontrar el error para cerrar

Dejo mi aporte 馃挌 como lo solucione.

<function toggleDesktopMenu () {
    shoppingCartMenu.classList.add('inactive');
    desktopMenu.classList.toggle('inactive');
    closeProductDetailAside();
}

function toggleMobileMenu(){
    shoppingCartMenu.classList.add('inactive');
    mobileMenu.classList.toggle('inactive');
    closeProductDetailAside();
}

function toggleAsideMenu(){
    mobileMenu.classList.add('inactive');
    desktopMenu.classList.add('inactive');
    shoppingCartMenu.classList.toggle('inactive');
    closeProductDetailAside();
}

function openProducDetailAside(){
    productDetailContainer.classList.remove('inactive');
    shoppingCartMenu.classList.add('inactive');
    desktopMenu.classList.add('inactive');
}

function closeProductDetailAside(){
    productDetailContainer.classList.add('inactive');
}> 

Mi solucion, agregue todos los 鈥淧opUps鈥 a una lista para trabajar todas las query del mismo comportamiento


const listaPopUp=[desktopMenu,mobileMenu,shoppingCartContainer,productDetailContainer];

productDetailClose.addEventListener('click',function(){
    closePopUp(productDetailContainer);
})
menuEmail.addEventListener('click',function () {
    manejoPopUp(desktopMenu,listaPopUp);
  });


burgerMenu.addEventListener('click', function(){
    manejoPopUp(mobileMenu,listaPopUp);
})

shoppingCartMenu.addEventListener('click', function(){
    manejoPopUp(shoppingCartContainer,listaPopUp);
});




function manejoPopUp(popUp,listaPopUp){
    const arrAux = [...listaPopUp];
    let index = arrAux.indexOf(popUp);
    arrAux.splice(index,1);
    if (popUp==productDetailContainer){
        openPopUp(popUp);
        closePopUps(arrAux);
    }
    else{
        togglePopUp(popUp);
        closePopUps(arrAux);
    }
    }

function togglePopUp (popUp) {
    popUp.classList.toggle('inactive');   
    };

function closePopUps(listaPopUp){
    listaPopUp.map(closePopUp);
}

function closePopUp(popUp){
    popUp.classList.add('inactive');
}

function openPopUp(popUp){
    popUp.classList.remove('inactive');
}

馃挌馃挌馃挌Mi soluci贸n馃挌馃挌馃挌


function toggleDestopMenu(){  
    desktopMenu.classList.toggle('inactive')  
    if (!desktopMenu.classList.contains('inactive')) {
      shoppingCartDetail.classList.add("inactive") ||
        productDetail.classList.add("inactive");
    }  
}


function toggleMobileMenu() {
  mobileMenu.classList.toggle('inactive');
  if (!mobileMenu.classList.contains('inactive')) {
    shoppingCartDetail.classList.add("inactive") ||
      productDetail.classList.add("inactive");
  }
}

function toggleshoppingCartDetail () {
  shoppingCartDetail.classList.toggle('inactive');
  if (!shoppingCartDetail.classList.contains('inactive') ) {
    mobileMenu.classList.add("inactive") ||
      desktopMenu.classList.add("inactive") ||
      productDetail.classList.add("inactive");
  }  
}

function openProductDetailAside(){
  productDetail.classList.remove('inactive')
  if (!productDetail.classList.contains("inactive")) {
    shoppingCartDetail.classList.add("inactive") ||
      mobileMenu.classList.add("inactive") ||
      desktopMenu.classList.add("inactive");
  }  
}
function closeProductDetailAside(){
  productDetail.classList.add("inactive");
}

fue mas el susto que el problema, se me hizo muy sencillo y me sorprendi al ver que tome la decision de cerrar todo antes de verlo en la clase

Agregar Funcionalidad a la Vista

  • Para agregar funcionalidad a nuestra vista, comenzamos por incorporar el componente 鈥減roductDetail鈥 a nuestro HTML y comprobamos que los estilos CSS funcionan correctamente incluso cuando se aplican a elementos muy similares.
  • El siguiente paso es permitir que este nuevo componente se muestre u oculte cuando hacemos clic en los productos que hemos agregado a nuestro HTML utilizando JavaScript a partir de un 鈥渁rray鈥.
  • Es importante que esta funcionalidad funcione de manera independiente y no afecte otras partes de la vista, como el men煤 m贸vil o el carrito de compras.
  • Para lograr esto, podemos usar 鈥渆ventListeners鈥 para detectar los clics en las im谩genes de productos y abrir o cerrar el 鈥減roductDetail鈥 en consecuencia.
  • Tambi茅n debemos tener en cuenta que si hacemos clic en una imagen de producto mientras el 鈥減roductDetail鈥 ya est谩 abierto, no deber铆a cerrarse autom谩ticamente. En cambio, deber铆amos proporcionar un bot贸n separado para cerrar el 鈥減roductDetail鈥.

Selecci贸n de Elementos desde JavaScript

  • Aunque los elementos HTML de los productos no est谩n presentes en nuestro HTML inicial, est谩n siendo generados din谩micamente en JavaScript con la funci贸n 鈥渞enderProducts鈥. Esto significa que podemos seleccionar estos elementos de la misma manera que cualquier otro elemento HTML.
  • Podemos asignarles eventos como 鈥渁ddEventListener鈥 y definir qu茅 sucede cuando se hace clic en ellos.

Abrir el 鈥減roductDetail鈥

  • Para abrir el 鈥減roductDetail鈥, podemos crear una funci贸n llamada 鈥渙penProductDetailAside鈥. Dentro de esta funci贸n, seleccionamos el contenedor del 鈥減roductDetail鈥 y eliminamos la clase 鈥渋nactive鈥 para que se muestre en la vista.
  • Es importante asegurarse de que esta funci贸n se pueda ejecutar sin importar si ya est谩 abierto o cerrado.

Cerrar el 鈥減roductDetail鈥

  • Para cerrar el 鈥減roductDetail鈥, creamos una funci贸n llamada 鈥渃loseProductDetailAside鈥. Dentro de esta funci贸n, volvemos a seleccionar el contenedor del 鈥減roductDetail鈥 y le agregamos la clase 鈥渋nactive鈥 para ocultarlo.
  • Al igual que con la funci贸n de apertura, esta funci贸n debe poder cerrar el 鈥減roductDetail鈥 incluso si ya est谩 cerrado.

Gestionar la Interacci贸n entre Elementos

  • Para garantizar que los elementos se gestionen correctamente en conjunto, implementamos condicionales que verifican el estado de otros elementos antes de abrir o cerrar un elemento determinado.
  • Por ejemplo, si el 鈥減roductDetail鈥 est谩 abierto y se intenta abrir el carrito de compras o el men煤 m贸vil, primero debemos cerrar el 鈥減roductDetail鈥.
  • Del mismo modo, si el carrito de compras est谩 abierto y se intenta abrir el 鈥減roductDetail鈥, debemos cerrar el carrito de compras antes de abrir el 鈥減roductDetail鈥.
  • Esta l贸gica asegura que los elementos se muestren y oculten correctamente y que no haya conflictos en la interacci贸n del usuario.
  • Tambi茅n se aborda el caso en el que un elemento ya est谩 abierto y se intenta abrir el mismo elemento nuevamente. En este caso, el elemento debe permanecer abierto.

Pruebas y Depuraci贸n

  • Despu茅s de implementar la funcionalidad, es importante realizar pruebas exhaustivas para garantizar que todos los escenarios funcionen como se espera.
  • Se recomienda probar todas las combinaciones posibles de apertura y cierre de elementos, como abrir y cerrar el carrito de compras, abrir y cerrar el men煤 m贸vil y abrir y cerrar el 鈥減roductDetail鈥.
  • Cualquier problema o error encontrado durante las pruebas debe ser registrado y, si es posible, se debe proporcionar una soluci贸n junto con la descripci贸n del problema.
  • Una vez que todas las pruebas sean exitosas y la funcionalidad se ejecute sin problemas en todas las situaciones, la vista estar谩 lista para ser fusionada en el proyecto principal.

Conclusi贸n

  • Con la funcionalidad de JavaScript agregada correctamente a la vista, podemos proceder a enviar una solicitud de extracci贸n (鈥減ull request鈥) al repositorio principal del proyecto para que el desarrollador principal revise y fusiona nuestros cambios.
  • Es importante proporcionar una descripci贸n clara de los cambios realizados, c贸mo se prob贸 la funcionalidad y cualquier problema que se haya resuelto durante el proceso.
  • Con esto, la vista estar谩 lista para ser utilizada en el proyecto principal con todas las interacciones y funcionalidades implementadas.

A mi me funciono de diferente manera

resolvi todas las funciones de la siguiente manera:


//array con las secciones de menu
const sectionSelect =[
    desktopMenu,
    mobileMenu,
    asideMyorders,
    productDetail,
]
menuEmail.addEventListener('click',() =>selecionarSection(0))// funcion cuando se hace click
menuMobile.addEventListener('click',() =>selecionarSection(1))
menuCarrito.addEventListener('click',() =>selecionarSection(2))
flechaCarrito.addEventListener('click',() =>selecionarSection(2))
closeProductDetail.addEventListener('click',() =>selecionarSection(3))
//() =>selecionarSection(3) funcion de flecha , para poder pasar valores a la funcion

function selecionarSection(section){
    for (let index = 0; index < sectionSelect.length; index++) {
        const element = sectionSelect[index];
        if (index==section) {
            element.classList.toggle('inactive');
        }else{
            element.classList.add('inactive');
        }
    }
}