PRUEBAS UNIT TEST "PEGAR ESE CODIGO"

package.json

@@ -17,7 +17,7 @@
     "test:oas-js": "jest --verbose tests-read-only/oa/oa-javascript.spec.js",
     "pretest:oas-web-api": "npm run pretest",
     "test:oas-web-api": "jest --verbose tests-read-only/oa/oa-web-api.spec.js",
-    "pretest:oas-prompting": "npm run pretest",
+    "pretest:oas-prompting_x": "npm run pretest",
     "test:oas-prompting": "jest --verbose tests-read-only/oa/oa-prompting.spec.js",
     "open-coverage-report": "opener ./coverage/lcov-report/index.html",
     "start": "serve src/",

src/data/dataset.js

@@ -1,8 +1,8 @@
 export default [
   {
-    "id": "ada-lovelace",
-    "name": "Ada Lovelace",
-    "shortDescription": "Pionera en la programación, primera programadora de la historia.",
+   "id": "ada-lovelace",
+   "name": "Ada Lovelace",
+   "shortDescription": "Pionera en la programación, primera programadora de la historia.",
     "description": "Una visionaria matemática británica del siglo XIX, es aclamada como la primera programadora de la historia. Su colaboración con Charles Babbage en la creación de la Máquina Analítica la llevó a desarrollar algoritmos, incluyendo el famoso \"algoritmo de Bernoulli\", destinados a ser procesados por una máquina. Su visión pionera la convirtió en una figura fundamental en la informática y la inteligencia artificial. Lovelace demostró que las computadoras podían ir más allá de simples cálculos matemáticos, anticipando un mundo donde la programación sería esencial en la resolución de problemas complejos, dejando una huella imborrable en la ciencia y la tecnología.",
     "imageUrl": "https://laboratoria-dataverse-talks.netlify.app/public/ada-lovelace.jpg",
     "facts": {

src/dataFunctions.js

@@ -1,9 +1,89 @@
-// Estas funciones son ejemplos, aquí puedes desarrollar tus propias funciones.
+// Ordenar el array de objetos 'data' por el nombre en orden alfabético (A-Z)
+export const ordenarNombresAZ = (data) => {
+  const dataOrdenada = data.slice().sort((a,b)=>{
+    const nombreA = a.name.toUpperCase();
+    const nombreB = b.name.toUpperCase();
 
-export const example = () => {
-  return 'example';
+    if (nombreA < nombreB) {
+      return -1;
+    }
+    if (nombreA > nombreB) {
+      return 1;
+    }
+    return 0;
+  });
+
+  return dataOrdenada;
+};
+
+// Ordenar el array de objetos 'data' por el nombre en orden alfabético (Z-A)
+export const ordenarNombresZA = (data) => {
+  const dataOrdenada = data.slice().sort((a, b)=>{
+    const nombreA = a.name.toUpperCase();
+    const nombreB = b.name.toUpperCase();
+
+    if (nombreA > nombreB) {
+      return -1;
+    }
+    if (nombreA < nombreB) {
+      return 1;
+    }
+    return 0;
+  });
+
+  return dataOrdenada;
+};
+
+// Filtra las películas por el género seleccionado
+export const generoMovies = (data,categoriaSeleccionada) => {
+  const genero = data.filter(movie=>movie.genero===categoriaSeleccionada)
+  return genero; 
+};
+
+
+//Aqui van las funciones de las stadisticas:
+
+// Calcular estadísticas de ingresos por género
+export const calcularEstadisticasIngresosPorGenero = (data) => {
+  return data.reduce((acumulador, pelicula) => {
+    const { genero, ingresos } = pelicula;
+
+    if (!acumulador[genero]) {
+      acumulador[genero] = {
+        cantidadPeliculas: 0,
+        totalIngresos: 0,
+        ingresoPromedio: 0,
+      };
+    }
+
+    acumulador[genero].cantidadPeliculas++;
+    acumulador[genero].totalIngresos += ingresos;
+    acumulador[genero].ingresoPromedio =
+      acumulador[genero].totalIngresos / acumulador[genero].cantidadPeliculas;
+
+    return acumulador;
+  }, {});
+};
+
+// Estadísticas por género 
+
+export const premiosGanadosTotal = (data) => {
+  const sumaTotalPremiosGanados = data.reduce(function(total, movie) {
+    if (movie.facts && typeof movie.facts.premioGanado === 'number') {
+      return total + movie.facts.premioGanado;
+    }
+    return total 
+  }, 0);
+
+
+  return sumaTotalPremiosGanados;
 };
 
-export const anotherExample = () => {
-  return [];
+export const promedioPremiosGanados = (data) => {
+  const sumaTotalPremiosGanados = premiosGanadosTotal(data);
+  const promedioPremios = data.length > 0 ? sumaTotalPremiosGanados / data.length : 0;
+
+
+  return promedioPremios;
 };
+

src/index.html

@@ -6,6 +6,62 @@
     <link rel="stylesheet" href="style.css" />
   </head>
   <body>
+    <center><header>
+
+      <h1></h1>
+    </header></center>
+
+    <div class="flex-container">
+      <label for="categorias"> </label>
+      <select data-testid="select-filter" id="categorias" name="genero">
+      <option value="">Seleccione Categoría</option> 
+      <option value="Accion">Acción</option>
+      <option value="Ciencia_Ficcion">Ciencia Ficción</option>
+      <option value="Drama">Drama</option>
+      <option value="Romance">Romance</option>
+      <option value="Animacion">Animación</option>
+      <option value="Fantasia">Fantasia</option>
+      <option value="Comedia">Comedia</option>
+      </select>
+      <label for="nombre"> </label>
+      <select data-testid="select-sort" id="nombre" name="orden">
+      <option value="Ordene">Ordene</option> 
+      <option value="asc">A-Z</option>
+      <option value="desc">Z-A</option>
+      </select>
+      <label for="premiosPorGenero" >Estadisticas de Premios: </label> 
+      <button id="premiosPorGenero">Ingresos por Genero</button>
+      <button id="premiosTotal">Total Premios Ganados</button>
+    </div>
+
+    <dialog class="statsPremios1" id="statsPremios1">
+      <h2>Ganancias por Género</h2>
+      <li id="generoTitulo"></li>
+      <li id="cantidadPeliculas"></li>
+      <li id="totalIngresos"></li>
+      <li id="ingresoPromedio"></li>
+      <button class="cerrarBoton1" id="cerrarBoton1">Cerrar Stadisticas</button>
+    </dialog>
+    <dialog class="statsPremios2" id="statsPremios2">
+      <h2 id="statspremios">Premios Ganados </h2>
+      <li id="totalSumaPremios"></li>
+      <li id="promedioSumaPremios"></li>
+      <button class="cerrarBoton2" id="cerrarBoton2">Cerrar Stadisticas</button>
+    </dialog>
+
+    <div class="centrarboton">
+      <button data-testid="button-clear" class="botonResetear">Resetear</button> 
+    </div>
+    <!--main es el contenedor de las imagenes--> 
+    <main id="root">
+      <ul></ul>
+    </main>
+
     <script src="main.js" type="module"></script>
+
+    <footer></footer>
+
   </body>
-</html>
+</html>
+
+

src/main.js

@@ -1,6 +1,167 @@
-import { example } from './dataFunctions.js';
+//import { example } from './dataFunctions.js';
 import { renderItems } from './view.js';
+import {ordenarNombresAZ, ordenarNombresZA, premiosGanadosTotal, promedioPremiosGanados} from './dataFunctions.js';
+import { generoMovies } from './dataFunctions.js';
+import { calcularEstadisticasIngresosPorGenero } from './dataFunctions.js';
+import data from './data/datamovies.js';
 
-import data from './data/dataset.js';
 
-console.log(example, renderItems(data), data);
+
+const showr = renderItems(data);
+const root = document.getElementById('root');
+root.innerHTML = showr;
+const selectSort = document.querySelector('[data-testid="select-sort"]');
+const selectFilter = document.querySelector('[data-testid="select-filter"]');
+//const estadisticaPremios = document.querySelector('[id="estadistica-premios"]');
+const totalGenero = document.querySelector('.statsPremios1');
+const abrirTotalPremios = document.querySelector('#premiosTotal');
+const boton2 = document.querySelector('.cerrarBoton2');
+const boton1 = document.querySelector('#premiosPorGenero');
+const button1 = document.querySelector('.cerrarBoton1');
+let datosOrdenados = [...data];
+
+// Función para actualizar la vista cuando se cambian los selectores
+const actualizarVista = () => {
+  // Inicialmente, usa los datos sin ordenar
+
+  // Verifica la opción seleccionada en el selector de orden
+
+  if (selectSort.value === 'asc') {
+    datosOrdenados = ordenarNombresAZ(datosOrdenados);
+  } else if (selectSort.value === 'desc') {
+    datosOrdenados = ordenarNombresZA(datosOrdenados);
+
+  }
+  // Llama a la función renderItems y actualiza el contenido del contenedor
+  const showo = renderItems(datosOrdenados);
+  root.innerHTML = showo;
+};
+
+const mostrarPorGenero = () => {
+  // Obtén el valor seleccionado del selector
+
+  const categoriaSeleccionada = selectFilter.value;
+  //console.log(categoriaSeleccionada);
+  // Llama a la función generoMovies para obtener las películas según el género
+  const peliculasFiltradas = generoMovies(data, categoriaSeleccionada);
+
+  if (selectSort.value === 'asc') {
+    datosOrdenados = ordenarNombresAZ(peliculasFiltradas);
+  } else if (selectSort.value === 'desc') {
+    datosOrdenados = ordenarNombresZA(peliculasFiltradas);
+  } else{
+    datosOrdenados = peliculasFiltradas;
+
+  }
+  const showp = renderItems(datosOrdenados);
+  root.innerHTML = showp;
+
+};
+
+
+// Agrega eventos de cambio a los selectores
+
+const reset = document.querySelector('[data-testid="button-clear"]');
+reset.addEventListener('click',function(){
+  selectFilter.selectedIndex = 0;
+  selectSort.selectedIndex = 0;
+  //estadisticaPremios.selectedIndex = 0;
+  datosOrdenados = data;
+  root.innerHTML =renderItems(data);
+});
+selectSort.addEventListener('change', actualizarVista);
+selectFilter.addEventListener('change', mostrarPorGenero);
+
+
+//Creando las estadisticas
+
+//estadistica 1
+
+const imprimirEstadisticasPorGenero = (estadisticas) => {
+  const dialog = document.getElementById('statsPremios1');
+  const generoTitulo = document.getElementById('generoTitulo');
+  const cantidadPeliculas = document.getElementById('cantidadPeliculas');
+  const totalIngresos = document.getElementById('totalIngresos');
+  const ingresoPromedio = document.getElementById('ingresoPromedio');
+
+  // Limpiar contenido previo
+  generoTitulo.innerHTML = '';
+  cantidadPeliculas.textContent = '';
+  totalIngresos.textContent = '';
+  ingresoPromedio.textContent = '';
+
+  for (const genero in estadisticas) {
+    // Crear elemento li para el nombre del género
+    const generoLi = document.createElement('li');
+    generoLi.textContent = `${genero}:`;
+
+    // Crear lista ul para cada género
+    const listaUl = document.createElement('ul');
+
+    // Crear elementos li para cada estadística
+    const cantidadLi = document.createElement('li');
+    cantidadLi.textContent = `Cantidad de películas: ${estadisticas[genero].cantidadPeliculas}`;
+
+    const ingresosLi = document.createElement('li');
+    ingresosLi.textContent = `Total de ingresos: $${estadisticas[genero].totalIngresos.toLocaleString()}`;
+
+    const ingresoPromedioLi = document.createElement('li');
+    ingresoPromedioLi.textContent = `Ingreso promedio: $${estadisticas[genero].ingresoPromedio.toLocaleString()}`;
+
+    // Adjuntar elementos li al contenedor ul
+    listaUl.appendChild(cantidadLi);
+    listaUl.appendChild(ingresosLi);
+    listaUl.appendChild(ingresoPromedioLi);
+
+    // Adjuntar lista ul al contenedor generoTitulo
+    generoLi.appendChild(listaUl);
+    generoTitulo.appendChild(generoLi);
+  }
+
+  // Abre el dialog
+  dialog.showModal();
+};
+
+
+boton1.addEventListener('click', ()=> {
+  const estadisticas = calcularEstadisticasIngresosPorGenero(data);
+  imprimirEstadisticasPorGenero(estadisticas);
+  totalGenero.showModal();
+})
+
+button1.addEventListener('click', ()=> {
+  totalGenero.close();
+})
+
+//estadistica 2
+
+const mostrarEstadisticasPremios = (totalPremios, promedioPremios) => {
+  const dialog2 = document.getElementById('statsPremios2');
+  const totalSuma = document.getElementById('totalSumaPremios');
+  const totalPromedio = document.getElementById('promedioSumaPremios');
+
+
+  totalSuma.textContent = "";
+  totalPromedio.textContent = "";
+  totalSuma.textContent = `Total de Premios Ganados: ${totalPremios.toLocaleString()}`;
+  totalPromedio.textContent = `Total de Premios Ganados: ${promedioPremios.toLocaleString()}`;
+
+  dialog2.showModal();
+}
+
+
+
+abrirTotalPremios.addEventListener('click', () => {
+
+  const premiosData = (data);
+  const totalPremios = premiosGanadosTotal(premiosData);
+  const promedioPremios = promedioPremiosGanados(premiosData);
+  mostrarEstadisticasPremios(totalPremios, promedioPremios);
+
+});
+
+
+boton2.addEventListener('click', () => {
+  const dialog2 = document.getElementById("statsPremios2");
+  dialog2.close();
+});