Skip to content

Commit 9d2e824

Browse files
PaugdevPaugdev
authored
Merge pull request #2 from Paugdev/rama1
Rama1
2 parents 7272ae6 + 1cd83ad commit 9d2e824

15 files changed

+348
-44
lines changed

‎src/dataFunctions.js‎

Lines changed: 35 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,43 @@
11
// estas funciones son de ejemplo
22

33
export const example = () => {
4-
return 'example';
4+
return "example";
55
};
66

77
export const anotherExample = () => {
88
return [];
99
};
10+
11+
export const filterByType = (pokemons, value) => {
12+
const pokemonsByType = pokemons.filter((pokemon) =>
13+
pokemon.type.includes(value)
14+
);
15+
return pokemonsByType;
16+
};
17+
18+
export const filterByResistant = (pokemons, value) => {
19+
const pokemonsByResistant = pokemons.filter((pokemon) =>
20+
pokemon.resistant.includes(value)
21+
);
22+
return pokemonsByResistant;
23+
};
24+
25+
/*investigar método filter y aplicar a data
26+
filterBy, valor para filtrar (nombre,tipo)
27+
value, condición que se cumple*/
28+
export const filterByName = (pokemons, value) => {
29+
const pokemonsByName = pokemons.filter((pokemon) =>
30+
pokemon.name.includes(value)
31+
);
32+
return pokemonsByName;
33+
};
34+
35+
export const averageWeight = (pokemons) => {
36+
const pokemonsWeight = pokemons.map((pokemon) =>
37+
parseFloat(pokemon.size.weight)
38+
);
39+
40+
return (
41+
(pokemonsWeight.reduce((acc, item) => acc + item, 0) / pokemonsWeight.length).toFixed(2)
42+
);
43+
};

‎src/imagenes/2048x1152-pokemon-wallpapers-97908-212960-9764591.png‎

26.9 KB
Loading

‎src/imagenes/840005-green-flower-background-2560x1600-large-resolution.jpg‎

313 KB
Loading

‎src/imagenes/International_Pokémon_logo.svg.png‎

266 KB
Loading

‎src/imagenes/bannerpoke.png‎

329 KB
Loading

‎src/imagenes/pngtree-lynx-summer-green-banner-background-image_155644.jpg‎

81.8 KB
Loading

‎src/imagenes/pokedx.png‎

33.7 KB
Loading

‎src/imagenes/pokeicon.png‎

114 KB
Loading

‎src/index.html‎

Lines changed: 71 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,80 @@
22
<html>
33
<head>
44
<meta charset="utf-8">
5-
<title>Data Lovers</title>
5+
<title>Pokemon</title>
66
<link rel="stylesheet" href="style.css" />
77
</head>
88
<body>
9-
<header>
10-
POKEMON
11-
</header>
12-
<div class="image-grid" id="imageGrid">
13-
<!-- Aquí se generarán las imágenes dinámicamente -->
14-
</div>
15-
<h1>gotta catch em all</h1>
169
<script src="main.js" type="module"></script>
10+
<header id="bienvenida">
11+
<body class="fondoH">
12+
<img class="imagenheader"
13+
src="imagenes/International_Pokémon_logo.svg.png" alt"Pokedex"
14+
/>
15+
<div class="centrar">
16+
<h1>¡Bienvenida a esta fantástica aventura!</h1></header>
17+
</div>
18+
</header>
19+
<div class="nav-container">
20+
<div class="by-name">
21+
<label for="nombre">Search by Name:</label>
22+
<input type="text" id="name" placeholder="Nombre">
23+
<button id="buscar">Buscar</button>
24+
</div>
25+
<div class="selectorcontainer">
26+
<h2>Type</h2>
27+
<select data-testid="filter-type" class="select-filter" name="type">
28+
<option value="all">Todos</option>
29+
<option value="fire">Fire</option>
30+
<option value="water">Water</option>
31+
<option value="grass">Grass</option>
32+
<option value="bug">Bug</option>
33+
<option value="flying">Flying</option>
34+
<option value="poison">Poison</option>
35+
<option value="normal">Normal</option>
36+
<option value="electric">Electric</option>
37+
<option value="ground">Ground</option>
38+
<option value="psychic">Psychic</option>
39+
<option value="fighting">Fighting</option>
40+
<option value="rock">Rock</option>
41+
<option value="ice">Ice</option>
42+
<option value="ghost">Ghost</option>
43+
<option value="dragon">Dragon</option>
44+
<option value="fairy">Fairy</option>
45+
<option value="steel">Steel</option>
46+
<option value="dark">Dark</option>
47+
<!-- Agrega más opciones según sea necesario -->
48+
</select>
49+
<h2> Resistant </h2>
50+
<select data-testid="filter-resistant" class ="select-filter" name="resistant">
51+
<option value="all">Todos</option>
52+
<option value="fire">Fire</option>
53+
<option value="water">Water</option>
54+
<option value="grass">Grass</option>
55+
<option value="bug">Bug</option>
56+
<option value="flying">Flying</option>
57+
<option value="poison">Poison</option>
58+
<option value="normal">Normal</option>
59+
<option value="electric">Electric</option>
60+
<option value="ground">Ground</option>
61+
<option value="electric">Electric</option>
62+
<option value="psychic">Psychic</option>
63+
<option value="fighting">Fighting</option>
64+
<option value="rock">Rock</option>
65+
<option value="ice">Ice</option>
66+
<option value="ghost">Ghost</option>
67+
<option value="dragon">Dragon</option>
68+
<option value="fairy">Fairy</option>
69+
<option value="steel">Steel</option>
70+
<option value="dark">Dark</option>
71+
</select>
72+
<h2 data-testid="Average-weight" class="average">Average Pokemon Weight</h2>
73+
</div>
74+
</div>
75+
</div>
76+
<div class="pokemons-container">
77+
<ul id="pokemonsContainer" class="contenedor-pokemons"></ul>
78+
79+
</div>
1780
</body>
1881
</html>

