fetch api WIP

1 month ago · 88ce5889bb
2 changed files with 60 additions and 0 deletions
--- a/25_fetch_await_WIP/index.html
+++ b/25_fetch_await_WIP/index.html
@ -0,0 +1,24 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fetch API</title>
 </head>
 <body>
    <h1>Hledání uživatele (Fetch API)</h1>
    <!-- Formulář -->
    <div>
        <label for="userId">Zadejte ID uživatele (1-10):</label>
        <input type="number" name="userId" id="userId" value="1">
        <button id="btnNajdi">Najít uživatele</button>
        <button id="btnVse">Najít všechny</button>
    </div>
    <!-- Zobrazování výsledků -->
    <div id="vystup">
        <p id="stav">Připraveno k hledání....</p>
        <div id="vysledek"></div>
    </div>
    <script src="script.js"></script>
 </body>
 </html>
--- a/25_fetch_await_WIP/script.js
+++ b/25_fetch_await_WIP/script.js
@ -0,0 +1,36 @@
 const inputId = document.getElementById("userId");
 const btnNajdi = document.getElementById("btnNajdi");
 const btnVse = document.getElementById("btnVse");
 const stav = document.getElementById("stav");
 const vysledek = document.getElementById("vysledek");
 // FUNKCE 1 : Načtení všech uživatelů
 async function nactiVsechny() {
    vysledek.innerHTML = "";
    stav.innerText = "Načítám seznam všech uživatelů";
    try{
        const odpoved = await fetch("https://jsonplaceholder.typicode.com/users")
        if (!odpoved.ok){
            throw new Error("Nepodařilo se stáhnout seznam uživatelů")
        }
        const data = await odpoved.json();
        //Vytvoření seznam (createElement/appendChild)
        const ul = document.createElement("ul");
        data.forEach(u => {
            const li = document.createElement("li");
            li.innerText = u.name
            ul.appendChild(li);
        });
        vysledek.appendChild(ul)
        stav.innerText = "Seznam Načten"
    } catch (e) {
        stav.innerText = "CHYBA:" + e.message;
    }
 }
 btnVse.addEventListener("click",nactiVsechny)