Skip to content

Fusion de los componentes de la vista principal #2214

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

Fusion de los componentes de la vista principal #2214

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4bc83e0
se fusiono el menu en desktop y en mobile, tambien se fusiono el carr…
Jul 8, 2024
d3232ce
se agrego y se arreglo el product detail
Jul 8, 2024
6074597
se hizo la interaccion entre todos los componentes
Jul 8, 2024
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
209 changes: 209 additions & 0 deletions Z-index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,209 @@
<!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>YartSale: tienda online de productos</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="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>

<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>

</nav>

<aside id="shoppingCartContaier" class="product-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>

</aside>

<aside id="productDetail" class="">
<div class="product-detail-close">
<img src="./icons/icon_close.png" alt="close">
</div>
<img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="bike">
<div class="product-info">
<p>$35,00</p>
<p>Bike</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>
</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>

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


</body>
</html>
124 changes: 124 additions & 0 deletions main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,124 @@
//Navbar - Menus
const menuEmail = document.querySelector('.navbar-email');
const desktopMenu = document.querySelector('.desktop-menu');
const mobileMenu = document.querySelector('.mobile-menu');
//iconos
const menuMobileIcone = document.querySelector('.menu');
const menuCarIcon = document.querySelector('.navbar-shopping-cart');
const productDetailCloseIcon = document.querySelector('.product-detail-close')
//product list - Product detail
const shoppingCartContainer = document.querySelector('#shoppingCartContaier');
const cardContainer = document.querySelector('.cards-container');
const productDetailContainer = document.querySelector('#productDetail')




menuEmail.addEventListener('click', toggleDesktopMenu);
menuMobileIcone.addEventListener('click', toggleMobileMenu);
menuCarIcon.addEventListener('click', toggleShoppingCartContaier)
productDetailCloseIcon.addEventListener('click', closeProductDetailAside)


function toggleDesktopMenu()
{
mobileMenu.classList.add('inactive');
shoppingCartContainer.classList.add('inactive');
productDetailContainer.classList.add('inactive')
desktopMenu.classList.toggle('inactive');
}

function toggleMobileMenu()
{
desktopMenu.classList.add('inactive');
productDetailContainer.classList.add('inactive')
mobileMenu.classList.toggle('inactive');
}

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

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

const productList = [];
productList.push({
name: 'Bicicleta Venzo Fx3 Stunt',
price: 120,
img: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSBV0hPpTMVmsJ8eofbNN4PlnDzfpzFBc7Xxg&usqp=CAU"
});
productList.push({
name: 'Samsung 27" S39C series 1000R',
price: 240,
img: "https://pisces.bbystatic.com/image2/BestBuy_US/images/products/6529/6529220cv12d.jpg"
});
productList.push({
name: 'Apple AirPods Pro 2nd Gen',
price: 300,
img: "https://www.epic.com.mt/wp-content/uploads/2023/03/AirPods_Pro_2nd-Gen-1.png"
});
productList.push({
name: 'Mouse Gamer T-Dagger Imperial RGB',
price: 60,
img: "https://pcgamermedellin.com/wp-content/uploads/2023/11/mouse-gamer-t-dagger-imperial-1-1.jpg"
});
productList.push({
name: 'Termo Inteligente Medidor De Temperatura',
price: 15,
img: "https://exitocol.vtexassets.com/arquivos/ids/12564297/termo-inteligente-medidor-de-temperatura.jpg?v=637865858209170000"
});


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

//product = {name, price, img} -> product.img
const productImg = document.createElement('img');
productImg.setAttribute('src', product.img)
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 productImgCard = document.createElement('img')
productImgCard.setAttribute('src', './icons/bt_add_to_cart.svg')

productInfoFigure.appendChild(productImgCard)

productInfo.appendChild(productInfoDiv)
productInfo.appendChild(productInfoFigure)

productCard.appendChild(productImg)
productCard.appendChild(productInfo)

cardContainer.appendChild(productCard)

}
}

renderProducts(productList);
Loading