Move the fetch().then().then()... call to this function

Try calling your fetchJoke function from the console and make sure it keeps adding jokes to the page.

Create a variable named jokeContainer and call document.querySelector() to get a reference to your element.

Make sure to call this function in your index.js before you call fetchJoke

Update the rendersJokeToPage function so that it clears out the container and then appends the joke element to the container

Create a variable named jokeButton and call document.querySelector() to get a reference to your element.

Call addEventListener so that on "click", the browser calls your fetchJoke function

This function should call your fetchJoke function 5 times (adding all 5 jokes without clearing the container).

Note, you will need to update your rendersJokeToPage function. Consider creating a separate clearJokeContainer function...

Create a button and event listeners for a button that will run the fetchMultipleJokes function when it is clicked.

This address returns an array of category names: https://api.chucknorris.io/jokes/categories

For each item in the list, add the category name as list items to an unordered list.

Display the unordered list on the page.

When the user clicks one of the list items, it should save the category name to a variable.

Display the current category on the page in an h2 element before/above the list of categories.

After the user chooses a category, clear out any existing jokes.

When they click a button to get one joke or multiple jokes, use the category name as part of the address.

The format is: https://api.chucknorris.io/jokes/random?category={category}

For example, for jokes about food, the category is "food" and the address is https://api.chucknorris.io/jokes/random?category=food