feat: solved 1st stage of the Hyperskill project "Dog Glossary"

sswietoniowski · sswietoniowski · commit af9b547ce3a6 · 2024-02-08T13:25:23.000+01:00
diff --git a/hyperskill/07_dog_glossary/01/.gitkeep b/hyperskill/07_dog_glossary/01/.gitkeep
diff --git a/hyperskill/07_dog_glossary/01/app.js b/hyperskill/07_dog_glossary/01/app.js
@@ -0,0 +1,21 @@
+window.onload = function() {
+    const randomDogButton = document.getElementById('button-random-dog');
+    const contentDiv = document.getElementById('content');
+
+    const dogApiBaseUrl = 'https://dog.ceo/api';
+
+    randomDogButton.addEventListener('click', async function() {
+        const response = await fetch(`${dogApiBaseUrl}/breeds/image/random`);
+
+        if (!response.ok) {
+            contentDiv.innerHTML = 'Error fetching random dog';
+            return;
+        }
+
+        const data = await response.json();
+
+        if (data.status === 'success') {
+            contentDiv.innerHTML = `<img src="${data.message}" alt="Random dog" />`;
+        }
+    });
+}
diff --git a/hyperskill/07_dog_glossary/01/index.html b/hyperskill/07_dog_glossary/01/index.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>Dog Glossary</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="app.js" defer></script>
+</head>
+<body>
+<h1>Dog Glossary</h1>
+<button id="button-random-dog">Show Random Dog</button>
+<div id="content"></div>
+</body>
+</html>
diff --git a/hyperskill/07_dog_glossary/01/site.css b/hyperskill/07_dog_glossary/01/site.css
@@ -0,0 +1,3 @@
+* {
+    box-sizing: border-box;
+}
