Challenge: Work with Third-Party Libraries
Task
You're building a detailed breed information display. After fetching breed data from the API, you'll display each breed's name, description, life span, male and female weight ranges, and hypoallergenic status.
Use Axios to fetch data from the
https://dogapi.dog/api/v2/breedswhen the "Fetch Breeds" button is clicked, wrapping the request in a try-catch block.If there's an error during the API request, hide the loading indicator and display an error message.
index.html
index.css
index.js
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<button id="fetch-breeds">Fetch Breeds</button>
<p id="loading" style="display: none">Loading breeds...</p>
<p id="error-message"></p>
<div id="breed-list"></div>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="index.js"></script>
</body>
</html>
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
body {
font-family: 'Arial', sans-serif;
background-color: #f3f6fa;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
margin: 0;
color: #333;
padding: 20px;
}
button {
padding: 12px 20px;
font-size: 1rem;
color: #ffffff;
background-color: #007bff;
border: none;
border-radius: 6px;
cursor: pointer;
transition: background-color 0.3s ease;
margin-bottom: 20px;
}
button:hover {
background-color: #0056b3;
}
#loading {
font-size: 1rem;
color: #1d4ed8;
font-style: italic;
margin: 10px 0;
}
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
const fetchBreedsButton = document.getElementById('fetch-breeds');
const loadingMessage = document.getElementById('loading');
const errorMessage = document.getElementById('error-message');
const breedList = document.getElementById('breed-list');
function displayBreeds(breeds) {
breeds.forEach(breed => {
const breedDiv = document.createElement('div');
const breedName = document.createElement('h3');
const breedDescription = document.createElement('p');
const breedLifeSpan = document.createElement('p');
const breedWeight = document.createElement('p');
const breedHypoallergenic = document.createElement('p');
const breedGroup = document.createElement('p');
breedName.textContent = breed.attributes.name;
breedDescription.textContent = breed.attributes.description;
breedLifeSpan.textContent = `Life Span: ${breed.attributes.life.min}-${breed.attributes.life.max} years`;
breedWeight.textContent = `Weight (Male): ${breed.attributes.male_weight.min}-${breed.attributes.male_weight.max} kg, (Female): ${breed.attributes.female_weight.min}-${breed.attributes.female_weight.max} kg`;
breedHypoallergenic.textContent = `Hypoallergenic: ${
breed.attributes.hypoallergenic ? 'Yes' : 'No'
}`;
breedDiv.appendChild(breedName);
breedDiv.appendChild(breedDescription);
breedDiv.appendChild(breedLifeSpan);
breedDiv.appendChild(breedWeight);
breedDiv.appendChild(breedHypoallergenic);
breedDiv.appendChild(breedGroup);
breedList.appendChild(breedDiv);
});
}
async function fetchBreeds() {
loadingMessage.style.display = 'block';
errorMessage.textContent = '';
Use
axios.get('https://dogapi.dog/api/v2/breeds')to fetch data from the API;In the
catchblock, handle the error.
index.html
index.css
index.js
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<button id="fetch-breeds">Fetch Breeds</button>
<p id="loading" style="display: none">Loading breeds...</p>
<p id="error-message"></p>
<div id="breed-list"></div>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="index.js"></script>
</body>
</html>
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
body {
font-family: 'Arial', sans-serif;
background-color: #f3f6fa;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
margin: 0;
color: #333;
padding: 20px;
}
button {
padding: 12px 20px;
font-size: 1rem;
color: #ffffff;
background-color: #007bff;
border: none;
border-radius: 6px;
cursor: pointer;
transition: background-color 0.3s ease;
margin-bottom: 20px;
}
button:hover {
background-color: #0056b3;
}
#loading {
font-size: 1rem;
color: #1d4ed8;
font-style: italic;
margin: 10px 0;
}
99
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
const fetchBreedsButton = document.getElementById('fetch-breeds');
const loadingMessage = document.getElementById('loading');
const errorMessage = document.getElementById('error-message');
const breedList = document.getElementById('breed-list');
function displayBreeds(breeds) {
breeds.forEach(breed => {
const breedDiv = document.createElement('div');
const breedName = document.createElement('h3');
const breedDescription = document.createElement('p');
const breedLifeSpan = document.createElement('p');
const breedWeight = document.createElement('p');
const breedHypoallergenic = document.createElement('p');
const breedGroup = document.createElement('p');
breedName.textContent = breed.attributes.name;
breedDescription.textContent = breed.attributes.description;
breedLifeSpan.textContent = `Life Span: ${breed.attributes.life.min}-${breed.attributes.life.max} years`;
breedWeight.textContent = `Weight (Male): ${breed.attributes.male_weight.min}-${breed.attributes.male_weight.max} kg, (Female): ${breed.attributes.female_weight.min}-${breed.attributes.female_weight.max} kg`;
breedHypoallergenic.textContent = `Hypoallergenic: ${
breed.attributes.hypoallergenic ? 'Yes' : 'No'
}`;
breedDiv.appendChild(breedName);
breedDiv.appendChild(breedDescription);
breedDiv.appendChild(breedLifeSpan);
breedDiv.appendChild(breedWeight);
breedDiv.appendChild(breedHypoallergenic);
breedDiv.appendChild(breedGroup);
breedList.appendChild(breedDiv);
});
}
async function fetchBreeds() {
loadingMessage.style.display = 'block';
errorMessage.textContent = '';
Все було зрозуміло?
Дякуємо за ваш відгук!
Секція 4. Розділ 9
Запитати АІ
Запитати АІ
Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат
