Laboratoria · RosaIsela31 · Jun 26, 2019 · Jun 26, 2019 · Jun 26, 2019 · Jun 26, 2019
diff --git a/.editorconfig b/.editorconfig
diff --git a/.eslintignore b/.eslintignore
diff --git a/.eslintrc b/.eslintrc
diff --git a/.gitignore b/.gitignore
diff --git a/EXTRA.md b/EXTRA.md
diff --git a/README.md b/README.md
diff --git a/collaboration.md b/collaboration.md
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
diff --git a/src/data.js b/src/data.js
@@ -1,8 +1,57 @@
-// esta es una función de ejemplo
-// puedes ver como agregamos la función a nuestro objeto global window
+//Esta función ordena los pokemones de A-Z
+const sortData = (data) => {
+  data.sort((a, b) => {
+      let nameA = a.name.toUpperCase();
+      let nameB = b.name.toUpperCase();
+      if (nameA < nameB) {
+          return -1;
+      }
+      if (nameA > nameB) {
+          return 1;
+      }
+  });
+  return data;
+};
+
+//----------------------------------------------------------------
+
+//Esta función ordena los pokemones de Z-A
+const sortDataZA = (data) => {
+  data.sort((a, b) => {
+      let nameA = a.name.toUpperCase();
+      let nameB = b.name.toUpperCase();
+      if (nameA < nameB) {
+          return -1;
+      }
+      if (nameA > nameB) {
+          return 1;
+      }
+  });
+  return data.reverse();
+};
+
+window.sortData = sortData;
+window.sortDataZA = sortDataZA;
+
+//--------------------------------------------------------------
+// Esta función se encarga del estadístico 
+const statisticsPercentage = (key, value, data) => {
+  let total = data.length;
+  let items = data.filter(element => element[key].indexOf(value) > -1);
+  let result = (items.length * 100) / total;
+  let trunc = Math.floor(result);
+  return trunc;
+};
 
