Laboratoria · gfielstedt · Nov 18, 2022 · Nov 18, 2022 · Dec 6, 2022 · Dec 6, 2022
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,56 @@
 // estas funciones son de ejemplo
 
-export const example = () => {
-  return 'example';
-};
+export const filterType = (data, selectedType) => {
+  const filteredData = data.filter(pokemon => pokemon.type.includes(selectedType))
+  return filteredData
+}
 
-export const anotherExample = () => {
-  return 'OMG';
+export const filterGen = (data, gen) => {
+  const filteredData = data.filter((pokemon) => {
+    if (gen === 'gen-1') {
+      return pokemon.num <= 151;
+    } else if (gen === "gen-2") {
+      return pokemon.num > 151;
+    } else {
+      return data
+    }
+  });
+  return filteredData
 };
+
+export const sort = (data, sortBy, sortOrder) => {
+  let sortData
+  if (sortOrder === 'A-Z') {
+    sortData = data.sort((pokemonA, pokemonB) => {
+      if (pokemonA[sortBy] < pokemonB[sortBy]) {
+        return -1;
+      }
+      else if (pokemonA[sortBy] > pokemonB[sortBy]) {
+        return 1;
+      } else {
+        return 0;
+      }
+    })
+    return sortData
+  } else if (sortOrder === 'Z-A') {
+    sortData = data.sort((pokemonA, pokemonB) => {
+      if (pokemonA[sortBy] < pokemonB[sortBy]) {
+        return 1;
+      }
+      else if (pokemonA[sortBy] > pokemonB[sortBy]) {
+        return -1;
+      } else {
+        return 0;
+      }
+    })
+    return sortData
+  } else {
+    return data
+  }
+}
+export const computeStats = (data, type, total) => {
+  const pokemon = data.filter(pokemon => pokemon.type.includes(type));
+  const numberOfPokemon = pokemon.length;
+  const percent = (numberOfPokemon / total ) * 100;
+  return [numberOfPokemon, percent.toFixed(2)]
+}
diff --git a/src/index.html b/src/index.html
@@ -1,12 +1,76 @@
 <!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>
-</html>
+
+<head>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta charset="utf-8">
+  <title>Data Lovers</title>
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+
+  <link rel="stylesheet" href="style.css" />
+</head>
+
+<body>
+
+  <div class="img">
+    <img id="img" src="media/barra-pokemon.jpeg" alt="">
+  </div>
+
+  <header>
+    <nav>
+      <div class="nav-1"> 
+
+        <select id="select-generation">
+          <option value="gen">Generation I &#38; II</option>
+          <option value="gen-1">Generation I</option>
+          <option value="gen-2">Generation II</option>
+        </select>
+
+        <select id="select-type">
+          <option value="type">SelectType</option>
+          <option value="normal">Normal</option>
+          <option value="water">Agua</option>
+          <option value="grass">Hierba</option>
+          <option value="bug">Bicho</option>
+          <option value="electric">Electrico</option>
+          <option value="fairy">Hada</option>
+          <option value="fighting">Lucha</option>
+          <option value="flying">Volador</option>
+          <option value="ghost">Fantasma</option>
+          <option value="ground">Tierra</option>
+          <option value="ice">Hielo</option>
+          <option value="fire">Fuego</option>
+          <option value="poison">Veneno</option>
+          <option value="psychic">Psiquico</option>
+          <option value="rock">Roca</option>
+          <option value="steel">Acero</option>
+          <option value="dark">Siniestro</option>
+          <option value="dragon">Dragon</option>
+        </select>
+
+        <select id="select-sort">
+          <option value="A-Z">Sort A-Z</option>
+          <option value="Z-A">Sort Z-A</option>
+        </select>
+
+        <button id="Statistic">Statistic</button>
+      </div>
+    </nav>
+  </header>
+
+  <main>
+    <div class="cardsContainer" id="cardsContainer"></div>
+    <div id="table-container"></div>
+  </main>
+
+  <footer>
+    <div class="img">
+      <img id="img2" src="media/barra-pokemon.jpeg" alt="">
+    </div>
+  </footer>
+
+
+  <script src="main.js" type="module"></script>
+</body>
+
+</html>
diff --git a/src/main.js b/src/main.js
@@ -1,6 +1,210 @@
-import { example } from './data.js';
-// import data from './data/lol/lol.js';
+import {
+  filterGen, filterType, sort, computeStats
+} from './data.js';// import data from './data/lol/lol.js';
 import data from './data/pokemon/pokemon.js';
-// import data from './data/rickandmorty/rickandmorty.js';
 
-console.log(example, data);
+
+
+
+const cardsContainer = document.getElementById("cardsContainer")
+const tableContainer = document.getElementById("table-container")
+const dataPokemon = data.pokemon
+
+const displeyCard = (d) => {
+  cardsContainer.innerHTML = ` `;
+  tableContainer.innerHTML = ` `;
+  d.forEach(element => {
+
+    const cardPokemon = document.createElement("div")
+
+    cardPokemon.innerHTML += ` <section class= "flex-cont"> <section class= "flex-box">
+        <img src ="${element.img}">
+        <p>${element.name}</p>
+        <p>${element.num}</p></div>
+        </section>
+        </section>
+
+        `
+    cardsContainer.appendChild(cardPokemon);
+
+  })
+}
+
+displeyCard(dataPokemon)
+
+const displayStats = () => {
+  tableContainer.innerHTML = ` `;
+  cardsContainer.innerHTML = ` `;
+
+  const tablePokemon = document.createElement("table")
+
+  tablePokemon.innerHTML += `
+    <tr class="tabla">
+        <th>tipo</th>
+        <th>cantidad</th>
+        <th>porcentaje</th>
+      </tr>
+
+      <tr>
+        <td>Normal</td>
+        <td>${computeStats(dataPokemon, 'normal', 251)[0]}</td>
+        <td>${computeStats(dataPokemon, 'normal', 251)[1]} %</td>
+      </tr>
+
+      <tr>
+        <td>Agua</td>
+        <td>${computeStats(dataPokemon, 'water', 251)[0]}</td>
+        <td>${computeStats(dataPokemon, 'water', 251)[1]}%</td>
+      </tr>
+
+      <tr>
+        <td>Hierba</td>
+        <td>${computeStats(dataPokemon, 'grass',251)[0]}</td>
+        <td>${computeStats(dataPokemon, 'grass', 251)[1]}%</td>
+      </tr>
+
+      <tr>
+        <td>Bicho</td>
+        <td>${computeStats(dataPokemon, 'bug', 251)[0]}</td>
+        <td>${computeStats(dataPokemon, 'bug', 251)[1]}%</td>
+      </tr>
+
+      <tr>
+        <td>Electrico</td>
+        <td>${computeStats(dataPokemon, 'electric', 251)[0]}</td>
+        <td>${computeStats(dataPokemon, 'electric', 251)[1]}%</td>
+      </tr>
+
+      <tr>
+        <td>Hada</td>
+        <td>${computeStats(dataPokemon, 'fairy', 251)[0]}</td>
+        <td>${computeStats(dataPokemon, 'fairy', 251)[1]}%</td>
+      </tr>
+
+      <tr>
+        <td>Lucha</td>
+        <td>${computeStats(dataPokemon, 'fighting', 251)[0]}</td>
+        <td>${computeStats(dataPokemon, 'fighting', 251)[1]}%</td>
+      </tr>
+
+      <tr>
+        <td>Volador</td>
+        <td>${computeStats(dataPokemon, 'flying', 251)[0]}</td>
+        <td>${computeStats(dataPokemon, 'flying', 251)[1]}%</td>
+      </tr>
+
+      <tr>
+        <td>Fantasma</td>
+        <td>${computeStats(dataPokemon, 'ghost', 251)[0]}</td>
+        <td>${computeStats(dataPokemon, 'ghost', 251)[1]}%</td>
+      </tr>
+
+      <tr>
+        <td>Tierra</td>
+        <td>${computeStats(dataPokemon, 'ground', 251)[0]}</td>
+        <td>${computeStats(dataPokemon, 'ground', 251)[1]}%</td>
+      </tr>
+
+      <tr>
+        <td>Hielo</td>
+        <td>${computeStats(dataPokemon, 'ice', 251)[0]}</td>
+        <td>${computeStats(dataPokemon, 'ice', 251)[1]}%</td>
+      </tr>
+
+      <tr>
+        <td>Fuego</td>
+        <td>${computeStats(dataPokemon, 'fire', 251)[0]}</td>
+        <td>${computeStats(dataPokemon, 'fire', 251)[1]}%</td>
+      </tr>
+
+      <tr>
+        <td>Veneno</td>
+        <td>${computeStats(dataPokemon, 'poison', 251)[0]}</td>
+        <td>${computeStats(dataPokemon, 'poison', 251)[1]}%</td>""
+      </tr>
+
+      <tr>
+        <td>Psiquico</td>
+        <td>${computeStats(dataPokemon, 'psychic', 251)[0]}</td>
+        <td>${computeStats(dataPokemon, 'psychic', 251)[1]}%</td>
+      </tr>
+
+      <tr>
+        <td>Roca</td>
+        <td>${computeStats(dataPokemon, 'rock', 251)[0]}</td>
+        <td>${computeStats(dataPokemon, 'rock', 251)[1]}%</td>
+      </tr>
+
+      <tr>
+        <td>Acero</td>
+        <td>${computeStats(dataPokemon, 'steel', 251)[0]}</td>
+        <td>${computeStats(dataPokemon, 'steel', 251)[1]}%</td>
+      </tr>
+
+      <tr>
+        <td>Siniestro</td>
+        <td>${computeStats(dataPokemon, 'dark', 251)[0]}</td>
+        <td>${computeStats(dataPokemon, 'dark', 251)[1]}%</td>
+      </tr>
+
+      <tr>
+        <td>dragon</td>
+        <td>${computeStats(dataPokemon, 'dragon', 251)[0]}</td>
+        <td>${computeStats(dataPokemon, 'dragon', 251)[1]}%</td>
+      </tr>
+
+        `
+  tableContainer.appendChild(tablePokemon);
+}
+
+
+
+//filter
+let generation
+let generationI = filterGen(dataPokemon, "gen-1")
+let generationII = filterGen(dataPokemon, "gen-2")
+
+
+const selectGeneration = document.getElementById('select-generation')
+selectGeneration.addEventListener('change', (event) => {
+  generation = event.target.value;
+  if (event.target.value === 'gen-1') {
+    displeyCard(generationI)
+  } else if (event.target.value === 'gen-2') {
+    displeyCard(generationII)
+  } else {
+
+    displeyCard(dataPokemon)
+  }
+})
+
+const selectType = document.getElementById('select-type')
+selectType.addEventListener('change', (event) => {
+  let typeSelected = event.target.value;
+  let filteredPokemon = filterType(dataPokemon, typeSelected)
+  if (generation === 'gen-1') {
+    let filteredTypeAndGenI = filterType(generationI, typeSelected)
+    displeyCard(filteredTypeAndGenI)
+  } else if (generation === 'gen-2') {
+    let filteredTypeAndGenII = filterType(generationII, typeSelected)
+    displeyCard(filteredTypeAndGenII)
+  } else {
+    displeyCard(filteredPokemon)
+
+  }
+
+})
+
+const selectSort = document.getElementById('select-sort')
+selectSort.addEventListener('change', (event) => {
+  let sortSelected = event.target.value;
+  let sortPokemon = sort(dataPokemon, "name", sortSelected)
+
+  displeyCard(sortPokemon)
+
+})
+const buttonStats = document.getElementById('Statistic')
+buttonStats.addEventListener('click', () => {
+  displayStats()
+})
+
diff --git a/src/media/barra-pokemon.jpeg b/src/media/barra-pokemon.jpeg