diff --git a/clase1.html b/class1-create-new-password.html similarity index 100% rename from clase1.html rename to class1-create-new-password.html diff --git a/clase10.html b/class10-my-order-history.html similarity index 100% rename from clase10.html rename to class10-my-order-history.html diff --git a/clase11.html b/class11-navbar.html similarity index 100% rename from clase11.html rename to class11-navbar.html diff --git a/clase12.html b/class12-product-info.html similarity index 100% rename from clase12.html rename to class12-product-info.html diff --git a/clase13.html b/class13-checkout-cart.html similarity index 100% rename from clase13.html rename to class13-checkout-cart.html diff --git a/clase2.html b/class2-email-sent.html similarity index 100% rename from clase2.html rename to class2-email-sent.html diff --git a/clase3.html b/class3-login.html similarity index 100% rename from clase3.html rename to class3-login.html diff --git a/clase4.html b/class4-My-account.html similarity index 100% rename from clase4.html rename to class4-My-account.html diff --git a/clase5.html b/class5-Account-edit.html similarity index 100% rename from clase5.html rename to class5-Account-edit.html diff --git a/clase6.html b/class6-home.html similarity index 100% rename from clase6.html rename to class6-home.html diff --git a/clase7.html b/class7-menu.html similarity index 100% rename from clase7.html rename to class7-menu.html diff --git a/clase8.html b/class8-menu-mobile.html similarity index 100% rename from clase8.html rename to class8-menu-mobile.html diff --git a/clase9.html b/class9-my-order.html similarity index 100% rename from clase9.html rename to class9-my-order.html diff --git a/index.html b/index.html new file mode 100644 index 000000000..edca5eb36 --- /dev/null +++ b/index.html @@ -0,0 +1,186 @@ + + + + + + + + + + + + + YardSale: Garage Online Sale + + + + + + + + +
+
+ +
+ + + + \ No newline at end of file diff --git a/main.js b/main.js new file mode 100644 index 000000000..64bcdbace --- /dev/null +++ b/main.js @@ -0,0 +1,144 @@ +const menuEmail = document.querySelector(".navbar-email"); +const desktopMenu = document.querySelector(".desktop-menu"); +const menuHamIcon = document.querySelector(".menu"); +const shoppingCartIcon = document.querySelector(".navbar-shopping-cart"); +const productDetailCloseIcon = document.querySelector('.product-detail-close') +const mobileMenu = document.querySelector(".mobile-menu"); +const shoppingCartContainer = document.querySelector('#shoppingCartContainer'); +const productDetailContainer = document.querySelector('#productDetail'); +const cardsContainer = document.querySelector('.cards-container'); + + +menuEmail.addEventListener('click', toggleDesktopMenu) +menuHamIcon.addEventListener('click', toggleMobileMenu) +shoppingCartIcon.addEventListener('click', toggleShoppingCartAside) +productDetailCloseIcon.addEventListener('click', closeProductDetailAside) + +function toggleDesktopMenu() { + + const isAsideOpen = !shoppingCartContainer.classList.contains('inactive') + const isProductDetailOpen = !productDetailContainer.classList.contains('inactive') + + if (isAsideOpen) { + shoppingCartContainer.classList.add('inactive') + } else if (isProductDetailOpen) { + productDetailContainer.classList.add('inactive') + } + + desktopMenu.classList.toggle('inactive') +} + +function toggleMobileMenu() { + const isAsideOpen = !shoppingCartContainer.classList.contains('inactive') + const isProductDetailOpen = !productDetailContainer.classList.contains('inactive') + + if (isProductDetailOpen) { + productDetailContainer.classList.add('inactive') + } else if (isAsideOpen) { + shoppingCartContainer.classList.add('inactive') + + } + + mobileMenu.classList.toggle('inactive') + +} + +function toggleShoppingCartAside() { + const isMobileMenuOpen = !mobileMenu.classList.contains('inactive') + const isDesktopMenuOpen = !desktopMenu.classList.contains('inactive') + const isProductDetailOpen = !productDetailContainer.classList.contains('inactive') + + if (isProductDetailOpen) { + productDetailContainer.classList.add('inactive') + } else if (isMobileMenuOpen) { + mobileMenu.classList.add('inactive') + + } else if (isDesktopMenuOpen) { + desktopMenu.classList.add('inactive') + } + + shoppingCartContainer.classList.toggle('inactive') + +} + +function openProductDetailAside() { + const isDesktopMenuOpen = !desktopMenu.classList.contains('inactive') + const isAsideOpen = !shoppingCartContainer.classList.contains('inactive') + + if (isAsideOpen) { + shoppingCartContainer.classList.add('inactive') + + } else if (isDesktopMenuOpen) { + desktopMenu.classList.add('inactive') + } + productDetailContainer.classList.remove('inactive') + +} + +function closeProductDetailAside() { + productDetailContainer.classList.add('inactive') + + +} +const productArray = []; +productArray.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' +}) +productArray.push({ + name: 'Screen', + price: 220, + image: 'https://images.pexels.com/photos/6476808/pexels-photo-6476808.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1' +}) +productArray.push({ + name: 'Computer', + price: 620, + image: 'https://images.pexels.com/photos/461064/pexels-photo-461064.jpeg?auto=compress&cs=tinysrgb&w=600' +}) + + +function renderProducts(arr) { + for (product of arr) { + 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 productInfo = document.createElement('div') + productInfo.classList.add('product-info') + + const productInfoDiv = document.createElement('div') + + + const productPrice = document.createElement('p') + productPrice.innerText = '$' + product.price; + + const productName = document.createElement('p') + productName.innerText = product.name; + + productInfoDiv.appendChild(productPrice) + productInfoDiv.appendChild(productName) + + const productInfoFigure = document.createElement('figure'); + 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(productArray) + diff --git a/styles.css b/styles.css new file mode 100644 index 000000000..8fb08d61e --- /dev/null +++ b/styles.css @@ -0,0 +1,447 @@ +/* General */ + +: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; +} + +/* Navbar (general) */ + +nav { + display: flex; + justify-content: space-between; + padding: 0 24px; + border-bottom: 1px solid var(--very-light-pink); + caret-color: transparent +} + +.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; + cursor: pointer; + caret-color: transparent; +} + +.navbar-shopping-cart { + position: relative; + cursor: pointer; +} + +.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; +} + +/* Desktop menu */ + +.desktop-menu { + width: 100px; + height: auto; + border: 1px solid var(--very-light-pink); + border-radius: 6px; + padding: 20px 20px 0 20px; + position: absolute; + background: var(--white); + top: 60px; + right: 60px; +} + +.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; +} + +/* mobile menu*/ + +.mobile-menu { + padding: 0 24px; + position: absolute; + top: 60px; + cursor: pointer; + background: white; + margin-top: 1px; + left: 0; + width: 100%; + +} + +.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; +} + +.inactive { + display: none; +} + +/* Aside Product Detail */ + +aside { + width: 360px; + box-sizing: border-box; + position: absolute; + right: 0; + background: white; +} + +/* Shopping Cart */ + +#shoppingCartContainer { + padding: 0 24px; +} + +.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; + cursor: pointer; + +} + +.shopping-cart figure { + margin: 0; +} + +.shopping-cart figure img { + width: 70px; + height: 70px; + border-radius: 20px; + object-fit: cover; + cursor: pointer; +} + +.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 { + display: grid; + grid-template-columns: repeat(auto-fill, 240px); + gap: 26px; + place-content: center; + margin-top: 20px; +} + +.product-card { + width: 240px; + caret-color: transparent +} + +.product-card img { + width: 240px; + height: 240px; + border-radius: 20px; + object-fit: cover; + cursor: pointer; +} + +.product-card .product-info { + display: flex; + justify-content: space-between; + align-items: center; + margin-top: 12px; +} + +.product-card .product-info figure { + margin: 0; +} + +.product-card .product-info figure img { + width: 35px; + height: 35px; +} + +.product-card .product-info div p:nth-child(1) { + font-weight: bold; + font-size: var(--md); + margin-top: 0; + margin-bottom: 4px; +} + +.product-card .product-info div p:nth-child(2) { + font-size: var(--sm); + margin-top: 0; + margin-bottom: 0; + color: var(--very-light-pink); +} + +/* Product Detail */ + + .product-detail-close { + background: var(--white); + width: 14px; + height: 14px; + position: absolute; + top: 24px; + left: 24px; + z-index: 2; + padding: 12px; + border-radius: 50%; + caret-color: transparent; + } + .product-detail-close:hover { + cursor: pointer; + } + #productDetail > img:nth-child(2) { + width: 100%; + height: 360px; + object-fit: cover; + border-radius: 0 0 20px 20px; + } + .product-info { + margin: 24px 24px 0 24px; + } + .product-info p:nth-child(1) { + font-weight: bold; + font-size: var(--md); + margin-top: 0; + margin-bottom: 4px; + } + .product-info p:nth-child(2) { + color: var(--very-light-pink); + font-size: var(--md); + margin-top: 0; + margin-bottom: 36px; + } + .product-info p:nth-child(3) { + color: var(--very-light-pink); + font-size: var(--sm); + margin-top: 0; + margin-bottom: 36px; + } + .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; + } + .add-to-cart-button { + display: flex; + align-items: center; + justify-content: center; + } + + +@media (max-width: 640px) { + .menu { + display: block; + cursor: pointer; + } + + .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: 641px) { + .mobile-menu { + display: none; + } +} \ No newline at end of file