Skip to content

Unión entre los elementos desktop-menu, mobile-menu y product-detail #2203

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 6 commits into
base: main
Choose a base branch
from
Open

Unión entre los elementos desktop-menu, mobile-menu y product-detail #2203

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
b6d096c
Se crean tres etiquetas links donde se traen las tipografias de googl…
guilevasa Jun 6, 2024
16d98cf
Se crea la pseudo clase :root con variables predeterminadas para ser …
guilevasa Jun 6, 2024
797e7e0
Se crean las primeras dos variables: navbarEmail y desktopMenu asigna…
guilevasa Jun 6, 2024
07d5d1f
Se eliminan dos lineas de codigo (111-112) que fueron en su momento u…
guilevasa Jun 8, 2024
b197928
Se modifica la caracteristica width y padding de la clase mobile-menu…
guilevasa Jun 8, 2024
106f342
Se crean dos variables, una para mostrar imagen del detalle del produ…
guilevasa Jun 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
199 changes: 199 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,199 @@
<!DOCTYPE html> <!-- -->
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Quicksand:wght@300;500;700&display=swap" rel="stylesheet">
<title>YardSale | Tienda Online</title>
<link rel="stylesheet" href="./styles.css"> <!--etiqueta para traer el archivo de .css que tiene los estilos, ademas de "./" para confirmar que se encuentra en la misma carpeta-->
</head>
<body>
<nav>
<img src="./icons/icon_menu.svg" alt="menu" class="menu">

<div class="navbar-left">
<img src="./logos/logo_yard_sale.svg" alt="logo" class="logo">

<ul>
<li>
<a href="/">All</a>
</li>
<li>
<a href="/">Clothes</a>
</li>
<li>
<a href="/">Electronics</a>
</li>
<li>
<a href="/">Furnitures</a>
</li>
<li>
<a href="/">Toys</a>
</li>
<li>
<a href="/">Others</a>
</li>
</ul>
</div>

<div class="navbar-right">
<ul>
<li class="navbar-email">[email protected]</li>
<li class="navbar-shopping-cart">
<img src="./icons/icon_shopping_cart.svg" alt="shopping cart">
<div>2</div>
</li>
</ul>
</div>

<div class="desktop-menu inactive"> <!--se registra la clase "inactive" encargada de no mostrar la clase "desktop-menu"-->
<ul>
<li>
<a href="/" class="title">My orders</a>
</li>

<li>
<a href="/">My account</a>
</li>

<li>
<a href="/">Sign out</a>
</li>
</ul>
</div>

<div class="mobile-menu inactive">
<ul>
<li>
<a href="/">CATEGORIES</a>
</li>
<li>
<a href="/">All</a>
</li>
<li>
<a href="/">Clothes</a>
</li>
<li>
<a href="/">Electronics</a>
</li>
<li>
<a href="/">Furnitures</a>
</li>
<li>
<a href="/">Toys</a>
</li>
<li>
<a href="/">Other</a>
</li>
</ul>

<ul>
<li>
<a href="/">My orders</a>
</li>
<li>
<a href="/">My account</a>
</li>
</ul>

<ul>
<li>
<a href="/" class="email">[email protected]</a>
</li>
<li>
<a href="/" class="sign-out">Sign out</a>
</li>
</ul>
</div>

</nav>

<aside id="shoppingCartContainer" class="inactive">
<div class="title-container">
<img src="./icons/flechita.svg" alt="arrow">
<p class="title">My order</p>
</div>

<div class="my-order-content">
<div class="shopping-cart">
<figure>
<img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="bike">
</figure>
<p>Bike</p>
<p>$30,00</p>
<img src="./icons/icon_close.png" alt="close">
</div>

<div class="shopping-cart">
<figure>
<img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="bike">
</figure>
<p>Bike</p>
<p>$30,00</p>
<img src="./icons/icon_close.png" alt="close">
</div>

<div class="shopping-cart">
<figure>
<img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="bike">
</figure>
<p>Bike</p>
<p>$30,00</p>
<img src="./icons/icon_close.png" alt="close">
</div>

<div class="order">
<p>
<span>Total</span>
</p>
<p>$560.00</p>
</div>

<button class="primary-button">
Checkout
</button>
</div>
</div>
</aside>

<aside id="productDetail" class="inactive">
<div class="product-detail-close">
<img src="./icons/icon_close.png" alt="close">
</div>
<img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="bike">
<div class="product-info">
<p>$35,00</p>
<p>Bike</p>
<p>With its practical position, this bike also fulfills a decorative function, add your hall or workspace.</p>
<button class="primary-button add-to-cart-button">
<img src="./icons/bt_add_to_cart.svg" alt="add to cart">
Add to cart
</button>
</div>
</aside>

<section class="main-container">
<div class="cards-container">

