Laboratoria · paula-plaza · Apr 21, 2020 · Apr 25, 2020 · Apr 28, 2020 · Apr 28, 2020
diff --git a/README.md b/README.md
diff --git a/src/data.js b/src/data.js
@@ -1,9 +1,51 @@
-// estas funciones son de ejemplo
+import pokemon from './data/pokemon/pokemon.js';
 
-export const example = () => {
-  return 'example';
-};
+const pokemonDatos = pokemon.pokemon;
 
-export const anotherExample = () => {
-  return 'OMG';
-};
+export const imgOfPokemon = (newFilter, condition) => {
+  return pokemonDatos.filter((pokemon) => pokemon[newFilter].includes(condition)).map((pokemon) => pokemon.img);
+}
+
+export const nameOfPokemon = (newFilter, condition) => {
+  return pokemonDatos.filter((pokemon) => pokemon[newFilter].includes(condition)).map((pokemon) => pokemon.name);
+}
+
+export const numOfPokemon = (newFilter, condition) => {
+  return pokemonDatos.filter((pokemon) => pokemon[newFilter].includes(condition)).map((pokemon) => pokemon.num);
+}
+
+export const typeOfPokemon = (newFilter, condition) => {
+  return pokemonDatos.filter((pokemon) => pokemon[newFilter].includes(condition)).map((pokemon) => pokemon.type);
+}
+
+export const heightOfPokemon = (newFilter, condition) => {
+  return pokemonDatos.filter((pokemon) => pokemon[newFilter].includes(condition)).map((pokemon) => pokemon.height);
+}
+
+export const weightOfPokemon = (newFilter, condition) => {
+  return pokemonDatos.filter((pokemon) => pokemon[newFilter].includes(condition)).map((pokemon) => pokemon.weight);
+}
+
+export const candyOfPokemon = (newFilter, condition) => {
+  return pokemonDatos.filter((pokemon) => pokemon[newFilter].includes(condition)).map((pokemon) => pokemon.candy);
+}
+
+export const candyCountOfPokemon = (newFilter, condition) => {
+  return pokemonDatos.filter((pokemon) => pokemon[newFilter].includes(condition)).map((pokemon) => pokemon.candy_count).map((x) => x !== undefined ? x : "No aplica");
+}
+
+export const weaknessesOfPokemon = (newFilter, condition) => {
+  return pokemonDatos.filter((pokemon) => pokemon[newFilter].includes(condition)).map((pokemon) => pokemon.weaknesses);
+}
+
+export const nextEvolutionOfPokemon = (newFilter, condition) => {
+  return pokemonDatos.filter((pokemon) => pokemon[newFilter].includes(condition)).map((pokemon) => pokemon.next_evolution);
+}
+
+export const sortData = (data, sortBy, condition) => {
+  if (condition === "aToZ") {
+    return data.sort((a, b) => (a[sortBy] > b[sortBy]) ? 1 : -1);
+  } else {
+    return data.sort((a, b) => (a[sortBy] < b[sortBy]) ? 1 : -1);
+  }
+}
diff --git a/src/imagenes/Digrama_Flujo.png b/src/imagenes/Digrama_Flujo.png
diff --git a/src/imagenes/Filtrado por debilidad.PNG b/src/imagenes/Filtrado por debilidad.PNG
diff --git a/src/imagenes/Filtrando por tipo.PNG b/src/imagenes/Filtrando por tipo.PNG
diff --git a/src/imagenes/Logo Pokedata[14903].png b/src/imagenes/Logo Pokedata[14903].png
diff --git a/src/imagenes/Primera pantalla logo.PNG b/src/imagenes/Primera pantalla logo.PNG
diff --git a/src/imagenes/Profigma_P1.PNG b/src/imagenes/Profigma_P1.PNG
diff --git a/src/imagenes/Profigma_P2.PNG b/src/imagenes/Profigma_P2.PNG
diff --git a/src/imagenes/Profigma_P3.PNG b/src/imagenes/Profigma_P3.PNG
diff --git a/src/imagenes/Version mobile1.PNG b/src/imagenes/Version mobile1.PNG
diff --git a/src/imagenes/Version mobile3.PNG b/src/imagenes/Version mobile3.PNG
diff --git a/src/imagenes/Version mobile4.PNG b/src/imagenes/Version mobile4.PNG
diff --git a/src/imagenes/Version mobile5.PNG b/src/imagenes/Version mobile5.PNG
diff --git a/src/imagenes/busqueda pokemon y modal.PNG b/src/imagenes/busqueda pokemon y modal.PNG
diff --git a/src/imagenes/header.png b/src/imagenes/header.png
diff --git a/src/imagenes/maze1.PNG b/src/imagenes/maze1.PNG
diff --git a/src/imagenes/maze2.PNG b/src/imagenes/maze2.PNG
diff --git a/src/imagenes/maze3.PNG b/src/imagenes/maze3.PNG
diff --git a/src/imagenes/maze4.PNG b/src/imagenes/maze4.PNG
diff --git a/src/imagenes/maze5.PNG b/src/imagenes/maze5.PNG
diff --git a/src/imagenes/ordenado alfabeticamente.PNG b/src/imagenes/ordenado alfabeticamente.PNG
diff --git a/src/imagenes/pantalla inicio-explicativa.PNG b/src/imagenes/pantalla inicio-explicativa.PNG
diff --git a/src/imagenes/pantalla mobile2.PNG b/src/imagenes/pantalla mobile2.PNG
diff --git a/src/imagenes/pokeFriends-inicio.jpg b/src/imagenes/pokeFriends-inicio.jpg
diff --git a/src/imagenes/prototipo_papel1.png b/src/imagenes/prototipo_papel1.png
diff --git a/src/imagenes/prototipo_papel2.png b/src/imagenes/prototipo_papel2.png
diff --git a/src/imagenes/version mobile6.PNG b/src/imagenes/version mobile6.PNG
diff --git a/src/index.html b/src/index.html
@@ -1,12 +1,120 @@
 <!DOCTYPE html>
 <html>
