Laboratoria · Daynizyvc · Jun 28, 2019 · Jun 28, 2019 · Jun 28, 2019 · Jun 28, 2019
diff --git a/.eslintrc b/.eslintrc
@@ -7,7 +7,7 @@
   },
   "extends": "eslint:recommended",
   "globals": {
-    "example": false
+    "google": false
   },
   "rules": {
     "no-console": 0,

diff --git a/README.md b/README.md
diff --git a/RETO.md b/RETO.md
diff --git a/images/Edad.png b/images/Edad.png
diff --git a/images/FINAL.gif b/images/FINAL.gif
diff --git a/images/Fam.png b/images/Fam.png
diff --git a/images/Filtrar.png b/images/Filtrar.png
diff --git a/images/Género.png b/images/Género.png
diff --git a/images/Irrelevantes.png b/images/Irrelevantes.png
diff --git a/images/Ocupación.png b/images/Ocupación.png
diff --git a/images/Ordenar.png b/images/Ordenar.png
diff --git a/images/Pokmon.jpg b/images/Pokmon.jpg
diff --git a/images/Rafael.jpg b/images/Rafael.jpg
diff --git a/images/Relevantes.png b/images/Relevantes.png
diff --git a/images/allPokemones.jpg b/images/allPokemones.jpg
diff --git a/images/elbueno.gif b/images/elbueno.gif
diff --git a/images/ezgif.com-gif-maker(3).gif b/images/ezgif.com-gif-maker(3).gif
diff --git a/images/ezgif.com-gif-maker(4).gif b/images/ezgif.com-gif-maker(4).gif
diff --git a/images/goku.jpg b/images/goku.jpg
diff --git a/images/graph.png b/images/graph.png
diff --git a/images/icon.jpg b/images/icon.jpg
diff --git a/images/iconColor.png b/images/iconColor.png
diff --git a/images/iconGraph.png b/images/iconGraph.png
diff --git a/images/icono.jpg b/images/icono.jpg
diff --git a/images/iconoInicio b/images/iconoInicio
diff --git a/images/imagesOne.png b/images/imagesOne.png
diff --git a/images/logoOne.gif b/images/logoOne.gif
diff --git a/images/pikachu.png b/images/pikachu.png
diff --git a/images/pokebola.png b/images/pokebola.png
diff --git a/images/pokegif.gif b/images/pokegif.gif
diff --git a/images/pokegiff.gif b/images/pokegiff.gif
diff --git a/images/pokegiftransparente (copia).gif b/images/pokegiftransparente (copia).gif
diff --git a/images/pokegiftransparente.gif b/images/pokegiftransparente.gif
diff --git a/images/pokemon-12.jpg b/images/pokemon-12.jpg
diff --git a/images/pokemones.jpg b/images/pokemones.jpg
diff --git a/images/tenor.gif b/images/tenor.gif
diff --git a/images/titulo.gif b/images/titulo.gif
diff --git a/images/titulotransp.gif b/images/titulotransp.gif
diff --git a/images/titulotransparente.gif b/images/titulotransparente.gif
diff --git a/images/tpte.gif b/images/tpte.gif
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -7,9 +7,10 @@
     "htmlhint": "htmlhint src/*.html test/*.html",
     "eslint": "eslint --ext .js src/ test/",
     "pretest": "npm run eslint --silent && npm run htmlhint --silent",
-    "test": "jest"
+    "test": "jest --coverage"
   },
   "dependencies": {
+    "chart.js": "^2.8.0",
     "eslint": "^5.9.0",
     "eslint-plugin-jest": "^22.1.2",
     "htmlhint": "^0.10.1",

diff --git a/src/data.js b/src/data.js
@@ -1,8 +1,40 @@
-// esta es una función de ejemplo
-// puedes ver como agregamos la función a nuestro objeto global window
+let  filterData = (data, condition) => {
+   let filtered;
+ if (condition == "allP") {
+   filtered = data;
+ } else {
+   filtered = data.filter(element =>  element.type.indexOf(condition) > -1);
+ }
+ return filtered;
+ };
+ window.filterData= filterData;
 
-const example = () => {
-  return 'example';
+let sortData = (data, sortOrder) => {   
+   let organized;
+    if (sortOrder === "A-to-Z"){
+       organized= data.sort((a,b) => a.name.localeCompare(b.name));
+    }
+    if (sortOrder === "Z-to-A"){
+       organized= data.sort((a,b) => b.name.localeCompare(a.name));
+    }
+    if (sortOrder === "0-to-9"){
+       organized = data.sort((a,b) => {
+          return(a.id - b.id);
+         });
+    }
+    if (sortOrder ==="9-to-0"){
+       organized = data.sort((a,b) => {
+          return(b.id - a.id);
+         });
+    }
+    return organized;
 };
+
+window.sortData= sortData;
 
-window.example = example;
+let stadistics = (element, data) =>{
+      let porcentage;
+      porcentage = Math.round((element/data.length)*100);
+      return porcentage;
+};
+window.stadistics = stadistics;
diff --git a/src/data/pokemon/pokemon.js b/src/data/pokemon/pokemon.js
@@ -4085,3 +4085,5 @@ var POKEMON = {
   }]
 }
 ;;
