Hito4

package.json

@@ -31,7 +31,7 @@
     "babel-jest": "^27.0.1",
     "css": "^3.0.0",
     "eslint": "^8.3.0",
-    "gh-pages": "^3.1.0",
+    "gh-pages": "^6.1.1",
     "htmlhint": "^1.0.0",
     "jest": "^27.0.1",
     "jsdom": "^22.1.0",
@@ -49,4 +49,4 @@
   "jest": {
     "testEnvironment": "jsdom"
   }
-}
+}

src/dataFunctions.js

@@ -1,9 +1,45 @@
-// Estas funciones son ejemplos, aquí puedes desarrollar tus propias funciones.
+// Filtra los datos según una propiedad y un valor específicos
+export const filterData = (data, property, value) => {    //filtra un array de objetos (data) según una propiedad específica (property) y un valor específico (value
+  return data.filter(item => item.facts[property] && item.facts[property].toLowerCase() === value.toLowerCase());   //property: El nombre de la propiedad dentro de cada objeto (item) en data que se utilizará para hacer el filtro. value: El valor que se busca en la propiedad property. data: El array de objetos que se desea filtrar.
+};   //Dentro de la función de filtro (item => ...), verifica si item.facts[property] existe y si su valor, convertido a minúsculas con .toLowerCase(), es estrictamente igual (===) al valor value convertido también a minúsculas.
 
