Laboratoria · MontserratPoblano · Apr 4, 2023 · Apr 4, 2023 · Apr 5, 2023 · Apr 5, 2023
diff --git a/.gitignore b/.gitignore
@@ -2,3 +2,5 @@
 *.swp
 coverage/
 node_modules/
+.hintrc
+package-lock.json
diff --git a/README.md b/README.md
diff --git a/src/data.js b/src/data.js
@@ -1,9 +1,206 @@
-// estas funciones son de ejemplo
+import {Objetos} from './data/pokemon/pokemon.js';
+
+export  function mostrarPokemon(data) {
+  const filterByType = data.length > 0 ? data: Objetos.pokemon
+  let pokemonAgregado=[];
+  const listaPokemon = document.getElementById('listaPokemon');
+
+
+  filterByType.forEach(pokemon => {
+    const div = document.createElement('div');
+    div.classList.add('pokemon');
+    div.innerHTML = `
+ <div class="pokemonImagen">
+ <img  src="./img/pokebola.png" id="${pokemon.type}" class="pokebola" alt="imagen pokebola" width="25px" height="25px">
+<img src="${pokemon.img}" alt="${pokemon.name}" class="pokemonImg">
+</div>
+<div class="pokemon-info">
+  <div class="nombre-contenedor">
+     <p class="pokemon-id">${pokemon.num}</p>
+     <h2 class="pokemon-nombre">${pokemon.name}</h2>
+</div>
+<div class="pokemon-tipos">
+   <p class="tipo">${pokemon.type}</p>
+</div>
+<button type="button" class="btn-modal" id="${pokemon.num}">Ver mas</button>
+</div>
+
+ `
+    listaPokemon.append(div);
+
+  });
+
+
+
+  const abrir=document.querySelectorAll(".btn-modal");
+  const modalC=document.querySelector("#contentModal");
+
+
+  abrir.forEach( (btn,index)=>btn.addEventListener("click", (e)=>{
+    e.preventDefault();
+
+
+    modalC.style.opacity="1";
+    modalC.style.visibility="visible";
+    const divDos = document.createElement("div");
+
+    divDos.classList.add(".modal");
+    const modalHtml=`
+
+   <div class="modal modal-close" >
+     <p class="close"><i class="fa-solid fa-circle-xmark"></i><p>
+
+     <div class="imagen-pokemon">
+      <div class="num-size">
+       <img src="${filterByType[index].img}">
+       <p class="numeroPokemon" >${filterByType[index].num}</p>
+       <p class="nombrePokemon">${filterByType[index].name}</p>
+       </div>
+       <div class="caja1">
+       <h3 class="numeroPokemon">Size</h3>
+       <p class="numeroPokemon">Height:${filterByType[index].size.height}</p>
+       <p class="numeroPokemon">Weight:${filterByType[index].size.weight}</p>
+       <h3>Pokemon-rarity</h3>
+       <p class="ataque">${filterByType[index]["pokemon-rarity"]}
+       </div>
+       </div>
+     <div class="baseDefensa">
+      <div>
+       <p class="about">${filterByType[index].about}</p>
+       </div>
+       <div class="contenedorResistencia">
+       <div class="resistencia">
+       <h3>Resistance</h3>
+        <p class="resistencia">${filterByType[index].resistant.join("/ ")}</p>
+        </div>
+        <div class="weakness">
+        <h3>Weaknesses</h3>
+          <p class="debilidad">${filterByType[index].weaknesses.join("/ ")}</p> 
+      </div>
+      </div>
+      <div class="contenedorStats">
+       <div class="stats">
+      <h3>Stats</h3>
+      <p class="ataque"><i class="fa-solid fa-check"></i>Base-attack:${filterByType[index].stats["base-attack"]}</p>
+      <p class="defensa"><i class="fa-solid fa-check"></i></i>Base-defense:</i>${filterByType[index].stats["base-defense"]}</p>
+      <p class="defensa"><i class="fa-solid fa-check"></i></i>Base-stamina:</i>${filterByType[index].stats["base-stamina"]}</p>
+      <p class="defensa"><i class="fa-solid fa-check"></i></i>Max-cp:</i>${filterByType[index].stats["max-cp"]}</p>
+      <p class="defensa"><i class="fa-solid fa-check"></i></i>Max-hp:</i>${filterByType[index].stats["max-hp"]}</p>
+      </div>
+      <div class="specialAtack">
+      <h3>Special special-attack</h3>
+      <ul>
+        <li><i class="fa-solid fa-check"></i>Name:${filterByType[index]["special-attack"][0].name}</li>
+        <li><i class="fa-solid fa-check"></i>Type:${filterByType[index]["special-attack"][0].type}</li>
+       <li><i class="fa-solid fa-check"></i>Base-Damage:${filterByType[index]["special-attack"][0]["base-damage"]}</li>
+        <li><i class="fa-solid fa-check"></i>Energy:${filterByType[index]["special-attack"][0].energy}</li>
+        <li><i class="fa-solid fa-check"></i>Move-duration:${filterByType[index]["special-attack"][0]["move-duration-seg"]}</li>
+        </ul>
+      </div>
+   </div>
+    <div class="evolution">
+   <h3>Nex Evolution</h3>
+   <p class="evolucion"> ${filterByType[index].evolution["next-evolution"]}</p>
+   <p class="evolucion">${filterByType[index].evolution}</p> 
+    </div>
+</div>
+
+
+   `
+
+    divDos.innerHTML = modalHtml
+    modalC.append(divDos);
+
+
+    const modal=document.querySelectorAll(".modal")[0];
+    const cerrarModal=document.querySelector(".close");
+    modal.classList.toggle("modal-close");
+
+    cerrarModal.addEventListener("click", ()=>{
+      divDos.innerHTML="";
+
+      modal.classList.toggle("modal-close");
+
+      modalC.style.opacity="0";
+      modalC.style.visibility="hidden";
+
+
+
+    });
+
+
+  }));
+}
+
+
+export function datosTarjeta(pokebo){
+  const pokebolaInfo={
+
+    imagen:pokebo.querySelector(".pokemonImg").src,
+    nombre: pokebo.querySelector("h2").textContent,
+    numero: pokebo.querySelector("p").textContent,
+    tipo: pokebo.querySelector(".tipo").textContent,
+    cantidad: 1
+
+  }
+  return pokebolaInfo
+}
+
+
+
+export function filtradoPorTipo(data,type) {
+  const datosFiltrados = data.filter(elemento => elemento.type.includes(type))
+  return datosFiltrados
+}
+
+
+
+
+export function ordenar(data){
+  const filterByType = data.length > 0 ? [...data] : [...Objetos.pokemon]
+
+  const result=filterByType.sort(function(a, b) {
+    if (a.name > b.name) {
+      return 1;
+    }
+    if (a.name < b.name) {
+      return -1;
+    }
+    return 0;
+  });
+
+  return result
+}
+
+
+
+
+
+export function ordenarZa(data){
+
+  const filterByType = data.length > 0 ? [...data]: [...Objetos.pokemon]
+
+  const result=filterByType.sort(function(a, b) {
+    if (a.name < b.name) {
+
+      return 1;
+    }
+    if (a.name > b.name) {
+      return -1;
+    }
+    return 0;
+  });
+
+  return result
+}
+
+
+
+export function busquedaName(){
+
+  const input=document.getElementById("busqueda");
+  const searchName=Objetos.pokemon.filter(pokemon=>pokemon.name.toLowerCase().match((input.value.toLowerCase())))
+  return searchName
+}
 
