Exercise

In this exercise we'll be combining several of the previous exercises to reinforce our learning.

The goal is to allow the user to fetch a random user from our API. The user can continue to fetch random users until they have requested a total of 5 invalid users.

The request API URL for fetching a user is: https://reqres.in/api/users/[id] where the [id] is replaced with the user's unique identifier. The API currently has valid user's whose id is 1 through 12. A user id of 13 or greater will result in a 404 error.

1. Open exercise on codesandbox.
2. After the map() operator that returns a random integer between 10 and 15, use the mergeMap() operator, which will receive the id of the user to fetch.
3. Within the mergeMap() operator use the ajax.getJSON() method to make an HTTP GET request to the API for the specified user id.
4. Use the map() operator to map the response to its data property.
5. Use the catchError() operator to catch an error, and update the output textarea's value with the error's message property value. Then, rethrow the error using the throwError() operator.
6. Use the retry() operator to retry errors from the API and to prevent the Observable of the click events from completion via the error notification.
7. Use the finalize() operator to add the cursor-not-allowed and opacity-50 classes to the btn element when the retry count has extinguished.

Hints:

• Note the next() callback function in the Observer. You can use similar code in the catchError() callback function in order to update the textarea value and scroll the textarea to the bottom.
• Use the Element.classList property on the btn element to add the necessary classes.