Submit this assignment in CodeSandbox.

If you're interested in developing with React locally, you are welcome to do that. However, please copy over your code to CodeSandbox, verify that it works as expected, and submit that URL. This makes grading and helping out much easier.

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:

fetch("https://icanhazdadjoke.com/", {
  method: "GET",
  headers: { Accept: "application/json" },
})
  .then(response => {
    return response.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

Send an email to me and the TA with your CodeSandbox link. Use "ITP 404 - Assignment 3" as the email subject.