<!--<div class="product-card">
<img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
<div class="product-info">
<div>
<p>$120,00</p>
<p>Bike</p>
</div>
<figure>
<img src="./icons/bt_add_to_cart.svg" alt="">
</figure>
</div>
</div>
</div> -->
</section>

<script src="./main.js"></script> <!--etiqueta para ejecutar el archivo de main.js-->

</body>
</html>
181 changes: 181 additions & 0 deletions main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,181 @@
/*primeras dos variables para la accion de mostrar el elemento de la clase "desktop-menu"*/
const navbarEmail = document.querySelector('.navbar-email'); /*se crea variable para el elemento que se desea realizar la interaccion,
document.querySelector('.navbar-email') para seleccionar la clase "navbar-email" y asignarla a la variable*/
const desktopMenu = document.querySelector('.desktop-menu');

/*segundas dos variables para la accion de mostrar el elemento de la clase "mobile-menu"*/
const menuHamIcon = document.querySelector('.menu');
const mobileMenu = document.querySelector('.mobile-menu');

/*terceras dos variables para la accion de mostrar el elemento del id: shoppingCartContainer*/
const shoppingCartIcon = document.querySelector('.navbar-shopping-cart');
const shoppingCartContainer = document.querySelector('#shoppingCartContainer');

/*variable para la estructura HTML que se esta creando desde JS*/
const cardsContainer = document.querySelector('.cards-container');

/*variable para la accion de mostrar el elemento del id: product-detail*/
const productDetailContainer = document.querySelector('#productDetail');
const productDetailCloseIcon = document.querySelector('.product-detail-close'); /*var. para cerrar la imagen del detalle del producto*/


navbarEmail.addEventListener('click', toggleDesktopMenu); /*metodo ".addEventListener" el cual ejecuta la accion que se le indique,
en este caso, cuando se de "click" al elemento de la clase "navbar-email", ejecute la funcion "toggleDesktopMenu"*/

menuHamIcon.addEventListener('click', toggleMobileMenu);

shoppingCartIcon.addEventListener('click', toggleProductDetail);

productDetailCloseIcon.addEventListener('click', closeProductDetailAside);


function toggleDesktopMenu() { /*ejecuta la clase que inactiva el elemento "desktop-menu"*/

/*variable para definir si el menu del carrito (product-detail) esta cerrado*/
const isProductDetailClosed = shoppingCartContainer.classList.contains('inactive');

if (!isProductDetailClosed) { /*si el elemento "product-detail" no esta cerrado (!isProductDetailClosed (! para negacion))*/
shoppingCartContainer.classList.add('inactive'); /*entonces se usa el metodo "add", para llamar el elemento "inactive", para cerrarlo*/
}

closeProductDetailAside(); /*se llama la funcion para que cierre el detalle del producto cuando se abra el desktop-menu*/

desktopMenu.classList.toggle('inactive');

}

function toggleMobileMenu() {

/*variable para definir si el menu del carrito (product-detail) esta cerrado*/
const isProductDetailClosed = shoppingCartContainer.classList.contains('inactive');

if (!isProductDetailClosed) { /*si el elemento "product-detail" no esta cerrado (!isProductDetailClosed (! para negacion))*/
shoppingCartContainer.classList.add('inactive'); /*entonces se usa el metodo "add", para llamar el elemento "inactive", para cerrarlo*/
}

closeProductDetailAside(); /*se llama la funcion para que cierre el detalle del producto cuando se abra el menu mobile*/

mobileMenu.classList.toggle('inactive');

}

/*funcion para definir que cuando se abra el menu del elemento "product-detail (carrito)" pero el elemento "menu-mobile" esta abierto tambien,
entonces se debe cerrar el menu del elemento "menu-mobile"*/
function toggleProductDetail() {

/*variable para definir si el menu de la version mobile esta cerrado*/
const isMobileMenuClosed = mobileMenu.classList.contains('inactive');
const isDesktopMenuClosed = desktopMenu.classList.contains('inactive');

if (!isMobileMenuClosed || !isDesktopMenuClosed) { /*si el elemento "mobile-menu" no esta cerrado (!isMobileMenuClosed (! para negacion))*/
mobileMenu.classList.add('inactive'); /*entonces se usa el metodo "add", para llamar el elemento "inactive", para cerrarlo*/
desktopMenu.classList.add('inactive'); /*entonces se usa el metodo "add", para llamar el elemento "inactive", para cerrarlo*/
}

const isProductDetailClosed = productDetailContainer.classList.contains('inactive');

if (!isProductDetailClosed) { /*si el elemento "product-detail" no esta cerrado (!isisProductDetailClosed (! para negacion))*/
productDetailContainer.classList.add('inactive'); /*entonces se usa el metodo "add", para llamar el elemento "inactive", para cerrarlo*/
}

shoppingCartContainer.classList.toggle('inactive');

}

