Laboratoria · Daniitrejo · Jun 13, 2024 · Jun 13, 2024 · Jun 13, 2024 · Jun 13, 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
@@ -31,7 +31,7 @@
     "babel-jest": "^27.0.1",
     "css": "^3.0.0",
     "eslint": "^8.3.0",
-    "gh-pages": "^3.1.0",
+    "gh-pages": "^6.1.1",
     "htmlhint": "^1.0.0",
     "jest": "^27.0.1",
     "jsdom": "^22.1.0",
@@ -49,4 +49,4 @@
   "jest": {
     "testEnvironment": "jsdom"
   }
-}
+}
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,61 @@
-// Estas funciones son ejemplos, aquí puedes desarrollar tus propias funciones.
+// Filtra los Pokémon por el tipo elemental seleccionado
+export function filterPokemonByElemental(data, elementalValue) {
+  // Si el valor es "Todo", retorna todos los datos
+  if (elementalValue === 'Todo') return data;
+  // Filtra los Pokémon cuyo tipo incluye el valor elemental seleccionado
+  return data.filter(pokemon => pokemon.type.includes(elementalValue));
+}
 
-export const example = () => {
-  return 'example';
-};
+// Filtra los Pokémon por la debilidad seleccionada
+export function filterPokemonByWeakness(data, weaknessValue) {
+  // Si el valor es "Todo", retorna todos los datos
+  if (weaknessValue === 'Todo') return data;
+  // Filtra los Pokémon cuya debilidad incluye el valor seleccionado
+  return data.filter(pokemon => pokemon.weakness.includes(weaknessValue));
+}
+
+
+// Ordena los Pokémon por la característica seleccionada
+export function filterPokemonByOrder(data, order) {
+  switch (order) {
+  case 'Numero':
+    // Ordena por número
+    return data.sort((a, b) => a.number - b.number);
+  case 'Nombre':
+    // Ordena por nombre alfabéticamente
+    return data.sort((a, b) => a.name.localeCompare(b.name));
+  case 'Generación':
+    // Ordena por generación
+    return data.sort((a, b) => a.generation - b.generation);
+  case 'Ataque':
+    // Ordena por ataque en orden descendente
+    return data.sort((a, b) => b.attack - a.attack);
+  case 'Defensa':
+    // Ordena por defensa en orden descendente
+    return data.sort((a, b) => b.defense - a.defense);
+  case 'Velocidad':
+    // Ordena por velocidad en orden descendente
+    return data.sort((a, b) => b.speed - a.speed);
+  default:
+    // Si no coincide con ningún caso, retorna los datos sin cambios
+    return data;
+  }
+}
+
+// Filtra los Pokémon por la palabra o letra seleccionada
+export function filterPokemonByWord(data, wordValue) {
+  // Si el valor es 'z - a', ordena los Pokémon por nombre en orden descendente
+  if (wordValue === 'z - a') {
+    return data.slice().sort((a, b) => b.name.localeCompare(a.name));
+  }
+
+  // Filtra los Pokémon cuyo nombre comienza con la letra seleccionada
+  return data.filter(pokemon => pokemon.name.charAt(0).toLowerCase() === wordValue.toLowerCase());
+}
+
+// Limpia los filtros y ordena por número
+export function clearFiltersAndSort(data) {
+  // Ordena los Pokémon por número
+  return data.sort((a, b) => a.number - b.number);
+}
 
-export const anotherExample = () => {
-  return [];
-};
diff --git a/src/index.html b/src/index.html
@@ -1,11 +1,133 @@
 <!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>
