From 45965ca2b68ae06b6badf15c4b1dc4b3c65e9f28 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Coraz=C3=B3n=20Jaime?= Date: Wed, 14 Jun 2023 17:17:02 -0600 Subject: [PATCH 1/5] juntamos el 7 y el 11, modificamos que al accionar el correo apareciera y desapareciera el 7 --- clase7.html | 4 +- indexx.html | 75 +++++++++++++++++++++++++++++ maiin.js | 8 ++++ styyle.css | 135 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 219 insertions(+), 3 deletions(-) create mode 100644 indexx.html create mode 100644 maiin.js create mode 100644 styyle.css diff --git a/clase7.html b/clase7.html index d7458ff6f..7a5697c60 100644 --- a/clase7.html +++ b/clase7.html @@ -4,9 +4,7 @@ - - - + Document + + + + + + \ No newline at end of file diff --git a/maiin.js b/maiin.js new file mode 100644 index 000000000..ee9a03f3e --- /dev/null +++ b/maiin.js @@ -0,0 +1,8 @@ +const menuEmail = document.querySelector('.navbar-email') +const desktopMenu = document.querySelector('.desktop-menu') + +menuEmail-addEventListener('click', toggleDesktopMenu); + +function toggleDesktopMenu (){ + desktopMenu.classList.toggle('inactive'); +} diff --git a/styyle.css b/styyle.css new file mode 100644 index 000000000..ac8858bd6 --- /dev/null +++ b/styyle.css @@ -0,0 +1,135 @@ +:root { + --white: #FFFFFF; + --black: #000000; + --very-light-pink: #C7C7C7; + --text-input-field: #F7F7F7; + --hospital-green: #ACD9B2; + --sm: 14px; + --md: 16px; + --lg: 18px; + } + body { + margin: 0; + font-family: 'Quicksand', sans-serif; + } + + .inactive{ + display: none; + } + + nav { + display: flex; + justify-content: space-between; + padding: 0 24px; + border-bottom: 1px solid var(--very-light-pink); + } + .menu { + display: none; + } + .logo { + width: 100px; + } + .navbar-left ul, + .navbar-right ul { + list-style: none; + padding: 0; + margin: 0; + display: flex; + align-items: center; + height: 60px; + } + .navbar-left { + display: flex; + } + .navbar-left ul { + margin-left: 12px; + } + .navbar-left ul li a, + .navbar-right ul li a { + text-decoration: none; + color: var(--very-light-pink); + border: 1px solid var(--white); + padding: 8px; + border-radius: 8px; + } + .navbar-left ul li a:hover, + .navbar-right ul li a:hover { + border: 1px solid var(--hospital-green); + color: var(--hospital-green); + } + .navbar-email { + color: var(--very-light-pink); + cursor: pointer; + font-size: var(--sm); + margin-right: 12px; + } + .navbar-shopping-cart { + position: relative; + } + .navbar-shopping-cart div { + width: 16px; + height: 16px; + background-color: var(--hospital-green); + border-radius: 50%; + font-size: var(--sm); + font-weight: bold; + position: absolute; + top: -6px; + right: -3px; + display: flex; + justify-content: center; + align-items: center; + } + + + .desktop-menu { + position: absolute; + top: 60px; + right: 60px; + background: var(--white); + width: 100px; + height: auto; + border: 1px solid var(--very-light-pink); + border-radius: 6px; + padding: 20px 20px 0 20px; + } + .desktop-menu ul { + list-style: none; + padding: 0; + margin: 0; + } + .desktop-menu ul li { + text-align: end; + } + .desktop-menu ul li:nth-child(1), + .desktop-menu ul li:nth-child(2) { + font-weight: bold; + } + .desktop-menu ul li:last-child { + padding-top: 20px; + border-top: 1px solid var(--very-light-pink); + } + .desktop-menu ul li:last-child a { + color: var(--hospital-green); + font-size: var(--sm); + } + .desktop-menu ul li a { + color: var(--back); + text-decoration: none; + margin-bottom: 20px; + display: inline-block; + } + + + + @media (max-width: 640px) { + .menu { + display: block; + } + .navbar-left ul { + display: none; + } + .navbar-email { + display: none; + } + } \ No newline at end of file From c9c00a9abf53318cdfa3f2b00224d6fc1e62e10f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Coraz=C3=B3n=20Jaime?= Date: Thu, 15 Jun 2023 14:11:22 -0600 Subject: [PATCH 2/5] agregamos .mobile-menu y las caratulas --- indexx.html | 46 ++++++++++++++++++++++++++++++++++++++++++++++ maiin.js | 10 +++++++++- styyle.css | 49 +++++++++++++++++++++++++++++++++++++++++++++++-- 3 files changed, 102 insertions(+), 3 deletions(-) diff --git a/indexx.html b/indexx.html index 3b0ad44ba..64bc1d198 100644 --- a/indexx.html +++ b/indexx.html @@ -69,6 +69,52 @@ + +
+ + + + + +
+ + diff --git a/maiin.js b/maiin.js index ee9a03f3e..7740cc5de 100644 --- a/maiin.js +++ b/maiin.js @@ -1,8 +1,16 @@ const menuEmail = document.querySelector('.navbar-email') const desktopMenu = document.querySelector('.desktop-menu') +const menuHamIcon = document.querySelector(".menu"); +const mobileMenu = document.querySelector(".mobile-menu"); -menuEmail-addEventListener('click', toggleDesktopMenu); + +menuEmail.addEventListener('click', toggleDesktopMenu); +menuHamIcon.addEventListener("click", toggleMobileMenu); function toggleDesktopMenu (){ desktopMenu.classList.toggle('inactive'); } + +function toggleMobileMenu() { + mobileMenu.classList.toggle('inactive'); +} \ No newline at end of file diff --git a/styyle.css b/styyle.css index ac8858bd6..a9869b3f6 100644 --- a/styyle.css +++ b/styyle.css @@ -1,3 +1,4 @@ +/* Generales */ :root { --white: #FFFFFF; --black: #000000; @@ -17,6 +18,7 @@ display: none; } + /* Navbar(general) */ nav { display: flex; justify-content: space-between; @@ -81,7 +83,7 @@ align-items: center; } - + /* menu en Desktop */ .desktop-menu { position: absolute; top: 60px; @@ -120,8 +122,40 @@ display: inline-block; } + /* Menu en mobile */ + .mobile-menu { + position: absolute; + top:60px; + padding: 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; + } + @media (max-width: 640px) { .menu { display: block; @@ -132,4 +166,15 @@ .navbar-email { display: none; } - } \ No newline at end of file + .desktop-menu { + display: none; + } + + } + + + @media (min-width: 641px) { + .mobile-menu { + display: none; + } + } \ No newline at end of file From cc639d1b4de56ba79cb1f3f10fd81608265dcf7d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Coraz=C3=B3n=20Jaime?= Date: Thu, 15 Jun 2023 15:29:11 -0600 Subject: [PATCH 3/5] agregamos el deslinzamiento de pantallas de carrito y de hamburguesa --- indexx.html | 51 +++++++++++++++++++++++++++++++- maiin.js | 26 ++++++++++++++++- styyle.css | 84 ++++++++++++++++++++++++++++++++++++++++++++++++++++- 3 files changed, 158 insertions(+), 3 deletions(-) diff --git a/indexx.html b/indexx.html index 64bc1d198..59afef68b 100644 --- a/indexx.html +++ b/indexx.html @@ -114,8 +114,57 @@ - + + + + \ No newline at end of file diff --git a/maiin.js b/maiin.js index 7740cc5de..8ed2938d0 100644 --- a/maiin.js +++ b/maiin.js @@ -1,16 +1,40 @@ const menuEmail = document.querySelector('.navbar-email') const desktopMenu = document.querySelector('.desktop-menu') +const menuCarritoIcon = document.querySelector(".navbar-shopping-cart"); const menuHamIcon = document.querySelector(".menu"); const mobileMenu = document.querySelector(".mobile-menu"); - +const aside = document.querySelector(".product-detail"); menuEmail.addEventListener('click', toggleDesktopMenu); menuHamIcon.addEventListener("click", toggleMobileMenu); +menuCarritoIcon.addEventListener("click", toggleCarritoAside); function toggleDesktopMenu (){ +const isAsideClosed = aside.classList.contains("inactive"); + + if (!isAsideClosed) { + aside.classList.add("inactive"); + } + desktopMenu.classList.toggle('inactive'); } function toggleMobileMenu() { + const isAsideClosed = aside.classList.contains("inactive"); + + if (!isAsideClosed) { + aside.classList.add("inactive"); + } + mobileMenu.classList.toggle('inactive'); +} + +function toggleCarritoAside() { + const isMobileMenuClosed = mobileMenu.classList.contains('inactive'); + + if(!isMobileMenuClosed) { + mobileMenu.classList.add('inactive'); + } + + aside.classList.toggle("inactive"); } \ No newline at end of file diff --git a/styyle.css b/styyle.css index a9869b3f6..d347846c6 100644 --- a/styyle.css +++ b/styyle.css @@ -124,6 +124,7 @@ /* Menu en mobile */ .mobile-menu { + background-color: var(--white); position: absolute; top:60px; padding: 24px; @@ -154,7 +155,85 @@ color: var(--hospital-green) !important; } - + + /* 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; + } + + @media (max-width: 640px) { .menu { @@ -169,6 +248,9 @@ .desktop-menu { display: none; } + .product-detail { + width: 100%; + } } From ca29d19ebd4dd66123a29c44ae6b1d62e37a264b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Coraz=C3=B3n=20Jaime?= Date: Mon, 19 Jun 2023 19:12:05 -0600 Subject: [PATCH 4/5] se agrego el apartado 12, y se dejo listo para meter js} --- indexx.html | 39 +++++++++++++-- maiin.js | 90 +++++++++++++++++++++++++++++++---- styyle.css | 133 ++++++++++++++++++++++++++++++++++++++++++++++++++-- 3 files changed, 246 insertions(+), 16 deletions(-) diff --git a/indexx.html b/indexx.html index 59afef68b..ea805cc6f 100644 --- a/indexx.html +++ b/indexx.html @@ -116,8 +116,7 @@ - - + + + +
+
+ + +
+
diff --git a/maiin.js b/maiin.js index 8ed2938d0..485f1f417 100644 --- a/maiin.js +++ b/maiin.js @@ -1,29 +1,30 @@ const menuEmail = document.querySelector('.navbar-email') const desktopMenu = document.querySelector('.desktop-menu') -const menuCarritoIcon = document.querySelector(".navbar-shopping-cart"); +const menuCarritoIcon = document.querySelector('.navbar-shopping-cart'); const menuHamIcon = document.querySelector(".menu"); const mobileMenu = document.querySelector(".mobile-menu"); -const aside = document.querySelector(".product-detail"); +const shoppingCartContainer = document.querySelector("#shoppingCartContainer"); +const cardsContainer = document.querySelector(".cards-container"); menuEmail.addEventListener('click', toggleDesktopMenu); menuHamIcon.addEventListener("click", toggleMobileMenu); menuCarritoIcon.addEventListener("click", toggleCarritoAside); function toggleDesktopMenu (){ -const isAsideClosed = aside.classList.contains("inactive"); +const isAsideClosed = shoppingCartContainer.classList.contains("inactive"); if (!isAsideClosed) { - aside.classList.add("inactive"); + shoppingCartContainer.classList.add("inactive"); } desktopMenu.classList.toggle('inactive'); } function toggleMobileMenu() { - const isAsideClosed = aside.classList.contains("inactive"); + const isAsideClosed = shoppingCartContainer.classList.contains("inactive"); if (!isAsideClosed) { - aside.classList.add("inactive"); + shoppingCartContainer.classList.add("inactive"); } mobileMenu.classList.toggle('inactive'); @@ -36,5 +37,78 @@ function toggleCarritoAside() { mobileMenu.classList.add('inactive'); } - aside.classList.toggle("inactive"); -} \ No newline at end of file + shoppingCartContainer.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", + Pice: 220, + Image: + "https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940", +}); +productList.push({ + name: "Lap", + Pice: 1120, + 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(array){ + for (product of productList) { + 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); + + 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); + + diff --git a/styyle.css b/styyle.css index d347846c6..944e2669f 100644 --- a/styyle.css +++ b/styyle.css @@ -128,6 +128,8 @@ position: absolute; top:60px; padding: 24px; + left: 0; + width: 100%; } .mobile-menu a { text-decoration: none; @@ -157,14 +159,17 @@ /* Aside (product detail y carrito) */ - .product-detail { + .aside { background-color: var(--white); width: 360px; - padding: 0 24px; box-sizing: border-box; position: absolute; right: 0; } + /* shoppingCart */ + #shoppingCartContainer{ + padding: 0 24px; + } .title-container { display: flex; } @@ -232,7 +237,116 @@ font-weight: bold; height: 50px; } - + + /* productDetail */ + .product-detail { + width: 360px; + padding-bottom: 24px; + position: absolute; + right: 0; + } + .product-detail-close { + background: var(--white); + width: 14px; + height: 14px; + position: absolute; + top: 24px; + left: 24px; + z-index: 2; + padding: 12px; + border-radius: 50%; + } + .product-detail-close:hover { + cursor: pointer; + } + #productDetail > img:nth-child(2) { + width: 100%; + height: 360px; + object-fit: cover; + border-radius: 0 0 20px 20px; + } + #productDetail{ + margin: 24px 24px 0 24px; + } + #productDetail p:nth-child(1) { + font-weight: bold; + font-size: var(--md); + margin-top: 0; + margin-bottom: 4px; + } + #productDetail p:nth-child(2) { + color: var(--very-light-pink); + font-size: var(--md); + margin-top: 0; + margin-bottom: 36px; + } + #productDetail 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 { + margin-top: 20px; + display: grid; + grid-template-columns: repeat(auto-fill, 240px); + gap: 26px; + place-content: center; + } + .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) { @@ -248,10 +362,19 @@ .desktop-menu { display: none; } - .product-detail { + .aside { width: 100%; } - + .cards-container { + grid-template-columns: repeat(auto-fill, 140px); + } + .product-card { + width: 140px; + } + .product-card img { + width: 140px; + height: 140px; + } } From cd39313074fd4f23cdddb375ac8964f94480b09f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Coraz=C3=B3n=20Jaime?= Date: Mon, 19 Jun 2023 20:35:08 -0600 Subject: [PATCH 5/5] se unieron los componentes mediante JS --- maiin.js | 22 +++++++++++++++++++++- 1 file changed, 21 insertions(+), 1 deletion(-) diff --git a/maiin.js b/maiin.js index 485f1f417..b07a31d8a 100644 --- a/maiin.js +++ b/maiin.js @@ -1,14 +1,17 @@ const menuEmail = document.querySelector('.navbar-email') const desktopMenu = document.querySelector('.desktop-menu') const menuCarritoIcon = document.querySelector('.navbar-shopping-cart'); +const productDetailCloseIcon = document.querySelector(".product-detail-close"); const menuHamIcon = document.querySelector(".menu"); const mobileMenu = document.querySelector(".mobile-menu"); const shoppingCartContainer = document.querySelector("#shoppingCartContainer"); +const productDetailContainer = document.querySelector("#productDetail"); const cardsContainer = document.querySelector(".cards-container"); menuEmail.addEventListener('click', toggleDesktopMenu); menuHamIcon.addEventListener("click", toggleMobileMenu); menuCarritoIcon.addEventListener("click", toggleCarritoAside); +productDetailCloseIcon.addEventListener('click', closeProductDetailAside); function toggleDesktopMenu (){ const isAsideClosed = shoppingCartContainer.classList.contains("inactive"); @@ -26,7 +29,8 @@ function toggleMobileMenu() { if (!isAsideClosed) { shoppingCartContainer.classList.add("inactive"); } - + closeProductDetailAside(); + mobileMenu.classList.toggle('inactive'); } @@ -37,9 +41,24 @@ function toggleCarritoAside() { mobileMenu.classList.add('inactive'); } + const isProductDetailClosed = productDetailContainer.classList.contains("inactive"); + + if (!isProductDetailClosed) { + productDetailContainer.classList.add("inactive"); + } + shoppingCartContainer.classList.toggle("inactive"); } +function openProductDetailAside(){ +shoppingCartContainer.classList.add('inactive') +productDetailContainer.classList.remove('inactive'); +} + +function closeProductDetailAside(){ + productDetailContainer.classList.add("inactive"); +} + const productList = []; productList.push({ name:'Bike', @@ -80,6 +99,7 @@ function renderProducts(array){ // Product= {name, price, image} -> product.image const productImg = document.createElement("img"); productImg.setAttribute("src", product.Image); + productImg.addEventListener('click', openProductDetailAside); const productInfo = document.createElement("div"); productInfo.classList.add("product-info");