Oh

package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "htmlhint": "htmlhint src/*.html test/*.html",
     "eslint": "eslint --ext .js src/ test/",
-    "pretest": "npm run eslint && npm run htmlhint",
+    "xpretest": "npm run eslint && npm run htmlhint",
     "test": "jest --verbose --coverage",
     "open-coverage-report": "opener ./coverage/lcov-report/index.html",
     "start": "serve src/",
@@ -19,7 +19,7 @@
     "eslint": "^8.3.0",
     "gh-pages": "^3.1.0",
     "htmlhint": "^1.0.0",
-    "jest": "^27.0.1",
+    "jest": "^27.5.1",
     "opener": "^1.5.1",
     "serve": "^13.0.2"
   },
@@ -31,4 +31,4 @@
     "version": "6.4.0",
     "commit": "4ea26447e1a259476f237a7a6212e3a02409910b"
   }
-}
+}

src/data.js

@@ -1,9 +1,86 @@
-// estas funciones son de ejemplo
+//filtrar, ordenar, calcular//
+// Importar el módulo pokedex que contiene los datos de los Pokémon
+import pokedex from "./data/pokemon/pokemon.js";
 
-export const example = () => {
-  return 'example';
-};
+// Objeto que contiene funciones para filtrar, ordenar y calcular información sobre los Pokémon
+// El código define un objeto llamado pokeData que contiene una función llamada filterByType
+//para filtrar Pokémon por tipo. Si el tipo es vacío, la función devuelve todos los Pokémon.
+//De lo contrario, filtra los Pokémon por el tipo especificado y devuelve los resultados.
+
+const pokeData = {
+  // Función para filtrar Pokémon por tipo
+  filterByType: function (type, pokedex) {
+    if (type === "") {
+      return pokedex.pokemon;
+      // Si el tipo es vacío, devolver todos los Pokémon
+    } else {
+      // Filtrar los Pokémon por el tipo especificado
+      return pokedex.pokemon.filter((pokemon) => pokemon.type.includes(type));
+    }
+  },
+
+  // Función para obtener los nombres de todos los Pokémon
+  //*La función getPokemonNames mapea los datos de los Pokémon y devuelve un array
+  // con los nombres de todos los Pokémon. Utiliza el método map para recorrer cada
+  // objeto de la lista pokedex.pokemon y obtener el valor de la propiedad name.
+  // Luego, retorna un nuevo array con los nombres obtenidos.*//
+
+  getPokemonNames: function () {
+    // Mapear los datos de los Pokémon y obtener sus nombres
+    return pokedex.pokemon.map((pokemon) => pokemon.name);
+  },
+
+  // Función para obtener la información de un Pokémon por su nombre
+  getPokemonInfoByName: function (name) {
+    const lowerCaseName = name.toLowerCase();
+    const pokemonInfo = pokedex.pokemon.find(
+      (pokemon) => pokemon.name === lowerCaseName
+    );
+    return pokemonInfo || null; // Si no se encuentra el Pokémon, devuelve null
+  },
+
+  // Función para filtrar Pokémon por nombre
+  //La función filterByPokemonName recibe un parámetro name y
+  //filtra los Pokémon en base a su nombre. Utiliza el método filter para iterar sobre la lista de Pokémon
+  //y devuelve aquellos cuyo nombre coincida exactamente con el valor del parámetro name,
+  //sin importar si las letras están en mayúsculas o minúsculas.
+
+  filterByPokemonName: function (name, pokemons) {
+    return pokemons.pokemon.filter(
+      (pokemon) => pokemon.name.toLowerCase() === name
+    );
+  },
+
+  // //función para ordenar pokemones
+  // sortAscending: function (pokemons) {
+  //   return pokemons.slice().sort();
+  // },
+  // Function to sort and render Pokémon based on the selected order
+
+  sortAscendingByNum: function (pokemonArray) {
+    const orderedList = pokemonArray.sort((a, b) => a.num - b.num);
+    return orderedList;
+  },
+
+  sortDescendingByNum: function (pokemonArray) {
+    const orderedList = pokemonArray.sort((a, b) => b.num - a.num);
+    return orderedList;
+  },
+
+  orderAndUpdateList: function (selectedOrder, data) {
+    let currentPokemon;
+    if (selectedOrder === "a-z") {
+      currentPokemon = data.sort((a, b) => a.name.localeCompare(b.name));
+    } else if (selectedOrder === "z-a") {
+      currentPokemon = data.sort((a, b) => b.name.localeCompare(a.name));
+    } else if (selectedOrder === "num1-251") {
+      currentPokemon = data = pokeData.sortAscendingByNum(data);
+    } else if (selectedOrder === "num251-1") {
+      currentPokemon = data = pokeData.sortDescendingByNum(data);
+    }
 
-export const anotherExample = () => {
-  return 'OMG';
+    return currentPokemon;
+  },
 };
+// Exportar el objeto pokeData para su uso en otros archivos
+export default pokeData;

src/index.html

@@ -1,11 +1,100 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <meta charset="utf-8">
-    <title>Data Lovers</title>
+    <meta charset="utf-8" />
+    <title>Data Lovers - Pokemon Go</title>
     <link rel="stylesheet" href="style.css" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Lato:wght@700&display=swap"
+      rel="stylesheet"
+    />
   </head>
+
   <body>
+    <header>
+      <img
+        src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/23/Pok%C3%A9mon_GO_logo.svg/2560px-Pok%C3%A9mon_GO_logo.svg.png"
+        alt="Pokemon GO logo"
+        id="logo"
+      />
+      <h1>Everything you need to know to become the best Pokemon Master!</h1>
+    </header>
+    <div class="container">
+      <nav class="menu">
+        <ul>
+          <li class="search">
+            <input
+              type="text"
+              placeholder="Write the pokemon name"
+              list="pokemonNames"
+            />
+            <datalist id="pokemonNames"></datalist>
+            <button>Search</button>
+            <div class="suggestions"></div>
+          </li>
+        </ul>
+        <select id="typeFilter">
+          <option value="">All Types</option>
+          <option value="grass">Grass</option>
+          <option value="fire">Fire</option>
+          <option value="normal">Normal</option>
+          <option value="water">Water</option>
+          <option value="flying">Flying</option>
+          <option value="fighting">Fighting</option>
+          <option value="electric">Electric</option>
+          <option value="ground">Ground</option>
+          <option value="psychic">Psychic</option>
+          <option value="ice">Ice</option>
+          <option value="bug">Bug</option>
+          <option value="ghost">Ghost</option>
+          <option value="steel">Steel</option>
+          <option value="dragon">Dragon</option>
+          <option value="dark">Dark</option>
+          <option value="fairy">Fairy</option>
+          <option value="poison">Poison</option>
+        </select>
+        <button id="filterButton">Filter</button>
+
+        <select id="order">
+          <option value="" disabled selected>Order by</option>
+          <option value="a-z">A-Z</option>
+          <option value="z-a">Z- A</option>
+          <option value="num1-251">Ascending Pokedex Num</option>
+          <option value="num251-1">Descending Pokedex Num</option>
+        </select>
+        <button id="orderButton">Order</button>
+        <button id="clearFilterButton">Clean Filter</button>
+      </nav>
+
+      <dialog id="dialog">
+        <form method="dialog">
+          <section id="pokemon-info">
+            <h2 id="pokeName"></h2>
+            <p id="pokeNumber"></p>
+            <img id="pokeImg" alt="Pokemon Image" />
+            <p id="pokeType"></p>
+          </section>
+          <section id="resistance-weakness">
+            <h2>Resistance & Weaknesses</h2>
+            <p id="resistant-Weak"></p>
+          </section>
+          <section id="attacks">
+            <h2>Attacks</h2>
+            <p id="move"></p>
+          </section>
+          <section id="evolutions">
+            <h2>Evolutions</h2>
+            <p id="evolution"></p>
+          </section>
+          <button id="dialogClose">Close</button>
+        </form>
+      </dialog>
+
+      <section id="pokemon-grid"></section>
+    </div>
+
     <div id="root"></div>
     <script src="main.js" type="module"></script>
   </body>