Laboratoria · guisadev · Apr 9, 2024 · Apr 9, 2024 · Apr 9, 2024 · Apr 9, 2024
diff --git a/.gitignore b/.gitignore
@@ -6,3 +6,4 @@ node_modules/
 /playwright-report/
 /playwright/.cache/
 .vscode/
+package-lock.json
diff --git a/README.md b/README.md
diff --git a/Screenshot 2024-04-04 122334.png b/Screenshot 2024-04-04 122334.png
diff --git a/imagenes/Chemex.jpg b/imagenes/Chemex.jpg
diff --git a/imagenes/aeropress.jpg b/imagenes/aeropress.jpg
diff --git a/imagenes/afogatto.jpg b/imagenes/afogatto.jpg
diff --git a/imagenes/americano.jpg b/imagenes/americano.jpg
diff --git a/imagenes/cafe-irlandes.jpg b/imagenes/cafe-irlandes.jpg
diff --git a/imagenes/cafe-turco.jpg b/imagenes/cafe-turco.jpg
diff --git a/imagenes/cappucino.jpg b/imagenes/cappucino.jpg
diff --git a/imagenes/espresso tonic.jpg b/imagenes/espresso tonic.jpg
diff --git a/imagenes/espresso.jpg b/imagenes/espresso.jpg
diff --git a/imagenes/flatwhite.jpg b/imagenes/flatwhite.jpg
diff --git a/imagenes/francesa.jpg b/imagenes/francesa.jpg
diff --git a/imagenes/frappé.jpg b/imagenes/frappé.jpg
diff --git a/imagenes/ice latte.jpg b/imagenes/ice latte.jpg
diff --git a/imagenes/kalita wave.jpg b/imagenes/kalita wave.jpg
diff --git a/imagenes/latte.jpg b/imagenes/latte.jpg
diff --git a/imagenes/longblack.jpg b/imagenes/longblack.jpg
diff --git a/imagenes/lungo.jpg b/imagenes/lungo.jpg
diff --git a/imagenes/macchiato.jpg b/imagenes/macchiato.jpg
diff --git a/imagenes/mocaccino.jpg b/imagenes/mocaccino.jpg
diff --git a/imagenes/moka italiana.jpg b/imagenes/moka italiana.jpg
diff --git a/imagenes/origami.jpg b/imagenes/origami.jpg
diff --git a/imagenes/ristretto.jpg b/imagenes/ristretto.jpg
diff --git a/imagenes/syphon.jpg b/imagenes/syphon.jpg
diff --git a/imagenes/v60.jpg b/imagenes/v60.jpg
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -49,4 +49,4 @@
   "jest": {
     "testEnvironment": "jsdom"
   }
