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/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/clase1.html b/clase1.html new file mode 100644 index 0000000..3ac7798 --- /dev/null +++ b/clase1.html @@ -0,0 +1,116 @@ + + + + + + + + + + Document + + + +
+
+ + +

Create a new password

+

Enter a new passwrd for yue account

+ +
+ + + + + + + +
+
+
+ + \ 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 + + + +
+
+ + +

Email has been sent!

+

Please check your inbox for instructions on how to reset the password

+ + + + + +

+ Didn't receive the email? + Resend +

+
+
+ + \ 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 + + + +
+
+ + +
+ + + + + + + + Forgot my password +
+ + +
+
+ + \ 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 + + + +
+
+

My account

+ +
+
+ + + + + + + + +
+ + +
+
+
+ + \ 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 + + + +
+
+

My account

+ +
+
+ +

Camila Yokoo

+ + +

camilayokoo@gmail.com

+ + +

*********

+
+ + +
+
+
+ + \ 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/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..35dd6cc --- /dev/null +++ b/curso-2/index.html @@ -0,0 +1,167 @@ + + + + + + + + + + +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..5e05309 --- /dev/null +++ b/curso-2/main.js @@ -0,0 +1,119 @@ +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'); + + if (!isAsideClosed) { + shoppingCartContainer.classList.add('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/curso-2/styles.css b/curso-2/styles.css new file mode 100644 index 0000000..df308f4 --- /dev/null +++ b/curso-2/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; + } +} \ No newline at end of file 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 @@ + + + + diff --git a/index.html b/index.html new file mode 100644 index 0000000..8e91d42 --- /dev/null +++ b/index.html @@ -0,0 +1,201 @@ + + + + + + + + + + + + + + YardSale: tienda online de cositas chidas + + + + + + + + +
+
+ + + +
+
+ + + + 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; + } +}