Merge pull request #31 from CodeStrong2023/Bruno_Olivera

clase 02 e-commerce basico parte 2

Author: NONFLOKY

Laboratorio IV/.DS_Store

@@ -0,0 +1,31 @@
+const modalContainer = document.getElementById("modal-container");
+const modalOverlay = document.getElementById("modal-overlay");
+
+const cartBtn = document.getElementById("cart-btn");
+
+const displayCart = () => {
+    modalContainer.innerHTML = "";
+    modalContainer.style.display = "block";
+    modalOverlay.style.display = "block";
+    //modal Header
+    const modalHeader = document.createElement("div");
+
+    const modalClose = document.createElement("div");
+    modalClose.innerText = "❌";
+    modalClose.className = "modal-close";
+    modalHeader.append(modalClose);
+
+    modalClose.addEventListener("click", ()=> {
+        modalContainer.style.display = "none";
+        modalOverlay.style.display = "none";
+    })
+
+    const modalTitle = document.createElement("div");
+    modalTitle.innerText = "Cart";
+    modalTitle.className = "modal-title";
+    modalHeader.append(modalTitle);
+
+    modalContainer.append(modalHeader);
+}
+
+cartBtn.addEventListener("click", displayCart);

Laboratorio IV/JavaScript/.DS_Store

@@ -1,4 +1,5 @@
 const shopContent = document.getElementById("shopContent");
+const cart = [];//Este es nuestro carrito, un array vacio
 
 productos.forEach((product) =>{
     const content = document.createElement("div");
@@ -8,4 +9,19 @@ productos.forEach((product) =>{
     <p>${product.price} $</p>
     `;
     shopContent.append(content);
+    const buyButton = document.createElement('button');
+    buyButton.innerText = "Comprar";
+
+    content.append(buyButton);
+
+    buyButton.addEventListener("click", ()=>{
+        cart.push({
+            id: producto.id,
+            productName: product.productName,
+            price: product.price,
+            quanty: product.quanty,
+            img: product.img,
+    })
+    console.log(cart);
+    })
 });

Laboratorio IV/JavaScript/e-commerce/.DS_Store

@@ -11,9 +11,10 @@
     <div class="card-products-container">
         <div class="card-products" id="shopContent"></div>
     </div>
-    
+    <!--cart-btn-->
+    <div class="cart-btn" id="cart-btn">🛒</div>
     <script src="/client/js/products.js"></script>
     <script src="/client/js/index.js"></script>
-
+    <script src="/client/js/cart.js"></script>
 </body>
 </html>

Laboratorio IV/JavaScript/e-commerce/client/.DS_Store

@@ -30,5 +30,67 @@
 }
 
 .card-products button:hover {
-    opacity: 0,7;
-}
+    opacity: 0.7;
+}
+
+ /*card button*/
+ .cart-btn {
+    position: fixed;
+    top: 90vh;
+    right: 40px;
+    background-color: rgb(25, 25, 25);
+    padding: 10px;
+    border-radius: 50%;
+    height: 24px;
+    width: 24px;
+    transition: transform 0.2s ease-in-out;
+ }
+
+ .cart-btn:hover {
+    cursor: pointer;
+    opacity: 0.9;
+ }
+
+ /*modal*/
+ .modal-overlay {
+    display: none;
+    background-color: rgba(0, 0, 0, 0);
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 1;
+ }
+
+ .modal-container {
+    display: none;
+    background-color: #ffffff;
+    box-shadow: 0px 3px 6px #00000029;
+    padding: 40px;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    max-width: 500px;
+    width: 100%;
+    z-index: 1;
+    max-height: 80vh;
+    overflow-y: auto;
+ }
+
+ .modal-container::-webkit-scrollbar{
+    display: none;
+ }
+
+ .modal-close {
+    float: right;
+    cursor: pointer;
+ }
+
+ .modal-title {
+    font-size: 24px;
+    font-weight: bold;
+    margin-bottom: 20px;
+    text-align: center;
+ }