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