Nuevo README, con investigación del ususario

package.json

@@ -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/README.md

@@ -0,0 +1,50 @@
+**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?**
+
+Personas aficionadas al anime, especificamente a la serie Pokemon. La aplicación esta pensada como una herramienta complementaria al juego Pokemon Go; una aplicación que pueda darte darte datos adicionales o extras para que puedas mejorar tu estrategia de juego al usar Pokemon Go. 
+
+**¿Cuáles son los datos más relevantes que quieren ver en la interfaz y por qué?**
+-[NOMBRE]
+-[NÚMERO DE POKEBOLA]
+-[TIPO]: Es relevante para que a la hora de que el usuario se encuentre a un pokemon en la calle que quiera capturar, poder usar usar en el combate un pokemon del tipo, acorde a la debilidad del pokemon a capturar. 
+-[DEBILIDAD]: Es relevante para que a la hora de que el usuario se encuentre a un pokemon en la calle que quiera capturar, poder usar usar en el combate un pokemon del tipo, acorde a la debilidad del pokemon a capturar. 
+-[RAREZA]
+
+**¿Cuándo utilizan o utilizarían el producto?**
+Cuando requieran de información extra, para crear su estrategia de juego en Pokemon Go y asi no tengan que hacer una busqueda general en un buscador convencional, en donde seria más tardado y complejo encontrar un dato en especifico; aqui tendrian datos especificos, contenidos en un solo lugar. 
+

src/data.js

@@ -1,9 +1,40 @@
-// estas funciones son de ejemplo
 
-export const example = () => {
-  return 'example';
-};
+//Funcion busqueda de nombre o numero
+
+export function busquedaNomNum (data, nameOrNum){
+  return data.pokemon.find(pokemon => {
+    return pokemon.name.toLowerCase() === nameOrNum.toLowerCase() || pokemon.num === nameOrNum;
+  });
+
+}
+
+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
+
+  sortedData.sort((a, b) => {
+    const valueA = a[sortBy];
+    const valueB = b[sortBy];
+
+    if (sortOrder === 'asc') {
+      return valueA.localeCompare(valueB);
+    } if (sortOrder === 'desc') {
+      return valueB.localeCompare(valueA);
+    }
+
+
+  });
+
+  return sortedData;
+}
+
+
+
+
+
 
-export const anotherExample = () => {
-  return 'OMG';
-};

src/data/pokemon/pokemon.js

@@ -1,4 +1,4 @@
-export default {
+export default{
   "pokemon": [{
     "num": "001",
     "name": "bulbasaur",

src/index.html

@@ -2,11 +2,71 @@
 <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>
+      <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">
+      </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 class="nomNum">
+          <textarea name="input" id="input" cols="50" rows="0" placeholder="Name or Number"></textarea> 
+          <button id="btn-buscar">Search</button>
+        </section>
+        <section class="elementos">
+        <select name="type" id="types">
+        <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>
+          <option value="ice">Ice</option>
+          <option value="fighting">Fighting</option>
+          <option value="poison">Poison</option>
+          <option value="ground">Ground</option>
+          <option value="flying">Flying</option>
+          <option value="psychic">Psychic</option>
+          <option value="bug">Bug</option>
+          <option value="rock">Rock</option>
+          <option value="ghost">Ghost</option>
+          <option value="dark">Dark</option>
+          <option value="dragon">Dragon</option>
+          <option value="steel">Steel</option>
+          <option value="fairy">fairy</option>
+          </optgroup>
+        </select>
+        <button id="btn-buscarType">Search</button>
+        </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>
     <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>
 </html>

src/main.js

@@ -1,6 +1,145 @@
-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 {busquedaNomNum, filtrarPorTipo, sortData} from './data.js';
+
+
+
+const rootElement = document.getElementById("root");
+function pokemonCards(pokemonArray){
+  pokemonArray.forEach(pokemonInfo=>{
+    //Crear elementos HTML para guardar la informacion de cada pokemon
+    const pokemonCard = document.createElement('div'); //HTML
+    pokemonCard.classList.add('pokemon-container'); //CSS
+
+    const pokemonImg = document.createElement('img'); //HTML
+    pokemonImg.classList.add('pokemon-img'); //CSS
+    pokemonImg.src = pokemonInfo.img;
+    pokemonCard.appendChild(pokemonImg);
+
+    const pokemonName = document.createElement('h3');//HTML
+    pokemonName.classList.add('pokemon-name'); //CSS
+    pokemonName.textContent = pokemonInfo.name;
+    pokemonCard.appendChild(pokemonName);
+
+    const pokemonNumber = document.createElement('p');
+    pokemonNumber.classList.add('pokemon-number');
+    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);
+
+  });
+}
+
+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);
+});
+
+
 
-console.log(example, data);