From 339ca6a7bd10e65f9e3614015064b1064026c08b Mon Sep 17 00:00:00 2001 From: Jose Date: Fri, 14 Oct 2022 22:18:44 -0500 Subject: [PATCH 1/5] primer commit --- curso-2/icons/icon_menu.svg | 0 curso-2/index.html | 71 ++++++++++++++++++++++++++++++ curso-2/styles.css | 87 +++++++++++++++++++++++++++++++++++++ 3 files changed, 158 insertions(+) create mode 100644 curso-2/icons/icon_menu.svg create mode 100644 curso-2/index.html create mode 100644 curso-2/styles.css diff --git a/curso-2/icons/icon_menu.svg b/curso-2/icons/icon_menu.svg new file mode 100644 index 0000000..e69de29 diff --git a/curso-2/index.html b/curso-2/index.html new file mode 100644 index 0000000..7158273 --- /dev/null +++ b/curso-2/index.html @@ -0,0 +1,71 @@ + + + + + + + + + + + Yardsale: tienda + + + + +
+ +
+ + \ No newline at end of file diff --git a/curso-2/styles.css b/curso-2/styles.css new file mode 100644 index 0000000..ac58785 --- /dev/null +++ b/curso-2/styles.css @@ -0,0 +1,87 @@ + :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; + } + .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; + } + } From 74c6afd4aa7f05a25873b3e63130cd60c03f6ffa Mon Sep 17 00:00:00 2001 From: Jose Date: Sun, 16 Oct 2022 23:48:39 -0500 Subject: [PATCH 2/5] primer commit --- curso-2/index.html | 207 ++++++++++++++++------- curso-2/main.js | 79 +++++++++ curso-2/styles.css | 402 +++++++++++++++++++++++++++++++++++---------- 3 files changed, 538 insertions(+), 150 deletions(-) create mode 100644 curso-2/main.js diff --git a/curso-2/index.html b/curso-2/index.html index 7158273..df2ef07 100644 --- a/curso-2/index.html +++ b/curso-2/index.html @@ -1,71 +1,152 @@ - - - - - - - - Yardsale: tienda - + + + + + + + +YardSale: tienda online de cositas chidas - -
- -
+ + + \ No newline at end of file diff --git a/curso-2/main.js b/curso-2/main.js new file mode 100644 index 0000000..77edac6 --- /dev/null +++ b/curso-2/main.js @@ -0,0 +1,79 @@ +const menuEmail=document.querySelector('.navbar-email'); +const menuHamIcon=document.querySelector('.menu'); +const menuCarritoIcon=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); +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');} + 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); + + 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/curso-2/styles.css b/curso-2/styles.css index ac58785..64da190 100644 --- a/curso-2/styles.css +++ b/curso-2/styles.css @@ -1,87 +1,315 @@ - :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; - } - .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; - } - } +/* 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; + 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) */ +.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; +} + + +/* 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) { + .menu { + display: block; + } + .navbar-left ul { + 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 (min-width: 641px) { + .mobile-menu { + display: none; + } +} \ No newline at end of file From 9c6831e78d526665909dff13fbb8e80d4ecc2b9d Mon Sep 17 00:00:00 2001 From: Jose Date: Mon, 17 Oct 2022 00:11:30 -0500 Subject: [PATCH 3/5] segundo commit clase 24 --- .gitignore | 245 +++++++++++++++++++++++++++++ clase1.html | 116 ++++++++++++++ clase10.html | 115 ++++++++++++++ clase11.html | 138 ++++++++++++++++ clase12.html | 113 ++++++++++++++ clase13.html | 156 +++++++++++++++++++ clase2.html | 123 +++++++++++++++ clase3.html | 124 +++++++++++++++ clase4.html | 123 +++++++++++++++ clase5.html | 114 ++++++++++++++ clase6.html | 202 ++++++++++++++++++++++++ clase7.html | 78 ++++++++++ clase8.html | 101 ++++++++++++ clase9.html | 137 ++++++++++++++++ curso-2/index.html | 17 +- curso-2/main.js | 175 +++++++++++---------- curso-2/styles.css | 81 +++++++++- index.html | 201 ++++++++++++++++++++++++ main.js | 98 ++++++++++++ styles.css | 380 +++++++++++++++++++++++++++++++++++++++++++++ 20 files changed, 2750 insertions(+), 87 deletions(-) create mode 100644 .gitignore create mode 100644 clase1.html create mode 100644 clase10.html create mode 100644 clase11.html create mode 100644 clase12.html create mode 100644 clase13.html create mode 100644 clase2.html create mode 100644 clase3.html create mode 100644 clase4.html create mode 100644 clase5.html create mode 100644 clase6.html create mode 100644 clase7.html create mode 100644 clase8.html create mode 100644 clase9.html create mode 100644 index.html create mode 100644 main.js create mode 100644 styles.css diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..3a2dc76 --- /dev/null +++ b/.gitignore @@ -0,0 +1,245 @@ + +# 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/clase1.html b/clase1.html new file mode 100644 index 0000000..3ac7798 --- /dev/null +++ b/clase1.html @@ -0,0 +1,116 @@ + + + + + + + + + + Document + + + + + + \ No newline at end of file diff --git a/clase10.html b/clase10.html new file mode 100644 index 0000000..272f6de --- /dev/null +++ b/clase10.html @@ -0,0 +1,115 @@ + + + + + + + + + + Document + + + +
+
+