-export const example = () => {
-  return 'example';
+// Ordena los datos según una propiedad específica   //ordena un array de objetos (data) según el valor de una propiedad específica (property).
+export const sortData = (data, property, ascending = true) => {         
+  return data.sort((a, b) => {
+    if (a[property] < b[property]) return ascending ? -1 : 1;
+    if (a[property] > b[property]) return ascending ? 1 : -1;
+    return 0;
+  });
 };
 
-export const anotherExample = () => {
-  return [];
-};
+//Esta función calcula el promedio del nivel de picante de los platillos.
+export function computeAverageSpiciness(data) {   
+  const totalSpiciness = data.reduce((sum, item) => sum + item.spiciness, 0);     //reduce es un método de los arrays en JavaScript que aplica una función sobre un acumulador (en este caso sum) y cada elemento del array (item) para reducirlo a un único valor.
+  const averageSpiciness = totalSpiciness / data.length;
+  return averageSpiciness.toFixed(2);                                            //sum + item.spiciness suma el nivel de picante (spiciness) de cada platillo al acumulador sum.
+}  //  Divide la suma total del picante (totalSpiciness) por la cantidad de platillos (data.length) para obtener el promedio     //  0 es el valor inicial del acumulador sum.    El resultado de reduce es la suma total de los niveles de picante de todos los platillos.           // 
+
+//Esta función encuentra el platillo más picante.
+export function computeHottestDish(data) {
+  return data.reduce((hottest, item) => (item.spiciness > hottest.spiciness ? item : hottest), data[0]); //reduce recorre cada platillo (item) comparando su nivel de picante (item.spiciness) con el del platillo más picante encontrado hasta el momento (hottest.spiciness).Si el nivel de picante del platillo actual es mayor que el del platillo más picante encontrado hasta ahora, actualiza hottest con el platillo actual (item), de lo contrario, mantiene hottest. data[0] es el valor inicial de hottest, comenzando con el primer platillo del array.
+
+}
+//hito 4
+//Esta función encuentra el platillo menos picante.
+export function computeMildestDish(data) {   //Similar a computeHottestDish, pero compara si el nivel de picante del platillo actual es menor que el del platillo menos picante encontrado hasta el momento.
+  return data.reduce((mildest, item) => (item.spiciness < mildest.spiciness ? item : mildest), data[0]); //Si el nivel de picante del platillo actual es menor, actualiza mildest con el platillo actual (item), de lo contrario, mantiene mildest.
+}
+
+//Esta función clasifica los platillos en niveles de picante: leve, medio y alto.
+export function computeSpicinessLevels(data) { 
+  return data.reduce((levels, item) => {  //levels es un objeto que inicializa los contadores de cada nivel de picante (mild, medium, hot) a 0.
+    if (item.spiciness < 3) levels.mild++;  //Si el nivel de picante es menor que 3, incrementa el contador de mild.
+    else if (item.spiciness < 7) levels.medium++;  //Si el nivel de picante es menor que 7 pero mayor o igual a 3, incrementa el contador de medium.
+    else levels.hot++;   //Si el nivel de picante es mayor o igual a 7, incrementa el contador de hot.
+    return levels;            //El objeto levels con los contadores actualizados se devuelve al final.
+  }, { mild: 0, medium: 0, hot: 0 });
+}
+
+
+
+

src/index.html

@@ -1,11 +1,67 @@
-<!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8">
     <title>Dataverse</title>
     <link rel="stylesheet" href="style.css" />
+    <link href="https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700&family=Raleway:wght@400;700&display=swap" rel="stylesheet">
+
   </head>
   <body>
     <script src="main.js" type="module"></script>
+    <header>
+      <h1>MEXICO PICANTE</h1>
+    </header>
+    <div class="flex-container">
+      <label for="filtro-pedido">TIPO DE PEDIDO</label>
+      <select data-testid="select-filter" name="pedido" id="filtro-pedido">
+        <option value="Bebidas Picantes">Bebidas</option>
+        <option value="Plato Principal">Plato Principal</option>
+        <option value="Sopas y Caldos">Sopas y Caldos</option>
+        <option value="Antojitos y Botanas">Antojitos y Botanas</option>
+        <option value="Postres">Postres</option>
+        <option value="Salsa y guarniciones">Salsas y Guarniciones</option>
+      </select>
+
+
+      <label for="filtro-picante">NIVEL DE PICANTE</label>
+      <select data-testid="select-filterPicante" name="picante" id="filtro-picante">
+        <option value="Alto"> 🌶️🌶️🌶️ </option>
+        <option value="Medio"> 🌶️🌶️</option>
+        <option value="Bajo">🌶️</option>
+      </select>
+
+      <label for="filtro-alfabetica"> Ordenar de manera </label>
+      <select data-testid="select-sort" name="alfabetica" id="filtro-alfabetica">
+        <option value="asc">A - Z</option>
+        <option value="desc">Z - A</option>
+      </select>
+    </div>
+     <button data-testid="button-clear">Limpiar Pedido</button>
+    <div id="root"></div>
+    <div id="resultado-container"></div>
+
+
+
+    <label for="calculationType">Tipo de Cálculo</label>
+    <select id="calculationType" name="calculationType">
+      <option value="averageSpiciness">Promedio de picante</option>
+      <option value="hottestDish">Platillo más picante</option>
+      <option value="mildestDish">Platillo menos picante</option>
+      <option value="spicinessLevels">Niveles de picante</option>
+    </select>
+
+    <button id="calculateButton">Calcular</button>
+    <div id="result"></div>
+
+<!--checar esto
+    <ul id="data-list">-->
+      <!-- Ejemplo de elementos de datos, asegúrate de que tus datos se rendericen de esta manera
+      <li itemtype="https://schema.org/FoodEstablishment">Tacos al pastor - Picor: Bajo</li>
+      <li itemtype="https://schema.org/FoodEstablishment">Chiles en nogada - Picor: Medio</li>
+      <li itemtype="https://schema.org/FoodEstablishment">Aguachile - Picor: Alto</li>
+    </ul>-->
+    <footer>
+      <p>BRIGLYN</p>
+    </footer>
   </body>
 </html>

src/main.js

@@ -1,6 +1,101 @@
-import { example } from './dataFunctions.js';
+import { filterData, sortData } from './dataFunctions.js';
 import { renderItems } from './view.js';
-
 import data from './data/dataset.js';
 
-console.log(example, renderItems(data), data);
+// Selección del elemento #root 
+const rootH = document.querySelector("#root");   //rootH es una referencia al elemento del DOM con el id root. Este elemento servirá como el contenedor principal donde se renderizarán los elementos dinámicos.
+
+// Renderizado inicial de los datos
+rootH.appendChild(renderItems(data));  //Se utiliza renderItems(data) para generar y mostrar inicialmente todos los elementos de data en el elemento #root.
+
+let filtrosPlato = data;
+
+// Controladores de eventos para los selectores
+const filtroPedido = document.querySelector('[data-testid="select-filter"]');     //filtrosPlato se inicializa con data, lo que permite filtrar y ordenar los datos base inicialmente cargados.
+const filtroPicante = document.querySelector('[data-testid="select-filterPicante"]');      //Se obtienen referencias a los elementos del DOM que corresponden a los selectores (filtroPedido, filtroPicante, filtroAlfabetica, botonLimpiar) utilizando atributos data-testid para identificarlos fácilmente.
+const filtroAlfabetica = document.querySelector('[data-testid="select-sort"]');
+const botonLimpiar = document.querySelector('[data-testid="button-clear"]');
+
+filtroPedido.addEventListener("change", (e) => {          //Cuando cambia el valor de filtroPedido (selector de tipo de plato), se obtiene el nuevo valor seleccionado (platoPrincipal).
+  const platoPrincipal = e.target.value;                 //Se filtran los datos originales (data) utilizando filterData basado en el campo "mainField" y el valor seleccionado.
+  filtrosPlato = filterData(data, "mainField", platoPrincipal);     
+  rootH.innerHTML = "";     //Se limpia el contenido actual de rootH y se vuelve a renderizar (appendChild) los elementos filtrados utilizando renderItems.
+  rootH.appendChild(renderItems(filtrosPlato));
+});
+
+filtroPicante.addEventListener("change", (e) => {
+  const nivelPicante = e.target.value;
+  const platosFiltrados = filterData(data, "nivelSpicy", nivelPicante);
+  rootH.innerHTML = "";
+  rootH.appendChild(renderItems(platosFiltrados));
+});
+
+filtroAlfabetica.addEventListener("change", (e) => {
+  const orden = e.target.value;
+  const platosOrdenados = sortData(filtrosPlato, "name", orden === "asc");
+  rootH.innerHTML = "";
+  rootH.appendChild(renderItems(platosOrdenados));
+});
+
+botonLimpiar.addEventListener("click", () => {
+  rootH.innerHTML = "";
+  rootH.appendChild(renderItems(data));
+});
+
+//son funciones importadas desde dataFunctions.js. Estas funciones realizan diversos cálculos sobre los datos de platos picantes.
+import { computeAverageSpiciness, computeHottestDish, computeMildestDish, computeSpicinessLevels} from './dataFunctions.js';
+//es una función importada desde view.js, la cual actualiza la interfaz de usuario con los resultados de los cálculos.
+import { updateResult } from './view.js';
+
+// Datos de ejemplo, reemplaza esto con tus datos reales
+//spicyDishes es un arreglo que contiene objetos, cada uno representando un platillo con su nombre y nivel de picante (spiciness).
+const spicyDishes = [
+  { name: 'Aguachile Verde', spiciness: 8 },
+  { name: 'Mole Negro', spiciness: 6 },
+  { name: 'Chiles en Nogada', spiciness: 4 },
+  { name: 'Birria de Res', spiciness: 5 },
+  { name: 'Cochinita Pibil', spiciness: 6 },
+  { name: 'Tacos al pastor', spiciness: 3 },
+  { name: 'Tacos de cochinita pibil', spiciness: 6},
+  { name: 'Coctel de camarón', spiciness: 4 },
+  { name: 'Ceviche', spiciness: 3},
+  { name: 'Tamal oaxaqueño', spiciness: 5 },
+  { name: 'Pozole Rojo', spiciness: 7 },
+  { name: 'Caldo Tlalpeño', spiciness: 7 },
+  { name: 'Menudo', spiciness: 8 },
+  { name: 'Tostada de Tinga', spiciness: 7 },
+  { name: 'Sopes', spiciness: 4 },
+  { name: 'Tlacoyos con Salsa de Chile Morita', spiciness: 8 },
+  { name: 'Tostadas de camarón', spiciness: 4 },
+  { name: 'Salsa Roja', spiciness: 9 },
+  { name: 'Salsa verde', spiciness: 9 },
+  { name: 'Guacamole', spiciness: 7 },
+  { name: 'Pico de gallo', spiciness:89 },
+  { name: 'Chocolate con chile', spiciness: 7 },
+  { name: 'Frutas con chile', spiciness: 8 },
+  { name: 'Micheladas', spiciness: 9 }
+
+];
+
+// Seleccionar elementos del DOM
+
+const select = document.querySelector('#calculationType'); //selecciona el menú desplegable (con id calculationType) que permite al usuario elegir el tipo de cálculo que desea realizar.
+const button = document.querySelector('#calculateButton'); //selecciona el botón (con id calculateButton) que, al hacer clic, desencadenará el cálculo.
+
+// Vincular eventos a los elementos del DOM
+button.addEventListener('click', () => {  //Aquí se añade un event listener al botón que escucha por un clic y ejecuta la función provista cuando se hace clic.
+  const calculationType = select.value; //obtiene el valor seleccionado en el menú desplegable.
+  let result; // declara una variable result que almacenara el resultado del calculo. 
+  if (calculationType === 'averageSpiciness') { //Dependiendo del valor de calculationtype se ejecuta la siguiente funcion para calcular el resultado
+    result = computeAverageSpiciness(spicyDishes); //   Si calculationType es 'averageSpiciness', se llama a computeAverageSpiciness(spicyDishes) y se almacena el resultado en result.
+  } else if (calculationType === 'hottestDish') { //Si calculationType es 'hottestDish', se llama a computeHottestDish(spicyDishes).name para obtener el nombre del platillo más picante.
+    result = computeHottestDish(spicyDishes).name; //Si calculationType es 'mildestDish', se llama a computeMildestDish(spicyDishes).name para obtener el nombre del platillo menos picante.
+  } else if (calculationType === 'mildestDish') {  // Si calculationType es 'spicinessLevels', se llama a computeSpicinessLevels(spicyDishes) y se construye una cadena con los niveles de picante.
+    result = computeMildestDish(spicyDishes).name;  
+  } else if (calculationType === 'spicinessLevels') {
+    const levels = computeSpicinessLevels(spicyDishes);
+    result = `Picante: ${levels.mild}, Medio Picante: ${levels.medium}, Muy Picante: ${levels.hot}`; 
+  }
+  updateResult(result); //Finalmente, updateResult(result); se llama para actualizar la interfaz de usuario con el resultado del cálculo.
+});
+