From 30c7dc37cec69b492ded9e647ff4ae7bcbb6be4f Mon Sep 17 00:00:00 2001 From: Karla Botto Date: Mon, 7 Aug 2023 22:49:49 +0200 Subject: [PATCH 1/6] Segundo commit --- index.html | 152 +-------------------------- main.js | 119 --------------------- styles.css | 295 +---------------------------------------------------- 3 files changed, 4 insertions(+), 562 deletions(-) diff --git a/index.html b/index.html index 8e91d429a..47c493ac4 100644 --- a/index.html +++ b/index.html @@ -4,14 +4,11 @@ - - - - - YardSale: tienda online de cositas chidas + YardSale: Tienda online + - - - - -
-
- - - -
-
- - + \ No newline at end of file diff --git a/main.js b/main.js index 7ebb1bb3e..e69de29bb 100644 --- a/main.js +++ b/main.js @@ -1,119 +0,0 @@ -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'); - -menuEmail.addEventListener('click', toggleDesktopMenu); -menuHamIcon.addEventListener('click', toggleMobileMenu); -menuCarritoIcon.addEventListener('click', toggleCarritoAside); -productDetailCloseIcon.addEventListener('click', closeProductDetailAside); - -function toggleDesktopMenu() { - const isAsideClosed = shoppingCartContainer.classList.contains('inactive'); - - if (!isAsideClosed) { - shoppingCartContainer.classList.add('inactive'); - } - - desktopMenu.classList.toggle('inactive'); -} - -function toggleMobileMenu() { - const isAsideClosed = shoppingCartContainer.classList.contains('inactive'); - - if (!isAsideClosed) { - shoppingCartContainer.classList.add('inactive'); - } - - closeProductDetailAside(); - - mobileMenu.classList.toggle('inactive'); -} - -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'); - } - - 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', - 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: 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: 'Compu', - price: 620, - image: 'https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940', -}); - -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.addEventListener('click', openProductDetailAside); - - 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/styles.css b/styles.css index 7228eedc8..b31c37d80 100644 --- a/styles.css +++ b/styles.css @@ -1,4 +1,3 @@ -/* General */ :root { --white: #FFFFFF; --black: #000000; @@ -13,12 +12,6 @@ body { margin: 0; font-family: 'Quicksand', sans-serif; } -.inactive { - display: none; -} - - -/* Navbar (general) */ nav { display: flex; justify-content: space-between; @@ -61,7 +54,6 @@ nav { } .navbar-email { color: var(--very-light-pink); - cursor: pointer; font-size: var(--sm); margin-right: 12px; } @@ -82,267 +74,6 @@ nav { justify-content: center; align-items: center; } - -/* Menu en desktop */ -.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; -} - -/* Menu en mobile */ -.mobile-menu { - background-color: var(--white); - position: absolute; - top: 60px; - left: 0; - width: 100%; - 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; -} - - -/* Aside (product detail y carrito) */ -aside { - background-color: var(--white); - width: 360px; - box-sizing: border-box; - position: absolute; - right: 0; -} - -/* ShoppingCart */ -#shoppingCartContainer { - 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; -} - -/* ProductDetail */ -.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 .product-info { - margin: 24px 24px 0 24px; -} -#productDetail .product-info p:nth-child(1) { - font-weight: bold; - font-size: var(--md); - margin-top: 0; - margin-bottom: 4px; -} -#productDetail .product-info p:nth-child(2) { - color: var(--very-light-pink); - font-size: var(--md); - margin-top: 0; - margin-bottom: 36px; -} -#productDetail .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) { .menu { display: block; @@ -353,28 +84,4 @@ aside { .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 From e830586c0f3336b3c3b04d74b8d19699e796e617 Mon Sep 17 00:00:00 2001 From: Karla Botto Date: Mon, 7 Aug 2023 23:09:52 +0200 Subject: [PATCH 2/6] navbar-right --- index.html | 17 +++++++++++++++++ main.js | 8 ++++++++ styles.css | 51 +++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 76 insertions(+) diff --git a/index.html b/index.html index 47c493ac4..bdfaf1925 100644 --- a/index.html +++ b/index.html @@ -48,6 +48,23 @@ + +
+ +
+ diff --git a/main.js b/main.js index e69de29bb..c4b887245 100644 --- a/main.js +++ b/main.js @@ -0,0 +1,8 @@ +const menuEmail = document.querySelector('.navbar-email'); +const desktopMenu = document.querySelector('.desktop-menu'); + +menuEmail.addEventListener('click', toggleDesktop); + +function toggleDesktop() { + desktopMenu.classList.toggle('inactive'); +} \ No newline at end of file diff --git a/styles.css b/styles.css index b31c37d80..6c1798df6 100644 --- a/styles.css +++ b/styles.css @@ -53,6 +53,7 @@ nav { color: var(--hospital-green); } .navbar-email { + cursor: pointer; color: var(--very-light-pink); font-size: var(--sm); margin-right: 12px; @@ -74,6 +75,56 @@ nav { justify-content: center; align-items: center; } + +/* NAV BAR RIGHT */ + +.inactive{ + display: none; +} + + +.desktop-menu { + position: absolute; + top: 60px; + right: 55px; + 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; From 28ec5ba089358d996ae9d109701e1589104789c0 Mon Sep 17 00:00:00 2001 From: Karla Botto Date: Tue, 8 Aug 2023 11:35:35 +0200 Subject: [PATCH 3/6] Terminamos Clase 22 Curso Platzi --- index.html | 111 ++++++++++++++++++++++++++++++++ main.js | 107 +++++++++++++++++++++++++++++- styles.css | 186 ++++++++++++++++++++++++++++++++++++++++++++++++++++- 3 files changed, 402 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index bdfaf1925..81b7b49fb 100644 --- a/index.html +++ b/index.html @@ -65,8 +65,119 @@ +
+ + + + + +
+ + + +
+
+ + + +
+
+ \ No newline at end of file diff --git a/main.js b/main.js index c4b887245..ab085f06f 100644 --- a/main.js +++ b/main.js @@ -1,8 +1,113 @@ const menuEmail = document.querySelector('.navbar-email'); const desktopMenu = document.querySelector('.desktop-menu'); +const menuBurguer = document.querySelector('.menu'); +const mobileMenu = document.querySelector('.mobile-menu'); +const menuCart = document.querySelector('.navbar-shopping-cart'); +const aside = document.querySelector('.product-detail'); +const cardsContainer = document.querySelector('.cards-container'); + menuEmail.addEventListener('click', toggleDesktop); +menuBurguer.addEventListener('click', toggleMobile); +menuCart.addEventListener('click', toggleAside); function toggleDesktop() { desktopMenu.classList.toggle('inactive'); -} \ No newline at end of file +} + +function toggleMobile() { + const isAsideOpen = aside.classList.contains('inactive'); + + if(!isAsideOpen){ + aside.classList.add('inactive'); + } + mobileMenu.classList.toggle('inactive'); +} + +function toggleAside() { + const isMobileMenuOpen = mobileMenu.classList.contains('inactive'); + + + if(!isMobileMenuOpen){ + mobileMenu.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: 'Computer', + price: 840, + image:'https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940', + +}) + +productList.push({ + name: 'Alexa', + price: 40, + image:'https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940', + +}) + +/*
+ +
+
+

$120,00

+

Bike

+
+
+ +
+
+
*/ + + +for (product of productList){ + const productCard = document.createElement('div'); + productCard.setAttribute('class', 'product-card'); + + const imageProduct = document.createElement('img'); + imageProduct.setAttribute('src', product.image) + + const infoProduct = document.createElement('div'); + infoProduct.setAttribute('class', 'product-info'); + + const divPrecio = document.createElement('div'); + + const pPrecio = document.createElement('p'); + pPrecio.innerHTML = '$ ' + product.price; + const pNombre = document.createElement('p'); + pNombre.innerHTML = product.name; + + const figCart = document.createElement('figure'); + const imgCart = document.createElement('img'); + + imgCart.setAttribute('src','./icons/bt_add_to_cart.svg') + + cardsContainer.append(productCard); + productCard.append(imageProduct); + productCard.append(infoProduct); + infoProduct.append(divPrecio); + infoProduct.append(figCart); + divPrecio.append(pPrecio); + divPrecio.append(pNombre); + figCart.append(imgCart); + + + + + + + +} + diff --git a/styles.css b/styles.css index 6c1798df6..597ebd295 100644 --- a/styles.css +++ b/styles.css @@ -60,6 +60,7 @@ nav { } .navbar-shopping-cart { position: relative; + cursor: pointer; } .navbar-shopping-cart div { width: 16px; @@ -122,9 +123,168 @@ nav { } +/* Menu burguer Mobile */ + +.mobile-menu { + background-color: var(--white); + position: absolute; + top: 61px; + 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; +} + + +/* Product Detail Aside */ + +.product-detail { + 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; +} + + +/* Products List */ + +.cards-container { + display: grid; + margin-top: 20px; + 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-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 Query */ + @media (max-width: 640px) { .menu { display: block; @@ -135,4 +295,28 @@ nav { .navbar-email { display: none; } -} \ No newline at end of file + .desktop-menu{ + 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) { + .mobile-menu{ + display: none; + } +} + + From 5455bf55c674528b6fea165e12c454fca0f3deff Mon Sep 17 00:00:00 2001 From: Karla Botto Date: Tue, 8 Aug 2023 11:37:18 +0200 Subject: [PATCH 4/6] Terminado Clase 22 --- main.js | 7 ------- 1 file changed, 7 deletions(-) diff --git a/main.js b/main.js index ab085f06f..e860e2704 100644 --- a/main.js +++ b/main.js @@ -102,12 +102,5 @@ for (product of productList){ divPrecio.append(pPrecio); divPrecio.append(pNombre); figCart.append(imgCart); - - - - - - - } From d9d96395991f6886699a95fe53c5ca2c30a07d37 Mon Sep 17 00:00:00 2001 From: Karla Botto Date: Tue, 8 Aug 2023 11:58:27 +0200 Subject: [PATCH 5/6] Terminado clase 23 --- index.html | 16 ++++++++++++ styles.css | 75 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 91 insertions(+) diff --git a/index.html b/index.html index 81b7b49fb..ef8a65a07 100644 --- a/index.html +++ b/index.html @@ -159,6 +159,22 @@ + +
diff --git a/styles.css b/styles.css index 597ebd295..3998b98a4 100644 --- a/styles.css +++ b/styles.css @@ -129,7 +129,10 @@ nav { background-color: var(--white); position: absolute; top: 61px; + left: 0; + width: calc(100% - 48px); padding: 24px; + z-index: 5; } .mobile-menu a { text-decoration: none; @@ -161,11 +164,14 @@ nav { /* Product Detail Aside */ .product-detail { + background-color: var(--white); width: 360px; padding: 0 24px; box-sizing: border-box; position: absolute; right: 0; + z-index: 5; + } .title-container { display: flex; @@ -281,6 +287,73 @@ nav { color: var(--very-light-pink); } +/* Aside Product Detail */ + +.product-cart-detail { + width: 360px; + padding-bottom: 24px; + position: absolute; + right: 20px; +} +.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-cart-detail > img:nth-child(2) { + width: 100%; + height: 360px; + object-fit: cover; + border-radius: 0 0 20px 20px; +} +.product-info-detail { + margin: 24px 24px 0 24px; +} +.product-info-detail p:nth-child(1) { + font-weight: bold; + font-size: var(--md); + margin-top: 0; + margin-bottom: 4px; +} +.product-info-detail p:nth-child(2) { + color: var(--very-light-pink); + font-size: var(--md); + margin-top: 0; + margin-bottom: 36px; +} +.product-info-detail 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; +} + + /* Media Query */ @@ -311,6 +384,8 @@ nav { width: 140px; height: 140px; } + .product-cart-detail{ + width: 100%;} } @media (min-width:641px) { From fdd117faed4b5309be69a155042e36eea51ff7ab Mon Sep 17 00:00:00 2001 From: Karla Botto Date: Tue, 8 Aug 2023 12:18:20 +0200 Subject: [PATCH 6/6] Final --- main.js | 40 ++++++++++++++++++++++++++-------------- styles.css | 5 ++++- 2 files changed, 30 insertions(+), 15 deletions(-) diff --git a/main.js b/main.js index e860e2704..37053de3f 100644 --- a/main.js +++ b/main.js @@ -5,6 +5,8 @@ const mobileMenu = document.querySelector('.mobile-menu'); const menuCart = document.querySelector('.navbar-shopping-cart'); const aside = document.querySelector('.product-detail'); const cardsContainer = document.querySelector('.cards-container'); +const productCartDetail = document.querySelector('.product-cart-detail'); +const btnCloseProductCartDetail = document.querySelector('.product-detail-close'); menuEmail.addEventListener('click', toggleDesktop); @@ -17,6 +19,7 @@ function toggleDesktop() { function toggleMobile() { const isAsideOpen = aside.classList.contains('inactive'); + productCartDetail.classList.add('inactive'); if(!isAsideOpen){ aside.classList.add('inactive'); @@ -26,15 +29,35 @@ function toggleMobile() { function toggleAside() { const isMobileMenuOpen = mobileMenu.classList.contains('inactive'); + const isProductDetailOpen = productCartDetail.classList.contains('inactive'); - if(!isMobileMenuOpen){ mobileMenu.classList.add('inactive'); } + if(!isProductDetailOpen){ + productCartDetail.classList.add('inactive'); + } + + aside.classList.toggle('inactive'); } + +function openProductDetail(){ + aside.classList.add('inactive'); + productCartDetail.classList.remove('inactive'); +} + +function closeProductDetail(){ + productCartDetail.classList.add('inactive'); +} + +btnCloseProductCartDetail.addEventListener('click', closeProductDetail); + + + + const productList = []; productList.push({ @@ -58,18 +81,6 @@ productList.push({ }) -/*
- -
-
-

$120,00

-

Bike

-
-
- -
-
-
*/ for (product of productList){ @@ -77,7 +88,8 @@ for (product of productList){ productCard.setAttribute('class', 'product-card'); const imageProduct = document.createElement('img'); - imageProduct.setAttribute('src', product.image) + imageProduct.setAttribute('src', product.image); + imageProduct.addEventListener('click', openProductDetail); const infoProduct = document.createElement('div'); infoProduct.setAttribute('class', 'product-info'); diff --git a/styles.css b/styles.css index 3998b98a4..46ab738bc 100644 --- a/styles.css +++ b/styles.css @@ -256,6 +256,7 @@ nav { width: 240px; } .product-card img { + cursor: pointer; width: 240px; height: 240px; border-radius: 20px; @@ -290,12 +291,14 @@ nav { /* Aside Product Detail */ .product-cart-detail { + background-color: var(--white); width: 360px; padding-bottom: 24px; position: absolute; - right: 20px; + right: 0; } .product-detail-close { + cursor: pointer; background: var(--white); width: 14px; height: 14px;