+
+window.POKEMON = POKEMON;
diff --git a/src/index.html b/src/index.html
@@ -1,18 +1,128 @@
 <!DOCTYPE html>
-<html>
+<html lang="esp">
+
   <head>
-    <meta charset="utf-8">
-    <title>Data Lovers</title>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
+    <title>Pokemon Start</title>
+
+    <link rel="icon" type="image/jpeg" href="../images/icon.jpg"/>
     <link rel="stylesheet" href="style.css" />
+
+    <link href="https://fonts.googleapis.com/css?family=Indie+Flower|Rajdhani|Shadows+Into+Light&display=swap" rel="stylesheet"> 
+    <link href="https://fonts.googleapis.com/css?family=Mountains+of+Christmas|Poiret+One|Rum+Raisin&display=swap" rel="stylesheet">     
+    <link href="https://fonts.googleapis.com/css?family=Poiret+One&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Economica|Neucha&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css?family=Orbitron&display=swap" rel="stylesheet">
   </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> -->
+
+  <body>    
+
+    <script src="./data/pokemon/pokemon.js"></script>   
+
+    <header class = "header">
+      <figure class ="titulo">
+         <img class="img-header" src="../images/pokegiftransparente.gif">
+       </figure>
+    </header>
+
+    <nav class = "options">
+    <div class = "options-container">
+
+      <div class="option-one">
+        <div class = "image-home">
+            <input type = "image" id ="home-page" src = "../images/iconoInicio">  
+        </div>         
+        <div class = "color-one">          
+        </div>
+      </div>
+
+      <div class = "option-two">
+         <div class = "option-pokedex">
+            <input type = "image" id = "pokedex" src = "../images/pikachu.png">
+        </div>        
+        <div class = "color-two">
+        </div> 
+      </div>
+
+      <div class = "option-three">
+        <div class = "option-graph">
+            <input type = "image" id = "graph" src = "../images/graph.png">
+        </div>        
+        <div class = "color-three"> 
+        </div>
+      </div>
+    </div>
+    </nav>
+
+  <section id= "section-one" class ="introduction-video">        
+    <div class = "page-home">
+       <div class = "video-responsive">
+         <iframe  class = "video" src="https://www.youtube.com/embed/Kwpp4mCCSa0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
+         </iframe>    
+       </div>    
+       <div class = "information-text">
+         <h1>¿Sabías qué...?</h1>
+          <div class = "pharagraph">
+           <p class = "pharagraph-inf">
+              Ash es un niño del pueblo Paleta, tiene 10 años y por fin podrá sacar su licencia Pokemón.
+              A los 10 años se puede obtener un pokemón principiante del profesor Oak, el experto en pokemones
+              de la ciudad. Ash viajará para obtener la sabiduría del entrenamiento pokemón. 
+              Y tú, ¿estás listo para ser ¡<b>El MEJOR MAESTRO POKEMON</b>! del mundo?
+           </p> 
+          </div>
+        </div> <b></b>
+     </div>
+  </section> 
+
+  <section id = "section-pokemon" class = "hidden">
+    <div class="manipulation">
+      <div class="filtrar">
+        <p class = "filtrar-pokemon">TIPO DE POKEMON:</p>
+        <select name="tipo" id="type" class="filter-type">
+          <option value="allP" selected= "True">Todos</option>
+          <option value="Water">Water</option>
+          <option value="Fire">Fire</option>
+          <option value="Grass">Grass</option>
+          <option value="Ground">Ground</option>
+          <option value="Ice">Ice</option>
+          <option value="Electric">Electric</option>
+          <option value="Rock">Rock</option>
+          <option value="Flying">Flying</option>
+          <option value="Poison">Poison</option>
+          <option value="Bug">Bug</option>
+          <option value="Psychic">Psychic</option>
+          <option value="Normal">Normal</option>
+          <option value="Fighting">Fighting</option>
+          <option value="Dragon">Dragon</option>
+        </select>
+      </div>
+      <div class="ordenar">
+        <p class = "orden-pokemon">ORDENAR: </p>
+        <select name= "ordenando" id="order" class = "order-pokemon">
+            <option value="nothing" selected = "True" disabled = "disabled">Ordenar por ...</option>
+            <option value="A-to-Z"> Alfabético (A a Z) </option>
+            <option value="Z-to-A"> Alfabético (Z a A) </option>
+            <option value="0-to-9"> Número (Ascendente) </option>
+            <option value="9-to-0">Número (Descendente)</option>
+        </select>
+      </div>
+    </div>
+   <div class = "all-Pokemon" id="all-Pokemon">
+   </div>    
+  </section>
+
+  <section id="show-graph" class = "hidden">
+      <div class = "box-porcentage" id = "estadistics">
+      </div>
+      <div class = "box-graph" id = "div-show-graph">
+      </div>
+  </section>
+
+    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>   
     <script src="data.js"></script>
-    <script src="main.js"></script>
+    <script src="main.js"></script> 
+
   </body>
 </html>
