Laboratoria · macarenapazg · Feb 17, 2023 · Feb 19, 2023 · Feb 21, 2023 · Feb 21, 2023
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/Imagenespkm/Titulo.png b/src/Imagenespkm/Titulo.png
diff --git a/src/Imagenespkm/descarga-removebg-preview.png b/src/Imagenespkm/descarga-removebg-preview.png
diff --git a/src/Imagenespkm/imagenbanner.png b/src/Imagenespkm/imagenbanner.png
diff --git a/src/Imagenespkm/logo laboratoria.png b/src/Imagenespkm/logo laboratoria.png
diff --git a/src/Imagenespkm/pokebola.png b/src/Imagenespkm/pokebola.png
diff --git a/src/data.js b/src/data.js
@@ -1,9 +1,41 @@
-// estas funciones son de ejemplo
-
-export const example = () => {
-  return 'example';
+// import pokemon from "./data/pokemon/pokemon.js";
+// import { ObtenerPokemon } from "./main.js";
+export const filtrarPokemon = (tipo, data) => {
+  if(tipo === '') {return false}
+  //IF != all else ObtenerPokemon
+  if (tipo !== "all") {
+    // eslint-disable-next-line eqeqeq
+    const pokemonTipos = data.pokemon.filter((poke) => poke.type == tipo);
+    return pokemonTipos;
+  } else {
+    return data.pokemon
+  }
 };
 
-export const anotherExample = () => {
-  return 'OMG';
-};
+export function ordenarpoke(order, data) {
+  if(order === ''){return false}
+  if (order === "asc") {
+    return data.pokemon.sort((a, b) => {
+      if (a.name < b.name) return -1;
+      if (a.name > b.name) return 1;
+      return 0;
+    });
+  } else {
+    return data.pokemon.sort((a, b) => {
+      if (a.name > b.name) return -1;
+      if (a.name < b.name) return 1;
+      return 0;
+    });
+  }
+
+}
+
+export function calcularCP(calcular, data) {
+  if (calcular === "max") {
+    return data.pokemon.sort((a, b) => {
+      if (Number(a.stats["max-cp"]) > Number(b.stats["max-cp"])) return -1;
+      if (Number(a.stats["max-cp"]) < Number(b.stats["max-cp"])) return 1;
+      return a - b;
+    }).slice(0, 7);
+  }
+}
diff --git a/src/imagenespkm/descarga-removebg-preview.png b/src/imagenespkm/descarga-removebg-preview.png
diff --git a/src/index.html b/src/index.html
@@ -1,12 +1,61 @@
 <!DOCTYPE html>
-<html>
+<html lang="es">
   <head>
-    <meta charset="utf-8">
-    <title>Data Lovers</title>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="initial-scale=1">
+    <title>Bienvenidos a la Pokédex</title>
     <link rel="stylesheet" href="style.css" />
+    <link rel="shortcut icon" href="./imagenespkm/pokebola.png" type="image/x-icon">
   </head>
   <body>
+    <header id="banner">
+      <img src="./Imagenespkm/Titulo.png" class="Titulo" alt="Titulo" />
+      <img
+        src="./Imagenespkm/imagenbanner.png"
+        class="imagenpkm"
+        alt="bannerPkm"
+      />
+    </header>
+
+    <div id="selectores">
+    <select name="" id="tipos">
+      <option disabled selected>Selecciona algun tipo</option>
+      <option value="all">Todos</option>
+      <option value="bug">Bug</option>
+      <option value="dark">Dark</option>
+      <option value="dragon">Dragon</option>
+      <option value="electric">Electric</option>
+      <option value="fairy">Fairy</option>
+      <option value="fighting">Fighting</option>
+      <option value="fire">Fire</option>
+      <option value="flying">Flying</option>
+      <option value="ghost">Ghost</option>
+      <option value="grass">Grass</option>
+      <option value="ground">Ground</option>
+      <option value="ice">ice</option>
+      <option value="normal">Normal</option>
+      <option value="poison">Poison</option>
+      <option value="psychic">Psychic</option>
+      <option value="rock">Rock</option>
+      <option value="steel">Steel</option>
+      <option value="water">Water</option>
+    </select>
+
+    <select name="" id="ordenar">
+      <option disabled selected>Ordenar</option>
+      <option value="asc">Ordena de la A a la Z</option>
+      <option value="des">Ordena de la Z a la A</option>
+    </select>
+
+    <select name="" id="calcular">
+      <option disabled selected>Puntos de Combate</option>
+      <option value="max">Top 7</option>
+    </select>
+
+  </div>
     <div id="root"></div>
+
+    <div id="mostrarPoke"></div>
     <script src="main.js" type="module"></script>
   </body>
-</html>
+</html>
diff --git a/src/main.js b/src/main.js
@@ -1,6 +1,65 @@
-import { example } from './data.js';
-// import data from './data/lol/lol.js';
-import data from './data/pokemon/pokemon.js';
-// import data from './data/rickandmorty/rickandmorty.js';
+import data from "./data/pokemon/pokemon.js";
+import { filtrarPokemon, ordenarpoke, calcularCP } from "./data.js"; //se agrega la funcion ordenarpoke
+// import pokemon from "./data/pokemon/pokemon.js";
 
-console.log(example, data);
+const mostrarPoke = document.getElementById("mostrarPoke");
+
+//funcion para mostrar pokemon desde la data. nombre e imagen, que los divide en grupo
+export function ObtenerPokemon(data) {
+  data.forEach((pokemon) => {
+    mostrarPoke.innerHTML += `<div class="container">
+    <div class="card">
+      <div class="cardSuperior">
+      <div class="puntosComb"> CP: ${pokemon.stats["max-cp"]} </div>
+      <div class="numpkm">${pokemon.num} </div>
+      </div>
+          <img src="${pokemon.img}" class= "cardImg" alt="${pokemon.name}" ></img>
+          <h4>${pokemon.name} </h4>
+          <h5>${pokemon.type} </h5>
+          <p>${pokemon.about} </p>
+      </div>
+    </div>`;
+  });
+}
+
+ObtenerPokemon(data.pokemon); //argumento de tipo array
+
+const selectTipos = document.getElementById("tipos");
+
+selectTipos.addEventListener("change", function () {
+
+  const verPokemones = document.getElementById("mostrarPoke");
+  verPokemones.innerHTML = "";
+
+  const tipo = selectTipos.value;
+
+  const pokFiltrado = filtrarPokemon(tipo, data);
+  ObtenerPokemon(pokFiltrado);
+});
+
+// Ordenar Alfabeticamente 
+
+const selectOrdenar = document.getElementById("ordenar");
+selectOrdenar.addEventListener ("change", function (){
+  mostrarPoke.innerHTML = "";
+  const order = selectOrdenar.value ;
+  const pokOrdenado = ordenarpoke(order, data);
+  ObtenerPokemon(pokOrdenado);
+
+
+})
+
+
+// maximo y minimo cp
+
+const selectCalcular = document.getElementById("calcular");
+selectCalcular.addEventListener ("change", function(){
+  mostrarPoke.innerHTML = "";
+
+  const calcular = selectCalcular.value ;
+  const calcularPokeCP = calcularCP(calcular,data);
+  ObtenerPokemon(calcularPokeCP);
+
+
+
+})
diff --git a/src/style.css b/src/style.css
@@ -0,0 +1,181 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: "Poppins", sans-serif;
+}
+body {
+  background: #4da0b0;
+  background: -webkit-linear-gradient(to bottom, #d39d38, #4da0b0);
+  background: linear-gradient(to bottom, #d39d38, #4da0b0);
+}
+h4 {
+  text-transform: uppercase;
+  margin: 10px 10px 0px 10px; /*arriba derecha abajo */
+}
+p {
+  padding: 10px;
+}
+#banner {
+  background: -webkit-linear-gradient(to top, #d39d38, #4da0b0);
+  background: linear-gradient(to top, #d39d38, #4da0b0);
+  fallback: for old;
+  text-align: center;
+  width: 100%;
+  height: 420px;
+}
+*.Titulo {
+  height: 100px;
+  text-align: center;
+  position: relative;
+  top: 3px;
+}
+
+.imagenpkm {
+  display: block;
+  margin: auto;
+  position: relative;
+  top: -22px;
+  width: auto;
+  height: 323px;
+}
+#selectores {
+  text-align: center;
+  margin-top: 10px;
+  z-index: -1;
+}
+select {
+  background-color: #8dcac1;
+  border: thin solid #974845;
+  border-radius: 10px;
+  display: inline-block;
+  font: inherit;
+  line-height: 1.5em;
+  padding: 0.5em 3.5em 0.5em 1em;
+}
+.cardImg {
+  margin-top: 10px;
+}
+#mostrarpoke {
+  margin: 20px;
+  display: flex;
+  flex-direction: row;
+}
+.cardSuperior{
+  display: flex;
+}
+.puntosComb{
+  flex-direction: row;
+  text-align: left;
+  margin: 15px;
+  font-weight: bold;
+  color: #413827;
+  width: 150px;
+}
+.numpkm {
+  flex-direction: row-reverse;
+  text-align: right;
+  margin: 15px;
+  font-weight: bold;
+  color: #413827;
+  width: 150px;
+}
+
+.container {
+  background-color: #f2e17d;
+  width: 260px;
+  height: 380px;
+  text-align: center;
+  margin: 30px;
+  box-shadow: 0 10px 20px rgb(65, 56, 39);
+  border-radius: 15px;
+  float: left;
+}
+@media (max-width: 412px) {
+  .container {
+    border-radius: 25px dashed;
+    width: auto;
+    height: 323px;
+  }
+  .banner {
+    background: -webkit-linear-gradient(to top, #d39d38, #4da0b0);
+    background: linear-gradient(to top, #d39d38, #4da0b0);
+    fallback: for old;
+    text-align: center;
+    width: 100%;
+    height: 215px;
+  }
+  .imagenpkm {
+    display: flex;
+    margin: auto;
+    position: relative;
+    top: 0px;
+    width: auto;
+    height: 150px;
+  }
+  .Titulo {
+    height: 50px;
+    text-align: center;
+    position: relative;
+    top: 3px;
+    display: flex;
+  }
+
+}
+
+@media (max-width: 768px) {
+  .banner {
+    background: -webkit-linear-gradient(to top, #d39d38, #4da0b0);
+    background: linear-gradient(to top, #d39d38, #4da0b0);
+    fallback: for old;
+    text-align: center;
+    width: 100%;
+    height: 215px;
+  }
+  .imagenpkm {
+    display: flex;
+    margin: auto;
+    position: relative;
+    top: 0px;
+    width: auto;
+    height: 300px;
+  }
+  .Titulo {
+    height: 107px;
+    text-align: center;
+    position: relative;
+    top: 3px;
+    display: flex;
+  }
+
+}
+@media (max-width: 414px) {
+  #banner {
+    background: linear-gradient(to top, #d39d38, #4da0b0);
+    text-align: center;
+    width: 100%;
+    height: 235px;
+  }
+
+  #selectores {
+    text-align: center;
+    margin-left: -67px;
+    margin-right: 44px;
+  }
+  .imagenpkm {
+    display: flex;
+    margin: auto;
+    position: relative;
+    top: 9px;
+    height: 170px;
+    width: 294px;
+  }
+  .Titulo {
+    height: 39px;
+    text-align: center;
+    position: relative;
+    top: 3px;
+    display: flex;
+  }
+
+}