From 918f8b53d2e0f39487f0d663394cbafb38bc5ede Mon Sep 17 00:00:00 2001 From: OmarReyesC Date: Fri, 5 Jul 2024 13:07:54 -0600 Subject: [PATCH 1/6] New files: Index, Styles and Main --- index.html | 0 main.js | 0 styles.css | 0 3 files changed, 0 insertions(+), 0 deletions(-) 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..e69de29bb diff --git a/main.js b/main.js new file mode 100644 index 000000000..e69de29bb diff --git a/styles.css b/styles.css new file mode 100644 index 000000000..e69de29bb From b0109c8e9ee7182787773b30a01ae0833b7823a4 Mon Sep 17 00:00:00 2001 From: OmarReyesC Date: Fri, 5 Jul 2024 16:14:23 -0600 Subject: [PATCH 2/6] After first class, menu is deployed on website navbar. --- index.html | 74 ++++++++++++++++++++++++++++++ main.js | 8 ++++ styles.css | 132 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 214 insertions(+) diff --git a/index.html b/index.html index e69de29bb..12f73899b 100644 --- a/index.html +++ b/index.html @@ -0,0 +1,74 @@ + + + + + + + + + + + + + YardSale: Tienda online de cositas chidas + + + + + + + + \ No newline at end of file diff --git a/main.js b/main.js index e69de29bb..94e17bef7 100644 --- a/main.js +++ 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 index e69de29bb..264bb193a 100644 --- a/styles.css +++ b/styles.css @@ -0,0 +1,132 @@ +: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); + cursor: pointer; + 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; + 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 96a9865df020012933a8910a7c0dec44f75c1702 Mon Sep 17 00:00:00 2001 From: OmarReyesC Date: Fri, 5 Jul 2024 17:25:27 -0600 Subject: [PATCH 3/6] After second class, menu is deployed on mobile navbar. --- index.html | 44 ++++++++++++++++++++++++++++++++++++++++++++ main.js | 18 +++++++++++++++++- styles.css | 46 ++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 107 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 12f73899b..fb68838c6 100644 --- a/index.html +++ b/index.html @@ -66,6 +66,50 @@ + +
+ + + + + +
diff --git a/main.js b/main.js index 94e17bef7..98c541776 100644 --- a/main.js +++ b/main.js @@ -1,8 +1,24 @@ 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'); -} \ No newline at end of file +} + +function toggleMobileMenu() { + mobileMenu.classList.toggle('inactive'); +} + +//Experiment. Not to be kept. +/*menuEmail.addEventListener('click', toggleMenu(menuEmail)); +menuHamIcon.addEventListener('click', toggleMobileMenu(menuHamIcon)); + +function toggleMenu(menuInstance) { + menuInstance.classList.toggle('inactive'); +};*/ \ No newline at end of file diff --git a/styles.css b/styles.css index 264bb193a..7fae9196b 100644 --- a/styles.css +++ b/styles.css @@ -1,3 +1,4 @@ +/*General styles*/ :root { --white: #FFFFFF; --black: #000000; @@ -17,6 +18,7 @@ display: none; } +/*Navbar (general)*/ nav { display: flex; justify-content: space-between; @@ -81,6 +83,7 @@ align-items: center; } +/*Desktop menu*/ .desktop-menu { position: absolute; top: 60px; @@ -119,6 +122,40 @@ 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 queries*/ @media (max-width: 640px) { .menu { display: block; @@ -129,4 +166,13 @@ .navbar-email { display: none; } + .desktop-menu { + display: none; + } + } + + @media (min-width: 641px) { + .mobile-menu { + display: none; + } } \ No newline at end of file From 03e2361de9fc8e3a08f91e29907fcce873266efb Mon Sep 17 00:00:00 2001 From: OmarReyesC Date: Sat, 6 Jul 2024 20:20:58 -0600 Subject: [PATCH 4/6] JS generated Product Cards are ready. --- index.html | 67 +++++++++++++++++++++++++ main.js | 124 +++++++++++++++++++++++++++++++++++++++++++--- styles.css | 142 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 325 insertions(+), 8 deletions(-) diff --git a/index.html b/index.html index fb68838c6..f3f697255 100644 --- a/index.html +++ b/index.html @@ -112,6 +112,73 @@ + + +
+
+ + + + +
+
+ diff --git a/main.js b/main.js index 98c541776..fa8bae19e 100644 --- a/main.js +++ b/main.js @@ -1,24 +1,132 @@ const menuEmail = document.querySelector('.navbar-email'); const desktopMenu = document.querySelector('.desktop-menu'); +const cartIconMenu = document.querySelector('.navbar-shopping-cart'); const menuHamIcon = document.querySelector('.menu'); const mobileMenu = document.querySelector('.mobile-menu'); +const aside = document.querySelector('.product-detail'); +const cardsContainer = document.querySelector('.cards-container'); menuEmail.addEventListener('click', toggleDesktopMenu); menuHamIcon.addEventListener('click', toggleMobileMenu); +cartIconMenu.addEventListener('click', toggleCartAside); 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 toggleCartAside() { + const isMobileMenuClosed = mobileMenu.classList.contains('inactive'); + const isDesktopMenuClosed = desktopMenu.classList.contains('inactive'); -//Experiment. Not to be kept. -/*menuEmail.addEventListener('click', toggleMenu(menuEmail)); -menuHamIcon.addEventListener('click', toggleMobileMenu(menuHamIcon)); + if (!isMobileMenuClosed) { + mobileMenu.classList.add('inactive'); + + } + if (!isDesktopMenuClosed) { + desktopMenu.classList.add('inactive'); + } + + aside.classList.toggle('inactive'); +}; + +const productList = []; +productList.push({ + name: 'Dog House', + price: 1000, + image: 'https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940', +}); +productList.push({ + name: 'Coffee', + price: 10000, + image: 'https://images.pexels.com/photos/20988789/pexels-photo-20988789/free-photo-of-cafe-beber-bebida-mesa.jpeg?auto=compress&cs=tinysrgb&w=600&lazy=load', +}); +productList.push({ + name: 'Penguin', + price: 1200, + image: 'https://images.pexels.com/photos/26201918/pexels-photo-26201918/free-photo-of-mar-pajaro-playa-arena.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1', +}); +productList.push({ + name: 'Dog House', + price: 1000, + image: 'https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940', +}); +productList.push({ + name: 'Coffee', + price: 10000, + image: 'https://images.pexels.com/photos/20988789/pexels-photo-20988789/free-photo-of-cafe-beber-bebida-mesa.jpeg?auto=compress&cs=tinysrgb&w=600&lazy=load', +}); +productList.push({ + name: 'Penguin', + price: 1200, + image: 'https://images.pexels.com/photos/26201918/pexels-photo-26201918/free-photo-of-mar-pajaro-playa-arena.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1', +}); + +/*
+ +
+
+

$120,00

+

Bike

+
+
+ +
+
+
*/ + +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); + + 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); + } +} -function toggleMenu(menuInstance) { - menuInstance.classList.toggle('inactive'); -};*/ \ No newline at end of file +renderProducts(productList); \ No newline at end of file diff --git a/styles.css b/styles.css index 7fae9196b..728c425c9 100644 --- a/styles.css +++ b/styles.css @@ -66,6 +66,7 @@ margin-right: 12px; } .navbar-shopping-cart { + cursor: pointer; position: relative; } .navbar-shopping-cart div { @@ -125,6 +126,7 @@ /*Mobile menu*/ .mobile-menu { + background-color: var(--white); position: absolute; top: 60px; padding: 24px; @@ -155,6 +157,131 @@ color: var(--hospital-green) !important; } +/*Aside (Product detail and shopping cart)*/ + +.product-detail { + background-color: var(--white); + 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; +} + +/*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) { + +} + /*Media queries*/ @media (max-width: 640px) { .menu { @@ -169,6 +296,21 @@ .desktop-menu { display: none; } + + .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 727e195187d5b69108131c0127fc0ff626546ee2 Mon Sep 17 00:00:00 2001 From: OmarReyesC Date: Sat, 6 Jul 2024 21:36:30 -0600 Subject: [PATCH 5/6] Product detail aside styled. CSS fixed. --- index.html | 18 +++++++++++- main.js | 20 +++++++------- styles.css | 81 +++++++++++++++++++++++++++++++++++++++++++++++++----- 3 files changed, 101 insertions(+), 18 deletions(-) diff --git a/index.html b/index.html index f3f697255..a0d563ef5 100644 --- a/index.html +++ b/index.html @@ -112,7 +112,7 @@ -