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>