Laboratoria · Cris-hr · May 12, 2023 · May 15, 2023 · May 16, 2023 · May 16, 2023
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/data.js b/src/data.js
@@ -1,9 +1,22 @@
-// estas funciones son de ejemplo
 
-export const example = () => {
-  return 'example';
-};
+import data from "./data/pokemon/pokemon.js";
+
+//Función para ordenar el array de objetos de pokémon
+export function ordenarPokemones(order) {  
+  if (order === "asc") { // ascendente
+    return data.pokemon.sort((a, b) => a.name.localeCompare(b.name))
+  } else if (order === "desc") { // descendente
+    return data.pokemon.sort((a, b) => -1 * a.name.localeCompare(b.name))    
+  }
+}
+
+//Función para filtrar pokémon por tipo
+export function filterByType(pokemonData, type) {
+  return pokemonData.filter(pokemon => pokemon.type.includes(type));
+}
+
+//funcion para el buscador
+export function findByName(pokemonData, name){
+  return pokemonData.filter((pokemon) => pokemon.name.toLowerCase().includes(name.toLowerCase()))
+}
 
-export const anotherExample = () => {
-  return 'OMG';
-};
diff --git a/src/imagenes/image (7).png b/src/imagenes/image (7).png
diff --git a/src/imagenes/lupita.png b/src/imagenes/lupita.png
diff --git a/src/imagenes/lupita2.png b/src/imagenes/lupita2.png
diff --git a/src/imagenes/picachu.png b/src/imagenes/picachu.png
diff --git a/src/imagenes/pokebola-remove.png b/src/imagenes/pokebola-remove.png
diff --git a/src/imagenes/pokebolita.png b/src/imagenes/pokebolita.png
diff --git a/src/imagenes/pokedexx.png b/src/imagenes/pokedexx.png
diff --git a/src/imagenes/pokemon.png b/src/imagenes/pokemon.png
diff --git a/src/img/backgroundhomepage.JPG b/src/img/backgroundhomepage.JPG
diff --git a/src/img/backgroundresumepage.jpg b/src/img/backgroundresumepage.jpg
diff --git a/src/img/fondolista.png b/src/img/fondolista.png
diff --git a/src/img/homepage1.PNG b/src/img/homepage1.PNG
diff --git a/src/img/homepagelogo.PNG b/src/img/homepagelogo.PNG
diff --git a/src/img/homepagepokebola.PNG b/src/img/homepagepokebola.PNG
diff --git a/src/img/linkresumepage.jpg b/src/img/linkresumepage.jpg
diff --git a/src/img/pikachu-cursor.png b/src/img/pikachu-cursor.png
diff --git a/src/index.html b/src/index.html
@@ -2,11 +2,95 @@
 <html>
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1"/>
     <title>Data Lovers</title>
     <link rel="stylesheet" href="style.css" />
   </head>
   <body>
