Skip to content

Commit c241fab

Browse files
author
henrykotto
committed
agregando todas las modificaciones hasta la clase detalles de producto
1 parent 17027a4 commit c241fab

File tree

3 files changed

+387
-14
lines changed

3 files changed

+387
-14
lines changed

‎index.html‎

Lines changed: 120 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -40,13 +40,13 @@
4040
</div>
4141

4242
<div class="navbar-right">
43-
<ul>
44-
<li class="navbar-email">[email protected]</li>
45-
<li class="navbar-shopping-cart">
46-
<img src="./icons/icon_shopping_cart.svg" alt="shopping cart">
47-
<div>2</div>
48-
</li>
49-
</ul>
43+
<ul>
44+
<li class="navbar-email">[email protected]</li>
45+
<li class="navbar-shopping-cart">
46+
<img src="./icons/icon_shopping_cart.svg" alt="shopping cart">
47+
<div>2</div>
48+
</li>
49+
</ul>
5050
</div>
5151

5252
<div class="desktop-menu inactive" >
@@ -64,7 +64,119 @@
6464
</li>
6565
</ul>
6666
</div>
67-
</nav>
67+
68+
<div class="mobile-menu inactive">
69+
<ul>
70+
<li>
71+
<a href="/">CATEGORIES</a>
72+
</li>
73+
<li>
74+
<a href="/">All</a>
75+
</li>
76+
<li>
77+
<a href="/">Clothes</a>
78+
</li>
79+
<li>
80+
<a href="/">Electronics</a>
81+
</li>
82+
<li>
83+
<a href="/">Furnitures</a>
84+
</li>
85+
<li>
86+
<a href="/">Toys</a>
87+
</li>
88+
<li>
89+
<a href="/">Other</a>
90+
</li>
91+
</ul>
92+
93+
<ul>
94+
<li>
95+
<a href="/">My orders</a>
96+
</li>
97+
<li>
98+
<a href="/">My account</a>
99+
</li>
100+
</ul>
101+
102+
<ul>
103+
<li>
104+
<a href="/" class="email">[email protected]</a>
105+
</li>
106+
<li>
107+
<a href="/" class="sign-out">Sign out</a>
108+
</li>
109+
</ul>
110+
</div>
111+
112+
</nav>
113+
114+
<aside class="product-detail inactive">
115+
<div class="title-container">
116+
<img src="./icons/flechita.svg" alt="arrow">
117+
<p class="title">My order</p>
118+
</div>
119+
120+
<div class="my-order-content">
121+
<div class="shopping-cart">
122+
<figure>
123+
<img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="bike">
124+
</figure>
125+
<p>Bike</p>
126+
<p>$30,00</p>
127+
<img src="./icons/icon_close.png" alt="close">
128+
</div>
129+
130+
<div class="shopping-cart">
131+
<figure>
132+
<img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="bike">
133+
</figure>
134+
<p>Bike</p>
135+
<p>$30,00</p>
136+
<img src="./icons/icon_close.png" alt="close">
137+
</div>
138+
139+
<div class="shopping-cart">
140+
<figure>
141+
<img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="bike">
142+
</figure>
143+
<p>Bike</p>
144+
<p>$30,00</p>
145+
<img src="./icons/icon_close.png" alt="close">
146+
</div>
147+
148+
<div class="order">
149+
<p>
150+
<span>Total</span>
151+
</p>
152+
<p>$560.00</p>
153+
</div>
154+
155+
<button class="primary-button">
156+
Checkout
157+
</button>
158+
</div>
159+
</div>
160+
</aside>
161+
162+
<section class="main-container">
163+
<div class="cards-container">
164+
165+
<!-- <div class="product-card">
166+
<img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
167+
<div class="product-info">
168+
<div>
169+
<p>$120,00</p>
170+
<p>Bike</p>
171+
</div>
172+
<figure>
173+
<img src="./icons/bt_add_to_cart.svg" alt="">
174+
</figure>
175+
</div>
176+
</div>-->
177+
178+
</div>
179+
</section>
68180
<script src="./main.js"></script>
69181
</body>
70182
</html>

