Development Environment

For this assignment, it is up to you if you'd like to use CodeSandbox or set up a React application locally using Create React App.

Requirements

Working Version: https://404-assignment-3-solution.surge.sh/

You are going to create a React application that fetches and renders a random dad joke from the icanhazdadjoke API.

Similar to Assignment 2, this API requires sending the Accept HTTP header. For example:

$.ajax({
  type: 'GET',
  url: 'https://icanhazdadjoke.com/',
  headers: { Accept: 'application/json' },
}).then(data => {
  console.log(data);
});

1. Render a dad joke on initial page load.
2. Underneath the joke, display a button with the label "Give me another dad joke". This button should live in the App component. When this button is clicked, fetch another random dad joke and render it. There should only be one dad joke displayed on the page at a time.
3. The dad joke that is rendered should be in its own component. Style it a little bit using a CSS class. Remember to use className instead of class.
4. While a dad joke is being fetched (on initial page load and when the button is clicked), display a loading indicator using one of these CSS spinners. This loading indicator should be in its own component. Be sure to change the foreground color to something other than white if your app has a white background.

Submission

Create your GitHub repository here: https://classroom.github.com/a/HKLsMqz-.

If you used CodeSandbox, paste your link on a README.md file in the root of your repository and push up that file. You are done!

If you used Create React App, deploy your React project to Surge. Paste your Surge link on a README.md file in the root of your repostiory. Push up all of your code to your GitHub repository. You are done!