Laboratoria · Adrianazambrano · Nov 17, 2022 · Nov 17, 2022 · Nov 17, 2022 · Nov 17, 2022
diff --git a/README.md b/README.md
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/data.js b/src/data.js
@@ -1,9 +1,25 @@
 // estas funciones son de ejemplo
+export const filtrarTipo = (todoslosPokemones,seleccionTipoPokemon ) => {
+  return todoslosPokemones.filter(pokemonTipo=>pokemonTipo.type[0] === seleccionTipoPokemon)  
+};
 
-export const example = () => {
-  return 'example';
+export const buquedaPorNombre = (todoslosPokemones, nombrePokemon) => {
+  console.log(nombrePokemon);
+  console.log(todoslosPokemones);
 };
 
-export const anotherExample = () => {
-  return 'OMG';
+export const ordenarData = (todoslosPokemones, key, orden) => { 
+
+  return todoslosPokemones.sort(function (a, b) {
+    var x = a[key],
+    y = b[key];
+
+    if (orden === 'asc') {
+        return ((x < y) ? -1 : ((x > y) ? 1 : 0));
+    }
+
+    if (orden === 'desc') {
+        return ((x > y) ? -1 : ((x < y) ? 1 : 0));
+    }
+});
 };
diff --git a/src/img/facebook.png b/src/img/facebook.png
diff --git a/src/img/instagram.png b/src/img/instagram.png
diff --git a/src/img/paginaPokemonesDesktop.jpeg b/src/img/paginaPokemonesDesktop.jpeg
diff --git a/src/img/paginaPokemonesMovil.jpeg b/src/img/paginaPokemonesMovil.jpeg
diff --git a/src/img/pokemongo.png b/src/img/pokemongo.png
diff --git a/src/img/prototipoDesktop.jpeg b/src/img/prototipoDesktop.jpeg
diff --git a/src/img/prototipoDesktopbyn.jpeg b/src/img/prototipoDesktopbyn.jpeg
diff --git a/src/img/prototipoMovil.jpeg b/src/img/prototipoMovil.jpeg
diff --git a/src/img/prototipoMovilbyn.jpeg b/src/img/prototipoMovilbyn.jpeg
diff --git a/src/img/youtube.png b/src/img/youtube.png
diff --git a/src/index.html b/src/index.html
@@ -2,11 +2,138 @@
 <html>
   <head>
     <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" user-scalable="no" maximum-scale="1.0" minimum-scale="1.0">
     <title>Data Lovers</title>
     <link rel="stylesheet" href="style.css" />
   </head>
+
   <body>
-    <div id="root"></div>
+      <section class="paginaPrincipal">
+    <div class="Botones"> 
+
+        <button type="button" id="btnPokemones" class = "btn"  >POKEMONES</button>
+        <button type="button" id="btnEstadistica" class = "btn" >ESTADISTICAS</button>
+
+         </div>
+
+    <footer>
+      <div class="redesSociales">
+        <img src="img/facebook.png" alt="" class="redes">
+        <img src="img/instagram.png" alt="" class="redes">
+        <img src="img/youtube.png" alt="" class="redes">
+
+      </div>
+    <div class="cajaAutores">
+      <p class="autores"> by: Adriana Zambrano - Erika Suesca 2022</p> 
+    </div>
+
+    </footer>
+  </section>
+
+    <!-- PAGINA DE POKEMONES-->
+      <section class="filtrosBusqueda">
+        <div  class="opcionesFiltros" >
+        <h3>Type</h3>
+        <select  id="tipoPokemones" placeholder="type">
+
+          <option value="bug">Bug</option>
+          <option value="dark" selected>Dark</option>
+          <option value="dragon">Dragon</option>
+          <option value="electric">Electric</option>
+          <option value="fighting">Fighting</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>
+
+      </div>
+      <div  class="opcionesFiltros">
+        <h3>Resistant</h3>
+        <select id="debilidadPokemon">                  
+          <option value="bug">Bug</option>
+          <option value="dark" selected>Dark</option>
+          <option value="dragon">Dragon</option>
+          <option value="electric">Electric</option>
+          <option value="fighting">Fighting</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>
+
+
+      </div>
+      <div  class="opcionesFiltros" >
+        <h3>Weaknesses</h3>
+        <select id="fortalezaPokemon">                  
+          <option value="bug">Bug</option>
+          <option value="dark" selected>Dark</option>
+          <option value="dragon">Dragon</option>
+          <option value="electric">Electric</option>
+          <option value="fighting">Fighting</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>
+
+
+      </div>
+      <button id="btn-filtrar"> Filtrar </button>
+      </section>
+
+      <section class="tiposInput">
+
+        <input type="text" placeholder="Buscar por nombre" id="inputBuscarNombre"> 
+        <select id =  "ordenPokemonAz">
+        <input type="button" value="ordenarAZ↓" id="buttonAZ">
+        <input type="button" value="ordenarZA↑" id="buttonZA"> 
+      </select>   
+      </section> 
+
+
+
+
+      <section id="seccionPokemones" >
+
+
+      </section>
+
+
+   <!-- PAGINA DE ESTADISTICAS-->      
+
+
+   <section class="paginaEstadistica">
+    <div class="estadisticas">
+
+    </div>
+  </section>
+
+
+
+
     <script src="main.js" type="module"></script>
   </body>
 </html>
diff --git a/src/main.js b/src/main.js
@@ -1,6 +1,130 @@
-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 pokemon from './data/pokemon/pokemon.js';
+import { filtrarTipo,  ordenarData, buquedaPorNombre} from './data.js';
 
-console.log(example, data);
+// Funciones para visualizar las secciones del html: 
+ document.getElementById("btnPokemones").addEventListener("click", () => {
+    document.querySelector('.paginaPrincipal').style.display= 'none';
+    document.querySelector('.paginaEstadistica').style.display= 'none';
+    document.querySelector('.paginaPokemones').style.display= 'block';
+    document.querySelector('.tiposInput').style.display= 'block';
+    document.querySelector('.filtrosBusqueda').style.display= 'block'; 
+});
+
+document.getElementById("btnEstadistica").addEventListener("click", () => {
+    document.querySelector('.paginaPrincipal').style.display= 'none';
+    document.querySelector('.paginaEstadistica').style.display= 'block';
+    document.querySelector('.paginaPokemones').style.display= 'none';
+    document.querySelector('.tiposInput').style.display= 'none';
+    document.querySelector('.filtrosBusqueda').style.display= 'none';
+});
+
+const todoslosPokemones = pokemon.pokemon;
+const inputBuscarNombre = document.getElementById('inputBuscarNombre');
+const botonFiltrar = document.getElementById('btn-filtrar');
+const ordenPokemonAz = document.getElementById('buttonAZ');
+const ordenPokemonZa = document.getElementById('buttonZA');
+
+const seccion = document.getElementById('seccionPokemones');
+seccion.setAttribute('class', 'paginaPokemones');
+
+const contenedorPadre = document.createElement('div');
+contenedorPadre.setAttribute('class', 'contenedorP');
+
+const contenedor = document.createElement('div');
+contenedor.setAttribute('class', 'contenedorTarjetas');
+
+const filtros = document.createElement('div');
+filtros.setAttribute('class', 'contenedorFiltros');
+
+contenedorPadre.appendChild(contenedor);
+contenedorPadre.appendChild(filtros);
+seccion.appendChild(contenedorPadre);
+
+// const tipoEmoticon= {
+
+//   grass:'😉',
+//   water:'💖',
+//   poison:'🦢',
+
+// };
+
+const mostrar = (pokemones) => {
+
+  pokemones.forEach((pokemon) => {
+    contenedor.innerHTML +=  
+        ` <div class="tarjetaPokemones" id="tarjetaPokemones" >
+             <h2 id="nombrePokemon" class="nombreP">${pokemon.name} </h2>
+             <h3 id="numeroPokemon" class="textoh3">${pokemon.num} </h3>
+              <div class="encabezadoTarjeta">                     
+                <img src="${pokemon.img}" alt="" id="imagenPokemon" class="imgPokemon">
+                <div class = 'contenedorh3'> <h3 id="tipoPokemon" class="textoh3">Type: ${pokemon.type} </h3>
+              <h3 id="generacionPokemon" class="textoh3"> Generation:${pokemon.generation.name} </h3>
+            </div>      
+            </div>
+            <div class="descripcionTarjeta">
+              <p id="heightPokemon" class="sizeP"> height: ${pokemon.size.height}</p>
+              <p id="weightPokemon" class="sizeP"> weight: ${pokemon.size.weight}</p>
+            </div>
+            <div class="botonesTarjeta">
+              <button id="btnStats" class="bntS"> Stats </button>
+              <button id="btnResistencia" class="btnR">Characteristics</button>
+            </div>
+            <div id="contenedorResydebi" class="cajaResydebi">
+
+                                 <ul class="contenedorListas"  >
+                                   <li class="listaResistencia ">
+                                    <h2 class='tituloLista'>Resistant<h2>
+                                     <div id="contenedorResistencia">
+                                        <p class='debiyresis'>${pokemon.resistant  } </p>
+
+
+                                       </div>
+                                   </li>
+
+                                    <li class="listaDebilidades" >
+                                    <h2  class='tituloLista'>Weaknesses</h2>
+                                    <div id="contenedorDebilidades">
+                                        <p class='debiyresis'>  ${pokemon.weaknesses}</p>
+                                      </div>
+                                    </li> 
+
+
+
+                                 </ul>
+
+
+                                    </div>
+          </div>  `
+    });
+} 
+
+
+mostrar(todoslosPokemones);
+
+botonFiltrar.addEventListener('click', () => {
+  document.getElementById("tipoPokemones").addEventListener("change", () => {
+    let seleccionTipoPokemon = document.getElementById('tipoPokemones').value;
+    if (seleccionTipoPokemon == "") {
+      mostrar(pokemon.pokemon);
+    }
+    else {
+      contenedor.innerHTML = '';
+      const dataTipoPokemon = filtrarTipo(todoslosPokemones, seleccionTipoPokemon);
+      mostrar(dataTipoPokemon);
+    }
+  });
+});
+
+ordenPokemonAz.addEventListener("click", () => {
+ contenedor.innerHTML = '';
+ mostrar(ordenarData(todoslosPokemones, 'name', 'asc'));
+});
+
+ordenPokemonZa.addEventListener("click", () => {
+  contenedor.innerHTML = '';
+  mostrar(ordenarData(todoslosPokemones, 'name', 'desc'));
+});
+
+inputBuscarNombre.addEventListener("input",() => {
+  buquedaPorNombre (todoslosPokemones,inputBuscarNombre.value );
+});