Laboratoria · fe-ercg · Jun 6, 2024 · Jun 6, 2024 · Jun 6, 2024 · Jun 6, 2024
diff --git a/README.md b/README.md
diff --git a/package-lock.json b/package-lock.json
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,30 @@
-// Estas funciones son ejemplos, aquí puedes desarrollar tus propias funciones.
+// SORT-----------------------------------------------------------------------------------
+export const sortData = (data, sortBy, sortOrder) => {
+  const copyData = data.map((item) => item);
+  const dataOrder = copyData.sort((a,b) => a[sortBy].localeCompare(b[sortBy]));
+  return sortOrder === "asc" ? dataOrder : dataOrder.reverse();
+};
+
+// FILTRO---------------------------------------------------------------------------------
+export const filterData = (data, filterBy, value) =>{
+  const resultFilterData = data.filter((item) => {
+    const factsFilter = String(item.facts[filterBy]).split('');
+    return factsFilter[0].includes(value);
+  });
+  return resultFilterData;
+}
 
-export const example = () => {
-  return 'example';
+//STATS PORCENTAJES------------------------------------------------------------------
+export const computeStats = (data, dataTotal) => {
+  const percentage = (data.length / dataTotal.length) * 100;
+  return percentage.toFixed(2);
 };
 
-export const anotherExample = () => {
-  return [];
+//PROMEDIO DE EDAD---------------------------------------------------------------------
+
+export const averageStats = (data) => {
+  const average = data.reduce((acumulador, item) => {
+    return acumulador + item.facts["age"];
+  }, 0);
+  return (average / data.length).toFixed();
 };
diff --git a/src/index.html b/src/index.html
@@ -1,11 +1,91 @@
 <!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>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link rel="stylesheet" href="style.css" />
+  <!-- TIPOGRAFIA DEL H2 -->
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Carter+One&display=swap" rel="stylesheet">
+
+</head>
+
+<body>
+  <header>
+    <!-- IMAGEN TITULO Y EL H1 NO SE VE -->
+    <img
+      src="https://res.cloudinary.com/db3qclbrk/image/upload/v1719354548/Spider-Man_Across_the_Spider-Verse_logo.webp_ebwb10.png"
+      alt="Spiderverse">
+    <h1>Spiderverse</h1>
+
+    <!-- BARRA NAV CONTIENE LOS BOTONES DE ORDENAR Y FILTRAR Y RESET -->
+    <nav class="controls" id="nav">
+
+      <div class="select-box">
+        <label for="filter">Filtrar por: </label>
+        <select data-testid="select-filter" name="gender age" id="filter">
+          <option value="" disabled selected>Selecciona</option>
+          <optgroup label="Genero">
+            <option value="M" class="filter-option">Masculino</option>
+            <option value="F" class="filter-option">Femenino</option>
+          </optgroup>
+          <optgroup label="Edad">
+            <option value="1" class="filter-option">Jovenes</option>
+            <option value="2" class="filter-option">Adultos jovenes</option>
+            <option value="3" class="filter-option">Adultos</option>
+          </optgroup>
+        </select>
+      </div>
+
+      <div class="select-box">
+        <label for="sort-order">Ordenar por:</label>
+        <select data-testid="select-sort" id="sort-order" name="name">
+          <option value="" disabled selected>Selecciona</option>
+          <optgroup label="Por nombre">
+            <option value="asc">Ascendente</option>
+            <option value="desc">Descendente</option>
+          </optgroup>
+        </select>
+      </div>
+
+      <button data-testid="button-clear">Limpiar</button>
+    </nav>
+
+    <!-- DIV CONTIENE EL BOTON DE HAMBURGESA Y EL DE LAS ESTADISTICAS-->
+    <div class="computeStats" id="boxButtoms">
+      <div class="burger-container">
+        <button id="burger">
+          <div class="bar"></div>
+          <div class="bar"></div>
+          <div class="bar"></div>
+        </button>
+      </div>
+      <button id="buttonStats">Datos Curiosos</button>
+    </div>
+    <div id="showStats">
+    </div>
+  </header>
+
+  <main>
+    <h2>
+      CONOCE A LOS PERSONAJES
+    </h2>
+    <!-- DIV QUE MUESTRA LAS TARJETAS-->
+    <div id="root" class="box-characters">
+    </div>
+  </main>
+
+
+  <footer>
+    <p class="footer"> &copy; Made by Fernanda y Anyerlin</p>
+    <p class="footer">Laboratoria DEV015</p>
+  </footer>
+
+  <script src="main.js" type="module"></script>
+
+</body>
+
+</html>
diff --git a/src/main.js b/src/main.js
@@ -1,6 +1,132 @@
-import { example } from './dataFunctions.js';
-import { renderItems } from './view.js';
+import {
+  filterData,
+  sortData,
+  computeStats,
+  averageStats,
+} from "./dataFunctions.js";
+import { renderItems } from "./view.js";
 
-import data from './data/dataset.js';
+import data from "./data/dataset.js";
 
-console.log(example, renderItems(data), data);
+// Trae la info de la funcion render items-----------------------------------------------------------------
+const render = document.querySelector("#root");
+render.appendChild(renderItems(data));
+
+//FILTRO----------------------------------------------------------------------------------------------------
+const filter = document.querySelector("#filter");
+let newFilterData;
+
+filter.addEventListener("change", (event) => {
+  const filterValue = event.target.value;
+
+  if (filterValue === "M" || filterValue === "F") {
+    newFilterData = filterData(data, "gender", filterValue);
+  }
+  if (filterValue === "1" || filterValue === "2") {
+    newFilterData = filterData(data, "age", filterValue);
+  }
+  if (filterValue === "3") {
+    newFilterData = filterData(data, "age", "3").concat(
+      filterData(data, "age", "4")
+    );
+  }
+
+  sort.value = "";
+  render.innerHTML = "";
+  render.appendChild(renderItems(newFilterData));
+});
+
+//SORT----------------------------------------------------------------------------------------------------
+const sort = document.querySelector("#sort-order");
+
+sort.addEventListener("change", (event) => {
+  const sortValue = event.target.value;
+  let orderData;
+
+  if (newFilterData) {
+    orderData = sortData(newFilterData, "name", sortValue);
+  } else {
+    orderData = sortData(data, "name", sortValue);
+  }
+
+  render.innerHTML = "";
+  render.appendChild(renderItems(orderData));
+});
+
+// BOTON RESET---------------------------------------------------------------------------------------
+const buttonReset = document.querySelector(
+  "button[data-testid='button-clear']"
+);
+
+buttonReset.addEventListener("click", function () {
+  render.innerHTML = "";
+  filter.value = "";
+  sort.value = "";
+  newFilterData = "";
+
+  render.appendChild(renderItems(data));
+});
+
+//STATS
+const buttonStats = document.querySelector("#buttonStats");
+const showStats = document.querySelector("#showStats");
+
+buttonStats.addEventListener("click", function () {
+  //ESTADISTICAS DE GENERO----------------------------------------------------------------------------
+  const dataFemenino = filterData(data, "gender", "F");
+
+  const divGender = document.createElement("div");
+  divGender.classList.add("stats");
+  divGender.innerHTML =
+    "<p>El <span>" +
+    computeStats(dataFemenino, data) +
+    "%</span> son del genero Femenino</p>";
+  showStats.appendChild(divGender);
+
+  //ESTADISTICAS DE CITY----------------------------------------------------------------------------
+  const ny = filterData(data, "city", "N");
+
+  const divCity = document.createElement("div");
+  divCity.classList.add("stats");
+  divCity.innerHTML =
+    "<p>El <span>" +
+    computeStats(ny, data) +
+    "%" +
+    "</span> viven en la ciudad de Nueva York</p>";
+  showStats.appendChild(divCity);
+
+  //ESTADISTICAS DE EDAD----------------------------------------------------------------------------
+  const age = averageStats(data);
+
+  const divAge = document.createElement("div");
+  divAge.classList.add("stats");
+  divAge.innerHTML =
+    "<p>La edad promedio de los Spider Man es <span>" +
+    age +
+    "</span> años </p>";
+  showStats.appendChild(divAge);
+
+  //MUESTRA LAS ESTADISTICAS ----------------------------------------------------------------------------
+  if (showStats.style.display === "flex") {
+    showStats.style.display = "none";
+    showStats.innerHTML = "";
+  } else {
+    showStats.style.display = "flex";
+  }
+});
+
+//FUNCIONALIDAD DE BOTON HAMBURGUESA----------------------------------------------------------------------
+
+const burger = document.querySelector("#burger");
+const nav = document.querySelector("#nav");
+const boxButtoms = document.querySelector("#boxButtoms");
+
+burger.addEventListener("click", function () {
+  if (nav.style.display === "flex") {
+    nav.style.display = "none";
+  } else {
+    nav.style.display = "flex";
+  }
+
+  boxButtoms.parentNode.insertBefore(nav, boxButtoms.nextSibling);
+});