fusión de los componentes desde el curso básico de java script

MainFusion.js

@@ -0,0 +1,193 @@
+const menuEmail = document.querySelector('.navbar-email');
+const desktopMenu= document.querySelector('.desktop-menu');
+const menuHamburger= document.querySelector('.menu');
+const mobilmenu= document.querySelector('.mobile-menu');
+const product_detail_close= document.querySelector('.product-detail-close');
+const carrito_compras= document.querySelector('.navbar-shopping-cart');//esta es la clase general pero llama a la clase "aside"
+const shoppinCartContainer= document.querySelector('#shoppinCartContainer');
+const CardsContainer= document.querySelector('.cards-container');
+const product_detailContainer= document.querySelector('#product-detail');
+
+
+
+
+
+
+menuEmail.addEventListener('click', toggleDesktopMenu);
+menuHamburger.addEventListener('click', togglemobilmenu);//inicialmente se escucha cuando le den click al elemento en cuestión
+carrito_compras.addEventListener('click', toggle_carrito_compras);
+
+
+// document.addEventListener("click", (e)=>{
+//     if(e.target.matches(".mobile-menu"))
+//     alert("click fuera del elemento");
+
+// });
+
+
+function toggleDesktopMenu() {
+    const isasideclosed= shoppinCartContainer.classList.contains('inactive');
+
+    if (!isasideclosed) {
+        shoppinCartContainer.classList.add('inactive');
+
+    }
+    desktopMenu.classList.toggle('inactive')
+    console.log('menuHamburger');
+}
+
+function togglemobilmenu() {
+    product_detailContainer.classList.add('inactive');
+    const isasideclosed= shoppinCartContainer.classList.contains('inactive');
+    if (!isasideclosed) {
+        shoppinCartContainer.classList.add('inactive');
+
+    }
+
+    mobilmenu.classList.toggle('inactive')//se hace el llamado a la clase inactive la cual mediante la funsión toggle se le añade
+    }
+
+function toggle_carrito_compras() {//el carrito de compras es manejado por la variable aside para recordar eso 
+    const ismobileMenuclosed = mobilmenu.classList.contains('inactive');
+    const isdesktopMenuclosed = desktopMenu.classList.contains('inactive');
+
+        if (!isdesktopMenuclosed) {
+            desktopMenu.classList.add('inactive');
+
+        }
+
+        if (!ismobileMenuclosed) {
+            mobilmenu.classList.add('inactive');
+
+        }
+            /////////cierra el product datail si esta abierto
+        const isproduct_detailContainerClosed = product_detailContainer.classList.contains('inactive');
+        if (!isproduct_detailContainerClosed) {
+            product_detailContainer.classList.add('inactive');
+
+        }
+
+        if (!ismobileMenuclosed) {
+            mobilmenu.classList.add('inactive');
+
+        }
+        shoppinCartContainer.classList.toggle('inactive');
+
+    }
+
+
+
+    function openProductDeatailAside() {
+        shoppinCartContainer.classList.add('inactive');//para este caso de estas 2 funciones se puede hacer el cierre de esta forma por que no es un toggle
+
+        product_detailContainer.classList.remove('inactive');//utilizamos remove para quitarle la clase inactive al elemento
+    }
+    function closeProductDeatailAside() {
+        product_detailContainer.classList.add('inactive');
+    }
+
+const productlist = [];
+productlist.push({
+    id:1,
+    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({
+    id:2,
+    name:'pantalla',
+    price:320,
+    image:'https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'
+
+});
+
+productlist.push({
+    id:3,
+    name:'telefonos',
+    price:150,
+    image:'https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'
+
+});
+productlist.push({
+    id:4,
+    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({
+    id:5,
+    name:'pantalla',
+    price:320,
+    image:'https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'
+
+});
+
+productlist.push({
+    id:6,
+    name:'telefonos',
+    price:150,
+    image:'https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'
+
+});
+
+/*<div class="product-card">
+        <img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
+        <div class="product-info">
+          <div>
+            <p>$120,00</p>
+            <p>Bike</p>
+          </div>
+          <figure>
+            <img src="./icons/bt_add_to_cart.svg" alt="">
+          </figure>
+        </div>
+      </div> -->*/
+
+
+    function renderProducts(arr) {
+        for (product of arr){//este tipo de for mas simplificado nos arroja cada obejteo almacenado dentro de un array
+            // maquetacion de todos los elementos HTML desde javascript
+            const productCard= document.createElement('div');
+            productCard.classList.add('product-card');
+            const  productimg= document.createElement('img');
+            productimg.setAttribute('src',product.image);
+            productimg.addEventListener('click',openProductDeatailAside);
+            product_detail_close.addEventListener('click',closeProductDeatailAside);
+
+            const productInf= document.createElement('div');
+            productInf.classList.add('product-info');
+            const productInfDiv= document.createElement('div');
+            const productPrice= document.createElement('p');
+            productPrice.innerText='$ '+ product.price;
+            const productName= document.createElement('p');
+            productName.innerText= product.name;
+            const productInfoFigure= document.createElement('figure');
+            const  productImgCart= document.createElement('img');
+            productImgCart.setAttribute('src','./icons/bt_add_to_cart.svg');
+
+            // unificación de hijos y padres desde javascript
+            productInfoFigure.append(productImgCart);
+            productInfDiv.append(productPrice,productName);
+            productInf.append(productInfDiv);
+            productCard.append(productimg,productInf);
+            CardsContainer.appendChild(productCard);
+
+            // productCard.appendChild(productimg); //el apendchil solo permite añadir un hijo mientras que apend permite añadir todos los hijos que sean necesarios
+            // productCard.appendChild(productInf);
+            // productInf.appendChild(productInfDiv);
+            // productInf.appendChild(productInfoFigure);
+            // productInfDiv.appendChild(productPrice);
+            // productInfDiv.appendChild(productName);
+            // productInfoFigure.appendChild(productImgCart);
+            }
+
+
+
+    }renderProducts(productlist);
+
+
+
+
+