From 9366f10d23179ec2ccb117da260ab6dd397032f4 Mon Sep 17 00:00:00 2001 From: EllieV Date: Thu, 21 Jul 2022 15:47:16 -0500 Subject: [PATCH 1/5] =?UTF-8?q?He=20integrado=20el=20c=C3=B3digo=20del=20n?= =?UTF-8?q?av=20y=20el=20aside=20completamente.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .vscode/settings.json | 22 ++++ index.html | 163 +++++++++++++++++++++++++++ main.js | 44 ++++++++ styles.css | 256 ++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 485 insertions(+) create mode 100644 .vscode/settings.json create mode 100644 index.html create mode 100644 main.js create mode 100644 styles.css diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 000000000..f07447e30 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,22 @@ +{ + "workbench.colorCustomizations": { + "activityBar.activeBackground": "#abdf9e", + "activityBar.activeBorder": "#6f82d0", + "activityBar.background": "#abdf9e", + "activityBar.foreground": "#15202b", + "activityBar.inactiveForeground": "#15202b99", + "activityBarBadge.background": "#6f82d0", + "activityBarBadge.foreground": "#15202b", + "sash.hoverBorder": "#abdf9e", + "statusBar.background": "#8ad278", + "statusBar.foreground": "#15202b", + "statusBarItem.hoverBackground": "#69c552", + "statusBarItem.remoteBackground": "#8ad278", + "statusBarItem.remoteForeground": "#15202b", + "titleBar.activeBackground": "#8ad278", + "titleBar.activeForeground": "#15202b", + "titleBar.inactiveBackground": "#8ad27899", + "titleBar.inactiveForeground": "#15202b99" + }, + "peacock.color": "#8ad278" +} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 000000000..53d53b2c1 --- /dev/null +++ b/index.html @@ -0,0 +1,163 @@ + + + + + + + Yard Sale: Todo lo que no sabías que querías. + + + + + + + + + + + + + \ No newline at end of file diff --git a/main.js b/main.js new file mode 100644 index 000000000..0dbf8db37 --- /dev/null +++ b/main.js @@ -0,0 +1,44 @@ +const menuEmail = document.querySelector('.navbar-email'); +const desktopMenu = document.querySelector('.desktop-menu'); +const HamburgerIcon = document.querySelector('.menu'); +const mobileMenu = document.querySelector('.mobile-menu'); +const CartIcon = document.querySelector('.navbar-shopping-cart'); +const aside = document.querySelector('.product-detail'); + +menuEmail.addEventListener('click',toggleDesktopMenu); +HamburgerIcon.addEventListener('click', toggleMobileMenu); +CartIcon.addEventListener('click', toggleAsideCart); + + +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 toggleAsideCart() { + + const isMobileMenuClosed = mobileMenu.classList.contains('inactive'); + const isDesktopMenuClosed = desktopMenu.classList.contains('inactive'); + + if (!isMobileMenuClosed) { + mobileMenu.classList.add('inactive'); + }else if (!isDesktopMenuClosed) { + desktopMenu.classList.add('inactive'); + } + + aside.classList.toggle('inactive'); +} diff --git a/styles.css b/styles.css new file mode 100644 index 000000000..d2d1b9a03 --- /dev/null +++ b/styles.css @@ -0,0 +1,256 @@ +/* Estilos GENERALES */ +: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; + } + /* Estilos de NAVBAR */ + 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; + } + + /* Estilos de MENUS */ + /* Estilo DESKTOP */ + .desktop-menu { + position: absolute; + top: 60px; + right: 20px; + 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; + } + /* Estilo Mobile */ + .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; + } + /* Estilos 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 query mobile */ + @media (max-width: 640px) { + .menu{ + display: block; + } + .navbar-left ul , .navbar-email, .desktop-menu { + display: none; + } + /* .navbar-email { + display: none; + } + .desktop-menu{ + display: none; + } */ + .product-detail { + width: 100%; + } + } + + /* media query escritorio */ + @media (min-width: 641px) { + .mobile-menu{ + display: none; + } + } From 8cb17acdcd2bc93916507b385a4220ffd3000599 Mon Sep 17 00:00:00 2001 From: EllieV Date: Sat, 23 Jul 2022 09:44:40 -0500 Subject: [PATCH 2/5] =?UTF-8?q?Integr=C3=A9=20la=20lista=20de=20productos.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- index.html | 17 +++++++++++ main.js | 88 +++++++++++++++++++++++++++++++++++++++++++++++++++++- styles.css | 62 +++++++++++++++++++++++++++++++++----- 3 files changed, 159 insertions(+), 8 deletions(-) diff --git a/index.html b/index.html index 53d53b2c1..cc7f3263f 100644 --- a/index.html +++ b/index.html @@ -158,6 +158,23 @@ +
+
+ +
+ + +
\ No newline at end of file diff --git a/main.js b/main.js index 0dbf8db37..0f1cf6e94 100644 --- a/main.js +++ b/main.js @@ -4,6 +4,7 @@ const HamburgerIcon = document.querySelector('.menu'); const mobileMenu = document.querySelector('.mobile-menu'); const CartIcon = document.querySelector('.navbar-shopping-cart'); const aside = document.querySelector('.product-detail'); +const cardsContainer = document.querySelector('.cards-container'); menuEmail.addEventListener('click',toggleDesktopMenu); HamburgerIcon.addEventListener('click', toggleMobileMenu); @@ -30,7 +31,7 @@ function toggleMobileMenu() { mobileMenu.classList.toggle('inactive'); } function toggleAsideCart() { - + const isMobileMenuClosed = mobileMenu.classList.contains('inactive'); const isDesktopMenuClosed = desktopMenu.classList.contains('inactive'); @@ -42,3 +43,88 @@ function toggleAsideCart() { aside.classList.toggle('inactive'); } +// Lista de productos +const productList = []; +productList.push ({ + name:'Bike', + price: 12700, + image: 'https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940' +}); +productList.push ({ + name:'Bicycle helmet', + price: 1200, + image: 'https://assets.specialized.com/i/specialized/60821-104_HLMT_ALIGN-II-HLMT-MIPS-CE-BLK-BLKREFL-S-M_HERO?bg=rgb(241,241,241)&w=1600&h=900&fmt=auto' +}); +productList.push ({ + name:'Bicycle helmet', + price: 1600, + image: 'https://m.media-amazon.com/images/I/61eExL-rIAL._AC_SL1001_.jpg' +}); +productList.push ({ + name:'Bicycle helmet', + price: 1500, + image: 'https://assets.specialized.com/i/specialized/60822-140_HLMT_CHAMONIX-HLMT-MIPS-CE-MRN-M-L_HERO?bg=rgb(241,241,241)&w=1600&h=900&fmt=auto' +}); +productList.push ({ + name:'Seat', + price: 300, + image: 'https://m.media-amazon.com/images/I/61e+sZ9rgNL._AC_SL1500_.jpg' +}); +productList.push ({ + name:'Tennis Montain Bike', + price: 2200, + image: 'https://assets.adidas.com/images/h_840,f_auto,q_auto,fl_lossy,c_fill,g_auto/8ea578f6c07847fca2d0ac85011d7f1f_9366/Tenis_para_Mountain_Bike_Five_Ten_Freerider_Negro_FW2835_01_standard.jpg' +}); +productList.push ({ + name:'Sunglasses', + price: 800, + image: 'https://cdn.siroko.com/s/files/1/1220/6874/products/gafas-siroko-tech-k3s-london-lateral/1200x/crop_center.jpg?v=1635209602' +}); +productList.push ({ + name:'Sunglasses', + price: 600, + image: 'https://cdn.siroko.com/s/files/1/1220/6874/products/siroko-tech-k3s-clearfog-lente-antiniebla-frontal/1200x/crop_center.jpg?v=1635209603' +}); +productList.push ({ + name:'Bicycle seat bag', + price: 876, + image: 'https://m.media-amazon.com/images/I/81k2Gmal+VL._AC_SL1500_.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 productInfoText = document.createElement('div'); + + const productInfoPrice = document.createElement('p'); + productInfoPrice.innerText = '$' + product.price; + const productInfoName = document.createElement('p'); + productInfoName.innerText = product.name; + + productInfoText.appendChild(productInfoPrice); + productInfoText.appendChild(productInfoName); + + + const productInfoFigure = document.createElement('figure'); + const productInfoIcon = document.createElement('img') + productInfoIcon.setAttribute('src', './icons/bt_add_to_cart.svg'); + + productInfoFigure.appendChild(productInfoIcon); + + productInfo.appendChild(productInfoText); + productInfo.appendChild(productInfoFigure); + + productCard.appendChild(productImg); + productCard.appendChild(productInfo); + cardsContainer.appendChild(productCard); + } +} +renderProducts(productList); diff --git a/styles.css b/styles.css index d2d1b9a03..1401f964e 100644 --- a/styles.css +++ b/styles.css @@ -229,6 +229,50 @@ height: 50px; } + /* Estilos Main container */ + .cards-container { + display: grid; + grid-template-columns: repeat(auto-fill, 240px); + gap: 26px; + place-content: center; + margin: 30px 0; + } + .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 query mobile */ @media (max-width: 640px) { .menu{ @@ -237,15 +281,19 @@ .navbar-left ul , .navbar-email, .desktop-menu { display: none; } - /* .navbar-email { - display: none; - } - .desktop-menu{ - display: none; - } */ .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 query escritorio */ From 1b02c2b7706b33837807c846d9f8651857c13df1 Mon Sep 17 00:00:00 2001 From: EllieV Date: Sat, 23 Jul 2022 10:04:12 -0500 Subject: [PATCH 3/5] =?UTF-8?q?integr=C3=A9=20la=20lista=20de=20productos?= =?UTF-8?q?=20completa=20y=20remov=C3=AD=20la=20carpeta=20.vscode?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .vscode/settings.json | 22 ---------------------- 1 file changed, 22 deletions(-) delete mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json deleted file mode 100644 index f07447e30..000000000 --- a/.vscode/settings.json +++ /dev/null @@ -1,22 +0,0 @@ -{ - "workbench.colorCustomizations": { - "activityBar.activeBackground": "#abdf9e", - "activityBar.activeBorder": "#6f82d0", - "activityBar.background": "#abdf9e", - "activityBar.foreground": "#15202b", - "activityBar.inactiveForeground": "#15202b99", - "activityBarBadge.background": "#6f82d0", - "activityBarBadge.foreground": "#15202b", - "sash.hoverBorder": "#abdf9e", - "statusBar.background": "#8ad278", - "statusBar.foreground": "#15202b", - "statusBarItem.hoverBackground": "#69c552", - "statusBarItem.remoteBackground": "#8ad278", - "statusBarItem.remoteForeground": "#15202b", - "titleBar.activeBackground": "#8ad278", - "titleBar.activeForeground": "#15202b", - "titleBar.inactiveBackground": "#8ad27899", - "titleBar.inactiveForeground": "#15202b99" - }, - "peacock.color": "#8ad278" -} \ No newline at end of file From 66f10b5e7af2eaaa0fe50a75c0b1879a5ba975ed Mon Sep 17 00:00:00 2001 From: EllieV Date: Sat, 23 Jul 2022 11:40:45 -0500 Subject: [PATCH 4/5] =?UTF-8?q?a=C3=B1ad=C3=AD=20.gitignore=20y=20fusion?= =?UTF-8?q?=C3=A9=20el=20detalle=20del=20producto?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .gitignore | 243 +++++++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 21 ++++- main.js | 14 +-- styles.css | 95 ++++++++++++++++++--- 4 files changed, 355 insertions(+), 18 deletions(-) create mode 100644 .gitignore diff --git a/.gitignore b/.gitignore new file mode 100644 index 000000000..687607f31 --- /dev/null +++ b/.gitignore @@ -0,0 +1,243 @@ +# Created by https://www.toptal.com/developers/gitignore/api/macos,linux,windows,node,visualstudiocode +# Edit at https://www.toptal.com/developers/gitignore?templates=macos,linux,windows,node,visualstudiocode + +### 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,linux,windows,node,visualstudiocode \ No newline at end of file diff --git a/index.html b/index.html index cc7f3263f..3f081dc1d 100644 --- a/index.html +++ b/index.html @@ -110,7 +110,7 @@ - -