In this lesson, we're going to be wrapping up our data driven, dynamic web application that connects
to the Star Wars API loads, the categories for the endpoints onto the screen.
And when those get clicked, it's going to load the details, the first 10 items from their API data
and output them to the page.
So these are all clickable and then they're also for the different pages.
So in this case, for Starship's, it looks like we've got six separate pages.
We can move to the next page or we can select one of the pages and load the content from the end point
of those pages.
So we're setting all of this up and then, of course, also adding some styling.
Once you select any of the items here from the list, it's going to output the contents contained for
that item and give you the details.
And also, if it is an array, we're able to detect that.
And right now what we're doing is we're just strengthening the contents of the array.
So these are additional endpoints.
So you could potentially load these and add these as something that can be clicked and then those can
be loaded as well.
There's quite a bit that you can do with this API, and it's got a lot of rich data as well as multiple
pages, and you can create a fully interactive Web application with just really minimal HTML code and
all data driven and dynamically generated from the JSON data and then apply the styling as needed,
as necessary.
At this point, you should have your application loading some of the data and being able to make selections
and outputting it on the page.
So there are some additional options that we want it to still load in and some of the results will return
back a number of items.
So in this case, we've got 39.
So we're only showing the first 10.
So what to do is add options for the user can flip through to the different pages.
And there are, as is an indication of how to move to the next page.
So it does have the euro end point here for the next page.
In addition, it tells you what the number count here is and the results so that you can move through
the pages as needed with the results.
So clicking on those different endpoints to generate the data and we are outputting the content on the
page.
So we do have a function that does that where we're building the page and we're looping through the
data from the page.
So we've got a function that's get JSON and then that automatically builds the page and the get JSON
builds it according to the click event.
So if we're clicked on any of those, so we should be able to pass in the next results and build the
next page.
So let's try that.
And first, we're going to just add a next button.
So as we're building the page within the data, we've got our next and a previous.
So adding those options in and I'll just call it pages.
So creating a document create elements and we're going to create a main div container and then add this
div container to the output.
So outputs append pages and then within pages, this is where we can add in the clickable options for
next.
So that's going to be right at the bottom of the screen and within pages.
So first we need to check to see if the data has a value for previous and next.
So let's load in and make sure that we get the property name proper.
So if next exists, then we want to add in a button for next
and give this creating a button, create elements and element that we're creating.
So that's going to be our next button.
Tax content is going to be next.
So this will automatically go to the next page and if it's there, then we're going to load within pages,
append the button to that we just created.
So let's see if that loads to the page.
So does load next.
Does load next.
So we want whenever this button gets clicked that it's going to request to get Jason your URL.
And so we have to build the next page.
So for button to.
Ad of that listener and that listener is going to be listening for a click and the same way that we
had the clicker, that's work here where we're doing the get data, we need to structure the button
the same way.
So it needs to contain your URL.
And this is going to be button to your URLs and the contents of button two.
So there you are.
All is going to be whatever the value of data next is.
And this way, we don't need to have any additional structure, it will just load the next page and
let's just see what happened here.
So it looks like we threw an error.
So let's do some troubleshooting and we'll consider log out the results of the next.
So instead of trying to load the button, so load the values and let's clear the console hit next.
So that is that is the right you, Earl, let's double check within the console and see what we've got
for data that's being returned back.
We might have to make a separate function for this.
Ideally, we can reuse it if we've structured it the same way.
But there are some cases where you just need to build a separate function for it.
So let's try that one more time.
And this time it actually it did load the next page.
So see the data that it's loading.
So it's loading page two and there's also previous pages.
So we'll leave that and just in case we throw any other errors and then we can update and fix it afterwards.
So let's check to see if data has a version for previous.
And if it does, then the button is going to say previous
and we can still use button two because that's within the scope.
So append it to the pages and get the contents of button previous.
And we're loading over the URL that we're going to be using as the button previous value.
So let's see if we can move through the pages and go to next.
And now we've got a previous page and let's check to see if we can move back to the first page.
And then the previous also disappears.
So it doesn't actually output what page we're currently on.
So you could also update the page and let people know what page they're currently on.
So we're also going to be creating a list of the possible pages using that account option.
So we're going to divide it by ten.
And that way we can list out a bunch of buttons there that the user can click to quickly jump to the
other pages.
So let's do that as well.
Will set up a variable and get the total.
And this one, we're taking the data count and then we're dividing data count by 10.
And using math, sealing or rounding it up, so that's going to give us the total number of pages and
now we can create a for loop and looping through all is less than total and then increment I plus one.
Now let's add the page buttons so we can do it.
The structure is similar to what we have here where we're creating the buttons and then the button value
is going to be whatever E-Plus one is and then appending it to pages.
So that should create the number of buttons for each one of the pages.
Let's see what we've got here at the bottom and then next, let's make them clickable.
So here we have to construct what the you are.
So let's take a look and see how what we've got for next and as well for previous.
And that's just equaling page, whatever the value is.
So we want to ideally have it to whatever the value of it is, and that should produce whatever page
value we want to go to.
So we want to slice the current you URL that we made the request to buy the question by the question
mark and then hardcourt in the page equals whatever the value of is, the easiest way to track whatever
the current endpoint is, is just going to be to create a global variable.
And we'll just call it endpoint and we'll start by setting endpoint to be just blank.
And then whenever it makes fetch request, we can update the value of the endpoint.
So whenever it loads the content and updates output, we'll update the value of endpoint to be this
as the endpoint.
And whenever we get a URL, that's what we're going to set as the endpoint.
So this way, we've got the end points dynamically changing and we're just outputting it to the page.
So if we go to next on it, we're updating that endpoint value.
So from that standpoint, we can slice.
According to where the question mark is, and that will provide us a clean, you are all that we can
make the request to.
So let's update the buttons with that value, so creating a variable, clean, clean euro and that will
be whatever endpoint.
So using the string method split, this will split the contents of the URL into an array and using the
array value.
That's where we can start and set the page value.
So the clean up URL will help put that into the console and then the actual endpoint.
Is going to be the value of clean you.
And actually, let's create that temp URL is going to be whatever the value of clean your URL is and
the first item within the index.
So even if it doesn't have a question mark, it'll just split and return back the first item.
So there's going to be no split.
So either way, we're going to get a path to the end point.
And then what we need to do is we need to just add in the contents of page to do page and then whatever
the value of our dynamic pages.
So in this case, it's going to be I plus one.
So let's add that in, and instead of the euro, we're just going to add in the temporal here whenever
the button gets clicked.
So let's see how that looks.
So that's our end points.
If we go next, that's going to be our end point.
And so if we click one of the buttons, we get a clean you URL.
So there's quite a bit going on in the console here.
So here we've got the split that we have where we're getting the clean URL and we're splitting it by
whatever.
Currently it's at page one.
So we're just taking out the first path to the endpoint and removing out the page one and then dynamically
adding in page one here afterwards.
And this is an array, so if we get the first part of it, we're returning back just the clean URL and
let's just double check to make sure it's working.
So this goes to page three.
This goes to page four.
This goes to page one.
Let's try the different options.
And we've got all the way up to page six.
And notice we don't have a next here.
We just have previous.
So now let's add some styling to this, to the pages as well, will center pages, pages.
And use list out in a class.
And I'll just give it a class of pages as well, and class of pages is going to have a width of four,
do 80 percent.
Will text, align and center align the text?
Do a margin of auto.
And then let's style the buttons within the pages.
So for the button, make the font size.
To see what that looks like, so there's our buttons there, nice big buttons, and maybe we also want
to remove out the API part and just have whatever the path is that we can output planets here.
So when we click planets, we know that the heading here should say planets, and even this one works.
We don't have a previous and the next, but we do have the one if you want to change the order of previous
and next.
So in some cases, you see next afterwards we can do that as well, where you can select next and then
just move where we're constructing the items.
So that way we have next at the end and previous in the beginning.
So it's up to you however you want to do the page options.
Let's do a margin for these.
Five picks, this is a little bit of spacing around it, also some padding and just slight padding for
it.
I'm also going to apply the box sizing, so I usually just like to add this to the border.
So box sizing, set that to border box and also want to update showing the title here.
And then we've got the value for planets.
So let's update that where whenever the item gets clicked and we're adding in the button your property.
So let's also do the button.
And I'll call it my title, and you can give these object properties whatever, whatever property values
you want, and I'm using dot notation, so it's the same thing.
You can use the bracket notation as well.
So my preference is usually the dot notation, and this is just another object that we're working with
in JavaScript.
So that's why we're able to dynamically add and these are the elements of the page where we're adding
these properties onto so they're objects and we can add properties onto objects, just as we've seen
with the JSON data.
And the text content is going to be whatever we've got for the property.
And also, let's do one more where we're have the and we'll just have the title so we can set the end
title here.
So we're not actually going to we're going to keep as a global value.
So every time that title changes that we can update it.
So that way we can use the title and it doesn't necessarily update whenever we're building new pages,
but we have that information within the page.
So let's update the TEMEL and that can have that and title.
So having an H1 there and then also we'll do a small and have the end point within the small because
we don't really want that to show, that's really just for our development work.
And you can remove these if you do launch this as a live application.
So let's see how that works.
So now we've got the starship's and we also want to add in a class.
So for the my title, we'll do a text transform, let's just capitalize it and do a font size and do
a massive font size.
And text a line of central line the contents, and actually we're going to central line within the output
class, so we've got everything centered there and add a class of my title to it, to the H1.
So see what that looks like.
And so we're actually not using the option here.
So there is no search within this API.
So let's hide those from the page.
I can do that with JavaScript or you can just remove them from your HTML so the input value and set
the style to display and then just set it to display then and also for the button one, do the same.
Just hide them off the page and go through.
Test it out.
So also we want to update how this content is being presented.
So let's add in some styling into that as we're putting it onto the page so it looks more visible and
usually just make sure that it's working properly and then apply the styling afterwards.
So that's usually the best practice to make sure that everything is working as expected.
And then you can apply styling to the page content as needed.
So we've got all of these.
We click it so we should output the property name in a larger format.
And then the value on the right hand side, that can just stay as regular text.
So let's add in.
And I just call it big text and set the font size to this and where we're outputting that content and
also let's update the board.
So update the font weight and we'll sell it to Bould.
And now let's go back into the JavaScript and where we're adding and outputting the page content, so
we've got the show item.
For the property itself, we can wrap it with a span and within the span set that class to the one that
we just created.
And let's close off the spin and we'll see how that looks.
Stands out more, let's also capitalize it.
Text transform and capitalize on.
Typically, when it's coming from the JSON data, it's not going to be capitalized, so it's one of
the things that it's good to add in and it's well, we also have the underscores.
So in order to remove it, the underscores, as it was from the JSON data, you might want to update
whatever the property value is and do a temporary value.
So we'll do a proper temp and this is the one that we can actually output and that will come from the
property bubble to replace.
So replacing out any of the underscores and just replacing it with a space.
So let's see what we've got now.
So now we've got this we've got the space there and just click through, make sure things are working
as expected, apply some styling as needed.
I'm actually going to play a little bit more styling around the buttons.
So a little bit more margin around those and also we'll do a border radius, so to round those more.
See what that looks like?
And this is whatever your preferences on the buttons.
And I want to touch more padding on it, and I'm also going to decrease the font size because they're
awfully large.
So there we go.
So we're loading our dynamically, getting a bunch of content from the API and building out fully interactive
and dynamic Web application just from data coming from an API endpoint.
And the HTML is very minimal.
It's just the same HTML elements that we working with earlier.
And now the user can come in and they can get all of this information that's data driven information
that they can interact with.
Thanks for this lesson is to continue to generate content from the episode, dynamically generated content,
all coming from the data from the API and make the requests as needed to create the user interactions,
getting the data so that the user can navigate through your Web application and pull out the data that
they're looking for.
So also include the pagination to move through the different pages of content next and previous buttons
so that the user can easily navigate and select the content that they want to view and see the additional
content that's available and then also apply staling as needed to make the application.
Attractive and interactive for users.