Browse Source

remove WIP

master
Jakub Škrabánek 1 month ago
parent
commit
90e9657687
  1. 24
      25_fetch_await/index.html
  2. 68
      25_fetch_await/script.js

24
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>

68
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);
Loading…
Cancel
Save