+
+<html lang="es">
+
+<head>
+
+  <meta charset="UTF-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>PokemonGame</title>
+  <link rel="stylesheet" href="style.css" />
+
+</head>
+
+<body>
+
+  <script src="main.js" type="module"></script>
+  <header>
+    <h1></h1>
+    <img src="https://upload.wikimedia.org/wikipedia/commons/1/1a/Pok%C3%A9mon_Trading_Card_Game_logo.svg" alt="logo de pokemon">
+  </header>
+
+  <main>
+    <div class="botones desplegables">  <!-- lo estamos usando como un contenedor genérico, para agrupar elementos HTML. clases, botones y desplegables, se utilizan para aplicar estilos CSS específicos a este contenedor y a los elementos dentro de él. -->
+      <label for="elemental">ELEMENTOS:</label> <!-- etiqueta, está asociada con el elemento <select> que tiene el atributo id="elemental". El atributo for en la etiqueta <label> establece una conexión con el <select> correspondiente, -->
+      <select id="elemental" name="elementos" data-testid="select-elementos" > <!-- id Proporciona un identificador único para el menú desplegable. atributo es utilizado para propósitos de (testing), seleccionar este elemento específico en el DOM. -->
+        <option value="Todo">Todo</option>  <!-- etiqueta opción dentro del menú desplegable. Los atributos y contenidos son: v= El valor asociado a esta opción, que se envía al formulario si esta opción está seleccionada. todo texto usuario -->
+        <option value="Planta">Planta</option>
+        <option value="Agua">Agua</option>
+        <option value="Fuego">Fuego</option>
+        <option value="Veneno">Veneno</option>
+        <option value="Psiquico">Psiquico</option>
+        <option value="Volador">Volador</option>
+        <option value="Fantasma">Fantasma</option>
+        <option value="Electrico">Electrico</option>
+        <option value="Normal">Normal</option>
+        <option value="Hada">Hada</option>
+        <option value="Acero">Acero</option>
+        <option value="Lucha">Lucha</option>
+        <option value="Siniestro">Siniestro</option>
+        <option value="Dragon">Dragon</option>
+      </select>
+
+      <label for="weakness">DEBILIDAD:</label>
+      <select id="weakness" name="debilidad" data-testid="select-debilidad" >
+        <option value="Todo">Todo</option>
+        <option value="Planta">Planta</option>
+        <option value="Agua">Agua</option>
+        <option value="Fuego">Fuego</option>
+        <option value="Hielo">Hielo</option>
+        <option value="Tierra">Tierra</option>
+        <option value="Roca">Roca</option>
+        <option value="Bicho">Bicho</option>
+        <option value="Veneno">Veneno</option>
+        <option value="Psiquico">Psiquico</option>
+        <option value="Volador">Volador</option>
+        <option value="Fantasma">Fantasma</option>
+        <option value="Electrico">Electrico</option>
+        <option value="Hada">Hada</option>
+        <option value="Acero">Acero</option>
+        <option value="Lucha">Lucha</option>
+        <option value="Siniestro">Siniestro</option>
+        <option value="Dragon">Dragon</option>
+      </select>
+
+      <label for="order">CARACTERISTICA:</label>
+      <select id="order" name="ordenar" data-testid="select-ordenar" >
+        <option value="Numero">Numero</option>
+        <option value="Nombre">Nombre</option>
+        <option value="Generación">Generación</option>
+        <option value="Ataque">Ataque</option>
+        <option value="Defensa">Defensa</option>
+        <option value="Velocidad">Velocidad</option>
+      </select>
+
+      <label for="word">ALFABETICAMENTE:</label>
+      <select id="word" name="alfabeto" >
+        <option value="">Mostrar todo</option>
+        <option value="a">A</option>
+        <option value="b">B</option>
+        <option value="c">C</option>
+        <option value="d">D</option>
+        <option value="e">E</option>
+        <option value="f">F</option>
+        <option value="g">G</option>
+        <option value="h">H</option>
+        <option value="i">I</option>
+        <option value="j">J</option>
+        <option value="k">K</option>
+        <option value="l">L</option>
+        <option value="m">M</option>
+        <option value="n">N</option>
+        <option value="o">O</option>
+        <option value="p">P</option>
+        <option value="q">Q</option>
+        <option value="r">R</option>
+        <option value="s">S</option>
+        <option value="t">T</option>
+        <option value="u">U</option>
+        <option value="v">V</option>
+        <option value="w">W</option>
+        <option value="x">X</option>
+        <option value="y">Y</option>
+        <option value="z">Z</option>
+        <option value="z-a">Z - A</option>
+      </select>
+
+      <button id="clear" data-testid="button-borrar">LIMPIAR</button> <!-- botón "LIMPIAR", que tiene un identificador id=clear, para su manipulación y un atributo data-testid para propósitos de prueba. --> 
+    </div>
+
+    <!-- Contenedor para promedio de velocidad -->
+    <div id="average-speed" style="text-align: center; margin-top: 20px; font-size: 1.2em;"><!--  crea id contenedor de bloque único para seleccionar en otros archivos,--> 
+      <!-- Aquí se mostrará el promedio de velocidad -->
+    </div>
+
+    <div id="root"> <!-- renderizar contenido dinámico, como la lista de Pokémon. -->
+      <ul id="pokemon-list"  
+       itemscope
+       itemtype="http://schema.org/ItemList">
+        <!-- los elementos <li> están justificados en view --> 
+        <!-- este elemento y sus descendientes forman un scope (alcance) de datos estructurados.
+         Define el tipo de datos estructurados utilizando la especificación de Schema.org. En este caso, indica que el elemento es una lista de ítems.--> 
+      </ul>
+    </div> 
+
+  </main>
+
+  <footer>
+    <p>Programa Pokémon Cards desarrollado por Daniela Trejo &amp; Dinah Gomez, derechos reservados</p>
+  </footer>
   </body>