function openProductDetailAside() {
shoppingCartContainer.classList.add('inactive'); /*se indica que desactive el carrito cuando se esta abriendo el detalle del producto*/
desktopMenu.classList.add('inactive'); /*se indica que desactive el menu de escritorio cuando se esta abriendo el detalle del producto*/
productDetailContainer.classList.remove('inactive'); /*funcion que desactiva la clase inactive para que se permita mostrar los detalles del producto cuando se de click en la imagen*/
}

function closeProductDetailAside() {
productDetailContainer.classList.add('inactive'); /*funcion que activa la clase inactive para que se cierren los detalles del producto cuando se de click en la "X"*/
}

const productList = [];

productList.push({
name: 'Camera',
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: 'LargeCamera',
price: 240,
image: 'https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940',
});
productList.push({
name: 'SmallCamera',
price: 60,
image: 'https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940',
});

/*
<section class="main-container">
<div class="cards-container">

<div class="product-card">
<img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
<div class="product-info">
<div>
<p>$120,00</p>
<p>Bike</p>
</div>
<figure>
<img src="./icons/bt_add_to_cart.svg" alt="">
</figure>
</div>
</div>
</div>
</section>
*/

/*Se creara la estructura HTML de arriba pero desde JS*/

/*"product of productList" es el "atajo" para la sintaxis del ciclo "for", del array "productList" va a iterar cada elementos (product)*/
for (product of productList) {

const productCard = document.createElement('div'); /*"document.createElement('div')" para introducir el elemento "div" al index*/
productCard.classList.add('product-card'); /*dentro del "productCard" (div) se creara la clase (classList) "product-card"*/

const img = document.createElement('img');
img.setAttribute('src', product.image); /*al elemento "image" del objeto "productList" (en este "for" designado como "product")
se le agregara la imagen designada en el objeto*/
img.addEventListener('click', openProductDetailAside); /*evento para cuando se de click en la imagen del prod. muestre su detalle*/

const productInfo = document.createElement('div'); /*"document.createElement('div')" para introducir el elemento "div" al index*/
productInfo.classList.add('product-info'); /*dentro del "productInfo" (div) se creara la clase (classList) "product-info"*/

/*Parte del "div" que contiene el nombre y el precio*/
const divVacio = document.createElement('div'); /*"document.createElement('div')" para introducir el elemento "div" al index*/

const productPrice = document.createElement('p'); /*"document.createElement('p')" para introducir el elemento "p" al index*/
productPrice.innerText = '$' + product.price; /*se le asigna el vlr. del elemento "price" del objeto "productList" (designado en este for como "product")*/

const productName = document.createElement('p'); /*"document.createElement('p')" para introducir el elemento "p" al index*/
productName.innerText = product.name; /*se le asigna el vlr. del elemento "name" del objeto "productList" (designado en este for como "product")*/

divVacio.appendChild(productPrice); /*se asigna el elemento "productPrice" al "divVacio" con la propiedad ".appendChild()"*/
divVacio.appendChild(productName); /*se asigna el elemento "productName" al "divVacio" con la propiedad ".appendChild()"*/

/*Parte del "figure" que contiene una imagen por defecto*/
const figureVacio = document.createElement('figure'); /*"document.createElement('figure')" para introducir el elemento "figure" al index*/
const figureImg = document.createElement('img');
figureImg.setAttribute('src', './icons/bt_add_to_cart.svg'); /*al elemento "image" del objeto "productList" (en este "for" designado como "product")
se le agregara la imagen designada por defecto*/
figureVacio.appendChild(figureImg); /*se asigna el elemento "figureImg" al "figureVacio" con la propiedad ".appendChild()"*/

/*Se asignan los elementos que estan dentro de las etiquetas "div" (que contiene el nombre y el precio) y "figure" (que contiene la imagen por defecto)
a la clase "product-info", de acuerdo a la estructura de HTML arriba*/
productInfo.appendChild(divVacio); /*se asigna el elemento "divVacio" al "productInfo" con la propiedad ".appendChild()"*/
productInfo.appendChild(figureVacio); /*se asigna el elemento "figureVacio" al "productInfo" con la propiedad ".appendChild()"*/

/*Se asignan los elementos que estan dentro de las clases "productInfo" y "img" (que contienen las imagenes dentro de cada propiedad "image" del objeto)
a la clase "product-card", de acuerdo a la estructura de HTML arriba*/
productCard.appendChild(img); /*se asigna el elemento "img" al "productCard" con la propiedad ".appendChild()"*/
productCard.appendChild(productInfo); /*se asigna el elemento "productInfo" al "productCard" con la propiedad ".appendChild()"*/

/*ultimas anexiones de la etiqueta "product-card" que contiene todos los elementos de la estructura HTML a la clase 2da clase ppal. "cards-container"*/
cardsContainer.appendChild(productCard); /*se asigna el elemento "productCard" al "cardContainer" con la propiedad ".appendChild()"*/

}
Loading