Laboratoria · Mireilys · Mar 15, 2024 · Mar 15, 2024 · Mar 15, 2024 · Mar 16, 2024
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -33,7 +33,7 @@
     "eslint": "^8.3.0",
     "gh-pages": "^3.1.0",
     "htmlhint": "^1.0.0",
-    "jest": "^27.0.1",
+    "jest": "^27.5.1",
     "jsdom": "^22.1.0",
     "opener": "^1.5.1",
     "serve": "^14.2.1"
@@ -49,4 +49,4 @@
   "jest": {
     "testEnvironment": "jsdom"
   }
-}
+}
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,59 @@
-// Estas funciones son ejemplos, aquí puedes desarrollar tus propias funciones.
-
-export const example = () => {
-  return 'example';
+export const filterData = (data, filterBy, value) => {
+  // console.log('data', data);
+  // console.log('filterBy', filterBy);
+  // console.log('value', value);
+  const filteredData = data.filter(item => {
+    const filterParts = filterBy.split('.');
+    let obj = item;
+    for (let i = 0; i < filterParts.length; i++) {
+      obj = obj[filterParts[i]];
+    }
+    return obj === value;
+  });
+  // console.log('filteredData', filteredData);
+  // Devuelve el arreglo filtrado
+  return filteredData;
 };
 
-export const anotherExample = () => {
-  return [];
+
+export const sortBySharkSize = (data, sortBy, sortOrder) => {
+  // console.log('data', data);
+  // console.log('sortBy', sortBy);
+  // console.log('sortOrder', sortOrder);
+  const sortedData = data.sort((a, b) => {
+    let sizeA, sizeB;
+
+    // Obtener los tamaños de los tiburones basado en el campo especificado por sortBy
+    if (sortBy) {
+      sizeA = a[sortBy];
+      sizeB = b[sortBy];
+    } else {
+      sizeA = a.maximumSizeMtr;
+      sizeB = b.maximumSizeMtr;
+    }
+
+    // Determinar el orden de comparación basado en sortOrder
+    const compareValue = sortOrder === 'desc' ? -1 : 1;
+
+    // Realizar la comparación de tamaños
+    if (sizeA < sizeB) {
+      return -1 * compareValue;
+    }
+    if (sizeA > sizeB) {
+      return 1 * compareValue;
+    }
+    return 0;
+  });
+
+  return sortedData;
 };
+
+export const computeStats = (data) => {
+  const longevity = data.map(item => item.facts.approximateLongevity);
+  // console.log('longevity',longevity);
+  const totalLongevity = longevity.reduce((acc,cur) => acc + cur, 0);
+  // console.log('suma array',totalLongevity);
+  const averageLongevity = (totalLongevity/longevity.length).toFixed(2);
+  return averageLongevity;
+  // console.log('promedio', averageLongevity);
+}
diff --git a/src/index.html b/src/index.html
@@ -1,11 +1,49 @@
 <!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>
+<html lang="es">
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Dataverse</title>
+  <link rel="stylesheet" href="style.css" />
+</head>
+
+<body>
+  <header>
+    <h1>SharkInfo</h1>
+    <h2>Sumérgete en el mundo de los tiburones</h2>
+  </header>
+  <main>
+    <!-- filtrar data -->
+    <section>
+      <label for="locationOfTheSpecie"> Filtrar por hábitat de la especie:</label>
+      <select id="locationOfTheSpecie" name="locationOfTheSpecie" data-testid="select-filter">
+        <option value="Aguas profundas">Aguas profundas</option>
+        <option value="Aguas tropicales y subtropicales">Aguas tropicales y subtropicales</option>
+        <option value="Océano Atlántico">Océano Atlántico</option>
+        <option value="Océano Pacífico">Océano Pacífico</option>
+        <option value="Océanos en todo el mundo">Océanos en todo el mundo</option>
+      </select>
+      <!-- ordenar data  -->
+      <label for="maximumSizeMtr">Ordenar por tamaño de tiburón en Mts:</label>
+      <select id="maximumSizeMtr" name="maximumSizeMtr" data-testid="select-sort">
+        <option value="asc">0 - 15</option>
+        <option value="desc">15 - 0</option>
+      </select>
+      <!-- boton para limpiar filtros -->
+      <button id="clearFilter" data-testid="button-clear">Limpiar filtros</button>
+    </section>
+     <section class="longevity">
+      <button id="longevityProm">Calcular longevidad promedio</button>
+      <input type="text" id="result">
+    </section>
+    <div id="root"></div>
+  </main>
+  <footer>
+    <p class="p">
+      Hecho por Mireilys e Iveth</p>
+  </footer>
+  <script src="main.js" type="module"></script>
+</body>
+
+</html>
diff --git a/src/main.js b/src/main.js
@@ -1,6 +1,64 @@
-import { example } from './dataFunctions.js';
+import { filterData } from './dataFunctions.js';
+import { sortBySharkSize } from './dataFunctions.js';
 import { renderItems } from './view.js';
-
 import data from './data/dataset.js';
+// import {computeStats}from './dataFunctions.js';
+
+
+const htmlElement = document.querySelector('html');
+let statusData = data;
+htmlElement.getElementsByTagName('body')[0].getElementsByTagName('div')[0].appendChild(renderItems(statusData));
+
+// Para seleccionar el <select> Filtrar
+const selectElement = document.getElementsByName("locationOfTheSpecie")[0];
+// Evento al elemento <select> 
+selectElement.addEventListener('change', function () {
+// capturar el valor seleccionado 
+  const selectedValue = selectElement.value;
+  // console.log('Opción seleccionada:', selectedValue);
+
+  //filtrar los datos basados en el valor seleccionado
+  const filteredData = filterData(data, 'facts.locationOfTheSpecie', selectedValue);
+  statusData = filteredData;
+  // console.log('filteredData', filterData);
+  //renderizar los elementos filtrados 
+  htmlElement.getElementsByTagName('body')[0].getElementsByTagName('div')[0].replaceChildren(renderItems(statusData));
+});
+
+// Para seleccionar el <select> Ordenar
+const sortElement = document.getElementsByName("maximumSizeMtr")[0];
+// Evento al elemento <select> 
+sortElement.addEventListener("change", function () {
+  // Capturar el valor seleccionado 
+  const sortValue = sortElement.value;
+
+  // Ordenar la data basada en el valor seleccionado
+  let sortedData;
+  if (sortValue === 'asc') {
+    sortedData = sortBySharkSize(statusData, 'maximumSizeMtr', 'asc');
+  } else if (sortValue === 'desc') {
+    sortedData = sortBySharkSize(statusData, 'maximumSizeMtr', 'desc');
+  } else {
+    // Manejar un caso por defecto
+    sortedData = statusData;
+  }
+  statusData = sortedData 
+  // Renderizar los elementos ordenados
+  htmlElement.getElementsByTagName('body')[0].getElementsByTagName('div')[0].replaceChildren(renderItems(statusData));
+});
+
+const buttonClear = document.getElementById('clearFilter');
+buttonClear.addEventListener("click", ()=>{
+  statusData= data;
+  htmlElement.getElementsByTagName('body')[0].getElementsByTagName('div')[0].replaceChildren(renderItems(statusData));
+})
+
+// const longevityAverage = document.getElementById('longevityProm');
+// longevityAverage.addEventListener("click", ()=>{
+//   // console.log('evento',longevityAverage);
+//   // calculeLongevity = computeStats(data);
+// // console.log();
+
+// })
 
-console.log(example, renderItems(data), data);
+renderItems(data);