feat: solved 4th stage of the Hyperskill project "Dog Glossary"

sswietoniowski · sswietoniowski · commit 9bed5a8c7d52 · 2024-02-08T13:59:32.000+01:00
diff --git a/hyperskill/07_dog_glossary/04/.gitkeep b/hyperskill/07_dog_glossary/04/.gitkeep
diff --git a/hyperskill/07_dog_glossary/04/app.js b/hyperskill/07_dog_glossary/04/app.js
@@ -0,0 +1,88 @@
+window.onload = function () {
+    const randomDogButton = document.getElementById('button-random-dog');
+    const contentDiv = document.getElementById('content');
+    const inputBreed = document.getElementById('input-breed');
+    const showBreedButton = document.getElementById('button-show-breed');
+    const showSubBreedButton = document.getElementById('button-show-sub-breed');
+    const showAllButton = document.getElementById('button-show-all');
+
+    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" />`;
+        } else {
+            contentDiv.innerHTML = 'Error fetching random dog';
+        }
+    });
+
+    showBreedButton.addEventListener('click', async function () {
+        const breed = inputBreed.value.toLowerCase();
+        const response = await fetch(`${dogApiBaseUrl}/breed/${breed}/images/random`);
+
+        if (!response.ok) {
+            contentDiv.innerHTML = '<p>Breed not found!</p>';
+            return;
+        }
+
+        const data = await response.json();
+
+        if (data.status === 'success') {
+            contentDiv.innerHTML = `<img src="${data.message}" alt="${breed}" />`;
+        } else {
+            contentDiv.innerHTML = '<p>Breed not found!</p>';
+        }
+    });
+
+    showSubBreedButton.addEventListener('click', async function () {
+        const breed = inputBreed.value.toLowerCase();
+        const response = await fetch(`${dogApiBaseUrl}/breed/${breed}/list`);
+
+        if (!response.ok) {
+            contentDiv.innerHTML = '<p>Breed not found!</p>';
+            return;
+        }
+
+        const data = await response.json();
+
+        if (data.status === 'success' && data.message.length > 0) {
+            let subBreddsList = '<ol>';
+            data.message.forEach(subBreed => {
+                subBreddsList += `<li>${subBreed}</li>`;
+            });
+            subBreddsList += '</ol>';
+            contentDiv.innerHTML = subBreddsList;
+        } else {
+            contentDiv.innerHTML = '<p>No sub-breeds found!</p>';
+        }
+    });
+
+    showAllButton.addEventListener('click', async function () {
+        const response = await fetch(`${dogApiBaseUrl}/breeds/list/all`);
+        const data = await response.json();
+        const breeds = data.message;
+        let allBreeds = '<ol>';
+        for (const breed in breeds) {
+            if (breeds[breed].length > 0) {
+                allBreeds += `<li>${breed}<ul>`;
+                breeds[breed].forEach(subBreed => {
+                    allBreeds += `<li>${subBreed}</li>`;
+                });
+                allBreeds += '</ul></li>';
+            } else {
+                allBreeds += `<li>${breed}</li>`;
+            }
+        }
+        allBreeds += '</ol>';
+        contentDiv.innerHTML = allBreeds;
+    });
+}
diff --git a/hyperskill/07_dog_glossary/04/index.html b/hyperskill/07_dog_glossary/04/index.html
@@ -0,0 +1,18 @@
+<!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>
+<input type="text" id="input-breed" placeholder="Enter a breed">
+<button id="button-show-breed">Show Breed</button>
+<button id="button-show-sub-breed">Show Sub-Breed</button>
+<button id="button-show-all">Show All Breeds</button>
+<div id="content"></div>
+</body>
+</html>
diff --git a/hyperskill/07_dog_glossary/04/site.css b/hyperskill/07_dog_glossary/04/site.css
@@ -0,0 +1,3 @@
+* {
+    box-sizing: border-box;
+}

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+* {`
	`2`	`+ box-sizing: border-box;`
	`3`	`+}`