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

Course Content

Advanced JavaScript Mastery

Advanced JavaScript Mastery

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

bookChallenge: Working with Third-Party Libraries

Task

You're building a detailed breed information display. After fetching breed data from the API, you'll display each breed's name, description, life span, male and female weight ranges, and hypoallergenic status.

  1. Use Axios to fetch data from the https://dogapi.dog/api/v2/breeds when the "Fetch Breeds" button is clicked, wrapping the request in a try-catch block.
  2. If there's an error during the API request, hide the loading indicator and display an error message.
html

index

css

index

js

index

copy
  • Use axios.get('https://dogapi.dog/api/v2/breeds') to fetch data from the API;
  • In the catch block, handle the error.
html

index

css

index

js

index

copy

Everything was clear?

How can we improve it?

Thanks for your feedback!

Section 4. Chapter 9
some-alt