Skip to content
Snippets Groups Projects
Commit 45545057 authored by MAHDIR Safaa's avatar MAHDIR Safaa
Browse files

Merge branch 'tache3' into 'main'

feat:remplacement de la liste statique par la liste dynamique

Closes #3

See merge request !3
parents 078830cb 85792b13
No related branches found
No related tags found
1 merge request!3feat:remplacement de la liste statique par la liste dynamique
const pokemons = [
{ name: "Beedrill", weight: 29.5, height: 1 },
{ name: "Blastoise", weight: 85.5, height: 1.6 },
{ name: "Bulbasaur", weight: 6.9, height: 0.7 },
{ name: "Butterfree", weight: 32, height: 1.1 },
{ name: "Caterpie", weight: 2.9, height: 0.3 }
];
function displayPokemonList() {
const listElement = document.getElementById("pokemon-list");
listElement.innerHTML = "";
pokemons.forEach(pokemon => {
const listItem = document.createElement("li");
listItem.textContent = `${pokemon.name} - ${pokemon.weight}kg - ${pokemon.height}m`;
listElement.appendChild(listItem);
// Récupérer les Pokémon via l'API
function fetchPokemonList(callback, limit = 20) {
const baseApiUrl = "https://pokeapi.co/api/v2/pokemon";
const url = baseApiUrl + "?limit=" + limit;
const request = async () => {
const response = await fetch(url);
const json = await response.json();
let promisesArray = json["results"].map(result => {
return fetch(result.url).then(response => response.json());
});
return Promise.all(promisesArray);
};
request().then((data) => {
let pokemons = [];
for (let i = 0; i < data.length; ++i) {
pokemons.push({
"name": data[i].name,
"weight": data[i].weight / 10, // Convert to kg
"height": data[i].height / 10 // Convert to m
});
}
callback(pokemons);
});
}
document.addEventListener("DOMContentLoaded", displayPokemonList);
function displayPokemons(list) {
const container = document.getElementById("pokemon-list");
......@@ -28,11 +33,23 @@ function displayPokemons(list) {
});
}
fetchPokemonList((pokemons) => {
displayPokemons(pokemons);
});
// Filtrage
document.getElementById("all").addEventListener("click", () => displayPokemons(pokemons));
document.getElementById("all").addEventListener("click", () => fetchPokemonList((pokemons) => {
displayPokemons(pokemons);
}));
document.getElementById("weight").addEventListener("click", () => {
displayPokemons(pokemons.filter(p => p.weight > 3));
fetchPokemonList((pokemons) => {
displayPokemons(pokemons.filter(p => p.weight > 3));}
);
});
document.getElementById("height").addEventListener("click", () => {
displayPokemons(pokemons.filter(p => p.height < 1));
});
\ No newline at end of file
fetchPokemonList((pokemons) => {
displayPokemons(pokemons.filter(p => p.height < 1));
});
});
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment