The interesting challenge for this lesson is we're connecting to a joke API and this joke API only allows
us to have 10 requests per hour on the free application.
So when you build out the application, the challenge is going to be when you make your request, get
the structure of the JSON data that you want to output on the page within.
Less than the 10 requests, otherwise you're going to have to wait an hour in order to complete it.
So let's get started.
In this lesson, we're going to be connecting to API jokes, dot one website, so they've got an open
API where you can return back a joke of a day and then you can sign up and you can get a key and you
can return back even more content from the API.
So we're going to be just using a basic connection and running our code to make a connection to the
API.
So we've got our standard HTML templates, so few different elements on the page.
We've got a main container that contains an input, a button and an output class and then linking to
code one G.S. and then we've got the code one G.S. content.
So what we want to do is connect to the button first.
So create the JavaScript code and using the document object and query selector, we're selecting the
element with a class of button.
And then we'll add in that listener that's going to make the request to the endpoint, so to the button
out of that listener and whatever, the button gets clicked.
There are fire off the vent and this event is going to make the Futch request so fetch and also will
set a perimeter here for the euro of the end point.
So that's available at the joke one.
And forget joke of the day, so it's returning back the file, so that's the URL that we can use to
make the initial connection to so the joke of the day and then make the Futch request to the euro.
And once we get content back, so once we get the response back, then return the response object as
Jason.
And then lastly, take the data that's being returned back and then we'll put that into the console.
So we've got our initial connection making the request and we're returning it back as Jason data and
this is returning back the joke that we have and it's got the joke, it's got title and some of the
parameters of the joke itself.
And then we've got success on how many jokes that we were able to return back.
So now let's start let's take the joke contents and then we'll output it to the page.
So navigating through the object and then returning back and putting the contents of that particular
joke and also going to select the page elements.
So we've got the input elements and using the documents and query selector, select the input on the
page
and then take the input elements style.
And since we're not going to be using it, do a display, none of that content.
And then also for the output area, using the document and query selector, select the element with
a class of output.
And that will give us a container to put the content to whatever the button gets clicked and button.
Let's update the text content.
So it's going to get the joke of the day whenever the button gets clicked, and that will just simply
output the content at the bottom within that output area.
So let's start to navigate through the object, and if we do have a success value, so if the success
total is greater than one that we know that we can output content, so have a condition to check to
see if detA success total is greater than zero.
And if it is, then we know that we can make the request and output the jokes content.
And create a function where we can output the joke and the jokes themselves are going to be contained
within data and the object is jokes, and this is the array that is contained with.
So a pass through the full data object and then output the joke.
And taking in the joke information.
And we'll actually just call this data as well, and for now, we'll log it out into the console just
to make sure that we are getting the object passed properly.
And it looks like we're seeing undefined within the console, so there's nothing being output within
the data jokes.
So let's double check and output the contents of the console and see what we've got for data jokes.
So we're getting undefined going back to data.
And this is how you can troubleshoot the object to make sure that you are able to get the object properly.
So it's actually within a property name of contents and then that's where the joke is contained.
So adding in the contents and adding in the contents property value, now we're able to return back
the jokes content.
And see the joke within the console, so the joke content is under the joke, so there's a description
value that we can use as a heading.
So let's construct output for the page.
And set up the inner HTML, I can use the tactics for this.
And outputting the joke content, so setting up a separate variable for joke and because this is just
going to be using the first item within the array, that will return back the joke contents.
And then going into the array, we can output within the each one the joke and using the curly brackets,
let's output the joke description and close off each one.
So that added the joke of the day.
And for Output's or just concatenated to the current output and also update the Tuggle of the Wardrop
for the editor so that we can see the contents.
And now let's look at the next content that we want to output.
And we can output the category if we want the language.
And actually, let's just go right into the joke.
So the title of the joke.
So this is where we can have the actual joke content and this is going to be a div.
And the path is going to be joke, joke and title, and in order to put the joke itself, it's going
to be a joke joke text.
So that's going to put the joke content into the page and making our quest to the end point of the joke
and point.
And there is one thing to note as well for this.
So when we click it, we're getting this four twenty nine error.
So we're getting an undefined.
And when you do encounter these types of errors, what you can do is you can open it up within the Web
browser to check to see if there's an error with the end point.
And there is a message here that says too many requests, the rate limit of 10 requests per hour has
been exceeded.
So we've got to wait fifty one minutes in order to make another request.
That's what we're throwing the undefined.
And also, since we've got undefined, we're not able to read the total.
So be mindful of the fact that there are limitations on these open APIs.
So if you do encounter any of the issues, this is how you can troubleshoot them.
This lesson has an interesting challenge because as we saw within the lesson, that you can only make
10 requests per hour, so connect to the API, build your application and build it so that you're making
less than 10 requests to the endpoint API.
You can also try to store the structure that JSON structure so that within the 10 requests you build
one where you can make a request to the joke API without running out of request options for that our.