From f8ae5e77a7bfb4a6c0bd53589e8dddb7abbcd781 Mon Sep 17 00:00:00 2001 From: yoberty parada Date: Sun, 3 Dec 2023 14:04:14 -0500 Subject: [PATCH 1/5] =?UTF-8?q?se=20a=C3=B1adio=20el=20menu=20peque=C3=B1o?= =?UTF-8?q?=20al=20dar=20clic=20en=20el=20correo?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- MainFusion.js | 11 ++++ StyleFusion.css | 134 ++++++++++++++++++++++++++++++++++++++++ fusion_componentes.html | 75 ++++++++++++++++++++++ 3 files changed, 220 insertions(+) create mode 100644 MainFusion.js create mode 100644 StyleFusion.css create mode 100644 fusion_componentes.html diff --git a/MainFusion.js b/MainFusion.js new file mode 100644 index 000000000..261e0d614 --- /dev/null +++ b/MainFusion.js @@ -0,0 +1,11 @@ +const menuEmail = document.querySelector('.navbar-email'); +const desktopMenu= document.querySelector('.desktop-menu'); + + + + +menuEmail.addEventListener('click', toggleDesktopMenu); + +function toggleDesktopMenu() { + desktopMenu.classList.toggle('inactive') +} \ No newline at end of file diff --git a/StyleFusion.css b/StyleFusion.css new file mode 100644 index 000000000..d15d9b298 --- /dev/null +++ b/StyleFusion.css @@ -0,0 +1,134 @@ +:root { + --white: #FFFFFF; + --black: #000000; + --very-light-pink: #C7C7C7; + --text-input-field: #F7F7F7; + --hospital-green: #ACD9B2; + --sm: 14px; + --md: 16px; + --lg: 18px; + } + body { + margin: 0; + font-family: 'Quicksand', sans-serif; + } + + .inactive{ + + display: none; + + } + nav { + display: flex; + justify-content: space-between; + padding: 0 24px; + border-bottom: 1px solid var(--very-light-pink); + } + .menu { + display: none; + } + .logo { + width: 100px; + } + .navbar-left ul, + .navbar-right ul { + list-style: none; + padding: 0; + margin: 0; + display: flex; + align-items: center; + height: 60px; + } + .navbar-left { + display: flex; + } + .navbar-left ul { + margin-left: 12px; + } + .navbar-left ul li a, + .navbar-right ul li a { + text-decoration: none; + color: var(--very-light-pink); + border: 1px solid var(--white); + padding: 8px; + border-radius: 8px; + } + .navbar-left ul li a:hover, + .navbar-right ul li a:hover { + border: 1px solid var(--hospital-green); + color: var(--hospital-green); + } + .navbar-email { + color: var(--very-light-pink); + font-size: var(--sm); + cursor: pointer; + margin-right: 12px; + } + .navbar-shopping-cart { + position: relative; + } + .navbar-shopping-cart div { + width: 16px; + height: 16px; + background-color: var(--hospital-green); + border-radius: 50%; + font-size: var(--sm); + font-weight: bold; + position: absolute; + top: -6px; + right: -3px; + display: flex; + justify-content: center; + align-items: center; + } + + .desktop-menu { + position: absolute; /*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; + } + + + @media (max-width: 640px) { + .menu { + display: block; + } + .navbar-left ul { + display: none; + } + .navbar-email { + display: none; + } + } \ No newline at end of file diff --git a/fusion_componentes.html b/fusion_componentes.html new file mode 100644 index 000000000..f9eb667e2 --- /dev/null +++ b/fusion_componentes.html @@ -0,0 +1,75 @@ + + + + + + + + + + + + + Soficastore + + + + + + + + \ No newline at end of file From 87edc701b0bdee10a0018c7af6b6a0d397a9773d Mon Sep 17 00:00:00 2001 From: yoberty parada Date: Sun, 3 Dec 2023 15:38:15 -0500 Subject: [PATCH 2/5] =?UTF-8?q?se=20a=C3=B1adio=20el=20sub-menu=20movil=20?= =?UTF-8?q?al=20menu=20hamburguesa?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- MainFusion.js | 11 +++++++- StyleFusion.css | 56 ++++++++++++++++++++++++++++++++++++++++- fusion_componentes.html | 43 +++++++++++++++++++++++++++++++ 3 files changed, 108 insertions(+), 2 deletions(-) diff --git a/MainFusion.js b/MainFusion.js index 261e0d614..d57004f4a 100644 --- a/MainFusion.js +++ b/MainFusion.js @@ -1,11 +1,20 @@ const menuEmail = document.querySelector('.navbar-email'); const desktopMenu= document.querySelector('.desktop-menu'); +const menuHamburger= document.querySelector('.menu'); +const mobilmenu= document.querySelector('.mobile-menu'); menuEmail.addEventListener('click', toggleDesktopMenu); +menuHamburger.addEventListener('click', togglemobilmenu);//inicialmente se escucha cuando le den click al elemento en cuestión function toggleDesktopMenu() { desktopMenu.classList.toggle('inactive') -} \ No newline at end of file + console.log('menuHamburger'); +} + +function togglemobilmenu() { + mobilmenu.classList.toggle('inactive')//se hace el llamado a la clase inactive la cual mediante la funsión toggle se le añade +} + diff --git a/StyleFusion.css b/StyleFusion.css index d15d9b298..e1852d610 100644 --- a/StyleFusion.css +++ b/StyleFusion.css @@ -1,3 +1,4 @@ +/* estilos generales */ :root { --white: #FFFFFF; --black: #000000; @@ -18,6 +19,7 @@ display: none; } + /* navbar general */ nav { display: flex; justify-content: space-between; @@ -81,7 +83,7 @@ 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 */ @@ -120,6 +122,41 @@ display: inline-block; } +/* mobile menu */ + +.mobile-menu { + padding: 24px; + position: absolute; + top: 60px; +} +.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; +} + + + @media (max-width: 640px) { .menu { @@ -131,4 +168,21 @@ .navbar-email { display: none; } + + .desktop-menu{ + + display: none; + + } + + } + @media (min-width: 641px) { + + .mobile-menu{ + + display: none; + } + + + } \ No newline at end of file diff --git a/fusion_componentes.html b/fusion_componentes.html index f9eb667e2..5ee02734d 100644 --- a/fusion_componentes.html +++ b/fusion_componentes.html @@ -68,6 +68,49 @@ +
+ + + + + +
From 9e5e5a12ff39d8da5b597c86eadb85980072b0bb Mon Sep 17 00:00:00 2001 From: yoberty parada Date: Tue, 5 Dec 2023 19:49:53 -0500 Subject: [PATCH 3/5] maquetaciode html y lectura de los productos desde el array --- MainFusion.js | 142 +++++++++++++++++++++++++++++++++++++++- StyleFusion.css | 141 ++++++++++++++++++++++++++++++++++++++- fusion_componentes.html | 68 +++++++++++++++++++ 3 files changed, 349 insertions(+), 2 deletions(-) diff --git a/MainFusion.js b/MainFusion.js index d57004f4a..4b1b9d2a6 100644 --- a/MainFusion.js +++ b/MainFusion.js @@ -2,19 +2,159 @@ const menuEmail = document.querySelector('.navbar-email'); const desktopMenu= document.querySelector('.desktop-menu'); const menuHamburger= document.querySelector('.menu'); const mobilmenu= document.querySelector('.mobile-menu'); +const carrito_compras= document.querySelector('.navbar-shopping-cart');//esta es la clase general pero llama a la clase "aside" +const aside= document.querySelector('.product-detail'); +const CardsContainer= document.querySelector('.cards-container'); + + 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= aside.classList.contains('inactive'); + + if (!isasideclosed) { + aside.classList.add('inactive'); + + } desktopMenu.classList.toggle('inactive') console.log('menuHamburger'); } function togglemobilmenu() { + const isasideclosed= aside.classList.contains('inactive'); + if (!isasideclosed) { + aside.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'); + + } + aside.classList.toggle('inactive'); + + } + + +const productlist = []; +productlist.push({ + name:'bike', + price:120, + image:'https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940' + +}); +productlist.push({ + name:'pantalla', + price:320, + image:'https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940' + +}); + +productlist.push({ + 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({ + name:'bike', + price:120, + image:'https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940' + +}); +productlist.push({ + name:'pantalla', + price:320, + image:'https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940' + +}); + +productlist.push({ + 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); + 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 index e1852d610..1208b7313 100644 --- a/StyleFusion.css +++ b/StyleFusion.css @@ -68,6 +68,7 @@ } .navbar-shopping-cart { position: relative; + cursor: pointer; } .navbar-shopping-cart div { width: 16px; @@ -125,6 +126,7 @@ /* mobile menu */ .mobile-menu { + background-color: var(--white); padding: 24px; position: absolute; top: 60px; @@ -156,6 +158,131 @@ } +/* aside (product detail y carrito) */ +.product-detail { + background-color: var(--white); + width: 360px; + padding: 0 24px; + box-sizing: border-box; + position: absolute; + right: 0; + + +} +.title-container { + display: flex; +} +.title-container img { + transform: rotate(180deg); + margin-right: 14px; +} +.title { + font-size: var(--lg); + font-weight: bold; +} +.order { + display: grid; + grid-template-columns: auto 1fr; + gap: 16px; + align-items: center; + background-color: var(--text-input-field); + margin-bottom: 24px; + border-radius: 8px; + padding: 0 24px; +} +.order p:nth-child(1) { + display: flex; + flex-direction: column; +} +.order p span:nth-child(1) { + font-size: var(--md); + font-weight: bold; +} +.order p:nth-child(2) { + text-align: end; + font-weight: bold; +} +.shopping-cart { + display: grid; + grid-template-columns: auto 1fr auto auto; + gap: 16px; + margin-bottom: 24px; + align-items: center; +} +.shopping-cart figure { + margin: 0; +} +.shopping-cart figure img { + width: 70px; + height: 70px; + border-radius: 20px; + object-fit: cover; +} +.shopping-cart p:nth-child(2) { + color: var(--very-light-pink); +} +.shopping-cart p:nth-child(3) { + font-size: var(--md); + font-weight: bold; +} +.primary-button { + background-color: var(--hospital-green); + border-radius: 8px; + border: none; + color: var(--white); + width: 100%; + cursor: pointer; + font-size: var(--md); + font-weight: bold; + height: 50px; +} +/* product 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-info { + display: flex; + justify-content: space-between; + align-items: center; + margin-top: 12px; +} +.product-info figure { + margin: 0; +} +.product-info figure img { + width: 35px; + height: 35px; +} +.product-info div p:nth-child(1) { + font-weight: bold; + font-size: var(--md); + margin-top: 0; + margin-bottom: 4px; +} +.product-info div p:nth-child(2) { + font-size: var(--sm); + margin-top: 0; + margin-bottom: 0; + color: var(--very-light-pink); +} +@media (max-width: 640px) { + +} + +/* mediaquery generales */ @media (max-width: 640px) { @@ -174,7 +301,19 @@ display: none; } - + .product-detail { + width: 100%; + } + .cards-container { + grid-template-columns: repeat(auto-fill, 140px); + } + .product-card { + width: 140px; + } + .product-card img { + width: 140px; + height: 140px; + } } @media (min-width: 641px) { diff --git a/fusion_componentes.html b/fusion_componentes.html index 5ee02734d..edadd2aea 100644 --- a/fusion_componentes.html +++ b/fusion_componentes.html @@ -112,6 +112,74 @@ + + +
+
+ + + +
+
+ + From 09f903b3614ad1f2df867bdfb256faec17e99e8a Mon Sep 17 00:00:00 2001 From: yoberty parada Date: Tue, 5 Dec 2023 20:42:34 -0500 Subject: [PATCH 4/5] cambios realizados al css por la clases asaid y ajustamos el menu mobile, aun asi sigue faltando el tema de el scroll en el mobile --- MainFusion.js | 12 +++--- StyleFusion.css | 91 +++++++++++++++++++++++++++++++++++++---- fusion_componentes.html | 18 +++++++- 3 files changed, 105 insertions(+), 16 deletions(-) diff --git a/MainFusion.js b/MainFusion.js index 4b1b9d2a6..c8a7049d3 100644 --- a/MainFusion.js +++ b/MainFusion.js @@ -3,7 +3,7 @@ const desktopMenu= document.querySelector('.desktop-menu'); const menuHamburger= document.querySelector('.menu'); const mobilmenu= document.querySelector('.mobile-menu'); const carrito_compras= document.querySelector('.navbar-shopping-cart');//esta es la clase general pero llama a la clase "aside" -const aside= document.querySelector('.product-detail'); +const shoppinCartContainer= document.querySelector('#shoppinCartContainer'); const CardsContainer= document.querySelector('.cards-container'); @@ -24,10 +24,10 @@ carrito_compras.addEventListener('click', toggle_carrito_compras); function toggleDesktopMenu() { - const isasideclosed= aside.classList.contains('inactive'); + const isasideclosed= shoppinCartContainer.classList.contains('inactive'); if (!isasideclosed) { - aside.classList.add('inactive'); + shoppinCartContainer.classList.add('inactive'); } desktopMenu.classList.toggle('inactive') @@ -35,9 +35,9 @@ function toggleDesktopMenu() { } function togglemobilmenu() { - const isasideclosed= aside.classList.contains('inactive'); + const isasideclosed= shoppinCartContainer.classList.contains('inactive'); if (!isasideclosed) { - aside.classList.add('inactive'); + shoppinCartContainer.classList.add('inactive'); } @@ -57,7 +57,7 @@ function toggle_carrito_compras() {//el carrito de compras es manejado por la va mobilmenu.classList.add('inactive'); } - aside.classList.toggle('inactive'); + shoppinCartContainer.classList.toggle('inactive'); } diff --git a/StyleFusion.css b/StyleFusion.css index 1208b7313..26482caf5 100644 --- a/StyleFusion.css +++ b/StyleFusion.css @@ -130,6 +130,10 @@ padding: 24px; position: absolute; top: 60px; + left: 0; + width: 100%; + /* width: calc(100%-24px); + padding-left: 24px; */ } .mobile-menu a { text-decoration: none; @@ -158,17 +162,24 @@ } -/* aside (product detail y carrito) */ -.product-detail { +/* Aside (product detail y carrito) */ +aside { background-color: var(--white); width: 360px; - padding: 0 24px; + box-sizing: border-box; position: absolute; right: 0; } + +/* shoppingcart */ +#shoppinCartContainer{ + padding: 0 24px; + +} + .title-container { display: flex; } @@ -236,6 +247,68 @@ 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; @@ -253,26 +326,26 @@ border-radius: 20px; object-fit: cover; } -.product-info { +.product-card .product-info { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; } -.product-info figure { +.product-card .product-info figure { margin: 0; } -.product-info figure img { +.product-card .product-info figure img { width: 35px; height: 35px; } -.product-info div p:nth-child(1) { +.product-card .product-info div p:nth-child(1) { font-weight: bold; font-size: var(--md); margin-top: 0; margin-bottom: 4px; } -.product-info div p:nth-child(2) { +.product-card .product-info div p:nth-child(2) { font-size: var(--sm); margin-top: 0; margin-bottom: 0; @@ -301,7 +374,7 @@ display: none; } - .product-detail { + aside { width: 100%; } .cards-container { diff --git a/fusion_componentes.html b/fusion_componentes.html index edadd2aea..c4a1476f3 100644 --- a/fusion_componentes.html +++ b/fusion_componentes.html @@ -112,7 +112,7 @@ -