From a11d91ed35cace2b9579a60c601fcca838359918 Mon Sep 17 00:00:00 2001 From: Daniel Socorro Date: Fri, 26 Aug 2022 11:32:56 -0400 Subject: [PATCH 1/5] fusion-front-end-javascript --- index.html | 69 +++++++++++++++++++++++++++ main.js | 8 ++++ style.css | 133 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 210 insertions(+) create mode 100644 index.html create mode 100644 main.js create mode 100644 style.css diff --git a/index.html b/index.html new file mode 100644 index 000000000..08f94675e --- /dev/null +++ b/index.html @@ -0,0 +1,69 @@ + + + + + + + YardSale Online Store + + + + + + + + + + \ No newline at end of file diff --git a/main.js b/main.js new file mode 100644 index 000000000..4c25f6018 --- /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/style.css b/style.css new file mode 100644 index 000000000..3e73680ca --- /dev/null +++ b/style.css @@ -0,0 +1,133 @@ +: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 { + 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; + 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 80238bf246a09b9af24b9a6c9dc0bf2e421d434f Mon Sep 17 00:00:00 2001 From: Daniel Socorro Date: Fri, 26 Aug 2022 14:24:52 -0400 Subject: [PATCH 2/5] adding shopping cart & burger menu buttons --- index.html | 90 +++++++++++++++++++++++++++++++++++- main.js | 40 ++++++++++++++-- style.css | 132 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 256 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index 08f94675e..68ac222a5 100644 --- a/index.html +++ b/index.html @@ -38,7 +38,6 @@ -
  • platzi@example.com
    • @@ -63,7 +62,96 @@
+
+ + + + +
+ \ No newline at end of file diff --git a/main.js b/main.js index 4c25f6018..069930f1a 100644 --- a/main.js +++ b/main.js @@ -1,8 +1,38 @@ -const menuEmail = document.querySelector('.navbar-email'); -const desktopMenu = document.querySelector('.desktop-menu'); +const menuEmail = document.querySelector(".navbar-email"); +const burgerMenu = document.querySelector(".menu"); +const iconCardtMenu = 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); +menuEmail.addEventListener("click", toggleDesktopMenu); +burgerMenu.addEventListener("click", toggleMobileMenu); +iconCardtMenu.addEventListener("click", toggleIconCartMenu); function toggleDesktopMenu() { - desktopMenu.classList.toggle('inactive') -} \ No newline at end of file + const isIconCardtMenuClosed = aside.classList.contains("inactive"); + + if (!isIconCardtMenuClosed) { + aside.classList.add("inactive"); + } + mobileMenu.classList.toggle("inactive"); + desktopMenu.classList.toggle("inactive"); +} + +function toggleMobileMenu() { + const isIconCardtMenuClosed = aside.classList.contains("inactive"); + + if (!isIconCardtMenuClosed) { + aside.classList.add("inactive"); + } + mobileMenu.classList.toggle("inactive"); +} + +function toggleIconCartMenu() { + const isMobileMenuClosed = mobileMenu.classList.contains("inactive"); + + if (!isMobileMenuClosed) { + mobileMenu.classList.add("inactive"); + } + aside.classList.toggle("inactive"); +} diff --git a/style.css b/style.css index 3e73680ca..f5cb2fe88 100644 --- a/style.css +++ b/style.css @@ -1,3 +1,5 @@ +/* General -- Settings */ + :root { --white: #FFFFFF; --black: #000000; @@ -13,6 +15,8 @@ font-family: 'Quicksand', sans-serif; } + + /* Nav - Bar */ .inactive { display: none; } @@ -81,6 +85,8 @@ align-items: center; } + /* Desktop - Menu */ + .desktop-menu { position: absolute; top: 60px; @@ -119,10 +125,125 @@ display: inline-block; } + /* Mobile - Menu */ + + .mobile-menu { + position: absolute; + background-color: var(--white); + 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; + } + + /* Aside - Product - Detail */ + + + .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; + } + +/* Responsive - Design */ @media (max-width: 640px) { .menu { display: block; + cursor: pointer; } .navbar-left ul { display: none; @@ -130,4 +251,15 @@ .navbar-email { display: none; } + .desktop-menu { + display: none; + } + .product-detail { + width: 100%; + } + } + @media (min-width: 641px) { + .mobile-menu { + display: none; + } } \ No newline at end of file From 734de28129b0ff2ba675e3ae5b1d2cda72e184a6 Mon Sep 17 00:00:00 2001 From: Daniel Socorro Date: Fri, 26 Aug 2022 19:12:07 -0400 Subject: [PATCH 3/5] adding product lists --- index.html | 20 +++ main.js | 61 +++++++++ style.css | 395 ++++++++++++++++++++++++++++++++++------------------- 3 files changed, 332 insertions(+), 144 deletions(-) diff --git a/index.html b/index.html index 68ac222a5..ab694ce97 100644 --- a/index.html +++ b/index.html @@ -152,6 +152,26 @@ + +
+
+ + + + +
+
\ No newline at end of file diff --git a/main.js b/main.js index 069930f1a..b545c6f56 100644 --- a/main.js +++ b/main.js @@ -4,6 +4,7 @@ const iconCardtMenu = 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); burgerMenu.addEventListener("click", toggleMobileMenu); @@ -36,3 +37,63 @@ function toggleIconCartMenu() { } aside.classList.toggle("inactive"); } + +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: 'TV', + price: 420, + image:'https://www.ikea.com/cl/es/images/products/lack-rack-de-tv-negro__0955265_pe803705_s5.jpg?f=xxs', +}); + +productList.push({ + name: 'Mac', + price: 700, + image:'https://d500.epimg.net/cincodias/imagenes/2022/02/21/gadgets/1645453218_839118_1645453324_noticia_normal.jpg', +}); + +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); + } +} + +renderProducts(productList); \ No newline at end of file diff --git a/style.css b/style.css index f5cb2fe88..46412ce1c 100644 --- a/style.css +++ b/style.css @@ -9,68 +9,79 @@ --sm: 14px; --md: 16px; --lg: 18px; - } - body { +} + +body { margin: 0; font-family: 'Quicksand', sans-serif; - } +} - /* Nav - Bar */ +/* Nav - Bar */ .inactive { display: none; } - nav { +nav { display: flex; justify-content: space-between; padding: 0 24px; border-bottom: 1px solid var(--very-light-pink); - } - .menu { +} + +.menu { display: none; - } - .logo { +} + +.logo { width: 100px; - } - .navbar-left ul, - .navbar-right ul { +} + +.navbar-left ul, +.navbar-right ul { list-style: none; padding: 0; margin: 0; display: flex; align-items: center; height: 60px; - } - .navbar-left { +} + +.navbar-left { display: flex; - } - .navbar-left ul { +} + +.navbar-left ul { margin-left: 12px; - } - .navbar-left ul li a, - .navbar-right ul li a { +} + +.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 { +} + +.navbar-left ul li a:hover, +.navbar-right ul li a:hover { border: 1px solid var(--hospital-green); color: var(--hospital-green); - } - .navbar-email { +} + +.navbar-email { cursor: pointer; color: var(--very-light-pink); font-size: var(--sm); margin-right: 12px; - } - .navbar-shopping-cart { +} + +.navbar-shopping-cart { position: relative; - } - .navbar-shopping-cart div { +} + +.navbar-shopping-cart div { width: 16px; height: 16px; background-color: var(--hospital-green); @@ -83,11 +94,11 @@ display: flex; justify-content: center; align-items: center; - } +} - /* Desktop - Menu */ +/* Desktop - Menu */ - .desktop-menu { +.desktop-menu { position: absolute; top: 60px; right: 60px; @@ -97,169 +108,265 @@ 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 */ - .mobile-menu { +.mobile-menu { position: absolute; background-color: var(--white); top: 60px; padding: 24px; - } - .mobile-menu a { +} + +.mobile-menu a { text-decoration: none; color: var(--black); font-weight: bold; /* margin-bottom: 24px; */ - } - .mobile-menu ul { +} + +.mobile-menu ul { padding: 0; margin: 24px 0 0; list-style: none; - } - .mobile-menu ul:nth-child(1) { +} + +.mobile-menu ul:nth-child(1) { border-bottom: 1px solid var(--very-light-pink); - } - .mobile-menu ul li { +} + +.mobile-menu ul li { margin-bottom: 24px; - } - .email { +} + +.email { font-size: var(--sm); font-weight: 300 !important; - } - .sign-out { +} + +.sign-out { font-size: var(--sm); color: var(--hospital-green) !important; - } +} - /* Aside - Product - Detail */ +/* Aside - Product - Detail */ - .product-detail { +.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; - } + 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) {} /* Responsive - Design */ - @media (max-width: 640px) { +@media (max-width: 640px) { .menu { - display: block; - cursor: pointer; + display: block; + cursor: pointer; } + .navbar-left ul { - display: none; + display: none; } + .navbar-email { - display: none; + display: none; } + .desktop-menu { display: none; } + .product-detail { width: 100%; - } - } - @media (min-width: 641px) { + } + + .cards-container { + grid-template-columns: repeat(auto-fill, 140px); + } + + .product-card { + width: 140px; + } + + .product-card img { + width: 140px; + height: 140px; + } +} + +@media (min-width: 641px) { .mobile-menu { display: none; } - } \ No newline at end of file +} \ No newline at end of file From 8baaf6ee95950c159e1591eab6008febcc2f749b Mon Sep 17 00:00:00 2001 From: Daniel Socorro Date: Fri, 26 Aug 2022 19:58:13 -0400 Subject: [PATCH 4/5] fixing experience pop-ups menu --- index.html | 18 +++++++++++- main.js | 12 ++++---- style.css | 83 ++++++++++++++++++++++++++++++++++++++++++++++++------ 3 files changed, 97 insertions(+), 16 deletions(-) diff --git a/index.html b/index.html index ab694ce97..3bd4b7c0b 100644 --- a/index.html +++ b/index.html @@ -105,7 +105,7 @@ -