aggiunta spa gatti

spa-gatti/index.html

@@ -0,0 +1,67 @@
+<html>
+    <head>
+        <title>Gatti casuali</title>
+
+        <style>
+
+            .centrato {
+                text-align: center;
+            }
+            #gatto-casuale {
+                height: 420px;
+            }
+            #bottone-ricarica {
+                font-size: 24px;
+                background-color: blueviolet;
+                padding: 6px;
+                border-radius: 6px;
+                color: white;
+                border: 3px solid blueviolet;
+            }
+            #bottone-ricarica:hover {
+                border: 3px solid black;
+            }
+        </style>
+    </head>
+
+    <body>
+        <div class="centrato">
+            <button id="bottone-ricarica">Ricarica gatto</button></br></br>
+            <img id="gatto-casuale" src="" alt="Gatto casuale">
+        </div>
+   
+
+        <script>
+            const immagine = document.getElementById("gatto-casuale");
+            const bottone = document.getElementById("bottone-ricarica");
+
+            async function getRandomCat() {
+                const url = "https://cataas.com/cat?json=true";
+                
+                try {
+                    const response = await fetch(url);
+
+                    if (response.ok) {
+                        const cat = await response.json();
+                        immagine.src = cat.url;
+                    }
+                }
+                catch (e) {
+                    console.log(e.message);
+                }
+            }
+
+            /*
+            bottone.addEventListener("click", () => {
+                getRandomCat();
+            });
+            */
+            // bottone.addEventListener("click", () => getRandomCat());
+
+            bottone.addEventListener("click", getRandomCat);
+
+            getRandomCat();
+
+        </script>
+    </body>
+</html>