Challeng Alura Geek

.gitignore

@@ -0,0 +1 @@
+node_modules

JS/DeleteCard.js

@@ -0,0 +1,21 @@
+export function deleteCard (){
+// Mandar a llamar al boton
+const listaDelete = document.querySelectorAll("[data-btn-delete]")
+
+// Agregar un AddEvent y sacar el 
+listaDelete.forEach(botones => {
+    const ID = botones.getAttribute("data-btn-delete")
+    botones.addEventListener("click", ()=> productDelete(ID))
+}) 
+
+// crear funcion productDelete para que borre todo el card
+
+function productDelete(id){
+    fetch(`http://localhost:3000/productos/${id}`,{
+        method: "DELETE"
+    })
+
+    .then((res) => console.log(res))
+}   
+
+}

JS/PostData.js

@@ -0,0 +1,35 @@
+
+
+const form = document.querySelector(".menuForm")
+const name = document.querySelector("[data-input-name]")
+const precio = document.querySelector("[data-input-price]")
+const urlImagen = document.querySelector("[data-input-imagen]")
+
+form.addEventListener("submit", submitData)
+
+
+function submitData(event){
+    event.preventDefault(); 
+    console.log(name.value);
+    console.log(precio.value);
+    console.log(urlImagen.value);
+
+     fetch('http://localhost:3000/productos',{
+         method: 'POST',
+         headers:{
+            'Content-Type':'application/json'
+         },
+         body: JSON.stringify({
+            titulo: name.value,
+            precio: precio.value,
+            url_imagen: urlImagen.value
+         })
+     })
+
+     .then(Response => console.log(Response))
+     .then(data =>{
+         console.log(data);
+     })
+
+}
+

JS/app.js

@@ -0,0 +1,45 @@
+import { deleteCard } from "./DeleteCard.js";
+
+let globalData = []
+const contenedorProducto = document.querySelector("[data-contentProduct]");
+let contentTemplate = ""
+
+
+fetch('http://localhost:3000/productos')
+.then(Response => Response.json()) 
+.then(data =>{
+    globalData = data
+    updateCards()
+    deleteCard()
+
+});
+
+
+function updateCards() {
+    globalData.forEach((product) => {
+        const template = `
+        <div class="producto1" data-productoCard="${product.id}">
+            <img class="imagenProducto" src="${product.url_imagen}" alt="">
+            <div class="menuTitulo">
+                <div class="tituloPrecio"> 
+                <p>${product.titulo}</p>
+                <p class="precio">${product.precio}</p>
+            </div>
+                <img  class="delete" src="image/borrar.png" alt="delete" data-btn-delete="${product.id}">
+            </div>
+        </div>
+        `
+        contentTemplate += template;
+    });
+
+    if (globalData.length === 0){
+        contenedorProducto.innerHTML ="<p>No hay productos que vender</p>"
+    } else {    
+        contenedorProducto.innerHTML = contentTemplate 
+    }
+}
+
+
+
+
+

db.json

