SusanaLab · SusanaLab · Jul 29, 2021 · Aug 3, 2021 · Aug 4, 2021 · Aug 5, 2021
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,62 @@
-// estas funciones son de ejemplo
+//Filtrado por tipo.
+export function filterType(pokemones,typePokemon){
+  let resultado=pokemones.filter(function(pokemones){
+    return pokemones.type == typePokemon;
+  })
+
+     return resultado
+}
+
+//Ordenamos de forma Z-A
+export function sortZA (pokemones){
+  const sortedPokemons = pokemones.sort(function (a, b) {
+    if (a.name < b.name) {
+      return 1;
+    }
+    if (a.name > b.name) {
+      return -1
+    }
+      return 0;
+  });
+
+       return sortedPokemons 
+}
+
+
+//Ordenamos de forma A-Z
+export function sortA (pokemones) {
+  let ordenaAscend = pokemones.sort(function (a, b) {
+    if (a.name > b.name) {
+      return 1;
+    }
+    if (a.name < b.name) {
+      return -1;
+    }
+      return 0;
+  });
+        return ordenaAscend 
+}
+
+export function statistics (pokemones){
+  let arrayKanto =0;
+  let arrayJohto = 0;
+
+   for(let i=0; i <pokemones.length; i++){
+    const region = pokemones [i].generation.name;
+      if (region ===  "kanto") {
+        arrayKanto = arrayKanto +1;
+      } else  {
+        arrayJohto = arrayJohto +1;
+      }
+  }
+
+
+ const percent1 = (arrayJohto/pokemones.length) *100
+ const percent2 = (arrayKanto/pokemones.length) *100
+
+ return [Math.round(percent1), Math.round(percent2)]
+}
+
+
 
-export const example = () => {
-  return 'example';
-};
 
-export const anotherExample = () => {
-  return 'OMG';
-};
diff --git a/src/img/Pokemon.logo.png b/src/img/Pokemon.logo.png
diff --git a/src/img/pikachu.png b/src/img/pikachu.png
diff --git a/src/img/pokelogo.jpg b/src/img/pokelogo.jpg
diff --git a/src/index.html b/src/index.html
@@ -5,34 +5,66 @@
     <title>Data Lovers</title>
     <link rel="stylesheet" href="style.css" />
   </head>
-  <header> <img style="width:1000px; height:500px;" src="img/Pokemon.logo.png"/>
-  </header>
-  <body>
-      <form>
-        <select class="filter" id="type">
-         <option> fyre </option>
-         <option>poison</option>
-         <option> psychic</option>
-          <optio>grass</option>
-          </select>
-      </form>
-
-
-    <div>
-      <form>
-        <input class="filter" type="search" name="search" />
-        <button type="submit">Search</button>
-      </form>
-    </div>
+    <header>
+      <img class="logo" src="img/pokelogo.jpg" />
+      <nav class="searchBack">
+        <div id="boxNav"></div>
+        <p id="order">Order by:</p>
+          <h1 id="showS" value="showS"> </h1>
 
+            <button id="A-Z" value="A-Z"> A-Z </button>
+            <button id="Z-A"value="Z-A"> Z-A </button>
 
-    <main>
+              <form>
+                <select  id="lista" name ="type" class="filter" Change="filter" </select>
+                  <option value="0">Filter by type </option>
+                  <option value ="fire"> fire </option>
+                  <option value ="grass"> grass </option>
+                  <option value = "poison"> poison </option>
+                  <option value = "flying"> flying </option>
+                  <option value ="water"> water </option>
+                  <option value = "bug"> bug </option>
+                  <option value = "normal"> normal </option>
+                  <option value ="electric"> electric </option>
+                  <option value = "ground"> ground </option>
+                  <option value = "fighting"> fighting </option>
+                  <option value ="psychic"> psychic </option>
+                  <option value = "ice"> ice </option>
+                  <option value = "rock"> rock </option>
+                  <option value ="dragon"> dragon </option>
+                  <option value = "fairy"> fairy </option>
+                  <option value = "steel"> steel </option>
+                  <option value ="dark"> dark </option>
 
-</main>
+                </select>
+             </form>
 
+            <div id="boxGen">
+              <h2 id="kanto"> </h2>
+              <h2 id="johto"> </h2>
+            </div>
 
+          <input type="button" onclick="history.go(0)" id="back" value="back to home">
+
+      </nav>
+    </header>
+  <body>
 
-    <div id="root"></div>
-    <script src="main.js" type="module"></script>
+    <main>
+      <div id="root"></div>
+    </main>
   </body>
