In this lesson, we're going to be connecting to a testing API, so loading the contents of the API,
also making some clickable buttons.
So depending on how many items there are, how many users there are within the database, we've got
the number of pages, the total on page so we can create these indicators.
And these are all dynamics of depending on the content that we're getting back, they can change as
the content will change.
So all of the content we're out putting the user information as well as the user's email addresses within
the list, it's going to be part one of making a request to a testing API.
We're going to start by setting up the HTML file.
We've got some standard HTML elements to create the interaction, button clicks and an input and an
output field, as well as linking to the code to G.S. file that we've created.
And that's selecting that.
Page elements and then also adding an event listener for the click of a button, so click the button
and just test to make sure that the console message is outputting the message of already.
So going over to a website called RFQ Address Dot, I kn.
And this is an endpoint that you can test your front, end quote, against CEDO, get fake data and
it allows you to try making request to the endpoint.
So to in order to make the endpoint request, this is the path.
So there's a number of different endpoint paths.
So let's copy the euro and go back to the documentation and loaded the Eurail and make the initial request
to it and then return back the JavaScript object.
And then we can take a closer look at what we've got available within this API.
So I'd like to usually typically copy the endpoint that I know that's working within the code.
Just comment it.
And all of the data is going to be after the path to the URL for its API for it.
So that's the base.
You are all that we're going to use.
I'll give it a name of base you URL and now let's make the fetch request to the base your URL and we're
going to update and add in the parameters so that one of the parameters that we're adding is going to
be the users value.
So let's create that parameter there and then put together the base URL plus the parameter in order
to construct our eurorail that we're going to be making the request to.
So taking the base URL and then adding together the parameters that we want to pass.
And now let's make her FETs request to the euro.
And then we've got the promise, so we've got the response object within the promise.
And returning back the response object using the Jason method, so we're going to get the content back
as Jason and then the next promise is where we can get the data content and then making use of the data
content within the console.
Let's slug it out within the console and make sure that we're getting some data back.
So we click the button, makes the request and this returns back the data.
So in this case, what we're doing is we're connecting to and we're getting the users with page of two.
And if we want to just get the list of users.
So there's a number of different pages that we have per page, total of pages so we can create a way
to navigate through all of the user list.
And there's also to get the single user so we can request the user by ID and then within the user list,
within the data we've got, each one of the users has ID so we can make a request and get the information
about the user back from the request.
We also have other options as well where we can create a post and that would be posting to a user and
then returning back the ID.
So making the request to the users.
We can also update a user so updating whatever the user value is and sending a patch method to it,
and that allows us to make an update to the user.
So there's a number of options here that we can try out.
So let's go ahead and create a request and we're going to list out all the user pages and then we'll
create an interface to select the user information and then also create and add and add new users to
the list as well.
So quite a bit that we're going to cover and start by creating the list of the page values.
So let's see what happens when we just select the users API and do a click so that by default turns
returns back page one.
And we also see the total of pages and the data for this current page and then per page, it's returning
back six items per page.
So let's output that content and we'll create an object that's going to hold the page data.
And this can be an object so we can track whatever our current page number is.
And I'm actually going to make this shorter.
And I'll call it up and then we can have under the page for the OP, we're going to start at page one,
so it's going to make the request to page one for the users.
And the parameter, again, is going to be page.
So if we have a parameter for a page that we know we need to load that page information.
So setting up a function in order to handle the loading of page load data and because our page object
is global.
So we're not going to have to update that.
So when we load the data, that's going to output the contents on the page itself.
So this is also where we can have a fetch request that's going to make the request to the data and it's
going to be loading the parameter for users and keeping in mind the same structure that we have.
So taking the users and then whatever page and this is where we're going to add in the value for app
page for the app page object.
So currently the value for that is going to be one.
And let's simplify that.
We're just going to look at the data.
So it's going to call to the function that's going to load the data and then this is where we can create
the output, where we're going to build the page object and we want to build the page object from the
data.
So it's going to be building the page from the data that's being returned back from the endpoint and
in order to build the page.
So I usually do like to have the console log of the data so that I know that what the structure of the
data that I'm looking at and within data we can loop through all of the items.
So let's create that first.
We're going to create the loop through of data and then data and using for each creating the loop through
each one of the items.
And this is going to have a user information and we can console log out the user object, and I'm also
going to set this up to automatically load so window and we're going to listen for a DOM content loaded.
And once the content has loaded, then the event is going to fire off and it's going to just fire off
the load data function.
So that's outputting it to the page.
And if we don't have any other functions here, we can just shorten the statement so that it just automatically
do a load of the data whenever the page loads.
So there's all of our data.
So now it's up to taking the data apart and putting it on the page and we're building the page.
So we're going to have to create elements again.
So let's do that where we'll set up the ability to make node and then the parameters that we want to
pass in to make the node.
So we need the parent that we're connecting it to and also the node type that we're creating and then
the content of the node itself.
And that's where we can create the element and then also return the element, just as we've done with
in the earlier lessons.
So we're going to be constructing the full object information and putting it on the page and then including
the content of it.
So for the user and what else will do is will clear the HTML of output so that this is going to be just
floating a fresh page of content.
So the first item that we want to list out here is we want to do the first name and last name of the
user and pass that over.
So this is all contained within the user object so we can get the first name, we can get the last name.
So let's start by creating.
Our first stiff, given the name of Div one and just using the same structure where we're going to make
a node, the parent of the snow is going to be output.
So it's going to be directly attached to output.
The type of node that we're creating is going to be a div and then the content is going to be with create
a separate variable value for that and using the tactics, selecting the user information.
So we're going to do the user and let's do first underscore name and wrap this within the dollar sign
in the curly brackets.
And then we'll also add the last name to that as well.
So that's last name.
And then let's also include the ID.
So that would be the user ID.
Into that first part of the content, so it's going to be represented by HTML.
So when we make the node, let's add content to it.
And this is just going to be constructing the element, using the document create element and the element
type is going to be under the node type variable and then we're taking the parent object and appending
the parent.
The element to the parent and then the elements, the inner turmoil of the elements is going to be equal
to whatever the content is that we Pastan and then we can also do a return of that element.
And just to have something different.
Let's return it and we're going to use the pend child and the difference between a pen and a pen to
child is that this is going to construct the elements and has a response, our return of the object
that was just created.
So that's where we're able to pass it back as div one and now we can access div one within the console.
So that just shows us what div one is being and what it's being returned.
So we've got the content being output on the page.
Let's also add in second line.
So creating to two and let's have this div, so calling it or call it HTML two and to be consistent
and rename this to him on one.
So the content that we want within the second div, so maybe we want to have the email address.
So that's just under email.
And also let's create another one that we can use as.
An image, so that will be the other one that will create and that can just be by image one.
And this is going to be image tag and then there's no content that we're sending in there.
And I'm going to log out into the console, the image.
And this actually should be Temotu.
That's where we're throwing the air, so there's our image and let's take the image one.
And such.
So don't attribute and attribute for source is going to be whatever we've got path for the avatar,
so that's going to be the user avatar within the user of the object.
So Avatar.
And I'll save that.
So adding in the source images there on the page.
And then also, we're going to add in the additional options for clicking to the other pages that we
have content on, and then we'll add some simple buttons to the bottom to go to navigate to the next
page.
And of course, we can apply styling afterwards.
So also within the initial request where we're building the page and where we're getting the page data,
an object already contains the information that we need.
So we've got per page.
We've got what page we're currently on the total and as well as the total pages that we have available
so we can loop through and we can output the number of pages and have those as indicators at the bottom
of the screen so that the user can switch through and they can get the different pages of users and
data.
So let's create a loop where we've got the data, total pages and this can be a for loop.
And while it's less than data total.
Pages and then increment I by one.
And this is where we can add to the bottom.
So let's construct a div and this is going to be our container div.
So this is where we can add in the page content.
So just make a blank diff at the bottom and then we're going to be attaching the indicators within this
div and we can for now we can create them as span's.
So selecting and creating a span.
And this is going to be what's the value of spane and the content that we're sending in there is going
to be I plus one and it's going to be appended to div three.
So that gives us the indicators at the bottom.
Let's go ahead and add in some styling so they're really small and hard to see.
So let's update them and update the display.
To in line block and also adding in some margin for them.
As well as border.
And also at a border radius as well, so that they're slightly rounded and going down to where we created
the span's take the span using Closs list, add and add the class of Ayanda.
So that way they're more visible.
And I'm sure I'm going to also do a text, a line to center a line, the text content.
So that way we have an indicator of the other pages and the user has the ability to click through and
to move to another page.
So let's also select that and add an event listener.
So our event listener and the event that we're listening for is going to be a click.
And if a page does get clicked, then what we want to do is we want to make to build the page.
And actually load the data and update the Arpège value to whatever we've got for the I.
As we're looping through E-Plus one and then all we have to do is call the function to upload the data,
and that's going to initiate and trigger the loading of the new page.
So whatever number of pages we have, we can filter through them and we can go to the different pages
of content.
So also, let's in the next lesson, we're going to add the ability to click on the user and see more
information about them.
In addition, before we conclude, let's apply some styling to each one of those and a lot of border
around it.
So that they're more distinct between the different elements.
And I'm sitting the top and bottom margins to 10 picks and also to all of the elements on the page can
add the box sizing and the border box.
So going into where we create the main container for each one of these.
And since we don't have a mean container, we've been adding it to output, let's create a separate
container and we'll call it output one.
And using the same structure that we have, we'll append it to output.
This can be just a blank div and this is where we can hold the contents and then within output one.
And this can just be up within here, so every time we're looping through, we're going to be creating
another element and that way we have something that we can apply the styling to.
So this is going to be the main container.
So output one and using class list, let's add a class and the class that we're adding is going to be
the box, so that will apply that more of that box type styling to the elements and also text a line
we can centralizing it also set a default width to 80 percent.
So now our content is nicely aligned and also are going to align the bottom part there where we created.
The div three and to div three, I'll also add in that same alignment so that that gets that gets centered
as well onto the page.
And then those are still clickable and we can also update the indicators, so setting the cursor to
pointer and let's do.
The task for this lesson are to connect to the API and get the JSON data back from the API and then
generate the page elements dynamically using the data from the API and also create the clickable page
options for users to be able to interact with the data.