Skip to content

Commit 3aa47bd

Browse files
sswietoniowskisswietoniowski
authored
Merge pull request #259 from sswietoniowski/hyperskill_javascript_core_solutions
Hyperskill javascript core solutions
2 parents ba3128b + 5a04a90 commit 3aa47bd

File tree

19 files changed

+477
-0
lines changed

19 files changed

+477
-0
lines changed

‎hyperskill/07_dog_glossary/01/app.js

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
window.onload = function() {
2+
const randomDogButton = document.getElementById('button-random-dog');
3+
const contentDiv = document.getElementById('content');
4+
5+
const dogApiBaseUrl = 'https://dog.ceo/api';
6+
7+
randomDogButton.addEventListener('click', async function() {
8+
const response = await fetch(`${dogApiBaseUrl}/breeds/image/random`);
9+
10+
if (!response.ok) {
11+
contentDiv.innerHTML = 'Error fetching random dog';
12+
return;
13+
}
14+
15+
const data = await response.json();
16+
17+
if (data.status === 'success') {
18+
contentDiv.innerHTML = `<img src="${data.message}" alt="Random dog" />`;
19+
}
20+
});
21+
}

‎hyperskill/07_dog_glossary/01/index.html

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Dog Glossary</title>
6+
<link rel="stylesheet" href="style.css">
7+
<script src="app.js" defer></script>
8+
</head>
9+
<body>
10+
<h1>Dog Glossary</h1>
11+
<button id="button-random-dog">Show Random Dog</button>
12+
<div id="content"></div>
13+
</body>
14+
</html>

‎hyperskill/07_dog_glossary/01/site.css

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
* {
2+
box-sizing: border-box;
3+
}

‎hyperskill/07_dog_glossary/02/.gitkeep

Whitespace-only changes.

‎hyperskill/07_dog_glossary/02/app.js

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
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+
7+
const dogApiBaseUrl = 'https://dog.ceo/api';
8+
9+
randomDogButton.addEventListener('click', async function() {
10+
const response = await fetch(`${dogApiBaseUrl}/breeds/image/random`);
11+
12+
if (!response.ok) {
13+
contentDiv.innerHTML = 'Error fetching random dog';
14+
return;
15+
}
16+
17+
const data = await response.json();
18+
19+
if (data.status === 'success') {
20+
contentDiv.innerHTML = `<img src="${data.message}" alt="Random dog" />`;
21+
} else {
22+
contentDiv.innerHTML = 'Error fetching random dog';
23+
}
24+
});
25+
26+
showBreedButton.addEventListener('click', async function() {
27+
const breed = inputBreed.value.toLowerCase();
28+
const response = await fetch(`${dogApiBaseUrl}/breed/${breed}/images/random`);
29+
30+
if (!response.ok) {
31+
contentDiv.innerHTML = '<p>Breed not found!</p>';
32+
return;
33+
}
34+
35+
const data = await response.json();
36+
37+
if (data.status === 'success') {
38+
contentDiv.innerHTML = `<img src="${data.message}" alt="${breed}" />`;
39+
} else {
40+
contentDiv.innerHTML = '<p>Breed not found!</p>';
41+
}
42+
});
43+
}

‎hyperskill/07_dog_glossary/02/index.html

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

‎hyperskill/07_dog_glossary/02/site.css

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
* {
2+
box-sizing: border-box;
3+
}

‎hyperskill/07_dog_glossary/03/app.js

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
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+
8+
const dogApiBaseUrl = 'https://dog.ceo/api';
9+
10+
randomDogButton.addEventListener('click', async function() {
11+
const response = await fetch(`${dogApiBaseUrl}/breeds/image/random`);
12+
13+
if (!response.ok) {
14+
contentDiv.innerHTML = 'Error fetching random dog';
15+
return;
16+
}
17+
18+
const data = await response.json();
19+
20+
if (data.status === 'success') {
21+
contentDiv.innerHTML = `<img src="${data.message}" alt="Random dog" />`;
22+
} else {
23+
contentDiv.innerHTML = 'Error fetching random dog';
24+
}
25+
});
26+
27+
showBreedButton.addEventListener('click', async function() {
28+
const breed = inputBreed.value.toLowerCase();
29+
const response = await fetch(`${dogApiBaseUrl}/breed/${breed}/images/random`);
30+
31+
if (!response.ok) {
32+
contentDiv.innerHTML = '<p>Breed not found!</p>';
33+
return;
34+
}
35+
36+
const data = await response.json();
37+
38+
if (data.status === 'success') {
39+
contentDiv.innerHTML = `<img src="${data.message}" alt="${breed}" />`;
40+
} else {
41+
contentDiv.innerHTML = '<p>Breed not found!</p>';
42+
}
43+
});
44+
45+
showSubBreedButton.addEventListener('click', async function() {
46+
const breed = inputBreed.value.toLowerCase();
47+
const response = await fetch(`${dogApiBaseUrl}/breed/${breed}/list`);
48+
49+
if (!response.ok) {
50+
contentDiv.innerHTML = '<p>Breed not found!</p>';
51+
return;
52+
}
53+
54+
const data = await response.json();
55+
56+
if (data.status === 'success' && data.message.length > 0) {
57+
let subBreddsList = '<ol>';
58+
data.message.forEach(subBreed => {
59+
subBreddsList += `<li>${subBreed}</li>`;
60+
});
61+
subBreddsList += '</ol>';
62+
contentDiv.innerHTML = subBreddsList;
63+
} else {
64+
contentDiv.innerHTML = '<p>No sub-breeds found!</p>';
65+
}
66+
});
67+
}

‎hyperskill/07_dog_glossary/03/index.html

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

‎hyperskill/07_dog_glossary/03/site.css

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
* {
2+
box-sizing: border-box;
3+
}

‎hyperskill/07_dog_glossary/04/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/04/index.html

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

‎hyperskill/07_dog_glossary/04/site.css

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
* {
2+
box-sizing: border-box;
3+
}

0 commit comments

Comments
 (0)