We're making a connection to the Jason Placeholder in this lesson where the user can select the post
that they want to get and see the post content being output on the page, and it's just being added
to the top by the ID value of the post.
So there's a number of posts and this is just creating the user interaction.
And when we do make the selection, we click the button.
It makes the request to the endpoint according to whatever the ID value is, we have on the input and
it returns back the corresponding content and then we're using that JSON object and putting it to the
page.
So open up the editor and create indexed HTML and you can reuse the same file as we did before.
Just change the source code and I've changed it to code five JS and I've kept some of the values from
the last lesson as well.
So all of the selection of the elements from the page also updating the input value to the world and
then adding an event listener to the button.
And right now what happens is when we click the button, it loads the value of ready into the console.
We're going to be using the JSON placeholder.
So this is available chasten placeholder dot type code, dot com and what it is, it's a free to use
fake online rest API and allows you to do some testing and making fetch request to the API.
So they do have an example here and it will show you what gets returned back.
So there is a response back.
So let's go ahead and make a connection to the end point and return back the data from the endpoint
whenever the button gets clicked.
And there's a few different endpoints as well.
And there's more information available within the guide page.
And you can request two posts.
You can create a resource as well.
And then you can update a resource to a number of options here for different paths that we can connect
to.
So let's set up our base.
You URL, we can just call this that these your URL, and this is going to be the euro that we're going
to be using to make the Thach request and update the view to toggle the word Ropp for the editor so
we can see all of the contents.
And for now, what we want to do is we want to connect to the endpoint and output the content on the
page.
So let's construct our URL.
So using the base, your URL and add to it and let's see what endpoint we can add to.
So do the posts.
One is going to return back the first post within the API and then using fetch request to the euro.
And then once we get the response object, we return back the response and it is going to be JSON formatted
so we can just return it back as JSON.
Then we can get the content back as data and then I would put it into the console using the console
log, so let's see what happens.
We click and we get this information back from the endpoint so we get a body title and information.
So how about we output that to the page?
And just to add to Page and we'll pass in the page info that we want to add to the page, and so that
will be contained within the data object.
And in this case, we're getting the body ID and title and also used, I do like to use the console
to output the page content, so let's construct the page content and we're going to add it into the
output object and create a function to add the element.
So for that, we need the parent.
And this is the same that we've done before
and the the type we can give it a variable of T and also the HTML content that we want to add.
And using the constructor, we're going to create an element document.
Create elements, the element that we're creating is going to be whatever the type is that we've called
in and then taken the parent object append to the parent the element that we just created and then within
the elements, update the inner.
HTML of the element to equal whatever the contents of the HTML is going to be, and then lastly, we
return back the element to the original one that called the element content.
So create the Divx or just add the element and the parent is going to be output, the type of element
that we're adding is going to be a diff and then we're not going to pass in any content in there.
So this is going to be our main container.
Let's click it one more time so we can get the object information, so let's add to the object and we'll
create another one that will be.
Call it Eitam, and then we can also do the add elements here as well, and this is going to be attended
to.
I mean, this can also be a diff.
And then the content here that we're going to pass in, we'll give it a variable of whatever HTML.
So that way we can construct it outside of the function request and using the template literals.
Let's output the title content, so we've got it under Infor title.
And also 2000 each one and close off the each one and also update us to that so that I can add to the
TEMEL object.
And next up, let's do the body so that can be contained within a paragraph.
And that's under in full body.
And then lastly,
we'll add one more line, and those can be within the small Tighes.
And I can just take contain the ID.
And as well, let's add in the user I.D..
So that gives us all of the information that is returned back, so user I.D. and let's try it so that
output's the content to the page and then we can make additional requests to that content and return
it back.
So we're returning it back and we're requesting by ID.
So let's make an update to the input field.
Instead of having a value of hello world, we'll give it a value of one and then the input elements.
Let's set the attribute and we'll update the type setting the type to be no type.
And also update the width of the element, so it's rather wide right now.
And give it a class of no.
So it's the font size to make it fairly large
set with.
And I'm going to actually do a max width of it to the max of 70 pics, and then let's add the class
to that element.
So input elements using class list to add a class of number.
So it gives us a nice big number.
So let's get the value from the input and we can just simply add it to the posts.
So that's number one.
That's with the ID, number two with the ID number three.
Let's go back to one.
So that again returns back the one with ID number one.
So we're able to select the post that we want to output the content from.
And I put it to the page and that creates the interaction.
And I'll also update the button.
And tax content select post, so that allows us to make a selection of the different posts and put them
into the page, and if we want to move it right up at the top instead of append, let's do a prepend.
So what this will do is this will add the newest post to the top so that we don't always have to scroll
down to see which one has been added.
Also going to apply some quick styling to that to create a class of box.
So create a border around it so that we can distinguish between the different posts.
Also, add a border radius so it's slightly rounded and then some padding for the content.
Also adding in the box sizing.
So using the border box and save that.
And also let's do a margin.
And left and right can be auto.
And also the width of this to be 80 pics, so that's centered and it's that looks like and of course,
we need to still apply.
So within the main class list, add and add the Boxtel, so that way we're outputting the contents on
the page.
In this lesson, make the connection to the adjacent endpoint, create the user selected response data
and output it to the webpage practice and try out the different end points and you could be ready to
move on to the next lesson.
We're going to continue to work with the JSON Placeholder API.