My orders

+ +
+
+

+ 03.25.21 + 6 articles +

+

$560.00

+ arrow +
+ +
+

+ 03.25.21 + 6 articles +

+

$560.00

+ arrow +
+ +
+

+ 03.25.21 + 6 articles +

+

$560.00

+ arrow +
+ +
+

+ 03.25.21 + 6 articles +

+

$560.00

+ arrow +
+
+
+
+ + \ No newline at end of file diff --git a/clase11.html b/clase11.html new file mode 100644 index 0000000..9b43e5b --- /dev/null +++ b/clase11.html @@ -0,0 +1,138 @@ + + + + + + + Document + + + + + + \ No newline at end of file diff --git a/clase12.html b/clase12.html new file mode 100644 index 0000000..3a84f21 --- /dev/null +++ b/clase12.html @@ -0,0 +1,113 @@ + + + + + + + + + + Document + + + + + + \ No newline at end of file diff --git a/clase13.html b/clase13.html new file mode 100644 index 0000000..f237347 --- /dev/null +++ b/clase13.html @@ -0,0 +1,156 @@ + + + + + + + + + + Document + + + + + + \ No newline at end of file diff --git a/clase2.html b/clase2.html new file mode 100644 index 0000000..0d45f17 --- /dev/null +++ b/clase2.html @@ -0,0 +1,123 @@ + + + + + + + + + + Document + + + + + + \ No newline at end of file diff --git a/clase3.html b/clase3.html new file mode 100644 index 0000000..cc33355 --- /dev/null +++ b/clase3.html @@ -0,0 +1,124 @@ + + + + + + + + + + Document + + + + + + \ No newline at end of file diff --git a/clase4.html b/clase4.html new file mode 100644 index 0000000..c69d2fe --- /dev/null +++ b/clase4.html @@ -0,0 +1,123 @@ + + + + + + + + + + Document + + + + + + \ No newline at end of file diff --git a/clase5.html b/clase5.html new file mode 100644 index 0000000..c5d7a06 --- /dev/null +++ b/clase5.html @@ -0,0 +1,114 @@ + + + + + + + + + + Document + + + + + + \ No newline at end of file diff --git a/clase6.html b/clase6.html new file mode 100644 index 0000000..6c35aea --- /dev/null +++ b/clase6.html @@ -0,0 +1,202 @@ + + + + + + + + + + Document + + +
+
+ +
+ +
+
+

$120,00

+

Bike

+
+
+ +
+
+
+ +
+ +
+
+

