Laboratoria · paolandre · May 13, 2023 · May 15, 2023 · May 15, 2023 · May 15, 2023
diff --git a/README.md b/README.md
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -31,4 +31,4 @@
     "version": "6.2.0",
     "commit": "a5360f78b634be4f14eaea996ee4c7afc85a2f48"
   }
-}
+}
diff --git a/src/Logo de pokemon.png b/src/Logo de pokemon.png
diff --git a/src/data.js b/src/data.js
@@ -1,9 +1,37 @@
-// estas funciones son de ejemplo
-
-export const example = () => {
-  return 'example';
+// --------------------------- HISTORIA DE USUARIO 2: Creación de la función del filtro
+export const filtroPokemones = (data, propiedad) => {
+  //La función toma dos argumentos: "data", que representa un objeto de datos que contiene información sobre los pokémones, y "propiedad", que es el tipo de pokémon que se desea filtrar
+  const result = data.pokemon.filter((pokemon) => {
+    //se crea una variable que se llama resultado para poner los pokemones filtrados en un nuevo arreglo.
+    // con el metodo se entra a la data, al objeto pokemon y luego se filtran los pokemones
+    // console.log(pokemon.type);
+    return pokemon.type.includes(propiedad); //el .includes nos sirve para determinar si el objeto filtrado contiene la propiedad especificada y devuelve un true si la contiene
+    //este return nos sirve para determinar si el pokemon filtrado corresponde al tipo/valor que seleccionamos. Si retorna true, continua al siguiente return y se suman al arreglo nuevo de la variable resultado
+  });
+  // console.log(result);
+  return result; // se retorna el array result que contiene los pokémones filtrados
 };
 
-export const anotherExample = () => {
-  return 'OMG';
+//----------------------------------- HISTORIA DE USUARIO 3: Creación de la función de ordenamiento
+export const ordenarPokemones = (dataPokemon, sortOrder) => { //dataPokemon y sortOrder son los parametros que debe recibir
+  dataPokemon.sort(function (a, b) { //empleando método .sort y haciendo una comparación (a,b)
+    const lowerCatchRate = a.encounter["base-capture-rate"]; //trayendo las propiedades que utilizaremos -> encounter: base-capture-rate
+    //console.log('resultado 1', lowerCatchRate);
+    const higherCatchRate = b.encounter["base-capture-rate"];
+    //console.log('resultado 2', higherCatchRate); 
+    if (sortOrder === "from-lower-to-higher") {
+      if (lowerCatchRate > higherCatchRate) //filtro ascendente - si se selecciona de  menor a mayor probabilidad de captura
+        return -1; //-1 indica los últimos índices del array
+      if (lowerCatchRate < higherCatchRate)
+        return 1; //1 indica los primeros índices del array
+    } else if (sortOrder === "from-higher-to-lower") {
+      if (lowerCatchRate < higherCatchRate) //filtro descendente - si se selecciona de mayor a menor probabilidad de captura
+        return -1;
+      if (lowerCatchRate > higherCatchRate)
+        return 1;
+    }
+    return 0;
+  });
+  return dataPokemon; //se retorna el array ordenado
+  //console.log(dataPokemon);
 };
diff --git a/src/index.html b/src/index.html
@@ -1,12 +1,83 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <meta charset="utf-8">
+    <meta charset="utf-8" />
     <title>Data Lovers</title>
     <link rel="stylesheet" href="style.css" />
   </head>
+
   <body>
-    <div id="root"></div>
+    <!-- Titulo -->
+    <header>
+      <div class="container_titulo">
+        <img
+          id="imagenLogoPokemon"
+          class="logoPokemon"
+          src="Logo de pokemon.png"
+          alt="Logo Pokémon"
+        />
+      </div>
+    </header>
+
+    <!-- Encabezado principal -->
+    <section>
+      <p class="principal_parrafo" id="principal_parrafo">
+        Welcome to this page, where you can find information on 251 different
+        Pokémon along with some basic details. You have the option to filter
+        them by their type and sort them in ascending or descending order based
+        on the probability of capturing them. Additionally, you can easily
+        calculate the average weight and height of each Pokémon on this page.
+      </p>
+    </section>
+
+    <!-- Contenedor de botones -->
+    <div class="container_botones_principal" id="container_botones_principal">
+      <!-- --------------------------- HISTORIA DE USUARIO 2 (filtro)--------------------------- -->
+      <select
+        id="lista-desplegable-filtrar"
+        style="display: block"
+        class="boton"
+      >
+        <option>Filter</option>
+        <option value="show-all">All Types</option>
+        <option value="normal">Normal</option>
+        <option value="fire">Fire</option>
+        <option value="water">Water</option>
+        <option value="grass">Grass</option>
+        <option value="electric">Electric</option>
+        <option value="ice">Ice</option>
+        <option value="fighting">Fighting</option>
+        <option value="poison">Poison</option>
+        <option value="ground">Ground</option>
+        <option value="flying">Flying</option>
+        <option value="psychic">Psychic</option>
+        <option value="bug">Bug</option>
+        <option value="rock">Rock</option>
+        <option value="ghost">Ghost</option>
+        <option value="dragon">Dragon</option>
+        <option value="dark">Dark</option>
+        <option value="steel">Steel</option>
+        <option value="fairy">Fairy</option>
+      </select>
+
+      <!-- --------------------------- HISTORIA DE USUARIO 3 (ordenamiento)--------------------------- -->
+      <select
+        id="lista-desplegable-ordenar"
+        style="display: block"
+        class="boton"
+      >
+        <option>Order</option>
+        <option value="from-lower-to-higher">
+          From lower to higher catch rate
+        </option>
+        <option value="from-higher-to-lower">
+          From higher to lower catch rate
+        </option>
+      </select>
+    </div>
+    <!-- --------------------------- HISTORIA DE USUARIO 1 (visualización)--------------------------- -->
+    <div id="contenedor_pokemones" class="contenedor_pokemones"></div>
+
     <script src="main.js" type="module"></script>
   </body>
 </html>
diff --git a/src/main.js b/src/main.js
@@ -1,6 +1,98 @@
-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 { filtroPokemones, ordenarPokemones } from "./data.js";
+import data from "./data/pokemon/pokemon.js";
+
+//Declaramos variables que vamos a usar
+const pokemones = data.pokemon;
+const contenedorPokemones = document.getElementById("contenedor_pokemones");
+const logoPokemon = document.getElementById("imagenLogoPokemon");
+
+// Refrescar la página al hacer clic en la imagen del logo
+logoPokemon.addEventListener("click", () => {
+  //al hacer click en el logo que trajimos arriba con la id se recarga la página
+  location.reload(); //-reload se usa para recargar la página
+});
+
+// --------------------------- HISTORIA DE USUARIO 1 : Creación de la función de la tarjeta de pokemones para reusarla después
+const tarjetaPokemon = (pokemon) => {
+  //se extraen las propiedades del objeto pokemon con la función flecha
+  const img = pokemon.img;
+  const name = pokemon.name;
+  const height = pokemon.size.height;
+  const weight = pokemon.size.weight;
+  const type = pokemon.type.join(", "); // .join sirve para poner elementos entre los elementos del array
+  const baseCaptureRate = pokemon.encounter["base-capture-rate"]; // también se puede acceder a una propiedad específica dentro del objeto mediante los []. La notación de corchetes es útil cuando el nombre de la propiedad es dinámico o cuando contiene caracteres especiales, como espacios o guiones.
+
+  const card = document.createElement("div"); //.createElement sirve para crear un div que contiene la tarjeta del pokémon.
+  card.className = "pokemon-card"; //Se asigna la clase "pokemon-card" al elemento de la tarjeta para modificar en CSS
+  card.innerHTML = ` 
+    <img src="${img}" alt="${name}">
+    <h3>${name}</h3> 
+    <div class="cardp">
+        <p>Height: ${height}</p>
+        <p>Weight: ${weight}</p>
+        <p>Base Capture Rate: ${baseCaptureRate}</p>
+        <p class= "type">Type: ${type}</p>
+    </div>
+  `;
+  //Establecemos el contenido de la tarjeta con .innerHTML
+  //los ${template string} permiten que se inserte el valor original dela propiedad
+  return card; //Aquí retornamos el elemento de la tarjeta creado
+};
+
+// Visualización de los pokemones con el método .forEach
+pokemones.forEach((pokemon) => {
+  //se usa el metodo forEach para ir por cada pokemon y ejecutar la función que los muestra
+  const card = tarjetaPokemon(pokemon);
+  contenedorPokemones.appendChild(card);
+  //appendChild se usa para mostrar la tarjeta en el html (contenedor_pokemones)
+  //el forEach hace que el proceso de crear una tarjeta se repita con cada pokemon
+  //la tarjeta creada la traemos de data.js
+});
+
+// --------------------------- HISTORIA DE USUARIO 2: Filtro de pokemones
+/*const pokemonesGrass = filtroPokemones(data, "grass"); console.log(pokemonesGrass); esto nos sirve para comprobar que funciona el filtro*/
+
+const valoresLista = document.getElementById("lista-desplegable-filtrar");
+//los valores son los tipos de pokemon y se toman de la lista desplegable de html
+
+valoresLista.addEventListener("change", () => {
+  //cuando se hace un cambio en la lista-desplegable-filtrar se ejecuta la función flecha
+  const valorSeleccionado = valoresLista.value; // se obtiene el valor seleccionado .value
+
+  if (valorSeleccionado === "show-all") {
+    // si se selecciona el valor de show-all se ejecuta el metodo de forEach para mostrar todas las tarjetas con todos los pokemones
+    contenedorPokemones.innerHTML = "";
+    pokemones.forEach((pokemon) => {
+      const card = tarjetaPokemon(pokemon);
+      contenedorPokemones.appendChild(card);
+    });
+  } else {
+    // Si no se selecciona el valor de show-all, entonces se filtran los pokemones por el valor seleccionado
+    const pokemonesFiltrados = filtroPokemones(data, valorSeleccionado);
+    contenedorPokemones.innerHTML = ""; //se debe dejar el contenedor vacio siempre para que no se sobre escriban los datos de las nuevas funciones
+    pokemonesFiltrados.forEach((pokemon) => {
+      //la función forEach se ejecuta para mostrar las tarjetas
+      const card = tarjetaPokemon(pokemon);
+      contenedorPokemones.appendChild(card);
+    });
+  }
+});
+
+//----------------------------------- HISTORIA DE USUARIO 3: Filtro de ordenamiento
+
+const ordenarValores = document.getElementById("lista-desplegable-ordenar");
+ordenarValores.addEventListener("change", () => {
+  const valoresOrdenados = ordenarValores.value; //obteniendo el valor seleccionado .value
+  ordenarPokemones(pokemones, valoresOrdenados); //llamando la función ordenarPokemones, pasando como argumento pokemones (donde está la data) y donde se guardó el valor seleccionado
+
+  if (valoresOrdenados === "from-lower-to-higher" || valoresOrdenados === "from-higher-to-lower") {
+    contenedorPokemones.innerHTML = "";
+    data.pokemon.forEach((pokemon) => { //recorriendo el arreglo original data.pokemon 
+      const card = tarjetaPokemon(pokemon);
+      contenedorPokemones.appendChild(card);
+    });
+  }
+});
+
+
 
-console.log(example, data);
diff --git a/src/style.css b/src/style.css
@@ -0,0 +1,145 @@
+body {
+  background-color: #1a2234;
+  font-family: sans-serif;
+}
+
+.container_titulo {
+  text-align: center;
+  padding: 20px;
+}
+
+.logoPokemon {
+  width: 266px;
+  height: 93px;
+  text-align: center;
+  cursor: pointer;
+}
+
+.principal_parrafo {
+  padding: 20px;
+  padding-left: 50px;
+  padding-right: 50px;
+  color: white;
+  line-height: 1.5;
+  font-size: 16px;
+}
+
+.container_botones_principal {
+  justify-content: center;
+  text-align: center;
+  display: flex;
+  gap: 30px;
+  padding: 20px;
+}
+
+button {
+  background-color: #fffc0f;
+  color: #1a2234;
+  border: hidden;
+  border-radius: 10px;
+  padding: 5px 30px;
+  font-weight: bold;
+  height: 32px;
+  width: 170px;
+  font-size: 16px;
+  box-shadow: 0px 0px 10px #0d0e0e;
+  cursor: pointer;
+}
+
+button:hover {
+  background-color: #4776fa;
+}
+
+select {
+  /*lista desplegable*/
+  background-color: #fffc0f;
+  text-align: center;
+  color: #1a2234;
+  border: hidden;
+  border-radius: 10px;
+  font-weight: bold;
+  height: 32px;
+  width: 260px;
+  font-size: 16px;
+  box-shadow: 0px 0px 10px #0d0e0e;
+  cursor: pointer;
+
+  /* Para quitar la flecha de la lista*/
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  display: none;
+}
+
+/* Para quitar la primera opción de la lista desplegable (select)*/
+select option:first-child {
+  display: none;
+}
+
+select option {
+  /* Para cambiar el color de la lista desplegable*/
+  background-color: #f0ee8b;
+  box-shadow: 0px 0px 10px #0d0e0e;
+}
+
+/*--------------------------- HISTORIA DE USUARIO 1 (visualización)---------------------------*/
+/* Tarjeta de cada Pokemon*/
+.pokemon-card {
+  width: 252px;
+  height: 250px;
+  background-color: #354058;
+  border-radius: 10px;
+  padding-bottom: 5px;
+  padding-top: 40px;
+  margin-bottom: 40px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  text-align: left;
+  padding-bottom: 50px;
+  box-shadow: 0px 0px 10px #0d0e0e;
+}
+
+.pokemon-card:hover {
+  box-shadow: 0 4rem 4rem rgba(0.5, 0.5, 0.5, 0.5);
+}
+
+.pokemon-card img {
+  width: 150px;
+  height: 150px;
+  padding-top: 40px;
+}
+
+.pokemon-card h3 {
+  margin-top: 10px;
+  font-size: 18px;
+  text-align: center;
+  font-weight: bold;
+}
+
+.pokemon-card p {
+  margin: 5px 0;
+  font-size: 14px;
+  width: 100%;
+}
+
+.cardp {
+  background-color: #283248;
+  padding: 25px;
+  padding-right: 100px;
+  border-radius: 10px;
+}
+
+/*Contenedor de pokemones*/
+.contenedor_pokemones {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-evenly;
+  color: white;
+  padding: 30px;
+}
+
+/*--------------------------- HISTORIA DE USUARIO 2 (filtro)---------------------------*/
+.boton:hover {
+  background-color: #4776fa;
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -31,4 +31,4 @@ @@
         "version": "6.2.0",
         "commit": "a5360f78b634be4f14eaea996ee4c7afc85a2f48"
       }
-    }
+    }