Skip to content

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

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

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
9519b57
Creé los archivos iniciales (html, css, js) para empezar a unificar e…
4NY33L Apr 10, 2025
d7e45d9
Unifiqué la navbar con el menú desktop y con el menú mobile. Agregamo…
4NY33L Apr 10, 2025
c14db4e
Integré el aside del carrito de compras en el index.html y programé c…
4NY33L Apr 11, 2025
65a5806
Integré el main (osea la lista de productos) al index.html. Quité la …
4NY33L Apr 11, 2025
2be4192
1. Programé con JavaScript que cuando se dé click en alguna card de u…
4NY33L Apr 15, 2025
b2dbc31
Listo, ya hice que cada componente se abra y se cierre dependiendo lo…
4NY33L Apr 15, 2025
62b2cc5
Ya solucioné el tema del scroll. Realmente no era porque al darle un …
4NY33L Apr 15, 2025
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
192 changes: 192 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,192 @@
<!DOCTYPE html>
<html lang="en">

<head>
<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>Yard Sale</title>
</head>

<body>
<nav>
<img src="./icons/icon_menu.svg" alt="menu" class="menu">

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

<ul>
<li>
<a href="/">All</a>
</li>
<li>
<a href="/">Clothes</a>
</li>
<li>
<a href="/">Electronics</a>
</li>
<li>
<a href="/">Furnitures</a>
</li>
<li>
<a href="/">Toys</a>
</li>
<li>
<a href="/">Others</a>
</li>
</ul>
</div>

<div class="navbar-right">
<ul>
<li class="navbar-email">[email protected]</li>
<li class="navbar-shopping-cart">
<img src="./icons/icon_shopping_cart.svg" alt="shopping cart">
<div>2</div>
</li>
</ul>
</div>

<div class="mobile-menu inactive">
<ul>
<li>
<a href="/">CATEGORIES</a>
</li>
<li>
<a href="/">All</a>
</li>
<li>
<a href="/">Clothes</a>
</li>
<li>
<a href="/">Electronics</a>
</li>
<li>
<a href="/">Furnitures</a>
</li>
<li>
<a href="/">Toys</a>
</li>
<li>
<a href="/">Other</a>
</li>
</ul>

<ul>
<li>
<a href="/">My orders</a>
</li>
<li>
<a href="/">My account</a>
</li>
</ul>

<ul>
<li>
<a href="/" class="email">[email protected]</a>
</li>
<li>
<a href="/" class="sign-out">Sign out</a>
</li>
</ul>
</div>

<div class="desktop-menu inactive">
<ul>
<li>
<a href="/" class="title">My orders</a>
</li>

<li>
<a href="/">My account</a>
</li>

<li>
<a href="/">Sign out</a>
</li>
</ul>
</div>
</nav>

<aside class="cart-detail inactive">
<div class="title-container">
<img src="./icons/flechita.svg" alt="arrow">
<p class="title">My order</p>
</div>

<div class="my-order-content">
<div class="shopping-cart">
<figure>
<img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
alt="bike">
</figure>
<p>Bike</p>
<p>$30,00</p>
<img src="./icons/icon_close.png" alt="close">
</div>

<div class="shopping-cart">
<figure>
<img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
alt="bike">
</figure>
<p>Bike</p>
<p>$30,00</p>
<img src="./icons/icon_close.png" alt="close">
</div>

<div class="shopping-cart">
<figure>
<img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
alt="bike">
</figure>
<p>Bike</p>
<p>$30,00</p>
<img src="./icons/icon_close.png" alt="close">
</div>

<div class="order">
<p>
<span>Total</span>
</p>
<p>$560.00</p>
</div>

<button class="primary-button">
Checkout
</button>
</div>
</div>
</aside>

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

<!-- <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> -->
</div>
</section>

<aside class="product-detail">

</aside>

<script src="./script.js"></script>
</body>

