From aa0a1022ca852bb520b547026fbaac082bcc9ea4 Mon Sep 17 00:00:00 2001 From: Un3xpEctedThe0ry Date: Wed, 10 Aug 2022 17:54:16 -0500 Subject: [PATCH 1/6] desktop menu fusion --- index.html | 64 ++++++++++++++++++++++++++ main.js | 8 ++++ styles.css | 129 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 201 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..abd4e992e --- /dev/null +++ b/index.html @@ -0,0 +1,64 @@ + + + + + + + + + + + YardSale Store + + + + + \ No newline at end of file diff --git a/main.js b/main.js new file mode 100644 index 000000000..f42824e95 --- /dev/null +++ b/main.js @@ -0,0 +1,8 @@ +const navEmail = document.querySelector('.navbar-email') +const desktopMenu = document.querySelector('.desktop-menu') + +navEmail.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..bf3c7381e --- /dev/null +++ b/styles.css @@ -0,0 +1,129 @@ +: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; +} +.desktop-menu { + position: absolute; + background: var(--white); + top: 60px; + right: 60px; + 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; + } +} + From c2ffb25cbbce248febc392f8ee922f0fc71b538f Mon Sep 17 00:00:00 2001 From: Un3xpEctedThe0ry Date: Wed, 10 Aug 2022 21:50:48 -0500 Subject: [PATCH 2/6] mobile menu fusion --- index.html | 158 +++++++++++++++++++++++------------- main.js | 11 ++- styles.css | 229 ++++++++++++++++++++++++++++++++++------------------- 3 files changed, 258 insertions(+), 140 deletions(-) diff --git a/index.html b/index.html index abd4e992e..b351c1eb6 100644 --- a/index.html +++ b/index.html @@ -1,64 +1,108 @@ + - - - - - - - - YardSale Store + + + + + + + + YardSale Store + - + + \ No newline at end of file diff --git a/main.js b/main.js index f42824e95..e5670bec1 100644 --- a/main.js +++ b/main.js @@ -1,8 +1,15 @@ const navEmail = document.querySelector('.navbar-email') const desktopMenu = document.querySelector('.desktop-menu') +const mobileMenuBtn = document.querySelector('.menu') +const mobileMenu = document.querySelector('.mobile-menu') navEmail.addEventListener('click', toggleDesktopMenu) +mobileMenuBtn.addEventListener('click', toggleMobilepMenu) -function toggleDesktopMenu(){ - desktopMenu.classList.toggle('inactive') +function toggleDesktopMenu() { + desktopMenu.classList.toggle('inactive') +} + +function toggleMobilepMenu() { + mobileMenu.classList.toggle('inactive') } \ No newline at end of file diff --git a/styles.css b/styles.css index bf3c7381e..c46f4e242 100644 --- a/styles.css +++ b/styles.css @@ -1,129 +1,196 @@ +/* general */ :root { - --white: #FFFFFF; - --black: #000000; - --very-light-pink: #C7C7C7; - --text-input-field: #F7F7F7; - --hospital-green: #ACD9B2; - --sm: 14px; - --md: 16px; - --lg: 18px; + --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; + margin: 0; + font-family: 'Quicksand', sans-serif; } -.inactive{ - display: none; + +.inactive { + display: none; } + +/* navbar */ nav { - display: flex; - justify-content: space-between; - padding: 0 24px; - border-bottom: 1px solid var(--very-light-pink); + display: flex; + justify-content: space-between; + padding: 0 24px; + border-bottom: 1px solid var(--very-light-pink); } + .menu { - display: none; + display: none; } + .logo { - width: 100px; + width: 100px; } + .navbar-left ul, .navbar-right ul { - list-style: none; - padding: 0; - margin: 0; - display: flex; - align-items: center; - height: 60px; + list-style: none; + padding: 0; + margin: 0; + display: flex; + align-items: center; + height: 60px; } + .navbar-left { - display: flex; + display: flex; } + .navbar-left ul { - margin-left: 12px; + 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; + 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); + 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; + color: var(--very-light-pink); + font-size: var(--sm); + margin-right: 12px; + cursor: pointer; } + .navbar-shopping-cart { - position: relative; + 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; + 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 */ .desktop-menu { - position: absolute; - background: var(--white); - top: 60px; - right: 60px; - width: 100px; - height: auto; - border: 1px solid var(--very-light-pink); - border-radius: 6px; - padding: 20px 20px 0 20px; + position: absolute; + background: var(--white); + top: 60px; + right: 60px; + 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; + list-style: none; + padding: 0; + margin: 0; } + .desktop-menu ul li { - text-align: end; + text-align: end; } + .desktop-menu ul li:nth-child(1), .desktop-menu ul li:nth-child(2) { - font-weight: bold; + font-weight: bold; } + .desktop-menu ul li:last-child { - padding-top: 20px; - border-top: 1px solid var(--very-light-pink); + 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); + 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; + color: var(--back); + text-decoration: none; + margin-bottom: 20px; + display: inline-block; +} + +/* mobile menu */ +.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; - } - .navbar-left ul { - display: none; - } - .navbar-email { - display: none; - } + .menu { + display: block; + } + + .navbar-email, + .navbar-left ul, + .desktop-menu { + display: none; + } } +@media (min-width: 641px) { + .mobile-menu { + display: none; + } +} \ No newline at end of file From db2d4a7012e15eb1759bb57d72d09ed844298e58 Mon Sep 17 00:00:00 2001 From: Un3xpEctedThe0ry Date: Wed, 10 Aug 2022 22:45:14 -0500 Subject: [PATCH 3/6] shopping cart fusion --- index.html | 50 ++++++++++++++++++++++++++- main.js | 34 +++++++++++++++++-- styles.css | 99 ++++++++++++++++++++++++++++++++++++++++++++++++++++-- 3 files changed, 178 insertions(+), 5 deletions(-) diff --git a/index.html b/index.html index b351c1eb6..b66ea921f 100644 --- a/index.html +++ b/index.html @@ -101,8 +101,56 @@ - + + \ No newline at end of file diff --git a/main.js b/main.js index e5670bec1..81444f4f8 100644 --- a/main.js +++ b/main.js @@ -2,14 +2,44 @@ const navEmail = document.querySelector('.navbar-email') const desktopMenu = document.querySelector('.desktop-menu') const mobileMenuBtn = document.querySelector('.menu') const mobileMenu = document.querySelector('.mobile-menu') +const shopingCart = document.querySelector('.navbar-shopping-cart') +const aside = document.querySelector('.product-detail') navEmail.addEventListener('click', toggleDesktopMenu) -mobileMenuBtn.addEventListener('click', toggleMobilepMenu) +mobileMenuBtn.addEventListener('click', toggleMobileMenu) +shopingCart.addEventListener('click', toggleAside) function toggleDesktopMenu() { + const asideClosed = aside.classList.contains('inactive') + + if (!asideClosed) { + aside.classList.toggle('inactive') + } + desktopMenu.classList.toggle('inactive') } -function toggleMobilepMenu() { +function toggleMobileMenu() { + const asideClosed = aside.classList.contains('inactive') + + if (!asideClosed) { + aside.classList.toggle('inactive') + } + mobileMenu.classList.toggle('inactive') +} + +function toggleAside() { + const mobileMenuClosed = mobileMenu.classList.contains('inactive') + const desktopMenuClosed = desktopMenu.classList.contains('inactive') + + if (!mobileMenuClosed) { + toggleMobileMenu() + } + + if (!desktopMenuClosed) { + toggleDesktopMenu() + } + + aside.classList.toggle('inactive') } \ No newline at end of file diff --git a/styles.css b/styles.css index c46f4e242..c25f02841 100644 --- a/styles.css +++ b/styles.css @@ -97,7 +97,7 @@ nav { /* desktop menu */ .desktop-menu { position: absolute; - background: var(--white); + /* background: var(--white); */ top: 60px; right: 60px; width: 100px; @@ -141,8 +141,9 @@ nav { /* mobile menu */ .mobile-menu { + /* background-color: var(--white); */ position: absolute; - top: 60px; + top: 61px; padding: 24px; } @@ -177,6 +178,96 @@ nav { color: var(--hospital-green) !important; } +/* aside (product detail y carrito) */ +.product-detail { + /* background-color: var(--white); */ + width: 360px; + padding: 12px; /* 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; @@ -187,6 +278,10 @@ nav { .desktop-menu { display: none; } + + .product-detail { + width: 100%; + } } @media (min-width: 641px) { From 395f31c5d7085400c8cd1721c1fce8eab70c52b5 Mon Sep 17 00:00:00 2001 From: Un3xpEctedThe0ry Date: Fri, 12 Aug 2022 09:15:00 -0500 Subject: [PATCH 4/6] product list fusion & moved to js --- index.html | 19 ++++++++++++++++ main.js | 66 +++++++++++++++++++++++++++++++++++++++++++++++++++++- styles.css | 66 +++++++++++++++++++++++++++++++++++++++++++++++++++++- 3 files changed, 149 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index b66ea921f..8fcb50187 100644 --- a/index.html +++ b/index.html @@ -150,6 +150,25 @@ +
+
+ +
+
diff --git a/main.js b/main.js index 81444f4f8..52c5f88ae 100644 --- a/main.js +++ b/main.js @@ -4,6 +4,7 @@ const mobileMenuBtn = document.querySelector('.menu') const mobileMenu = document.querySelector('.mobile-menu') const shopingCart = document.querySelector('.navbar-shopping-cart') const aside = document.querySelector('.product-detail') +const cardsContainer = document.querySelector('.cards-container') navEmail.addEventListener('click', toggleDesktopMenu) mobileMenuBtn.addEventListener('click', toggleMobileMenu) @@ -42,4 +43,67 @@ function toggleAside() { } aside.classList.toggle('inactive') -} \ No newline at end of file +} + +// En esta sección tenemos los productos borrados de nuestro html +/*
+ +
+
+

