diff --git a/index.html b/index.html index 1e7c169002d55e337de02d07107484c3a708d8d0..2c25362e305a42231e897296cc72abed48f6a82c 100644 --- a/index.html +++ b/index.html @@ -8,17 +8,45 @@ <body> <h1>Pokémon List</h1> <ul id="pokemon-list"></ul> + <script> - const pokemons = ["Pikachu", "Bulbasaur", "Charmander", "Squirtle"]; - const taille = [2, 4,8,10,7]; - const poids = [3,3,9,10,2000]; - const listElement = document.getElementById("pokemon-list"); + const baseApiUrl = "https://pokeapi.co/api/v2/pokemon" + + /** + * Fetch the pokemon list with the weight and height + */ + function fetchPokemonList(callback, limit = 400) { + 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, "height": data[i].height}); + } + callback(pokemons); + }); + } - for (let i = 0; i < pokemons.length; i++) { - const li = document.createElement("li"); - li.textContent = pokemons[i] + ' ' + poids[i] + 'kg ' + taille[i] + 'm'; - listElement.appendChild(li); - }; + function displayPokemons(pokemons) { + const listElement = document.getElementById("pokemon-list"); + listElement.innerHTML = ""; // Clear existing list + + pokemons.forEach(pokemon => { + const li = document.createElement("li"); + li.textContent = `${pokemon.name} - ${pokemon.weight}kg, ${pokemon.height}m`; + listElement.appendChild(li); + }); + } + + // Fetch and display Pokémon + fetchPokemonList(displayPokemons, 318); </script> </body> </html> \ No newline at end of file diff --git a/pokemonProvider.js b/pokemonProvider.js new file mode 100644 index 0000000000000000000000000000000000000000..964a9ae11a8cfe3fc6cfb2d4c747559a7cae414c --- /dev/null +++ b/pokemonProvider.js @@ -0,0 +1,25 @@ +const baseApiUrl = "https://pokeapi.co/api/v2/pokemon" + +/** + * Fetch the pokemon list with the weight and height + */ +function fetchPokemonList(callback, limit = 20) { + 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, "height": data[i].height}); + } + callback(pokemons); + }); +} + +exports.fetchPokemonList = fetchPokemonList;