Filtra los pokemones por tipo y realiza la busqueda por nombre

src/README.md

@@ -1,3 +1,38 @@
+**PROTOTIPOS DE BAJA FIDELIDAD**
+![Prototipo de Baja Fidelidad 1](../src/Imagenes%20del%20README/Baja_Fidelidad_1.png)
+![Prototipo de Baja Fidelidad 2](../src/Imagenes%20del%20README/Baja_Fidelidad_2.jpg)
+
+**PROTOTIPOS DE ALTA FIDELIDAD**
+
+![Prototipo de Alta Fidelidad 1](../src/Imagenes%20del%20README/Alta_Fidelidad_1.png)
+![Prototipo de Alta Fidelidad 2](../src/Imagenes%20del%20README/Alta_Fidelidad_2.png)
+
+**LINK A FIGMA** https://www.figma.com/file/3MKRsG310lKLm2AF6eCIG0/Bocetos%3A-Alta%2Fbaja-fidelidad-e-historias-de-usuario?type=whiteboard&node-id=0%3A1&t=IXbccqh1CHJI4C0o-1
+
+**HISTORIAS DE USUSARIO**
+
+[HISTORIA_1]
+
+Pensando en nuestro usuario, jugadora o jugador de Pokémon Go, quién necesite obtener información específica de los pokemones que va capturando, la busqueda sencilla lo ayuda a obtener esta información de manera rápida, con solo teclear el número o nombre del pokémon en cuestión.
+
+[HISTORIA_2]
+
+Buscar el elemento de cada pokemon es útil para saber y aprender las debilidades de los pokemones entre sí y así poder construir una mejor estrategia de juego o poder tomar mejores decisiones a la hora de que pokemon elegir para un combate en específico 
+
+[HISTORIA_3]
+
+Pensando en nuestro usuario, jugadora o jugador de Pokémon Go, al seleccionar una  tarjeta se  obtiene la descripción y el tipo de pokemon.
+
+[HISTORIA_4]
+
+Pensando en nuestro usuario, jugadora o jugador de Pokémon Go, que necesite realizar una búsqueda de algún pokémon, creemos que es  útil poder visualizar los pokémones ordenados  de la A a la Z.
+Y finalmente un botón que regrese las tarjetas de pokémones a su estado original para realizar una nueva búsqueda 
+
+**Definición del producto**
+Data Lovers es un buscador y base de datos de la serie animada Pokémon. Esta base de datos alberga informacion de 251 pokémones y datos especificos como nombre, tipo, número y una descripción de cada pokémon. El buscador esta pensado para que sea utilizado por usuarios del videojuego Pokemon Go; cuando necesiten buscar algún dato en especifico o detalles de un pokémon capturado y cuando requieran más información para mejorar su estrategia de juego, nuestra aplicación cuenta con un buscador de fácil acceso, sencillo y fácil de comprender. 
+
+
+
 **¿Quiénes son los principales usuarios de producto?**
 **¿¿Cuáles son los objetivos de estos usuarios en relación con el producto?**
 

src/data.js

@@ -1,57 +1,40 @@
-// estas funciones son de ejemplo
-
-export const example = () => {
-  return 'example';
-};
-
-export const anotherExample = () => {
-  return 'OMG';
-};
-import data from './data/pokemon/pokemon.js';
 
 //Funcion busqueda de nombre o numero
 
