1
00:00:01,300 --> 00:00:06,880
This lesson is going to be a conclusion to this project where we're loading content dynamically and

2
00:00:06,880 --> 00:00:12,220
as the user scrolls down, we're going to load additional content until there's no more content to load

3
00:00:12,340 --> 00:00:13,990
and then we're just going to disappear.

4
00:00:13,990 --> 00:00:17,500
The message block from the user's view.

5
00:00:17,860 --> 00:00:23,770
And you can see that when you do the inspect that we still have that message area that says loading.

6
00:00:23,920 --> 00:00:29,650
Let's not display none and you can customize this to act however you need it to act again to reset this

7
00:00:29,650 --> 00:00:30,910
back to page one.

8
00:00:30,970 --> 00:00:36,460
So that's our initial first page so that that first page loads properly and all of the functionality

9
00:00:36,460 --> 00:00:36,790
is there.

10
00:00:36,970 --> 00:00:39,790
So it's quite a bit that you can do to still tweak this application.

11
00:00:40,120 --> 00:00:45,820
And of course, depending on what type of content and how you want to put the content there so you can

12
00:00:45,820 --> 00:00:51,700
practice as well with what's being returned back in this API and then customize it for your own purposes

13
00:00:51,700 --> 00:00:52,750
within your own API.

14
00:00:52,990 --> 00:00:56,370
So this one is just an array based that's being returned back.

15
00:00:56,380 --> 00:00:57,820
So it's an array within an array.

16
00:00:58,000 --> 00:01:02,060
And each one of these array items has a particular piece of content.

17
00:01:02,470 --> 00:01:08,260
So there's a description, there's more of a kind of a headline there, and there's a link to where

18
00:01:08,260 --> 00:01:09,400
the course is located.

19
00:01:09,850 --> 00:01:11,140
That's the number of reviews.

20
00:01:11,140 --> 00:01:12,040
That's the rating.

21
00:01:12,040 --> 00:01:14,380
That's when it was created and so on.

22
00:01:14,390 --> 00:01:16,830
So some additional information that can be added.

23
00:01:16,840 --> 00:01:19,630
And so if you wanted to, you could customize this.

24
00:01:19,630 --> 00:01:24,540
And I'll do a quick customization with adding in some more content.

25
00:01:25,180 --> 00:01:30,670
And as we're doing the inner HTML, this is a template literals so we can do spaces and that will bring

26
00:01:30,670 --> 00:01:32,170
us to the next line.

27
00:01:32,380 --> 00:01:39,730
And if we want to have some additional content, all we have to do is use the dollar sign in curly brackets

28
00:01:39,730 --> 00:01:47,380
to bring additional variables into this so we can see that this is the number six is number five is

29
00:01:47,380 --> 00:01:47,880
the rating.

30
00:01:48,280 --> 00:01:56,860
So using the post index five stars by and then we can have another value students and maybe we want

31
00:01:56,860 --> 00:01:59,580
to do an H.R. here to separate the posts.

32
00:01:59,980 --> 00:02:01,210
So it looks a little bit different.

33
00:02:01,240 --> 00:02:03,640
You can play around with the content that's being returned.

34
00:02:03,910 --> 00:02:06,100
And so now it looks a little bit better.

35
00:02:06,550 --> 00:02:14,560
You can also include your URLs and hyperlinks if you want to view the content to each ref and link it

36
00:02:14,560 --> 00:02:17,620
to wherever the wherever the URL is.

37
00:02:17,830 --> 00:02:22,750
So if you're linking out to some content and you might also want to have another title here so you could

38
00:02:22,750 --> 00:02:26,380
add in the hyperlinks that way, and that's all coming from the API.

39
00:02:26,410 --> 00:02:30,600
So again, they will vary depending on what you're getting return back from the API.

40
00:02:30,790 --> 00:02:32,680
So this one, maybe it's zero.

41
00:02:33,100 --> 00:02:36,760
And then we've got number two.

42
00:02:36,760 --> 00:02:39,520
They're supposed to so that we're linking out.

43
00:02:39,520 --> 00:02:44,320
We've got a title for each one, we've got the rating and and so on.

44
00:02:44,330 --> 00:02:47,830
So we've got all of that information is being appended there.

45
00:02:48,250 --> 00:02:51,630
So just a quick overview of how we set up this application.

46
00:02:51,910 --> 00:02:54,940
So it started out like a basic HTML structure.

47
00:02:54,940 --> 00:03:00,460
We added in some height for the header and footer to simulate some type of web page content that might

48
00:03:00,460 --> 00:03:02,610
potentially be added onto the page.

49
00:03:02,890 --> 00:03:06,790
So make this a little bit bigger and we've got our top content there.

50
00:03:06,790 --> 00:03:11,200
And then all of this content is going to continuously load as the user scrolls down.

51
00:03:11,560 --> 00:03:16,410
They get a quick message there that says loading as it's loading additional content on the page and

52
00:03:16,410 --> 00:03:18,280
then it runs out of content to load.

53
00:03:18,290 --> 00:03:20,470
So it's just loading them by the chunks of pages.

54
00:03:20,740 --> 00:03:23,140
And we just got some basic e-mail structure.

