doggo

4 weeks ago · 10895d1419
2 changed files with 65 additions and 0 deletions
--- a/29_dog_api/index.html
+++ b/29_dog_api/index.html
@ -0,0 +1,22 @@
+<!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>Random Dog Gallery</h1>
+    <p>Klikni na tlačítko a načti náhodné obrázky psů!</p>
+
+    <div class="ovladani">
+        <select name="vyberPlemena" id="vyberPlemena">
+            <option value="">Všechna plemena</option>
+        </select>
+        <button id="btnNacti">Nacti obrázky</button>
+    </div>
+    <p id="chyba"></p>
+    <div class="galerie" id="galerie"></div>
+    <script src="script.js"></script>
+</body>
+</html>
--- a/29_dog_api/script.js
+++ b/29_dog_api/script.js
@ -0,0 +1,43 @@
+async function nactiPlemena() {
+    let response = await fetch("https://dog.ceo/api/breeds/list/all")
+    let data = await response.json();
+    let plemena = Object.keys(data.message);
+    let select = document.getElementById("vyberPlemena")
+
+    for (let i = 0; i < plemena.length; i++) {
+        let option = document.createElement("option")
+        option.value = plemena[i];
+        option.textContent = plemena[i];
+        select.append(option);
+    }
+}
+
+async function nactiObrazky() {
+    let plemeno = document.getElementById("vyberPlemena").value;
+    let url;
+    if (plemeno==""){
+        url = "https://dog.ceo/api/breeds/image/random/3";
+    } else {
+        url = "https://dog.ceo/api/breed/"+plemeno+"/images/random/3";
+    }
+
+    try {
+        let response = await fetch(url);
+        let data = await response.json();
+
+        let galerie = document.getElementById("galerie");
+        galerie.innerHTML = "";
+        document.getElementById("chyba").textContent = "";
+
+        for (let i = 0; i < data.message.length; i++) {
+            let img = document.createElement("img");
+            img.src = data.message[i];
+            galerie.appendChild(img);
+        }
+    }catch{
+        document.getElementById("chyba").textContent = "chyba: " + error.message;
+    }
+}
+
+document.getElementById("btnNacti").addEventListener("click",nactiObrazky)
+nactiPlemena();