From ed000284c3352d8f338c35781fc780d3a826d151 Mon Sep 17 00:00:00 2001 From: EsnaiderRey Date: Thu, 4 Aug 2022 10:25:51 -0500 Subject: [PATCH 1/7] clase 17 javaScript --- .vscode/settings.json | 22 ++++++++++++++++++++++ curso-2/clase1.html => clase1.html | 0 curso-2/clase10.html => clase10.html | 0 curso-2/clase11.html => clase11.html | 0 curso-2/clase12.html => clase12.html | 0 curso-2/clase13.html => clase13.html | 0 curso-2/clase2.html => clase2.html | 0 curso-2/clase3.html => clase3.html | 0 curso-2/clase4.html => clase4.html | 0 curso-2/clase5.html => clase5.html | 0 curso-2/clase6.html => clase6.html | 0 curso-2/clase7.html => clase7.html | 0 curso-2/clase8.html => clase8.html | 0 curso-2/clase9.html => clase9.html | 0 index.html | 0 main.js | 0 style.css | 0 17 files changed, 22 insertions(+) create mode 100644 .vscode/settings.json rename curso-2/clase1.html => clase1.html (100%) rename curso-2/clase10.html => clase10.html (100%) rename curso-2/clase11.html => clase11.html (100%) rename curso-2/clase12.html => clase12.html (100%) rename curso-2/clase13.html => clase13.html (100%) rename curso-2/clase2.html => clase2.html (100%) rename curso-2/clase3.html => clase3.html (100%) rename curso-2/clase4.html => clase4.html (100%) rename curso-2/clase5.html => clase5.html (100%) rename curso-2/clase6.html => clase6.html (100%) rename curso-2/clase7.html => clase7.html (100%) rename curso-2/clase8.html => clase8.html (100%) rename curso-2/clase9.html => clase9.html (100%) create mode 100644 index.html create mode 100644 main.js create mode 100644 style.css diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..a1d0dba --- /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.remoteColor": "#42b883" +} \ No newline at end of file diff --git a/curso-2/clase1.html b/clase1.html similarity index 100% rename from curso-2/clase1.html rename to clase1.html diff --git a/curso-2/clase10.html b/clase10.html similarity index 100% rename from curso-2/clase10.html rename to clase10.html diff --git a/curso-2/clase11.html b/clase11.html similarity index 100% rename from curso-2/clase11.html rename to clase11.html diff --git a/curso-2/clase12.html b/clase12.html similarity index 100% rename from curso-2/clase12.html rename to clase12.html diff --git a/curso-2/clase13.html b/clase13.html similarity index 100% rename from curso-2/clase13.html rename to clase13.html diff --git a/curso-2/clase2.html b/clase2.html similarity index 100% rename from curso-2/clase2.html rename to clase2.html diff --git a/curso-2/clase3.html b/clase3.html similarity index 100% rename from curso-2/clase3.html rename to clase3.html diff --git a/curso-2/clase4.html b/clase4.html similarity index 100% rename from curso-2/clase4.html rename to clase4.html diff --git a/curso-2/clase5.html b/clase5.html similarity index 100% rename from curso-2/clase5.html rename to clase5.html diff --git a/curso-2/clase6.html b/clase6.html similarity index 100% rename from curso-2/clase6.html rename to clase6.html diff --git a/curso-2/clase7.html b/clase7.html similarity index 100% rename from curso-2/clase7.html rename to clase7.html diff --git a/curso-2/clase8.html b/clase8.html similarity index 100% rename from curso-2/clase8.html rename to clase8.html diff --git a/curso-2/clase9.html b/clase9.html similarity index 100% rename from curso-2/clase9.html rename to clase9.html diff --git a/index.html b/index.html new file mode 100644 index 0000000..e69de29 diff --git a/main.js b/main.js new file mode 100644 index 0000000..e69de29 diff --git a/style.css b/style.css new file mode 100644 index 0000000..e69de29 From 0e37b3199fd8d590ef93cb0b4c91461244906b65 Mon Sep 17 00:00:00 2001 From: EsnaiderRey Date: Thu, 4 Aug 2022 11:59:36 -0500 Subject: [PATCH 2/7] menu desplegable de email funcionado a correo de barra de navegacion --- index.html | 74 ++++++++++++++++++++++++++++ main.js | 8 +++ style.css | 140 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 222 insertions(+) diff --git a/index.html b/index.html index e69de29..2f5b433 100644 --- a/index.html +++ b/index.html @@ -0,0 +1,74 @@ + + + + + + + + + + + + Yard Sale + + + + + + + + \ No newline at end of file diff --git a/main.js b/main.js index e69de29..c021bd2 100644 --- a/main.js +++ b/main.js @@ -0,0 +1,8 @@ +const navBarEmail = document.querySelector(".navbar-email"); +const desktopMenu = document.querySelector(".desktop-menu"); + +navBarEmail.addEventListener("click", toggleDesktopMenuEmail); + +function toggleDesktopMenuEmail() { + desktopMenu.classList.toggle("inactive") +} \ No newline at end of file diff --git a/style.css b/style.css index e69de29..3c9c42c 100644 --- a/style.css +++ b/style.css @@ -0,0 +1,140 @@ +/* Los elementos y variables bases para la maquetacion de la pag. */ +: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, para lo que aparece y desaparece en el html al hacer click, como el menu desplegable */ + .inactive { + display: none; + } + + /* barra de navegacion, navbar, clase 11, toda la parte superior de las paginas. */ + 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 { + 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; + } + + + /* Menu desplegable al hacer clic en el correo del navbar. */ + .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; + } + + +/* Sigue siendo parte del navbar, cuando la pantalla mida menos de 640px */ + @media (max-width: 640px) { + .menu { + display: block; + } + .navbar-left ul { + display: none; + } + .navbar-email { + display: none; + } + } + + \ No newline at end of file From bdf9df26eb95e88830a93e0bb0a3ddf2bef7bbac Mon Sep 17 00:00:00 2001 From: EsnaiderRey Date: Thu, 4 Aug 2022 23:22:45 -0500 Subject: [PATCH 3/7] add the menu mobile deploy fucion with the index.html --- index.html | 44 ++++++++++++++++++++++++++++++++++++++++++++ main.js | 8 ++++++++ style.css | 41 ++++++++++++++++++++++++++++++++++++++++- 3 files changed, 92 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index 2f5b433..8a0702a 100644 --- a/index.html +++ b/index.html @@ -67,6 +67,50 @@ + +
+ + + + + +
diff --git a/main.js b/main.js index c021bd2..0647108 100644 --- a/main.js +++ b/main.js @@ -1,8 +1,16 @@ const navBarEmail = document.querySelector(".navbar-email"); const desktopMenu = document.querySelector(".desktop-menu"); +const mobileMenuBotton = document.querySelector(".menu"); +const mobileMenu = document.querySelector(".mobile-menu"); + navBarEmail.addEventListener("click", toggleDesktopMenuEmail); +mobileMenuBotton.addEventListener("click", toggleMobileMenu); + function toggleDesktopMenuEmail() { desktopMenu.classList.toggle("inactive") +} +function toggleMobileMenu(){ + mobileMenu.classList.toggle("inactive") } \ No newline at end of file diff --git a/style.css b/style.css index 3c9c42c..72e28b0 100644 --- a/style.css +++ b/style.css @@ -124,6 +124,38 @@ } + /* menu desplegable en versino mobile */ + .mobile-menu { + position: absolute; + top: 61px; + 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; + } + /* Sigue siendo parte del navbar, cuando la pantalla mida menos de 640px */ @media (max-width: 640px) { .menu { @@ -135,6 +167,13 @@ .navbar-email { display: none; } + .desktop-menu{ + display: none; + } } - \ No newline at end of file + @media (min-width: 641px) { + .mobile-menu{ + display: none; + } + } \ No newline at end of file From 3d28046d1d4c98e9d37e74c58fdccbfc170cd56d Mon Sep 17 00:00:00 2001 From: EsnaiderRey Date: Fri, 5 Aug 2022 21:09:45 -0500 Subject: [PATCH 4/7] integracion dle navBar con los menus --- index.html | 48 ++++++++++++++++++++++++++++++++ main.js | 22 +++++++++++++-- style.css | 82 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 150 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 8a0702a..29e9e83 100644 --- a/index.html +++ b/index.html @@ -113,6 +113,54 @@ + + \ No newline at end of file diff --git a/main.js b/main.js index 0647108..116ce75 100644 --- a/main.js +++ b/main.js @@ -2,15 +2,33 @@ const navBarEmail = document.querySelector(".navbar-email"); const desktopMenu = document.querySelector(".desktop-menu"); const mobileMenuBotton = document.querySelector(".menu"); const mobileMenu = document.querySelector(".mobile-menu"); +const productDetail = document.querySelector(".product-detail"); +const navBarShoppingCart = document.querySelector(".navbar-shopping-cart") navBarEmail.addEventListener("click", toggleDesktopMenuEmail); mobileMenuBotton.addEventListener("click", toggleMobileMenu); +navBarShoppingCart.addEventListener("click", toggleOrderInCart); function toggleDesktopMenuEmail() { - desktopMenu.classList.toggle("inactive") + desktopMenu.classList.toggle("inactive"); + if (!productDetail.classList.contains("inactive")){ + productDetail.classList.add("inactive") + } } function toggleMobileMenu(){ - mobileMenu.classList.toggle("inactive") + mobileMenu.classList.toggle("inactive"); + if (!productDetail.classList.contains("inactive")){ + productDetail.classList.add("inactive") + } +} +function toggleOrderInCart(){ + productDetail.classList.toggle("inactive"); + if (!desktopMenu.classList.contains("inactive")){ + desktopMenu.classList.add("inactive") + } + if (!mobileMenu.classList.contains("inactive")){ + mobileMenu.classList.add("inactive") + } } \ No newline at end of file diff --git a/style.css b/style.css index 72e28b0..b4b5104 100644 --- a/style.css +++ b/style.css @@ -87,6 +87,7 @@ /* Menu desplegable al hacer clic en el correo del navbar. */ .desktop-menu { + background-color: var(--white); position: absolute; top: 60px; right: 60px; @@ -126,6 +127,7 @@ /* menu desplegable en versino mobile */ .mobile-menu { + background-color: var(--white); position: absolute; top: 61px; padding: 24px; @@ -156,6 +158,83 @@ color: var(--hospital-green) !important; } +/* my orders, el aside que esta en el carrito cuando se unde el icono carrito de compras */ +.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; + } + /* Sigue siendo parte del navbar, cuando la pantalla mida menos de 640px */ @media (max-width: 640px) { .menu { @@ -170,6 +249,9 @@ .desktop-menu{ display: none; } + .product-detail { + width: 100%; + } } @media (min-width: 641px) { From 373cb0a7847d08919f1a0fb98e1b7d26e25c4c7a Mon Sep 17 00:00:00 2001 From: EsnaiderRey Date: Fri, 5 Aug 2022 22:53:44 -0500 Subject: [PATCH 5/7] maquetacion de los productos desde el JS, la lista creada con un array --- index.html | 20 ++++++++++++--- main.js | 73 +++++++++++++++++++++++++++++++++++++++++++++++++++--- style.css | 55 ++++++++++++++++++++++++++++++++++++++++ 3 files changed, 142 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index 29e9e83..8fcb231 100644 --- a/index.html +++ b/index.html @@ -1,6 +1,3 @@ - - @@ -161,6 +158,23 @@ +
+
+ +
+
+ \ No newline at end of file diff --git a/main.js b/main.js index 116ce75..382bd0b 100644 --- a/main.js +++ b/main.js @@ -3,14 +3,14 @@ const desktopMenu = document.querySelector(".desktop-menu"); const mobileMenuBotton = document.querySelector(".menu"); const mobileMenu = document.querySelector(".mobile-menu"); const productDetail = document.querySelector(".product-detail"); -const navBarShoppingCart = document.querySelector(".navbar-shopping-cart") +const navBarShoppingCart = document.querySelector(".navbar-shopping-cart"); +const cardsContainer= document.querySelector('.cards-container'); navBarEmail.addEventListener("click", toggleDesktopMenuEmail); mobileMenuBotton.addEventListener("click", toggleMobileMenu); navBarShoppingCart.addEventListener("click", toggleOrderInCart); - function toggleDesktopMenuEmail() { desktopMenu.classList.toggle("inactive"); if (!productDetail.classList.contains("inactive")){ @@ -31,4 +31,71 @@ function toggleOrderInCart(){ if (!mobileMenu.classList.contains("inactive")){ mobileMenu.classList.add("inactive") } -} \ No newline at end of file +} + +/*
+ +
+
+

$120,00

+

Bike

+
+
+ +
+
+
*/ + +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: "Cellphone", + price: 300, + image: "https://images.pexels.com/photos/699122/pexels-photo-699122.jpeg?auto=compress&cs=tinysrgb&w=600", +}); +productList.push({ + name: "Camera", + price: 500, + image: "https://images.pexels.com/photos/2294897/pexels-photo-2294897.jpeg?auto=compress&cs=tinysrgb&w=600", +}) + +function renderProducts(array){ + for (product of productList){ + const productCard = document.createElement('div'); + productCard.classList.add('product-card'); + + const productImage = document.createElement('img'); + productImage.setAttribute('src', product.image); + productCard.appendChild(productImage); + + const productInfoDiv = document.createElement('div'); + productInfoDiv.classList.add('product-info'); + productCard.appendChild(productInfoDiv); + + const productInfoDivDiv = document.createElement('div'); + productInfoDiv.appendChild(productInfoDivDiv); + + const productPrice = document.createElement('p'); + productPrice.innerText = '$' + product.price; + productInfoDivDiv.appendChild(productPrice); + + const productName = document.createElement('p'); + productName.innerText = product.name; + productInfoDivDiv.appendChild(productName); + + const productInfoFigure = document.createElement('figure'); + productInfoDiv.appendChild(productInfoFigure); + + const imageAddToCart = document.createElement('img'); + imageAddToCart.setAttribute('src', "./icons/bt_add_to_cart.svg"); + productInfoFigure.appendChild(imageAddToCart); + + cardsContainer.appendChild(productCard); + } +} + +renderProducts(productList); \ No newline at end of file diff --git a/style.css b/style.css index b4b5104..45e1581 100644 --- a/style.css +++ b/style.css @@ -235,6 +235,50 @@ height: 50px; } +/* el contenedor de las card, con los product info, */ +.cards-container { + margin-top: 26px; + 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); + } + + /* Sigue siendo parte del navbar, cuando la pantalla mida menos de 640px */ @media (max-width: 640px) { .menu { @@ -252,6 +296,17 @@ .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 e69cc16f1a1687f87c28a0ad698bae7c3cc93634 Mon Sep 17 00:00:00 2001 From: EsnaiderRey Date: Sat, 6 Aug 2022 13:30:47 -0500 Subject: [PATCH 6/7] put the aside product info individual in html with the css --- clase12.html | 24 +++++++++--------- index.html | 16 ++++++++++++ style.css | 70 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 98 insertions(+), 12 deletions(-) diff --git a/clase12.html b/clase12.html index 3a84f21..3ad5884 100644 --- a/clase12.html +++ b/clase12.html @@ -23,13 +23,13 @@ margin: 0; font-family: 'Quicksand', sans-serif; } - .product-detail { + .product-detail-aside { width: 360px; padding-bottom: 24px; position: absolute; right: 0; } - .product-detail-close { + .product-detail-aside-close { background: var(--white); width: 14px; height: 14px; @@ -40,31 +40,31 @@ padding: 12px; border-radius: 50%; } - .product-detail-close:hover { + .product-detail-aside-close:hover { cursor: pointer; } - .product-detail > img:nth-child(2) { + .product-detail-aside > img:nth-child(2) { width: 100%; height: 360px; object-fit: cover; border-radius: 0 0 20px 20px; } - .product-info { + .product-info-aside { margin: 24px 24px 0 24px; } - .product-info p:nth-child(1) { + .product-info-aside p:nth-child(1) { font-weight: bold; font-size: var(--md); margin-top: 0; margin-bottom: 4px; } - .product-info p:nth-child(2) { + .product-info-aside p:nth-child(2) { color: var(--very-light-pink); font-size: var(--md); margin-top: 0; margin-bottom: 36px; } - .product-info p:nth-child(3) { + .product-info-aside p:nth-child(3) { color: var(--very-light-pink); font-size: var(--sm); margin-top: 0; @@ -87,19 +87,19 @@ justify-content: center; } @media (max-width: 640px) { - .product-detail { + .product-detail-aside { width: 100%; } } -