‎main.js‎

Lines changed: 85 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,89 @@
1-
const navbarEmail =document.querySelector('.navbar-email')
2-
const desktopMenu =document.querySelector('.desktop-menu')
1+
const navbarEmail =document.querySelector('.navbar-email');
2+
const desktopMenu =document.querySelector('.desktop-menu');
3+
const menuHamIcon =document.querySelector('.menu');
4+
const mobileMenu =document.querySelector('.mobile-menu');
5+
const menuCarritoIcon =document.querySelector('.navbar-shopping-cart');
6+
const aside =document.querySelector('.product-detail');
7+
const cardsContainer = document.querySelector('.cards-container');
8+
9+
10+
navbarEmail.addEventListener('click', toggleDesktopMenu);
11+
menuHamIcon.addEventListener('click', toggleMobileMenu);
12+
menuCarritoIcon.addEventListener('click', toggleCarritoMenu);
313

4-
navbarEmail.addEventListener('click', toggleDesktopMenu)
514

615
function toggleDesktopMenu(){
16+
const isAsideClose2 = aside.classList.contains('inactive');
17+
if(!isAsideClose2){
18+
aside.classList.add('inactive');
19+
}
720
desktopMenu.classList.toggle('inactive');
8-
}
21+
}
22+
function toggleMobileMenu(){
23+
const isAsideClose = aside.classList.contains('inactive');
24+
if(!isAsideClose){
25+
aside.classList.add('inactive');
26+
}
27+
mobileMenu.classList.toggle('inactive');
28+
}
29+
function toggleCarritoMenu(){
30+
const isMobileMenuClose = mobileMenu.classList.contains('inactive');
31+
const isDesktopMenuClose = desktopMenu.classList.contains('inactive');
32+
if(!isMobileMenuClose){
33+
mobileMenu.classList.add('inactive');
34+
}else if(!isDesktopMenuClose){
35+
desktopMenu.classList.add('inactive');
36+
}
37+
aside.classList.toggle('inactive');
38+
}
39+
40+
const productList = []
41+
productList.push({
42+
name:'bike',
43+
price: 120,
44+
image: 'https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940',
45+
46+
});
47+
productList.push({
48+
name:'Pantalla',
49+
price: 120,
50+
image: 'https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940',
51+
52+
});
53+
productList.push({
54+
name:'CPU',
55+
price: 120,
56+
image: 'https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940',
57+
58+
});
59+
60+
function renderProduct(arr){
61+
for(product of arr){
62+
const productCard = document.createElement('div');
63+
productCard.classList.add('product-card');
64+
const productImge = document.createElement('img');
65+
productImge.setAttribute('src', product.image);
66+
const productInfo = document.createElement('div');
67+
productInfo.classList.add('product-info');
68+
const productInfoDiv = document.createElement('div');
69+
const productPrice = document.createElement('p');
70+
productPrice.innerText ='$'+product.price;
71+
const productName = document.createElement('p');
72+
productName.innerText = product.name;
73+
productInfoDiv.appendChild(productPrice);
74+
productInfoDiv.appendChild(productName);
75+
76+
const productInfoFigure = document.createElement('figure');
77+
const productImg = document.createElement('img');
78+
productImg.setAttribute('src', './icons/bt_add_to_cart.svg');
79+
productInfoFigure.appendChild(productImg);
80+
productInfo.appendChild(productInfoDiv);
81+
productInfo.appendChild(productInfoFigure);
82+
83+
productCard.appendChild(productImge);
84+
productCard.appendChild(productInfo);
85+
86+
cardsContainer.appendChild(productCard);
87+
}
88+
}
89+
renderProduct(productList);

0 commit comments

Comments
 (0)