Detalles del producto

FROSTYLAN · Sep 6, 2022 · 3b31efd · 3b31efd
1 parent 3805882
commit 3b31efd
Show file tree

Hide file tree

Showing 3 changed files with 109 additions and 16 deletions.
diff --git a/04-JavascriptPráctico/store/index.html b/04-JavascriptPráctico/store/index.html
@@ -87,7 +87,7 @@
       </div>
     </nav>
 
-    <aside class="product-detail inactive">
+    <aside id="shoppingCartContainer" class="inactive">
     <div class="title-container">
       <img src="../assets/icons/flechita.svg" alt="arrow">
       <p class="title">My order</p>
@@ -134,6 +134,28 @@
     </div>
   </div>
     </aside>
+
+    <aside id="productDetail" class="inactive">
+      <div class="product-detail-close">
+        <img src="../assets/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="../assets/icons/bt_add_to_cart.svg" alt="add to cart" />
+          Add to cart
+        </button>
+      </div>
+    </aside>
 
     <section class="main-container">
       <div class="cards-container">

diff --git a/04-JavascriptPráctico/store/main.js b/04-JavascriptPráctico/store/main.js
@@ -3,25 +3,25 @@ const desktopMenu = document.querySelector(".desktop-menu");
 const burgerMenuIcon = document.querySelector(".menu");
 const carMenuIcon = document.querySelector(".navbar-shopping-cart");
 const mobileMenu = document.querySelector(".mobile-menu");
-const aside = document.querySelector(".product-detail");
+const shoppingCartContainer = document.querySelector("#shoppingCartContainer");
 const cardsContainer = document.querySelector(".cards-container");
 
 menuEmail.addEventListener("click", toggleDesktopMenu);
 burgerMenuIcon.addEventListener("click", toggleMobileMenu);
 carMenuIcon.addEventListener("click", toggleCarMenuAside);
 
 function toggleDesktopMenu() {
-  const isAsideOpen = !aside.classList.contains("inactive");
+  const isAsideOpen = !shoppingCartContainer.classList.contains("inactive");
 
-  if (isAsideOpen) aside.classList.add("inactive");
+  if (isAsideOpen) shoppingCartContainer.classList.add("inactive");
 
   desktopMenu.classList.toggle("inactive");
 }
 
 function toggleMobileMenu() {
-  const isAsideOpen = !aside.classList.contains("inactive");
+  const isAsideOpen = !shoppingCartContainer.classList.contains("inactive");
 
-  if (isAsideOpen) aside.classList.add("inactive");
+  if (isAsideOpen) shoppingCartContainer.classList.add("inactive");
 
   mobileMenu.classList.toggle("inactive");
 }
@@ -35,7 +35,7 @@ function toggleCarMenuAside() {
     desktopMenu.classList.add("inactive");
   }
 
-  aside.classList.toggle("inactive");
+  shoppingCartContainer.classList.toggle("inactive");
 }
 
 function renderProduct(arr) {

diff --git a/04-JavascriptPráctico/store/styles.css b/04-JavascriptPráctico/store/styles.css
@@ -127,8 +127,10 @@ nav {
   background-color: var(--white);
   position: absolute;
   top: 70px;
+  left: 0;
+  width: 100%;
   padding: 24px;
-  height: calc(100vh - 140px);
+  height: calc(100vh - 110px);
 }
 .mobile-menu ul:nth-child(1) {
   border-bottom: 1px solid var(--very-light-pink);
@@ -161,17 +163,22 @@ nav {
 
 /* ----------------- Aside ---------------- */
 
-.product-detail {
+aside {
   background-color: var(--white);
   width: 360px;
-  padding: 0 24px;
+  height: calc(100vh - 60px);
   box-sizing: border-box;
   position: absolute;
   right: 0;
 }
 .title-container {
   display: flex;
 }
+
+/* ----------------- Shopping Cart ---------------- */
+#shoppingCartContainer {
+  padding: 0 24px;
+}
 .title-container img {
   transform: rotate(180deg);
   margin-right: 14px;
@@ -236,6 +243,70 @@ nav {
   font-weight: bold;
   height: 50px;
 }
+/* ----------------- Product Detail ---------------- */
+#productDetail {
+  width: 360px;
+  padding-bottom: 24px;
+  position: absolute;
+  right: 0;
+}
+.product-detail-close {
+  background: var(--white);
+  width: 14px;
+  height: 14px;
+  position: absolute;
+  top: 24px;
+  left: 24px;
+  z-index: 2;
+  padding: 12px;
+  border-radius: 50%;
+}
+.product-detail-close:hover {
+  cursor: pointer;
+}
+#productDetail > img:nth-child(2) {
+  width: 100%;
+  height: 360px;
+  object-fit: cover;
+  border-radius: 0 0 20px 20px;
+}
+.product-info {
+  margin: 24px 24px 0 24px;
+}
+.product-info p:nth-child(1) {
+  font-weight: bold;
+  font-size: var(--md);
+  margin-top: 0;
+  margin-bottom: 4px;
+}
+.product-info p:nth-child(2) {
+  color: var(--very-light-pink);
+  font-size: var(--md);
+  margin-top: 0;
+  margin-bottom: 36px;
+}
+.product-info p:nth-child(3) {
+  color: var(--very-light-pink);
+  font-size: var(--sm);
+  margin-top: 0;
+  margin-bottom: 36px;
+}
+.primary-button {
+  background-color: var(--hospital-green);
+  border-radius: 8px;
+  border: none;
+  color: var(--white);
+  width: 100%;
+  cursor: pointer;
+  font-size: var(--md);
+  font-weight: bold;
+  height: 50px;
+}
+.add-to-cart-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
 
 /* ----------------- Products List ---------------- */
 .cards-container {
@@ -254,26 +325,26 @@ nav {
   border-radius: 20px;
   object-fit: cover;
 }
-.product-info {
+.product-card .product-info {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-top: 12px;
 }
-.product-info figure {
+.product-card .product-info figure {
   margin: 0;
 }
-.product-info figure img {
+.product-card .product-info figure img {
   width: 35px;
   height: 35px;
 }
-.product-info div p:nth-child(1) {
+.product-card .product-info div p:nth-child(1) {
   font-weight: bold;
   font-size: var(--md);
   margin-top: 0;
   margin-bottom: 4px;
 }
-.product-info div p:nth-child(2) {
+.product-card .product-info div p:nth-child(2) {
   font-size: var(--sd);
   margin-top: 0;
   margin-bottom: 0;
@@ -294,7 +365,7 @@ nav {
   .desktop-menu {
     display: none;
   }
-  .product-detail {
+  aside {
     width: 100%;
   }
   .cards-container {