-</html>
+  </html>
+
diff --git a/src/main.js b/src/main.js
@@ -1,6 +1,145 @@
-import { example } from './dataFunctions.js';
-import { renderItems } from './view.js';
+import data from "./data/dataset.js";
+import { renderItems } from "./view.js";
+import {
+  filterPokemonByElemental,
+  filterPokemonByWeakness,
+  filterPokemonByOrder,
+  filterPokemonByWord,
+  clearFiltersAndSort,
+} from "./dataFunctions.js";
 
-import data from './data/dataset.js';
+//  función para calcular el promedio de velocidad nos costo trabajo
+function calculateAverageSpeed(pokemonList) {
+  // Calcula la suma total de las velocidades de todos los Pokémon en la lista
+  const totalSpeed = pokemonList 
+    .map(pokemon => pokemon.speed)  // Crea un nuevo array con las velocidades de cada Pokémon
+    .reduce((acc, speed) => acc + speed, 0); // Suma todas las velocidades en el array
+  return (totalSpeed / pokemonList.length).toFixed(2); // Calcula el promedio dividiendo la suma total por el número de Pokémon y lo redondea a dos decimales
+}
 
-console.log(example, renderItems(data), data);
+document.addEventListener("DOMContentLoaded", () => {
+  function initializeApp() {  // Función para inicializar la aplicación
+    renderItems(data); // Renderiza los elementos iniciales usando los datos
+
+    // Calcular y mostrar el promedio de velocidad
+    const averageSpeed = calculateAverageSpeed(data);
+    document.getElementById("average-speed").textContent = `Promedio de Velocidad: ${averageSpeed}`;
+
+  }
+
+  // Evento de cambio en el filtro de elementos
+  function handleElementalChange() { // Obtiene el valor seleccionado del filtro de elementos
+    const elementalValue = document.querySelector("#elemental").value;
+    // Filtra los Pokémon por el tipo de elemento seleccionado
+    const elementalPokemon = filterPokemonByElemental(data, elementalValue);
+    // Renderiza los Pokémon filtrados en la vista
+    renderItems(elementalPokemon);
+
+    // Actualizar promedio de velocidad
+    const averageSpeed = calculateAverageSpeed(elementalPokemon);
+    document.getElementById("average-speed").textContent =` Promedio de Velocidad: ${averageSpeed}`;
+  }
+
+  // Evento de cambio en el filtro de debilidad
+  function handleWeaknessChange() {
+    // Obtiene el valor seleccionado del filtro de debilidad
+    const weaknessValue = document.querySelector("#weakness").value;
+    // Filtra los Pokémon por la debilidad seleccionada
+    const weaknessPokemon = filterPokemonByWeakness(data, weaknessValue);
+    // Renderiza los Pokémon filtrados en la vista
+    renderItems(weaknessPokemon);
+
+    // Actualizar promedio de velocidad
+    const averageSpeed = calculateAverageSpeed(weaknessPokemon);
+    document.getElementById("average-speed").textContent =` Promedio de Velocidad: ${averageSpeed}`; // Actualiza el contenido del elemento con id "average-speed" para mostrar el promedio de velocidad calculado
+  }
+
+  // Evento de cambio en la selección de ordenamiento
+  function handleOrderChange() {
+    // Obtiene el valor seleccionado en el menú desplegable de ordenamiento
+    const orderValue = document.querySelector("#order").value;
+    // Filtra y ordena los Pokémon según el valor seleccionado
+    const orderPokemon = filterPokemonByOrder(data, orderValue);
+    // Renderiza los Pokémon ordenados en el DOM
+    renderItems(orderPokemon);
+
+    // Calcula el promedio de velocidad de los Pokémon ordenados
+    const averageSpeed = calculateAverageSpeed(orderPokemon);
+    // Actualiza el contenido del elemento con id "average-speed" para mostrar el nuevo promedio de velocidad
+    document.getElementById("average-speed").textContent =` Promedio de Velocidad: ${averageSpeed}`;
+  }
+
+  // Evento de cambio en la selección de palabra
+  function handleWordChange() {
+    // Obtiene el valor seleccionado en el menú desplegable de palabras
+    const wordValue = document.querySelector("#word").value;
+    // Filtra los Pokémon por la palabra seleccionada
+    const wordPokemon = filterPokemonByWord(data, wordValue);
+
+    renderItems(wordPokemon); // Renderiza los Pokémon filtrados en el DOM
+
+    // Calcula el promedio de velocidad de los Pokémon filtrados
+    const averageSpeed = calculateAverageSpeed(wordPokemon);
+    // Actualiza el contenido del elemento con id "average-speed" para mostrar el nuevo promedio de velocidad
+    document.getElementById("average-speed").textContent =` Promedio de Velocidad: ${averageSpeed}`;
+
+  }
+
+  // Evento de clic en el botón de borrar
+  function handleClearClick() {
+    // Restablece el valor del filtro de elementos a "Todo"
+    document.querySelector("#elemental").value = "Todo";
+    // Restablece el valor del filtro de debilidad a "Todo" 
+    document.querySelector("#weakness").value = "Todo";
+    document.querySelector("#order").value = "Numero";
+    document.querySelector("#word").value = "";
+    // Aplica el filtro y orden por defecto y obtiene los datos resultantes
+    const clearedData = clearFiltersAndSort(data);
+    // Renderiza los Pokémon con los datos filtrados y ordenados
+    renderItems(clearedData);
+
+    // Actualizar promedio de velocidad
+    const averageSpeed = calculateAverageSpeed(clearedData);
+    // Actualiza el contenido del elemento con el ID "average-speed" para mostrar el promedio de velocidad calculado
+    document.getElementById("average-speed").textContent =` Promedio de Velocidad: ${averageSpeed}`;
+  }
+
+  // Asignar event listeners
+  document // Asigna un event listener al filtro de elementos para manejar cambios
+    .querySelector("#elemental")// Selecciona el elemento del DOM con el id "elemental" (un menú desplegable)
+    .addEventListener("change", handleElementalChange);// Agrega un listener para el evento "change" (cuando el valor del menú desplegable cambia)
+  document
+    .querySelector("#weakness")
+    .addEventListener("change", handleWeaknessChange);
+  document
+    .querySelector("#order")
+    .addEventListener("change", handleOrderChange);
+  document.querySelector("#word").addEventListener("change", handleWordChange);
+  document.querySelector("#clear").addEventListener("click", handleClearClick);
+
+  // Asignar eventos de hover para mostrar datos curiosos
+  const pokemonListElement = document.querySelector("#pokemon-list"); 
+  // Selecciona el contenedor de la lista de Pokémon
+  pokemonListElement.addEventListener("mouseover", function (event) { // Agrega un listener para el evento "mouseover" (pasar el ratón sobre) en el elemento de la lista de Pokémon
+    if (event.target.tagName === "LI") {  // Busca un elemento hijo con la clase "facts" dentro del <li> sobre el que está el ratón
+      const facts = event.target.querySelector(".facts");
+      if (facts) {
+        // Si se encuentra un elemento con la clase "facts", cambia su estilo de display para mostrarlo
+        facts.style.display = "block";
+      }
+    }
+  });
+  pokemonListElement.addEventListener("mouseout", function (event) {// Agrega un listener para el evento "mouseover" (pasar el ratón fuera) en el elemento de la lista de Pokémon
+    if (event.target.tagName === "LI") {  // Busca un elemento hijo con la clase "facts" dentro del <li> sobre el que está el ratón
+      const facts = event.target.querySelector(".facts");
+      if (facts) {
+        // Si se encuentra un elemento con la clase "facts", cambia su estilo de display para mostrarlo
+        facts.style.display = "none";
+      }
+
+    }
+  });
+
+  // Carga inicial de la aplicación
+  initializeApp();
+});