-  <head>
-    <meta charset="utf-8">
-    <title>Data Lovers</title>
-    <link rel="stylesheet" href="style.css" />
-  </head>
-  <body>
-    <div id="root"></div>
-    <script src="main.js" type="module"></script>
-  </body>
+
+<head>
+  <meta charset="utf-8">
+  <title>Data Lovers</title>
+  <meta content="width=device-width, initial-scale=1" name="viewport" />
+  <link rel="stylesheet" href="style.css">
+  <script src="https://kit.fontawesome.com/3b4f19e26f.js" crossorigin="anonymous"></script>
+</head>
+
+<body>
+
+
+  <!-- Header y logo -->
+  <section id="header">
+    <a href="index.html" title="Home" class="pokeDataImage">
+      <img src="imagenes/header.png" alt="header Pokedata" id="logo">
+    </a>
+  </section>
+
+  <!-- Sección para menú responsive-->
+  <section id="menuResponsive">
+    <input type="checkbox" id="btn-menu-responsive">
+    <label for="btn-menu-responsive"><span><i class="btn-menu fas fa-bars"></i></span></label>
+
+    <!--contenedor de botones de filtrado-->
+    <section id="menu">
+      <select id="selectType" class="droplists">
+        <option value="" disabled selected>TIPO DE POKÉMON</option>
+        <option value="Water">Agua</option>
+        <option value="Fire">Fuego</option>
+        <option value="Normal">Normal</option>
+        <option value="Grass">Planta</option>
+        <option value="Electric">Eléctrico</option>
+        <option value="Ice">Hielo</option>
+        <option value="Fighting">Pelea</option>
+        <option value="Poison">Veneno</option>
+        <option value="Ground">Tierra</option>
+        <option value="Flying">Volador</option>
+        <option value="Psychic">Psíquicos</option>
+        <option value="Bug">Bicho</option>
+        <option value="Rock">Roca</option>
+        <option value="Ghost">Fantasma</option>
+        <option value="Dragon">Dragón</option>
+      </select>
+
+      <select id="selectWeak" class="droplists">
+        <option value="" disabled selected>DEBILIDAD CONTRA</option>
+        <option value="Water">Agua</option>
+        <option value="Fire">Fuego</option>
+        <option value="Grass">Planta</option>
+        <option value="Electric">Eléctrico</option>
+        <option value="Ice">Hielo</option>
+        <option value="Fighting">Pelea</option>
+        <option value="Poison">Veneno</option>
+        <option value="Ground">Tierra</option>
+        <option value="Flying">Volador</option>
+        <option value="Psychic">Psíquicos</option>
+        <option value="Bug">Bicho</option>
+        <option value="Rock">Roca</option>
+        <option value="Ghost">Fantasma</option>
+        <option value="Dragon">Dragón</option>
+        <option value="Dark">Siniéstro</option>
+        <option value="Steel">Metal</option>
+        <option value="Fairy">Hada</option>
+      </select>
+
+      <select id="selectOrder" class="droplists">
+        <option value="" disabled selected>ORDENAR POR</option>
+        <option value="aToZ">A-Z</option>
+        <option value="zToA">Z-A</option>
+      </select>
+    </section>
+
+    <!--búsqueda input-->
+    <div id="searchInput">
+      <input type="text" id="searchBar" placeholder=" Buscar ej.: vulpix"><i class="search fas fa-search"></i>
+    </div>
+
+  </section>
+
+  <section id="welcomePage">
+    <div id="welcome" class="welcomeText">
+      <h1>PoKéData GO </h1>
+      <p>Es una web dirigida a todos los jugadores amantes de Pokémon GO.</p>
+      <p>En nuestra página podrás encontrar tus pokémon por tipo y debilidades, así como conocer las características de
+        tu pokémon favorito o el de tu contrincante.</p>
+      <h3>¡Explora y conviertete en el mejor Entrenador Pokémon!</h3>
+    </div>
+
+    <div class="pokeFriends">
+      <img src="imagenes/pokeFriends-inicio.jpg" id="welcomeImage">
+    </div>
+
+  </section>
+  <!--contenedor para mostrar mensaje de tipo de pokémon en vista-->
+  <section id="topMessageOfType"></section>
+  <!--contenedor para mostrar HTML dinámico con las cards de pokémon-->
+  <section id="root"></section>
+
+  <footer id="footer">
+    <div class="copyright">
+      <p class="footerCopyright">PoKéDaTa GO 2020. Derechos Reservados. Desarrollo e implementación por Eliana Hidalgo y
+        Paula Plaza</p>
+    </div>
+
+    <div class="socialMedia">
+      <a href="https://www.youtube.com/user/pokemon" target="_blank"><i class="icon fab fa-youtube"></i></a>
+      <a href="https://www.instagram.com/pokemon/" target="_blank"><i class="icon fab fa-instagram"></i></a>
+      <a href="https://www.facebook.com/Pokemon/" target="_blank"><i class="icon fab fa-facebook-square"></i></a>
+      <a href="https://twitter.com/pokemon" target="_blank"><i class="icon fab fa-twitter"></i></a>
+    </div>
+  </footer>
+
+  <script src="main.js" type="module"></script>
+
+</body>
+
 </html>