$120,00

+

Bike

+
+
+ +
+
+
+ +
+ +
+
+

$120,00

+

Bike

+
+
+ +
+
+
+ +
+ +
+
+

$120,00

+

Bike

+
+
+ +
+
+
+ +
+ +
+
+

$120,00

+

Bike

+
+
+ +
+
+
+ +
+ +
+
+

$120,00

+

Bike

+
+
+ +
+
+
+ +
+ +
+
+

$120,00

+

Bike

+
+
+ +
+
+
+ +
+ +
+
+

$120,00

+

Bike

+
+
+ +
+
+
+ +
+ +
+
+

$120,00

+

Bike

+
+
+ +
+
+
+
+
+ + \ No newline at end of file diff --git a/clase7.html b/clase7.html new file mode 100644 index 0000000..d7458ff --- /dev/null +++ b/clase7.html @@ -0,0 +1,78 @@ + + + + + + + + + + Document + + + +
+ +
+ + \ No newline at end of file diff --git a/clase8.html b/clase8.html new file mode 100644 index 0000000..7c3d25c --- /dev/null +++ b/clase8.html @@ -0,0 +1,101 @@ + + + + + + + + + + Document + + + +
+ + + + + +
+ + \ No newline at end of file diff --git a/clase9.html b/clase9.html new file mode 100644 index 0000000..b3f0a02 --- /dev/null +++ b/clase9.html @@ -0,0 +1,137 @@ + + + + + + + + + + Document + + + +
+
+

My order

+ +
+
+

+ 03.25.21 + 6 articles +

+

$560.00

+
+ +
+
+ bike +
+

Bike

+

$30,00

+
+ +
+
+ bike +
+

Bike

+

$30,00

+
+ +
+
+ bike +
+

Bike

+

$30,00

