1
00:00:00,000 --> 00:00:09,994
[MUSIC]

2
00:00:09,994 --> 00:00:11,569
Hi everyone, Travis here.

3
00:00:11,569 --> 00:00:16,430
Today we're going to sharpen our skills
on a fundamental aspect of modern web

4
00:00:16,430 --> 00:00:18,164
development pagination.

5
00:00:18,164 --> 00:00:22,723
Pagination allows us to split large
amounts of data into manageable chunks,

6
00:00:22,723 --> 00:00:26,470
enhancing user experience,
and even load times.

7
00:00:26,470 --> 00:00:31,394
By mastering this technique, you'll
empower yourself to create user friendly,

8
00:00:31,394 --> 00:00:35,687
efficient and engaging web experiences
that cater to both usability and

9
00:00:35,687 --> 00:00:36,617
performance.

10
00:00:36,617 --> 00:00:38,124
Let's get started.

11
00:00:38,124 --> 00:00:41,764
Launch the workspace with this video,
or download the project files and

12
00:00:41,764 --> 00:00:43,860
open them in your preferred text editor.

13
00:00:45,090 --> 00:00:48,307
For this exercise,
we won't have to worry about the CSS,

14
00:00:48,307 --> 00:00:50,877
or this assets folder
which contains images.

15
00:00:50,877 --> 00:00:55,826
So I'm going to open the index.html,
data.js, and script.js files and hide this

16
00:00:55,826 --> 00:01:00,239
sidebar for more screen space, but
you don't have to hide yours of course.

17
00:01:01,240 --> 00:01:04,317
Let's start by taking a look at data.js.

18
00:01:04,317 --> 00:01:07,030
In this file is an array named authors.

19
00:01:07,030 --> 00:01:10,604
It's comprised of objects,
each holding the information for

20
00:01:10,604 --> 00:01:13,378
each of our authors we'll
be adding to the page.

21
00:01:13,378 --> 00:01:18,000
Note that each author object has a name,
image, and text property.

22
00:01:18,000 --> 00:01:21,637
In index.html, we have our main element.

23
00:01:21,637 --> 00:01:24,610
And nested inside are two divs.

24
00:01:24,610 --> 00:01:28,797
This author container is where we'll
dynamically insert each of our cards

25
00:01:28,797 --> 00:01:30,598
displaying an author's info.

26
00:01:30,598 --> 00:01:34,790
Here's an example of the markup we need
to use to create each individual card.

27
00:01:35,790 --> 00:01:40,426
The pagination list UL is where we'll
dynamically insert our pagination buttons.

28
00:01:40,426 --> 00:01:44,060
And again, this is the markup
we need to use for those.

29
00:01:44,060 --> 00:01:49,309
Here you can see I've already linked the
JavaScript files, so you're all set there.

30
00:01:49,309 --> 00:01:51,620
Let's take a look at the script.js file.

31
00:01:52,830 --> 00:01:55,640
This is where you'll
write all of your code.

32
00:01:55,640 --> 00:01:59,359
On lines two and three, I have already
selected those two divs we need, and

33
00:01:59,359 --> 00:02:01,910
named them authorContainer and
paginationList.

34
00:02:02,990 --> 00:02:06,931
Line five I have commented out but
it's here for you if you need it later.

35
00:02:06,931 --> 00:02:11,383
Because I've linked data.js
before this script in the HTML,

36
00:02:11,383 --> 00:02:14,743
our authors data is
accessible just like this.

37
00:02:14,743 --> 00:02:20,788
Line six holds a variable named authors
per page with a default value of three.

38
00:02:20,788 --> 00:02:24,401
This is going to be very important
throughout this exercise.

39
00:02:24,401 --> 00:02:28,217
I have broken up this exercise
into three large chunks,

40
00:02:28,217 --> 00:02:33,009
handling adding the pagination buttons,
showing a specific page and

41
00:02:33,009 --> 00:02:37,005
the event listener to trigger
the changes between pages.

42
00:02:37,005 --> 00:02:40,800
For the first part, I have defined
this function named handle pagination.

43
00:02:41,890 --> 00:02:46,698
It takes in an array as an argument,
which I've simply named array for you.

44
00:02:46,698 --> 00:02:50,870
Inside are code comments to help and
guide you through each necessary step.

45
00:02:51,930 --> 00:02:54,705
Second up is the function showPage.

46
00:02:54,705 --> 00:02:56,845
This function will take in
the same data array and

47
00:02:56,845 --> 00:02:59,200
a number representing which
page we want to display.

48
00:03:00,300 --> 00:03:04,313
Again, there are code comments and
hints to guide you.

49
00:03:04,313 --> 00:03:08,073
Lastly, we have an event listener
set on our pagination list element,

50
00:03:08,073 --> 00:03:12,540
the group of page buttons, and
it's listening for the click event.

51
00:03:12,540 --> 00:03:16,019
This one can be tricky, so
read the comments here carefully.

52
00:03:16,019 --> 00:03:17,005
Down at the bottom,

53
00:03:17,005 --> 00:03:22,020
I have already added the initial calls to
our two functions to initialize the page.

54
00:03:22,020 --> 00:03:26,188
Notice I'm sending in our author's
data as the array for both,

55
00:03:26,188 --> 00:03:29,950
and the number one in showPage to show
the user the first page by default.

56
00:03:31,110 --> 00:03:33,314
Don't forget to console log values and

57
00:03:33,314 --> 00:03:35,862
check your work in
the browser along the way.

58
00:03:35,862 --> 00:03:38,045
In the next video,
I'll show you my solution.

59
00:03:38,045 --> 00:03:39,820
Good luck, you've got this.