Skip to content

Fusion de los compoenentes de la vista principal #64

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 1 commit into
base: main
Choose a base branch
from
Open

Fusion de los compoenentes de la vista principal #64

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
29 changes: 9 additions & 20 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,14 +4,15 @@
<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 es una etiqueta que se cierra sola (lleva sol apertura de llave) sirve para relacionar archivos-->

<!-- Fuentes -->
<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">
<link rel="stylesheet" href="styles.css">
<title>YardSale: Tiedna Online</title>

<link rel="stylesheet" href="./styles.css">

<title>YardSale: tienda online de cositas chidas</title>
</head>
<body>
<nav>
Expand Down Expand Up @@ -113,6 +114,7 @@
</div>
</nav>


<aside id="shoppingCartContainer" class="inactive">
<div class="title-container">
<img src="./icons/flechita.svg" alt="arrow">
Expand Down Expand Up @@ -177,25 +179,12 @@
</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>
<script src="main.js"></script>
</body>
</html>
</html>
137 changes: 75 additions & 62 deletions main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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);
Expand All @@ -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');
Expand All @@ -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');
}
Loading