S. is loaded with some really amazing mini applications that you can build in order to practice and
get a better feel for what you can do when you're making AJAX requests and getting back Jason data.
So first one that we're doing is making a simple request, a simple Futch request to an end point and
returning back the data that's contained within the endpoint and then outputting that data onto the
page.
So it's just loading to the endpoint, making a fetch request, getting the data back within a JSON
format, turning into JavaScript object and then creating the page elements accordingly.
The next application is also connecting to an endpoint.
So we're going to be connecting to the Wikipedia endpoint and making a request to return back content
for the search results.
So with user interaction, loading JSON data and then returning back, different search results accordingly.
So whatever we add in to this search, we're loading the JSON, it's constructing the customized end
point with the different parameters and then loading the data and putting it on the page.
And we're selecting from some of the data that's being returned back, such as the page ID and also
the size the word cat and a snippet of the code that's contained within the Wikipedia endpoint.
The next one is where we're searching on a map location.
So using the wiki map here, Doug, and we're just using an example of the API, so connecting to the
API with latitude and longitude, and it's searching for that area and then returning back the corresponding
results.
So just another endpoint where we can customize the request parameters and get different results back
depending on what we've entered in.
Next up is going to be another connection.
And this one is going to connect to several different and points and load the data from the endpoints.
And there's also going to be using the same functionality.
So repurposing some of the functions across multiple JSON endpoints so the data always isn't structured
the same.
So we're adjusting for what's being returned back and dynamically outputting content and looping through
the object data into an array and getting the property name and the value.
So a lot of practice with selecting and getting content back and then working with the JavaScript object
data that's coming from the JSON end point and utilizing it and making use of it.
There's also some debugging and what you can do to customize the content being output.
Next up is another endpoint and this one is selecting to the random user emy endpoint.
So it's returning back a random selection of users and then we can also click on the user and it's going
to highlight that user information so we can return back various amounts of users.
So if we want to get 50 results back, we can get 50 results back into the page and then make a selection
of the user.
It's going to highlight that information.
This is just a dummy data.
So this is a really good rich API that you can connect to.
And there's a quite a bit of data within the object that gets returned back.
So you can get some good practice here where you can select deep into the object data and output it
within your Web page as you make the AJAX requests return back that the data and then making another
request to get the customized information about that particular user.
Next up is another connection to a JSON.
So we're making a connection to the open, whether API and this one is limited so we can only make so
many requests.
So that one is another example of working with APIs.
And some of them, when you are working with the testing data, they're going to have limits to the
requests.
So just getting comfortable with seeing different error messages and how you can handle that.
And we're also going to be creating a connection to a joke API.
So this is a Chuck Norris style joke API first, when the page loads we go through the joke API and
we listed all the categories.
So this is all dynamically created and that goes for all of the applications.
Within this lesson.
We're starting out with a very basic page structure and then all of the content is actually generated
with JavaScript.
So if we actually look at the page source, it's very straightforward and we've only got the four elements
on the page and the rest of it is generated with JavaScript.
So this allows us to search the API, return back results from the API, and then we can output the
contents of those results from that request.
And we can also specify the different categories as well and list out content that are from that category.
So we make a selection, it's going to list out the content from the API.
It's going to go and make another feature request to the endpoint and list out the content accordingly.
So we also have another really nice API.
That's a great way to practice working with data so very similar to the jokes where we're loading out
different categories.
So this is done when the page loads.
So we're constructing the categories within the H1.
So we've got the six buttons dynamically generated from the endpoint.
So we make the request directly when we load the page.
And this again is very late on the HTML where we've got the four elements and then when we do make the
connection, we use the JavaScript code and we wait for the DOM content loaded that we make our request
to the endpoint and that gives us the loading of the categories and then from the categories we can
load out the different API data.
And then we're also generating and we're chunking the data into pages of 10 pieces of data and also
adding in buttons here so the user can select the piece of data that they want to look at.
So once they've selected it, they can click it and get more details about that piece of data.
And this is a way to practice navigating and providing some.
User selected content where we're connecting to the API and also getting the data that the user might
be looking for.
So it allows the user to select and return back data.
And once again, it's all done with JavaScript.
So when we have the four elements that we start out with and the rest is generated with JavaScript,
we're also connecting to a trivia database.
And this is also the same concept where we're focusing a lot on the JavaScript.
So we start with the four core elements that we did and the other lessons.
And then we generate this fully interactive trivia database game so where we can select the number of
questions that we want to do the category and dynamically select the category and also selective one
easy, medium and hard so that a lot of these are set with the endpoint.
And once the user's made their selection, we can start the game and it makes the connection.
Load's the question, the trivia question.
That information is presented within the API.
So coming back from the API, we've got incorrect answers as well as we've got a correct answer so we
can select the answer.
And if we got the correct answer, we it goes green, the other ones go red.
We can move to the next question.
And this one, if we get it incorrect, we don't score for that.
We move through the next questions.
And then lastly, and we get a score for the questions we scored one, you score one out of three questions
and then we can start again and generate fully dynamic interactive game.
And this is all data driven.
So it's all coming from the database, the trivia database.
And point was we make the selections that loads the appropriate data.
So that's the open ti db dot com API where we're making those selections from.
We also have a stock exchange API.
So this is our really robust API.
There's a lot of information contained in here so we can do a search for it within the Stack API so
it returns back the stock information, the object information, and we can select that and see more
content and then also go back in and search for more stuff within the Stack API and really getting a
good opportunity to practice getting and outputting the page content coming from the API endpoint and
getting the JSON data and using it within the Web page.
We also have another one where we're loading country information.
So what this does is this loads a full list of over two hundred and fifty countries with all of this
data that's contained here.
So minimizing the requests to the endpoint, we're going to be connecting to this API with the one initial
connection and then just returning back.
And it's all JavaScript that's going to be chunking all of the pages.
So generating all of the different pages that we can click through.
This is all done with JavaScript dynamically setting and allowing us to select the different page pages
so all the data is chunked and allows us to output.
So simulating connecting to an API, getting a whole lot of JSON data and then making use of that data
within the webpage.
And the source code for this one as well is just the initial for each HTML elements and then the rest
is generated and done with JavaScript.
And there's also another take on that, the same API, that country API where we can search by country
name, and this is going to load the country information.
And in this case we've extended some of the functionality where we can click on the returned results
and that will output all of the object details on the page so we can search by whatever name we want
and it will return back the content that corresponds with it.
So if won't search for Canada, we get all of this information back from the from the rest countries,
EU, API, and then we can loop through it and output it onto the page.
It's another really good exercise of getting and selecting and allowing the user to have interactive
content and generating the data that they're looking for.
And this is all coming dynamically from the API.
And one of the best ways to learn, of course, is to try the code out for yourself.
All the source code is included.
If you have any questions or comments, please let me know.
Let's get started coding and creating this amazing project.