From e7553de3793964ffeec2c80b45097ed2670defd4 Mon Sep 17 00:00:00 2001 From: BryanPanesso Date: Thu, 6 Jun 2024 19:25:05 -0500 Subject: [PATCH 1/3] Integracion del menu en desktop --- .gitignore | 245 --------------------------- index.html | 162 +++--------------- main.js | 121 +------------- styles.css | 483 +++++++++++++---------------------------------------- 4 files changed, 144 insertions(+), 867 deletions(-) delete mode 100644 .gitignore diff --git a/.gitignore b/.gitignore deleted file mode 100644 index 3a2dc765f..000000000 --- a/.gitignore +++ /dev/null @@ -1,245 +0,0 @@ - -# Created by https://www.toptal.com/developers/gitignore/api/macos,windows,linux,visualstudiocode,node -# Edit at https://www.toptal.com/developers/gitignore?templates=macos,windows,linux,visualstudiocode,node - -### Linux ### -*~ - -# temporary files which can be created if a process still has a handle open of a deleted file -.fuse_hidden* - -# KDE directory preferences -.directory - -# Linux trash folder which might appear on any partition or disk -.Trash-* - -# .nfs files are created when an open file is removed but is still being accessed -.nfs* - -### macOS ### -# General -.DS_Store -.AppleDouble -.LSOverride - -# Icon must end with two \r -Icon - - -# Thumbnails -._* - -# Files that might appear in the root of a volume -.DocumentRevisions-V100 -.fseventsd -.Spotlight-V100 -.TemporaryItems -.Trashes -.VolumeIcon.icns -.com.apple.timemachine.donotpresent - -# Directories potentially created on remote AFP share -.AppleDB -.AppleDesktop -Network Trash Folder -Temporary Items -.apdisk - -### macOS Patch ### -# iCloud generated files -*.icloud - -### Node ### -# Logs -logs -*.log -npm-debug.log* -yarn-debug.log* -yarn-error.log* -lerna-debug.log* -.pnpm-debug.log* - -# Diagnostic reports (https://nodejs.org/api/report.html) -report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json - -# Runtime data -pids -*.pid -*.seed -*.pid.lock - -# Directory for instrumented libs generated by jscoverage/JSCover -lib-cov - -# Coverage directory used by tools like istanbul -coverage -*.lcov - -# nyc test coverage -.nyc_output - -# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) -.grunt - -# Bower dependency directory (https://bower.io/) -bower_components - -# node-waf configuration -.lock-wscript - -# Compiled binary addons (https://nodejs.org/api/addons.html) -build/Release - -# Dependency directories -node_modules/ -jspm_packages/ - -# Snowpack dependency directory (https://snowpack.dev/) -web_modules/ - -# TypeScript cache -*.tsbuildinfo - -# Optional npm cache directory -.npm - -# Optional eslint cache -.eslintcache - -# Optional stylelint cache -.stylelintcache - -# Microbundle cache -.rpt2_cache/ -.rts2_cache_cjs/ -.rts2_cache_es/ -.rts2_cache_umd/ - -# Optional REPL history -.node_repl_history - -# Output of 'npm pack' -*.tgz - -# Yarn Integrity file -.yarn-integrity - -# dotenv environment variable files -.env -.env.development.local -.env.test.local -.env.production.local -.env.local - -# parcel-bundler cache (https://parceljs.org/) -.cache -.parcel-cache - -# Next.js build output -.next -out - -# Nuxt.js build / generate output -.nuxt -dist - -# Gatsby files -.cache/ -# Comment in the public line in if your project uses Gatsby and not Next.js -# https://nextjs.org/blog/next-9-1#public-directory-support -# public - -# vuepress build output -.vuepress/dist - -# vuepress v2.x temp and cache directory -.temp - -# Docusaurus cache and generated files -.docusaurus - -# Serverless directories -.serverless/ - -# FuseBox cache -.fusebox/ - -# DynamoDB Local files -.dynamodb/ - -# TernJS port file -.tern-port - -# Stores VSCode versions used for testing VSCode extensions -.vscode-test - -# yarn v2 -.yarn/cache -.yarn/unplugged -.yarn/build-state.yml -.yarn/install-state.gz -.pnp.* - -### Node Patch ### -# Serverless Webpack directories -.webpack/ - -# Optional stylelint cache - -# SvelteKit build / generate output -.svelte-kit - -### VisualStudioCode ### -.vscode -.vscode/* -!.vscode/settings.json -!.vscode/tasks.json -!.vscode/launch.json -!.vscode/extensions.json -!.vscode/*.code-snippets - -# Local History for Visual Studio Code -.history/ - -# Built Visual Studio Code Extensions -*.vsix - -### VisualStudioCode Patch ### -# Ignore all local history of files -.history -.ionide - -# Support for Project snippet scope -.vscode/*.code-snippets - -# Ignore code-workspaces -*.code-workspace - -### Windows ### -# Windows thumbnail cache files -Thumbs.db -Thumbs.db:encryptable -ehthumbs.db -ehthumbs_vista.db - -# Dump file -*.stackdump - -# Folder config file -[Dd]esktop.ini - -# Recycle Bin used on file shares -$RECYCLE.BIN/ - -# Windows Installer files -*.cab -*.msi -*.msix -*.msm -*.msp - -# Windows shortcuts -*.lnk - -# End of https://www.toptal.com/developers/gitignore/api/macos,windows,linux,visualstudiocode,node diff --git a/index.html b/index.html index 8e91d429a..5d13fe5b1 100644 --- a/index.html +++ b/index.html @@ -4,14 +4,16 @@ - + + - YardSale: tienda online de cositas chidas + YardSale: Tienda virtual + - - - - -
-
- - - -
-
- - + \ No newline at end of file diff --git a/main.js b/main.js index 7ebb1bb3e..1736d2a4c 100644 --- a/main.js +++ b/main.js @@ -1,119 +1,10 @@ -const menuEmail = document.querySelector('.navbar-email'); -const menuHamIcon = document.querySelector('.menu'); -const menuCarritoIcon = document.querySelector('.navbar-shopping-cart'); -const productDetailCloseIcon = document.querySelector('.product-detail-close') -const desktopMenu = document.querySelector('.desktop-menu'); -const mobileMenu = document.querySelector('.mobile-menu'); -const shoppingCartContainer = document.querySelector('#shoppingCartContainer'); -const productDetailContainer = document.querySelector('#productDetail'); -const cardsContainer = document.querySelector('.cards-container'); +const menuEmail = document.querySelector(".navbar-email"); +const desktopMenu = document.querySelector(".desktop-menu"); -menuEmail.addEventListener('click', toggleDesktopMenu); -menuHamIcon.addEventListener('click', toggleMobileMenu); -menuCarritoIcon.addEventListener('click', toggleCarritoAside); -productDetailCloseIcon.addEventListener('click', closeProductDetailAside); +menuEmail.addEventListener('click', ToggleDesktopMenu); -function toggleDesktopMenu() { - const isAsideClosed = shoppingCartContainer.classList.contains('inactive'); +function ToggleDesktopMenu() { - if (!isAsideClosed) { - shoppingCartContainer.classList.add('inactive'); - } - - desktopMenu.classList.toggle('inactive'); -} + desktopMenu.classList.toggle("inactive"); -function toggleMobileMenu() { - const isAsideClosed = shoppingCartContainer.classList.contains('inactive'); - - if (!isAsideClosed) { - shoppingCartContainer.classList.add('inactive'); - } - - closeProductDetailAside(); - - mobileMenu.classList.toggle('inactive'); -} - -function toggleCarritoAside() { - const isMobileMenuClosed = mobileMenu.classList.contains('inactive'); - - if (!isMobileMenuClosed) { - mobileMenu.classList.add('inactive'); - } - - const isProductDetailClosed = productDetailContainer.classList.contains('inactive'); - - if (!isProductDetailClosed) { - productDetailContainer.classList.add('inactive'); - } - - shoppingCartContainer.classList.toggle('inactive'); -} - -function openProductDetailAside() { - shoppingCartContainer.classList.add('inactive'); - productDetailContainer.classList.remove('inactive'); -} - -function closeProductDetailAside() { - productDetailContainer.classList.add('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: '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', -}); - -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); - productImg.addEventListener('click', openProductDetailAside); - - 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 7228eedc8..ce0fd5615 100644 --- a/styles.css +++ b/styles.css @@ -1,380 +1,135 @@ -/* General */ :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; -} - - -/* Navbar (general) */ -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; -} - -/* Menu en desktop */ -.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; -} - -/* Menu en mobile */ -.mobile-menu { - background-color: var(--white); - position: absolute; - top: 60px; - left: 0; - width: 100%; - 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 y carrito) */ -aside { - background-color: var(--white); - width: 360px; - box-sizing: border-box; - position: absolute; - right: 0; -} - -/* ShoppingCart */ -#shoppingCartContainer { - padding: 0 24px; -} -.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; -} - -/* ProductDetail */ -.product-detail-close { - background: var(--white); - width: 14px; - height: 14px; - position: absolute; - top: 24px; - left: 24px; - z-index: 2; - padding: 12px; - border-radius: 50%; -} -.product-detail-close:hover { - cursor: pointer; -} -#productDetail > img:nth-child(2) { - width: 100%; - height: 360px; - object-fit: cover; - border-radius: 0 0 20px 20px; -} -#productDetail .product-info { - margin: 24px 24px 0 24px; -} -#productDetail .product-info p:nth-child(1) { - font-weight: bold; - font-size: var(--md); - margin-top: 0; - margin-bottom: 4px; -} -#productDetail .product-info p:nth-child(2) { - color: var(--very-light-pink); - font-size: var(--md); - margin-top: 0; - margin-bottom: 36px; -} -#productDetail .product-info p:nth-child(3) { - color: var(--very-light-pink); - font-size: var(--sm); - margin-top: 0; - margin-bottom: 36px; -} -.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; -} -.add-to-cart-button { - display: flex; - align-items: center; - justify-content: center; -} - - -/* 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-card .product-info { - display: flex; - justify-content: space-between; - align-items: center; - margin-top: 12px; -} -.product-card .product-info figure { - margin: 0; -} -.product-card .product-info figure img { - width: 35px; - height: 35px; -} -.product-card .product-info div p:nth-child(1) { - font-weight: bold; - font-size: var(--md); - margin-top: 0; - margin-bottom: 4px; -} -.product-card .product-info div p:nth-child(2) { - font-size: var(--sm); - margin-top: 0; - margin-bottom: 0; - color: var(--very-light-pink); -} + --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; + } -@media (max-width: 640px) { + /* Navbar */ + nav { + display: flex; + justify-content: space-between; + padding: 0 24px; + border-bottom: 1px solid var(--very-light-pink); + } .menu { - display: block; + 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 { - display: none; + 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 { - display: none; + color: var(--very-light-pink); + cursor: pointer; + font-size: var(--sm); + margin-right: 12px; } - .desktop-menu { - display: none; + .navbar-shopping-cart { + position: relative; } - - aside { - width: 100%; + .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; } - .cards-container { - grid-template-columns: repeat(auto-fill, 140px); + /* Desktop Menu */ + .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; } - .product-card { - width: 140px; + .desktop-menu ul { + list-style: none; + padding: 0; + margin: 0; } - .product-card img { - width: 140px; - height: 140px; + .desktop-menu ul li { + text-align: end; } -} - -@media (min-width: 641px) { - .mobile-menu { - display: none; + .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 1b150998db18c248b3d194d39ee567eac4d03b7b Mon Sep 17 00:00:00 2001 From: BryanPanesso Date: Fri, 7 Jun 2024 16:07:29 -0500 Subject: [PATCH 2/3] Carrito de compras --- index.html | 92 ++++++++++++++++++++++++++++++++ main.js | 34 ++++++++++++ styles.css | 154 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 280 insertions(+) diff --git a/index.html b/index.html index 5d13fe5b1..a848f8695 100644 --- a/index.html +++ b/index.html @@ -70,8 +70,100 @@ +
+ + + + + +
+ + + \ No newline at end of file diff --git a/main.js b/main.js index 1736d2a4c..9a1641f3a 100644 --- a/main.js +++ b/main.js @@ -1,10 +1,44 @@ 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 isAsideClosed = aside.classList.contains("inactive"); + + if(!isAsideClosed){ + aside.classList.add("inactive"); + } desktopMenu.classList.toggle("inactive"); +} + +function ToggleMobileMenu() { +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 ce0fd5615..8dbc66524 100644 --- a/styles.css +++ b/styles.css @@ -1,3 +1,4 @@ +/*Estilos generales*/ :root { --white: #FFFFFF; --black: #000000; @@ -82,6 +83,36 @@ align-items: center; } +.mobile-menu { + 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; + } + + /* Desktop Menu */ .desktop-menu { position: absolute; @@ -121,6 +152,116 @@ display: inline-block; } + /* Mobile Menu */ + + .mobile-menu { + background-color: var(--white); + 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; + } + + /* 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 { @@ -132,4 +273,17 @@ .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 623e0598ad4b83af4e9c00c108b39501db138316 Mon Sep 17 00:00:00 2001 From: BryanPanesso Date: Fri, 7 Jun 2024 16:53:50 -0500 Subject: [PATCH 3/3] Lista de productos con array --- index.html | 18 +++++++++++++++ main.js | 67 +++++++++++++++++++++++++++++++++++++++++++++++++++++- styles.css | 56 ++++++++++++++++++++++++++++++++++++++++++++- 3 files changed, 139 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index a848f8695..cb0368d23 100644 --- a/index.html +++ b/index.html @@ -164,6 +164,24 @@ +
+
+ + +
+
+ \ No newline at end of file diff --git a/main.js b/main.js index 9a1641f3a..5facdeb23 100644 --- a/main.js +++ b/main.js @@ -4,6 +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"); menuEmail.addEventListener('click', ToggleDesktopMenu); menuHamIcon.addEventListener('click', ToggleMobileMenu); @@ -41,4 +42,68 @@ 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: "Computador", + 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: "Televisor", + price: 100, + image: "https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940", +}); + +function renderProduct(arr){ +for (product of productList){ + + 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("div"); + productPrice.innerText = "$" + product.price; + + const productName = document.createElement("div"); + productName.inertText = 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); +} +} + +renderProduct(productList); \ No newline at end of file diff --git a/styles.css b/styles.css index 8dbc66524..954a6d4f6 100644 --- a/styles.css +++ b/styles.css @@ -263,6 +263,50 @@ height: 50px; } + /* Product list */ + .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) { .menu { display: block; @@ -279,7 +323,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) {