diff --git a/index.html b/index.html new file mode 100644 index 000000000..8331c7c68 --- /dev/null +++ b/index.html @@ -0,0 +1,187 @@ + + + + + + + + + + + + + Document + + + + + + + + + +
+
+
+
+ + + + \ No newline at end of file diff --git a/main.js b/main.js new file mode 100644 index 000000000..ca24cb9e6 --- /dev/null +++ b/main.js @@ -0,0 +1,191 @@ +const navbarEmail = document.querySelector('.navbar-email'); +const desktopMenu = document.querySelector('.desktop-menu'); + +/* mobile menu */ +const menuHamburger = document.querySelector('.menu'); +const mobileMenu = document.querySelector('.mobile-menu'); + +/* product-detail */ + +const navbarShoppingCart = document.querySelector('.navbar-shopping-cart'); +const productDetail = document.querySelector('#shoppingCartContainer'); + + +//const productImg = document.querySelector(''); +const productDetailContainer = document.querySelector('#productDetail'); +const productDetailCloseIcon = document.querySelector('.product-detail-close'); + +/* Product Card */ + + + + +/* desktop menu */ + +navbarEmail.addEventListener('click',toggleDeskTopMenu); +navbarShoppingCart.addEventListener('click',toggleNavbarShoppingCart); +menuHamburger.addEventListener('click',toggleMenuHamburger); +productDetailCloseIcon.addEventListener('click',closeProductDetailAside); + +function toggleDeskTopMenu(){ + /* + const isProductDetailClose = productDetail.classList.contains('inactive'); + + if(!isProductDetailClose){ + productDetail.classList.add('inactive'); + }*/ + productDetail.classList.add('inactive'); + productDetailContainer.classList.add('inactive'); + desktopMenu.classList.toggle('inactive'); +} + +function toggleMenuHamburger(){ + /*const isProductDetailClose = productDetail.classList.contains('inactive'); + + if(!isProductDetailClose){ + productDetail.classList.add('inactive'); + }*/ + productDetail.classList.add('inactive'); + productDetailContainer.classList.add('inactive'); + mobileMenu.classList.toggle('inactive'); +} + +/* product-detail */ + +function toggleNavbarShoppingCart(){ + /* + const isMobileMenuClose = mobileMenu.classList.contains('inactive'); + const isDesktopMenuClose = desktopMenu.classList.contains('inactive'); + + if(!isMobileMenuClose){ + mobileMenu.classList.add('inactive'); + } + if(!isDesktopMenuClose){ + desktopMenu.classList.add('inactive'); + } + */ + + productDetail.classList.toggle('inactive'); + productDetailContainer.classList.add('inactive'); + mobileMenu.classList.add('inactive'); + desktopMenu.classList.add('inactive'); +} + +function openProductDetailAside(){ + productDetailContainer.classList.remove('inactive'); + desktopMenu.classList.add('inactive'); + productDetail.classList.add('inactive'); + mobileMenu.classList.add('inactive'); +} + +function closeProductDetailAside(){ + productDetailContainer.classList.add('inactive'); +} + + +function dataList(){ + 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:'Car', + 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:'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:'Plane', + 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:'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:'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:'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:'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:'Bike', + price:120, + image: 'https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940', + } + ); + return productList; +} + +function renderProducts(arr){ + const productCardContainer = document.querySelector('.cards-container'); + + for(const [i,product] of arr.entries()){ + + const productCard = document.createElement('div'); + productCard.id = i; + productCard.classList.add('product-card'); + + const productImg = document.createElement('img'); + productImg.setAttribute('src',product.image); + productImg.addEventListener('click',openProductDetailAside); + + + + + const productInfo = document.createElement('div'); + productInfo.classList.add('product-info'); + + const productInfoDiv = document.createElement('div'); + const productPrice = document.createElement('p'); + const productName = document.createElement('p'); + const productInfoFigure = document.createElement('figure'); + const productInfoFigureImg = document.createElement('img'); + + productPrice.innerText = '$ ' + product.price; + productName.innerText = product.name; + productInfoFigureImg.setAttribute('src', "./icons/bt_add_to_cart.svg"); + + productInfoDiv.appendChild(productPrice); + productInfoDiv.appendChild(productName); + productInfoFigure.appendChild(productInfoFigureImg); + + productInfo.appendChild(productInfoDiv); + productInfo.appendChild(productInfoFigure); + + + productCardContainer.appendChild(productCard); + productCard.appendChild(productImg); + productCard.appendChild(productInfo); + } +} + +renderProducts(dataList()); + + diff --git a/styles.css b/styles.css new file mode 100644 index 000000000..262e0a7be --- /dev/null +++ b/styles.css @@ -0,0 +1,383 @@ +:root { + --white: #FFFFFF; + --black: #000000; + --very-light-pink: #C7C7C7; + --text-input-field: #F7F7F7; + --hospital-green: #ACD9B2; + --sm: 14px; + --md: 16px; + --lg: 18px; + } + body { + margin: 0; + font-family: 'Quicksand', sans-serif; + } + nav { + display: flex; + justify-content: space-between; + padding: 0 24px; + border-bottom: 1px solid var(--very-light-pink); + } + .menu { + display: none; + } + .logo { + width: 100px; + } + .navbar-left ul, + .navbar-right ul { + list-style: none; + padding: 0; + margin: 0; + display: flex; + align-items: center; + height: 60px; + } + .navbar-left { + display: flex; + } + .navbar-left ul { + margin-left: 12px; + } + .navbar-left ul li a, + .navbar-right ul li a { + text-decoration: none; + color: var(--very-light-pink); + border: 1px solid var(--white); + padding: 8px; + border-radius: 8px; + } + .navbar-left ul li a:hover, + .navbar-right ul li a:hover { + border: 1px solid var(--hospital-green); + color: var(--hospital-green); + } + .navbar-email { + color: var(--very-light-pink); + font-size: var(--sm); + margin-right: 12px; + } + .navbar-shopping-cart { + position: relative; + } + .navbar-shopping-cart div { + width: 16px; + height: 16px; + background-color: var(--hospital-green); + border-radius: 50%; + font-size: var(--sm); + font-weight: bold; + position: absolute; + top: -6px; + right: -3px; + display: flex; + justify-content: center; + align-items: center; + } + /* + menu desktop + */ + +.desktop-menu { + position: absolute; + background:var(--white); + top:60px; + right:60px; + width: 100px; + height: auto; + border: 1px solid var(--very-light-pink); + border-radius: 0 0 0 6px; + padding: 20px 20px 0 20px; + } + .desktop-menu ul { + list-style: none; + padding: 0; + margin: 0; + } + .desktop-menu ul li { + text-align: end; + } + .desktop-menu ul li:nth-child(1), + .desktop-menu ul li:nth-child(2) { + font-weight: bold; + } + .desktop-menu ul li:last-child { + padding-top: 20px; + border-top: 1px solid var(--very-light-pink); + } + .desktop-menu ul li:last-child a { + color: var(--hospital-green); + font-size: var(--sm); + } + .desktop-menu ul li a { + color: var(--back); + text-decoration: none; + margin-bottom: 20px; + display: inline-block; + } + + .inactive{ + display: none; + } + + /*mobil menu*/ + + .mobile-menu { + left:0; + width:100%; + background: var(--white); + position: absolute; + top: 61px; + padding: 24px; + } + .mobile-menu a { + text-decoration: none; + color: var(--black); + font-weight: bold; + /* margin-bottom: 24px; */ + } + .mobile-menu ul { + padding: 0; + margin: 24px 0 0; + list-style: none; + } + .mobile-menu ul:nth-child(1) { + border-bottom: 1px solid var(--very-light-pink); + } + .mobile-menu ul li { + margin-bottom: 24px; + } + .email { + font-size: var(--sm); + font-weight: 300 !important; + } + .sign-out { + font-size: var(--sm); + color: var(--hospital-green) !important; + } + + /* PRODUCT DETAIL */ + +aside { + background: var(--white); + width: 360px; + padding: 24px; + box-sizing: border-box; + position: absolute; + right: 0; + } + .title-container { + display: flex; + } + .title-container img { + transform: rotate(180deg); + margin-right: 14px; + } + .title { + font-size: var(--lg); + font-weight: bold; + } + .order { + display: grid; + grid-template-columns: auto 1fr; + gap: 16px; + align-items: center; + background-color: var(--text-input-field); + margin-bottom: 24px; + border-radius: 8px; + padding: 0 24px; + } + .order p:nth-child(1) { + display: flex; + flex-direction: column; + } + .order p span:nth-child(1) { + font-size: var(--md); + font-weight: bold; + } + .order p:nth-child(2) { + text-align: end; + font-weight: bold; + } + .shopping-cart { + display: grid; + grid-template-columns: auto 1fr auto auto; + gap: 16px; + margin-bottom: 24px; + align-items: center; + } + .shopping-cart figure { + margin: 0; + } + .shopping-cart figure img { + width: 70px; + height: 70px; + border-radius: 20px; + object-fit: cover; + } + .shopping-cart p:nth-child(2) { + color: var(--very-light-pink); + } + .shopping-cart p:nth-child(3) { + font-size: var(--md); + font-weight: bold; + } + .primary-button { + background-color: var(--hospital-green); + border-radius: 8px; + border: none; + color: var(--white); + width: 100%; + cursor: pointer; + font-size: var(--md); + font-weight: bold; + height: 50px; + } + /* Product List */ + + .cards-container { + margin-top: 20px; + display: grid; + grid-template-columns: repeat(auto-fill, 240px); + gap: 26px; + place-content: center; +} +.product-card { + width: 240px; +} +.product-card img { + width: 240px; + height: 240px; + border-radius: 20px; + object-fit: cover; +} +.product-info { + display: flex; + justify-content: space-between; + align-items: center; + margin-top: 12px; +} +.product-info figure { + margin: 0; +} +.product-info figure img { + width: 35px; + height: 35px; +} +.product-info div p:nth-child(1) { + font-weight: bold; + font-size: var(--md); + margin-top: 0; + margin-bottom: 4px; +} +.product-info div p:nth-child(2) { + font-size: var(--sm); + margin-top: 0; + margin-bottom: 0; + color: var(--very-light-pink); +} + +/* product detail del carrito */ +#productDetail { + background: var(--white); + width: 360px; + padding-bottom: 24px; + position: absolute; + right: 0; +} +.product-detail-close { + background: var(--white); + width: 14px; + height: 14px; + position: absolute; + top: 24px; + left: 24px; + z-index: 2; + padding: 12px; + border-radius: 50%; +} +.product-detail-close:hover { + cursor: pointer; +} +#productDetail > img:nth-child(2) { + width: 100%; + height: 360px; + object-fit: cover; + border-radius: 0 0 20px 20px; +} +#productDetail > .productI nfo { + margin: 24px 24px 0 24px; +} +#productDetail > .productInfo p:nth-child(1) { + font-weight: bold; + font-size: var(--md); + margin-top: 0; + margin-bottom: 4px; +} +#productDetail > .productInfo p:nth-child(2) { + color: var(--very-light-pink); + font-size: var(--md); + margin-top: 0; + margin-bottom: 36px; +} +#productDetail > .productInfo p:nth-child(3) { + color: var(--very-light-pink); + font-size: var(--sm); + margin-top: 0; + margin-bottom: 36px; +} +#productDetail > .productInfo .primary-button { + background-color: var(--hospital-green); + border-radius: 8px; + border: none; + color: var(--white); + width: 100%; + cursor: pointer; + font-size: var(--md); + font-weight: bold; + height: 50px; +} +#productDetail > .productInfo .add-to-cart-button { + display: flex; + align-items: center; + justify-content: center; +} + +@media (max-width: 640px) { + .menu { + display: block; + } + .navbar-left ul { + display: none; + } + .navbar-email { + display: none; + } + .desktop-menu{ + display:none; + } + + .product-detail { + width: 100%; + } + + .cards-container { + grid-template-columns: repeat(auto-fill, 140px); + } + .product-card { + width: 140px; + } + .product-card img { + width: 140px; + height: 140px; + } + + +} + +@media(min-width: 639px) { + .mobile-menu{ + display:none; + } +} + \ No newline at end of file