-const example = () => {
-  return 'example';
+//--------------------------------------------------------------
+// Función que filtra por tipo de pokemon
+const filterByType = (data) => {
+  const idTarget = event.target.id;
+  let items = data.filter(element => element.type[0] === idTarget || element.type[1] == idTarget || element.type[2] == idTarget);
+  return items;
 };
 
-window.example = example;
+window.sortData = sortData;
+window.sortDataZA = sortDataZA;
+window.filterByType = filterByType;
+window.statisticsPercentage = statisticsPercentage;
diff --git a/src/data/lol/lol.js b/src/data/lol/lol.js
diff --git a/src/data/lol/lol.json b/src/data/lol/lol.json
diff --git a/src/data/pokemon/pokemon.js b/src/data/pokemon/pokemon.js
@@ -1,4 +1,4 @@
-var POKEMON = {
+window.POKEMON = {
   "pokemon": [{
     "id": 1,
     "num": "001",
@@ -19,9 +19,9 @@ var POKEMON = {
     "multipliers": [1.58],
     "weaknesses": [
       "Fire",
-      "Ice",
-      "Flying",
-      "Psychic"
+      " Ice",
+      " Flying ",
+      " Psychic "
     ],
     "next_evolution": [{
       "num": "002",
@@ -4085,3 +4085,6 @@ var POKEMON = {
   }]
 }
 ;;
+
+
+
diff --git a/src/data/pokemon/pokemon.json b/src/data/pokemon/pokemon.json
diff --git a/src/data/rickandmorty/rickandmorty.js b/src/data/rickandmorty/rickandmorty.js
diff --git a/src/data/rickandmorty/rickandmorty.json b/src/data/rickandmorty/rickandmorty.json
diff --git a/src/data/steam/steam.js b/src/data/steam/steam.js
diff --git a/src/data/steam/steam.json b/src/data/steam/steam.json
diff --git a/src/imagenes/SegundaEncuesta.jpg b/src/imagenes/SegundaEncuesta.jpg
diff --git a/src/imagenes/balbasaur.png b/src/imagenes/balbasaur.png
diff --git a/src/imagenes/comoTeIndentificas.png b/src/imagenes/comoTeIndentificas.png
diff --git a/src/imagenes/loMasImportanteQueQuieresSaber.png b/src/imagenes/loMasImportanteQueQuieresSaber.png
diff --git a/src/imagenes/logologo.jpg b/src/imagenes/logologo.jpg
diff --git a/src/imagenes/logologo.png b/src/imagenes/logologo.png
diff --git a/src/imagenes/pikachuuu.png b/src/imagenes/pikachuuu.png
diff --git a/src/imagenes/pokemon.png b/src/imagenes/pokemon.png
diff --git a/src/imagenes/primeraEncuesta.jpg b/src/imagenes/primeraEncuesta.jpg
diff --git a/src/imagenes/queEdadTienes.png b/src/imagenes/queEdadTienes.png
diff --git a/src/imagenes/sketch.jpg b/src/imagenes/sketch.jpg
diff --git a/src/imagenes/teGustariaNuestraAplicacion.png b/src/imagenes/teGustariaNuestraAplicacion.png
diff --git a/src/imagenes/universepokemon.jpg b/src/imagenes/universepokemon.jpg
diff --git a/src/imagenes/wall.jpg b/src/imagenes/wall.jpg
diff --git a/src/index.html b/src/index.html
@@ -1,18 +1,94 @@
+
 <!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="./data/injuries/injuries.js"></script> -->
-    <!-- <script src="./data/pokemon/pokemon.js"></script> -->
-    <!-- <script src="./data/steam/steam.js"></script> -->
-    <!-- <script src="./data/worldbank/worldbank.js"></script> -->
-    <!-- <script src="./data/lol/lol.js"></script> -->
-    <script src="data.js"></script>
-    <script src="main.js"></script>
-  </body>
-</html>
+   <head>
+     <link href="https://fonts.googleapis.com/css?family=Coiny&display=swap" rel="stylesheet">
+     <meta charset="utf-8">
+     <title>Data Lovers</title>
+     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
+      <link rel="stylesheet" href="style.css" />
+   </head>
+   <body>
+      <div id="container" >
+        <figure>
+          <img src="./imagenes/logologo.png" id="logologo" alt="">
+        </figure>
+              <div id="pokemones-unoxuno">   
+                <div>
+                   <h2 id="name">¡Para que comiences a conocer el universo Pokémon! <br> </h2><br>
+                   <img id="img" height="250" width="250" src="./imagenes/pikachuuu.png"><br>
+                </div>
+
+             <div>
+               <button id="atras" class="button_unoxuno">Atrás</button>
+               <button id="siguiente" class="button_unoxuno">Siguiente</button>
+             </div><br>
+
+             <button id="conocertodos" class="btn_todos_pokemones">conocer a todos los pokemones</button>
+            </div>
+      </div>
+
+        <section id="estadistica" class="ocultar">
+            <p id="numerodepokemones"></p>
+            <p id="porcentajedepokemones"></p>
+         </section>
+         <section id="todospokemones" class="ocultar ">
+           <div id="nav"> 
+                <button class="enlace btnPok"  type="button" id="Ice">Hielo</button>
+                <button class="enlace btnPok" type="button" id="Fire">Fuego</button>
+                <button class="enlace btnPok" type="button" id="Water">Agua</button>
+                <button class="enlace btnPok" type="button" id="Grass">Hierba</button>
+                <button class="enlace btnPok" type="button" id="Psychic">Psíquico</button>
+                <button class="enlace btnPok" type="button" id="Rock">Roca</button>
+                <button class="enlace btnPok" type="button" id="Electric">Eléctrico</button>
+                <button class="enlace btnPok" type="button" id="Bug">Insecto</button>
+                <button class="enlace btnPok" type="button" id="Flying">Volador</button>
+              <button class="enlace btnPok" id="enlace">Filtrar A-Z</button>
+              <button class="enlace btnPok" id="orderZ_A">Filtrar Z-A</button> <br>
+           </div>
+           <div id="mostrando_lista_pokemones"></div>
+        </section>
+  <!-- *************************************************************** -->
+
+           <!-- <input type="button" class="button" value="Pokemones" id="catalog">
+           <section id="characters-page" > 
+               <div class="menu-second content">
+                 <h2>Pokemones</h2>
+                 <div class="order-and-filter-button">
+                 <div class="pokemon-type order-filter">   
+                   <select name="filter" id="filter">
+                     <option value="all">Mostrar todos</option>
+                     <option value="ice">Ice</option>
+                     <option value="fire">Fire</option>
+                     <option value="water">Water</option>
+                     <option value="grass">Grass</option>
+                     <option value="psychic">Psychic</option>
+                     <option value="dragon">Dragon</option>
+                     <option value="rock">Rock</option>
+                     <option value="electric">Electric</option>
+                     <option value="ground">Ground</option>
+                     <option value="poison">Poison</option>
+                     <option value="flying">Flying</option>
+                   </select>
+
+                   <select name="order" id="order">
+                     <option value="order" class="order">Ordenar</option>
+                     <option value="a-z">de A a Z</option>
+                     <option value="z-a">de Z a A</option>
+                   </select>
+                 </div>
+                 </div>
+              </div>
+
+              <section class="all-data" id="all-data">
+              </section>
+           </section> -->
+     <!-- *************************************************************** -->
+
+     <script src="./data/pokemon/pokemon.js"></script>
+     <script src="main.js"></script>
+     <script src="data.js"></script>
+
+   </body>
+ </html>
+
diff --git a/src/main.js b/src/main.js
@@ -0,0 +1,148 @@
+const data = window.POKEMON.pokemon;
+
+//----------------------------------------------------------
+// Consumiendo la API
+// const consultarPokemon = (id) => {
+//     //funcion extraer data api
+//     fetch(`https://pokeapi.co/api/v2/pokemon/${id}`)
+//     .then(function(response){
+//       response.json()
+//       .then(function(pokemon){
+//         console.log(pokemon.name);
+//       })
+//     })
+// }
+// consultarPokemon();
+//----------------------------------------------------------
+
+//Seleccionando a los elementos del HTML con ayuda de su Id.
+const firstButton = document.getElementById("siguiente");
+const buttonAtras = document.getElementById("atras");
+const name = document.getElementById("name");
+const img = document.getElementById("img");
+const container=document.getElementById("container");
+const conocertodos = document.getElementById("conocertodos");
+const todospokemones = document.getElementById("todospokemones");
+let contador = 0;
+//Estadístico
+let numero=0;
+const numerodepokemones=document.getElementById("numerodepokemones");
+const porcentajedepokemones=document.getElementById("porcentajedepokemones");
+const estadisticas=document.getElementById("estadistica");
+//  Buttons for pokemons type
+const btnIce = document.getElementById("Ice");
+const btnFire = document.getElementById("Fire");
+const btnWater = document.getElementById("Water");
+const btnGrass = document.getElementById("Grass");
+const btnPsychic = document.getElementById("Psychic");
+const btnRock = document.getElementById("Rock");
+const btnElectric = document.getElementById("Electric");
+const btnBug = document.getElementById("Bug");
+const btnFlying = document.getElementById("Flying");
+
+//-----------------------------------------------------------------------
+// Función para mostrar a los pokemones de uno en uno
+const showOnexOne = () => {
+ name.innerHTML = "nombre:" + " " + window.POKEMON.pokemon[contador].name;
+ img.src = window.POKEMON.pokemon[contador].img;
+ contador=contador+1;
+};
+
+// Función para retroceder en la visualización de los pokemones uno x uno
+const showOnexOneReverse = () => {
+ name.innerHTML = "nombre:" + " " + window.POKEMON.pokemon[contador].name;
+ img.src = window.POKEMON.pokemon[contador].img;
+ contador=contador-1;
+};
+//-----------------------------------------------------------------------
+
+// Función que imprime la data en section1
+const imprimir = (data) => {
+ //llamar section donde se imprime la data
+ const mostrar = document.getElementById('mostrando_lista_pokemones');
+ mostrar.innerHTML = '';
+ let template='';
+for(let pokemon of data){
+ //mostrar.innerHTML += `<ul><li>
+ template +=`<li>
+ <img src="${pokemon.img}">
+ <p><strong>Nombre:</strong> ${pokemon.name}</p>
+ <p><strong>Tipo:</strong>${pokemon.type}</p>
+ <p><strong>Candy:</strong>${pokemon.candy}</p>
+ </li> `;
+}
+mostrar.innerHTML=`<ul>${template}</ul>`;
+numero=data.length;
+numerodepokemones.innerHTML=`${numero} de 151 pokemones`;
+porcentajedepokemones.innerHTML=`${numero/151*100}% de los pokemones`;
+};
+imprimir(data);
+
+//----------------------------------------------------------------
+
+//Función que ordena la data de A-Z
+ const btnAZ = document.getElementById("enlace");
+
+ const orderAZ = () => {
+   let result = window.sortData(data);
+   // newDataAZ = result;
+   imprimir(result);
+ };
+
+ btnAZ.addEventListener("click", orderAZ);
+
+//----------------------------------------------------------------
+
+//Función que ordena la data de Z-A
+ const btnZA = document.getElementById("orderZ_A");
+
+ const orderZA = () => {
+   let result = window.sortDataZA(data);
+   // newDataAZ = result;
+   imprimir(result);
+ };
+
+ btnZA.addEventListener("click", orderZA);
+
+ //----------------------------------------------------------
+ //Función que filtra por tipo, llama a la función pura filterByType
+ const filter = () => {
+  let result = window.filterByType(data);
+  imprimir(result);
+};
+ //----------------------------------------------------------
+//Función que muestra todos los pokemons y el estadistico
+ const mostrartodos = () => {
+ todospokemones.classList.remove("ocultar");
+ todospokemones.classList.add("lista_de_pokemones");
+ container.classList.add("ocultar");
+ estadisticas.classList.remove("ocultar");
+};
+
+//**************************************************
+//PROBANDO CON EL SELECT
+// let imSelection = document.getElementById("select-type");
+// imSelection.addEventListener("click", () => {
+// let imValue = imSelection.options[imSelection.selectedIndex].value;
+// //console.log(typeof imValue);
+// //console.log(imValue);
+// let pokeFilterData = window.data.filterByType(data, imValue);
+// imprimir(pokeFilterData);
+// });
+
+//----------------------------------------------------------
+//Llamando a las funciones
+firstButton.addEventListener("click", showOnexOne);
+buttonAtras.addEventListener("click", showOnexOneReverse);
+//Conocer a todos los pokemones
+conocertodos.addEventListener("click",mostrartodos);
+//Buttons for pokemon type
+btnIce.addEventListener("click", filter);
+btnFire.addEventListener("click", filter);
+btnWater.addEventListener("click", filter);
+btnGrass.addEventListener("click", filter);
+btnPsychic.addEventListener("click", filter);
+btnRock.addEventListener("click", filter);
+btnElectric.addEventListener("click", filter);
+btnBug.addEventListener("click", filter);
+btnFlying.addEventListener("click", filter);