From e035c190637cff26d5b32c04190c7c3def87c484 Mon Sep 17 00:00:00 2001 From: MayraGuarin Date: Wed, 6 Dec 2023 11:09:28 -0500 Subject: [PATCH 1/3] version1 --- clase12.html | 2 +- ...nd-javascriptdeveloper-javascript-practico | 1 + fusion.html | 184 +++++++++++++++++ javascript.js | 131 ++++++++++++ styles.css | 191 +++++++++--------- 5 files changed, 409 insertions(+), 100 deletions(-) create mode 160000 curso-frontend-javascriptdeveloper-javascript-practico create mode 100644 fusion.html create mode 100644 javascript.js diff --git a/clase12.html b/clase12.html index 3a84f2155..b06160e3f 100644 --- a/clase12.html +++ b/clase12.html @@ -43,7 +43,7 @@ .product-detail-close:hover { cursor: pointer; } - .product-detail > img:nth-child(2) { + #productDetail > img:nth-child(2) { width: 100%; height: 360px; object-fit: cover; diff --git a/curso-frontend-javascriptdeveloper-javascript-practico b/curso-frontend-javascriptdeveloper-javascript-practico new file mode 160000 index 000000000..c99166754 --- /dev/null +++ b/curso-frontend-javascriptdeveloper-javascript-practico @@ -0,0 +1 @@ +Subproject commit c99166754243d4de6a1259dc376c96c3ae935d5f diff --git a/fusion.html b/fusion.html new file mode 100644 index 000000000..15a7d12d5 --- /dev/null +++ b/fusion.html @@ -0,0 +1,184 @@ + + + + + + + YardSale: Tienda online de cositas + + + + + + + + + + + + +
+
+
+
+ + + + \ No newline at end of file diff --git a/javascript.js b/javascript.js new file mode 100644 index 000000000..95d53803a --- /dev/null +++ b/javascript.js @@ -0,0 +1,131 @@ + //SIRVE PARA LLAMAR A LAS VARIABLES +const menuEmail = document.querySelector('.navbar-email'); +const desktopMenu = document.querySelector('.desktop-menu'); +const menuHamIcon = document.querySelector('.menu'); +const menuCarritoIcon = document.querySelector('.navbar-shopping-cart'); +const productDetailCloseIcon = document.querySelector('.product-detail-close'); +const mobileMenu = document.querySelector('.mobile-menu'); +const shoppingCartContainer = document.querySelector('#shoppingCartContainer'); +const productDetailContainer = document.querySelector('#productDetail'); +const cardsContainer = document.querySelector('.cards-container'); + +// LLAMA A LA VARIABLE TOGGLE PARA QUE APAREZCA Y DESAPAREZCA EL 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('activate'); + + if(!isAsideClosed){ + shoppingCartContainer.classList.add('inactive'); + } + closeProductDetailAside(); + + mobileMenu.classList.toggle('inactive'); +} +function toggleCarritoAside(){ + const isMbileMenuClose = mobileMenu.classList.contains('inactive'); + + if(!isMbileMenuClose){ + mobileMenu.classList.add('inactive'); + } + + const isProductDetailClosep = productDetailContainer.classList.contains('inactive'); + + if(!isProductDetailClosep){ + 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: 'Computador', + price: 520, + 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'); + + 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..268bb527b 100644 --- a/styles.css +++ b/styles.css @@ -1,4 +1,4 @@ -/* General */ +/*General*/ :root { --white: #FFFFFF; --black: #000000; @@ -13,12 +13,10 @@ body { margin: 0; font-family: 'Quicksand', sans-serif; } -.inactive { +/*navbar general*/ +.inactive{ display: none; } - - -/* Navbar (general) */ nav { display: flex; justify-content: space-between; @@ -82,8 +80,7 @@ nav { justify-content: center; align-items: center; } - -/* Menu en desktop */ +/*desktop*/ .desktop-menu { position: absolute; top: 60px; @@ -121,15 +118,14 @@ nav { margin-bottom: 20px; display: inline-block; } - -/* Menu en mobile */ +/*movile*/ .mobile-menu { background-color: var(--white); position: absolute; + padding: 24px; top: 60px; - left: 0; + left: 0px; width: 100%; - padding: 24px; } .mobile-menu a { text-decoration: none; @@ -156,19 +152,74 @@ nav { font-size: var(--sm); color: var(--hospital-green) !important; } - - -/* Aside (product detail y carrito) */ +/*carrito */ aside { background-color: var(--white); width: 360px; + padding: 0 24px; box-sizing: border-box; position: absolute; right: 0; } - -/* ShoppingCart */ -#shoppingCartContainer { +.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; +} +.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; +} +/*shopping cart*/ +#shoppingCartContainer{ padding: 0 24px; } .title-container { @@ -238,68 +289,7 @@ aside { 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 */ +/*Lista de productos*/ .cards-container { display: grid; grid-template-columns: repeat(auto-fill, 240px); @@ -341,8 +331,11 @@ aside { margin-bottom: 0; color: var(--very-light-pink); } - - +@media (max-width: 640px) { + .product-detail { + width: 100%; + } +} @media (max-width: 640px) { .menu { display: block; @@ -353,28 +346,28 @@ aside { .navbar-email { display: none; } - .desktop-menu { + .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; - } + .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 { + .mobile-menu{ display: none; } } + + From 0aaa077f62f7877703807ddb47b2035b1b0e86e1 Mon Sep 17 00:00:00 2001 From: MayraGuarin Date: Wed, 6 Dec 2023 13:03:58 -0500 Subject: [PATCH 2/3] version 2 --- fusion.html | 184 ---------------------------------------------------- index.html | 139 +++++++++++++++++---------------------- 2 files changed, 61 insertions(+), 262 deletions(-) delete mode 100644 fusion.html diff --git a/fusion.html b/fusion.html deleted file mode 100644 index 15a7d12d5..000000000 --- a/fusion.html +++ /dev/null @@ -1,184 +0,0 @@ - - - - - - - YardSale: Tienda online de cositas - - - - - - - - - - - - -
-
-
-
- - - - \ No newline at end of file diff --git a/index.html b/index.html index 8e91d429a..15a7d12d5 100644 --- a/index.html +++ b/index.html @@ -4,14 +4,11 @@ - + YardSale: Tienda online de cositas - - - - YardSale: tienda online de cositas chidas + -