@@ -0,0 +1,58 @@
+{
+  "productos": [
+    {
+      "id": "1",
+      "titulo": "Nintendo Switch",
+      "precio": "$ 300,00",
+      "url_imagen": "https://www.radioshackla.com/media/catalog/product/4/5/458917700016_emtsjlscave4u9kv.jpg?optimize=medium&bg-color=255,255,255&fit=bounds&height=700&width=700&canvas=700:700"
+    },
+    {
+      "id": "5",
+      "titulo": "Galaxy Tab S6",
+      "precio": "$ 649,99",
+      "url_imagen": "https://sstoresv.com/wp-content/uploads/2024/03/002_galaxytabs6_lite_oxford_gray_front-1.jpg"
+    },
+    {
+      "id": "7",
+      "titulo": "Amazon Echo Dot",
+      "precio": "$ 49,99",
+      "url_imagen": "https://www.radioshackla.com/media/catalog/product/4/6/463280700013_2.jpg?optimize=medium&bg-color=255,255,255&fit=bounds&height=700&width=700&canvas=700:700"
+    },
+    {
+      "id": "8",
+      "titulo": "Sony PlayStation 5",
+      "precio": "$ 499,99",
+      "url_imagen": "https://walmartsv.vtexassets.com/arquivos/ids/406251/Playstation-5-Standard-Edition-2-17626.jpg?v=638423986396470000"
+    },
+    {
+      "id": "9",
+      "titulo": "MacBook Pro",
+      "precio": "$ 1299,00",
+      "url_imagen": "https://i5.walmartimages.com/seo/2022-Apple-MacBook-Pro-Laptop-M2-chip-13-inch-Retina-Display-8GB-RAM-512GB-SSD-Storage-Touch-Bar-Backlit-Keyboard-FaceTime-HD-Camera-Works-iPhone-iPa_59254575-0ad4-4bac-bb19-a98d170b61d2.a845feb86e81f0aae7db0539c8ee3691.jpeg"
+    },
+    {
+      "id": "10",
+      "titulo": "Dell XPS 13",
+      "precio": "$ 999,99",
+      "url_imagen": "https://m.media-amazon.com/images/I/91MXLpouhoL._AC_SL1500_.jpg"
+    },
+    {
+      "id": "788a",
+      "titulo": "cup head",
+      "precio": "$20",
+      "url_imagen": "https://www.gamebrothersstore.com/wp-content/uploads/2024/04/GUEST_e701e642-a7fc-45a7-8221-13838fcfefc6.jpg"
+    },
+    {
+      "id": "3fb1",
+      "titulo": "play station 4 pro",
+      "precio": "$325",
+      "url_imagen": "https://i5.walmartimages.com/seo/PlayStation-4-Pro-1TB-Gaming-Console-Black-3001510_a8f860fd-2640-4953-aa50-c2b6281af19b_1.59fe324e82c67fbc56b0a59bd62dcb08.jpeg"
+    },
+    {
+      "id": "1ad2",
+      "titulo": "iphone xr",
+      "precio": "$400",
+      "url_imagen": "https://images-cdn.ubuy.co.in/64c4a6c86751b005950567d9-apple-iphone-x-64gb-unlocked-gsm-phone.jpg"
+    }
+  ]
+}

index.html

@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="./style.css">
+    <link rel="stylesheet" href="./reset.css">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
+    <link
+        href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap"
+        rel="stylesheet">
+    <title>AluraGeek</title>
+</head>
+
+<body>
+    <nav class="menuNav">
+        <img src="image/corazon (2).png" alt="">
+        <p>AluraGeek</p>
+    </nav>
+
+    <main>
+        <div class="contenedorMain">
+            <div class="producto">
+                <h1>Mis Productos:</h1>
+                <div class="contentProducto" data-contentProduct>
+
+                    <!-- Espacio de renderiado de productos -->
+
+                </div>
+
+            </div>
+
+            <div class="agregarProducto">
+                <h1>AGREGAR <br> PRODUCTO:</h1>
+
+
+                    <form class="menuForm">
+                        <input class="inputForm" type="text" placeholder="Nombre" data-input-name>
+                        <input  class="inputForm" type="text" placeholder="Precio" data-input-price>
+                        <input  class="inputForm" type="text" placeholder="Imagen" data-input-imagen>
+                        <div  class="bntEnviarLimpiar">
+                            <input type="submit" class="btnEnviar" value="Enviar" >
+                            <input type="submit" class="btnLimpiar" value="Limpiar">
+                        </div>
+                </form>
+
+            </div>
+
+        </div>
+    </main>
+
+
+    <footer class="footer">
+        <div class="titulo">
+            <img src="./image/corazon (2).png" alt="">
+            <p>AluraGeek</p>
+        </div>
+
+        <div class="parrafos">
+            <p> Desarollado por Oscar Mejia</p>
+            <p>Alura Latam - 202X</p>
+        </div>
+
+
+    </footer>
+    <script src="./JS/app.js" type="module"></script>
+    <script src="./JS/PostData.js"></script>
+    <script src="./JS/DeleteCard.js" type="module"></script>
+</body>
+
+</html>