LauraBeGa · LauraBeGa · Aug 9, 2023 · Aug 9, 2023 · Aug 9, 2023 · Aug 10, 2023
diff --git a/7-Objetivos-de-aprendizaje b/7-Objetivos-de-aprendizaje
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
@@ -19,9 +19,9 @@
     "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"
+    "serve": "^14.2.0"
   },
   "engines": {
     "node": ">=16.x"
@@ -31,4 +31,4 @@
     "version": "6.4.0",
     "commit": "4ea26447e1a259476f237a7a6212e3a02409910b"
   }
-}
+}
diff --git a/src/data.js b/src/data.js
@@ -1,9 +1,50 @@
-// estas funciones son de ejemplo
 
-export const example = () => {
-  return 'example';
-};
+function filterPokemonsByType(pokemons, type) {
+  return pokemons.filter(pokemon => pokemon.type.includes(type));
+} // funcion para el primer filtro por tipo de pokemon
 
-export const anotherExample = () => {
-  return 'OMG';
-};
+function filterPokemonsByName(pokemons, name) {
+  return pokemons.filter(pokemon => pokemon.name.toLowerCase().includes(name.toLowerCase()));
+}
+function generateQuickMoveNames(quickMoves) {
+  return quickMoves.map(move => move.name).join(', ');
+}// extraer el nombre del string del objeto del atributo quick moves
+
+function generateResistantList(resistantTypes) {
+  return resistantTypes.join(', ');
+} // extraer resistencia del objeto
+
+function generateWeaknessesList(weaknessesTypes) {
+  return weaknessesTypes.join(', ');
+} //extraer debilidad del objeto
+
+function sortPokemonsByNameAscending(pokemons) {
+  return pokemons.slice().sort((a, b) => a.name.localeCompare(b.name)); //ordena con short de A-Z
+} 
+
+function sortPokemonsByNameDescending(pokemons) { 
+  return pokemons.slice().sort((a, b) => a.name.localeCompare(b.name)).reverse(); // Ordena con short A-Z y con reverse lo cambia de Z-A
+} //return pokemons.reverse();
+
+function sortPokemonsByNumberAscending(pokemons) { //parseInt() función analiza una cadena y devuelve un entero
+  return pokemons.slice().sort((a, b) => parseInt(a.num) - parseInt(b.num));
+}
+
+function calculateAverageAttack(pokemons) {
+  const totalAttack = pokemons.reduce((sum, pokemon) => sum + parseInt(pokemon.stats["base-attack"]), 0);
+  return totalAttack / pokemons.length;
+}
+
+export {
+  filterPokemonsByName,
+  filterPokemonsByType,
+  generateQuickMoveNames,
+  generateResistantList,
+  generateWeaknessesList,
+  sortPokemonsByNameAscending,
+  sortPokemonsByNameDescending,
+  sortPokemonsByNumberAscending,
+  calculateAverageAttack,
+} 
+
+//poner export a cada funcion 
diff --git a/src/data/pokemon/Readme/Imagen3.1.jpg b/src/data/pokemon/Readme/Imagen3.1.jpg
diff --git a/src/data/pokemon/Readme/Imagen4.1.jpg b/src/data/pokemon/Readme/Imagen4.1.jpg
diff --git a/src/data/pokemon/Readme/Logo-Pokemon.png b/src/data/pokemon/Readme/Logo-Pokemon.png
diff --git a/src/data/pokemon/Readme/Trello.png b/src/data/pokemon/Readme/Trello.png
diff --git a/src/data/pokemon/Readme/inerfaz 3.2.png b/src/data/pokemon/Readme/inerfaz 3.2.png
diff --git a/src/data/pokemon/Readme/interfaz 2.png b/src/data/pokemon/Readme/interfaz 2.png
diff --git a/src/data/pokemon/Readme/interfaz 3,3.png b/src/data/pokemon/Readme/interfaz 3,3.png
diff --git a/src/data/pokemon/Readme/interfaz 3.3.png b/src/data/pokemon/Readme/interfaz 3.3.png
diff --git a/src/data/pokemon/Readme/interfaz 3.png b/src/data/pokemon/Readme/interfaz 3.png
diff --git a/src/data/pokemon/Readme/interfaz 5.png b/src/data/pokemon/Readme/interfaz 5.png
diff --git a/src/data/pokemon/Readme/interfaz.png b/src/data/pokemon/Readme/interfaz.png
diff --git a/src/data/pokemon/Readme/poke 1.1.jpg b/src/data/pokemon/Readme/poke 1.1.jpg
diff --git a/src/data/pokemon/Readme/poke 1.jpg b/src/data/pokemon/Readme/poke 1.jpg
diff --git a/src/data/pokemon/Readme/poke 2.jpg b/src/data/pokemon/Readme/poke 2.jpg
diff --git a/src/data/pokemon/Readme/poke 3.jpg b/src/data/pokemon/Readme/poke 3.jpg
diff --git a/src/data/pokemon/Readme/poke 4.1.jpg b/src/data/pokemon/Readme/poke 4.1.jpg
diff --git a/src/data/pokemon/Readme/poke 4.2.jpg b/src/data/pokemon/Readme/poke 4.2.jpg
diff --git a/src/data/pokemon/Readme/poke 4.3.jpg b/src/data/pokemon/Readme/poke 4.3.jpg
diff --git a/src/data/pokemon/Readme/poke 4.4.jpg b/src/data/pokemon/Readme/poke 4.4.jpg
diff --git a/src/data/pokemon/Readme/poke 4.jpg b/src/data/pokemon/Readme/poke 4.jpg
diff --git a/src/data/pokemon/Readme/poke 5.jpg b/src/data/pokemon/Readme/poke 5.jpg
diff --git a/src/data/pokemon/Readme/responci.jpg b/src/data/pokemon/Readme/responci.jpg
diff --git a/src/data/pokemon/Readme/test.png b/src/data/pokemon/Readme/test.png
diff --git a/src/data/pokemon/Readme/test1.png b/src/data/pokemon/Readme/test1.png
diff --git a/src/index.html b/src/index.html
@@ -1,12 +1,19 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <meta charset="utf-8">
-    <title>Data Lovers</title>
-    <link rel="stylesheet" href="style.css" />
-  </head>
-  <body>
-    <div id="root"></div>
-    <script src="main.js" type="module"></script>
-  </body>
+<head>
+  <meta charset="utf-8">
+  <title>Pokemon</title>
+  <link rel="stylesheet" href="style.css">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+</head>
+<body>
+  <img src="https://1000marcas.net/wp-content/uploads/2020/01/Logo-Pokemon.png" alt="Logo de Pokémon" id="pokemon1"/>
+  <div class="container">
+      <form class="form" action="pokemon.html">
+          <button id="boton" name="info" class="image-button"></button>
+      </form>
+      <img src="https://www.megaidea.net/wp-content/uploads/2021/08/Pokemon30.png" alt="Imagen de pokemones" id="imaPokemonInicio"/>
+  </div>
+  <div id="root"></div>
+</body>
 </html>
