diff --git a/index.html b/index.html index 8e91d429a..8873180ea 100644 --- a/index.html +++ b/index.html @@ -4,14 +4,15 @@ - + + + + + YardSale: Tiedna Online - - - YardSale: tienda online de cositas chidas + +
- - -
- + - + \ No newline at end of file diff --git a/main.js b/main.js index 7ebb1bb3e..2191287cb 100644 --- a/main.js +++ b/main.js @@ -1,88 +1,78 @@ 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 menuHamIcon = document.querySelector('.menu'); const mobileMenu = document.querySelector('.mobile-menu'); +const menuCarritoIcon = document.querySelector('.navbar-shopping-cart'); const shoppingCartContainer = document.querySelector('#shoppingCartContainer'); -const productDetailContainer = document.querySelector('#productDetail'); const cardsContainer = document.querySelector('.cards-container'); +const productDetailContainer = document.querySelector('#productDetail'); +const productDetailClose = document.querySelector('.product-detail-close'); +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:150, + image: 'https:images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940' +}) + + +productList.push({ + name:'Computadora', + price:240, + image: 'https:images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940' +}) + + +/* agregar eventos a los elementos*/ + +// muesta menu cuando se realiza el evento click (funcion desplegar menu) menuEmail.addEventListener('click', toggleDesktopMenu); menuHamIcon.addEventListener('click', toggleMobileMenu); -menuCarritoIcon.addEventListener('click', toggleCarritoAside); -productDetailCloseIcon.addEventListener('click', closeProductDetailAside); +menuCarritoIcon.addEventListener('click', toggleCarritoAside) +productDetailClose.addEventListener('click', closeProductDetailAside) -function toggleDesktopMenu() { - const isAsideClosed = shoppingCartContainer.classList.contains('inactive'); +function toggleDesktopMenu(){ +/* +desktopMenu: Es una variable que hace referencia a un elemento HTML con la clase "desktopMenu". - if (!isAsideClosed) { - shoppingCartContainer.classList.add('inactive'); - } - - desktopMenu.classList.toggle('inactive'); -} +classList: Es una propiedad de los elementos HTML que proporciona acceso a las clases CSS aplicadas a ese elemento. -function toggleMobileMenu() { - const isAsideClosed = shoppingCartContainer.classList.contains('inactive'); +toggle('inactive'): Es un método de la propiedad classList que alterna la presencia +de la clase especificada en el elemento. Si la clase "inactive" está presente, +se quita; si no está presente, se agrega. +*/ + desktopMenu.classList.toggle('inactive') +}; - if (!isAsideClosed) { - shoppingCartContainer.classList.add('inactive'); - } - closeProductDetailAside(); - +function toggleMobileMenu(){ + shoppingCartContainer.classList.add('inactive') mobileMenu.classList.toggle('inactive'); + productDetailContainer.classList.add('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'); - } - +function toggleCarritoAside(){ + mobileMenu.classList.add('inactive'); shoppingCartContainer.classList.toggle('inactive'); + productDetailContainer.classList.add('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) { +// for of itera sobre cada elemento, for if ietra sobre propiedades deobjetos. +function renderProducts(array){ + for (product of array){ 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); @@ -91,7 +81,6 @@ function renderProducts(arr) { productInfo.classList.add('product-info'); const productInfoDiv = document.createElement('div'); - const productPrice = document.createElement('p'); productPrice.innerText = '$' + product.price; const productName = document.createElement('p'); @@ -104,16 +93,40 @@ function renderProducts(arr) { 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); + +// llamada a funcion para actualizar lista de productos. +renderProducts(productList) + + + +// funcion para abrir el aside de detalles cuando hacemos click en imagen. +function openProductDetailAside() { + productDetailContainer.classList.remove('inactive') +} + + +// cerrar detalles del prodcuto + +function closeProductDetailAside(){ + shoppingCartContainer.classList.add('inactive'); + productDetailContainer.classList.add('inactive') + mobileMenu.classList.toggle('inactive'); + mobileMenu.classList.add('inactive'); +} \ No newline at end of file diff --git a/styles.css b/styles.css index 7228eedc8..bd61e947c 100644 --- a/styles.css +++ b/styles.css @@ -1,4 +1,5 @@ /* General */ +/* Root contiene varias variables de css */ :root { --white: #FFFFFF; --black: #000000; @@ -13,11 +14,17 @@ body { margin: 0; font-family: 'Quicksand', sans-serif; } + +/* clase inactive nos permite desativar estructuras de html */ .inactive { display: none; } + + + + /* Navbar (general) */ nav { display: flex; @@ -122,14 +129,16 @@ nav { display: inline-block; } -/* Menu en mobile */ + + +/* Menu en Mobile */ .mobile-menu { background-color: var(--white); position: absolute; top: 60px; + padding: 24px; left: 0; width: 100%; - padding: 24px; } .mobile-menu a { text-decoration: none; @@ -158,7 +167,9 @@ nav { } -/* Aside (product detail y carrito) */ + + +/* aside (product detail y carrito) */ aside { background-color: var(--white); width: 360px; @@ -167,10 +178,15 @@ aside { right: 0; } -/* ShoppingCart */ -#shoppingCartContainer { + + + + +/* ShopingCart */ +#shopingCartContainer { padding: 0 24px; } + .title-container { display: flex; } @@ -239,6 +255,7 @@ aside { height: 50px; } + /* ProductDetail */ .product-detail-close { background: var(--white); @@ -260,6 +277,10 @@ aside { object-fit: cover; border-radius: 0 0 20px 20px; } + +/* De esta forma podemmos decir que las diferntes clases producto info solo se apliquen +a product detail, ya que en otras clases tabien utilizamos product info con diferentes parametros +y se realiza coincidencias o doble llamada de clases product info lo que resulta en colisiones*/ #productDetail .product-info { margin: 24px 24px 0 24px; } @@ -299,7 +320,8 @@ aside { } -/* Product List */ + +/* lista de productos - product list */ .cards-container { display: grid; grid-template-columns: repeat(auto-fill, 240px); @@ -343,6 +365,30 @@ aside { } + + +/* +@media (max-width: 640px): Esta regla se aplica cuando el ancho de la pantalla es como máximo 640 píxeles. + +.menu, .navbar-left ul, .navbar-email, .desktop-menu: Estas clases tienen estilos que afectan a diferentes elementos +de la interfaz cuando la pantalla es pequeña (640 píxeles o menos). En este caso, se utilizan para ocultar o mostrar +elementos en función del tamaño de la pantalla. Por ejemplo, .menu se muestra como un bloque (display: block) y +.desktop-menu se oculta (display: none). + +aside: Esta regla afecta al elemento