-}
+}
diff --git a/src/banner/coffee-latte-art-aesthetic-facebook-cover.jpg b/src/banner/coffee-latte-art-aesthetic-facebook-cover.jpg
diff --git a/src/data/dataset.js b/src/data/dataset.js
diff --git a/src/dataFunctions.js b/src/dataFunctions.js
@@ -1,9 +1,23 @@
-// Estas funciones son ejemplos, aquí puedes desarrollar tus propias funciones.
-
-export const example = () => {
-  return 'example';
+//Aquí voy a filtrar de la data un facts que quiero facilitar:
+export const filterData = (data, filterBy, value) => {
+  if (!value) {
+    return data;
+  }
+  //console.log('filtrado por', filterBy);
+  return data.filter(bebida =>  bebida.facts[filterBy].toLowerCase() === value.toLowerCase());
 };
 
-export const anotherExample = () => {
-  return [];
-};
+export const sortData = (data, propertyName, sortOrder) => {
+  return data.slice().sort((a, b) => {
+    //const nameA = a[propertyName].toUpperCase();
+    const nameA = typeof a[propertyName] === 'string' ? a[propertyName].toUpperCase() : '';
+    const nameB = typeof b[propertyName] === 'string' ? b[propertyName].toUpperCase() : '';
+    //const nameB = b[propertyName].toUpperCase();
+    if (sortOrder === "asc") {
+      return nameA.localeCompare(nameB);
+    } else if (sortOrder === "desc") {
+      return nameB.localeCompare(nameA);
+    }
+    return 0;
+  });
+};
diff --git a/src/fondo/Screenshot 2024-04-04 122334.png b/src/fondo/Screenshot 2024-04-04 122334.png
diff --git a/src/fondo/Screenshot 2024-05-07 220432.png b/src/fondo/Screenshot 2024-05-07 220432.png
diff --git a/src/fondo/Screenshot 2024-05-07 220628.png b/src/fondo/Screenshot 2024-05-07 220628.png
diff --git a/src/fondo/bayas-cafe-1-scaled.jpg b/src/fondo/bayas-cafe-1-scaled.jpg
diff --git a/src/fondo/prompt.png b/src/fondo/prompt.png
diff --git a/src/fondo/respuestaPrompt.png b/src/fondo/respuestaPrompt.png
diff --git a/src/images/Chemex.jpg b/src/images/Chemex.jpg
diff --git a/src/images/aeropress.jpg b/src/images/aeropress.jpg
diff --git a/src/images/afogatto.jpg b/src/images/afogatto.jpg
diff --git a/src/images/americano.jpg b/src/images/americano.jpg
diff --git a/src/images/cafe-irlandes.jpg b/src/images/cafe-irlandes.jpg
diff --git a/src/images/cafe-turco.jpg b/src/images/cafe-turco.jpg
diff --git a/src/images/cappucino.jpg b/src/images/cappucino.jpg
diff --git a/src/images/espresso-tonic.jpg b/src/images/espresso-tonic.jpg
diff --git a/src/images/espresso.jpg b/src/images/espresso.jpg
diff --git a/src/images/flat-white.jpeg b/src/images/flat-white.jpeg
diff --git a/src/images/francesa.jpg b/src/images/francesa.jpg
diff --git a/src/images/frappé.jpg b/src/images/frappé.jpg
diff --git a/src/images/ice latte.jpg b/src/images/ice latte.jpg
diff --git a/src/images/kalita-wave.jpg b/src/images/kalita-wave.jpg
diff --git a/src/images/latte.jpg b/src/images/latte.jpg
diff --git a/src/images/longblack.jpg b/src/images/longblack.jpg
diff --git a/src/images/lungo.jpg b/src/images/lungo.jpg
diff --git a/src/images/macchiato.jpg b/src/images/macchiato.jpg
diff --git a/src/images/mocaccino.jpg b/src/images/mocaccino.jpg
diff --git a/src/images/moka-italiana.jpg b/src/images/moka-italiana.jpg
diff --git a/src/images/origami.jpg b/src/images/origami.jpg
diff --git a/src/images/ristretto.jpg b/src/images/ristretto.jpg
diff --git a/src/images/syphon.jpg b/src/images/syphon.jpg
diff --git a/src/images/v60.jpg b/src/images/v60.jpg
diff --git a/src/index.html b/src/index.html
@@ -1,11 +1,25 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <meta charset="utf-8">
-    <title>Dataverse</title>
-    <link rel="stylesheet" href="style.css" />
-  </head>
-  <body>
-    <script src="main.js" type="module"></script>
-  </body>
-</html>
+
+<head>
+  <meta charset="utf-8">
+  <title>Dataverse</title>
+  <link rel="stylesheet" href="style.css" />
+</head>
+
+<body>
+  <header>
+    <h1>Visual Coffee</h1> 
+    <main>
+      <h2> Llegaste al lugar indicado para saber más acerca de tus preparaciones de cafés favoritas</h2>
+    </main>
+    <img src="banner/coffee-latte-art-aesthetic-facebook-cover.jpg" alt="banner" class="headerImage">
+  </header>
+  <button id="botonLimpiar" data-testid="button-clear">Boton limpiar</button>
+      <nav id="nav"> </nav> <!--  --> <!-- nav contiene los filtros </div> -->
+      <div id="root"> </div> <!-- root contiene los li que van dentro de los ul  -->
+
+      <footer> By Gisela Saavedra </footer>
+      <script src="main.js" type="module"></script>
+</body>
+</html>
diff --git a/src/main.js b/src/main.js
@@ -1,6 +1,57 @@
-import { example } from './dataFunctions.js';
-import { renderItems } from './view.js';
 
+import { renderItems, createSelect, createSelectSort } from './view.js';
 import data from './data/dataset.js';
+import { sortData } from './dataFunctions.js';
 
-console.log(example, renderItems(data), data);
+const root = document.getElementById("root");
+const nav = document.getElementById("nav");
+const botonLimpiar = document.getElementById("botonLimpiar"); //Obtener referencia al botón de limpiar
+// Crear el select origen y agregarlo al DOM
+const selectOrderByOrigen = createSelect(data, 'origen'); //mas descriptivas las constantes
+nav.appendChild(selectOrderByOrigen);
+
+// Crear el select molienda y agregarlo al DOM
+const selectOrderByMolienda = createSelect(data, 'molienda');
+nav.appendChild(selectOrderByMolienda);
+
+//crear el select ordenado y agregarlo al DOM
+//const select3 = createSelect(data, 'name');
+//root.appendChild(select3);
+const selectOrderByPropertyName = createSelectSort(data, 'name');
+nav.appendChild(selectOrderByPropertyName);
+const propertyName = 'name';
+
+// Agregar un evento de clic al botón
+botonLimpiar.addEventListener("click", limpiarFiltros);
+// Función para limpiar los filtros
+function limpiarFiltros() {
+  // Limpiar los filtros aplicados
+  document.getElementById("filtro").innerHTML = "";
+}
+// Agregar un event listener para el evento change // para el select de ordenar
+selectOrderByPropertyName.addEventListener("change", (event) => {
+  const sortOrder = event.target.value;
+  // Llamar a la función para ordenar la data y renderizar los elementos
+  if (sortOrder) {
+    const sortedData = sortData(data, propertyName, sortOrder);
+    root.appendChild(renderItems(sortedData));
+  }
+});
+// Agregar event listener al select
+selectOrderByOrigen.addEventListener("change", (event) => {
+  const selectedValue = event.target.value;
+  // Aquí puedes realizar acciones basadas en el valor seleccionado
+  //console.log("Valor seleccionado:", selectedValue);
+  // Luego, puedes llamar a renderItems nuevamente con el origen filtrado
+  root.appendChild(renderItems(data, selectedValue, 'origen'));
+});
+
+selectOrderByMolienda.addEventListener("change", (event) => {
+  const selectedValue = event.target.value;
+  // Aquí puedes realizar acciones basadas en el valor seleccionado
+  //console.log("Valor seleccionado:", selectedValue);
+  // Luego, puedes llamar a renderItems nuevamente con el origen filtrado
+  root.appendChild(renderItems(data, selectedValue, 'molienda'));
+});
+// Renderizar los elementos por primera vez sin filtro
+root.appendChild(renderItems(data));
diff --git a/src/style.css b/src/style.css
@@ -0,0 +1,95 @@
+img {
+    width: 280px;
+    margin: 25px;
+}
+
+ul {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    padding-right: 5px;
+}
+
+li {
+    border: 11px solid rosybrown;
+    padding: 15px;
+    margin: 20px;
+    border-radius: 10px;
+    list-style: none;
+    width: 350px;
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: column;
+    justify-content: space-evenly;
+    background-color: rgb(229, 190, 93);
+    align-items: stretch;
+    font-family: monospace, sans-serif;
+    font-style: normal;
+    font-weight: 200;
+}
+
+h1 {
+    font-family: "Avenir Next", sans-serif;
+    display: flex;
+    flex-direction: row-reverse;
+    flex-wrap: nowrap;
+    justify-content: space-evenly;
+    color: brown;
+}
+
+h2 {
+    font-family: "Avenir Next", sans-serif;
+    display: flex;
+    flex-direction: row-reverse;
+    flex-wrap: nowrap;
+    justify-content: space-evenly;
+    color: brown;
+}
+
+.headerImage {
+    width: 1500px;
+    height: 450px;
+    padding: 20px;
+    border-radius: 50px;
+}
+
+body {
+    background-color: mistyrose;
+}
+
+label {
+    padding: 30px;
+    font-family: sans-serif;
+    color: brown;
+}
+
+dt,
+dd {
+    color: brown;
+}
+
+#nav {
+    flex-direction: row;
+    margin-top: 10px;
+    padding-left: 400px;
+    border: 5px solid rosybrown;
+    background-color: rgb(100, 120, 68);
+    color: antiquewhite
+}
+
+.select-style {
+    margin-right: 50px;
+    border-radius: 20px;
+}
+
+footer {
+    color: brown;
+    font-family: sans-serif;
+    margin: 50px;
+    padding: 50px;
+}
+
+.select-style{
+    padding: 2px;
+}
+
diff --git a/src/view.js b/src/view.js
@@ -1,6 +1,140 @@
-export const renderItems = (data) => {
-  console.log(data)
-  // Aquí comienza tu código y puedes retornar lo que tu necesites
-  return 'example';
+import { filterData } from "./dataFunctions.js";
+
+// creo el select
+export const createSelect = (data, propertyName) => {
+  // Obtener todos los valores únicos de la propiedad especificada en los datos
+  const propertyValues = data.map((item) => item.facts[propertyName]);
+
+  // Eliminar valores duplicados usando un conjunto (Set)
+  // eslint-disable-next-line no-undef
+  const uniqueValues = new Set(propertyValues);
+  const span = document.createElement("span")
+  const label = document.createElement("label");
+  label.setAttribute("for", propertyName)
+
+  const select = document.createElement("select");
+  select.setAttribute("id", propertyName)
+  select.setAttribute("name", propertyName)
+  select.setAttribute("class", "select-style")
+
+  // Agregar una opción adicional al principio del select que no esté seleccionada
+  const defaultOption = document.createElement("option");
+  defaultOption.value = ""; // Valor vacío
+  defaultOption.textContent = `Seleccione ${propertyName} (sin filtro)`; // Texto descriptivo
+  //defaultOption.disabled = true; // Deshabilitar la opción para que no se pueda seleccionar
+  //defaultOption.selected = true; // No seleccionar la opción por defecto
+  select.appendChild(defaultOption);
+
+  // Agregar una clase al select
+  select.classList.add("select-style");
+  // Agregar una opción por cada valor único de la propiedad
+  uniqueValues.forEach((value) => {
+    const optionElement = document.createElement("option");
+    optionElement.value = value;
+    optionElement.textContent = value;
+    select.appendChild(optionElement);
+  });
+  span.append(label, select)
+  return span;
 };
+// Crear el selectSort
+export const createSelectSort = (data, propertyName) => {
+  const select = document.createElement("select");
+
+  // Agregar una opción adicional al principio del select que no esté seleccionada
+  const defaultOption = document.createElement("option");
+  defaultOption.value = ""; // Valor vacío
+  defaultOption.textContent = `Categoría ${propertyName} (sin filtro)`; // Texto descriptivo
+  //defaultOption.disabled = true; // Deshabilitar la opción para que no se pueda seleccionar
+  //defaultOption.selected = true; // No seleccionar la opción por defecto
+  select.appendChild(defaultOption);
+
+  // Agregar opciones para orden ascendente y descendente
+  const ascendingOption = document.createElement("option");
+  ascendingOption.value = "asc";
+  ascendingOption.textContent = "Ordenar ascendente";
+  select.appendChild(ascendingOption);
+
+  const descendingOption = document.createElement("option");
+  descendingOption.value = "desc";
+  descendingOption.textContent = "Ordenar descendente";
+  select.appendChild(descendingOption);
+
+  return select;
+};
+
+export const renderItems = (data, value = null, filterBy=null) => {
+  // Eliminar la lista ul existente del DOM si existe
+  const existingUl = document.querySelector("ul");
+  if (existingUl) {
+    existingUl.parentNode.removeChild(existingUl);
+  }
+
+  const newUl = document.createElement("ul");
+
+
+  // Filtrar los datos según el origen especificado si existe
+  const filteredData = value ? filterData(data,filterBy, value) : data;
+
+  filteredData.forEach((element) => {
+    //console.log(element)
+    const newLi = document.createElement("li"); //un elemento li por cada elemento en data
+    newLi.setAttribute("itemscope", "")
+    newLi.setAttribute("itemType", element.id)
+
+    const newImage = document.createElement("img"); //un elemento img para mostrar la imagen
+    newImage.setAttribute("src", element.imageUrl); //utilizamos la url de la imagen del doc actual
+
+    const name = document.createElement("dt");
+    name.textContent = "Nombre:";
+    const cafeName = document.createElement("dd");
+    cafeName.textContent = element.name; //añadimos el nombre al elemento actual
+
+    const shortDescription = document.createElement("dt");
+    shortDescription.textContent = "Descripción:";
+    const cafeDescription = document.createElement("dd");
+    cafeDescription.textContent = element.shortDescription;
+
+    //Creamos una lista para los hechos de cada café
+    const origen = document.createElement("dt");
+    origen.textContent = "Café origen:";
+    const cafeOrigen = document.createElement("dd");
+    cafeOrigen.textContent = element.facts.origen;
+
+    const tiempoDeExtraccion = document.createElement("dt");
+    tiempoDeExtraccion.textContent = "Tiempo de extracción:";
+    const cafeTiempoDeExtraccion = document.createElement("dd");
+    cafeTiempoDeExtraccion.textContent = element.facts.tiempoDeExtraccion;
+
+    const porcentajeDeContenido = document.createElement("dt");
+    porcentajeDeContenido.textContent = "Porcentaje de contenido:";
+    const cafePorcentajeDeContenido = document.createElement("dd");
+    cafePorcentajeDeContenido.textContent = element.facts.porcentajeDeContenido;
+
+    const molienda = document.createElement("dt");
+    molienda.textContent = "Molienda:";
+    const cafeMolienda = document.createElement("dd");
+    cafeMolienda.textContent = element.facts.molienda;
+
+
+    newLi.append(
+      cafeName,
+      newImage,
+      shortDescription,
+      cafeDescription,
+      origen,
+      cafeOrigen,
+      molienda,
+      cafeMolienda,
+      porcentajeDeContenido,
+      cafePorcentajeDeContenido,
+
+    );
+    newUl.appendChild(newLi);
+  });
+  // Agregar la nueva lista al body
+  // Agregar el select al contenedor div
 
+  //document.body.appendChild(newUl);
+  return newUl
+};
-Original file line number
+Diff line change
@@ Expand Up / @@ -49,4 +49,4 @@ @@
       "jest": {
         "testEnvironment": "jsdom"
       }
-    }
+    }