55
00:03:23,140 --> 00:03:26,140
So the three main elements there, the header, the section and the footer.

56
00:03:26,320 --> 00:03:32,320
And then JavaScript is doing all of the behind the scenes work where it's connecting to the sets, using

57
00:03:32,320 --> 00:03:37,720
the you are all connecting to a web endpoint that requires a page value.

58
00:03:37,720 --> 00:03:41,190
So that's provided with P equals whatever the page value is.

59
00:03:41,500 --> 00:03:46,990
So we're starting our page off at one and we're incrementing those pages as we load more content.

60
00:03:47,000 --> 00:03:50,260
So we have new content that's being presented for the user.

61
00:03:50,440 --> 00:03:52,720
We create a main variable called Page.

62
00:03:52,730 --> 00:03:56,470
This is a main object where we can load the page information.

63
00:03:56,770 --> 00:04:00,760
So that's loading more message and the different element containers that we constructed.

64
00:04:00,970 --> 00:04:06,850
And then we've got this first load function that's clearing out the inner HTML from the page container,

65
00:04:07,060 --> 00:04:09,580
and then it's running a function called Get Courses.

66
00:04:09,820 --> 00:04:16,330
And this is where all of really the stuff happens is that we take the URL, we make our fetch request,

67
00:04:16,330 --> 00:04:18,190
return back it as JSON.

68
00:04:18,430 --> 00:04:23,500
We check to see if there's more pages, if there's more pages than we re-enable the ability to load

69
00:04:23,500 --> 00:04:24,460
it on the scroll.

70
00:04:24,640 --> 00:04:27,880
We also provide some text content back to the user.

71
00:04:28,120 --> 00:04:34,120
If there's no more pages to load than we're going to end the loading and we just highlight the message

72
00:04:34,120 --> 00:04:36,700
element and all of the content is still loaded there.

73
00:04:36,970 --> 00:04:42,190
We've got a few console messages here that we're using on debugging so these can be blocked out.

74
00:04:42,190 --> 00:04:43,240
So you don't have to have these.

75
00:04:43,240 --> 00:04:48,340
Of course, as you're debugging your application, you're going to want to use the console log in order

76
00:04:48,340 --> 00:04:52,780
to make sure that you've got your variables and your data picked up properly.

77
00:04:53,200 --> 00:04:58,510
Then we're invoking a function called Render Post, which is the one that actually builds the HTML.

78
00:04:58,510 --> 00:05:00,490
So everything is broken apart.

79
00:05:00,790 --> 00:05:08,440
We also have one that listens for the window scroll of an object, we looked at the variables that we

80
00:05:08,440 --> 00:05:12,220
needed to consider when we're trying to figure out where we're positioned on the page and where the

81
00:05:12,220 --> 00:05:13,740
user's positioned on the page.

82
00:05:13,990 --> 00:05:18,670
And then once we do that calculation, if the condition is met, then we load more content.

83
00:05:18,820 --> 00:05:25,810
So we do the add new posts and add new poster says it's the same thing as get courses, but we're incrementing

84
00:05:25,810 --> 00:05:28,270
the page value so that we get the new page.

85
00:05:28,870 --> 00:05:35,040
So then we're running the function, get posts or get courses, which is getting all of the post information.

86
00:05:35,170 --> 00:05:41,170
And then lastly, the render the post was the one that is constructing the content of the visible content

87
00:05:41,170 --> 00:05:41,910
for the user.

88
00:05:42,100 --> 00:05:43,780
So we're looping through all of the data.

89
00:05:43,900 --> 00:05:50,800
So this has to be as an array object that gets passed into the render posts so that it can render the

90
00:05:50,800 --> 00:05:56,620
posts out, taking out the structure, which we saw that it's another array inside of there.

91
00:05:56,770 --> 00:06:02,260
So just depending on what the index values are, we can return back the associated values.

92
00:06:02,440 --> 00:06:08,800
And then once we construct the entire HTML, we just append and you div to the main page container and

93
00:06:08,800 --> 00:06:13,420
we continuously loop through until there's no more posts available within the data that was sent to

94
00:06:13,420 --> 00:06:14,210
the render posts.

95
00:06:14,800 --> 00:06:17,500
If you have any questions or comments, I'm always happy to help.

96
00:06:17,500 --> 00:06:22,570
I've included all the source code and I do encourage you to try it out for yourself, connect to other

97
00:06:22,600 --> 00:06:29,230
endpoints and update the values and make sure that you can load the content and use console log, of

98
00:06:29,230 --> 00:06:34,390
course, to see how the data is structured so that you can get the appropriate values.

99
00:06:34,600 --> 00:06:37,960
And keep in mind as well that it could vary.

100
00:06:38,230 --> 00:06:44,770
So you might not always have the page increments, you might have different posts by numbers and you'd

101
00:06:44,770 --> 00:06:48,160
have to check to see if there's values there that's being returned back.

102
00:06:48,340 --> 00:06:50,440
So there's a number of different ways that this could be handled.

103
00:06:50,560 --> 00:06:56,830
And it all depends on the API and how the G7 object is being returned back from the API endpoint.

104
00:06:57,130 --> 00:07:01,380
Thanks again for taking this course on the section and I'll see you in the next one.