Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Challenge: Working with API | Asynchronous JavaScript and APIs
Advanced JavaScript Mastery
course content

Conteúdo do Curso

Advanced JavaScript Mastery

Advanced JavaScript Mastery

1. Classes
2. DOM Manipulation
3. Events and Event Handling
4. Asynchronous JavaScript and APIs

bookChallenge: 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

  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.
html

index

css

index

js

index

copy
  • 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.
html

index

css

index

js

index

copy

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 4. Capítulo 7
We're sorry to hear that something went wrong. What happened?
some-alt