From 9dbae5f4ee1ed5f293466a9f3523b8eda06f7bb0 Mon Sep 17 00:00:00 2001 From: ricardo1217 <88679362+ricardo1217@users.noreply.github.com> Date: Fri, 15 Dec 2023 11:43:33 -0500 Subject: [PATCH 01/10] =?UTF-8?q?integraci=C3=B3n?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 133 +-------------------------- main.js | 116 ++---------------------- styles.css | 258 +---------------------------------------------------- 3 files changed, 10 insertions(+), 497 deletions(-) diff --git a/index.html b/index.html index 8e91d429a..24194a0a8 100644 --- a/index.html +++ b/index.html @@ -4,13 +4,10 @@ - - - YardSale: tienda online de cositas chidas @@ -67,135 +64,7 @@ - -
- - - - - -
- - - - - -
-
- - - -
-
- - + \ No newline at end of file diff --git a/main.js b/main.js index 7ebb1bb3e..0c211fe92 100644 --- a/main.js +++ b/main.js @@ -1,119 +1,13 @@ 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'); +const desktopMenu =document.querySelector('.desktop-menu'); 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 toggleDesktopMenu (){ + console.log('click'); + desktopMenu.classList.toggle('inactive'); -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); +console.log('JS funcionando'); \ No newline at end of file diff --git a/styles.css b/styles.css index 7228eedc8..83b43a04a 100644 --- a/styles.css +++ b/styles.css @@ -1,4 +1,3 @@ -/* General */ :root { --white: #FFFFFF; --black: #000000; @@ -13,12 +12,9 @@ body { margin: 0; font-family: 'Quicksand', sans-serif; } -.inactive { +.inactive{ display: none; } - - -/* Navbar (general) */ nav { display: flex; justify-content: space-between; @@ -83,11 +79,10 @@ nav { align-items: center; } -/* Menu en desktop */ .desktop-menu { position: absolute; - top: 60px; - right: 60px; + top:60px; + right: 0; background: var(--white); width: 100px; height: auto; @@ -122,227 +117,6 @@ nav { 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 +127,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 c72b6ad6e639e940fe4e9fa373c4e2e5355d428d Mon Sep 17 00:00:00 2001 From: ricardo1217 <88679362+ricardo1217@users.noreply.github.com> Date: Fri, 15 Dec 2023 15:45:19 -0500 Subject: [PATCH 02/10] integracion del menu para celular responsive --- index.html | 52 +++++++++++++++++++++++++++++++++++++++++++++++++++- main.js | 11 +++++++++-- styles.css | 49 +++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 109 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index 24194a0a8..e6b5a1390 100644 --- a/index.html +++ b/index.html @@ -16,7 +16,9 @@
- + + +
+ + + + +
+ + + + + +
+ diff --git a/main.js b/main.js index 0c211fe92..657e7969a 100644 --- a/main.js +++ b/main.js @@ -1,8 +1,11 @@ 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 (){ @@ -10,4 +13,8 @@ function toggleDesktopMenu (){ desktopMenu.classList.toggle('inactive'); } -console.log('JS funcionando'); \ No newline at end of file +console.log('JS funcionando'); + +function toggleMobileMenu(){ + mobileMenu.classList.toggle('inactive'); +} \ No newline at end of file diff --git a/styles.css b/styles.css index 83b43a04a..d95a3fc8c 100644 --- a/styles.css +++ b/styles.css @@ -12,6 +12,10 @@ body { margin: 0; font-family: 'Quicksand', sans-serif; } + + +/* este es el codigo del menu para desktop*/ + .inactive{ display: none; } @@ -117,6 +121,39 @@ nav { display: inline-block; } + +/* este es el codigo css para el menu de celular */ +.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; @@ -127,4 +164,16 @@ nav { .navbar-email { display: none; } + .desktop-menu{ + display:none; + } +} + + +@media (min-width: 641px) { + .mobile-menu{ + + display: none; + } + } \ No newline at end of file From 99b028bc7028e18b6b6412c2a3694c69b2ae8fd5 Mon Sep 17 00:00:00 2001 From: ricardo1217 <88679362+ricardo1217@users.noreply.github.com> Date: Fri, 15 Dec 2023 17:03:47 -0500 Subject: [PATCH 03/10] video del carrito de compras solo echo hasta el minuto 4:22 --- index.html | 50 ++++++++++++++++++++++++++++++- styles.css | 86 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 135 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index e6b5a1390..e7639717f 100644 --- a/index.html +++ b/index.html @@ -113,8 +113,56 @@ - + + + \ No newline at end of file diff --git a/styles.css b/styles.css index d95a3fc8c..d78d351d3 100644 --- a/styles.css +++ b/styles.css @@ -154,6 +154,87 @@ nav { color: var(--hospital-green) !important; } + + +/* Aside (product detail y carrito*/ + +.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; +} + + + @media (max-width: 640px) { .menu { display: block; @@ -167,6 +248,9 @@ nav { .desktop-menu{ display:none; } + .product-detail { + width: 100%; + } } @@ -176,4 +260,6 @@ nav { display: none; } + + } \ No newline at end of file From 6efee1c2734e403a002b9e345d217e7cfd6e86ea Mon Sep 17 00:00:00 2001 From: "darkangel5987@gmail.com" <“darkangel5987@gmail.com”> Date: Sat, 16 Dec 2023 15:43:57 -0500 Subject: [PATCH 04/10] menus ya abren y se cierran dependiendo el menu que se seleccione --- index.html | 2 +- main.js | 28 +++++++++++++++++++++++++++- styles.css | 2 ++ 3 files changed, 30 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index e7639717f..fd909affe 100644 --- a/index.html +++ b/index.html @@ -116,7 +116,7 @@ -