+
+
+
+
+ + \ No newline at end of file diff --git a/curso-2/index.html b/curso-2/index.html index df2ef07..c68a610 100644 --- a/curso-2/index.html +++ b/curso-2/index.html @@ -100,7 +100,7 @@ - + + + +
+
+ + + +
+
+ + + + diff --git a/main.js b/main.js new file mode 100644 index 0000000..c969bff --- /dev/null +++ b/main.js @@ -0,0 +1,98 @@ +const menuEmail = document.querySelector('.navbar-email'); +const menuHamIcon = document.querySelector('.menu'); +const menuCarritoIcon = document.querySelector('.navbar-shopping-cart'); +const desktopMenu = document.querySelector('.desktop-menu'); +const mobileMenu = document.querySelector('.mobile-menu'); +const shoppingCartContainer = document.querySelector('#shoppingCartContainer'); +const cardsContainer = document.querySelector('.cards-container'); + +menuEmail.addEventListener('click', toggleDesktopMenu); +menuHamIcon.addEventListener('click', toggleMobileMenu); +menuCarritoIcon.addEventListener('click', toggleCarritoAside); + +function toggleDesktopMenu() { + const isAsideClosed = shoppingCartContainer.classList.contains('inactive'); + + if (!isAsideClosed) { + shoppingCartContainer.classList.add('inactive'); + } + + desktopMenu.classList.toggle('inactive'); +} + +function toggleMobileMenu() { + const isAsideClosed = shoppingCartContainer.classList.contains('inactive'); + + if (!isAsideClosed) { + shoppingCartContainer.classList.add('inactive'); + } + + mobileMenu.classList.toggle('inactive'); +} + +function toggleCarritoAside() { + const isMobileMenuClosed = mobileMenu.classList.contains('inactive'); + + if (!isMobileMenuClosed) { + mobileMenu.classList.add('inactive'); + } + + shoppingCartContainer.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: '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); + + 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); diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..7228eed --- /dev/null +++ b/styles.css @@ -0,0 +1,380 @@ +/* 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); +} + + +@media (max-width: 640px) { + .menu { + display: block; + } + .navbar-left ul { + display: none; + } + .navbar-email { + display: none; + } + .desktop-menu { + display: none; + } + + aside { + 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) { + .mobile-menu { + display: none; + } +} From c5ca389def3f0c3e9a98e9c0f95a17e88db518c5 Mon Sep 17 00:00:00 2001 From: Jose Date: Mon, 17 Oct 2022 00:21:18 -0500 Subject: [PATCH 4/5] tercer commit --- bt_add_to_cart.svg | 6 ++++++ bt_added_to_cart.svg | 19 +++++++++++++++++++ curso-2/main.js | 23 ++++++++++++++++++++++- email.svg | 3 +++ icon_menu.svg | 3 +++ icon_shopping_cart.svg | 3 +++ icon_shopping_cart_notification.svg | 4 ++++ 7 files changed, 60 insertions(+), 1 deletion(-) create mode 100644 bt_add_to_cart.svg create mode 100644 bt_added_to_cart.svg create mode 100644 email.svg create mode 100644 icon_menu.svg create mode 100644 icon_shopping_cart.svg create mode 100644 icon_shopping_cart_notification.svg diff --git a/bt_add_to_cart.svg b/bt_add_to_cart.svg new file mode 100644 index 0000000..a846222 --- /dev/null +++ b/bt_add_to_cart.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/bt_added_to_cart.svg b/bt_added_to_cart.svg new file mode 100644 index 0000000..9566bef --- /dev/null +++ b/bt_added_to_cart.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/curso-2/main.js b/curso-2/main.js index 7bc2b7e..5e05309 100644 --- a/curso-2/main.js +++ b/curso-2/main.js @@ -1,14 +1,17 @@ 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'); menuEmail.addEventListener('click', toggleDesktopMenu); menuHamIcon.addEventListener('click', toggleMobileMenu); menuCarritoIcon.addEventListener('click', toggleCarritoAside); +productDetailCloseIcon.addEventListener('click', closeProductDetailAside); function toggleDesktopMenu() { const isAsideClosed = shoppingCartContainer.classList.contains('inactive'); @@ -26,6 +29,8 @@ function toggleMobileMenu() { if (!isAsideClosed) { shoppingCartContainer.classList.add('inactive'); } + + closeProductDetailAside(); mobileMenu.classList.toggle('inactive'); } @@ -34,12 +39,27 @@ function toggleCarritoAside() { const isMobileMenuClosed = mobileMenu.classList.contains('inactive'); if (!isMobileMenuClosed) { - mobileMenu.classList.add('inactive'); + 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', @@ -65,6 +85,7 @@ function renderProducts(arr) { // 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'); diff --git a/email.svg b/email.svg new file mode 100644 index 0000000..9067668 --- /dev/null +++ b/email.svg @@ -0,0 +1,3 @@ + + + diff --git a/icon_menu.svg b/icon_menu.svg new file mode 100644 index 0000000..5b375ee --- /dev/null +++ b/icon_menu.svg @@ -0,0 +1,3 @@ + + + diff --git a/icon_shopping_cart.svg b/icon_shopping_cart.svg new file mode 100644 index 0000000..c5eb0e8 --- /dev/null +++ b/icon_shopping_cart.svg @@ -0,0 +1,3 @@ + + + diff --git a/icon_shopping_cart_notification.svg b/icon_shopping_cart_notification.svg new file mode 100644 index 0000000..8a44612 --- /dev/null +++ b/icon_shopping_cart_notification.svg @@ -0,0 +1,4 @@ + + + + From 2f573433cf39b28fce8c09311b1786c0f6de069c Mon Sep 17 00:00:00 2001 From: Jose Date: Mon, 17 Oct 2022 00:25:18 -0500 Subject: [PATCH 5/5] commit clase 25 --- curso-2/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/curso-2/index.html b/curso-2/index.html index c68a610..35dd6cc 100644 --- a/curso-2/index.html +++ b/curso-2/index.html @@ -152,7 +152,7 @@

Bike

With its practical position, this bike also fulfills a decorative function, add your hall or workspace.