+
+  <footer>
+    <div id="boxFoo">
+      <p id="copyR">
+       <br> ©️ All Rights Reserved 2021. <br>
+        Laboratoria by Claudia Piñas / Susana García <br>
+        All Rights Reserved. <br>
+       </p>
+
+    </div>
+  </footer>
+  <script src="main.js" type="module"></script>
 </html>
+
diff --git a/src/main.js b/src/main.js
@@ -1,19 +1,89 @@
-//import { example } from './data.js';
-// import data from './data/lol/lol.js';
+//aqui controlan todo el dom
 import data from './data/pokemon/pokemon.js';
-// import data from './data/rickandmorty/rickandmorty.js';
+import { filterType, sortZA, sortA, statistics } from './data.js';
+
+
 
 const pokemones=data.pokemon;
 
 let htmlfinal=""
 
 pokemones.forEach(unoauno=>{
-htmlfinal+=generadordehtml(unoauno)
+  htmlfinal+=generadordehtml(unoauno)
 })
 
 function generadordehtml(pokemoncito){
-  return `<div class="box"> <img src="${pokemoncito.img}"> <h1>Name:${pokemoncito.name}</h1>
-   <h2>Num:${pokemoncito.num}</h2> <p>Type:${pokemoncito.type}</p> <p>Resistan:${pokemoncito.resistant} </p> <p>Weaknesses:${pokemoncito.weaknesses} </p> </div>`
+  return `<div class="box">
+   <img src="${pokemoncito.img}" id="imgPoke">
+   <h4>${pokemoncito.num}</h4>
+   <h1>${pokemoncito.name}</h1>
+   <h4>${pokemoncito.generation.name}</h4>
+   <p><b>Type:  </b><br>${pokemoncito.type}</p>
+   <p><b>Resistant:  </b><br>${pokemoncito.resistant} </p>
+   <p><b>Weaknesses:  </b><br>${pokemoncito.weaknesses} </p>
+   </div>`
 }
 
 document.getElementById("root").innerHTML=htmlfinal
+
+
+//Aqui filtramos por tipo
+const changeType = document.querySelector('.filter');
+
+changeType.addEventListener('change', (event) => {
+    const pokemonsFilter= filterType(pokemones,event.target.value); 
+    const percents =  statistics (pokemonsFilter);
+    const htmlPokemons= pokemonsFilter.map((pokemoncito) =>
+      `<div class="box">
+        <img src="${pokemoncito.img}" id="imgPoke">
+        <h4>${pokemoncito.num}</h4>
+        <h1>${pokemoncito.name}</h1>
+        <h4>${pokemoncito.generation.name}</h4>
+        <p><b>Type:  </b><br>${pokemoncito.type}</p>
+        <p><b>Resistant:  </b><br>${pokemoncito.resistant} </p>
+        <p><b>Weaknesses:  </b><br>${pokemoncito.weaknesses} </p>
+      </div>`
+    )
+
+    document.getElementById("root").innerHTML=htmlPokemons 
+document.getElementById("johto").innerHTML = `Johto: ${percents[0]} %`;
+document.getElementById("kanto").innerHTML =`Kanto: ${percents[1]} %`;
+});
+
+const changeOrder = document.getElementById("Z-A");
+changeOrder.addEventListener('click', (event) => {
+    const sortedPokemons = sortZA(pokemones,event.target)
+    const htmlPokemons= sortedPokemons.map((pokemoncito) =>
+      `<div class="box">
+        <img src="${pokemoncito.img}" id="imgPoke">
+        <h4>${pokemoncito.num}</h4>
+        <h1>${pokemoncito.name}</h1>
+        <h4>${pokemoncito.generation.name}</h4>
+        <p><b>Type:  </b><br>${pokemoncito.type}</p>
+        <p><b>Resistant:  </b><br>${pokemoncito.resistant} </p>
+        <p><b>Weaknesses:  </b><br>${pokemoncito.weaknesses} </p>
+      </div>`
+    )
+
+    document.getElementById("root").innerHTML=htmlPokemons
+});
+
+const changeInverse= document.getElementById("A-Z");
+changeInverse.addEventListener('click', (event) => {
+    const sortedPokemon = sortA(pokemones,event.target)
+    const htmlPokemons= sortedPokemon.map((pokemoncito) =>
+      `<div class="box">
+        <img src="${pokemoncito.img}" id="imgPoke">
+        <h4>${pokemoncito.num}</h4>
+        <h1>${pokemoncito.name}</h1>
+        <h4>${pokemoncito.generation.name}</h4>
+        <p><b>Type:  </b><br>${pokemoncito.type}</p>
+        <p><b>Resistant:  </b><br>${pokemoncito.resistant} </p>
+        <p><b>Weaknesses:  </b><br>${pokemoncito.weaknesses} </p>
+      </div>`
+    )
+
+    document.getElementById("root").innerHTML=htmlPokemons
+});
+
+