Ecommerce-clase04

CodeSystem2022 · Oct 3, 2023 · acfa26d · acfa26d
1 parent c74122a
commit acfa26d
Show file tree

Hide file tree

Showing 9 changed files with 134 additions and 36 deletions.
diff --git a/LaboratorioIV/JS/e-commerce2022/client/js/cart.js b/LaboratorioIV/JS/e-commerce2022/client/js/cart.js
@@ -0,0 +1,35 @@
+const modalContainer = document.getElementById("modalContainer");
+const modalContent = 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 = "X";
+    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);
+
+    //modal Body
+    cart.
+};
+
+
+cartBtn.addEventListener("click", displayCart)
diff --git a/LaboratorioIV/JS/e-commerce2022/client/js/index.js b/LaboratorioIV/JS/e-commerce2022/client/js/index.js
@@ -1,11 +1,27 @@
-const shopContent = document.getElementById('shopContent');
+const shopContent = document.getElementById("shopContent");
 
-productos.forEach((producto) => {
-    const content = document.createElement('div');
+productos.forEach((product) => {
+    const content = document.createElement("div");
     content.innerHTML = `
-    <img src="${producto.img}">
-    <h3>${producto.productName}</h3>
-    <p>$${producto.price}</p>
-    `;
-    shopContent.appendChild(content);
-});
+    <img src="${product.img}">
+    <h3>${product.productName}</h3>
+    <p>${product.price}</p>`
+    ;
+    shopContent.append(content);
+
+const buyButton = document.createElement("button");
+buyButton.innerText = "Comprar";
+
+content.append(buyButton);
+
+buyButton.addEventListener("click", () => {
+    cart.push({
+        id: product.id,
+        productName: product.productName,
+        price: product.price,
+        quanty: product.quanty,
+        img: product.img,
+    })
+    console.log(cart)
+})
+});
diff --git a/LaboratorioIV/JS/e-commerce2022/client/js/products.js b/LaboratorioIV/JS/e-commerce2022/client/js/products.js
@@ -1,29 +1,30 @@
 const productos = [
     {
         id: 1,
-        productName: 'Banana',
-        price: 480,
-        quanty : 1,
-        img: 'https://resizer.glanacion.com/resizer/zB6fiKtu_xiC7WqmbAGO8NJpq3E=/880x586/smart/filters:format(webp):quality(70)/cloudfront-us-east-1.images.arcpublishing.com/lanacionar/BJB5RPAYRNEOTK6D7JAHQ6ZCCA.jpg',
+        productName: "Banana",
+        price: 400,
+        quanty: 1,
+        img: "/client/media/banana.png"
     },
     {
         id: 2,
-        productName: 'Leche',
-        price: 450,
-        quanty : 1,
-        img: 'https://d3ugyf2ht6aenh.cloudfront.net/stores/001/160/839/products/013-003-009_leche-la-serenisma-entera-x-1-litro1-8f1dc924ed9d55a87815885191686834-1024-1024.jpg',
+        productName: "Leche",
+        price: 500,
+        quanty: 1,
+        img: "/client/media/leche.png"
     },
     {
         id: 3,
-        productName: 'Pollo',
-        price: 1750,
-        quanty : 1,
-        img: 'https://www.carnave.com.ar/wp-content/uploads/2020/05/Pollo-entero.jpg',
+        productName: "Pollo",
+        price: 800,
+        quanty: 1,
+        img: "/client/media/pollo.png"
     },
     {
         id: 4,
-        productName: 'Mayonesa',
-        price: 350,
-        quanty : 1,
-        img: 'https://cdn11.bigcommerce.com/s-abmjjefojj/images/stencil/1280x1280/products/2960/12770/Natura-Mayonesa-Limon-500-Argentina_Select-1000x1000__28457.1610887006.jpg?c=1',
-    }];
+        productName: "Mayonesa",
+        price: 200,
+        quanty: 1,
+        img: "/client/media/mayonesa.png"
+    },
+]
diff --git a/LaboratorioIV/JS/e-commerce2022/client/media/banana.png b/LaboratorioIV/JS/e-commerce2022/client/media/banana.png
diff --git a/LaboratorioIV/JS/e-commerce2022/client/media/index.html b/LaboratorioIV/JS/e-commerce2022/client/media/index.html
@@ -3,16 +3,18 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="./styles.css">
+    <link rel="stylesheet" href="styles.css">
     <title>Document</title>
 </head>
 <body>
-    <!--shop content-->
     <div class="card-products-container">
         <div class="card-products" id="shopContent"></div>
-
     </div>
-</body>
 
+    <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/index.js"></script>
+<script src="/client/js/cart.js"></script>
+</body>
+</html>
diff --git a/LaboratorioIV/JS/e-commerce2022/client/media/leche.png b/LaboratorioIV/JS/e-commerce2022/client/media/leche.png
diff --git a/LaboratorioIV/JS/e-commerce2022/client/media/mayonesa.png b/LaboratorioIV/JS/e-commerce2022/client/media/mayonesa.png
diff --git a/LaboratorioIV/JS/e-commerce2022/client/media/pollo.png b/LaboratorioIV/JS/e-commerce2022/client/media/pollo.png
diff --git a/LaboratorioIV/JS/e-commerce2022/client/media/styles.css b/LaboratorioIV/JS/e-commerce2022/client/media/styles.css
@@ -1,4 +1,3 @@
-/*prducts style*/
 .card-products-container {
     margin: 5vh auto;
 }
@@ -21,15 +20,60 @@
     border: none;
     outline: 0;
     padding: 10px;
-    color: #ffffff;
-    background-color: #1bcb7f;
+    color: white;
+    background-color: aqua;
     text-align: center;
     cursor: pointer;
     width: 100%;
     font-size: 15px;
-
 }
 
 .card-products button:hover {
-    opacity: 0,7;
+    opacity: 0.7;
+}
+
+.cart-btn:hover {
+    opacity: 0.9;
+    cursor: pointer;
+}
+
+/*modal*/
+.modal-overlay{
+    display: none;
+    background-color: rgba(0, 0, 0, 0.5);
+    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: 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;
 }