api&ajax

1 month ago · cd74b8155f
4 changed files with 97 additions and 0 deletions
--- a/20_ajax/index.html
+++ b/20_ajax/index.html
@ -0,0 +1,13 @@
 <!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>
    <h1>Práce s API servery</h1>
    <a href="pokemon.html">Práce s Pokémon API (pokeapi.co)</a><br>
    <a href="todofetch.html">Práce s TodoList API (jsonplaceholder.typicode.com)</a>
 </body>
 </html>
--- a/20_ajax/pokemon.html
+++ b/20_ajax/pokemon.html
@ -0,0 +1,38 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pokémon API tester</title>
 </head>
 <body>
    <h1>Pokémon API tester</h1>
    <a href="index.html">Domů</a><br>
    <input type="text" id="pokemonName">
    <button onclick="fetchData()">Fetch Pokémon</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;
                    imgElement.src = pokeSprite
                    imgElement.style.display = "block";
                }
            };
            ajax.send();
        }
    </script>
 </body>
 </html>
--- a/20_ajax/todofetch.html
+++ b/20_ajax/todofetch.html
@ -0,0 +1,19 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Práce s API</title>
 </head>
 <body>
    <h1>Práce s API serverem</h1>
    <a href="index.html">Domů</a><br>
    <input type="number" id="todoId" placeholder="Zadejte ID Úkolu">
    <button id="fetchTodo">Načíst úkol</button>
    <br>
    <br>
    <div id="todoResult"></div>
    <script src="todoscript.js"></script>
 </body>
 </html>
--- a/20_ajax/todoscript.js
+++ b/20_ajax/todoscript.js
@ -0,0 +1,27 @@
 document.getElementById("fetchTodo").addEventListener("click",function(){
    const todoId = document.getElementById("todoId").value;
    var todoResult = document.getElementById("todoResult");
    todoResult.innerHTML = "Načítám..."
    let url = "https://jsonplaceholder.typicode.com/todos/";
    if (todoId !== "" && todoId > 0) { url += todoId; }
    console.log(url)
    fetch(url).then(response => response.json())
        .then(data => {
            if(data) {
                todoResult.innerHTML = `<p><b>${data.id}</b>
                - ${data.title}
                - ${data.completed ? "Hotovo":"Nedokončen</p>"}`
            }else{
                todoResult.innerHTML = "<p>Úkol nenalezen</p>"
            }
        }).catch(error => {
            console.error("Chyba při našítaní dat:",error);
            todoResult.innerHTML = "<h2>Chyba při načítání dat</h2>"
        })
 })