-    <div id="root"></div>
-    <script src="main.js" type="module"></script>
+    <div class="homePage" id="homePageStart">
+       <div class="logo-container">
+           <img src="./img/homepagelogo.PNG" alt="imagenLogoPok">
+       </div>
+       <div class="bottom-container">
+         <div class="contenedorImg"> 
+           <img src="./img/homepage1.PNG" alt="imagenPersonajesPok">
+         </div>
+         <div class="buttons" id="startButtons">
+           <button type="button" id="resumeBtn">
+             POKERESUMEN
+           </button>
+           <button type="button" id="pokedexBtn">
+             POKEDEX
+           </button>
+          </div>
+        </div>  
+    </div>
+
+    <div class="resumePage" id="resumePageStart" style="display: none;">
+      <div class="headerResumePage">
+        <img src="./imagenes/pokemon.png" alt="logoPokemon">
+        <button type="button" id="pokedexResumePageBtn">
+          POKEDEX
+        </button>
+      </div>
+      <div class="bottomResumePage">
+         <iframe class="video"
+         width="800" 
+         height="450"   
+         src="https://www.youtube.com/embed/ymFxepbBSvQ" 
+         title="YouTube video player" 
+         frameborder="0" 
+         allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen>
+         </iframe>
+         <img src="./imagenes/picachu.png" alt="imagenPikachu">
+      </div>
+    </div> 
+
+
+    <div class="pageListaPoke" id="listaPokemon" style="display: none;">
+      <div class="headerPokedex">
+        <div class="leftHeader">
+          <img src="./imagenes/pokedexx.png" alt="logoPokedex" class="loguitoPokedex">
+          <img src="./imagenes/pokebolita.png" alt="logoPokebolita" class="miniPokebola">
+        </div>
+        <div class="rightHeader">
+          <div class="search-bar">
+            <input type="text" id="busquedaPokemon" placeholder="Nombre del Pokemon" required autocomplete="off">
+            <input type="image" src="./imagenes/lupita2.png" class="imagenBuscar">
+          </div>
+           <div class="menu-ordenador" id="ordenador">
+             <select id="select-ordenar">
+               <option hidden selected>Ordenar por</option>
+               <option value="asc" class="ordenar">Ascendente</option>
+               <option value="desc" class="ordenar">Descendente</option>
+              </select>
+            </div>
+
+            <div class="filterSelect">
+              <select id="filterSelect">
+                <option hidden selected>Filtrar por</option>
+                <option value="water">Agua</option>
+                <option value="fire">Fuego</option>
+                <option value="bug">Insecto</option>
+                <option value="electric">Eléctricos</option>
+                <option value="grass">Césped</option>
+              </select>
+            </div>  
+            <button type="button" id="pokedexHomePageBtn">
+              INICIO
+            </button>
+          </div>
+      </div>
+
+      <div class="bottomPokedex">
+        <div class="data">
+          <p id="notFound" style="display: none;"></p>
+          <div class="adentro"></div>
+        </div>
+      </div>
+    </div>
   </body>
+
+  <script src="main.js" type="module"></script>
+
 </html>
diff --git a/src/main.js b/src/main.js
@@ -1,6 +1,161 @@
-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 {ordenarPokemones} from './data.js';
+import { filterByType} from './data.js';
+import { findByName } from './data.js';
 
