Skip to content

Fusión de los componentes de la vista principal #81

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

Fusión de los componentes de la vista principal #81

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
9dbae5f
integración
ricardo1217 Dec 15, 2023
c72b6ad
integracion del menu para celular responsive
ricardo1217 Dec 15, 2023
99b028b
video del carrito de compras solo echo hasta el minuto 4:22
ricardo1217 Dec 15, 2023
6efee1c
menus ya abren y se cierran dependiendo el menu que se seleccione
Dec 16, 2023
a2a3fb6
menus totalmente organizados para que se cierren y abran bien
Dec 17, 2023
955ae38
organizacion del codigo
Dec 17, 2023
686d8fd
Se cambia el usuario y correo de git al de ricardo
ricardo1217 Dec 17, 2023
68b25c0
clase lista de productos terminada
ricardo1217 Dec 19, 2023
89f038b
Clase detalles de un producto Completada :)
ricardo1217 Dec 20, 2023
5dc11f2
clase interaccion entre todos los componentes completa y funcionando …
ricardo1217 Dec 21, 2023
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
1 change: 1 addition & 0 deletions curso-frontend-developer-javascript-practico
Open in desktop
Submodule curso-frontend-developer-javascript-practico added at 686d8f
23 changes: 13 additions & 10 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,10 @@
<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">

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

<title>YardSale: tienda online de cositas chidas</title>
</head>
<body>
Expand All @@ -19,7 +16,9 @@

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



<!--menu responsive para Desktop -->
<ul>
<li>
<a href="/">All</a>
Expand Down Expand Up @@ -68,7 +67,10 @@
</ul>
</div>

<div class="mobile-menu inactive">


<!--menu responsive para celular -->
<div class="mobile-menu ">
<ul>
<li>
<a href="/">CATEGORIES</a>
Expand Down Expand Up @@ -111,9 +113,10 @@
</li>
</ul>
</div>

</nav>

<aside id="shoppingCartContainer" class="inactive">
<aside id="shoppingCartContainer" class="inactive">
<div class="title-container">
<img src="./icons/flechita.svg" alt="arrow">
<p class="title">My order</p>
Expand Down Expand Up @@ -161,6 +164,7 @@
</div>
</aside>


<aside id="productDetail" class="inactive">
<div class="product-detail-close">
<img src="./icons/icon_close.png" alt="close">
Expand All @@ -177,10 +181,11 @@
</div>
</aside>


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

<!-- <div class="product-card">
<!-- <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>
Expand All @@ -192,10 +197,8 @@
</figure>
</div>
</div> -->

</div>
</section>

<script src="./main.js"></script>
</body>
</html>
</html>
51 changes: 35 additions & 16 deletions main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,18 @@
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 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');
const productDetailContainer =document.querySelector('#productDetail')

menuEmail.addEventListener('click', toggleDesktopMenu);
menuHamIcon.addEventListener('click', toggleMobileMenu);
menuCarritoIcon.addEventListener('click', toggleCarritoAside);
productDetailCloseIcon.addEventListener('click', closeProductDetailAside);
productDetailCloseIcon.addEventListener('click', closeProductDetailAside)

function toggleDesktopMenu() {
const isAsideClosed = shoppingCartContainer.classList.contains('inactive');
Expand All @@ -29,34 +30,34 @@ function toggleMobileMenu() {
if (!isAsideClosed) {
shoppingCartContainer.classList.add('inactive');
}

closeProductDetailAside();

closeProductDetailAside();
mobileMenu.classList.toggle('inactive');
}

function toggleCarritoAside() {
const isMobileMenuClosed = mobileMenu.classList.contains('inactive');

if (!isMobileMenuClosed) {
mobileMenu.classList.add('inactive');
mobileMenu.classList.add('inactive');
}

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

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

if (!isProductDetailClosed) {
if (!isProductDeatilclosed) {
productDetailContainer.classList.add('inactive');
}

shoppingCartContainer.classList.toggle('inactive');
}

function openProductDetailAside() {
shoppingCartContainer.classList.add('inactive');
function openProductDetailAside(){
shoppingCartContainer.classList.add('inactive');

productDetailContainer.classList.remove('inactive');
}

function closeProductDetailAside() {
function closeProductDetailAside(){
productDetailContainer.classList.add('inactive');
}

Expand All @@ -77,16 +78,32 @@ productList.push({
image: 'https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940',
});

function renderProducts(arr) {
/*<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>*/



/*codigo encapsulado en función */
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);
productImg.addEventListener('click',openProductDetailAside);

const productInfo = document.createElement('div');
productInfo.classList.add('product-info');

Expand Down Expand Up @@ -114,6 +131,8 @@ function renderProducts(arr) {

cardsContainer.appendChild(productCard);
}


}

renderProducts(productList);
renderProducts(productList)
Loading