diff --git a/src/main.js b/src/main.js
@@ -1,6 +1,153 @@
-import { example } from './data.js';
-// import data from './data/lol/lol.js';
-import data from './data/pokemon/pokemon.js';
-// import data from './data/rickandmorty/rickandmorty.js';
+import {
+  filterPokemonsByName,
+  filterPokemonsByType,
+  generateQuickMoveNames,
+  generateResistantList,
+  generateWeaknessesList,
+  sortPokemonsByNameAscending,
+  sortPokemonsByNameDescending,
+  sortPokemonsByNumberAscending,
+  calculateAverageAttack,
+
+} from "./data.js";
+//import * (all) as F from data.js 
+import pokemonData from "./data/pokemon/pokemon.js";
 
-console.log(example, data);
+// Obtiene los datos de los pokémones
+const pokemons = pokemonData.pokemon;
+
+// Genera una tarjeta HTML para un Pokémon dado
+function generatePokemonCard(pokemon) {
+
+  const card = document.createElement("div");
+  card.classList.add("card");
+
+  // Genera listas de movimientos, resistencias y debilidades
+  const quickMoveNames = generateQuickMoveNames(pokemon["quick-move"]);
+  const resistantList = generateResistantList(pokemon.resistant);
+  const weaknessesList = generateWeaknessesList(pokemon.weaknesses);
+
+  // Llena la tarjeta con información del Pokémon
+  card.innerHTML = `  
+            <img src="${pokemon.img}" alt="${pokemon.name}"> 
+            <h3>#${pokemon.num}</h3>
+            <h2>${pokemon.name}</h2>  
+            <div class="additional-info"> 
+            <p1>About: ${pokemon.about}</p1> <br> <br><hr>
+            <p2>Rarity: ${pokemon["pokemon-rarity"]}</p2><br><br>
+            <p3>Type: ${pokemon.type.join(", ")}</p3><br><br>
+            <p4>${pokemon.generation.num}</p4><br><br>
+            <p5>Quick move: ${quickMoveNames}</p5><br><br>
+            <p6>Resistant: ${resistantList}</p6><br><br>
+            <p7>Weaknesses: ${weaknessesList}</p7><br><br>
+            <p8>Attack: ${pokemon.stats["base-attack"]}</p8><br><br>
+            <p8>Defense: ${pokemon.stats["base-defense"]}</p8>
+            </div>
+        `;
+
+  return card;
+}
+
+function showPokemons(selectedType, nameFilter, sortedPokemons, sortedPokemons2, sortedPokemonsByNumber) {
+  const pokemonContainer = document.getElementById("pokemon-container");
+  const averageAttackElement = document.getElementById("average-attack"); // Nuevo elemento para mostrar el promedio
+  pokemonContainer.innerHTML = ""; // Limpia el contenedor antes de agregar tarjetas
+
+  let filteredPokemons = [...pokemons]; // Crear una copia de pokemons para no modificar la lista original
+
+  if (nameFilter) {
+    // Filtrar por nombre si se escribe 
+    filteredPokemons = filterPokemonsByName(filteredPokemons, nameFilter);
+  }
+
+  if (selectedType !== "") { //si el filtro de tipo SI eligio un tipo
+    // Filtrar por tipo si se selecciona un tipo
+    filteredPokemons = filterPokemonsByType(filteredPokemons, selectedType);
+
+    // Calcular el promedio de ataque de los pokémones filtrados por tipo
+    const averageAttack = calculateAverageAttack(filteredPokemons);
+    //.textContent nos devuelve el contenido de texto de un elemento HTML. Es útil para obtener (o modificar) sólo el texto dentro de un elemento
+    averageAttackElement.textContent = `Average Attack: ${averageAttack.toFixed(2)}`; //toFiex(2) para solo 2 decimales al calcular el promedio
+  } else {
+    averageAttackElement.textContent = "Average Attack: "; 
+  }
+
+  if (sortedPokemons) {
+    // Ordenar por nombre ascendente si el botón de orden ascendente está activo
+    filteredPokemons = sortPokemonsByNameAscending(filteredPokemons);
+  }
+
+  if (sortedPokemons2) {
+    // Ordenar por nombre descendente si el botón de orden descendente está activo
+    filteredPokemons = sortPokemonsByNameDescending(filteredPokemons);
+  }
+
+  if (sortedPokemonsByNumber) {
+    // Ordenar por número ascendente si el botón de orden ascendente por número está activo
+    filteredPokemons = sortPokemonsByNumberAscending(filteredPokemons);
+  }
+
+  // Mostrar los pokémones filtrados y ordenados
+  for (const pokemon of filteredPokemons) {
+    const card = generatePokemonCard(pokemon);
+    pokemonContainer.appendChild(card);
+  }
+}
+
+const typeSelect = document.getElementById("type-select");
+const nameInput = document.getElementById("name-input");
+const ascendButton = document.getElementById("ascend-button");
+const descendButton = document.getElementById("descend-button");
+const ascendNumberButton = document.getElementById("ascend-number-button");
+
+
+// Agrega un evento para detectar cambios en la selección de tipos
+typeSelect.addEventListener("change", (event) => { //change se activa cuando el elemento finaliza un cambio
+  const selectedType = event.target.value;
+  const nameFilter = nameInput.value;
+  const sortedPokemons = sortPokemonsByNameAscending(pokemons);
+  const sortedPokemons2 = sortPokemonsByNameDescending(pokemons);
+  showPokemons(selectedType, nameFilter,sortedPokemons, sortedPokemons2);
+});
+
+// Agregar evento para detectar cambios en el campo de nombre
+nameInput.addEventListener("input", () => {
+  const selectedType = typeSelect.value;
+  const nameFilter = nameInput.value;
+  const sortedPokemons = ascendButton.classList.contains("active"); // Verificar si el botón de orden ascendente está activo
+  const sortedPokemons2 = descendButton.classList.contains("active"); // Verificar si el botón de orden descendente está activo
+  showPokemons(selectedType, nameFilter, sortedPokemons, sortedPokemons2);
+});
+
+// Agregar evento para el botón "Ascendente"
+ascendButton.addEventListener("click", () => {
+  const selectedType = typeSelect.value;
+  const nameFilter = nameInput.value;
+  const sortedPokemons = true; // Establecer orden ascendente
+  const sortedPokemons2 = false; // Establecer orden descendente a falso
+  showPokemons(selectedType, nameFilter, sortedPokemons, sortedPokemons2);
+
+});
+
+// Agregar evento para el botón "Descendente"
+descendButton.addEventListener("click", () => {
+  const selectedType = typeSelect.value;
+  const nameFilter = nameInput.value;
+  const sortedPokemons = false; // Establecer orden ascendente a falso
+  const sortedPokemons2 = true; // Establecer orden descendente
+  showPokemons(selectedType, nameFilter, sortedPokemons, sortedPokemons2);
+
+});
+// Agregar evento para el botón "Ascendente" por número
+ascendNumberButton.addEventListener("click", () => {
+  const selectedType = typeSelect.value; 
+  const nameFilter = nameInput.value; 
+  const sortedPokemons = false; // Establecer orden ascendente por nombre a falso
+  const sortedPokemons2 = false; // Establecer orden descendente por nombre a falso
+  const sortedPokemonsByNumber = true; // Establecer orden ascendente por número
+  showPokemons(selectedType, nameFilter, sortedPokemons, sortedPokemons2, sortedPokemonsByNumber);
+
+});
+
+// Mostrar todos los pokémones al cargar la página inicialmente
+showPokemons("", "", false, false); // Mostrar todos los pokémones al principio
diff --git a/src/pokemon.html b/src/pokemon.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Pokemon</title>
+    <link rel="stylesheet" href="style.css" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+  <body>
+    <img
+      src="https://1000marcas.net/wp-content/uploads/2020/01/Logo-Pokemon.png" alt="Logo de Pokémon" id="pokemon2"/>
+    <main>
+      <div class="filter-container">
+        <div class="input-container">
+          <div class="input-row">
+            <select id="type-select">
+              <option value="">All</option>
+              <option value="bug">Bug</option>
+              <option value="dark">Dark</option>
+              <option value="dragon">Dragon</option>
+              <option value="electric">Electric</option>
+              <option value="fairy">Fairy</option>
+              <option value="fighting">Fighting</option>
+              <option value="fire">Fire</option>
+              <option value="flying">Flying</option>
+              <option value="ghost">Ghost</option>
+              <option value="grass">Grass</option>
+              <option value="ground">Ground</option>
+              <option value="ice">Ice</option>
+              <option value="normal">Normal</option>
+              <option value="poison">Poison</option>
+              <option value="psychic">Psychic</option>
+              <option value="rock">Rock</option>
+              <option value="steel">Steel</option>
+              <option value="water">Water</option>
+            </select>
+            <p id="average-attack">Average Attack:</p>
+            <input
+              type="text"
+              id="name-input"
+              placeholder="Enter Pokemon name..."
+            />
+          </div>
+          <div class="button-container">
+            <button id="ascend-button">A - Z</button>
+            <button id="descend-button">Z - A</button>
+            <button id="ascend-number-button">1 - 251</button>
+          </div>
+        </div>
+      </div>
+      <div class="container">
+        <form class="form" action="index.html">
+          <button id="boton1" name="info" class="imagen-button2"></button>
+        </form>
+      </div>
+      <div id="pokemon-container" class="card-container"></div>
+      <script src="main.js" type="module"></script>
+    </main>
+  </body>
+</html>