Laboratoria · RaizaCarolina17 · Jan 10, 2024 · Jan 10, 2024 · Jan 12, 2024 · Jan 12, 2024
diff --git a/src/data/dataset.js b/src/data/dataset.js
diff --git a/src/data/img/Chat Gpt.jpg b/src/data/img/Chat Gpt.jpg
diff --git a/src/data/img/Prompting Chat Gpt.jpg b/src/data/img/Prompting Chat Gpt.jpg
diff --git a/src/data/img/banner_escritoras.png b/src/data/img/banner_escritoras.png
diff --git a/src/dataFunctions.js b/src/dataFunctions.js
@@ -1,9 +1,85 @@
 // Estas funciones son ejemplos, aquí puedes desarrollar tus propias funciones.
 
-export const example = () => {
-  return 'example';
+//Función filtro
+
+export const filterData = (data, filterBy, value) => {
+  return data.filter((data) => {
+    //object es el parametro para la función filter.Si se elige un filterBy "seaOfOrigin", "originCrew" o "status" la función retorna los elementos que dentro del filterBy sean iguales que el valor seleccionado.
+    if (data.facts[filterBy]) {
+      return data.facts[filterBy] === value;
+    }
+    //si el elemento no coincide con el valor de value no se agrega al resultado del filtro.
+    return false;
+  });
+
 };
+// Funcion para ordenar ASC y DESC
+export const sortData = (data, sortConfig) => {
+  const { sortBy, sortOrder } = sortConfig;
+
+  const sortedData = data.slice().sort((a, b) => {
+    const valA = valorOrdenar(a, sortBy);
+    const valB = valorOrdenar(b, sortBy);
 
-export const anotherExample = () => {
-  return [];
+    if (sortOrder === "asc") {
+      return valA.localeCompare(valB);
+    } else if (sortOrder === "desc") {
+      return valB.localeCompare(valA);
+    } else {
+      return 0;
+    }
+  });
+
+  return sortedData;
 };
+
+// Funcion para ordenar asc y desc junto con los filtros de genero y paises
+const valorOrdenar = (item, sortBy) => {
+  switch (sortBy) {
+  case "mainField":
+    return item.facts[sortBy];
+  case "countryNacimiento":
+    return item.facts[sortBy];
+  default:
+
+    return String(item[sortBy]).toLowerCase();
+  }
+};
+
+//Estadísticas
+export const computeStats = (data) => {
+  const stats = {
+    countries: computeCountryStats(data),
+    genres: computeGenreStats(data),
+  };
+
+  return stats;
+};
+
+const computeCountryStats = (data) => {
+  return data.reduce((accumulator, writer) => {
+    const country = writer.facts.countryNacimiento;
+
+    if (!accumulator[country]) {
+      accumulator[country] = 1;
+    } else {
+      accumulator[country] += 1;
+    }
+
+    return accumulator;
+  }, {});
+};
+
+const computeGenreStats = (data) => {
+  return data.reduce((accumulator, writer) => {
+    const genre = writer.facts.mainField;
+
+    if (!accumulator[genre]) {
+      accumulator[genre] = 1;
+    } else {
+      accumulator[genre] += 1;
+    }
+
+    return accumulator;
+  }, {});
+};
diff --git a/src/index.html b/src/index.html
@@ -1,11 +1,78 @@
 <!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <title>Data Lovers</title>
-    <link rel="stylesheet" href="style.css" />
+<html lang="es">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Escritoras</title>
+  <link rel="stylesheet" href="style.css" />
+  <link href="https://fonts.googleapis.com/css2?family=Marcellus&family=Roboto:wght@300&display=swap" rel="stylesheet">
+
   </head>
-  <body>
-    <script src="main.js" type="module"></script>
-  </body>
+
+<body>
+  <header>
+    <a href=""><img class="home" src="./data/img/banner_escritoras.png" alt="banner" /></a>
+    <h1>EL MUNDO A TRAVÉS DE GRANDES ESCRITORAS</h1><br>
+  </header>
+
+    <div class="form-container">
+    <label for="type-select">Género literario: </label>
+    <select name="type" id="type-select" data-testid="filter-type">
+      <option value="">Elegir una opción</option>
+      <option value="Literatura">Literatura</option>
+      <option value="Poesía">Poesía</option>
+      <option value="Poesía, Novela">Poesía, Novela</option>
+    </select>
+
+    <label for="country-select">Nacionalidad: </label>
+    <select name="country" id="country-select" data-testid="filter-data">
+      <option value="">Elige una opción</option>
+      <option value="Reino Unido">Reino Unido</option>
+      <option value="Chile">Chile</option>
+      <option value="Nicaragua">Nicaragua</option>
+      <option value="Colombia">Colombia</option>
+      <option value="Nigeria">Nigeria</option>
+      <option value="Ghana">Ghana</option>
+      <option value="Canadá">Canadá</option>
+      <option value="México">México</option>
+      <option value="Puerto Rico">Puerto Rico</option>
+      <option value="EE. UU.">EE. UU.</option>
+    </select>
+
+    <label for="sort-select">Ordenar por: </label>
+    <select name="ordenar" id="sort-select" data-testid="select-sort">
+      <option value="none">Elige una opción</option>
+      <option value="asc">A-Z</option>
+      <option value="desc">Z-A</option>
+    </select> <br>
+
+    <button data-testid="button-facts" id="button-facts" class="button">ESTADÍSTICAS</button>
+
+    <dialog id="statsDialog">
+      <div class="modal-content" id="stats-content">
+        <span class="close-btn" onclick="closeStatsDialog()"></span>
+        <div id="stats-container"></div>
+        </div>
+    </dialog>
+
+    <button data-testid="button-clear" id="button-clear">LIMPIAR</button>
+    </div>
+
+   <div id="root">
+    <ul id="cardList"></ul>
+  </div>
+
+
+  <script src="view.js" type="module"></script>
+  <script src="main.js" type="module"></script>
+  <script src="dataFunctions.js" type="module"></script>
+
+  <footer>
+    El mundo a través de grandes escritoras<br>
+    Desarrolladoras: Raiza Gatica/Elizabeth Patiño J.<br>
+    Laboratoria<br>
+  </footer>
+</body>
+
 </html>
diff --git a/src/main.js b/src/main.js
@@ -1,6 +1,174 @@
-import { example } from './dataFunctions.js';
 import { renderItems } from './view.js';
-
+import { filterData, sortData, computeStats } from './dataFunctions.js';
 import data from './data/dataset.js';
 
-console.log(example, renderItems(data), data);
+const dataList = document.querySelector("#root");
+let result = data;
+dataList.appendChild(renderItems(data));
+
+//filterData
+//selecciona los elementos select
+const filterSelectors = [
+  { selector: '[data-testid="filter-type"]', property: "mainField" },
+  { selector: '[data-testid="filter-data"]', property: "countryNacimiento" },
+];
+
+const sortName = document.querySelector('[data-testid="select-sort"]');
+
+// Agregar EventListenerpara los select
+filterSelectors.forEach(({ selector }) => {
+  const selectElement = document.querySelector(selector);
+  selectElement.addEventListener("change", applyFilters);
+});
+
+// EventListener para el botón de limpiar
+const btnClear = document.getElementById("button-clear");
+btnClear.addEventListener("click", function () {
+  // Limpia los filtros y renderiza los datos originales
+  resetFilters();
+  renderItems(data);
+  clearStats();
+
+});
+
+// Función para restablecer los filtros
+function resetFilters() {// Recorre los selectores y establece sus valores en vacío
+  filterSelectors.forEach(({ selector }) => {
+    document.querySelector(selector).value = "";
+  });
+  sortName.value = "none";
+  result = sortData(data, "name", "asc");//agregado
+  renderDataList();
+
+}
+
+// Función para aplicar los filtros
+function applyFilters() {
+  // Obtén los valores seleccionados de los elementos select
+  const filters = filterSelectors.map(({ selector, property }) => ({
+    property,
+    value: document.querySelector(selector).value,
+  }));
+
+
+
+  // Realiza el filtrado de datos
+  let filteredData = [...data];
+  filters.forEach(({ property, value }) => {
+    if (value) {
+      filteredData = filterData(filteredData, property, value);
+    }
+  });
+
+  // Limpia la lista antes de renderizar
+  dataList.innerHTML = "";
+
+  // Renderiza los datos filtrados
+  dataList.appendChild(renderItems(filteredData));
+
+
+  // Realiza el ordenamiento de datos
+  //sortName = document.querySelector('[data-testid="select-sort"]');
+  const sortOrder = sortName.value;
+  result = sortData(filteredData, { sortBy: "name", sortOrder });
+
+  // Renderiza los datos filtrados y ordenados
+  renderDataList();
+}
+
+
+// Ordenamiento descendente y ascendente
+//sortName = document.querySelector('[data-testid="select-sort"]');
+sortName.addEventListener("change", (e) => {
+  const selectedValue = e.target.value;
+  // Realiza acciones con el valor seleccionado, por ejemplo, ordenar los datos
+  result = sortData(result, { sortBy: "name", sortOrder: selectedValue });
+
+  // Renderiza los datos filtrados y ordenados
+  renderDataList();
+});
+
+function renderDataList() { // Función para renderizar la lista con los datos actuales
+  dataList.innerHTML = "";
+  const resultList = renderItems(result);
+  dataList.appendChild(resultList);
+}
+
+//// Estadisticas///
+const buttonFacts = document.querySelector('[data-testid="button-facts"]');
+
+buttonFacts.addEventListener('click', (e) => {
+  const buttonInfo = e.target.dataset.info; // Obtener el valor del atributo data-info
+  // Acciones al hacer clic en el botón con el valor obtenido
+  const stats = computeStats(data, buttonInfo);
+  renderStats(stats);
+});
+
+// Función para renderizar las estadísticas en el contenedor
+function renderStats(stats) {
+  // Obtener la referencia al contenedor de estadísticas por su id
+  const statsContainer = document.getElementById('stats-container');
+  // Verificar si el contenedor de estadísticas existe
+  if (statsContainer) {
+    // Limpiar contenido anterior
+    statsContainer.innerHTML = '';
+    // Mostrar las estadísticas en el contenedor
+    statsContainer.appendChild(renderStatsElement(stats));
+  } 
+}
+
+// Función para renderizar las estadísticas como elementos HTML
+function renderStatsElement(stats) {
+  // Crear elementos HTML para mostrar las estadísticas (puedes personalizar según tus necesidades)
+  const statsElement = document.createElement('div');
+  statsElement.textContent = 'ESTADÍSTICAS';
+
+  // Agregar estadísticas de países
+  statsElement.appendChild(renderStatsCategory('📶 Cantidad de escritoras por nacionalidad', stats.countries));
+
+  // Agregar estadísticas de géneros
+  statsElement.appendChild(renderStatsCategory('📶 Cantidad de escritoras por género literario', stats.genres));
+
+  return statsElement;
+}
+
+// Función para renderizar estadísticas de una categoría específica
+function renderStatsCategory(categoryName, categoryStats) {
+  const categoryElement = document.createElement('div');
+  categoryElement.textContent = `${categoryName}:`;
+
+  // Iterar sobre las estadísticas y agregarlas al elemento
+  for (const item in categoryStats) {
+    const itemStats = categoryStats[item];
+    const itemElement = document.createElement('div');
+    itemElement.textContent = `${item}: ${itemStats}`;
+    categoryElement.appendChild(itemElement);
+  }
+
+  return categoryElement;
+}
+
+function clearStats() {
+  const statsContainer = document.getElementById('stats-container');
+  if (statsContainer) {
+    statsContainer.innerHTML = '';
+  }
+}
+
+//abrir pantalla emergente
+const statsDialog = document.getElementById('statsDialog');
+buttonFacts.addEventListener('click', () => {
+  statsDialog.showModal();
+});
+
+// Cierra el modal
+statsDialog.addEventListener('click', (event) => {
+  if (event.target === statsDialog) {
+    closeStatsDialog();
+  }
+});
+
+// Función para cerrar el modal de estadísticas
+function closeStatsDialog() {
+  statsDialog.close();
+}