diff --git a/code.js b/code.js new file mode 100644 index 000000000..b6cf041e4 --- /dev/null +++ b/code.js @@ -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'); +} + +/* +
+ +
+
+

$120,00

+

Bike

+
+
+ +
+
+
+ */ +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); \ No newline at end of file diff --git a/index.html b/index.html index 8e91d429a..cdc13cdda 100644 --- a/index.html +++ b/index.html @@ -113,7 +113,7 @@ -