Laboratoria · Dynah1970 · Jun 13, 2024 · Jun 13, 2024 · Jun 13, 2024 · Jun 13, 2024
diff --git a/README.md b/README.md
diff --git a/captura base datos pokemon.png b/captura base datos pokemon.png
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,47 @@
-// Estas funciones son ejemplos, aquí puedes desarrollar tus propias funciones.
+// dataFunctions.js
+export function filterPokemonByElemental(data, elementalValue) {
+  if (elementalValue === 'Todo') return data;
+  return data.filter(pokemon => pokemon.type.includes(elementalValue));
+}
 
-export const example = () => {
-  return 'example';
-};
+export function filterPokemonByWeakness(data, weaknessValue) {
+  if (weaknessValue === 'Todo') return data;
+  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':
+      return data.sort((a, b) => a.number - b.number);
+    case 'Nombre':
+      return data.sort((a, b) => a.name.localeCompare(b.name));
+    case 'Generación':
+      return data.sort((a, b) => a.generation - b.generation);
+    case 'Ataque':
+      return data.sort((a, b) => b.attack - a.attack);
+    case 'Defensa':
+      return data.sort((a, b) => b.defense - a.defense);
+    case 'Velocidad':
+      return data.sort((a, b) => b.speed - a.speed);
+    default:
+      return data;
+  }
+}
+
+
+export function filterPokemonByWord(data, wordValue) {
+  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) {
+  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,136 @@
 <!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 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>
+
+<header class="titulo-con-logo">
+ <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSlN7Bom07sPG8XqsISovyOghFONslfqtoxXQ&usqp=CAU" alt="logo de pokemon">
+
+<main>
+
+ <div class="botones desplegables">
+ <label for="elemental"> ELEMENTOS:</label>
+ <select id="elemental" name="elementos" data-testid="select-elementos">
+ <option value="Todo">Todo</option>
+ <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">LETRA:</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>
+
+  </header>
+
+  <h1>Pokémon Cards</h1>
+
+</div>
+
+ <div id="root">
+ <ul
+ id="pokemon-list"
+ itemscope
+ itemtype="http://schema.org/ItemList"
+ ></ul>
+ </div>
+ </main>
+
+ <script src="main.js" type="module"></script>
+
+ <footer>
+ <p>Programa Pokemon Cards desarrollado por Daniela Trejo & Dinah Gomez</p>
+ </footer>
+ </body>
 </html>
diff --git a/src/main.js b/src/main.js
@@ -1,6 +1,93 @@
-import { example } from './dataFunctions.js';
-import { renderItems } from './view.js';
+import data from "./data/dataset.js";
+import { renderPokemonList } from "./view.js";
+import {
+  filterPokemonByElemental,
+  filterPokemonByWeakness,
+  filterPokemonByOrder,
+  filterPokemonByWord,
+  clearFiltersAndSort,
+} from "./dataFunctions.js";
 
-import data from './data/dataset.js';
+document.addEventListener("DOMContentLoaded", () => {
+  function initializeApp() {
+    renderPokemonList(data);
+  }
 
-console.log(example, renderItems(data), data);
+  // Evento de cambio en el filtro de elementos
+  function handleElementalChange() {
+    const elementalValue = document.getElementById("elemental").value;
+    const elementalPokemon = filterPokemonByElemental(data, elementalValue);
+    renderPokemonList(elementalPokemon);
+  }
+
+  // Evento de cambio en el filtro de debilidad
+  function handleWeaknessChange() {
+    const weaknessValue = document.getElementById("weakness").value;
+    const weaknessPokemon = filterPokemonByWeakness(data, weaknessValue);
+    renderPokemonList(weaknessPokemon);
+  }
+
+  // Evento de cambio en la selección de ordenamiento
+  function handleOrderChange() {
+    const orderValue = document.getElementById("order").value;
+    const orderPokemon = filterPokemonByOrder(data, orderValue);
+    renderPokemonList(orderPokemon);
+  }
+
+  // Evento de cambio en la selección de palabra
+  function handleWordChange() {
+    const wordValue = document.getElementById("word").value;
+    const wordPokemon = filterPokemonByWord(data, wordValue);
+    renderPokemonList(wordPokemon);
+  }
+
+  // Evento de clic en el botón de borrar
+  function handleClearClick() {
+    document.getElementById("elemental").value = "Todo";
+    document.getElementById("weakness").value = "Todo";
+    document.getElementById("order").value = "Numero";
+    document.getElementById("word").value = "";
+    const clearedData = clearFiltersAndSort(data);
+    renderPokemonList(clearedData);
+  }
+
+  // Asignar event listeners
+  document
+    .getElementById("elemental")
+    .addEventListener("change", handleElementalChange);
+  document
+    .getElementById("weakness")
+    .addEventListener("change", handleWeaknessChange);
+  document
+    .getElementById("order")
+    .addEventListener("change", handleOrderChange);
+  document.getElementById("word").addEventListener("change", handleWordChange);
+  document.getElementById("clear").addEventListener("click", handleClearClick);
+
+   // Asignar eventos de hover para mostrar datos curiosos
+   const pokemonListElement = document.getElementById("pokemon-list");
+   pokemonListElement.addEventListener("mouseover", function (event) {
+     if (event.target.tagName === "LI") {
+       const facts = event.target.querySelector(".facts");
+       if (facts) {
+         facts.style.display = "block";
+       }
+     }
+   });
+
+   pokemonListElement.addEventListener("mouseout", function (event) {
+     if (event.target.tagName === "LI") {
+       const facts = event.target.querySelector(".facts");
+       if (facts) {
+         facts.style.display = "none";
+       }
+     }
+   });
+
+
+
+
+
+  // Carga inicial de la aplicación
+  initializeApp();
+});