$120,00

+

Bike

+
+
+ +
+
+
*/ + +function renderProducts(productList) { + for (product of productList) { + const productCard = document.createElement('div') + productCard.classList.add('product-card') + + const productImg = document.createElement('img') + productImg.setAttribute('src', product.image) // forma 1 + + 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}` + + const productInfoFigure = document.createElement('figure') + + const cartImg = document.createElement('img') + cartImg.src = './icons/bt_add_to_cart.svg' // forma 2 + + productInfoFigure.appendChild(cartImg) + productInfoDiv.append(productPrice, productName) + productInfo.append(productInfoDiv, productInfoFigure) + productCard.append(productImg, productInfo) + cardsContainer.appendChild(productCard) + } +} + +function main() { + let productList = [] + + productList = [ + ...productList, + { 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' }, + { 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' }, + { 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' } + ] + + renderProducts(productList) +} + +main() \ No newline at end of file diff --git a/styles.css b/styles.css index c25f02841..8b718183b 100644 --- a/styles.css +++ b/styles.css @@ -182,7 +182,8 @@ nav { .product-detail { /* background-color: var(--white); */ width: 360px; - padding: 12px; /* 24px */ + padding: 12px; + /* 24px */ box-sizing: border-box; position: absolute; right: 0; @@ -268,6 +269,56 @@ nav { 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); +} + @media (max-width: 640px) { .menu { display: block; @@ -282,6 +333,19 @@ 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 7c33d2c055cdcc20508370f673d8947de45eb097 Mon Sep 17 00:00:00 2001 From: Un3xpEctedThe0ry Date: Fri, 12 Aug 2022 14:57:15 -0500 Subject: [PATCH 5/6] product detail fusion (no js), fixed some duplicate html/css classes & other fixes --- index.html | 25 +++++++++++++++- main.js | 38 +++++++----------------- styles.css | 86 +++++++++++++++++++++++++++++++++++++++++++++--------- 3 files changed, 108 insertions(+), 41 deletions(-) diff --git a/index.html b/index.html index 8fcb50187..b36c1c25c 100644 --- a/index.html +++ b/index.html @@ -5,7 +5,9 @@ + + @@ -102,7 +104,8 @@ -