1
00:00:00,360 --> 00:00:05,520
Hey there, the project that we have for you in the upcoming lessons is going to be an infinite scroll

2
00:00:05,520 --> 00:00:11,160
or an endless scroll, and that means that we're going to continuously load more content on the page,

3
00:00:11,340 --> 00:00:11,670
whatever.

4
00:00:11,670 --> 00:00:16,560
The user is visiting the page and they're going down and they see that they're hitting the end and it's

5
00:00:16,560 --> 00:00:18,240
going to load more additional content.

6
00:00:18,540 --> 00:00:24,690
So as the content is available, it's going to continue to load content onto the page for the user to

7
00:00:24,690 --> 00:00:24,980
see.

8
00:00:25,260 --> 00:00:31,050
And this is all going to be done with JavaScript fetch request to an end point and return it back the

9
00:00:31,050 --> 00:00:33,770
content that's associated with that end point.

10
00:00:33,960 --> 00:00:40,170
So the idea for this project comes from a number of students that have asked me how they can create

11
00:00:40,170 --> 00:00:46,800
this type of effect, where they're able to load content from an external source and loaded into their

12
00:00:46,800 --> 00:00:51,030
page and seamlessly present it to users within their page.

13
00:00:51,210 --> 00:00:56,070
I'll give you walking you through how you can create the same effect step by step, starting from a

14
00:00:56,070 --> 00:01:02,400
blank HTML page that we're going to simulate a typical website where we've got some content at the top

15
00:01:02,400 --> 00:01:09,390
mean content area and then footer content and then have the content load dynamically as the user scrolls

16
00:01:09,390 --> 00:01:15,480
to the bottom of the page, sort of picking up the position of the user, using the window on scroll

17
00:01:15,480 --> 00:01:20,790
of it, and then when that gets triggered, it's going to run a function that's going to make a feature

18
00:01:20,790 --> 00:01:27,720
request to the URL, return it as JSON, and then we're going to go through that JSON data within JavaScript

19
00:01:27,810 --> 00:01:29,880
and then output that onto the page.

20
00:01:30,030 --> 00:01:34,590
If you have any questions or comments, I'm always happy to help answer them within the Q&A section.

21
00:01:34,920 --> 00:01:39,720
I do suggest that you work alongside the lessons to create your own version of this project.

22
00:01:39,870 --> 00:01:42,940
I am going to be using brackets as my editor of Choice.

23
00:01:42,960 --> 00:01:49,140
I've got it opened up here on the left hand side and then I'm minimizing browser window on the right

24
00:01:49,140 --> 00:01:55,320
hand side so that we can see the output of the page content onto the display area here.

25
00:01:55,320 --> 00:02:01,140
On the right hand side, I'm also going to be making use of Chrome and Chrome as the browser I'm using.

26
00:02:01,140 --> 00:02:07,530
So the developer tools in chrome output and content into the console so that we can track the values

27
00:02:07,530 --> 00:02:09,930
that are being created using JavaScript.

28
00:02:09,960 --> 00:02:12,240
So again, all of the source code is included.

29
00:02:12,250 --> 00:02:13,730
So do try it out for yourself.

30
00:02:13,950 --> 00:02:17,610
I know you're excited to get started, so let's dive right in and start creating this project.