Within this lesson, we're going to be creating a connection to the Stock Exchange API, so we're turning
back a series of questions and also the tags associated with the questions, the answers that each one
of these questions have.
And the finalized application that we're building is going to make a separate request to the API to
load the content for the question itself, as well as load the answer information.
There's more information available at the API Stock Exchange so you can reference that to see all the
different endpoints that can be created.
And building a dynamic interactive web application.
From the Jaeson data from the API.
We're going to be using the same index file template as before, we've got the five or the four TEMEL
elements on the page that are going to provide the interaction and we're linking out to up 10k us with
an app tanji.
We we're connecting using the JavaScript query selector, selecting the elements from the page so that
we can update and manipulate them as needed within the application.
We've also got an event listener that's outputting content whenever the time content is loaded.
So we can use this if we have any content that we want to load to let the user interact with.
And then we've got an event listener on the button.
And I'm just going to add in a console message here, and this could just say click ready.
So whenever the button gets clicked, we fire off the clicked ready.
So ready to make the connection to their end point.
And we are going to be connecting to the API at the stock exchange.
So Stock Exchange is a website that you can go to to get.
Reference source code.
And this is one of the top resources for developers to connect with and have discussions about code.
There's a number of different communities as well as a lot of information that's contained within the
API.
So going into the API itself, there's some documentation at API that stock exchange dot com for docs.
So this is where you can find out and read up more about the endpoints for the API.
So just as a sample, we're going to be just selecting and getting the questions and there's other parameters
that you can provide within the questions so you can have yds, answers and so on.
So we'll look further into the API.
So for now, let's make a connection to the.
Questions and there's a default sort order here, activity, and you can update some of these parameters
as well in order to build the API.
And when you run the API, it does show you what it's going to be returning back the content that it's
going to be returning.
So let's connect to the Stock Exchange API so the base you URL is API, stock exchange dot com.
So we'll use that as our base, your URL.
So creating a variable is given the name of base your URL.
And from there we can build out the rest of the API connection.
And for this itself, we can provide these parameters in order to update for the connection.
So selecting and let's load this automatically.
So we'll initiate a function, I would just call it page load, and then within the page Lord function,
this is what we're going to make our initial request to the euro.
So let's construct the euro using the base euro and then concatenating it together with the parameters.
So that's going to return back or should return back the same content that we've got here within items
and then items is the array of content that we're returning back to the page.
So now we've created the euro.
Let's log it out into the console.
So here we can copy the address and paste it into the browser to make sure that we're actually getting
some content back and we're getting all of this JSON data.
So that means that we're ready to make the Thach request so Futch and thatching to the euro.
And once we get the content, so we get the response object back, we're going to return the response
object with Jason content.
And then once we've got the response JSON and we're going to take that as data and with the data, we
can log that out into the console so we can take a closer look at our JSON response content.
And let's just double check the endpoint.
And it looks like we've got two forward slashes, so removing one of the four slashes for the path and
now we're able to load the data.
So that was just that.
The past path was incorrect and we could just as easily as well we could catch any errors that might
be popping up.
So try that into the console and we'll check to see if that's an error that we can catch with catch.
So that means that if we had to forward slash, as we can see, that we just get the failed to to fetch.
So it doesn't give us any indication on what the error is.
But in this case, that it's the path is incorrect.
The endpoint is incorrect because we've got the two slashes.
So that's what the problem was there.
And let's reload that.
So now we've got data that's come back from the endpoint and we've got a number of items that we can
iterate through and output the contents of those items on the page.
So we've got that within the data and within the array.
So we look for the array that we want to iterate through and that's going to return back to items.
And there's 30 items in there.
So create a function output items and this is going to require some content.
So we just put a variable name of data and then we can console log out the results of data into the
console to make sure that we do have those for the function and that we're ready to iterate through
them and loop through them.
So that's still outputting.
So that means for data we can do a for each and loop through each one of the items that are contained
in there.
So this is just going to be one of the items and we're turning it back as item.
So again, into the console.
And that way we can break apart and we can see the data structure of each one of the items.
So each one has a title.
It also has a number of tags, which is an array.
It's got an object for the owner and it's got all of this information about the link to it, the answer
account and so on.
So let's update and we'll output the contents of the title onto the page.
And we'll just call this one output page, and this one will output each one of the item onto the page
on each one of the items.
And I'll comment on that console message, and usually I do start with a console message and we just
call that data as well again, so it's putting each one of these objects on the page or within the console.
So ready to add it to the output of the page.
So let's take output in our HTML and clear out any existing in our HTML, and now we can create the
elements for the page.
And I would put them correspondingly
and I'll just call this make node.
So this one requires the parent and the type of object.
Or type of element, and then we also have the contents of that element, so creating the function to
make the note.
And we're going to return to the no doc.
So making the node and the parent that we're handing the content to is going to be the output element,
the element type that we're creating is going to be a div.
And the contents of this div are coming from the data title.
So data title.
And then here's where we can make the element.
Using the document create elements, and we can specify the type of element that we're creating within
the argument there and then elements in our HTML and actually, Senator, just refer to this as HTML
as we want to be able to add and update each HTML.
And then here we select the parent object and do append of the elements that we've just created to the
parent.
And then we'll also return back the element.
He can even shorten this as well, so if you use a hand child, there's a callback of the element that
was created.
So you could do that within one statement and then that's still going to refer to the same element,
and if we cancel logout, that's going to reference that new element that was just created on the page.
So all of them are within DIDs and they're all selected here within the consoles, whenever we hover
over it, you can see the contents and these are the titles.
Of the items, we can also loop through the tags of that, so we're creating I mean.
Element, and we can also create a temporary parent, so this is going to be the main div or just call
it mean and then use the make node and here we're going to be appending it to main.
And this main container is just going to have just blank content.
So there's no content in there.
And this way we can add additional content into there.
So we've got the title and if we do and inspect, you can see that this is the parent element that we've
already got a div in there.
So let's add an update, the rest of the content that's being returned back from the endpoint.
So if we want to output the tags, let's create the tags and output those as well.
So for the data tags and for each one of those, so it's going to turn back the tag item and we're going
to loop through and add the tags as span's to the main parent.
So this is just going to be a new span and the tape here is going to be a span as well.
And this should be listing out the tag information and we're just handing it to the main object and
they're a little bit hard to see.
So they're all just right there together.
So let's add in.
To the spane, take the class list and add a class of.
Tag.
And that way, within the TML, within the staling, will select the elements that have the class of
tag, add some padding around it.
And also, we can add some margin around it, so they're a lot easier to spot.
So fort style, maybe we want to make them italic.
And tag so we can do a tag before, so let's add in some content before.
So adding in the dash, so that puts the dashes before the tags.
Also going to add in a border.
And just a slight border.
Also, to all of the elements,
play the box sizing the border box.
So that's realigning them and we probably need a larger margin, was there some overlap with the content?
And let's also update it to display as in line block.
So I will make it a lot easier to read the tags, so there's all the different tags.
And go back to where we are putting the data.
So within the title.
Might also want to add some other information here.
And we've got a question ID so also within the API, we can search by the question IDs as well.
So if we go back to questions.
And if we have ID questions identified by a set of ideas.
So from here, we can specify IDs that we want to look at and run that.
And so that we were returning back the same information.
So we can use the ID as a way to make another query and then just get the details once again back whatever
the user clicks it.
There's also the owner information as well.
So if you want to and know we have the owner information within the object so we can as well create
a way to query for the owner.
So let's copy this ID.
And using the function get by ID, so we're going to get the ID value here and this is where we're going
to make the request by the ID.
So we want to be able to click the question and then load some additional information.
And I'm actually going to shrink down the margins here because it's a little bit too spaced out.
And then also for the question or the title.
And I'll just call this top title
to a font size to make this bigger one a.m. and I'm also going to add in one more four box so the box
will just go around each one of those.
So let's set a border one pick solid.
And I said, let's do this as DOTD for something different and keeping it greyscale and keep the border
radius so slightly rounded, and now let's apply the top title plus the box property to the elements
as we're constructing them.
So within the main, take a class list and add the class of box to it.
So that provides some more styling that we could start out and add some padding as needed and also for
the element title again list and add, and here we can add the top titles that will make it bigger.
And for top title, we'll do a thought.
Wait, so add bold weight to it.
And then also for the box, let's add some padding.
And for the top title, Do Margin.
Bottom and 15 pics, so that space's it out and also do a board and.
At the bottom.
And we'll make a solid red border.
And adding some padding at the bottom.
So space's it out, we got these red borders maybe actually going to turn them into black border and
make them thicker.
To three picks, so we've got the title, we've got the tags and whatever else we want to list out here,
so we want to pick up the ID and actually make these elements clickable.
So whenever anyone clicks the element out of a listener and have it click and then whenever it gets
clicked, then it's going to take the action on the element itself.
And for the.
Box, we use the box elements and apply a hover effect to it.
So whenever anyone hovers on it and we'll update the background color.
To a slight off point, so that way, whenever we're hovering over it and also let's update the cursor.
Two pointer.
So that whenever we hover over it, we'll get that type of effect and also I'm going to add in a margin
at the bottom of five pics so there's some more spacing between the items on the page.
So what to happen is whatever they get clicked, then it's going to query again and load all of the
content.
And I know we already have it within this API.
So the candidates to practice and making requests.
So we're going to get by the Idy value.
So selecting it by the Edek.
Let's make some updates to this so we can track the ID information.
And within that listener, we're going to simply select and use the event target as the source for the
EDEK information and update the adding into the element object.
We can add in a value for the ID, the question ideas available within the API, under the property
value of question ID.
So selecting the value for question ID, we want to pass that in and save it into the element.
So creating a separate element object and adding it in as Q ID and then assign a value to it a question
ID.
So it's going to be data dot question ID to get the value that's associated with each one of these elements.
And then this way we can simply linko to get by ID and we don't have to pass on any arguments or parameters
other the event object.
And this way that element itself is the one that's going to hold the ID information that we can then
use in order to query and get the ID contents.
So connecting to the method, get by ID, it automatically passes in the event object and we're selecting
the element.
So assigning to the element, the event target, so passing in the object and then to object as E and
then the target is going to reference the element that initiated the click.
And then from here within the element object, we do have a value for Q ID, so whenever any of these
get clicked we can now see it being loaded into the console.
So that's loading in the ID numbers and then we can use those ID numbers with our query in order to
query and build out the information for that particular object.
So as they get clicked, we can build the information for the object itself.
Let's set up one more variable here, so adding in that answers as well, so you can select the answer
count from the API.
So make a note, attach it to the main object, and this can just be a regular div.
And the contents of this div, you're going to use the template, literals some back text and less populated
with value for the answer data.
So that's the data from the answer account property.
And we're going to pass that information in and reference it as answers onto the page, so that way
it's going to be displayed onto the page.
And we're also going to be listing out the answers for a particular question, so that's going to be
another request from me to the API.
Let's update some of the styling for the tags so that we can add in some additional margin spacing between
the answers and the tags.
And then also we can create a separate class for the answers themselves.
And this way we can create the class and separate out some of the content.
Making the text align to center and also let's update the font size so that they can make it a fairly
small font size, so smaller than the rest of the content as we don't really need this to stand out.
But this is just some details that we want to present to the user.
So when we refresh it, we need to still add to the answer account elements using classless add and
add in the answers class to that element.
So once we add that in, we notice that it does get centered now on the page.
So that class does get applied to the elements and now it's being presented to the user within the content
that's coming back from the JSON data.
And as we click them, we're still picking up the.
The question ID and we're able to use that within the.
Was in the get it function, so we're going to be able to make our next request to the question ID.
Using that.
Event target.
Thanks for this lesson are to connect to the Stock Exchange API and return back the jigsaw data from
the end point and use that recent data to dynamically create Piech elements for the user's visual interaction
and then also add the interactions where the page elements are clickable and they're going to pass the
object data over to the new function.
So that we can make another request and load more content from the API onto the Web page.