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>