Hey, in this lesson, we're building out a joke API, so that allows us to connect to the Chuck Norris
API and get jokes back from the Chuck Norris API.
And there was a warning for this lesson that some of these jokes there might be not your style.
So you are welcome to skip this.
Some of the jokes, they might be offensive.
So keep that in mind that we're not writing the jokes.
We're just connecting to that endpoint, the API and getting some of the content back in order to practice
constructing Web applications.
So this is an open, free JSON API that we can connect to.
And they've got some documentation on the websites as well.
So at the end, we are going to create an application that's going to generate a number of categories.
When you click the category, it allows us to get a random joke from that category and displayed on
the page.
I've made the jokes text fairly small again because we don't want to focus too much on the text of the
joke, but more on the JSON data and create an application.
We can also search for a search term and that will return back the joke according to whatever the search
term is.
So we do have the usage where we can just get a random joke.
We're going to be also covering how we can generate and get the categories list.
So this is just an array of all the different categories that are available for the jokes.
And then from the categories we can select a random joke.
So building out the categories, list dynamically of buttons and then selecting from those buttons and
generating random joke from those categories and also being able to search to return back joke results
and then outputting the content onto our page and making a fully interactive web application that's
going to be driven from JSON data within the Chuck Norris API.
The assessment we're going to be connecting to the joke API that Chuck George and George API.
So the HTML file is set up the same way as in the earlier lessons where we've got the HTML elements
that we can interact with the button, also update and get an input value and with the each one have
a title and then linking to a new file.
So that's up seven G.S. And in this case we've just got the basics as well, starting out with connecting
to the elements on the page, connecting them to objects that we can use in JavaScript and then adding
an event listener to the object.
So when I click the button, we've got ready coming up and we're ready to start interacting and getting
some content from the Endpoint API.
So this is the API, Chuck Norris start all sorts of free JSON API and allows you to send.
Chuck Norris jokes.
So this is a free app that you can interact with.
You can also do a free text search by sending to Chuck and then questionmark with the search term.
So we'll try out a few of these different ways of making connections as where we can get jokes from
particular categories.
So they've broken it apart within categories.
So this is also a Jason list that we can use as well.
So let's make an interactive application using this Chuck Norris joke.
And point.
So first of that, we want to do is update and add that you are all that we're connecting to.
So the base URL for the Chuck Norris jokes is going to be this.
So jokes random.
And if we do want to have the search query that we'd have to remove at random so that we could accommodate
for search for random four categories.
So let's just have the base, your URL and then when you click the button.
And this will output the joke.
And actually, let's do the get joke, so that's the euro that we're going to make the Thach request
to such request to the euro and return back the response object and then take the response object and
return it as JSON and then get the JSON data and then we're going to put that onto the console.
So it's going to be the data, so the URL that we want to connect to, so this is just going to be jokes,
random, so outputting and using the get joke and let's updates and create a temp yourself.
And your URL is going to use the base, your URL, and then add to it just the text of random.
So that will return back a random joke.
And let's use this as the URL that we're connecting to you and also to just update us to one so they're
not passing in and we're not any confusion with the URL variable.
So refresh click the button.
And just double check the code, click the button, and that should return back.
OK, so we've got the basic so we've got the categories and we've got a value that's being returned.
So the actual joke is sitting within the value.
So there's our joke and whenever we click it, we can output a different joke.
So let's add the joke to Page.
And we'll take Output's clean out the inner HTML and add the joke to the page, so we'll just add and
append whatever we've currently got on the page with whatever we've got for the value.
And instead of doing a console like, we're going to just put it to the page.
So this gives us an opportunity to click and update and get different jokes.
Let's also try the search of the jokes.
So instead of.
The random one, well, we'll do a search query and then we'll also get all of the categories, list
them out and have those as clickable buttons that we can get jokes from within those categories or making
the API request.
So let's update this to be the search query.
So this button is going to take the value from the search and let's update the parameters so jokes and
update that to include search and then whatever the query value is.
So let's get the value, the query value and we can get this from input value.
So whatever the current value is, and that's going to be our query value.
So add that as a valuable one.
And also we want to make sure that we don't have a vowel, an empty value.
So let's add in test as a default value for vowel.
Because currently, within the input, we don't have any contents there, so let's refresh.
And for now, we'll console, logout the tempura, and then we can open up the browser just to make
sure it's working.
So that is turning back some results.
And the reason we're not getting the joke being added is that this is returning back an array of content.
So we've got a number of results that are being returned back.
So we can't send it over to get joke where we have to get jokes for this case.
So this is going to be in case we've got multiple items that are being returned, so do the similar
type format where we've got the Thach request.
And except we're going to cancel logout the results as data so we can take a closer look at the object
that's being returned.
And this would actually be going to get jokes.
So it's safe and we're getting a total of one hundred and fifty six results.
Let's try this result, so one hundred and thirty one results, so the input field is returning back
a different set of results.
So the array here is contained within result, so let's update output and set that the HTML as we're
going to be clearing out the output and we want to get whatever was searched for the total results.
So let's add in the search term.
And that's going to be equal to the Vall one.
So do the search term.
And we can output search term here found and then the number that we've found, and this is just coming
from the JSON data under total, so data that total will return back the total number of results that
were found.
So test found results.
So I read found six hundred and seventeen results, so it is changing and we are able to update it.
Let's try another one and big search finds one hundred and thirty one results.
So all of the content is contained within the results.
And this is where we can loop through and we can add the jokes.
So taking data results and using for each.
We're going to live through each one of the results, so each one of these jokes and how about we output
the joke onto you into the console?
And just make sure you get the brackets around joke, and that's what's being returned, and that actually
should be results, not results.
So that's why it wasn't able to find the results.
So we've got categories as an array because it might contain multiple categories.
It's got an icon, you URL and ID, your URL and a value.
So the value is the one that we can use to output the joke.
So if you want to add the joke to the page, we can select the joke and get the value.
And then as we're looping through, that should add all of the jokes to the page.
So let's try another one, do something like happy and that return back the results so you can style
this and customize it as needed.
The other option is that I want to loop through the array of categories and provide a way to select
the contents of those categories and put those on the page.
And I'm just going to add in a line break so that we'll add in a line, breaks a little local jokes
are separated, and next, let's loop through the categories.
So as we load the page content, we did have an option for categories.
So these are all the different categories that we can search under.
So once the page loads.
We can make a fat request.
And build Cats'.
And just run the function to build the categories and we're going to make fetch request for the building
of the categories, so let's set up the function and build cats.
So to build all of the categories on the page, to select the categories and add buttons to the page
according to the categories.
So using the jokes as the base, you are where you make a fêtes request to get the categories.
So let's first start by creating our new URL temp and we're going to use the user well one as the base
and then just append it with the categories and this will return back the categories and you can console
logout that your URL so that we can be sure that what you are all working with.
Let's load the page, build the categories, click the link to make sure that you're getting the categories.
And this is presented within an array format.
So that means that the returned results we can iterate through and we can output onto the page.
So let's make our Futch request to the Eurail.
So making our Futch request to the U.
RL temp value and returning back our response object.
And from that response object, this is JSON formatted, so we're able to return it back as JSON.
And then lastly, let's do the last promise where we're getting the data results return back and we
want to loop through the data.
So let's do a console log and check out what we've got for data.
So this would provide us a list of the categories.
And from these categories, we can then take data and use for each and loop through each one of the
category and then use those and create some buttons on the page.
And this action needs to be button one or button temp or create some temporary buttons, so document
create elements and the element that we're creating is going to be a button and the button text button
temp text content is going to be equal to whatever we've got for the cut value.
And then we want to append these to the page.
So let's take the button and we're going to hand it to button.
And append the button temp object to the button.
Actually, we're going to hand it to the H1.
So first will clear the one.
And update the inner HTML.
So that gives us a listing of all the buttons and let's make the buttons clickable so that whenever
we click the button, we can make the request to get the jokes and we're not going to be doing the search
term.
This time we're going to be doing the category, as in the documentation, it provides us an option
to get content by categories.
So we've got the category and we can select a random joke from a category.
So that's going to be the Web URL that we want to use.
So let's add in to the button temp at an event, listener to the bottom temp.
So adding in the click event and then the event object.
And this is where we can make the Thach request.
And this is going to be the end point that we want to request to, and we've also got the category here
so undercut, so console log and just make sure that we have the text object that's ready to use.
So refresh and that's getting the category as text.
So we do need that in order to get the temporary URL.
So for this temporary URL.
We're going to use that URL and then concatenate to it random and then whatever the category value is
so advertised as a string and then lastly, add the category to it and then we can make a fetch request
to the temp you URL and then return back the response object and the response can be responded back
and return back as JSON and then once we have the content.
So that's going to be the JSON content.
We should have a value that's contained within there and phrenologists console log out the JSON data
and that should be able to return back that value and that will be the joke from the random joke in
that category.
So we've got a random joke within the category.
When we click the categories, we can return back those jokes that are associated with those categories.
And then also, just as we did before, we can add the joke content.
And here we just add the joke from the Jason value, and now whenever we click, we can get a joke from
the particular category.
Also, if we want, we can also clear out the inner HTML.
So before we are joke.
We can specify to the user which category it is that we're adding the joke from and just specify the
category.
And also add to that.
Or horizontal rule, so category and then whatever joke that we've got for the category.
So there we go and we've completed the Web application, you can apply styling to the elements as well.
And Curser Pointer, and this is just for the buttons, let's make the font size bigger border.
And you can apply whatever styling suits your your design, it's just some quick styling for the buttons
themselves and I'm going to add that to each one of the button.
Temp's using class list and then add and the class that I'm adding is the buttons.
And actually, let's make this smaller, it's coming across fairly large.
And a little bit less padding, so but we try eight picks and I'll do a margin around them as well,
so some space around the buttons and it looks like we need just a touch more padding.
And usually because these are buttons, clickable buttons, I like to have the hover effect, and I
usually typically will use the opacity so that whenever you hover over it, you get that kind of button
feel to them.
There's also the ones like Text Transform.
We can capitalize the text, can also change it to uppercase as well.
And just click through it, make sure that it's working and also for output.
And I was just at the march on here to Otto and said a default with.
70 percent and a border.
So that will output the content and also I'm going to add in a font size for the content.
And you can also apply staling to the input and to the click me button, so the click me button is actually
a search.
So that's search.
These ones are clickable categories, and I am going to apply some styling to the input.
As well as to the button object.
And let's update the font size to two.
And check those to display as Vlok.
And actually, I'm going to do this in line block.
So that will apply some spacing.
And let's do a text, a line, and we can central line the text.
And if we want to align this, the central line that we'd have to have an element wrapping it and that
way we could align it, we could also set with all of the inputs 50 percent.
And that's actually setting on the button as well, so just leave that and we can set to the button.
And it's the button class.
And let's make the font size even bigger.
So that gives us a better search option where you can search for all the related text, we can select
a joke at random from a category that's up to you to take it from here and update your application accordingly.
This is a practice lesson to connect to an end point and get juice on data back and construct a dynamic
Web application that changes depending on the data that we're getting back from the endpoint.