Laboratoria · AmbarVelez · Mar 3, 2020 · Mar 3, 2020 · Mar 4, 2020 · Mar 13, 2020
diff --git a/README.md b/README.md
diff --git a/Sin título.key b/Sin título.key
diff --git a/src/data lovers.code-workspace b/src/data lovers.code-workspace
@@ -0,0 +1,10 @@
+{
+	"folders": [
+		{
+			"path": "."
+		},
+		{
+			"path": "/Users/zayrajeronimo/Documents/Laboratoria/Proyecto2/CDMX009-Data-Lovers/img"
+		}
+	]
+}
diff --git a/src/data.js b/src/data.js
@@ -1,13 +1,26 @@
 // import data from './data/injuries/injuries.js';
 // import data from './data/lol/lol.js';
 // import data from './data/patient/patient.js';
-// import data from './data/pokemon/pokemon.js';
+import data from './data/pokemon/pokemon.js';
 // import data from './data/rickandmorty/rickandmorty.js';
 // import data from './data/steam/steam.js';
 // import data from './data/steam/worldbank.js';
 
 // esta es una función de ejemplo
 
-export const example = () => {
-  return 'example';
-};
+
+
+
+const filterData = (data, condition) => {
+  let arrType = [];
+  for (let i = 0; i < data.length; i++) {
+    for (let x = 0; x < data[i].type.length; x++) {
+      if (data[i].type[x] === condition) {
+        arrType.push(data[i]);
+      }
+    }
+  }
+  return arrType;
+ };
+
+ export {sortData, filterData}
diff --git a/src/img/backg-font.jpg b/src/img/backg-font.jpg
diff --git a/src/img/buscar-icon.png b/src/img/buscar-icon.png
diff --git a/src/img/go-logo copia.png b/src/img/go-logo copia.png
diff --git a/src/img/go-logo.png b/src/img/go-logo.png
diff --git a/src/img/pokeball.png b/src/img/pokeball.png
diff --git a/src/img/pokedex-logo.png b/src/img/pokedex-logo.png
diff --git a/src/img/pokedex.png b/src/img/pokedex.png
diff --git a/src/img/pokemon-go.png b/src/img/pokemon-go.png
diff --git a/src/img/prototipo.png b/src/img/prototipo.png
diff --git a/src/img/sketches.jpg b/src/img/sketches.jpg
diff --git a/src/img/usuarios.png b/src/img/usuarios.png
diff --git a/src/img/wireframe.png b/src/img/wireframe.png
diff --git a/src/index.html b/src/index.html
@@ -2,13 +2,111 @@
 <html lang="es">
   <head>
     <meta charset="UTF-8">
-    <title>Data Lovers</title>
+    <title>PokémonGO</title>
+    <link rel="icon" type="image/png"  sizes="128x128" href="img/pokeball.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <link rel="stylesheet" href="style.css" />
+    <link rel="stylesheet" href="style.css" >
+
+    <script type="module" src="main.js"></script>
+
+
   </head>
+
   <body>
-    <div id="root"></div>
-    <script type="module" src="main.js"></script>
+
+    <div class="container container-1" id="start-page">
+      <img src="img/pokemon-go.png" id="logo">
+      <img src="img/pokedex.png" id="pokedex">
+      <h3 id="welcome">¿Estas listo para convertirte en <br> un verdadero maestro Pokémon?</h3>
+      <input class="button-next" type="image" onclick="nextContainer('start-page','pokemon-page');" img src="img/go-logo.png" alt="Go" width="auto" height="50px">
+    </div>
+
+
+
+    <section>
+      <div class="container container-2" id="pokemon-page">
+
+        <div class="logo">
+          <img src="img/pokedex-logo.png">
+        </div>
+
+      <!--Segunda parte menu-->
+
+      <div class="container-bar" id="btn-menu">
+
+      <nav>
+        <ul>
+           <li><a href="">Región</a>
+              <ul>
+                 <li><a href="#" id= "kanto">Kanto</a></li>
+
+            <!--   <div class="shadow">
+                 <li><a>Johto</a></li>
+                 <li><a>Sinnoh</a></li>
+                 <li><a>Hoenn</a></li> 
+                 </div>-->
+               </ul>
+              </li>
+
+           <li><a href="" id="typePokemon">Tipo</a>
+
+                 <ul>
+                 <li><a href="#" id="All">Ver todos</a></li>
+                 <li><a href="#" id="Water">Agua</a></li>
+                 <li><a href="#" id="Bug">Bicho</a></li>
+                 <li><a href="#" id="Dragon">Dragón</a></li>
+                 <li><a href="#" id="Electric">Eléctrico</a></li>
+                 <li><a href="#" id="Ghost">Fantasma</a></li>
+                 <li><a href="#" id="Fire">Fuego</a></li>
+                 <li><a href="#" id="Ice">Hielo</a></li>
+                 <li><a href="#" id="Fighting">Lucha</a></li>
+                 <li><a href="#" id="Normal">Normal</a></li>
+                 <li><a href="#" id="Grass">Hierba</a></li>
+                 <li><a href="#" id="Psychic">Psíquico</a></li>
+                 <li><a href="#" id="Rock">Roca</a></li>
+                 <li><a href="#" id="Ground">Tierra</a></li>
+                 <li><a href="#" id="Poison">Veneno</a></li>
+                 <li><a href="#" id="Flying">Volador</a></li>
+               </ul>
+
+          </li>
+        </ul>
+
+      </nav>
+
+
+      <div class="logo-go">  
+
+             <input type="image" onclick="filterData"('typePokemon') img src="img/go-logo copia.png"  class="logo-go"></button>
+
+            </div>
+
+
+
+        <div class="search_bar">
+          <form action="#" id="search" method="post" class="formulario">
+          <a class="search-btn"></a>
+          <input class="search-txt" type="text" id="barra" placeholder="Búsqueda..." class="src" autocomplete="off"> 
+
+        </form>
+        </div>
+      </div>
+
+
+    </section>
+
+    <div class="pokemon-list"> 
+      <div class="main-container" id="pokemon-listing"></div> <!-- Contenedor de todos los pokemones-->
+    </div>
+  </div>
+
+
+
+   <!--  <script src="data.js"></script>-->
+  <!--   <script src="main.js"></script>-->
+
+
+
   </body>
