Initial commit

README.md

@@ -0,0 +1,44 @@
+# Alura Challenge | Oracle One | Front-end | AluraGeek Latam
+---
+<p align="center" >
+     <img width="800" heigth="400" src="https://user-images.githubusercontent.com/91544872/153603780-b5e5b462-893b-471c-9b7f-7f57ad2aaff3.png">
+</p>
+
+### En este repositório se encuentra el código que realizamos en nuestro Live Coding del dia 21/04/2022
+### Nuestro obejtivo era la contrucción de nuestra página principal de manera estática por lo que hasta el momento no implementamos ninguna funcionalidad con JavaScript.
+
+## ¿Qué encontrarás?
+
+#### En este repositorio actualizado encontrarás 3 ramas, cada una de las cuales contiene una versión actualizada del código. Siendo Live parte I, Live parte II y Full Crud. Al hacer clic en cada uno de ellos, obtendrá una versión actualizada del repositorio y podrá navegar entre los archivos.
+
+<p align="center" >
+     <img width="300" heigth="400" src="https://user-images.githubusercontent.com/101413385/203182662-94c38802-9506-46f1-8a7a-292ef40aae4c.png">
+</p>
+
+
+1) Carpeta assets con todas las imagenes utilizadas en nuestra página principal
+2) Archivo index.html donde encontrarás el código HTML referente a la página principal de nuestro AluraGeek
+3) Archivo login.html donde encontrarás el código HTML referente a la página de iniciar sesión 
+4) Archivo reset.css utilizado para quitar todas los estilos predeterminados
+5) Archivo style.css donde están todas las clases CSS utiilizadas en la personalización de nuestra barra principal y nuestro banner
+6) Archivo productos.css donde están todas las clases CSS utiilizadas en la personalización de nuestras secciones de productos 
+7) Archivo style-login.css  donde están todas las clases CSS utiilizadas en la personalización de la sección de login.
+8) Views, donde se almacena el HTML de toda la aplicación.
+9) Controllers, donde se encuentra la lógica de manipulación de los protocolos CRUD.
+10) Servicios donde se encuentra la lógica de las peticiones CRUD como: Get, Post, Update y Delete.
+
+Es importante que recordemos que este código lo construimos juntos en nuestro live coding y que aún pueden faltar algunos estilos y elementos por aplicar.
+Como lo dijimos en la live también dejamos para ustedes una versión responsiva solo para mobile, ahora queda en sus manos terminar el desarrollo de nuestro e-commerce.
+
+Si te perdiste el Live no te preocupes puedes acceder a través del link [Live Coding AluraGeek](https://www.youtube.com/watch?v=fAkdeHeIB7U)
+
+
+Si tienes alguna pregunta puedes realizarla a través del canal de dudas del Challenge en la categoría Front End o inclusive unirte con tus colegas en las salas de estudio para encontrar nuevas soluciones.
+
+<p align="center" >
+     <img width="300" heigth="400" src="https://user-images.githubusercontent.com/101413385/164736272-0e50eea3-9196-4af5-96fe-700eae2b5a81.png">
+</p>
+
+¡No olvides publicar un link o un vídeo de tu proyecto en Linkedin y en nuestro canal de resultados en Discord! 🏁
+
+Un punto importante: hay varias formas de desarrollar los desafíos, no crean que el código presentado es el correcto o el único a seguir, es una base y pueden comparar con su resolución y la de otros colegas.

controllers/actualiza-producto-controller.js

@@ -0,0 +1,34 @@
+import { productoServices } from "../servicios/producto-servicios.js";
+
+const getURL = new URL(window.location);
+
+const id = getURL.searchParams.get("id");
+
+const inputImageUrl = document.querySelector("[data-url]");
+const inputNombre = document.querySelector("[data-nombre]");
+const inputPrecio = document.querySelector("[data-precio]");
+const inputDescripcion = document.querySelector("[data-descripcion]");
+
+productoServices.listarUnProduto(id).then((datos) => {
+  inputImageUrl.setAttribute("src", datos.imageUrl);
+  inputNombre.value = datos.name;
+  inputPrecio.value = datos.price;
+  inputDescripcion.value = datos.description;
+});
+
+const formulario = document.querySelector("[data-form]");
+
+formulario.addEventListener("submit", (evento) => {
+  evento.preventDefault();
+
+  productoServices
+    .alteraProduto(
+      id,
+      inputNombre.value,
+      inputPrecio.value,
+      inputDescripcion.value
+    )
+    .then(() => {
+      window.location.href = "../screens/produto.html";
+    });
+});

controllers/crea-productos-controller.js

@@ -0,0 +1,21 @@
+import { productoServices } from "../servicios/producto-servicios.js";
+
+const form = document.querySelector("[data-form]");
+
+form.addEventListener("submit", (evento) => {
+  evento.preventDefault();
+
+  const nome = document.querySelector("[data-nome]").value;
+  const url = document.querySelector("[data-url]").value;
+  const preco = document.querySelector("[data-preco]").value;
+
+  productoServices
+    .creaProdutos(nome, url, preco)
+    .then((resposta) => {
+      window.location.href = "../screens/index.html";
+      console.log(resposta);
+    })
+    .catch((err) => {
+      console.log(err);
+    });
+});

controllers/lista-productos.js

@@ -0,0 +1,69 @@
+import { productoServices } from "../servicios/producto-servicios.js";
+import { formatPrice } from "../formatterPrices.js";
+
+const getProducts = (name, price, imageUrl, id) => {
+  const card = document.createElement("div");
+
+  const contenido = `
+    <div class="produto">
+        <div class="container">
+            <button class="buttonDelete" type="button">
+              <img class="deleteImage" src="../assets/delete.png" alt="Deletar" />
+            </button>
+            
+            <a href="../screens/edit-product.html?id=${id}">
+            
+              <button class="buttonEdit" type="button">
+                <img class="editImage" src="../assets/edit.png" alt="Editar" />
+              </button>
+            
+            </a>
+        </div>
+        
+        <img src="${imageUrl}" alt="img">
+        <h1 class="product-name"> ${name} </h1>
+        <p class="preco">${formatPrice(price)}</p>
+    </div>
+    `;
+  card.innerHTML = contenido;
+  card.dataset.id = id;
+  return card;
+};
+
+const productos = document.querySelector("[data-allProducts]");
+
+productos.addEventListener("click", async (evento) => {
+  let deleteButton = evento.target.className === "deleteImage";
+  if (deleteButton) {
+    const producto = evento.target.closest("[data-id]");
+    let id = producto.dataset.id;
+    productoServices
+      .deleteProducto(id)
+      .then((res) => {
+        producto.remove();
+        console.log(res);
+      })
+      .catch((err) => console.log(err));
+  }
+});
+
+const render = async () => {
+  try {
+    const listaProductos = await productoServices.listaProductos();
+
+    listaProductos.forEach((producto) => {
+      productos.appendChild(
+        getProducts(
+          producto.name,
+          producto.price,
+          producto.imageUrl,
+          producto.id
+        )
+      );
+    });
+  } catch (err) {
+    console.log(err);
+  }
+};
+
+render();

controllers/login-controller.js

@@ -0,0 +1,13 @@
+const form = document.querySelector("[data-form]");
+
+form.addEventListener("submit", (evento) => {
+  evento.preventDefault();
+  const email = document.querySelector("[data-email]").value;
+  const password = document.querySelector("[data-password]").value;
+
+  if (email.length > 5 && password.length > 5) {
+    window.location.href = "../screens/produto.html";
+  } else {
+    alert("Por favor, insira mais de 5 caracteres no email e senha.");
+  }
+});

controllers/productos-controller.js

@@ -0,0 +1,40 @@
+import { productoServices } from "../servicios/producto-servicios.js";
+import { formatPrice } from "../formatterPrices.js";
+
+const nuevoProduto = (name, price, imageUrl, id) => {
+  const card = document.createElement("div");
+  const contenido = `
+        <div class="produto">
+            <img src="${imageUrl}" alt="img">
+            <h1 class="product-name"> ${name} </h1>
+            <p class="preco">${formatPrice(price)}</p>
+            <a class="ver-produto" href="../produto.html?id=${id}">Ver Produto</a>
+        </div>   
+    `;
+  card.innerHTML = contenido;
+  card.dataset.id = id;
+
+  return card;
+};
+
+const productos = document.querySelector("[data-product]");
+
+const render = async () => {
+  try {
+    const listaProductos = await productoServices.listaProductos();
+    listaProductos.forEach((elemento) => {
+      productos.appendChild(
+        nuevoProduto(
+          elemento.name,
+          elemento.price,
+          elemento.imageUrl,
+          elemento.id
+        )
+      );
+    });
+  } catch (erro) {
+    console.log(erro);
+  }
+};
+
+render();