4: Accessing Remote APIs

Create a web page that fetches and displays data from three different remote APIs and displays it on the page.

Project folder

In your 📁 /javascript-projects or whatever folder holds all your JavaScript projects, create a new subfolder named 📁 /remote-apis.

In this subfolder, create a web page file named index.html.

Use this index.html file for the HTML, CSS and JavaScript code of this project.

Include your name and student ID in the <title> tag of your index.html file.

Git version control and Vercel

Make your 📁 /remote-apis project folder a Git repo and push it to GitHub.

When your project is complete, import it into Vercel.

Overview

Your completed web page should:

  • Contain three buttons. Clicking each button will fetch data from a different API and display it in a grid layout.
  • The three base API endpoints are:
    https://restcountries.com/v3.1/region/europe
    https://jsonplaceholder.typicode.com/users
    https://rickandmortyapi.com/api/character
  • Fetch data using async/await syntax.
  • Handle any errors that may occur during the API requests.
  • The fetch countries code will offer a dropdown list allowing users to search by region.
  • The fetch Rick & Morty code will offer a search box allowing users to search by character.

Guidelines

Follow the directions in the Tutorials below:

Add comments to your code.