-export const example = () => {
-  return 'example';
-};
 
-export const anotherExample = () => {
-  return 'OMG';
-};
diff --git a/src/data/pokemon/pokemon.js b/src/data/pokemon/pokemon.js
@@ -1,4 +1,4 @@
-export default {
+export const Objetos = {
   "pokemon": [{
     "num": "001",
     "name": "bulbasaur",

diff --git a/src/img/187200-tipos-pokemon-maplerose.webp b/src/img/187200-tipos-pokemon-maplerose.webp
diff --git a/src/img/BIENVENIDO-A-MUNDO-POK-MON-22-4-2023 (3).png b/src/img/BIENVENIDO-A-MUNDO-POK-MON-22-4-2023 (3).png
diff --git a/src/img/Bienvenido.png b/src/img/Bienvenido.png
diff --git a/src/img/Captura de pantalla 2023-03-30 154456.png b/src/img/Captura de pantalla 2023-03-30 154456.png
diff --git a/src/img/HU1.png b/src/img/HU1.png
diff --git a/src/img/HU1SINERROR.png b/src/img/HU1SINERROR.png
diff --git a/src/img/HU2.png b/src/img/HU2.png
diff --git a/src/img/HU3.png b/src/img/HU3.png
diff --git a/src/img/HU4.png b/src/img/HU4.png
diff --git a/src/img/HU5.png b/src/img/HU5.png
diff --git a/src/img/Normal.png b/src/img/Normal.png
diff --git a/src/img/PrototipoBajafidelidad.jpeg b/src/img/PrototipoBajafidelidad.jpeg
diff --git a/src/img/Veneno.png b/src/img/Veneno.png
diff --git a/src/img/acero.jpg b/src/img/acero.jpg
diff --git a/src/img/agua.png b/src/img/agua.png
diff --git a/src/img/bicho.png b/src/img/bicho.png
diff --git a/src/img/curiosidades.jpg b/src/img/curiosidades.jpg
diff --git a/src/img/dragon.png b/src/img/dragon.png
diff --git a/src/img/el_mejor_equipo_primera_generacion_de_pokemon_1.jpg b/src/img/el_mejor_equipo_primera_generacion_de_pokemon_1.jpg
diff --git a/src/img/electricco.png b/src/img/electricco.png
diff --git a/src/img/entrenador-pokemon.png b/src/img/entrenador-pokemon.png
diff --git a/src/img/equipo-pokemon.jpeg b/src/img/equipo-pokemon.jpeg
diff --git a/src/img/equipo.png b/src/img/equipo.png
diff --git a/src/img/equipo1.png b/src/img/equipo1.png
diff --git a/src/img/equipo2.jpg b/src/img/equipo2.jpg
diff --git a/src/img/equipo3.jpg b/src/img/equipo3.jpg
diff --git a/src/img/fantasma.png b/src/img/fantasma.png
diff --git a/src/img/fuego.png b/src/img/fuego.png
diff --git a/src/img/grupo.jpg b/src/img/grupo.jpg
diff --git a/src/img/hada.png b/src/img/hada.png
diff --git a/src/img/hielo.png b/src/img/hielo.png
diff --git a/src/img/insignias.png b/src/img/insignias.png
diff --git a/src/img/lucha.png b/src/img/lucha.png
diff --git a/src/img/lupa.jfif b/src/img/lupa.jfif
diff --git a/src/img/new-animated-series-169.png b/src/img/new-animated-series-169.png
diff --git a/src/img/pikachu.png b/src/img/pikachu.png
diff --git a/src/img/planta.png b/src/img/planta.png
diff --git a/src/img/pokebola.png b/src/img/pokebola.png
diff --git a/src/img/pokemon-master-journeys-2.jpg b/src/img/pokemon-master-journeys-2.jpg
diff --git a/src/img/pokemon.jpg b/src/img/pokemon.jpg
diff --git a/src/img/pokemon.webp b/src/img/pokemon.webp
diff --git a/src/img/pokemonFuego.png b/src/img/pokemonFuego.png
diff --git a/src/img/pokemones.jpg b/src/img/pokemones.jpg
diff --git a/src/img/psiquico.png b/src/img/psiquico.png
diff --git a/src/img/roca.png b/src/img/roca.png
diff --git a/src/img/snorlax.png b/src/img/snorlax.png
diff --git a/src/img/tierra.png b/src/img/tierra.png
diff --git a/src/img/tipos-de-pokemon.png b/src/img/tipos-de-pokemon.png
diff --git a/src/img/titulo.png b/src/img/titulo.png
diff --git a/src/img/volar.png b/src/img/volar.png
diff --git a/src/index.html b/src/index.html
@@ -2,11 +2,147 @@
 <html>
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
     <title>Data Lovers</title>
-    <link rel="stylesheet" href="style.css" />
+    <link rel="stylesheet" href="style.css" >
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g==" crossorigin="anonymous" referrerpolicy="no-referrer" /> 
+    <link href="https://fonts.google.com/specimen/Limelight?query=limel" rel="stylesheet">
+    <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=Limelight&display=swap" rel="stylesheet">
   </head>
-  <body>
-    <div id="root"></div>
+  <body >
+
+    <header>
+      <nav class="navegacion">
+        <ul class="menu-nav">
+          <li class="primerItem">
+            <a href="tiposPoquemon.html">
+              <img src="./img/pikachu.png" alt="pikachu"  class="itemImagen" >
+              <span class="texto-item">Tipos de pokemon</span>
+              <span class="down-item"></span>
+            </a>
+          </li>
+          <li>
+            <a href="#">
+              <img src="./img/entrenador-pokemon.png" alt="jugador" class="itemImagen" >
+              <span class="texto-item">Otros jugadores</span >
+              <span class="down-item"></span >
+            </a>
+          </li>
+          <li>
+            <a href="#">
+              <img src="./img/insignias.png" alt="equipo" class="itemImagen">
+              <span class="texto-item">Tu equipo</span>
+              <span class="down-item"></span>
+            </a>
+          </li>
+          <li>
+            <a href="noticiasycuriosidades.html">
+              <img src="./img/snorlax.png" alt="curiosidades" class="itemImagen">
+              <span class="texto-item">Noticias y curiosidades</span>
+              <span class="down-item"></span>
+            </a>
+          </li>
+        </ul>
+      </nav>
+
+      <nav class="navegacion2">
+        <span class="menu">Menu</span>
+        <button class="nav-burger"><i class="fa-solid fa-bars"></i></button>
+        <ul class="menu-nav2">
+          <li class="lista-menu">
+            <a href="tiposPoquemon.html" class="link-menu">Tipos de pokemon</a>
+          </li>
+          <li class="lista-menu">
+            <a href="#" class="link-menu">Otros jugadores</a>
+          </li>
+          <li class="lista-menu">
+            <a href="#" class="link-menu">Tu equipo</a>
+          </li>
+          <li class="lista-menu">
+            <a href="noticiasycuriosidades.html" class="link-menu">Noticias y curiosidades</a>
+          </li>
+        </ul>
+      </nav>
+    </header>
+
+   <main>
+      <section id="Titulo">
+        <div class="titulo-principal">
+          <img src="./img/BIENVENIDO-A-MUNDO-POK-MON-22-4-2023 (3).png" alt="imagen-titulo" >
+        </div>
+
+      </section>
+      <section id="CarruselImagenes">
+     <div id="conteItemsCarrusel">
+       <div class="itemCarrusel" id="itemCarrusel-1">
+        <div class="tarjetaCarrusel" id="tarjetaCarrusel-1">
+         <img src="./img/tipos-de-pokemon.png" alt="tipos-pokemon">
+        <div class="texto-Foto">
+          <h3>Descubre tu pokemon favorito en nuestra sección tipos de pokemon</h3>
+         </div>
+        </div>
+        <div class="flechasCarrusel">
+          <a href="#itemCarrusel-4"><i class="fa-solid fa-chevron-left fa-3x" style="color:#0000CD;"></i></a>
+          <a href="#itemCarrusel-2"><i class="fa-solid fa-chevron-right fa-3x" style="color:#0000CD;"></i></a>
+
+        </div>
+      </div>
+
+
+        <div class="itemCarrusel" id="itemCarrusel-2">
+          <div class="tarjetaCarrusel" id="tarjetaCarrusel-2">
+           <img src="./img/pokemon-master-journeys-2.jpg" alt="equipo">
+           <div class="texto-Foto">
+            <h3>Intercambia pokemones y experiencias con otros maestros pokemon</h3>
+           </div>
+          </div>
+          <div class="flechasCarrusel">
+           <a href="#itemCarrusel-1"><i class="fa-solid fa-chevron-left fa-3x" style="color:#0000CD;"></i></a>
+           <a href="#itemCarrusel-3"><i class="fa-solid fa-chevron-right fa-3x" style="color:#0000CD;"></i></a>
+          </div>
+
+          <div class="itemCarrusel" id="itemCarrusel-3">
+            <div class="tarjetaCarrusel" id="tarjetaCarrusel-3">
+             <img src="./img/pokemon.jpg" alt="equipo">
+             <div class="texto-Foto">
+              <h3>Completa tu equipo y asegurate de estar listo para la batalla!</h3>
+             </div>
+            </div>
+            <div class="flechasCarrusel">
+             <a href="#itemCarrusel-3"><i class="fa-solid fa-chevron-left fa-3x" style="color:#0000CD;"></i></a>
+             <a href="#itemCarrusel-4"><i class="fa-solid fa-chevron-right fa-3x" style="color:#0000CD;"></i></a>
+            </div>
+          </div>
+
+          <div class="itemCarrusel" id="itemCarrusel-4">
+            <div class="tarjetaCarrusel" id="tarjetaCarrusel-4">
+             <img src="./img/curiosidades.jpg" alt="equipo">
+             <div class="texto-Foto">
+              <h3>Conoce todo sobre las nuevas generaciones</h3>
+             </div>
+            </div>
+            <div class="flechasCarrusel">
+             <a href="#itemCarrusel-3"><i class="fa-solid fa-chevron-left fa-3x" style="color:#0000CD;"></i></a>
+             <a href="#itemCarrusel-1"><i class="fa-solid fa-chevron-right fa-3x" style="color:#0000CD;"></i></a>
+            </div>
+          </div>
+     </div>
+     </div>
+      </section>
+
+    </main>
+
+    <footer>
+      Elaborado por: 
+      -Christian Montserrat - Valentina Paraguatey
+    </footer>
+
+  <div id="root">
+  </div>
     <script src="main.js" type="module"></script>
+    <script src="pokemon.js"></script>
+
   </body>
 </html>