‎src/main.js‎

Lines changed: 83 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,91 @@
1-
// import { example } from './dataFunctions.js';
2-
// import { renderItems } from './view.js';
1+
// import { type } from './dataFunctions.js';
2+
import data from "./data/pokemon/pokemon.js";
3+
import {
4+
filterByName,
5+
filterByResistant,
6+
filterByType,
7+
averageWeight,
8+
} from "./dataFunctions.js";
39

4-
// // import data from './data/lol/lol.js';
5-
// import data from './data/pokemon/pokemon.js';
6-
// // import data from './data/rickandmorty/rickandmorty.js';
10+
// console.log(filterType(data.pokemon, "grass"));
711

8-
// console.log(example, renderItems, data);
9-
const imageGrid = document.getElementById('imageGrid');
12+
const pokemons = data.pokemon;
1013

11-
function crearImagenes() {
12-
const numeroDeImagenes = 251;
14+
const pokemonsContainer = document.getElementById("pokemonsContainer");
1315

14-
for (let i = 1; i <= numeroDeImagenes; i++) {
15-
const imageBox = document.createElement('div');
16-
imageBox.className = 'image-box';
16+
pokemonsContainer.innerHTML = "";
17+
pokemons.forEach((pokemon) => {
18+
const pokemonCard = document.createElement("li");
19+
pokemonCard.setAttribute("class", "contenedor-imagen-pokemon");
20+
pokemonCard.innerHTML = `
21+
<p class="pokename">${pokemon.name}</p>
22+
<img class="img-pokemon" id="imagePokemon" src="${pokemon.img}">
23+
<p class="poketipo">${pokemon.type}<p>
24+
`;
25+
pokemonsContainer.appendChild(pokemonCard);
26+
});
27+
/*const NumberCount = document.querySelector("li[data-testid='number-count']");*/
1728

18-
const image = document.createElement('img');
19-
image.src = `imagen${i}.jpg`; // Cambiar por la ruta de tus imágenes
20-
image.alt = `Imagen ${i}`;
29+
const filterType = document.querySelector("select[data-testid='filter-type']");
2130

22-
imageBox.appendChild(image);
23-
imageGrid.appendChild(imageBox);
24-
}
25-
}
31+
filterType.addEventListener("change", function () {
32+
const selectValue = filterType.value;
33+
const pokemonsFiltered = filterByType(pokemons, selectValue);
34+
pokemonsContainer.innerHTML = "";
35+
pokemonsFiltered.forEach((pokemon) => {
36+
const pokemonCard = document.createElement("li");
37+
pokemonCard.setAttribute("class", "contenedor-imagen-pokemon");
38+
pokemonCard.innerHTML = `
39+
<p class="pokename">${pokemon.name}</p>
40+
<img class="img-pokemon" id="imagePokemon" src="${pokemon.img}">
41+
<p class="poketipo">${pokemon.type}<p>
42+
`;
43+
pokemonsContainer.appendChild(pokemonCard);
44+
});
45+
});
2646

27-
window.onload = crearImagenes;
47+
const filterResistant = document.querySelector(
48+
"select[data-testid='filter-resistant']"
49+
);
2850

51+
filterResistant.addEventListener("change", function () {
52+
const selectValue = filterResistant.value;
53+
const pokemonsFiltered = filterByResistant(pokemons, selectValue);
54+
pokemonsContainer.innerHTML = "";
55+
pokemonsFiltered.forEach((pokemon) => {
56+
const pokemonCard = document.createElement("li");
57+
pokemonCard.setAttribute("class", "contenedor-imagen-pokemon");
58+
pokemonCard.innerHTML = `
59+
<p class="pokename">${pokemon.name}</p>
60+
<img class="img-pokemon" id="imagePokemon" src="${pokemon.img}">
61+
<p class="poketipo">${pokemon.type}<p>
62+
`;
63+
pokemonsContainer.appendChild(pokemonCard);
64+
});
65+
});
66+
67+
const nameInput = document.querySelector("input[id='name']");
68+
69+
const btnBuscar = document.querySelector("button[id='buscar']");
70+
btnBuscar.addEventListener("click", function () {
71+
const byName = nameInput.value;
72+
const pokemonsByName = filterByName(pokemons, byName);
73+
pokemonsContainer.innerHTML = "";
74+
pokemonsByName.forEach((pokemon) => {
75+
const pokemonCard = document.createElement("li");
76+
pokemonCard.setAttribute("class", "contenedor-imagen-pokemon");
77+
pokemonCard.innerHTML = `
78+
<p class="pokename">${pokemon.name}</p>
79+
<img class="img-pokemon" id="imagePokemon" src="${pokemon.img}">
80+
<p class="poketipo">${pokemon.type}<p>
81+
`;
82+
pokemonsContainer.appendChild(pokemonCard);
83+
});
84+
});
85+
86+
const averagePokemonWeight = document.querySelector(
87+
"h2[data-testid='Average-weight']"
88+
);
89+
const averagePokemonWeightValue = averageWeight(pokemons);
90+
averagePokemonWeight.innerHTML =
91+
"Average Pokemon Weight: " + averagePokemonWeightValue;

0 commit comments

Comments
 (0)