From 3a096c72316161c192feb46120ef7c83cee2fce3 Mon Sep 17 00:00:00 2001 From: krambler Date: Mon, 12 Sep 2022 23:29:48 +0200 Subject: [PATCH 1/4] Fusion menu desktop --- .vscode/settings.json | 3 + index.html | 75 ++++++++++++++++++++++++ main.js | 8 +++ style.css | 130 ++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 216 insertions(+) create mode 100644 .vscode/settings.json 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 000000000..6f3a2913e --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 000000000..381607ace --- /dev/null +++ b/index.html @@ -0,0 +1,75 @@ + + + + + + + + + + + Wellcome to the DNFTs to shirts revolution + + + + + + + + + + + \ No newline at end of file diff --git a/main.js b/main.js new file mode 100644 index 000000000..eff608f05 --- /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..bcd5e59d5 --- /dev/null +++ b/style.css @@ -0,0 +1,130 @@ +: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; + cursor: pointer; + } + .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; + } + + } + .desktop-menu { + position: absolute; + background: var(--white); + 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; + } + + .inactive { + display: none; + } \ No newline at end of file From 550ecb6c9fb19aa60b4f011dd1671fe5830c2bef Mon Sep 17 00:00:00 2001 From: krambler Date: Tue, 13 Sep 2022 00:39:53 +0200 Subject: [PATCH 2/4] Completado Menu --- index.html | 96 +++++++++++++++++++++++++++++++++++ main.js | 37 ++++++++++++++ style.css | 143 +++++++++++++++++++++++++++++++++++++++++++++++++++-- 3 files changed, 272 insertions(+), 4 deletions(-) diff --git a/index.html b/index.html index 381607ace..20993cf6a 100644 --- a/index.html +++ b/index.html @@ -65,11 +65,107 @@ + + +
+ + + + + +
+ + + + + \ No newline at end of file diff --git a/main.js b/main.js index eff608f05..f93ec104b 100644 --- a/main.js +++ b/main.js @@ -1,8 +1,45 @@ const menuEmail = document.querySelector('.navbar-email'); const desktopMenu = document.querySelector('.desktop-menu'); +const menuHamIcon = document.querySelector('.menu'); +const mobileMenu = document.querySelector('.mobile-menu'); +const menuCarritoIcon = document.querySelector('.navbar-shopping-cart'); +const aside = document.querySelector('.product-detail'); + + + + menuEmail.addEventListener('click', toggleDesktopMenu); +menuHamIcon.addEventListener('click', toggleMobileMenu); +menuCarritoIcon.addEventListener('click', toggleCarritoAside); + + function toggleDesktopMenu() { + const isAsaidClosed = aside.classList.contains('inactive'); + if (!isAsaidClosed) { + aside.classList.add('inactive'); + } desktopMenu.classList.toggle('inactive'); +} + +function toggleMobileMenu() { + const isAsaidClosed = aside.classList.contains('inactive'); + + if (!isAsaidClosed) { + 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/style.css b/style.css index bcd5e59d5..14c0e47ab 100644 --- a/style.css +++ b/style.css @@ -18,6 +18,15 @@ padding: 0 24px; border-bottom: 1px solid var(--very-light-pink); } + + .inactive { + display: none; + } + + + + /*Menu principal*/ + .menu { display: none; } @@ -77,6 +86,7 @@ } @media (max-width: 640px) { .menu { + cursor: pointer; display: block; } .navbar-left ul { @@ -85,8 +95,22 @@ .navbar-email { display: none; } - + .desktop-menu { + display: none; + } + .product-detail { + width: 100%; + } + } + + @media (min-width: 641px) { + .mobile-menu{ + display: none; + } + } + + /*---------------Menu en Desktop.-----------*/ .desktop-menu { position: absolute; background: var(--white); @@ -125,6 +149,117 @@ display: inline-block; } - .inactive { - display: none; - } \ No newline at end of file + + + /*---------------Menu en mobile.-----------*/ + .mobile-menu { + background-color: var(--white); + position: absolute; + top: 40px; + left: 10px; + 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; + } + + +/*------------Carrito de compras-------*/ +.product-detail { + background-color: var(--white); + width: 360px; + padding: 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; +} + From f675fb8a1761fdd84374d89b99b4c576bf480bbc Mon Sep 17 00:00:00 2001 From: krambler Date: Wed, 14 Sep 2022 00:42:53 +0200 Subject: [PATCH 3/4] Listing of products from array done --- index.html | 21 +++++++++++++++ main.js | 77 ++++++++++++++++++++++++++++++++++++++++++++++++++++-- style.css | 55 +++++++++++++++++++++++++++++++++++++- 3 files changed, 150 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index 20993cf6a..7f41341b5 100644 --- a/index.html +++ b/index.html @@ -165,6 +165,27 @@ + +
+
+ + + + + +
+
diff --git a/main.js b/main.js index f93ec104b..5a8239299 100644 --- a/main.js +++ b/main.js @@ -4,7 +4,7 @@ const menuHamIcon = document.querySelector('.menu'); const mobileMenu = document.querySelector('.mobile-menu'); const menuCarritoIcon = document.querySelector('.navbar-shopping-cart'); const aside = document.querySelector('.product-detail'); - +const cardsContainer = document.querySelector('.cards-container'); @@ -42,4 +42,77 @@ function toggleCarritoAside() { aside.classList.toggle('inactive'); -} \ No newline at end of file +} + + + +const productList = []; +productList.push({ + name: 'FAJC 5832', + precio: 24, + image: 'https://lh3.googleusercontent.com/4P9eskycIJHwokZ6p_0420LNjHGImMqxveKz2uHKjFnOkb2t2cOozzlr9KKxH05dQW7RH0fIDiZ04lLQ-5AWJk0kgkKn_4OVSOLf=w600', +}) +productList.push({ + name: 'FAJC 5833', + precio: 10, + image: 'https://lh3.googleusercontent.com/8II5BvLgWgC9C4EDomKV_f61zm1bvqf21173ydEFagWhojvUun8WTXJQ8Iq_-oewPqNzknGIiDpLcil3_sneeOF-RD5r5OaK-aaM=w600', +}) +productList.push({ + name: 'FAJC 5834', + precio: 40, + image: 'https://lh3.googleusercontent.com/59TM6D7ZjAIF_32eLG73HiX3yrACEo7ZbMTVIK5_F5sJ2DXzhbY2EB9AKgZEcERTBkqldp2-yIVT42myeNLscRp-su4YCL0FM6V1=w600', +}) +productList.push({ + name: 'FAJC 5836', + precio: 120, + image: 'https://lh3.googleusercontent.com/9vnsILutDDoPO6z0T06nLlaxNRgfI12Ea-FPDxMsap5XYTeehaBjNG9VUf7An5IsdXtS6vBH-R28Y0NQqslLP2nsSCYqJCe0UYnNTw=w600', +}) +productList.push({ + name: 'FAJC 5837', + precio: 40, + image: 'https://lh3.googleusercontent.com/oprzLI6Ffxi0eSWRoIcy5we4NB3aJ8CiFuzZBfRjA_mkEONyC_aoG32eHZ6TQb--I6bR9V9J-lp2YSgSscUc0MoXXh_lOFJyYpAM=w600', +}) +productList.push({ + name: 'FAJC 5839', + precio: 16, + image: 'https://lh3.googleusercontent.com/L4YR1Fq2kchlMJUinudpqgHF8X78TYowFyyjIlyfhop4klqWxPx5gMelyCoSR8lV1AX9sF2x_Q8hb7SQMPhHGpso9aQ81B6udSaimA=w600', +}) + +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.precio; + const productName = document.createElement('p'); + productName.innerText = product.name; + + productInfoDiv.appendChild(productPrice); + productInfoDiv.appendChild(productName); + + const porductInfoFigure = document.createElement('figure'); + const porductImgCart = document.createElement('img'); + porductImgCart.setAttribute('src','./icons/bt_add_to_cart.svg'); + + porductInfoFigure.appendChild(porductImgCart); + + productInfo.appendChild(productInfoDiv); + productInfo.appendChild(porductInfoFigure); + + 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 14c0e47ab..b2e0f76be 100644 --- a/style.css +++ b/style.css @@ -1,5 +1,5 @@ :root { - --white: #FFFFFF; + --white: #fffff; --black: #000000; --very-light-pink: #C7C7C7; --text-input-field: #F7F7F7; @@ -101,6 +101,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) { @@ -263,3 +273,46 @@ height: 50px; } +/* Listado de productos, tarjetas de productos*/ + +.cards-container { + margin-top: 30px; + 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: 15px; + 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); +} From 911defb78aa8dea7bd46e074cd7b8bdeebb6351d Mon Sep 17 00:00:00 2001 From: krambler Date: Wed, 21 Sep 2022 23:22:11 +0200 Subject: [PATCH 4/4] actualizacion menu --- index.html | 18 ++++++++++- main.js | 12 +++---- style.css | 92 ++++++++++++++++++++++++++++++++++++++++++++++++------ 3 files changed, 105 insertions(+), 17 deletions(-) diff --git a/index.html b/index.html index 7f41341b5..295f385b1 100644 --- a/index.html +++ b/index.html @@ -49,6 +49,7 @@ +
    @@ -115,7 +116,7 @@ -