So this lesson we're going to be finalizing the application, we're going to be adding in the ability
to search and then also playing some styling to the application.
So now that we have that option to search, we can enter in a search term, click and we get now new
results according to the search term.
And then you can click these as just we did before and get additional details.
So let's try to search for HTML returns back to H2 malcontents corresponding to the title search and
see us.
We can also search for.
So this is what we're returning back for.
A responses for the CSA search.
And there's a lot of information that is coming back from the API, so I do encourage you to try out
different requests, different paths, and also output data that's being returned back from the API
onto the webpage.
So let's get started.
So let's make a search.
And in order to search, we can search within the title.
We can search within the page, also setting the maximum results.
So in this case, we're just going to do a search for a JavaScript within the title.
And again, you can build out your parameters and the endpoint URL for stock exchange here within the
API stock exchange dot com.
So that's all we've done here, is we've built up and created the new parameters that the new endpoint
that we want to connect to and we want to make this connection whenever the search is initiated.
So going into where we're setting and where have the click event, so we're going to make a search and
return back the content according to what's within the search results.
Let's also make some updates to the text content of the H1.
And we can just call this the Stock Exchange API or something like that, so updating the title API
Testor.
And just catalyze that so that we've got some information on what we're tracking there and then also
for the button one and for the one.
Let's move these contents into another element output, and we can create this one through that make
node generator that we set up in the earlier lesson, and this is just going to be appended to.
The document body, and it's going to depend the contents they're spending to the document body and
the element type is going to be a diff and then the contents is just going to be blank content.
So this will serve as our main container and we can add in into output one, we can append the each
one object and then as well.
Additionally, we can append the input value as well.
So just just moving some stuff around on the page with JavaScript.
And then also we'll move the button in there as well and also append the button element.
And I just see how that looks, that's moving it actually to the bottom of the page.
So also let's drop that output element into it as well.
And for this, what we're going to do is for output one, let's add in a class.
I give it a class of output, one.
And so we'll sunter it and then text a line can be center line for the text.
And then apply that class, so using the class list and then add the class, I would put one to that
element so that will center the content.
Let's also update the input field and we'll just have the one input field, as well as the element with
a class of button, or we could update the element with the button tag.
So let's make the input field bigger and we'll display them both as Bloks.
And what can be one hundred percent?
And let's say that the font size to fairly large font size.
And then default height.
And also, if you can do text a line to center, you cannot update these as needed.
So whenever we click the button, we want to make the Fach request and load the page content.
So let's update that to load the page content.
So we've got the end point here that we want to connect to.
So just as we've done before, where we construct, you are all we want to use for the fax request.
We're going to grab the search term.
Right now, it's JavaScript and we can get the search term and that can come from the input value.
So getting that element value and this is going to be whatever the search term is, so let's update
the string value instead of JavaScript, it'll use whatever the search term is.
So that's going to construct basic you URL and then we can make the fetch to the euro and return back
the promise.
So the response object and the response.
Turn it as Jason and then get it as a value of data, and then from there will output the data contents
into the console.
So let's see what happens when we search for test and not return back an array of items so we can loop
through each one of these items.
And I'll put them to the page.
So data items, and I'm also going to update the input value to have a value.
So let's set that to JavaScript.
So that our returning back all of these items, so ready to just load them to the peach.
So just as we did, the output items
could do the data items and put them to the page.
So doing a search for JavaScript is going to return back the JavaScript associated content and then
you can click on it and find out more details about it and then we can have another search if you want
to search for HTML.
So it turns back the HTML content.
And then just as we did with others, we can click it to get more details, see what the answers are,
and then we could even load the answers and the information, as well as additional content that's contained
within the API.
So all of that is available to us to add to the page.
And as you're practicing and connecting to the API, the endpoints, you can try out different ways
and different content to output on the page, depending on what the selection is.
And this is a fairly extensive API, there's a lot of content here, there's a lot of different points
and there's a lot of different ways to interact with it.
So you can try out and check out all the different options here within the Stock Exchange API.
Challenge for this lesson is to continue to practice with the Stock Exchange API, check out some of
the different end points, load the data onto your page and update the page contents adding in a search
term option.
So searching within the title terms and you can create your path to the API within the API documentation
available at the stock exchange.
Dot com docs also load more JSON data dynamically update the page elements, add styling and classes
to the elements and or overall get a good opportunity to practice requesting content and returning it
and then manipulating the page elements to represent the content that's come back from the JSON.