-function busquedaNomNum (){
-  const inputElement = document.getElementById("input");
-  const btnBuscar = document.getElementById("btn-buscar");
-
-  const recibeNomNum = inputElement.value;
-
-  if(recibeNomNum === "string")
+export function busquedaNomNum (data, nameOrNum){
+  return data.pokemon.find(pokemon => {
+    return pokemon.name.toLowerCase() === nameOrNum.toLowerCase() || pokemon.num === nameOrNum;
+  });
 
 }
 
-btnBuscar.addEventListener("click", )
-
-
-
-
-
-
+export function filtrarPorTipo (data, condition){
+  return data.pokemon.filter(pokemon => {
+    return condition (pokemon); 
+  });
+}
 
+export function sortData(data, sortBy, sortOrder) {
+  const sortedData = [...data.pokemon]; //Clonar el arreglo no modifica el original
 
-//Llama elementos del DOM
-/*const elementosSelect = document.getElementById("types");
-const btnBuscar = document.getElementById("btn-buscarType");
-const pokemonList = data.pokemon.pokemon
+  sortedData.sort((a, b) => {
+    const valueA = a[sortBy];
+    const valueB = b[sortBy];
 
-//Funcion de filtrado
-function filtrarPorTipo(pokemonType) {
-  return pokemonList.filter(pokemon => pokemon.type.includes(pokemonType));
+    if (sortOrder === 'asc') {
+      return valueA.localeCompare(valueB);
+    } if (sortOrder === 'desc') {
+      return valueB.localeCompare(valueA);
+    }
+
 
+  });
+
+  return sortedData;
 }
 
-//Agregar un evento al boton de busqueda 
 
-btnBuscar.addEventListener("click", () => {
-  const tipoSeleccionado = elementosSelect.value;
-  const pokemonesFiltrados = filtrarPorTipo(tipoSeleccionado);
-  actualizarTarjetas(pokemonesFiltrados)
 
-  function actualizarTarjetas (pokemones){
-    const rootElement = document.getElementById("root");
-    rootElement.innerHTML = "";
 
-  }
-})*/
+
 

src/index.html

@@ -2,29 +2,34 @@
 <html>
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="initial-scale=1.0, width=device-width">
     <title>Data Lovers</title>
     <link rel="stylesheet" href="style.css" />
   </head>
   <body>
     <header>
-      <h1>
+      <section>
         <img class="pokemon" src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/98/International_Pok%C3%A9mon_logo.svg/1200px-International_Pok%C3%A9mon_logo.svg.png" alt="pokemon">
-      </h1>
+      </section>
       <section class="pokebolas" >
         <img class="pokebola-1" src="https://66.media.tumblr.com/9697ebbc4887dc57620c50a12f24c61d/tumblr_nc1rokF7r31s1rd1xo1_500.gif" alt="pokebola">
         <img class="pokebola-2" src="https://66.media.tumblr.com/9697ebbc4887dc57620c50a12f24c61d/tumblr_nc1rokF7r31s1rd1xo1_500.gif" alt="pokebola">
       </section>
+      <h1>
+        You are in the right place to find information<br> and become the best Pokemón traineer
+      </h1>
+    </header>
       <nav>
-        <section>
-          <span class="buscador">Buscador</span>
-          <input type="text" id="input"> 
-          <button id="btn-buscar">Buscar</button>
+        <section class="nomNum">
+          <textarea name="input" id="input" cols="50" rows="0" placeholder="Name or Number"></textarea> 
+          <button id="btn-buscar">Search</button>
         </section>
-        <section>
-        <label for="elementos">Tipos</label>
+        <section class="elementos">
         <select name="type" id="types">
-          <option value="normal">Normal</option>
+        <optgroup label="Pokémon Types">
+          <option disabled selected hidden>Select Type</option>
           <option value="fire">Fire</option>
+          <option value="normal">Normal</option>
           <option value="water">Water</option>
           <option value="grass">Grass</option>
           <option value="electric">Electric</option>
@@ -40,17 +45,27 @@ <h1>
           <option value="dark">Dark</option>
           <option value="dragon">Dragon</option>
           <option value="steel">Steel</option>
-          <option value="fairy">Fairy</option>
+          <option value="fairy">fairy</option>
+          </optgroup>
         </select>
-        <button id="btn-buscarType">Buscar</button>
+        <button id="btn-buscarType">Search</button>
         </section>
-        <section>
-
+        <section class="btnOrdenarLimpiar">
+            <button id="btn-ordenar-asc">Order Alphabetically (A-Z)</button>
+            <button id="btn-ordenar-desc">Order Alphabetically (Z-A)</button>
+            <button id="btn-ordenar-numero">Clear</button>
         </section>
       </nav>
-    </header>
     <div id="root"></div>
-
+    <div id="modal">
+      <div class="modal-content">
+          <span class="close-modal">
+            &times;
+          </span>
+          <h2 id="modal-pokemon-name"></h2>
+          <p id="modal-pokemon-details"></p>
+      </div>
+    </div>
     <script src="pokemon.js" type="module"></script>
     <script src="main.js" type="module"></script>
   </body>

src/main.js

@@ -1,9 +1,11 @@
 
 import data from './data/pokemon/pokemon.js';
+import {busquedaNomNum, filtrarPorTipo, sortData} from './data.js';
+
+
 
 const rootElement = document.getElementById("root");
-function pokemonCards(){
-  const pokemonArray = data.pokemon;//data.pokemon accede a la matriz del objeto pokemon y se en la var pokemon Array
+function pokemonCards(pokemonArray){
   pokemonArray.forEach(pokemonInfo=>{
     //Crear elementos HTML para guardar la informacion de cada pokemon
     const pokemonCard = document.createElement('div'); //HTML
@@ -24,8 +26,120 @@ function pokemonCards(){
     pokemonNumber.textContent = `#${pokemonInfo.num}`;
     pokemonCard.appendChild(pokemonNumber);
 
+    pokemonCard.addEventListener('click', async () => { //asincrónica con await
+      const pokemonDetails = await busquedaNomNum(data, pokemonInfo.num);
+      cardDetalladas(pokemonDetails);
+    });
+
     rootElement.appendChild(pokemonCard);
-    console.log(pokemonCard);
+
   });
 }
-document.addEventListener('DOMContentLoaded', pokemonCards);
+
+document.addEventListener('DOMContentLoaded', () => {
+  pokemonCards(data.pokemon);
+});
+//FUNCION PARA EL DETALLE DE LAS CARTAS 
+function cardDetalladas(pokemonInfo) {
+  const modal = document.getElementById('modal');
+  const modalName = document.getElementById('modal-pokemon-name');
+  const modalDetails = document.getElementById('modal-pokemon-details');
+
+  modalName.textContent = pokemonInfo.name;
+  modalDetails.innerHTML = `<strong>Number:</strong> ${pokemonInfo.num}<br><strong>Type:</strong> ${pokemonInfo.type.join(',')}<br><strong>Description:</strong> ${pokemonInfo.about} 
+    `;
+
+
+  modal.style.display = 'block';
+
+  const closeModalButton = document.querySelector('.close-modal');
+  closeModalButton.addEventListener('click', () => {
+    modal.style.display = 'none';
+
+  }); 
+
+
+}
+
+
+document.addEventListener('DOMContentLoaded', () => {
+  pokemonCards(data.pokemon);
+}); 
+
+
+// BUSQUEDA POR NOMBRE O NUMERO 
+const inputElement = document.getElementById("input");
+const btnBuscar = document.getElementById("btn-buscar");
+
+btnBuscar.addEventListener("click", () => {
+  const recibeNomNum = inputElement.value;
+
+  const busquedaInfo = busquedaNomNum(data, recibeNomNum);
+  rootElement.innerHTML = "";
+  inputElement.value = "";
+
+  if (busquedaInfo) {
+    pokemonCards([busquedaInfo]);
+  }
+  if (!isNaN(recibeNomNum)){
+    const num = parseInt(recibeNomNum);
+    if(num < 1 || num > 251){
+      alert("Ingresa un número valido del 1 al 251");
+    } if (num.toString().length === 2 || num.toString().length === 1){
+      const formatoDeNum = num.toString().padStart(3, "00");
+      const busquedaInfo = busquedaNomNum(data, formatoDeNum);
+      if (busquedaInfo){
+        pokemonCards([busquedaInfo]);
+      }
+    }
+  }
+
+});
+
+inputElement.addEventListener("keydown", function(event){
+  if(event.key === "Enter"){
+    event.preventDefault();
+  }
+})
+
+
+
+//BUSQUEDA POR ELEMENTO
+const btnType = document.getElementById("btn-buscarType");
+const tipoDeSeleccion = document.getElementById("types");
+
+btnType.addEventListener("click", () => {
+  //const selectType = "";
+  const seleccion = tipoDeSeleccion.value;
+
+  const filtrarPokemon = filtrarPorTipo(data, (pokemon) => {
+    return pokemon.type.includes(seleccion);
+  });
+  rootElement.innerHTML = "";
+  pokemonCards(filtrarPokemon);
+});
+//ORDENAR ALFABETICAMENTE
+const btnOrdenarNombre = document.getElementById('btn-ordenar-asc');
+btnOrdenarNombre.addEventListener('click', () => {
+  const pokemonOrdenados = sortData(data, 'name', 'asc');
+  rootElement.innerHTML = '';
+  pokemonCards(pokemonOrdenados);
+});
+//ORDENAR ALFABETICAMENTE DESCENDENTEMENTE 
+const btnOrdenarNombre2 = document.getElementById('btn-ordenar-desc');
+btnOrdenarNombre2.addEventListener('click', () => {
+  const pokemonOrdenados = sortData(data, 'name', 'desc');
+  rootElement.innerHTML = '';
+  pokemonCards(pokemonOrdenados);
+});
+
+//ORDENAR ASCENDENTEMENTE POR NUMERO 
+const btnOrdenarNumero = document.getElementById('btn-ordenar-numero');
+btnOrdenarNumero.addEventListener('click', () => {
+  const pokemonesOrdenados = sortData(data, 'num', 'asc',);
+  rootElement.innerHTML = '';
+  pokemonCards(pokemonesOrdenados);
+});
+
+
+