xing-exercise-w7-fetch-api

src/index.html

@@ -36,7 +36,7 @@
 
 
 
-  <script src="src/index.js"></script>
+  <script src="./index.js"></script>
 </body>
 
 </html>

src/index.js

@@ -14,15 +14,29 @@ const weight = document.getElementById("weight");
 const height = document.getElementById("height");
 const types = document.getElementById("types");
 
+const BASE_URL = "https://pokeapi.co/api/v2"
+const pokemon = "pokemon"
+const URL = `${BASE_URL}/${pokemon}/`
+console.log(URL)
+
 // 1) Start with updating the fetchPokemons function so that
 //    it's fetching the pokemons from the pokemon endpoint and
 //    logs the results in the console.
 //    HINT --> Don't forget to invoke the function
 
 const fetchPokemons = () => {
   /*Fetch all pokemons here*/
+  fetch(URL)
+    .then(response => response.json())
+    .then(data => {
+      console.log(data.results) // Log the array of pokemon objects
+      console.log(data.results[0]) // Log only the name of the first pokemon
+      data.results.forEach(pokemon => {console.log(pokemon.name)}) // Log the names of all pokemons in the array
+    })
 };
 
+// fetchPokemons()
+
 // 2) a) As you can see, we get some metadata as well as
 //    the results of the fetch. Change the console.log so
 //    that you only log the array of pokemon objects.
@@ -39,15 +53,45 @@ const fetchPokemons = () => {
 //    and pick a pokemon that you would like to continue
 //    working with. Copy the pokemon's URL.
 
+const getRandomNumber = () => { return Math.floor(Math.random() * 1303) }
+let randomNumber = getRandomNumber()
+const URL_RANDOM = `${URL}/${randomNumber}/`
+
+const fetchRandomPokemon = () => {
+  fetch(URL_RANDOM)
+    .then(response => response.json())
+    .then(data => {
+      console.log(URL)
+      console.log(data)
+      console.log(data.name)
+    })
+}
+
+// fetchRandomPokemon()
+
 // 4) Now that we've picked a pokemon, we will do a new fetch
 //    to the URL we copied. Since that's another endpoint,
 //    we will create a new fetch inside the fetchBulbasaurData
 //    function (change the function's name to fit your pokemon).
 //    Log the data in the console and see what you find.
 
-const fetchBulbasaurData = () => {
-  /*Fetch singular pokemon here*/
-};
+//    I pick crustle (nr.557 link: https://pokeapi.co/api/v2/pokemon/558/)
+const URL_CRUSTLE = `${URL}/558/`
+
+const fetchCrustleData = () => {
+  fetch(URL_CRUSTLE)
+    .then(response => response.json())
+    .then(data => {
+      image.src = data.sprites.front_default
+
+    console.log(data)
+    console.log(data.name)
+
+    updateHTML(data)
+    })    
+}
+
+fetchCrustleData()
 
 // 5) After familiarizing with the data, we will use the data
 //    to change our table. We will give you the image as a start.
@@ -62,6 +106,27 @@ const fetchBulbasaurData = () => {
 //    HINT --> Log stuff in the console to try things out
 //    HINT --> If it's an array - map over the array
 
+const updateHTML = (data) => {
+
+  name.textContent = data.name
+  weight.textContent = data.weight
+  height.textContent = data.height
+
+  const typeNames = data.types.map((pokemonType) => pokemonType.type.name)
+  types.textContent = typeNames.join(",")
+
+  console.log(name)
+  console.log(weight)
+  console.log(height)
+  console.log(typeNames) 
+}
+
+
+
 // ***BONUS***
 // Check out the API's documentation and try to fetch from another
 // endpoint! There are many - as you can see in the first link
+
+const URL_SPECIES = `${BASE_URL}/pokemon-species`
+
+console.log(URL_SPECIES)