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-message
element.
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
then
block, call thedisplayBreeds
function and providedata.data
as an argument; - In the
catch
block, handle any potential errors.
index.html
index.css
index.js
Grazie per i tuoi commenti!
Chieda ad AI
Chieda ad AI
Chieda pure quello che desidera o provi una delle domande suggerite per iniziare la nostra conversazione
Awesome!
Completion rate improved to 2.22
Challenge: Fetch and Use API Data
Scorri per mostrare il 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-message
element.
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
then
block, call thedisplayBreeds
function and providedata.data
as an argument; - In the
catch
block, handle any potential errors.
index.html
index.css
index.js
Grazie per i tuoi commenti!