Зміст курсу
Advanced JavaScript Mastery
Advanced JavaScript Mastery
Challenge: Working with API
Task
You are building a webpage that displays a list of dog breeds and their information fetched from the Dog API. When the user clicks the "Load Breeds" button, data should be fetched from the API, and breed information (name, description, and life span) should be displayed on the webpage. Handle any potential errors and provide feedback in the HTML.
Fetch Data from API: When the "Load Breeds" button is clicked
- Fetch data from
https://dogapi.dog/api/v2/breeds
; - Parse the JSON response;
- If the data is successfully fetched, proceed to the next step;
- If an error occurs while fetching data, display
"Failed to load breeds. Please try again later."
in theerror-message
element.
index
index
index
- Use
fetch('https://dogapi.dog/api/v2/breeds')
to fetch data fromhttps://dogapi.dog/api/v2/breeds
; - Use
response.json()
to parse the JSON response; - After parsing the data in the following
then
block, call thedisplayBreeds
function and providedata.data
as an argument; - In the
catch
block, handle any potential errors.
index
index
index
Дякуємо за ваш відгук!