Non-alcoholic Drinks (JSON)

Home

Dataset Information

For this exercise, we will use data from the CocktailDB API. Specifically we will use the "Filter by alcoholic" endpoint to fetch a list of non-alcoholic drinks. Consult the API documentation to learn more.

Part 1

Write JavaScript code to answer the questions below. Log each of the answers to the console.

  1. Consult the API documentation to learn which URL to use to fetch information about non-alcoholic drinks. Store the URL in a variable called requestURL. HINT: ensure your URL begins with "http://" or "https://".
  2. Fetch the data using the specified URL.
  3. Display the number of non-alcoholic drinks (i.e. 58).
  4. Loop through the drinks, and display the name and unique identifier of each.

Part 2

Write JavaScript code to answer the questions below. Display the answers on the page in the designated areas.

  1. Using the designated span element below, display the number of drinks (i.e. 58).
  2. Loop through the drinks, and display the name and image for each. Using the provided div element below, create a new child div element for each drink. The child div element should contain a p tag to display the drink name, and an img tag to display the image (using an image height of 100px).

Display

Drinks: TODO