diff --git a/src/main.js b/src/main.js
@@ -0,0 +1,136 @@
+const allPokemon = document.getElementById("all-Pokemon");  //Esta es la sección donde se van a pintar las tarjetas
+let type = document.getElementById("type"); //Esta es la lista deplegable con los tipos de pokémon
+let order = document.getElementById("order"); // Lista despeglable para ordenar los pokemones
+const dataPokemon = window.POKEMON.pokemon; //Data
+
+let pokearray = [];
+let pokearrayOrganized = [];
+
+const inicio = document.getElementById("section-one");
+const introduction = document.getElementById("home-page");
+const pokedex = document.getElementById("pokedex");
+const pokeGraph = document.getElementById("graph");
+const pokemones = document.getElementById("section-pokemon");
+const sectionGraph = document.getElementById("show-graph");
+
+const mostrarData = (data) => {
+    let str =  '';
+    data.forEach(element => {
+        str += 
+           `<div class="box-Pokemon">
+               <div class= "flip-card-inner">
+                   <div class = "flip-card-front">
+                       <div>
+                           <p class="poke-Number">${element.id}</p>
+                       </div>
+                       <div>
+                           <img class="poke-img" src="${element.img}"/>
+                       </div>
+                       <div>
+                           <p class = "poke-Name">${element.name}</p>
+                       </div> 
+                   </div>
+                   <div class= "flip-card-back">
+                        <div class= "datos">
+                            <p> Type: ${element.type}</p>      
+                            <br>              
+                            <p> Candy: ${element.candy}</p>
+                            <br>         
+                            <p> Weaknesses: </p>
+                            <p>${element.weaknesses}</p>
+                        </div>
+                   </div>
+               </div>
+           </div>` ;                  
+    });
+allPokemon.innerHTML = str;
+};
+mostrarData(dataPokemon);
+
+//Función "showType"
+const showType = event => {
+const condition = event.target.value; //Guardando el tipo de Pokémon que elige el usuario
+pokearray = window.filterData(dataPokemon,condition); //Se guarda como nuevo arreglo, el resultado de la función filterData
+mostrarData(pokearray);
+};
+
+//Funcion "orderPokemon"
+const orderPokemon = event => {
+    if (pokearray.length == "0"){
+        pokearray= dataPokemon;
+    }
+    const ordenDatos = event.target.value; //Guardando el orden que elige el usuario
+    pokearrayOrganized = window.sortData(pokearray,ordenDatos); //Se guarda como nuevo arreglo, el resultado de la función filterData
+    mostrarData(pokearrayOrganized);
+};
+
+
+//estadisticas
+const typeP = ["Water", "Fire", "Grass", "Ground", "Ice", "Electric", "Rock", "Flying", "Poison", "Bug", "Psychic", "Normal", "Fighting", "Dragon"];
+let numType = [];
+typeP.forEach(element =>{
+    numType.push((window.filterData(dataPokemon,element).length));
+});
+
+let porcentageTypePokemon = [];
+
+ numType.forEach(element => {
+     porcentageTypePokemon.push(window.stadistics(element, dataPokemon));
+ });
+
+const show = () =>{
+    pokemones.classList.remove("hidden");
+    inicio.classList.add("hidden");
+    sectionGraph.classList.add("hidden");
+};
+
+const showHome = () =>{
+    inicio.classList.remove("hidden");
+    pokemones.classList.add("hidden");
+    sectionGraph.classList.add("hidden");
+};
+
+const showGraph = () =>{
+    sectionGraph.classList.remove("hidden");
+    pokemones.classList.add("hidden");
+    inicio.classList.add("hidden");
+
+    google.charts.load("current", {packages:["corechart"]});
+    google.charts.setOnLoadCallback(graphType);
+
+    function graphType (){
+        let data = google.visualization.arrayToDataTable([
+            ['Tipo', '%'],
+            ['Agua', 32],
+            ['Fuego', 12],
+            ['Planta', 14],
+            ['Tierra', 14],
+            ['Hielo', 5],
+            ['Eléctrico', 9],
+            ['Roca', 11],
+            ['Volador', 19],
+            ['Venenoso', 33],
+            ['Insecto', 12],
+            ['Psíquico', 14],
+            ['Normal', 24],
+            ['Volador', 8],
+            ['Dragón', 3]        
+        ]);
+
+        const options ={
+            title: 'Tipos de Pokemones',
+            is3D: true,
+            'width':1000,
+            'height':1000,
+        };
+
+        let chart = new google.visualization.PieChart(document.getElementById('div-show-graph'));
+        chart.draw(data,options);    
+    }
+};
+
+type.addEventListener("change", showType); //La lista desplegable responderá a un cambio y ejecuta la función "showtype"
+order.addEventListener("change",orderPokemon);
+pokedex.addEventListener("click",show);
+introduction.addEventListener("click", showHome);
+pokeGraph.addEventListener("click", showGraph);
-Original file line number
+Diff line change
@@ Expand Up / @@ -4085,3 +4085,5 @@ var POKEMON = { @@
       }]
     }
     ;;
+    window.POKEMON = POKEMON;