This lesson is going to be a conclusion to this project where we're loading content dynamically and
as the user scrolls down, we're going to load additional content until there's no more content to load
and then we're just going to disappear.
The message block from the user's view.
And you can see that when you do the inspect that we still have that message area that says loading.
Let's not display none and you can customize this to act however you need it to act again to reset this
back to page one.
So that's our initial first page so that that first page loads properly and all of the functionality
is there.
So it's quite a bit that you can do to still tweak this application.
And of course, depending on what type of content and how you want to put the content there so you can
practice as well with what's being returned back in this API and then customize it for your own purposes
within your own API.
So this one is just an array based that's being returned back.
So it's an array within an array.
And each one of these array items has a particular piece of content.
So there's a description, there's more of a kind of a headline there, and there's a link to where
the course is located.
That's the number of reviews.
That's the rating.
That's when it was created and so on.
So some additional information that can be added.
And so if you wanted to, you could customize this.
And I'll do a quick customization with adding in some more content.
And as we're doing the inner HTML, this is a template literals so we can do spaces and that will bring
us to the next line.
And if we want to have some additional content, all we have to do is use the dollar sign in curly brackets
to bring additional variables into this so we can see that this is the number six is number five is
the rating.
So using the post index five stars by and then we can have another value students and maybe we want
to do an H.R. here to separate the posts.
So it looks a little bit different.
You can play around with the content that's being returned.
And so now it looks a little bit better.
You can also include your URLs and hyperlinks if you want to view the content to each ref and link it
to wherever the wherever the URL is.
So if you're linking out to some content and you might also want to have another title here so you could
add in the hyperlinks that way, and that's all coming from the API.
So again, they will vary depending on what you're getting return back from the API.
So this one, maybe it's zero.
And then we've got number two.
They're supposed to so that we're linking out.
We've got a title for each one, we've got the rating and and so on.
So we've got all of that information is being appended there.
So just a quick overview of how we set up this application.
So it started out like a basic HTML structure.
We added in some height for the header and footer to simulate some type of web page content that might
potentially be added onto the page.
So make this a little bit bigger and we've got our top content there.
And then all of this content is going to continuously load as the user scrolls down.
They get a quick message there that says loading as it's loading additional content on the page and
then it runs out of content to load.
So it's just loading them by the chunks of pages.
And we just got some basic e-mail structure.
So the three main elements there, the header, the section and the footer.
And then JavaScript is doing all of the behind the scenes work where it's connecting to the sets, using
the you are all connecting to a web endpoint that requires a page value.
So that's provided with P equals whatever the page value is.
So we're starting our page off at one and we're incrementing those pages as we load more content.
So we have new content that's being presented for the user.
We create a main variable called Page.
This is a main object where we can load the page information.
So that's loading more message and the different element containers that we constructed.
And then we've got this first load function that's clearing out the inner HTML from the page container,
and then it's running a function called Get Courses.
And this is where all of really the stuff happens is that we take the URL, we make our fetch request,
return back it as JSON.
We check to see if there's more pages, if there's more pages than we re-enable the ability to load
it on the scroll.
We also provide some text content back to the user.
If there's no more pages to load than we're going to end the loading and we just highlight the message
element and all of the content is still loaded there.
We've got a few console messages here that we're using on debugging so these can be blocked out.
So you don't have to have these.
Of course, as you're debugging your application, you're going to want to use the console log in order
to make sure that you've got your variables and your data picked up properly.
Then we're invoking a function called Render Post, which is the one that actually builds the HTML.
So everything is broken apart.
We also have one that listens for the window scroll of an object, we looked at the variables that we
needed to consider when we're trying to figure out where we're positioned on the page and where the
user's positioned on the page.
And then once we do that calculation, if the condition is met, then we load more content.
So we do the add new posts and add new poster says it's the same thing as get courses, but we're incrementing
the page value so that we get the new page.
So then we're running the function, get posts or get courses, which is getting all of the post information.
And then lastly, the render the post was the one that is constructing the content of the visible content
for the user.
So we're looping through all of the data.
So this has to be as an array object that gets passed into the render posts so that it can render the
posts out, taking out the structure, which we saw that it's another array inside of there.
So just depending on what the index values are, we can return back the associated values.
And then once we construct the entire HTML, we just append and you div to the main page container and
we continuously loop through until there's no more posts available within the data that was sent to
the render posts.
If you have any questions or comments, I'm always happy to help.
I've included all the source code and I do encourage you to try it out for yourself, connect to other
endpoints and update the values and make sure that you can load the content and use console log, of
course, to see how the data is structured so that you can get the appropriate values.
And keep in mind as well that it could vary.
So you might not always have the page increments, you might have different posts by numbers and you'd
have to check to see if there's values there that's being returned back.
So there's a number of different ways that this could be handled.
And it all depends on the API and how the G7 object is being returned back from the API endpoint.
Thanks again for taking this course on the section and I'll see you in the next one.