-console.log(example, data);
+const contenidoCard = document.querySelector(".adentro");
+
+document.getElementById("pokedexBtn").onclick = function () {      //funcion del botón pokedex//
+  document.getElementById("homePageStart").style.display = "none";
+  document.getElementById("listaPokemon").style.display = "flex";
+};
+
+document.getElementById("resumeBtn").onclick = function () {      //funcion del botón pokeresumen//
+  document.getElementById("homePageStart").style.display = "none";
+  document.getElementById("resumePageStart").style.display = "block";
+};
+
+document.getElementById("pokedexResumePageBtn").onclick = function () {    //funcion del boton pokedex en la resumePage//
+  document.getElementById("resumePageStart").style.display = "none";
+  document.getElementById("listaPokemon").style.display = "flex";
+};
+
+
+document.getElementById("pokedexHomePageBtn").onclick = function () {    //funcion del boton Inicio en la pokedex//
+  document.getElementById("listaPokemon").style.display = "none";
+  document.getElementById("homePageStart").style.display = "flex";
+};
+
+
+data.pokemon.forEach((pokemones) => {   
+  contenidoCard.innerHTML += `
+    <button class= "mostrar">  
+      <div class= "card__inner">
+        <div class= "card__side card__side--front"> 
+          <div class="card-imag">
+            <img src="${pokemones.img}" class= "imagen" alt="">
+          </div>
+              <div class= "card-contenido">
+               <p class="numeroPokemon" >${pokemones.num}</p>
+               <h3>${pokemones.name}</h3>
+                <div class="poder">
+                 <p>type: ${pokemones.type}</p>
+                  <div class= "generacion">
+                    <p>${pokemones.generation.num} - ${pokemones.generation.name}</p>        
+                  </div>
+                </div>
+              </div>
+        </div>
+          <div class= "card__side card__side--back">
+             <div class= "card__body">            
+               <p class= "height">ALTURA: ${pokemones.size.height}</p>             
+               <p class= "weight">PESO: ${pokemones.size.weight}</p>
+                 <div class = "resistencia">
+                   <p>RESISTENCIA:</p>
+                   <p class= "parrafo">${pokemones.resistant[0]} , ${pokemones.resistant[1]}</p>
+                   <p class= "parrafo">${pokemones.resistant[2]}</p>
+                 </div>
+              </div>
+          </div>      
+      </div>
+    </button>`;
+})
+
+function displayFilteredData(filteredData) {
+  const contenidoCard = document.querySelector(".adentro");
+  contenidoCard.innerHTML = ""; // Limpiar contenido existente
+
+  filteredData.forEach(pokemones => {
+    contenidoCard.innerHTML += `
+    <button class= "mostrar">  
+    <div class= "card__inner">
+      <div class= "card__side card__side--front"> 
+        <div class="card-imag">
+          <img src="${pokemones.img}" class= "imagen" alt="">
+        </div>
+            <div class= "card-contenido">
+             <p class="numeroPokemon" >${pokemones.num}</p>
+             <h3>${pokemones.name}</h3>
+              <div class="poder">
+               <p>type: ${pokemones.type}</p>
+                <div class= "generacion">
+                  <p>${pokemones.generation.num} - ${pokemones.generation.name}</p>        
+                </div>
+              </div>
+            </div>
+      </div>
+        <div class= "card__side card__side--back">
+           <div class= "card__body">            
+             <p class= "height">ALTURA: ${pokemones.size.height}</p>             
+             <p class= "weight">PESO: ${pokemones.size.weight}</p>
+               <div class = "resistencia">
+                 <p>RESISTENCIA:</p>
+                 <p class= "parrafo">${pokemones.resistant[0]} , ${pokemones.resistant[1]}</p>
+                 <p class= "parrafo">${pokemones.resistant[2]}</p>
+               </div>
+            </div>
+        </div>      
+    </div>
+  </button>`;
+  });
+}
+
+// Obtener el elemento select del usuario
+const selectElement = document.getElementById("select-ordenar");
+
+// Escuchar el evento change del select
+selectElement.addEventListener("change", function() {
+  const selectedOption = selectElement.value;
+  const sortedData = ordenarPokemones(selectedOption);
+
+  displayFilteredData(sortedData)
+
+});
+
+//funcionalidad del filtrado
+document.getElementById("filterSelect").addEventListener("change", function () {
+  const filterValue = this.value;
+  let filteredData;
+
+  if (filterValue === "water") {
+
+    filteredData = filterByType(data.pokemon, "water");
+  } else if (filterValue === "fire") {
+
+    filteredData = filterByType(data.pokemon, "fire");
+  } else if (filterValue === "bug") {
+
+    filteredData = filterByType(data.pokemon, "bug"); 
+
+  }else if (filterValue === "electric") {
+
+    filteredData = filterByType(data.pokemon, "electric"); 
+
+  }else if (filterValue === "grass") {
+
+    filteredData = filterByType(data.pokemon, "grass"); 
+
+  }else {
+
+    filteredData = data.pokemon; // Mostrar todos los pokemon
+  }
+  // Lógica para mostrar los resultados filtrados en la interfaz
+  displayFilteredData(filteredData);
+});
+
+
+//funcionalidad del buscador
+document.getElementById("busquedaPokemon").addEventListener ("keyup", function () {
+  const foundName = this.value;
+  const foundPokemon = findByName(data.pokemon, foundName);
+  const errorContainer = document.getElementById("notFound");
+  //console.log(foundPokemon);
+  contenidoCard.style.display = "grid"
+  errorContainer.style.display = "none";
+  displayFilteredData (foundPokemon);
+  if(foundPokemon.length === 0){
+    errorContainer.style.display = "block";
+    errorContainer.textContent = "Pokémon no encontrado. Inténtalo de nuevo.";
+    contenidoCard.style.display = "none"
+  }
+})