-</html>
+</html> 
diff --git a/src/main.js b/src/main.js
@@ -1,4 +1,90 @@
-import { example } from './data.js';
+import data from './data/pokemon/pokemon.js';
 
-console.log(example);
+console.log(data);
 
+function nextContainer(idHideContainer, idNextContainer) { //Funcion para oculpar la primera pagina
+    document.getElementById(idNextContainer).style.display = 'block'; 
+    document.getElementById(idHideContainer).style.display = 'none';
+}
+
+window.nextContainer = nextContainer;
+
+//function ShowContainerPokemon(){
+
+//}
+
+function createPokemonItemHTML(pokemonObj) {
+    const name = pokemonObj.name, imgUrl = pokemonObj.img, id = pokemonObj.id; 
+    let HTML = `<div class="pokemon-item-container pokemon" id="pokemon-item-${id}"> 
+    <div class="pokemon-item-img">
+    <img src="${imgUrl}" alt=${name}"></div>
+    <div class="pokemon-item-name">     
+    <p class="pokemon-name" id="pokemon-${id}"> #${id} ${name}</p>
+    </div> 
+    </div>`; //plantilla de cadena de texto// 
+
+    return HTML;
+}
+
+function addPokemonHTMLToMainContainer(HTML) {
+    document.getElementById('pokemon-listing').innerHTML = HTML;
+}
+
+function showAllPokemon() {
+    let pokemonHTML = '';
+    data.pokemon.forEach((pokemonObj) => {
+        //console.log(pokemonObj);
+        //console.log(createPokemonItemHTML(pokemonObj));
+        pokemonHTML += createPokemonItemHTML(pokemonObj);
+    });
+
+    addPokemonHTMLToMainContainer(pokemonHTML); 
+}
+
+function initial() {
+//console.log(data.pokemon);
+showAllPokemon();
+}
+
+window.initial = initial;
+initial();
+
+
+//funcion lista tipo pokemon
+
+document.getElementById('typePokemon').addEventListener('change', (e) => {
+    const selectedIndex = e.currentTarget.selectedIndex;
+    if (selectedIndex === Ver) {
+      template(filterData(pokemon, 'All'));
+    } else if (selectedIndex === Agua) {
+        template(filterData(pokemon, 'Water'));
+    } else if (selectedIndex === Bicho) {
+      template(filterData(pokemon, 'Bug'));
+    } else if (selectedIndex === Dragón) {
+      template(filterData(pokemon, 'Dragon'));
+    } else if (selectedIndex === Eléctrico) {
+      template(filterData(pokemon, 'Electric'));
+    } else if (selectedIndex === Fantasma) {
+      template(filterData(pokemon, 'Ghost'));
+    } else if (selectedIndex === Fuego) {
+      template(filterData(pokemon, 'Fire'));
+    } else if (selectedIndex === Hielo) {
+      template(filterData(pokemon, 'Ice'));
+    } else if (selectedIndex === Lucha) {
+      template(filterData(pokemon, 'Fighting'));
+    } else if (selectedIndex === Normal) {
+      template(filterData(pokemon, 'Normal'));
+    } else if (selectedIndex === Hierva) {
+      template(filterData(pokemon, 'Grass'));
+    } else if (selectedIndex === Psíquico) {
+      template(filterData(pokemon, 'Psychic'));
+    } else if (selectedIndex === Roca) {
+      template(filterData(pokemon, 'Rock'));
+    } else if (selectedIndex === Tierra) {
+      template(filterData(pokemon, 'Ground'));
+    } else if (selectedIndex === Veneno) {
+      template(filterData(pokemon, 'Poison'));
+    } else if (selectedIndex === Volador) {
+      template(filterData(pokemon , 'Flying'));
+    }
+  });