From bc079dfa02d2f6632b659fb40748f42211597f4a Mon Sep 17 00:00:00 2001 From: Jose Date: Tue, 30 Aug 2022 20:32:53 -0500 Subject: [PATCH 1/6] =?UTF-8?q?Uni=C3=B3n=20del=20html=20css=20y=20html=20?= =?UTF-8?q?del=20navbar=20en=20el=20index.html=20y=20toggle=20del=20email-?= =?UTF-8?q?menu?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 75 +++++++++++++++++++++++++++ main.js | 8 +++ styles.css | 146 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 229 insertions(+) create mode 100644 index.html create mode 100644 main.js create mode 100644 styles.css diff --git a/index.html b/index.html new file mode 100644 index 000000000..605a78dd9 --- /dev/null +++ b/index.html @@ -0,0 +1,75 @@ + + + + + + + + YardSale: tienda online de cositas chidas + + + + + + + + + + + + + + \ No newline at end of file diff --git a/main.js b/main.js new file mode 100644 index 000000000..eff608f05 --- /dev/null +++ b/main.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'); +} \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 000000000..960bef6f7 --- /dev/null +++ b/styles.css @@ -0,0 +1,146 @@ +: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); + margin-right: 12px; + cursor: pointer; +} + +.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; +} + +/* Clase 7 */ +.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 607b6453785e14ae3c2287b60fd771f5a555f748 Mon Sep 17 00:00:00 2001 From: Jose Date: Wed, 31 Aug 2022 15:10:29 -0500 Subject: [PATCH 2/6] =?UTF-8?q?Fusi=C3=B3n=20del=20menu=20en=20mobile?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 44 ++++++++++++++++++++++++++++++++++++++++++++ main.js | 6 ++++++ styles.css | 48 ++++++++++++++++++++++++++++++++++++++++++++++-- 3 files changed, 96 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 605a78dd9..650563348 100644 --- a/index.html +++ b/index.html @@ -67,6 +67,50 @@ + +
+ + + + + +
diff --git a/main.js b/main.js index eff608f05..ff010ad81 100644 --- a/main.js +++ b/main.js @@ -1,8 +1,14 @@ 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); +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/styles.css b/styles.css index 960bef6f7..51ed888e1 100644 --- a/styles.css +++ b/styles.css @@ -1,3 +1,4 @@ +/* Generales */ :root { --white: #FFFFFF; --black: #000000; @@ -17,7 +18,7 @@ body { .inactive{ display: none; } - +/* Navbar General */ nav { display: flex; justify-content: space-between; @@ -92,7 +93,7 @@ nav { align-items: center; } -/* Clase 7 */ +/* Menu en desktop*/ .desktop-menu { position: absolute; top: 60px; @@ -130,7 +131,41 @@ nav { margin-bottom: 20px; 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; +} +/* desde 0 hasta 640px */ @media (max-width: 640px) { .menu { display: block; @@ -143,4 +178,13 @@ nav { .navbar-email { display: none; } + .desktop-menu{ + display: none; + } +} + +@media (min-width: 641px) { + .mobile-menu{ + display: none; + } } \ No newline at end of file From 38181094423301da2be34aafef0046f09fd21bbd Mon Sep 17 00:00:00 2001 From: Jose Date: Wed, 31 Aug 2022 19:32:14 -0500 Subject: [PATCH 3/6] Carrito de compras --- index.html | 51 ++++++++++++++++++++++++++++++++++ main.js | 38 +++++++++++++++++++++++++ styles.css | 81 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 170 insertions(+) diff --git a/index.html b/index.html index 650563348..1f2973d09 100644 --- a/index.html +++ b/index.html @@ -113,6 +113,57 @@ + + diff --git a/main.js b/main.js index ff010ad81..41a7370bc 100644 --- a/main.js +++ b/main.js @@ -1,14 +1,52 @@ 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 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) { + //si el mobile menu esta open, hay que cerrarlo + aside.classList.add('inactive'); + } + desktopMenu.classList.toggle('inactive'); } function toggleMobileMenu() { + + const isAsideClosed = aside.classList.contains('inactive'); + + + if (!isAsideClosed) { + //si el mobile menu esta open, hay que cerrarlo + aside.classList.add('inactive'); + } + mobileMenu.classList.toggle('inactive'); +} +function toggleCarritoAside() { + + const isMobileMenuClosed = mobileMenu.classList.contains('inactive'); + const isDesktopMenuClosed = desktopMenu.classList.contains('inactive'); + + if (!isMobileMenuClosed) { + //si el mobile menu esta open, hay que cerrarlo + mobileMenu.classList.add('inactive'); + } + + if (!isDesktopMenuClosed) { + //si el mobile menu esta open, hay que cerrarlo + desktopMenu.classList.add('inactive'); + } + + aside.classList.toggle('inactive'); } \ No newline at end of file diff --git a/styles.css b/styles.css index 51ed888e1..40be2a875 100644 --- a/styles.css +++ b/styles.css @@ -134,6 +134,7 @@ nav { /* Menu en mobile */ .mobile-menu { + background-color: var(--white); position: absolute; top: 60px; padding: 24px; @@ -165,6 +166,83 @@ nav { color: var(--hospital-green) !important; } +/* Aside (product detail y carrito) */ +.product-detail { + background-color: var(--white); + width: 360px; + padding: 0px 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; +} + /* desde 0 hasta 640px */ @media (max-width: 640px) { .menu { @@ -181,6 +259,9 @@ nav { .desktop-menu{ display: none; } + .product-detail { + width: 100%; + } } @media (min-width: 641px) { From 659cf6a85a2a7d2fa929080a7012e8223e9dd02e Mon Sep 17 00:00:00 2001 From: Jose Date: Thu, 1 Sep 2022 06:37:59 -0500 Subject: [PATCH 4/6] Lista de productos HTML a partir de arrays --- index.html | 21 ++++++++++++++ main.js | 80 ++++++++++++++++++++++++++++++++++++++++++++++++++++-- styles.css | 58 +++++++++++++++++++++++++++++++++++++-- 3 files changed, 154 insertions(+), 5 deletions(-) diff --git a/index.html b/index.html index 1f2973d09..ecbe73418 100644 --- a/index.html +++ b/index.html @@ -164,6 +164,27 @@ +
+
+ + + + +
+
+ diff --git a/main.js b/main.js index 41a7370bc..2c33ecc1a 100644 --- a/main.js +++ b/main.js @@ -4,6 +4,7 @@ const menuHamIcon = document.querySelector('.menu'); const menuCarritoIcon = document.querySelector('.navbar-shopping-cart'); const mobileMenu = document.querySelector('.mobile-menu'); const aside = document.querySelector('.product-detail'); +const cardsContainer = document.querySelector('.cards-container'); menuEmail.addEventListener('click', toggleDesktopMenu); @@ -13,7 +14,6 @@ menuCarritoIcon.addEventListener('click', toggleCarritoAside); function toggleDesktopMenu() { const isAsideClosed = aside.classList.contains('inactive'); - if (!isAsideClosed) { //si el mobile menu esta open, hay que cerrarlo aside.classList.add('inactive'); @@ -25,7 +25,6 @@ function toggleMobileMenu() { const isAsideClosed = aside.classList.contains('inactive'); - if (!isAsideClosed) { //si el mobile menu esta open, hay que cerrarlo aside.classList.add('inactive'); @@ -49,4 +48,79 @@ function toggleCarritoAside() { } aside.classList.toggle('inactive'); -} \ No newline at end of file +} + +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' +}); + +/* +
+ +
+
+

$120,00

+

Bike

+
+
+ +
+
+
+*/ + +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) + + 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); \ No newline at end of file diff --git a/styles.css b/styles.css index 40be2a875..8a1745d39 100644 --- a/styles.css +++ b/styles.css @@ -242,7 +242,51 @@ nav { 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); +} + + /* desde 0 hasta 640px */ @media (max-width: 640px) { .menu { @@ -261,7 +305,17 @@ nav { } .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) { From 41d77a4a9568aad5530a76dd4508439202a9df67 Mon Sep 17 00:00:00 2001 From: Jose Date: Thu, 1 Sep 2022 07:11:32 -0500 Subject: [PATCH 5/6] Detalles de un producto --- index.html | 19 +++++++++++- main.js | 12 ++++---- styles.css | 85 +++++++++++++++++++++++++++++++++++++++++++++++++----- 3 files changed, 101 insertions(+), 15 deletions(-) diff --git a/index.html b/index.html index ecbe73418..8854ca357 100644 --- a/index.html +++ b/index.html @@ -113,7 +113,7 @@ - -