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();