diff --git a/MainFusion.js b/MainFusion.js new file mode 100644 index 000000000..6c026d3a2 --- /dev/null +++ b/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' + +}); + +/*
+ +
+
+

$120,00

+

Bike

+
+
+ +
+
+
-->*/ + + + 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); + + + + + diff --git a/StyleFusion.css b/StyleFusion.css new file mode 100644 index 000000000..4e3ec9774 --- /dev/null +++ b/StyleFusion.css @@ -0,0 +1,401 @@ +/* estilos generales */ +:root { + --white: #FFFFFF; + --black: #000000; + --very-light-pink: #C7C7C7; + --text-input-field: #F7F7F7; + --hospital-green: #ACD9B2; + --rojo-pasion:#852a2a; + --sm: 14px; + --md: 16px; + --lg: 18px; + } + body { + margin: 0; + font-family: 'Quicksand', sans-serif; + } + + .inactive{ + + display: none; + + } + /* navbar general */ + nav { + display: flex; + justify-content: space-between; + padding: 0 24px; + border-bottom: 1px solid var(--very-light-pink); + } + .menu { + display: none; + } + .logo { + width: 100px; + } + .navbar-left ul, + .navbar-right ul { + list-style: none; + padding: 0; + margin: 0; + display: flex; + align-items: center; + height: 60px; + } + .navbar-left { + display: flex; + } + .navbar-left ul { + margin-left: 12px; + } + .navbar-left ul li a, + .navbar-right ul li a { + text-decoration: none; + color: var(--very-light-pink); + border: 1px solid var(--white); + padding: 8px; + border-radius: 8px; + } + .navbar-left ul li a:hover, + .navbar-right ul li a:hover { + border: 1px solid var(--hospital-green); + color: var(--hospital-green); + } + .navbar-email { + color: var(--very-light-pink); + font-size: var(--sm); + cursor: pointer; + margin-right: 12px; + } + .navbar-shopping-cart { + position: relative; + cursor: pointer; + } + .navbar-shopping-cart div { + width: 16px; + height: 16px; + background-color: var(--hospital-green); + border-radius: 50%; + font-size: var(--sm); + font-weight: bold; + position: absolute; + top: -6px; + right: -3px; + display: flex; + justify-content: center; + align-items: center; + } +/* Destop menu en desktop */ + .desktop-menu { + position: absolute; /*permite poner el menu ensima de la barra */ + top : 60px;/*lo alinea a la derecha junto con la sentencia de abajo del right */ + right: 40px; + background: var(--white); + width: 100px; + height: auto; + border: 1px solid var(--very-light-pink); + border-radius: 6px; + padding: 20px 20px 0 20px; + } + .desktop-menu ul { + list-style: none; + padding: 0; + margin: 0; + } + .desktop-menu ul li { + text-align: end; + } + .desktop-menu ul li:nth-child(1), + .desktop-menu ul li:nth-child(2) { + font-weight: bold; + } + .desktop-menu ul li:last-child { + padding-top: 20px; + border-top: 1px solid var(--very-light-pink); + } + .desktop-menu ul li:last-child a { + color: var(--hospital-green); + font-size: var(--sm); + } + .desktop-menu ul li a { + color: var(--back); + text-decoration: none; + margin-bottom: 20px; + display: inline-block; + } + +/* mobile menu */ + +.mobile-menu { + background-color: var(--white); + padding: 24px; + position: absolute; + top: 60px; + left: 0; + width: 100%; + /* width: calc(100%-24px); + padding-left: 24px; */ +} +.mobile-menu a { + text-decoration: none; + color: var(--black); + font-weight: bold; + /* margin-bottom: 24px; */ +} +.mobile-menu ul { + padding: 0; + margin: 24px 0 0; + list-style: none; +} +.mobile-menu ul:nth-child(1) { + border-bottom: 1px solid var(--very-light-pink); +} +.mobile-menu ul li { + margin-bottom: 24px; +} +.email { + font-size: var(--sm); + font-weight: 300 !important; +} +.sign-out { + font-size: var(--sm); + color: var(--hospital-green) !important; +} + + +/* Aside (product detail y carrito) */ +aside { + background-color: var(--white); + width: 360px; + + box-sizing: border-box; + position: absolute; + right: 0; + + +} + +/* shoppingcart */ +#shoppinCartContainer{ + padding: 0 24px; + +} + +.title-container { + display: flex; +} +.title-container img { + transform: rotate(180deg); + margin-right: 14px; +} +.title { + font-size: var(--lg); + font-weight: bold; +} +.order { + display: grid; + grid-template-columns: auto 1fr; + gap: 16px; + align-items: center; + background-color: var(--text-input-field); + margin-bottom: 24px; + border-radius: 8px; + padding: 0 24px; +} +.order p:nth-child(1) { + display: flex; + flex-direction: column; +} +.order p span:nth-child(1) { + font-size: var(--md); + font-weight: bold; +} +.order p:nth-child(2) { + text-align: end; + font-weight: bold; +} +.shopping-cart { + display: grid; + grid-template-columns: auto 1fr auto auto; + gap: 16px; + margin-bottom: 24px; + align-items: center; +} +.shopping-cart figure { + margin: 0; +} +.shopping-cart figure img { + width: 70px; + height: 70px; + border-radius: 20px; + object-fit: cover; +} +.shopping-cart p:nth-child(2) { + color: var(--very-light-pink); +} +.shopping-cart p:nth-child(3) { + font-size: var(--md); + font-weight: bold; +} +.primary-button { + background-color: var(--hospital-green); + border-radius: 8px; + border: none; + color: var(--white); + width: 100%; + cursor: pointer; + font-size: var(--md); + font-weight: bold; + height: 50px; +} + + +/* ProdictDetail */ +.product-detail-close { + background: var(--white); + width: 14px; + height: 14px; + position: absolute; + top: 24px; + left: 24px; + z-index: 2; + padding: 12px; + border-radius: 50%; +} +.product-detail-close:hover { + cursor: pointer; +} +#product-detail > img:nth-child(2) { + width: 100%; + height: 360px; + object-fit: cover; + border-radius: 0 0 20px 20px; +} +#product-detail .product-info { + margin: 24px 24px 0 24px; +} +#product-detail .product-info p:nth-child(1) { + font-weight: bold; + font-size: var(--md); + margin-top: 0; + margin-bottom: 4px; +} +#product-detail .product-info p:nth-child(2) { + color: var(--very-light-pink); + font-size: var(--md); + margin-top: 0; + margin-bottom: 36px; +} +#product-detail .product-info p:nth-child(3) { + color: var(--very-light-pink); + font-size: var(--sm); + margin-top: 0; + margin-bottom: 36px; +} +.primary-button { + background-color: var(--hospital-green); + border-radius: 8px; + border: none; + color: var(--white); + width: 100%; + cursor: pointer; + font-size: var(--md); + font-weight: bold; + height: 50px; +} +.add-to-cart-button { + display: flex; + align-items: center; + justify-content: center; +} + + +/* product list */ +.cards-container { + display: grid; + grid-template-columns: repeat(auto-fill, 240px); + gap: 26px; + place-content: center; + margin-top: 20px; +} +.product-card { + width: 240px; +} +.product-card img { + width: 240px; + height: 240px; + border-radius: 20px; + object-fit: cover; +} +.product-card .product-info { + display: flex; + justify-content: space-between; + align-items: center; + margin-top: 12px; +} +.product-card .product-info figure { + margin: 0; +} +.product-card .product-info figure img { + width: 35px; + height: 35px; +} +.product-card .product-info div p:nth-child(1) { + font-weight: bold; + font-size: var(--md); + margin-top: 0; + margin-bottom: 4px; +} +.product-card .product-info div p:nth-child(2) { + font-size: var(--sm); + margin-top: 0; + margin-bottom: 0; + color: var(--very-light-pink); +} +@media (max-width: 640px) { + +} + +/* mediaquery generales */ + + + @media (max-width: 640px) { + .menu { + display: block; + } + .navbar-left ul { + display: none; + } + .navbar-email { + display: none; + } + + .desktop-menu{ + + display: none; + + } + aside { + width: 100%; + } + .cards-container { + grid-template-columns: repeat(auto-fill, 140px); + } + .product-card { + width: 140px; + } + .product-card img { + width: 140px; + height: 140px; + } + } + @media (min-width: 641px) { + + .mobile-menu{ + + display: none; + } + + + + } \ No newline at end of file diff --git a/fusion_componentes.html b/fusion_componentes.html new file mode 100644 index 000000000..c4a1476f3 --- /dev/null +++ b/fusion_componentes.html @@ -0,0 +1,202 @@ + + + + + + + + + + + + + Soficastore + + + + + + + + +
+
+ + + +
+
+ + + + + + \ No newline at end of file