fetch api complete

1 month ago · 6a782bc985
3 changed files with 75 additions and 9 deletions
--- a/25_fetch_await/index.html
+++ b/25_fetch_await/index.html
@ -4,20 +4,23 @@
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fetch API</title>
+    <link rel="stylesheet" href="style.css">
 </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>
+        <input type="number" name="userId" id="userId" value="1" min="1" max="20">
+        <button id="btnNajdi">1. Najít uživatele</button>
+        <button id="btnPosty" disabled>2. Načíst jeho příspěvky</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 id="posty-kontejner"></div>
    </div>
    <script src="script.js"></script>
 </body>
--- a/25_fetch_await/script.js
+++ b/25_fetch_await/script.js
@ -3,6 +3,10 @@ const btnNajdi = document.getElementById("btnNajdi");
 const btnVse = document.getElementById("btnVse");
 const stav = document.getElementById("stav");
 const vysledek = document.getElementById("vysledek");
+const postyKontejner = document.getElementById("posty-kontejner");
+const btnPosty = document.getElementById("btnPosty");
+
+let aktualniUserId = null;

 // FUNKCE 1 : Načtení všech uživatelů
 async function nactiVsechny() {
@ -36,6 +40,9 @@ async function nactiVsechny() {
 async function nactiJednoho() {
    const id = inputId.value;
    vysledek.innerHTML = "";
+    postyKontejner.innerHTML = "";
+    btnPosty.disabled = true;
+    aktualniUserId = null;
    stav.innerText = `Hledám uživatele s ID: ${id}`;

    try{
@ -43,16 +50,23 @@ async function nactiJednoho() {
        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>
+            <div class="user-card">
+                <h3>${u.name} (ID:${u.id})</h3>
                <ul>
                    <li>${u.username}</li>
                    <li>${u.email}</li>
-                <li>${u.adress}</li>
+                    <li>${u.address.city}</li>
                </ul>
+            </div>
        `;//AltGR + ý = ` (Template literal)
        stav.innerText = "Uživatel nalezen"
+        //aktivace vyhledávání postů
+        aktualniUserId = u.id;
+        btnPosty.disabled = false;
+        btnPosty.innerText = `Načíst příspvěky (autor: ${u.name})`

    } catch (error) {
        stav.innerText = "Došlo k chybě";
@ -61,8 +75,36 @@ async function nactiJednoho() {
    } finally {
        console.log(`Pokus o načtení ID ${id} dokončen`);
    }
+}
+
+async function nactiPosty() {
+    //Pojistka pokud nemame ID
+    if(!aktualniUserId) return;
+    postyKontejner.innerHTML = "<p>Načítám příspěvky</p>";
+    btnPosty.disabled = true; //zabráníme opakovanému klikání během načítaní
+
+    try {
+        const odpoved = await fetch(`https://jsonplaceholder.typicode.com/users/${aktualniUserId}/posts`)
+        if(!odpoved.ok) {
+            throw new Error(`Uživatel s ID ${id} neexistuje (HTTP ${odpoved.status})`);            
+        }
+        const posty = await odpoved.json();
+        const html = posty.map(p => `
+            <div class="post">
+                <strong>${p.title}</strong>
+                <p>${p.body}</p>
+            </div> 
+        `).join("");
        
+        postyKontejner.innerHTML = `<h4>Příspěvky autora (${posty.length})</h4>` +html;
+        stav.innerText = "Data načtena"
+    } catch(e){
+        postyKontejner.innerHTML = `<p style="color:red">chyba:${e.message}</p>`
+    } finally {
+        btnPosty.disabled = false
+    }
 }

 btnVse.addEventListener("click",nactiVsechny);
 btnNajdi.addEventListener("click",nactiJednoho);
+btnPosty.addEventListener("click",nactiPosty)
--- a/25_fetch_await/style.css
+++ b/25_fetch_await/style.css
@ -0,0 +1,21 @@
+body {
+    line-height: 1.6;
+    max-width: 800px;
+    margin: 20px auto;
+    padding: 0 20px;
+}
+#stav {
+    font-style: italic;
+    color: #666
+}
+.user-card {
+    background-color: #f8f8f8;
+    border-radius: 15px;
+    border: 1px solid lightskyblue;
+    padding: 15px;
+}
+.post {
+    border-left: 5px blue solid;
+    padding: 10px;
+    margin: 10px 0;
+}