</html>
136 changes: 136 additions & 0 deletions script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,136 @@
const navbarEmail = document.querySelector(".navbar-email")
const desktopMenu = document.querySelector(".desktop-menu")
const burgerMenu = document.querySelector(".menu")
const mobileMenu = document.querySelector(".mobile-menu")
const asideCartDetail = document.querySelector(".cart-detail")
const iconShoppingCart = document.querySelector(".navbar-shopping-cart")
const productCardContainer = document.querySelector(".cards-container")
const asideProductDetail = document.querySelector(".product-detail")
const productList = [
{
id: 1,
name: "Audífonos",
price: 35,
img: "https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
},
{
id: 2,
name: "Silla Gamer",
price: 400,
img: "https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
},
{
id: 3,
name: "Oversize",
price: 60,
img: "https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
},
{
id: 4,
name: "Pantaloneta",
price: 20,
img: "https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
},
{
id: 5,
name: "Gorra RedBull Batalla",
price: 90,
img: "https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
},
{
id: 6,
name: "Jordan Retro one",
price: 150,
img: "https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
}
]

navbarEmail.addEventListener("click", toggleDisplayDesktopMenu)
burgerMenu.addEventListener("click", toggleDisplayMobileMenu)
iconShoppingCart.addEventListener("click", toggleDisplayAsideCartDetail)

renderProducts(productList)

const inputsProduct = [...document.querySelectorAll(".cards-container input")]
inputsProduct.forEach((input) => {
input.addEventListener("click", showProductDetail)
})

function toggleDisplayDesktopMenu() {
if (!asideCartDetail.classList.contains("inactive")) {
asideCartDetail.classList.add("inactive")
}
desktopMenu.classList.toggle("inactive")
}

function toggleDisplayMobileMenu() {
if (!asideCartDetail.classList.contains("inactive")) {
asideCartDetail.classList.add("inactive")
}
mobileMenu.classList.toggle("inactive")
}

function toggleDisplayAsideCartDetail() {
if (!mobileMenu.classList.contains("inactive")) {
mobileMenu.classList.add("inactive")
}
if (!desktopMenu.classList.contains("inactive")) {
desktopMenu.classList.add("inactive")
}
if (!asideProductDetail.classList.contains("inactive")) {
asideProductDetail.classList.add("inactive")
}
asideCartDetail.classList.toggle("inactive")
}

function renderProducts(arr) {
for (let product of arr) {
const productCard = `<label for=${product.id} class="product-card">
<img src=${product.img}
alt=${product.name}>
<div class="product-info">
<div>
<p>$${product.price}</p>
<p>${product.name}</p>
</div>
<figure>
<img src="./icons/bt_add_to_cart.svg" alt="">
</figure>
</div>
</label>
<input type="radio" id=${product.id} name="product" style="display: none">`

productCardContainer.insertAdjacentHTML("beforeend", productCard)
}
}

function showProductDetail(ev) {
asideProductDetail.classList.remove("inactive")
asideCartDetail.classList.add("inactive")
mobileMenu.classList.add("inactive")
const inputChecked = ev.target
console.log(inputChecked.checked)
const product = productList.find(product => product.id === +inputChecked.id)

const templateProductDetail = `
<div class="product-detail-close">
<img src="./icons/icon_close.png" alt="close">
</div>
<img src=${product.img}>
<div class="product-info">
<p>$${product.price}</p>
<p>${product.name}</p>
<p>With its practical position, this bike also fulfills a decorative function, add your hall or workspace.</p>
<button class="primary-button add-to-cart-button">
<img src="./icons/bt_add_to_cart.svg" alt="add to cart">
Add to cart
</button>
</div>`
asideProductDetail.innerHTML = templateProductDetail
const productDetailClose = document.querySelector(".product-detail-close")
productDetailClose.addEventListener("click", closeAsideProductDetail)
}

function closeAsideProductDetail() {
asideProductDetail.classList.add("inactive")
}
Loading