Laboratoria · Mireilys · Mar 15, 2024 · Mar 15, 2024 · Mar 15, 2024 · Mar 16, 2024
diff --git a/README.md b/README.md
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,48 @@
-// Estas funciones son ejemplos, aquí puedes desarrollar tus propias funciones.
+export const filterData = (data, filterBy, value) => {
 
-export const example = () => {
-  return 'example';
+  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;
+  });
+
+  return filteredData;
 };
 
-export const anotherExample = () => {
-  return [];
+
+export const sortBySharkSize = (data, sortBy, sortOrder) => {
+
+  const sortedData = data.sort((a, b) => {
+    let sizeA, sizeB;
+
+    if (sortBy) {
+      sizeA = a[sortBy];
+      sizeB = b[sortBy];
+    } else {
+      sizeA = a.maximumSizeMtr;
+      sizeB = b.maximumSizeMtr;
+    }
+
+    const compareValue = sortOrder === 'desc' ? -1 : 1;
+
+    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);
+  const totalLongevity = longevity.reduce((acc,cur) => acc + cur, 0);
+  const averageLongevity = (totalLongevity/longevity.length).toFixed(2);
+  return averageLongevity;
+}
diff --git a/src/index.html b/src/index.html
@@ -1,11 +1,44 @@
 <!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>
+    <section>
+      <label for="locationOfTheSpecie"> Hábitat:</label>
+      <select id="locationOfTheSpecie" name="locationOfTheSpecie" data-testid="select-filter">
+        <option value="Todas">Todas</option>
+        <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>
+      <label for="maximumSizeMtr">Tamaño:</label>
+      <select id="maximumSizeMtr" name="maximumSizeMtr" data-testid="select-sort">
+        <option value="asc">0 - 15</option> 
+        <option value="desc">15 - 0</option> 
+      </select>
+      <p id="longevityText">Longevidad promedio:</p>
+      <button id="longevityProm">Calcular</button>
+      <button id="clearFilter" data-testid="button-clear">Limpiar filtros</button>
+    </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,55 @@
-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));
+
+const selectElement = document.getElementsByName("locationOfTheSpecie")[0];
+selectElement.addEventListener('change', function () {
+  const selectedValue = selectElement.value;
+  if (selectedValue === 'Todas') {
+    htmlElement.getElementsByTagName('body')[0].getElementsByTagName('div')[0].replaceChildren(renderItems(data));
+  } else {
+    const filteredData = filterData(data, 'facts.locationOfTheSpecie', selectedValue);
+    statusData = filteredData;
+    htmlElement.getElementsByTagName('body')[0].getElementsByTagName('div')[0].replaceChildren(renderItems(statusData));
+  }
+});
+
+const sortElement = document.getElementsByName("maximumSizeMtr")[0];
+sortElement.addEventListener("change", function (event) {
+  const sortValue = event.target.value;
+
+  let sortedData;
+  if (sortValue === 'asc') {
+    sortedData = sortBySharkSize(statusData, 'maximumSizeMtr', 'asc');
+  } else if (sortValue === 'desc') {
+    sortedData = sortBySharkSize(statusData, 'maximumSizeMtr', 'desc');
+  } else {
+    sortedData = statusData;
+  }
+  statusData = sortedData
+  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));
+  document.querySelector('#locationOfTheSpecie').value = 'Todas';
+  document.querySelector('#longevityText').innerHTML = 'Longevidad promedio:';
+})
+
+const longevityAverage = document.querySelector('#longevityProm');
+const longevityText = document.querySelector('#longevityText');
+longevityAverage.addEventListener("click", () => {
+  longevityText.innerHTML = 'Longevidad promedio: ' + computeStats(statusData) + ' años';
+
+})
 
-console.log(example, renderItems(data), data);
+renderItems(data);