remove WIP

1 month ago · 90e9657687
2 changed files with 92 additions and 0 deletions
--- a/25_fetch_await/index.html
+++ b/25_fetch_await/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/script.js
+++ b/25_fetch_await/script.js
@ -0,0 +1,68 @@
+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;
+    }
+
+}
+
+async function nactiJednoho() {
+    const id = inputId.value;
+    vysledek.innerHTML = "";
+    stav.innerText = `Hledám uživatele s ID: ${id}`;
+
+    try{
+        const odpoved = await fetch(`https://jsonplaceholder.typicode.com/users/${id}`)
+        if(!odpoved.ok) {
+            throw new Error(`Uživatel s ID ${id} neexistuje (HTTP ${odpoved.status})`);            
+        }
+        const u = await odpoved.json();
+        vysledek.innerHTML = `
+            <h3>${u.name}</h3>
+            <ul>
+                <li>${u.username}</li>
+                <li>${u.email}</li>
+                <li>${u.adress}</li>
+            </ul>
+        `;//AltGR + ý = ` (Template literal)
+        stav.innerText = "Uživatel nalezen"
+
+    } catch (error) {
+        stav.innerText = "Došlo k chybě";
+        vysledek.innerHTML = `<p style="color:red">Chyba:${error.message}</p>`
+        console.error("Podropbnosti chyby:",error) 
+    } finally {
+        console.log(`Pokus o načtení ID ${id} dokončen`);
+    }
+
+}
+
+btnVse.addEventListener("click",nactiVsechny);
+btnNajdi.addEventListener("click",nactiJednoho);