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>"
+        })
+
+
+
+
+})