Laboratoria · Maye85 · Jun 18, 2024 · Jun 18, 2024 · Jun 18, 2024 · Jun 20, 2024
diff --git a/README.md b/README.md
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/Bridgerton_título.jpg b/src/Bridgerton_título.jpg
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,74 @@
-// Estas funciones son ejemplos, aquí puedes desarrollar tus propias funciones.
+import { characters } from './data/dataset.js';
 
-export const example = () => {
-  return 'example';
-};
+export function filterCharactersByFamily(family) {
+  return characters.filter(character => character.facts.familia.toLowerCase() === family.toLowerCase());
+  //crea un nuevo array que contiene solo los personajes que cumplen con una 
+  //condición específica
+}
 
-export const anotherExample = () => {
-  return [];
-};
+export function sortCharactersByName(data, sortBy, sortOrder) {
+  // exportamos la función para ordenar personajes por nombre
+  //data:array de objeto(personajes),sortBy:campo del objeto,sortOrder: asc-des
+  const sortedCharacters = [...data];
+  //crea un nuevo array(copia)que contiene todos los elementos del array 
+  return sortedCharacters.sort((a, b) => {
+    //compara cada par de elementos y luego retorna el array ordenado. 
+    if (sortOrder === 'asc') {
+    //si es excatamente igual se ordena de forma ascendente
+      return a[sortBy].localeCompare(b[sortBy]);
+    //método de las cadenas de texto en JS que compara dos cadenas de texto
+    } else if (sortOrder === 'des') {
+    //ademas si ...
+      return b[sortBy].localeCompare(a[sortBy]);
+      //comparacion a la inversa (desendente)
+
+    }
+  });
+}
+
+
+export function filterAndSortCharacters(family, order) {
+  // Función combinada para filtrar y ordenar personajes
+  let filteredCharacters = family ? filterCharactersByFamily(family) : characters;
+  //expresión ternaria, forma abreviada de un if-else en una sola línea
+  if (order) {
+    //verifica si order tiene un valor que se considera verdadero
+    filteredCharacters = sortCharactersByName(filteredCharacters, 'name', order);
+  //si hay un valor en order, se ordenan los personajes filtrados 
+  }
+  return filteredCharacters;
+  //devuelve el arreglo final, después de aplicar cualquier filtro y ordenación
+}
+
+
+export function getCharacters() {
+  // Devuelve el estado actual del arreglo de personajes
+  return characters;
+}
+
+export function calcularEstadisticas(data) {
+
+  return data.reduce((estadisticas, character) => {
+    // Función para calcular estadísticas usando reduce
+    const sitSentimental = character.facts.sitSentimental.toLowerCase();
+    //accede a la propiedad sitSentimental de un objeto character 
+    //y almacena el resultado en la constante sitSentimental
+
+    if (sitSentimental.includes("casad")) {
+      estadisticas.casados++;
+    } else if (sitSentimental.includes("solter")) {
+      estadisticas.solteros++;
+    } else if (sitSentimental.includes("viud")) {
+      estadisticas.viudos++;
+    } else if (sitSentimental.includes("amante")) {
+      estadisticas.amantes++;
+    }
+    return estadisticas;
+  }, {
+    casados: 0,
+    solteros: 0,
+    viudos: 0,
+    amantes: 0
+    //contador con el que inicializan los contadores
+  });
+}
diff --git a/src/fondo_abejas.png b/src/fondo_abejas.png
diff --git a/src/fondo_canva.png b/src/fondo_canva.png
diff --git a/src/index.html b/src/index.html
@@ -1,11 +1,65 @@
 <!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
+<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>
-    <script src="main.js" type="module"></script>
-  </body>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <header>
+        <img src="lady_whistledown-sin fondo.png">
+        <h1>Los Bridgerton</h1>
+        <h2>¡Descubre sus más escandalosos secretos!</h2>
+    </header> 
+    <main>
+        <section>
+            <form id="filter-form">
+                <label for="family-filter" id="famFilter">Filtrar por:</label>
+                <select id="family-filter" data-testid="select-filter" name="familyFilter">
+                    <option value=""> </option>
+                    <option value="bridgerton">Bridgerton</option>
+                    <option value="featherington">Featherington</option>
+                    <option value="basset">Basset</option>
+                    <option value="danbury">Danbury</option>
+                    <option value="real">Realeza</option>
+                    <option value="No Tiene">No tiene</option>
+                    <option value="mondrich">Mondrich</option>
+                    <option value="crane">Crane</option>
+                    <option value="cowper">Cowper</option>
+                    <option value="granville">Granville</option>
+                </select>
+                <label for="alfabetico" id="alfabe">Ordenar por:</label>
+                  <select id="alfabetico" data-testid="select-sort" name="alfabetico">
+                    <option value=""> </option>
+                    <option value="asc">Ordenar A-Z</option>
+                    <option value="des">Ordenar Z-A</option>
+                  </select>   
+                <button type="button" data-testid="button-clear">Despejar</button>
+            </form>
+
+        </section>
+
+        <div class="flex-container">
+            <!--con root creamos el contenido dinamico del js-->
+            <section id="root">
+                <ul id="character-list" class="listaDeCarac">
+                        <!-- Aquí se insertarán los elementos renderizados -->
+                </ul>
+            </section>
+        </div>  
+        </main>
+        <!--exportacion e inportacion-->
+    <script type="module" src="./main.js"></script>
+
+    <section id="resultado-estadisticas-container">
+        <button id="calcularEstadisticas">Situacion Sentimental</button>
+        <div id="resultado-estadisticas"></div>
+    </section>
+
+</body>
+<footer>
+    <p class="piepagina">Dev 13</p>
+    <p class="piepagina">Lisette Piña - Mayerling Hernandez</p>       
+</footer>
 </html>
