Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
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