Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Practice Data Pagination!
You have completed Practice Data Pagination!
Preview
This video introduces the challenges to complete.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[MUSIC]
0:00
Hi everyone, Travis here.
0:09
Today we're going to sharpen our skills
on a fundamental aspect of modern web
0:11
development pagination.
0:16
Pagination allows us to split large
amounts of data into manageable chunks,
0:18
enhancing user experience,
and even load times.
0:22
By mastering this technique, you'll
empower yourself to create user friendly,
0:26
efficient and engaging web experiences
that cater to both usability and
0:31
performance.
0:35
Let's get started.
0:36
Launch the workspace with this video,
or download the project files and
0:38
open them in your preferred text editor.
0:41
For this exercise,
we won't have to worry about the CSS,
0:45
or this assets folder
which contains images.
0:48
So I'm going to open the index.html,
data.js, and script.js files and hide this
0:50
sidebar for more screen space, but
you don't have to hide yours of course.
0:55
Let's start by taking a look at data.js.
1:01
In this file is an array named authors.
1:04
It's comprised of objects,
each holding the information for
1:07
each of our authors we'll
be adding to the page.
1:10
Note that each author object has a name,
image, and text property.
1:13
In index.html, we have our main element.
1:18
And nested inside are two divs.
1:21
This author container is where we'll
dynamically insert each of our cards
1:24
displaying an author's info.
1:28
Here's an example of the markup we need
to use to create each individual card.
1:30
The pagination list UL is where we'll
dynamically insert our pagination buttons.
1:35
And again, this is the markup
we need to use for those.
1:40
Here you can see I've already linked the
JavaScript files, so you're all set there.
1:44
Let's take a look at the script.js file.
1:49
This is where you'll
write all of your code.
1:52
On lines two and three, I have already
selected those two divs we need, and
1:55
named them authorContainer and
paginationList.
1:59
Line five I have commented out but
it's here for you if you need it later.
2:02
Because I've linked data.js
before this script in the HTML,
2:06
our authors data is
accessible just like this.
2:11
Line six holds a variable named authors
per page with a default value of three.
2:14
This is going to be very important
throughout this exercise.
2:20
I have broken up this exercise
into three large chunks,
2:24
handling adding the pagination buttons,
showing a specific page and
2:28
the event listener to trigger
the changes between pages.
2:33
For the first part, I have defined
this function named handle pagination.
2:37
It takes in an array as an argument,
which I've simply named array for you.
2:41
Inside are code comments to help and
guide you through each necessary step.
2:46
Second up is the function showPage.
2:51
This function will take in
the same data array and
2:54
a number representing which
page we want to display.
2:56
Again, there are code comments and
hints to guide you.
3:00
Lastly, we have an event listener
set on our pagination list element,
3:04
the group of page buttons, and
it's listening for the click event.
3:08
This one can be tricky, so
read the comments here carefully.
3:12
Down at the bottom,
3:16
I have already added the initial calls to
our two functions to initialize the page.
3:17
Notice I'm sending in our author's
data as the array for both,
3:22
and the number one in showPage to show
the user the first page by default.
3:26
Don't forget to console log values and
3:31
check your work in
the browser along the way.
3:33
In the next video,
I'll show you my solution.
3:35
Good luck, you've got this.
3:38
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up