Skip to content

Master #80

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.

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 12 commits into
base: main
Choose a base branch
from
Open
155 changes: 155 additions & 0 deletions code.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,155 @@
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('#shopping-cart-container');
const productDetailContainer = document.querySelector('#product-detail-aside');
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');
const isProductDetailClosed = productDetailContainer.classList.contains('inactive');

if (!isAsideClosed)
{
shoppingCartContainer.classList.add('inactive');
}
else if(!isProductDetailClosed)
{
productDetailContainer.classList.add('inactive');
}

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

function toggleMobileMenu()
{
const isAsideClosed = shoppingCartContainer.classList.contains('inactive');

if (!isAsideClosed)
{
shoppingCartContainer.classList.add('inactive');
}

openProductDetailAside();

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

function toggleCarritoAside()
{
const isMobileMenuClosed = mobileMenu.classList.contains('inactive');
const isDesktopMenuClosed = desktopMenu.classList.contains('inactive');
const isProductDetailClosed = productDetailContainer.classList.contains('inactive');

if (!isMobileMenuClosed)
{
mobileMenu.classList.add('inactive');
}
else if (!isDesktopMenuClosed)
{
desktopMenu.classList.add('inactive');
}
else if(!isProductDetailClosed)
{
productDetailContainer.classList.add('inactive');
}

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

function openProductDetailAside()
{
shoppingCartContainer.classList.add('inactive');
desktopMenu.classList.add('inactive');
productDetailContainer.classList.remove('inactive');
}

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

/*
<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>
*/
const productInfo = [];
productInfo.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'
});
productInfo.push(
{
name: 'Motocycle',
price: 720,
image: 'https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'
});
productInfo.push(
{
name: 'Marihuana',
price: 420,
image: 'https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940'
});

function productsRender(x)
{
for (product of x)
{
const productCard = document.createElement('div');
productCard.classList.add('product-card');

const productImg = document.createElement('img');
productImg.setAttribute('src', product.image);
productImg.addEventListener('click', openProductDetailAside);

const productDetails = document.createElement('div');
productDetails.classList.add('product-details');

const productDetailsDiv = document.createElement('div');

const productPrice = document.createElement('p');
productPrice.innerText = '$' + product.price;
const productName = document.createElement('p');
productName.innerText = product.name;

productDetailsDiv.appendChild(productPrice);
productDetailsDiv.appendChild(productName);

const productDetailsFigure = document.createElement('figure');
const productImgCart = document.createElement('img');
productImgCart.setAttribute('src', './icons/bt_add_to_cart.svg');

productDetailsFigure.appendChild(productImgCart);

productDetails.appendChild(productDetailsDiv);
productDetails.appendChild(productDetailsFigure);

productCard.appendChild(productImg);
productCard.appendChild(productDetails);

cardsContainer.appendChild(productCard);
}
}

productsRender(productInfo);
17 changes: 8 additions & 9 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -113,7 +113,7 @@
</div>
</nav>

<aside id="shoppingCartContainer" class="inactive">
<aside id="shopping-cart-container" class="inactive">
<div class="title-container">
<img src="./icons/flechita.svg" alt="arrow">
<p class="title">My order</p>
Expand Down Expand Up @@ -158,10 +158,9 @@
Checkout
</button>
</div>
</div>
</aside>

<aside id="productDetail" class="inactive">
<aside id="product-detail-aside" class="inactive">
<div class="product-detail-close">
<img src="./icons/icon_close.png" alt="close">
</div>
Expand All @@ -180,7 +179,8 @@
<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 @@ -191,11 +191,10 @@
<img src="./icons/bt_add_to_cart.svg" alt="">
</figure>
</div>
</div> -->

</div>-->
</div>
</section>

<script src="./main.js"></script>
<script src="./code.js"></script>
</body>
</html>
</html>
119 changes: 0 additions & 119 deletions main.js

This file was deleted.

Loading