add 13.5 ajax

2 weeks ago · 613ff81988
1 changed files with 41 additions and 0 deletions
--- a/13.5_ajax/index.html
+++ b/13.5_ajax/index.html
@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>    
+    <input type="text" id="pokemonName">
+    <button onclick="fetchData()">Fetch Pokemon</button>
+
+    <img src="" alt="Pokemon Sprite" id="pokemonSprite" style="display: none;">
+
+    <script>
+
+        var pokejson
+        const imgElement = document.getElementById("pokemonSprite")
+
+        function fetchData() {
+            const pokemonName = document.getElementById("pokemonName").value.toLowerCase();
+            const ajax = new XMLHttpRequest;
+            const url = `https://pokeapi.co/api/v2/pokemon/${pokemonName}`;
+            console.log(url);
+            ajax.open("GET",url,true)
+            ajax.onreadystatechange = function() {
+                if(this.status === 200 && this.readyState === 4){
+                    pokejson = JSON.parse(this.responseText);
+                    console.log(pokejson)
+                    //const pokeSprite = pokejson.sprites.front_default;
+                    //const pokeSprite = pokejson.sprites.other.official-artwork.front.default;
+                    const pokeSprite = pokejson.sprites.other["official-artwork"].front_default;
+                    imgElement.src = pokeSprite
+                    imgElement.style.display = "block"
+                }
+            }
+            ajax.send()
+        }
+
+    </script>
+</body>
+</html>