guisadev · CamilaRivasNahuel · Apr 22, 2024 · Apr 23, 2024 · May 14, 2024
diff --git a/src/data/dataset.js b/src/data/dataset.js
@@ -58,7 +58,7 @@ export default [
       "origen": "Italia",
       "tiempoDeExtraccion": "25-35 segundos aproximadamente.",
       "molienda": "Superfina",
-      "mainField": "dosis de café espresso y leche emulsionada."
+      "contenido": "dosis de café espresso y leche emulsionada."
     },
     "extraInfo": {
       "imageSource": "https://www.bing.com/images/create/design-an-inspiring-and-historically-accurate-imag/6510df7e7bb745f69d67f695441607a8"

diff --git a/src/dataFunctions.js b/src/dataFunctions.js
@@ -1,9 +1,39 @@
 // Estas funciones son ejemplos, aquí puedes desarrollar tus propias funciones.
 
-export const example = () => {
-  return 'example';
+export const filterData = (data, filterBy, value) => {
+  let resultadoFiltro = []
+
+  resultadoFiltro= data.filter((Element)=>{
+    return Element.facts[filterBy] === value
+
+  })
+
+  return resultadoFiltro;
 };
 
-export const anotherExample = () => {
-  return [];
+
+export const sortData = (data=[], filterBy, asc) => {
+  const retornoOrdenado = data.sort((a, b) =>{
+    //"".toUpperCase(), para colocar un string todo mayuscula, ej abc => ABC 
+    if (asc){
+      if (a[filterBy].toUpperCase()>= b[filterBy].toUpperCase()){
+        return 1;
+      }
+      else {
+        return -1
+      }
+
+    }
+    else {
+      if (a[filterBy].toUpperCase()<= b[filterBy].toUpperCase()){
+        return 1;
+      }
+      else {
+        return -1
+      }
+
+    }
+
+  }) // a - b ascendente, - a + 
+  return retornoOrdenado; 
 };
diff --git a/src/index.html b/src/index.html
@@ -9,11 +9,30 @@
 
 <body>
   <header>
-    <h1>Visual Coffee</h1>
+    <h1> Coffee Break </h1>
+
   </header>
 
+  <label for="FiltradoPaís">Filtrar por País de Origen:</label>
+  <select id="FiltradoPaís" data-testid="select-filter" name="FiltradoPaís">
+    <option value="TODOS">TODOS</option>
+    <option value="Italia">Italia</option>
+    <option value="Australia y Nueva Zelanda">Australia y Nueva Zelanda</option>
+    <option value="EEUU">EEUU</option>
+    <option value="Alemania">Alemania</option>
+  </select>
+
+ <label for="ordenAsc-Desc"> Ordenar: </label>
+ <select id="ordenAsc-Desc" data-testid="select-order" name="ordenAsc-Desc">
+  <option disabled selected value="dafault">Selecciona un orden</option>
+ <option value="asc">Ascendente (A-Z)</option>
+ <option value="desc">Descendente(Z-A)</option>
+ </select>
+
+ <button data-testid="button-clear" name="Limpiar-Filtros"> Limpiar Filtros</button>
+
   <div id="root"> </div>
-  <footer> by Camila Rivas, Gisela Saavedra </footer>
+  <footer> By Camila Rivas </footer>
   <script src="main.js" type="module"></script>
 </body>
 

diff --git a/src/main.js b/src/main.js
@@ -2,7 +2,73 @@
 import { renderItems } from './view.js';
 
 import data from './data/dataset.js';
+import { filterData } from './dataFunctions.js';
+import { sortData } from './dataFunctions.js';
+// cree cafes como respaldo de la data y poder jugar y moverla sin romper nada 
+// ... spread sirve para hacer un "clon" que cree una referencia de lo que es el data
+let cafes = [...data]
 
 const root = document.getElementById("root"); //crear una const root para asignarle el documento 
 
-root.appendChild(renderItems(data));
+root.appendChild(renderItems(data));
+
+//console.log(filterData(data, 'origen', 'Italia')) 
+
+const selectPais = document.querySelector('select[name="FiltradoPaís"]')
+console.log(selectPais)
+selectPais.addEventListener("input", () => {
+  console.log(selectPais.value)
+  const paisSeleccionado = selectPais.value
+  if (paisSeleccionado === "TODOS") {
+    cafes = data
+    root.textContent = ""
+    root.appendChild(renderItems(cafes));
+  }
+  else {
+    cafes = filterData(data, "origen", paisSeleccionado)
+    root.textContent = ""
+    root.appendChild(renderItems(cafes));
+    console.log("else")
+  }
+
+
+
+})
+console.log()
+
+const selectOrden = document.querySelector('select[name="ordenAsc-Desc"]')
+selectOrden.addEventListener("input", () => {
+  const ordenSeleccionado = selectOrden.value
+  let dataOrdenada
+  if (ordenSeleccionado === "asc") {
+    dataOrdenada = sortData(cafes, "name", true)
+  } else {
+    dataOrdenada = sortData(cafes, "name", false)
+
+  }
+  root.textContent = ""
+  root.appendChild(renderItems(dataOrdenada))
+}
+)
+
+const botonLimpiar = document.querySelector('button[name="Limpiar-Filtros"]')
+console.log(botonLimpiar)
+botonLimpiar.addEventListener("click", () => {
+  selectPais.value = "TODOS"
+  selectOrden.value = "default"
+  console.log(data)
+  cafes = data
+  root.textContent = ""
+  root.appendChild(renderItems(cafes));
+})
+
+
+//  ir a buscar el elemento(select) con la función querySelector 
+// añadir un listener al elemento anterior (input)
+// en la funcion que gatilla el listener se va a capturar el país seleccionado por el usuario 
+// llamar a la función filterData, vamos a pasarle el valor que capturamos anteriormente 
+// el resultado se guardara en una variable
+// luego vamos a limpiar el root 
+// renderizar la data filtrada y pasarla al root con el appendChild 
+
+
diff --git a/src/style.css b/src/style.css
@@ -1,27 +1,99 @@
 img{
-    width: 280px;;
+    width: 100%;
+    height: 100%;
+    padding: 0%;
 }
 
 ul{
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
+    padding-right: 0px;
+    gap: 35px;
 }
 li{ 
-    border: 11px solid darkseagreen;
-    padding: 15px;
-    margin: 20px;
+    border: 3px solid rgb(181, 152, 132);
+    padding: 0px;
+    margin-left: 20px;
     border-radius: 10px;
     list-style: none;
     width: 350px;
     display: flex;
     flex-wrap: nowrap;
     flex-direction: column;
     justify-content: center;
-    align-items: baseline;
-    background-color: thistle;
-
+    background-color: rgb(255, 245, 232);
+    overflow: hidden;
 }
 body{
-    background-color: antiquewhite;
+    background-color: rgb(255, 245, 232);
+    margin: 0%;
+}
+
+h1{
+    font-family: sans-serif cursive;
+    text-align: left;
+    color: rgb(255, 255, 255);
+    margin: 0%;
+    padding-left: 60px;
+    padding-top: 140px;
+    font-size: 90px;
+
+}
+
+header {
+      background: url("https://lltostadores.com/cdn/shop/files/curso_de_cafe.jpg?v=1617920083");
+      display: flex;
+      justify-content: center;
+      flex-direction: column;
+      margin-left: 0%;
+      margin-right: 0%;
+      width: 100%;
+      max-width: 1500;
+      height: 400px;
+      border-radius: 0px;
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
+}
+
+
+
+label{
+    padding: 30px;
+    font-family: sans-serif;
+    color:  rgb(89, 55, 11);
+}
+
+dd{
+    color: rgb(89, 55, 11);
+    margin-left: 15px;
+    margin-bottom: 5px;
+    margin-top: 5px;
+}
+
+dt{
+    color:rgb(29, 8, 8);
+    margin-left: 5px;
+    margin-top: 5px;
+
+}
+
+select{
+    border: px solid rgb(232, 219, 219);
+    background-color: rgb(255, 255, 255);
+    color: rgb(66, 44, 16);
+    margin-top: 30px; 
+    margin-bottom: 30px;
+    height: 30px;
+    border-radius: 7px;
+
+}
+
+footer{
+    color: brown;
+    font-family: sans-serif;
+}
+
+.cafe-name{
+    text-align: center;
 }
diff --git a/test/data.js b/test/data.js
@@ -1,5 +1,20 @@
 // Aqui puedes agregar los datos que necesites para tus pruebas
 // al menos debe tener uno que se llame "data"
 
-export const data = [];
+export const data = [  {
+  "id": "cafe-espresso",
+  "name": "Espresso",
+  "shortDescription": "Esta preparación tiene una relación de agua y café 1:2.",
+  "description": "Se popularizó gracias al desarrollo y perfeccionamiento de la máquina de espresso por parte de Luigi Bezzera en 1901. Esta máquina permitía una extracción rápida y bajo presión del café molido, produciendo una bebida concentrada y sabrosa que se convirtió en un símbolo de la cultura del café italiana. El término proviene del italiano y significa 'exprimido' haciendo referencia al proceso de extracción del café bajo presión. La creación del espresso revolucionó la forma en que se preparaba y consumía el café, dando lugar a una bebida más concentrada y más intensa que las preparaciones de café tradicionales.",
+  "imageUrl": "/images/espresso.jpg",
+  "facts": {
+    "origen": "Italia, Milán",
+    "tiempoDeExtraccion": "25-35 segundos aproximadamente.",
+    "molienda": "Superfina",
+    "contenido": "dosis de café y agua mineralizada."
+  },
+  "extraInfo": {
+    "imageSource": "img.jpg/espresso.jpg"
+  }
+}, ];