From 5ffa1708963bee57f01ad033f7a7ec2d3c3f1068 Mon Sep 17 00:00:00 2001
From: Ait Lamine Ilias <aitlaminilias@gmail.com>
Date: Wed, 26 Mar 2025 15:50:41 +0100
Subject: [PATCH] feat: fetch pokemon list. Ref #3
---
index.html | 46 +++++++++++++++++++++++++++++++++++++---------
pokemonProvider.js | 25 +++++++++++++++++++++++++
2 files changed, 62 insertions(+), 9 deletions(-)
create mode 100644 pokemonProvider.js
diff --git a/index.html b/index.html
index 1e7c169..2c25362 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 0000000..964a9ae
--- /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;
--
GitLab