Assignment 6: Exploring Fetch and Public APIs

Requirements

• Include some basic styling (at least 3 CSS rules).
• Use fetch to call at least two different APIs.
• Display the data from both APIs inside your webpage.
• Include at least one button that fetches new data and updates the page.
• Your code must:
  • Dynamically update content or styles in the DOM.
  • Extract and display specific fields from the JSON response.

Suggested Starter APIs

These APIs are easy to use and require no authentication:

• You cannot use the Dog API from the class example
• Advice Slip API – random advice
• Official Joke API – random jokes
• Bored API – random activity suggestions
• The Meal DB – random meal descriptions

NOTE: I have not vetted everything that may appear in these APIs. I apologize in advance if you encounter anything unpleasant!

More APIs to Explore

You can also use other public APIs from this list:

Big List of Public APIs

Be aware: some APIs on that list are much harder to use than others. Try to find a simple one.

Example from Class

Here is the random dog image example from class. Use developer tools to look at the code details. If you do not know how to do this, take the time to learn thi week. Feel free to come to office hours!

Submission

• Commit your files (with the correct folder and filenames) to your course repository (06-fetch-apis).

csc336-fall2025/06-fetch-apis/index.html
csc336-fall2025/06-fetch-apis/style.css
csc336-fall2025/06-fetch-apis/script.js

• Your project must be accessible via this link:

https://your-username.github.io/csc336-fall2025/06-fetch-apis/