Laboratoria · PenLogos · Sep 12, 2023 · Sep 12, 2023 · Sep 13, 2023 · Sep 13, 2023
diff --git a/docs/data/pokemon/pokemon.js b/docs/data/pokemon/pokemon.js
diff --git a/docs/data/pokemon/pokemon.json b/docs/data/pokemon/pokemon.json
diff --git a/docs/dataFunctions.js b/docs/dataFunctions.js
@@ -0,0 +1,16 @@
+// estas funciones son de ejemplo
+
+export const dataFilter = (data, filterBy, value) => {
+  const filter = data.filter((element)=>{
+    return element[filterBy].includes(value)
+  })
+  return filter;
+};
+
+// export const anotherExample = (data, filterBy, value) => {
+//   //const optionPokemonTypeSelected = data.filter(type => type === type.grass); 
+//   const filter = data.filter((element)=>{
+//     return element[filterBy] == value
+//   })
+//   return filter;
+// };
diff --git a/docs/imagenes/Fondo tarjeta panorámica.jpg b/docs/imagenes/Fondo tarjeta panorámica.jpg
diff --git a/docs/imagenes/Fondo2-tarjeta.jpg b/docs/imagenes/Fondo2-tarjeta.jpg
diff --git a/docs/imagenes/Img-pokemonType/bug.png b/docs/imagenes/Img-pokemonType/bug.png
diff --git a/docs/imagenes/Img-pokemonType/dark.png b/docs/imagenes/Img-pokemonType/dark.png
diff --git a/docs/imagenes/Img-pokemonType/dragon.png b/docs/imagenes/Img-pokemonType/dragon.png
diff --git a/docs/imagenes/Img-pokemonType/electric.png b/docs/imagenes/Img-pokemonType/electric.png
diff --git a/docs/imagenes/Img-pokemonType/fairy.png b/docs/imagenes/Img-pokemonType/fairy.png
diff --git a/docs/imagenes/Img-pokemonType/fighting.png b/docs/imagenes/Img-pokemonType/fighting.png
diff --git a/docs/imagenes/Img-pokemonType/fire.png b/docs/imagenes/Img-pokemonType/fire.png
diff --git a/docs/imagenes/Img-pokemonType/flying.png b/docs/imagenes/Img-pokemonType/flying.png
diff --git a/docs/imagenes/Img-pokemonType/ghost.png b/docs/imagenes/Img-pokemonType/ghost.png
diff --git a/docs/imagenes/Img-pokemonType/grass.png b/docs/imagenes/Img-pokemonType/grass.png
diff --git a/docs/imagenes/Img-pokemonType/ground.png b/docs/imagenes/Img-pokemonType/ground.png
diff --git a/docs/imagenes/Img-pokemonType/ice.png b/docs/imagenes/Img-pokemonType/ice.png
diff --git a/docs/imagenes/Img-pokemonType/normal.png b/docs/imagenes/Img-pokemonType/normal.png
diff --git a/docs/imagenes/Img-pokemonType/poison.png b/docs/imagenes/Img-pokemonType/poison.png
diff --git a/docs/imagenes/Img-pokemonType/psychic.png b/docs/imagenes/Img-pokemonType/psychic.png
diff --git a/docs/imagenes/Img-pokemonType/rock.png b/docs/imagenes/Img-pokemonType/rock.png
diff --git a/docs/imagenes/Img-pokemonType/steel.png b/docs/imagenes/Img-pokemonType/steel.png
diff --git a/docs/imagenes/Img-pokemonType/water.png b/docs/imagenes/Img-pokemonType/water.png
diff --git a/docs/imagenes/Pokemon-img.svg b/docs/imagenes/Pokemon-img.svg
diff --git a/docs/imagenes/candy.png b/docs/imagenes/candy.png
diff --git a/docs/imagenes/headerImage.jpg b/docs/imagenes/headerImage.jpg
diff --git a/docs/index.html b/docs/index.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Data Lovers</title>
+    <link rel="stylesheet" href="style.css" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Titillium+Web&display=swap"
+      rel="stylesheet"
+    />
+  </head>
+
+  <body>
+    <header>
+      <h1>BienvenidX a App</h1>
+    </header>
+    <main class="filters">
+      <h2>Encuentra cualquier <img class="pokemon-h2" src="imagenes/Pokemon-img.svg" alt="pokemon-logo"> de las regiones de Kanto y Johto</h2>
+      <label name="row2" class="choose" for="search-by-name">
+        Elige los criterios de búsqueda para comenzar
+        <input type="text" placeholder="busca por nombre de pokémon" />
+      </label>
+      <label name="row2" for="boton-limpiar"><button data-testid="button-clear">Limpiar</button></label>
+      <div>
+        <p class="color"> Filtrar por:</p>
+      <label class="filter" for="type">
+        Tipo
+        <select name="type" data-testid="select-filter" id="type">
+          <option>Todos</option>
+        </select>
+      </label>
+      <label class="filter" for="resistant-to">
+        Resiste a
+        <select name="resistant-to" data-testid="select-filter" id="resistant-to">
+          <option>Sin filtro</option>
+        </select>
+      </label>
+      <label class="filter" for="weak-to">
+        Débil a
+        <select name="weak-to" data-testid="select-filter" id="weak-to">
+          <option>Sin filtro</option>
+        </select>
+      </label>
+      <label for="order-by">
+        Ordenar por
+        <select name="order-by" data-testid="select-sort" id="order-by">
+          <option value="spawnChance">Tasa de aparición</option>
+          <option value="costEvolution">Costo de evolución</option>
+        </select>
+      </label>
+      <label for="change-order-asc"
+        ><input type="radio" name="sort-order" value="asc" id="change-order-asc" />Ascendente</label
+      >
+      <label for="change-order-desc"
+        ><input type="radio" name="sort-order" value="desc" id="change-order-desc" />Descendente</label
+      >
+    </div>
+    </main>
+    <section id="root">
+      <ul class="contenedor"></ul>
+    </section>
+    <footer>Desarrollado por Grecia Mendieta y Penélope Logos|2023</footer>
+    <script src="main.js" type="module"></script>
+  </body>
+</html>
diff --git a/docs/main.js b/docs/main.js
@@ -0,0 +1,82 @@
+import { dataFilter } from "./dataFunctions.js";
+import { renderItems } from "./view.js";
+
+import data from "./data/pokemon/pokemon.js";
+
+const selectPokemon = data.pokemon;
+const selectFilterType = document.querySelector("select[name=type]");
+const selectFilterResistant = document.querySelector("select[name=resistant-to]");
+const selectFilterWeakness = document.querySelector("select[name=weak-to]");
+const selectFilterName = document.querySelector("input[type=text]");
+const cardContainer = document.querySelector(".contenedor");
+
+const arrayTypeValues = Object.values(selectPokemon).flatMap(
+  (item) => item.type
+);
+
+const cleanArrayTypeValues = arrayTypeValues.filter((value, index, self) => {
+  return self.indexOf(value) === index;
+});
+
+function createOption(value) {
+  const optionType = document.createElement("option");
+  selectFilterType.appendChild(optionType);
+  optionType.innerHTML = value;
+  optionType.setAttribute("class", "type-filter");
+  optionType.setAttribute("value", optionType.value);
+  const optionResistant = document.createElement("option");
+  selectFilterResistant.appendChild(optionResistant);
+  optionResistant.innerHTML = value;
+  optionResistant.setAttribute("value", optionResistant.value);
+  const optionWeakness = document.createElement("option");
+  selectFilterWeakness.appendChild(optionWeakness);
+  optionWeakness.innerHTML = value;
+  optionWeakness.setAttribute("value", optionWeakness.value);
+}
+
+selectPokemon.forEach(renderItems);
+
+cleanArrayTypeValues.forEach(createOption);
+
+const filteredResults = {
+  type: [],
+  resistant: [],
+  weaknesses: [],
+};
+
+const applyFilter = (filterName, selectedValue) => {
+  selectFilterName.value = "";
+  filteredResults[filterName] = dataFilter(selectPokemon, filterName, selectedValue);
+  cardContainer.innerHTML = "";
+  let filterIntersection = [...selectPokemon];
+  for (const filter in filteredResults) {
+    if (filteredResults[filter].length > 0) {
+      filterIntersection = filterIntersection.filter((element) =>
+        filteredResults[filter].includes(element)
+      );
+    }
+  }
+  if (filterIntersection.length > 0) {
+    filterIntersection.forEach(renderItems);
+  } else {
+    const noResults = document.createElement("p");
+    cardContainer.appendChild(noResults);
+    noResults.setAttribute("class", "message")
+    noResults.innerHTML = "No hay pokemones así por atrapar, sigue buscando"
+  }
+};
+selectFilterType.addEventListener("change", () => {
+  applyFilter("type", selectFilterType.value);
+});
+selectFilterResistant.addEventListener("change", () => {
+  applyFilter("resistant", selectFilterResistant.value);
+});
+selectFilterWeakness.addEventListener("change", () => {
+  applyFilter("weaknesses", selectFilterWeakness.value);
+});
+selectFilterName.addEventListener("change", () => {
+  const resultFilterName = dataFilter(selectPokemon, "name", selectFilterName.value);
+  cardContainer.innerHTML = "";
+  resultFilterName.forEach(renderItems);
+});
+