diff --git a/src/lady_whistledown-sin fondo.png b/src/lady_whistledown-sin fondo.png
diff --git a/src/main.js b/src/main.js
@@ -1,6 +1,74 @@
-import { example } from './dataFunctions.js';
+import {characters} from './data/dataset.js';
 import { renderItems } from './view.js';
+import { calcularEstadisticas, getCharacters, filterCharactersByFamily, sortCharactersByName } from './dataFunctions.js';
+//se agrega calcularEstadicticas en el import de dataFuntion
 
-import data from './data/dataset.js';
+function init() {
+  //se encarga de inicializar la aplicación,se configuran los manejadores de eventos y se realizan acciones iniciales
+  const familyFilter = document.querySelector('#family-filter');
+  const sortFilter = document.querySelector('#alfabetico');
+  const clearButton = document.querySelector('[data-testid="button-clear"]');
+  const botonCalcularEstadisticas = document.querySelector('#calcularEstadisticas');
+  const resultadoEstadisticas = document.querySelector('#resultado-estadisticas');
 
-console.log(example, renderItems(data), data);
+  resultadoEstadisticas.style.display = 'none';
+  // inicialmente oculta el contenedor de resultados estadisticos
+  renderItems(getCharacters());
+  // trae los personajes y el renderItems crea una lista para mostrar 
+
+  familyFilter.addEventListener('change', () => {
+    //(escucha el change)se espera el cambio de familia para comenzar la funcion 
+    const filteredCharacters = filterCharactersByFamily(familyFilter.value);
+    //se selecciona la familia 
+    renderItems(filteredCharacters);
+    //renderizamos filteredCharacters y generamos elementos HTML dinámicamente 
+  });
+
+  //ordemanos dentro del filtro
+  sortFilter.addEventListener('change', () => {
+    //(escucha el change)se espera el cambio para comenzar la funcion 
+    const filteredCharacters = filterCharactersByFamily(familyFilter.value);
+    //se selecciona la familia 
+    let datafilter;
+    //prepara la variable para almacenar un valor
+    if (familyFilter.value=== ""){
+      //si no se selecciona ninguna familia solo se ordena por nombre
+
+      datafilter = sortCharactersByName(characters, "name", sortFilter.value);
+    //ordenamos los datos para prepararlos para el uso del DOM
+    }
+    else{
+      datafilter = sortCharactersByName(filteredCharacters, "name", sortFilter.value);
+    } //ordena solo los personajes que ya han pasado por el filtro de familia.
+    renderItems(datafilter)
+    //toma la lista de personajes y actualiza la interfaz de usuario
+    //para ser mostrada en la interfaz de usuario
+  });
+
+  clearButton.addEventListener('click', () => {
+    // Restablecer el filtrado y ordenado
+    familyFilter.value = '';
+    sortFilter.value = '';
+
+    renderItems(getCharacters()); 
+    // Renderizar todos los personajes nuevamente sin aplicar filtros adicionales
+  });
+
+  botonCalcularEstadisticas.addEventListener('click', () => {
+    //creamos el metodo addEventListener y el manejador de evento click
+    const stats = calcularEstadisticas(getCharacters());
+    //traemos los personajes, para calcular la estadisticas y para luego guardarlos en stats
+    resultadoEstadisticas.innerHTML = `
+      <p>Casados: ${stats.casados}</p>
+      <p>Solteros: ${stats.solteros}</p>
+      <p>Viudos: ${stats.viudos}</p>
+      <p>Amantes: ${stats.amantes}</p>
+    `;
+    // Mostrar el contenedor de resultados
+    resultadoEstadisticas.style.display = 'flex'; 
+    // Mostrar el contenedor
+  });
+}
+
+document.addEventListener('DOMContentLoaded', init);
+//nos aseguramos que init inicie una vez cargue el HTML para eviar errores
diff --git a/src/prompt inicial.jpg b/src/prompt inicial.jpg
diff --git a/src/prompt pregunta 2.jpg b/src/prompt pregunta 2.jpg
diff --git a/src/prompt respuesta 1.jpg b/src/prompt respuesta 1.jpg
diff --git a/src/prompt respuesta 2.jpg b/src/prompt respuesta 2.jpg
diff --git a/src/prompt respuesta 3.jpg b/src/prompt respuesta 3.jpg
diff --git a/src/prompt respuesta 4.jpg b/src/prompt respuesta 4.jpg
diff --git a/src/prompt respuesta 5.jpg b/src/prompt respuesta 5.jpg
diff --git a/src/prompt respuesta 6.jpg b/src/prompt respuesta 6.jpg
diff --git a/src/prompt respuesta 7.jpg b/src/prompt respuesta 7.jpg
diff --git a/src/prototipo movil.png b/src/prototipo movil.png
diff --git a/src/prototipo pc.png b/src/prototipo pc.png