Skip to content

Hyperskill javascript core solutions #259

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 7 commits into from
Feb 8, 2024
Merged

Hyperskill javascript core solutions #259

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
5f86fac
feat: add starter code for the new project
sswietoniowski Feb 8, 2024
af9b547
feat: solved 1st stage of the Hyperskill project "Dog Glossary"
sswietoniowski Feb 8, 2024
16fbc25
feat: solved 2nd stage of the Hyperskill project "Dog Glossary"
sswietoniowski Feb 8, 2024
d3efdb7
feat: solved 3rd stage of the Hyperskill project "Dog Glossary"
sswietoniowski Feb 8, 2024
9bed5a8
feat: solved 4th stage of the Hyperskill project "Dog Glossary"
sswietoniowski Feb 8, 2024
1fdee76
feat: solved 5th stage of the Hyperskill project "Dog Glossary"
sswietoniowski Feb 8, 2024
5a04a90
docs: update the documentation
sswietoniowski Feb 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 21 additions & 0 deletions hyperskill/07_dog_glossary/01/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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" />`;
}
});
}
14 changes: 14 additions & 0 deletions hyperskill/07_dog_glossary/01/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
3 changes: 3 additions & 0 deletions hyperskill/07_dog_glossary/01/site.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
* {
box-sizing: border-box;
}
Empty file added hyperskill/07_dog_glossary/02/.gitkeep
View file
Open in desktop
Empty file.
43 changes: 43 additions & 0 deletions hyperskill/07_dog_glossary/02/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
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 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>';
}
});
}
16 changes: 16 additions & 0 deletions hyperskill/07_dog_glossary/02/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
<!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>
<div id="content"></div>
</body>
</html>
3 changes: 3 additions & 0 deletions hyperskill/07_dog_glossary/02/site.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
* {
box-sizing: border-box;
}
67 changes: 67 additions & 0 deletions hyperskill/07_dog_glossary/03/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
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 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>';
}
});
}
17 changes: 17 additions & 0 deletions hyperskill/07_dog_glossary/03/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
<!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>
<div id="content"></div>
</body>
</html>
3 changes: 3 additions & 0 deletions hyperskill/07_dog_glossary/03/site.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
* {
box-sizing: border-box;
}
88 changes: 88 additions & 0 deletions hyperskill/07_dog_glossary/04/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
});
}
18 changes: 18 additions & 0 deletions hyperskill/07_dog_glossary/04/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
3 changes: 3 additions & 0 deletions hyperskill/07_dog_glossary/04/site.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
* {
box-sizing: border-box;
}
Loading