Nahrát soubory do „“

4 years ago · e1eebe64ce
2 changed files with 56 additions and 0 deletions
--- a/data.json
+++ b/data.json
@ -0,0 +1,4 @@
 {
    "image": "/img/image_09.jpg",
    "label": "Popisek k obrázku 1"
 }
--- a/index.html
+++ b/index.html
@ -0,0 +1,52 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Obrázek dne</title>
    <style>
        img {
            width: 200px;
        }
    </style>
 </head>
 <body>
    <h1>Obrázek dne</h1>
    <h2>Zadání</h2>
    <p>
        Vytvořte soubor JSON, který umístíte do adresáře projektu.
        Obsah JSON: název souboru/obrázku a popisek (motto).
    </p>
    <p>
        Napište kód, který stáhne JSON soubor a na stránce
        zobrazí obrázek získaný z JSON souboru a popisek (textovou informaci).
    </p>
    <div id="obrazek">SEM</div>
    <script src="js/jquery-3.5.1.min.js"></script>
    <script>
        function stahniObrazek() {
            $.getJSON("/data.json")
                .done(function(data) {
                    let puvodni = $("#obrazek img").attr("src");
                    console.log(puvodni);
                    if (puvodni != data.image) {
                        $("#obrazek")
                            .html('<img src="' + data.image + '" alt="">')
                            .append("<p>" + data.label + "</p>");
                    }
                })
                .fail(function() {
                    console.log("Chyba getJSON!");
                })
                .always(function() {
                });
        }
        window.setInterval(stahniObrazek, 5000);
    </script>
 </body>
 </html>