From a39768b611e03d18a1d8087a91dee2ccfb9064db Mon Sep 17 00:00:00 2001 From: kburrion Date: Sat, 6 Aug 2022 17:47:16 -0600 Subject: [PATCH 1/6] Desktop nav and desktop menu added --- index.html | 50 +++++++++++++++++++++ main.js | 8 ++++ styles.css | 127 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 185 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..1edb182ab --- /dev/null +++ b/index.html @@ -0,0 +1,50 @@ + + + + + + + + + + + + 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..91eaf689e --- /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..27835b990 --- /dev/null +++ b/styles.css @@ -0,0 +1,127 @@ +: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; +} +nav { + display: flex; + justify-content: space-between; + padding: 0 24px; + border-bottom: 1px solid var(--very-light-pink); +} +.inactive{ + display: none; +} +.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 { + cursor: pointer; + color: var(--very-light-pink); + font-size: var(--sm); + margin-right: 12px; +} +.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; + 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; + } +} \ No newline at end of file From 77738b225c2ac34e2b78b0d754825629f1ab5d71 Mon Sep 17 00:00:00 2001 From: kburrion Date: Sat, 6 Aug 2022 18:28:00 -0600 Subject: [PATCH 2/6] Added mobile menu and media queries added and modified --- index.html | 25 +++++++++++++++++- main.js | 7 +++++ styles.css | 77 ++++++++++++++++++++++++++++++++++++++++++++---------- 3 files changed, 94 insertions(+), 15 deletions(-) diff --git a/index.html b/index.html index 1edb182ab..450f2b7fb 100644 --- a/index.html +++ b/index.html @@ -36,6 +36,7 @@ +
+ +
+ + + + + +
- + \ No newline at end of file diff --git a/main.js b/main.js index 91eaf689e..4c2977928 100644 --- a/main.js +++ b/main.js @@ -1,8 +1,15 @@ 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 27835b990..285f449e0 100644 --- a/styles.css +++ b/styles.css @@ -1,3 +1,4 @@ +/* General */ :root { --white: #FFFFFF; --black: #000000; @@ -12,6 +13,8 @@ body { margin: 0; font-family: 'Quicksand', sans-serif; } + +/* Navbar */ nav { display: flex; justify-content: space-between; @@ -23,6 +26,7 @@ nav { } .menu { display: none; + cursor: pointer; } .logo { width: 100px; @@ -78,6 +82,8 @@ nav { justify-content: center; align-items: center; } + +/* Desktop menu */ .desktop-menu { position: absolute; top: 60px; @@ -87,33 +93,68 @@ nav { border: 1px solid var(--very-light-pink); border-radius: 6px; padding: 20px 20px 0 20px; - } - .desktop-menu ul { +} +.desktop-menu ul { list-style: none; padding: 0; margin: 0; - } - .desktop-menu ul li { +} +.desktop-menu ul li { text-align: end; - } - .desktop-menu ul li:nth-child(1), - .desktop-menu ul li:nth-child(2) { +} +.desktop-menu ul li:nth-child(1), +.desktop-menu ul li:nth-child(2) { font-weight: bold; - } - .desktop-menu ul li:last-child { +} +.desktop-menu ul li:last-child { padding-top: 20px; border-top: 1px solid var(--very-light-pink); - } - .desktop-menu ul li:last-child a { +} +.desktop-menu ul li:last-child a { color: var(--hospital-green); font-size: var(--sm); - } - .desktop-menu ul li a { +} +.desktop-menu ul li a { color: var(--back); text-decoration: none; margin-bottom: 20px; display: inline-block; - } +} + +/* Mobile menu */ +.mobile-menu { + position: absolute; + top: 61px; + background-color: var(--white); + 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 Queries */ @media (max-width: 640px) { .menu { display: block; @@ -124,4 +165,12 @@ nav { .navbar-email { display: none; } + .desktop-menu{ + display: none; + } +} +@media (min-width: 641px) { + .mobile-menu{ + display: none; + } } \ No newline at end of file From e0722b9a34940cd68d5c1198938e2cb362c0c990 Mon Sep 17 00:00:00 2001 From: kburrion Date: Sat, 6 Aug 2022 20:47:21 -0600 Subject: [PATCH 3/6] Shopping cart added --- index.html | 48 ++++++++++++++++++++++++++++++ main.js | 26 ++++++++++++++++- styles.css | 85 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 158 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 450f2b7fb..ad8bd39dc 100644 --- a/index.html +++ b/index.html @@ -67,6 +67,54 @@ + + diff --git a/main.js b/main.js index 4c2977928..404aa0071 100644 --- a/main.js +++ b/main.js @@ -1,15 +1,39 @@ const menuEmail = document.querySelector('.navbar-email'); const desktopMenu = document.querySelector('.desktop-menu'); + const menuHamIcon = document.querySelector('.menu'); const mobileMenu = document.querySelector('.mobile-menu'); +const menuShoppingCart = document.querySelector('.navbar-shopping-cart'); +const aside = document.querySelector('.product-detail'); + menuEmail.addEventListener('click', toggleDesktopMenu); menuHamIcon.addEventListener('click', toggleMobileMenu); - +menuShoppingCart.addEventListener('click', toggleShoppingCartAside); function toggleDesktopMenu(){ + const isAsideClosed = aside.classList.contains('inactive') + if(!isAsideClosed){ + aside.classList.add('inactive') + } desktopMenu.classList.toggle('inactive') + } + function toggleMobileMenu(){ + const isAsideClosed = aside.classList.contains('inactive') + if(!isAsideClosed){ + aside.classList.add('inactive') + } mobileMenu.classList.toggle('inactive') +} + +function toggleShoppingCartAside(){ + const isMobileMenuClosed = mobileMenu.classList.contains('inactive') + const isDesktopMenuClosed = desktopMenu.classList.contains('inactive') + if(!isMobileMenuClosed || !isDesktopMenuClosed){ + mobileMenu.classList.add('inactive') + desktopMenu.classList.add('inactive') + } + aside.classList.toggle('inactive') } \ No newline at end of file diff --git a/styles.css b/styles.css index 285f449e0..acf800442 100644 --- a/styles.css +++ b/styles.css @@ -67,6 +67,7 @@ nav { } .navbar-shopping-cart { position: relative; + cursor: pointer; } .navbar-shopping-cart div { width: 16px; @@ -93,6 +94,8 @@ nav { border: 1px solid var(--very-light-pink); border-radius: 6px; padding: 20px 20px 0 20px; + background-color: var(--white); + z-index: 10; } .desktop-menu ul { list-style: none; @@ -127,6 +130,7 @@ nav { top: 61px; background-color: var(--white); padding: 24px; + z-index: 10; } .mobile-menu a { text-decoration: none; @@ -154,6 +158,84 @@ nav { color: var(--hospital-green) !important; } +/* Aside (product detail and shopping cart) */ +.product-detail { + width: 360px; + padding: 0 24px; + box-sizing: border-box; + position: absolute; + right: 0; + background-color: var(--white); + } + .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 Queries */ @media (max-width: 640px) { .menu { @@ -168,6 +250,9 @@ nav { .desktop-menu{ display: none; } + .product-detail { + width: 100%; + } } @media (min-width: 641px) { .mobile-menu{ From ac8d6e7ba9c8b6e8159b32e6ad5f4e3061d9fd03 Mon Sep 17 00:00:00 2001 From: kburrion Date: Sat, 6 Aug 2022 21:39:19 -0600 Subject: [PATCH 4/6] Dynamic product list added --- index.html | 231 +++++++++++++++++++++++++++++------------------------ main.js | 67 +++++++++++++++- styles.css | 150 +++++++++++++++++++++++++++------- 3 files changed, 311 insertions(+), 137 deletions(-) diff --git a/index.html b/index.html index ad8bd39dc..b24bda74b 100644 --- a/index.html +++ b/index.html @@ -1,121 +1,140 @@ - - - - - - - - - YardSale: Tienda online de cositas chidas + + + + + + + + + YardSale: Tienda online de cositas chidas - - -