add ajax/api

2 months ago · 007b013525
2 changed files with 50 additions and 0 deletions
--- a/21_api_todos/index.html
+++ b/21_api_todos/index.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>Document</title>
+</head>
+<body>
+    <h1>Práce s API serverem</h1>
+
+    <input type="number" id="todoId" placeholder="Zadejte ID úkolu">
+    <button id="fetchTodo">Načíst úkol</button>
+    <br>
+    <br>
+    <div id="todoResult"></div>
+
+    <script src="js/script.js"></script>
+</body>
+</html>
--- a/21_api_todos/js/script.js
+++ b/21_api_todos/js/script.js
@ -0,0 +1,31 @@
+document.getElementById("fetchTodo").addEventListener("click", function(){
+    const todoId = document.getElementById("todoId").value;
+    const todoResult = document.getElementById("todoResult");
+    todoResult.innerHTML = "Načítání...";
+
+    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 (Array.isArray(data)){
+                todoResult.innerHTML = data.map(todo => `<p><b>${todo.id}</b> 
+                - ${todo.title} 
+                - ${todo.completed ? "Hotovo":"Nedokončen"}</p>`).join("");
+            }
+            else 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 = "Chyba při načítaní dat"
+        })
+
+})