Skip to content

Fusión de componentes de la vista principal #2200

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

Fusión de componentes de la vista principal #2200

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
ec6232f
fusion navbar con menudesktop
redworld22 May 26, 2024
7be416f
Fusion mobileMenu con Navbar
redworld22 May 27, 2024
a416ce8
fusion aside con documento principal, correcto de una etiqueta de cie…
redworld22 May 27, 2024
acb3b89
fusion aside con documento principal, corrección de una etiqueta de c…
redworld22 May 27, 2024
91d0abe
Merge branch 'main' of github.com:redworld22/Curso-Frontend-Developer…
redworld22 May 27, 2024
13a26e4
fusion del listado de productos con maquetacion en JS
redworld22 May 28, 2024
f356b6c
fusion del productDetail
redworld22 May 29, 2024
90ef8d3
Se agregó la función para abrir productDetailAside desde productCartA…
redworld22 May 29, 2024
6b8692a
mejoramiento de la lógica en la función toggleDesktopMenu()
redworld22 May 30, 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
1 change: 0 additions & 1 deletion clase13.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -150,7 +150,6 @@
Checkout
</button>
</div>
</div>
</aside>
</body>
</html>
199 changes: 199 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,199 @@
<!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>YardSale: tienda online de cositas bonitas!</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="shoppingCartDetail" class="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="inactive">
<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="Imagen de una bicicleta">
<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>
105 changes: 105 additions & 0 deletions main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
const menuEmail = document.querySelector('.navbar-email');
const desktopMenu = document.querySelector('.desktop-menu');
const menuHamIcon = document.querySelector('.menu');
const productDetailClose = document.querySelector('.product-detail-close')
const mobileMenu = document.querySelector('.mobile-menu');
const shoppingCartDetail = document.querySelector('#shoppingCartDetail');
const productDetailContainer = document.querySelector('#productDetail');
const cartbtn = document.querySelector('.navbar-shopping-cart');
const cardsContainer = document.querySelector('.cards-container');

menuEmail.addEventListener('click', toggleDesktopmenu);
menuHamIcon.addEventListener('click', toggleMobileMenu);
cartbtn.addEventListener('click', toggleAsideMenu);
productDetailClose.addEventListener('click', closeProductDetail)


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

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

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

function closeProductDetail() {
productDetailContainer.classList.add('inactive');
};

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

productList = [];

productList.push({
name: 'Bike',
price: 520.00,
image: "https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
});

productList.push({
name: 'Laptop',
price: 750.00,
image: "https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
});

productList.push({
name: 'Smart Tv',
price: 640.00,
image: "https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940"
});

for (product of productList) {
const productCardDiv = document.createElement('div');
productCardDiv.classList.add('product-card');

const imageProduct = document.createElement('img');
imageProduct.setAttribute('src', product.image);
imageProduct.addEventListener('click', openProductDetailAside);

const productInfoDiv = document.createElement('div');
productInfoDiv.classList.add('product-info');

const divInProductInfo = document.createElement('div');

const priceInfo = document.createElement('p');
priceInfo.innerHTML = '$' + product.price;

const nameInfo = document.createElement('p');
nameInfo.innerHTML = product.name;

const figureCart = document.createElement('figure');
const imageCart = document.createElement('img');
imageCart.setAttribute('src', "./icons/bt_add_to_cart.svg");

figureCart.appendChild(imageCart);

divInProductInfo.appendChild(nameInfo);
divInProductInfo.appendChild(priceInfo);

productInfoDiv.appendChild(divInProductInfo);
productInfoDiv.appendChild(figureCart);

productCardDiv.appendChild(imageProduct);
productCardDiv.appendChild(productInfoDiv);

cardsContainer.appendChild(productCardDiv);
};

Loading