Skip to content

Commit 1fdee76

Browse files
sswietoniowskisswietoniowski
committed
feat: solved 5th stage of the Hyperskill project "Dog Glossary"
1 parent 9bed5a8 commit 1fdee76

File tree

7 files changed

+168
-0
lines changed

7 files changed

+168
-0
lines changed

‎hyperskill/07_dog_glossary/05/.gitkeep

Whitespace-only changes.

‎hyperskill/07_dog_glossary/05/app.js

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
window.onload = function () {
2+
const randomDogButton = document.getElementById('button-random-dog');
3+
const contentDiv = document.getElementById('content');
4+
const inputBreed = document.getElementById('input-breed');
5+
const showBreedButton = document.getElementById('button-show-breed');
6+
const showSubBreedButton = document.getElementById('button-show-sub-breed');
7+
const showAllButton = document.getElementById('button-show-all');
8+
9+
const dogApiBaseUrl = 'https://dog.ceo/api';
10+
11+
randomDogButton.addEventListener('click', async function () {
12+
const response = await fetch(`${dogApiBaseUrl}/breeds/image/random`);
13+
14+
if (!response.ok) {
15+
contentDiv.innerHTML = 'Error fetching random dog';
16+
return;
17+
}
18+
19+
const data = await response.json();
20+
21+
if (data.status === 'success') {
22+
contentDiv.innerHTML = `<img src="${data.message}" alt="Random dog" />`;
23+
} else {
24+
contentDiv.innerHTML = 'Error fetching random dog';
25+
}
26+
});
27+
28+
showBreedButton.addEventListener('click', async function () {
29+
const breed = inputBreed.value.toLowerCase();
30+
const response = await fetch(`${dogApiBaseUrl}/breed/${breed}/images/random`);
31+
32+
if (!response.ok) {
33+
contentDiv.innerHTML = '<p>Breed not found!</p>';
34+
return;
35+
}
36+
37+
const data = await response.json();
38+
39+
if (data.status === 'success') {
40+
contentDiv.innerHTML = `<img src="${data.message}" alt="${breed}" />`;
41+
} else {
42+
contentDiv.innerHTML = '<p>Breed not found!</p>';
43+
}
44+
});
45+
46+
showSubBreedButton.addEventListener('click', async function () {
47+
const breed = inputBreed.value.toLowerCase();
48+
const response = await fetch(`${dogApiBaseUrl}/breed/${breed}/list`);
49+
50+
if (!response.ok) {
51+
contentDiv.innerHTML = '<p>Breed not found!</p>';
52+
return;
53+
}
54+
55+
const data = await response.json();
56+
57+
if (data.status === 'success' && data.message.length > 0) {
58+
let subBreddsList = '<ol>';
59+
data.message.forEach(subBreed => {
60+
subBreddsList += `<li>${subBreed}</li>`;
61+
});
62+
subBreddsList += '</ol>';
63+
contentDiv.innerHTML = subBreddsList;
64+
} else {
65+
contentDiv.innerHTML = '<p>No sub-breeds found!</p>';
66+
}
67+
});
68+
69+
showAllButton.addEventListener('click', async function () {
70+
const response = await fetch(`${dogApiBaseUrl}/breeds/list/all`);
71+
const data = await response.json();
72+
const breeds = data.message;
73+
let allBreeds = '<ol>';
74+
for (const breed in breeds) {
75+
if (breeds[breed].length > 0) {
76+
allBreeds += `<li>${breed}<ul>`;
77+
breeds[breed].forEach(subBreed => {
78+
allBreeds += `<li>${subBreed}</li>`;
79+
});
80+
allBreeds += '</ul></li>';
81+
} else {
82+
allBreeds += `<li>${breed}</li>`;
83+
}
84+
}
85+
allBreeds += '</ol>';
86+
contentDiv.innerHTML = allBreeds;
87+
});
88+
}

‎hyperskill/07_dog_glossary/05/index.html

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Dog Glossary</title>
6+
<link rel="stylesheet" href="site.css">
7+
<script src="app.js" defer></script>
8+
</head>
9+
<body>
10+
<div class="main">
11+
<h1>Dog Glossary</h1>
12+
<div class="search-bar">
13+
<button id="button-random-dog">Show Random Dog</button>
14+
<input type="text" id="input-breed" placeholder="Enter a breed">
15+
<button id="button-show-breed">Show Breed</button>
16+
<button id="button-show-sub-breed">Show Sub-Breed</button>
17+
<button id="button-show-all">Show All Breeds</button>
18+
</div>
19+
<div id="content"></div>
20+
</div>
21+
</body>
22+
</html>

‎hyperskill/07_dog_glossary/05/site.css

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
* {
2+
box-sizing: border-box;
3+
background: lightblue;
4+
}
5+
6+
.main {
7+
display: flex;
8+
flex-direction: column;
9+
justify-items: center;
10+
align-items: center;
11+
}
12+
13+
.search-bar {
14+
display: flex;
15+
flex-direction: row;
16+
justify-content: space-evenly;
17+
align-items: center;
18+
margin-bottom: 20px;
19+
padding: 20px;
20+
background: white;
21+
border-radius: 20px;
22+
}
23+
24+
h1 {
25+
align-self: center;
26+
}
27+
28+
button {
29+
color: white;
30+
background: dodgerblue;
31+
padding: 20px;
32+
border: none;
33+
margin: 5px;
34+
border-radius: 10px;
35+
}
36+
37+
input {
38+
padding: 20px;
39+
border: 2px solid dodgerblue;
40+
border-radius: 10px;
41+
margin: 5px;
42+
background: white;
43+
}
44+
45+
.content {
46+
background: lightblue;
47+
align-items: stretch;
48+
justify-items: stretch;
49+
}
50+
51+
.content ~ img {
52+
border: 2px solid dodgerblue;
53+
border-radius: 20px;
54+
}

‎hyperskill/07_dog_glossary/README.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,5 @@
33
My solution to the project [Dog Glossary](https://hyperskill.org/projects/323?track=65) on [Hyperskill](https://hyperskill.org).
44

55
Each stage of the project is in a separate folder.
6+
7+
![Dog Glossary](./img/dog_glossary.png)

‎hyperskill/07_dog_glossary/img/dog_glossary.png

637 KB
Loading

‎hyperskill/README.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,3 +25,5 @@ My [certificate](https://hyperskill.org/certificates/062a6479-a287-4220-9f0a-312
2525
| Project | Level | Status |
2626
| --------------------------------- | ----------- | ----------- |
2727
| [Dog Glossary](./07_dog_glossary) | Challenging | In Progress |
28+
29+
There are no certificates for this track yet.

0 commit comments

Comments
 (0)