Homework/Lab: AJAX & APIs

API of your choice!

Put your newfound AJAX skills to use! Find an API and build a simple single-page-app that uses that API.

List of public APIs here: https://github.com/public-apis/public-apis

Make sure you read the docs and test out some simple requests to the APIs before diving too deep. Not all of them are easy to use. The simplest ones to use will be those that use apiKeys for auth.

What it needs to do

  • Your web page should make a request to one or more APIs using fetch or axios.get

  • Some information/results from the API should be shown on the web page

  • The request to the API should depend on what the user enters (basically it shouldn't only make 1 identical API call all the time)

    • E.g. The user enters a search and it shows a list of results

    • E.g. The user selects a location from a drop down and it shows the weather for that location

Choose your heat level

Mild

Keep it simple with a single API but challenge yourself by making your app hit different API endpoints.

Spicy

Create an API mashup where you combine two or more APIs in one app!

Examples:

Dog Breed Gifs

  • Get a list of breeds from TheDogAPI and use the results to populate a list the user can choose from

  • When the user chooses a dog breed, request gifs of that dog breed from the Giphy API and display them

Last updated