Merge branch 'ilias_branch' into 'main'

feat: show five pokemons . See merge request !2

Merge branch 'ilias_branch' into 'main'
f14d6169 · AIT LAMINE Ilias · 245e8eee · 5ffa1708 · f14d6169 · f14d6169
Commit f14d6169 authored 2 months ago by AIT LAMINE Ilias
--- 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 baseApiUrl = "https://pokeapi.co/api/v2/pokemon"
-        const taille = [2, 4,8,10,7];
-        const poids = [3,3,9,10,2000];
+        /**
-        const listElement = document.getElementById("pokemon-list");
+        * 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++) {
+        function displayPokemons(pokemons) {
-            const li = document.createElement("li");
+            const listElement = document.getElementById("pokemon-list");
-            li.textContent = pokemons[i] + ' ' + poids[i] + 'kg ' + taille[i] + 'm';
+            listElement.innerHTML = ""; // Clear existing list
-            listElement.appendChild(li);
-        };
+            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
--- a/pokemonProvider.js
+++ b/pokemonProvider.js
+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;