From 4b54374f78ee5f519ed66a21455b37e13f51b025 Mon Sep 17 00:00:00 2001 From: luiznaiper Date: Wed, 10 Aug 2022 07:53:27 -0500 Subject: [PATCH 1/9] :tada: Start fork --- index.html | 54 +++++++++++ {icons => src/icons}/bt_add_to_cart.svg | 0 {icons => src/icons}/bt_added_to_cart.svg | 0 {icons => src/icons}/email.svg | 0 {icons => src/icons}/flechita.svg | 0 {icons => src/icons}/icon_close.png | Bin {icons => src/icons}/icon_menu.svg | 0 {icons => src/icons}/icon_shopping_cart.svg | 0 .../icon_shopping_cart_notification.svg | 0 {logos => src/logos}/favicon_bota_fora.svg | 0 {logos => src/logos}/favicon_yard_sale.svg | 0 {logos => src/logos}/logo_bota_fora.svg | 0 {logos => src/logos}/logo_yard_sale.svg | 0 src/styles.css | 87 ++++++++++++++++++ 14 files changed, 141 insertions(+) create mode 100644 index.html rename {icons => src/icons}/bt_add_to_cart.svg (100%) rename {icons => src/icons}/bt_added_to_cart.svg (100%) rename {icons => src/icons}/email.svg (100%) rename {icons => src/icons}/flechita.svg (100%) rename {icons => src/icons}/icon_close.png (100%) rename {icons => src/icons}/icon_menu.svg (100%) rename {icons => src/icons}/icon_shopping_cart.svg (100%) rename {icons => src/icons}/icon_shopping_cart_notification.svg (100%) rename {logos => src/logos}/favicon_bota_fora.svg (100%) rename {logos => src/logos}/favicon_yard_sale.svg (100%) rename {logos => src/logos}/logo_bota_fora.svg (100%) rename {logos => src/logos}/logo_yard_sale.svg (100%) create mode 100644 src/styles.css diff --git a/index.html b/index.html new file mode 100644 index 000000000..54263dd49 --- /dev/null +++ b/index.html @@ -0,0 +1,54 @@ + + + + + + + + + + + Naiper's Store + + + + + diff --git a/icons/bt_add_to_cart.svg b/src/icons/bt_add_to_cart.svg similarity index 100% rename from icons/bt_add_to_cart.svg rename to src/icons/bt_add_to_cart.svg diff --git a/icons/bt_added_to_cart.svg b/src/icons/bt_added_to_cart.svg similarity index 100% rename from icons/bt_added_to_cart.svg rename to src/icons/bt_added_to_cart.svg diff --git a/icons/email.svg b/src/icons/email.svg similarity index 100% rename from icons/email.svg rename to src/icons/email.svg diff --git a/icons/flechita.svg b/src/icons/flechita.svg similarity index 100% rename from icons/flechita.svg rename to src/icons/flechita.svg diff --git a/icons/icon_close.png b/src/icons/icon_close.png similarity index 100% rename from icons/icon_close.png rename to src/icons/icon_close.png diff --git a/icons/icon_menu.svg b/src/icons/icon_menu.svg similarity index 100% rename from icons/icon_menu.svg rename to src/icons/icon_menu.svg diff --git a/icons/icon_shopping_cart.svg b/src/icons/icon_shopping_cart.svg similarity index 100% rename from icons/icon_shopping_cart.svg rename to src/icons/icon_shopping_cart.svg diff --git a/icons/icon_shopping_cart_notification.svg b/src/icons/icon_shopping_cart_notification.svg similarity index 100% rename from icons/icon_shopping_cart_notification.svg rename to src/icons/icon_shopping_cart_notification.svg diff --git a/logos/favicon_bota_fora.svg b/src/logos/favicon_bota_fora.svg similarity index 100% rename from logos/favicon_bota_fora.svg rename to src/logos/favicon_bota_fora.svg diff --git a/logos/favicon_yard_sale.svg b/src/logos/favicon_yard_sale.svg similarity index 100% rename from logos/favicon_yard_sale.svg rename to src/logos/favicon_yard_sale.svg diff --git a/logos/logo_bota_fora.svg b/src/logos/logo_bota_fora.svg similarity index 100% rename from logos/logo_bota_fora.svg rename to src/logos/logo_bota_fora.svg diff --git a/logos/logo_yard_sale.svg b/src/logos/logo_yard_sale.svg similarity index 100% rename from logos/logo_yard_sale.svg rename to src/logos/logo_yard_sale.svg diff --git a/src/styles.css b/src/styles.css new file mode 100644 index 000000000..5410af097 --- /dev/null +++ b/src/styles.css @@ -0,0 +1,87 @@ +: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); +} +.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; +} +.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; +} +@media (max-width: 640px) { + .menu { + display: block; + } + .navbar-left ul { + display: none; + } + .navbar-email { + display: none; + } +} From 6b476f77c34b22dbb58339104654ceebea38bddb Mon Sep 17 00:00:00 2001 From: luiznaiper Date: Wed, 10 Aug 2022 08:21:33 -0500 Subject: [PATCH 2/9] :construction: Add menu desktop --- index.html | 16 ++++++++++++++++ src/index.js | 9 +++++++++ src/styles.css | 44 ++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 69 insertions(+) create mode 100644 src/index.js diff --git a/index.html b/index.html index 54263dd49..9c56910a0 100644 --- a/index.html +++ b/index.html @@ -49,6 +49,22 @@ +
+ +
+ diff --git a/src/index.js b/src/index.js new file mode 100644 index 000000000..0d7f98f44 --- /dev/null +++ b/src/index.js @@ -0,0 +1,9 @@ +const $ = (selector) => document.querySelector(selector); +const menuEmail = $('.navbar-email'); +const desktopMenu = $('.desktop-menu'); + +const toggleDesktopMenu = () => { + desktopMenu.classList.toggle('inactive'); +}; + +menuEmail.addEventListener('click', toggleDesktopMenu); diff --git a/src/styles.css b/src/styles.css index 5410af097..f45606634 100644 --- a/src/styles.css +++ b/src/styles.css @@ -12,6 +12,10 @@ body { margin: 0; font-family: 'Quicksand', sans-serif; } +.inactive { + display: none; +} + nav { display: flex; justify-content: space-between; @@ -56,6 +60,7 @@ nav { color: var(--very-light-pink); font-size: var(--sm); margin-right: 12px; + cursor: pointer; } .navbar-shopping-cart { position: relative; @@ -74,6 +79,45 @@ nav { 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; + background: var(--white); +} +.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; From 7f5642307a1339bed9098be12b14ed13495a4ffa Mon Sep 17 00:00:00 2001 From: luiznaiper Date: Wed, 10 Aug 2022 19:43:51 -0500 Subject: [PATCH 3/9] :construction: Add mobile menu --- index.html | 45 ++++++++++++++++++++++++++++++++++++++++++++- src/index.js | 7 +++++++ src/styles.css | 44 ++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 95 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 9c56910a0..457e6fe97 100644 --- a/index.html +++ b/index.html @@ -15,7 +15,7 @@ diff --git a/src/index.js b/src/index.js index 0d7f98f44..23bc1df98 100644 --- a/src/index.js +++ b/src/index.js @@ -1,9 +1,16 @@ const $ = (selector) => document.querySelector(selector); const menuEmail = $('.navbar-email'); const desktopMenu = $('.desktop-menu'); +const burgerMenu = $('.burger-menu'); +const mobileMenu = $('.mobile-menu'); const toggleDesktopMenu = () => { desktopMenu.classList.toggle('inactive'); }; +const toggleDesktopMobile = () => { + mobileMenu.classList.toggle('inactive'); +}; + menuEmail.addEventListener('click', toggleDesktopMenu); +burgerMenu.addEventListener('click', toggleDesktopMobile); diff --git a/src/styles.css b/src/styles.css index f45606634..2b2119658 100644 --- a/src/styles.css +++ b/src/styles.css @@ -16,6 +16,8 @@ body { display: none; } +/*General navbar*/ + nav { display: flex; justify-content: space-between; @@ -80,6 +82,7 @@ nav { align-items: center; } +/*Desktop Menu*/ .desktop-menu { position: absolute; top: 60px; @@ -118,6 +121,38 @@ nav { display: inline-block; } +/*Mobile navbar*/ +.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; @@ -128,4 +163,13 @@ nav { .navbar-email { display: none; } + .desktop-menu { + display: none; + } +} + +@media (min-width: 641px) { + .mobile-menu { + display: none; + } } From 968e75bed4e13fa81293a32401549404eb035964 Mon Sep 17 00:00:00 2001 From: luiznaiper Date: Thu, 11 Aug 2022 07:19:58 -0500 Subject: [PATCH 4/9] :construction: Add toggle functions to disapear navs and menus --- index.html | 47 ++++++++++++++++++++++++++++ src/index.js | 30 ++++++++++++++++-- src/styles.css | 85 +++++++++++++++++++++++++++++++++++++++++++++++++- 3 files changed, 159 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index 457e6fe97..70bbfba6b 100644 --- a/index.html +++ b/index.html @@ -108,6 +108,53 @@ + diff --git a/src/index.js b/src/index.js index 23bc1df98..c37b17791 100644 --- a/src/index.js +++ b/src/index.js @@ -3,14 +3,40 @@ const menuEmail = $('.navbar-email'); const desktopMenu = $('.desktop-menu'); const burgerMenu = $('.burger-menu'); const mobileMenu = $('.mobile-menu'); +const cartMenu = $('.navbar-shopping-cart'); +const asideCart = $('.product-detail'); const toggleDesktopMenu = () => { + const isAsideOpen = !asideCart.classList.contains('inactive'); + + if (isAsideOpen) { + asideCart.classList.add('inactive'); + } desktopMenu.classList.toggle('inactive'); }; -const toggleDesktopMobile = () => { +const toggleMenuMobile = () => { + const isAsideOpen = !asideCart.classList.contains('inactive'); + + if (isAsideOpen) { + asideCart.classList.add('inactive'); + } mobileMenu.classList.toggle('inactive'); }; +const toggleCartMenu = () => { + const isMobileMenuOpen = !mobileMenu.classList.contains('inactive'); + const isDesktopMenuOpen = !desktopMenu.classList.contains('inactive'); + + if (isMobileMenuOpen) { + mobileMenu.classList.add('inactive'); + } + if (isDesktopMenuOpen) { + desktopMenu.classList.add('inactive'); + } + asideCart.classList.toggle('inactive'); +}; + menuEmail.addEventListener('click', toggleDesktopMenu); -burgerMenu.addEventListener('click', toggleDesktopMobile); +burgerMenu.addEventListener('click', toggleMenuMobile); +cartMenu.addEventListener('click', toggleCartMenu); diff --git a/src/styles.css b/src/styles.css index 2b2119658..872349ccc 100644 --- a/src/styles.css +++ b/src/styles.css @@ -66,6 +66,7 @@ nav { } .navbar-shopping-cart { position: relative; + cursor: pointer; } .navbar-shopping-cart div { width: 16px; @@ -126,6 +127,7 @@ nav { position: absolute; top: 60px; padding: 24px; + background-color: var(--white); } .mobile-menu a { text-decoration: none; @@ -153,6 +155,83 @@ nav { color: var(--hospital-green) !important; } +/*Aside, product detail*/ +.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 (max-width: 640px) { .menu { display: block; @@ -166,10 +245,14 @@ nav { .desktop-menu { display: none; } + .product-detail { + width: 100%; + } } @media (min-width: 641px) { - .mobile-menu { + .mobile-menu, + .burger-menu { display: none; } } From e2a41f924a801062c6553fb5d5605e0473e9295f Mon Sep 17 00:00:00 2001 From: luiznaiper Date: Thu, 11 Aug 2022 07:54:07 -0500 Subject: [PATCH 5/9] :construction: Add javascript to create product elements --- index.html | 19 +++++++++++-- src/index.js | 74 ++++++++++++++++++++++++++++++++++++++++++++++++++ src/styles.css | 55 +++++++++++++++++++++++++++++++++++++ 3 files changed, 146 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 70bbfba6b..1cb80733a 100644 --- a/index.html +++ b/index.html @@ -147,14 +147,29 @@ Total

$560.00

- - + +
+
+ +
+
diff --git a/src/index.js b/src/index.js index c37b17791..0729b3a62 100644 --- a/src/index.js +++ b/src/index.js @@ -5,6 +5,7 @@ const burgerMenu = $('.burger-menu'); const mobileMenu = $('.mobile-menu'); const cartMenu = $('.navbar-shopping-cart'); const asideCart = $('.product-detail'); +const cardsContainer = document.querySelector('.cards-container'); const toggleDesktopMenu = () => { const isAsideOpen = !asideCart.classList.contains('inactive'); @@ -37,6 +38,79 @@ const toggleCartMenu = () => { asideCart.classList.toggle('inactive'); }; +const 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: 'Screen', + price: 220, + image: + 'https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940', + }, + { + name: 'Notebook', + price: 620, + image: + 'https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940', + }, + { + name: 'Seat', + price: 300, + image: 'https://m.media-amazon.com/images/I/61e+sZ9rgNL._AC_SL1500_.jpg', + }, + { + name: 'Tennis Montain Bike', + price: 2200, + image: + 'https://assets.adidas.com/images/h_840,f_auto,q_auto,fl_lossy,c_fill,g_auto/8ea578f6c07847fca2d0ac85011d7f1f_9366/Tenis_para_Mountain_Bike_Five_Ten_Freerider_Negro_FW2835_01_standard.jpg', + }, +]; + +/*
+ +
+
+

$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', './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); + menuEmail.addEventListener('click', toggleDesktopMenu); burgerMenu.addEventListener('click', toggleMenuMobile); cartMenu.addEventListener('click', toggleCartMenu); diff --git a/src/styles.css b/src/styles.css index 872349ccc..995f83f94 100644 --- a/src/styles.css +++ b/src/styles.css @@ -232,6 +232,61 @@ nav { height: 50px; } +/*Lista de productos*/ +.cards-container { + margin-top: 20px; + display: grid; + grid-template-columns: repeat(auto-fill, 240px); + gap: 26px; + place-content: center; +} +.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) { + .cards-container { + grid-template-columns: repeat(auto-fill, 140px); + } + .product-card { + width: 140px; + } + .product-card img { + width: 140px; + height: 140px; + } +} + @media (max-width: 640px) { .menu { display: block; From faa8f7d71cb972c26d2eac984250e1fac8256a65 Mon Sep 17 00:00:00 2001 From: luiznaiper Date: Thu, 11 Aug 2022 21:45:44 -0500 Subject: [PATCH 6/9] :construction: Fixed css --- index.html | 20 +++++++++++- src/index.js | 24 ++++----------- src/styles.css | 84 +++++++++++++++++++++++++++++++++++++++++++++----- 3 files changed, 101 insertions(+), 27 deletions(-) diff --git a/index.html b/index.html index 1cb80733a..1912ef746 100644 --- a/index.html +++ b/index.html @@ -108,7 +108,7 @@ -