Skip to content

Commit cd8c453

Browse files
juandcjuandc
committed
carrito
1 parent 9e37fee commit cd8c453

File tree

3 files changed

+158
-1
lines changed

3 files changed

+158
-1
lines changed

‎index.html

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -113,6 +113,54 @@
113113
</div>
114114
</nav>
115115

116+
<aside class="product-detail inactive">
117+
<div class="title-container">
118+
<img src="./icons/flechita.svg" alt="arrow">
119+
<p class="title">My order</p>
120+
</div>
121+
122+
<div class="my-order-content">
123+
<div class="shopping-cart">
124+
<figure>
125+
<img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="bike">
126+
</figure>
127+
<p>Bike</p>
128+
<p>$30,00</p>
129+
<img src="./icons/icon_close.png" alt="close">
130+
</div>
131+
132+
<div class="shopping-cart">
133+
<figure>
134+
<img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="bike">
135+
</figure>
136+
<p>Bike</p>
137+
<p>$30,00</p>
138+
<img src="./icons/icon_close.png" alt="close">
139+
</div>
140+
141+
<div class="shopping-cart">
142+
<figure>
143+
<img src="https://images.pexels.com/photos/276517/pexels-photo-276517.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="bike">
144+
</figure>
145+
<p>Bike</p>
146+
<p>$30,00</p>
147+
<img src="./icons/icon_close.png" alt="close">
148+
</div>
149+
150+
<div class="order">
151+
<p>
152+
<span>Total</span>
153+
</p>
154+
<p>$560.00</p>
155+
</div>
156+
157+
<button class="primary-button">
158+
Checkout
159+
</button>
160+
</div>
161+
</div>
162+
</aside>
163+
116164
<script src="./main.js"></script>
117165
</body>
118166
</html>

‎main.js

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,40 @@
11
const menuEmail = document.querySelector('.navbar-email');
2-
const desktopMenu = document.querySelector('.desktop-menu');
32
const menuHamIcon = document.querySelector('.menu');
3+
const menuCarritoIcon = document.querySelector('.navbar-shopping-cart');
4+
const desktopMenu = document.querySelector('.desktop-menu');
45
const mobileMenu = document.querySelector('.mobile-menu');
6+
const aside = document.querySelector('.product-detail');
57

68
menuEmail.addEventListener('click', toggleDesktopMenu);
79
menuHamIcon.addEventListener('click', toggleMobileMenu);
10+
menuCarritoIcon.addEventListener('click', toggleCarritoAside);
811

912
function toggleDesktopMenu() {
13+
const isAsideClosed = aside.classList.contains('inactive');
14+
15+
if (!isAsideClosed) {
16+
aside.classList.add('inactive');
17+
}
18+
1019
desktopMenu.classList.toggle('inactive');
1120
}
1221

1322
function toggleMobileMenu() {
23+
const isAsideClosed = aside.classList.contains('inactive');
24+
25+
if (!isAsideClosed) {
26+
aside.classList.add('inactive');
27+
}
28+
1429
mobileMenu.classList.toggle('inactive');
1530
}
31+
32+
function toggleCarritoAside() {
33+
const isMobileMenuClosed = mobileMenu.classList.contains('inactive');
34+
35+
if (!isMobileMenuClosed) {
36+
mobileMenu.classList.add('inactive');
37+
}
38+
39+
aside.classList.toggle('inactive');
40+
}

‎styles.css

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -124,6 +124,7 @@ nav {
124124

125125
/* Menu en mobile */
126126
.mobile-menu {
127+
background-color: var(--white);
127128
position: absolute;
128129
top: 60px;
129130
padding: 24px;
@@ -155,6 +156,85 @@ nav {
155156
}
156157

157158

159+
/* Aside (product detail y carrito) */
160+
.product-detail {
161+
background-color: var(--white);
162+
width: 360px;
163+
padding: 0 24px;
164+
box-sizing: border-box;
165+
position: absolute;
166+
right: 0;
167+
}
168+
.title-container {
169+
display: flex;
170+
}
171+
.title-container img {
172+
transform: rotate(180deg);
173+
margin-right: 14px;
174+
}
175+
.title {
176+
font-size: var(--lg);
177+
font-weight: bold;
178+
}
179+
.order {
180+
display: grid;
181+
grid-template-columns: auto 1fr;
182+
gap: 16px;
183+
align-items: center;
184+
background-color: var(--text-input-field);
185+
margin-bottom: 24px;
186+
border-radius: 8px;
187+
padding: 0 24px;
188+
}
189+
.order p:nth-child(1) {
190+
display: flex;
191+
flex-direction: column;
192+
}
193+
.order p span:nth-child(1) {
194+
font-size: var(--md);
195+
font-weight: bold;
196+
}
197+
.order p:nth-child(2) {
198+
text-align: end;
199+
font-weight: bold;
200+
}
201+
.shopping-cart {
202+
display: grid;
203+
grid-template-columns: auto 1fr auto auto;
204+
gap: 16px;
205+
margin-bottom: 24px;
206+
align-items: center;
207+
}
208+
.shopping-cart figure {
209+
margin: 0;
210+
}
211+
.shopping-cart figure img {
212+
width: 70px;
213+
height: 70px;
214+
border-radius: 20px;
215+
object-fit: cover;
216+
}
217+
.shopping-cart p:nth-child(2) {
218+
color: var(--very-light-pink);
219+
}
220+
.shopping-cart p:nth-child(3) {
221+
font-size: var(--md);
222+
font-weight: bold;
223+
}
224+
.primary-button {
225+
background-color: var(--hospital-green);
226+
border-radius: 8px;
227+
border: none;
228+
color: var(--white);
229+
width: 100%;
230+
cursor: pointer;
231+
font-size: var(--md);
232+
font-weight: bold;
233+
height: 50px;
234+
}
235+
236+
237+
158238
@media (max-width: 640px) {
159239
.menu {
160240
display: block;
@@ -168,6 +248,10 @@ nav {
168248
.desktop-menu {
169249
display: none;
170250
}
251+
252+
.product-detail {
253+
width: 100%;
254+
}
171255
}
172256

173257
@media (min-width: 641px) {

0 commit comments

Comments
 (0)