Assignment 4

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

For this assignment, you are going to build the following application using React: https://itp404-assignment-4.surge.sh. This application uses the icanhazdadjoke API similar to Assignment 2. It must behave exactly the same as the example, but you're free to style it however you wish.

  • Render a list of jokes returned from the API with pagination.
  • When you're on the first page, the Previous Page button should be disabled. See this example on how to do this.
  • When you're on the last page, the Next Page button should be disabled.
  • Display the current page
  • Display the total number of pages
  • You must use fetch instead of $.ajax.
  • The list of jokes should use id as the unique key.

A loading indicator is optional. The example does not have one.

This API requires sending the Accept HTTP header. Setting the Accept header to application/json tells the API to respond with JSON. Here is an example of how to do that with fetch:

fetch("https://icanhazdadjoke.com/search?page=1", {
  headers: { Accept: "application/json" },
});

Submission

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