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

1. Fetch data from https://dogapi.dog/api/v2/breeds;

2. Parse the JSON response;

3. If the data is successfully fetched, proceed to the next step;

4. If an error occurs while fetching data, display "Failed to load breeds. Please try again later." in the error-message element.

• Use fetch('https://dogapi.dog/api/v2/breeds') to fetch data from https://dogapi.dog/api/v2/breeds;

• Use response.json() to parse the JSON response;

• After parsing the data in the following then block, call the displayBreeds function and provide data.data as an argument;

• In the catch block, handle any potential errors.