From 1850eb7803405a68ed91404f850c70ab105615b3 Mon Sep 17 00:00:00 2001 From: felix lara Date: Sat, 30 Jul 2022 13:15:02 -0400 Subject: [PATCH 1/6] agregando la interacion del email --- index.html | 74 ++++++++++++++++++++++++++++++ main.js | 8 ++++ styles.css | 132 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 214 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..af0954281 --- /dev/null +++ b/index.html @@ -0,0 +1,74 @@ + + + + + + + + + + + + + YardSale tiendas online + + + + + + + + \ No newline at end of file diff --git a/main.js b/main.js new file mode 100644 index 000000000..39785d1cc --- /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..879366392 --- /dev/null +++ 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 4c5606386bd0c7b0f3711367ff5afd9337dddc1f Mon Sep 17 00:00:00 2001 From: felix lara Date: Thu, 4 Aug 2022 15:02:59 -0400 Subject: [PATCH 2/6] clase 20 --- index.html | 44 ++++++++++++++++++++++++++++++++++++++++++++ main.js | 10 ++++++++-- styles.css | 45 +++++++++++++++++++++++++++++++++++++++++++-- 3 files changed, 95 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index af0954281..41e4f5f07 100644 --- a/index.html +++ b/index.html @@ -67,6 +67,50 @@ + +
+ + + + + +
diff --git a/main.js b/main.js index 39785d1cc..bcf4c5406 100644 --- a/main.js +++ b/main.js @@ -1,8 +1,14 @@ const menuEmail = document.querySelector('.navbar-email'); -const desktopMenu = document.querySelector('.desktop-menu') +const desktopMenu = document.querySelector('.desktop-menu'); +const mobileMenu = document.querySelector('.mobile-menu'); -menuEmail.addEventListener('click', toggleDesktopMenu) +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 879366392..4a61e7a9e 100644 --- a/styles.css +++ b/styles.css @@ -1,3 +1,4 @@ +/* General */ :root { --white: #FFFFFF; --black: #000000; @@ -16,7 +17,7 @@ .inactive{ display: none; } - +/*Navbar general*/ nav { display: flex; justify-content: space-between; @@ -81,6 +82,7 @@ align-items: center; } + /* Menu desktop */ .desktop-menu { position: absolute; top: 60px; @@ -118,7 +120,37 @@ 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; @@ -129,4 +161,13 @@ .navbar-email { display: none; } + .desktop-menu { + display: none; + } + } + + @media (min-width: 641px){ + .mobile-menu { + display: none; + } } \ No newline at end of file From 10c3039fc9ae36375da924d04d755dcfa6ecdb27 Mon Sep 17 00:00:00 2001 From: felix lara Date: Thu, 4 Aug 2022 15:04:21 -0400 Subject: [PATCH 3/6] agregando la interaccion del carrito de compras --- index.html | 46 +++++++++++++++++++++++++++++ main.js | 29 ++++++++++++++++-- styles.css | 86 +++++++++++++++++++++++++++++++++++++++++++++++++++++- 3 files changed, 158 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index 41e4f5f07..9cdf74a06 100644 --- a/index.html +++ b/index.html @@ -112,7 +112,53 @@ + \ No newline at end of file diff --git a/main.js b/main.js index bcf4c5406..53420a07f 100644 --- a/main.js +++ b/main.js @@ -1,14 +1,39 @@ const menuEmail = document.querySelector('.navbar-email'); +const menuHamIcon = document.querySelector('.menu'); +const menuCarritoIcon = document.querySelector('.navbar-shopping-cart'); const desktopMenu = document.querySelector('.desktop-menu'); 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(){ -desktopMenu.classList.toggle('inactive') + const isAsideClosed = aside.classList.contains('inactive'); + + if(!isAsideClosed){ + aside.classList.add('inactive') + } +desktopMenu.classList.toggle('inactive'); } function toggleMobileMenu () { - mobileMenu.classList.toggle('inactive') + const isAsideClosed = aside.classList.contains('inactive'); + + if(!isAsideClosed){ + aside.classList.add('inactive') + } + + mobileMenu.classList.toggle('inactive'); +} + +function toggleCarritoAside(){ + const isMobileMenuClosed = mobileMenu.classList.contains('inactive'); + + if(!isMobileMenuClosed){ + mobileMenu.classList.add('inactive') + } + + aside.classList.toggle('inactive'); } \ No newline at end of file diff --git a/styles.css b/styles.css index 4a61e7a9e..681e27fec 100644 --- a/styles.css +++ b/styles.css @@ -122,6 +122,7 @@ } /* Mobile menu */ .mobile-menu { + background-color: var(--white); position: absolute; top: 60px; padding: 24px; @@ -151,6 +152,85 @@ font-size: var(--sm); color: var(--hospital-green) !important; } + + + /* aside (product detail y carrito) */ + .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; + } + @media (max-width: 640px) { .menu { display: block; @@ -164,10 +244,14 @@ .desktop-menu { display: none; } + .product-detail { + width: 100%; + } } @media (min-width: 641px){ .mobile-menu { display: none; } - } \ No newline at end of file + } + \ No newline at end of file From 24191179694640151768c57332a6f7eae0ab53ce Mon Sep 17 00:00:00 2001 From: felix lara Date: Thu, 4 Aug 2022 18:36:43 -0400 Subject: [PATCH 4/6] agregamos lista html con arrays en javascript --- .vscode/settings.json | 22 ++++++++++++ index.html | 20 +++++++++++ main.js | 79 ++++++++++++++++++++++++++++++++++++++++++- styles.css | 54 +++++++++++++++++++++++++++++ 4 files changed, 174 insertions(+), 1 deletion(-) create mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 000000000..21cfc46d9 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,22 @@ +{ + "workbench.colorCustomizations": { + "activityBar.activeBackground": "#65c89b", + "activityBar.activeBorder": "#945bc4", + "activityBar.background": "#65c89b", + "activityBar.foreground": "#15202b", + "activityBar.inactiveForeground": "#15202b99", + "activityBarBadge.background": "#945bc4", + "activityBarBadge.foreground": "#e7e7e7", + "sash.hoverBorder": "#65c89b", + "statusBar.background": "#42b883", + "statusBar.foreground": "#15202b", + "statusBarItem.hoverBackground": "#359268", + "statusBarItem.remoteBackground": "#42b883", + "statusBarItem.remoteForeground": "#15202b", + "titleBar.activeBackground": "#42b883", + "titleBar.activeForeground": "#15202b", + "titleBar.inactiveBackground": "#42b88399", + "titleBar.inactiveForeground": "#15202b99" + }, + "peacock.color": "#42b883" +} \ No newline at end of file diff --git a/index.html b/index.html index 9cdf74a06..7b4206861 100644 --- a/index.html +++ b/index.html @@ -159,6 +159,26 @@ + +
+
+ + + +
+
+ \ No newline at end of file diff --git a/main.js b/main.js index 53420a07f..65c3d51a0 100644 --- a/main.js +++ b/main.js @@ -4,6 +4,7 @@ const menuCarritoIcon = document.querySelector('.navbar-shopping-cart'); const desktopMenu = document.querySelector('.desktop-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); @@ -36,4 +37,80 @@ 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 681e27fec..a4574c937 100644 --- a/styles.css +++ b/styles.css @@ -231,6 +231,50 @@ 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; @@ -247,6 +291,16 @@ .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 58e59dd912ab3cf3d9e5c56fa78cb43b2a8a951e Mon Sep 17 00:00:00 2001 From: felix lara Date: Fri, 5 Aug 2022 18:01:04 -0400 Subject: [PATCH 5/6] agregando la descripcion del producto --- index.html | 21 ++++++++++++-- main.js | 20 ++++++------- styles.css | 84 +++++++++++++++++++++++++++++++++++++++++++++++------- 3 files changed, 103 insertions(+), 22 deletions(-) diff --git a/index.html b/index.html index 7b4206861..99f2300e5 100644 --- a/index.html +++ b/index.html @@ -112,7 +112,8 @@ -