Challenge: Fetch and Use API Data
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-messageelement.
index.html
index.css
index.js
- 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
thenblock, call thedisplayBreedsfunction and providedata.dataas an argument; - In the
catchblock, handle any potential errors.
index.html
index.css
index.js
Thanks for your feedback!
Ask AI
Ask AI
Ask anything or try one of the suggested questions to begin our chat
Can you show me the HTML structure for displaying the breeds and error messages?
What should the `displayBreeds` function do with the breed data?
Do you need help writing the JavaScript to fetch and display the breeds?
Awesome!
Completion rate improved to 2.22
Challenge: Fetch and Use API Data
Swipe to show menu
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-messageelement.
index.html
index.css
index.js
- 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
thenblock, call thedisplayBreedsfunction and providedata.dataas an argument; - In the
catchblock, handle any potential errors.
index.html
index.css
index.js
Thanks for your feedback!