Laboratoria · Danimar-g · Jun 17, 2024 · Jun 17, 2024 · Jun 18, 2024 · Jun 18, 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/assets/DisneyFont.ttf b/src/assets/DisneyFont.ttf
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,36 @@
-// Estas funciones son ejemplos, aquí puedes desarrollar tus propias funciones.
+/* eslint-disable indent */
+/* eslint-disable no-unused-vars */
 
-export const example = () => {
-  return 'example';
+export const computeStats = (data) => {
+    const sumaTotalDuracion = data.reduce((acumulador, pelicula) => acumulador + Number(pelicula.facts.tiempoDuracion.split(" ")[0]), 0);
+
+    return sumaTotalDuracion/data.length;
+  };
+
+export const computeStatsNota = (data) => {
+    const sumaTotalNota = data.reduce((acumulador, pelicula) => acumulador + Number(pelicula.facts.clasificPublico.split("/")[0]), 0);
+     const promedioNota= sumaTotalNota/data.length;
+
+    return promedioNota.toFixed(1);
+  };
+
+
+export const filterData = (data, filterBy, value) => {
+  const resultFilter = data.filter(
+    (data) => data.facts[filterBy] >= Number(value) && data.facts[filterBy] <= Number(value) + 9
+  );
+  return resultFilter; 
 };
 
-export const anotherExample = () => {
-  return [];
+export const sortData = (data,sortBy, sortOrder) => {
+  const nombresOrdenados = data.sort((a, b) => {
+    if (sortOrder === 'Asc') {
+      return a[sortBy].localeCompare(b[sortBy]);
+    } else {
+      return b[sortBy].localeCompare(a[sortBy]);
+    }
+  });
+    return nombresOrdenados;
 };
+
+
diff --git a/src/index.html b/src/index.html
@@ -1,11 +1,73 @@
 <!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">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Dataverse</title>
+  <link rel="stylesheet" href="style.css" />
+  <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=Comic+Neue:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap"
+    rel="stylesheet">
+  <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=Montserrat+Alternates:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
+    rel="stylesheet">
+     <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=Aclonica&display=swap" rel="stylesheet"> 
+  <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=Henny+Penny&display=swap" rel="stylesheet">
+</head>
+<header>
+  <h1>Dreamland</h1>
+</header>
+<body>
+  <main>
+    <h2>¡Bienvenidos fans de Disney y Pixar! Explora nuestro mágico contenido y descubre las novedades de este fantástico mundo</h2>
+
+    <div class="selectores">
+      <label for="epoca"><span class="tituloSelectores"><b> Selecciona por épocas</b></span></label>
+      <select id="epoca" data-testid="select-filter" name="epocas">
+      <option value="0">Seleccionar</option>
+      <option value="1990">1990</option>
+      <option value="2000">2000</option>
+      <option value="2010">2010</option>
+      <option value="2020">2020</option>
+    </select>
+
+      <label for="nombre"><span class="tituloSelectores"><b>Ordena por nombre</b></span></label>
+      <select id="nombre" data-testid="select-sort" name="name">
+        <option value="orden">Ordenar</option>
+        <option value="Asc">A - Z</option>
+        <option value="Desc">Z - A</option>
+      </select>
+
+      <button id="borrar" data-testid="button-clear">Limpiar Filtros</button>
+    </div>
+    <div id="datosestadisticos">
+     <button id="datosestadisticosDisney" class="botonDatos">¿Sabías qué?</button>
+     <div class="contenido-oculto">
+      <ul class="datosdisney">
+        <li id="duracion">El promedio de duración es:</li>
+        <li id="nota">El promedio de clasificación es:</li>
+      </ul> 
+      </div>
+    </div>
+    <div id="root"></div>
+
+
+  </main>
+  <footer>
+    <p><b>Creado por Camila Carreño y Daniela Martínez</b></p>
+    <b><p>Proyecto Dataverse para Laboratoria. <em>La información de esta página está proporcionado por Disney y Pixar, quienes tiene derechos exclusivos del contenido.</em></p></b>
+  </footer>
+  <script src="main.js" type="module"></script>
+</body>
+
+
+</html>
diff --git a/src/main.js b/src/main.js
@@ -1,6 +1,85 @@
-import { example } from './dataFunctions.js';
-import { renderItems } from './view.js';
+import { renderItems } from "./view.js";
 
-import data from './data/dataset.js';
+import data from "./data/dataset.js";
+
+import { filterData, sortData } from "./dataFunctions.js";
+import { computeStats, computeStatsNota } from "./dataFunctions.js";
+
+const elementos = document.getElementById("root");
+const listaDePeliculas = renderItems(data);
+elementos.appendChild(listaDePeliculas);
+
+const selectoresEpoca = document.querySelector("#epoca");
+const selectoresOrden = document.querySelector("#nombre");
+const botonborrar = document.getElementById("borrar");
+const botonData = document.getElementById("datosestadisticosDisney");
+
+
+selectoresEpoca.addEventListener("change", (event) => { 
+  const valor = event.target.value;
+  let dataFiltrada;
+  if (valor === "0") {
+    dataFiltrada = data;
+  } else {
+    dataFiltrada = filterData(data, "estreno", valor)
+  }
+
+  const valorOrden = document.getElementById("nombre").value;
+  if (valorOrden !== "orden") {
+    dataFiltrada = sortData(dataFiltrada, "name", valorOrden);
+  }
+
+
+  const listaFiltrada = renderItems(dataFiltrada);
+  elementos.innerHTML = "";
+  elementos.appendChild(listaFiltrada);
+
+});
+
+selectoresOrden.addEventListener("change", (e) => {
+  const value = e.target.value;
+  let dataOrdenada;
+  if (value === "orden") {
+    dataOrdenada = data;
+  }  else {
+    dataOrdenada = sortData(data, "name", value);
+  }
+
+  const valorFiltro = document.getElementById("epoca").value;
+  if (valorFiltro !== "0") {
+    dataOrdenada = filterData(dataOrdenada, "estreno", valorFiltro);
+  }
+
+  const listaOrdenada = renderItems(dataOrdenada);
+  elementos.innerHTML = "";
+  elementos.appendChild(listaOrdenada);
+});
+
+
+function borrarFiltrosYOrden() {
+  const listaOriginal = renderItems(data);
+  elementos.innerHTML = "";
+  elementos.appendChild(listaOriginal);
+  selectoresEpoca.selectedIndex=0;
+  selectoresOrden.selectedIndex=0;
+}
+
+function datosEstadisticos() {
+  const copyData = [...data];
+
+  const datoDuracion = document.querySelector("#duracion");
+  const datoNota = document.querySelector("#nota");
+
+  datoDuracion.innerHTML = "Las peliculas, en promedio, duran: " + computeStats(copyData) + " minutos.";
+  datoNota.innerHTML = "En promedio, la calificación es de: " + computeStatsNota(copyData) + " según IMDb.";
+}
+
+const contenido = document.querySelector('.contenido-oculto');
+botonData.addEventListener("click", ()=> {
+  datosEstadisticos();
+  contenido.style.display = 'block';
+});
+
+
+botonborrar.addEventListener("click", borrarFiltrosYOrden);
 
-console.log(example, renderItems(data), data);