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
Video Player
00:00
00:00
00:00
- 2x 2x
- 1.75x 1.75x
- 1.5x 1.5x
- 1.25x 1.25x
- 1.1x 1.1x
- 1x 1x
- 0.75x 0.75x
- 0.5x 0.5x
This video shows one way of dynamically creating and inserting the pagination buttons to the DOM.
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
Welcome back, were you able to find
a solution to our three challenges?
0:00
Don't worry if not, this was a very
large and challenging practice.
0:05
You can see my solution and
then go back and try it again.
0:08
All right, let's do this.
0:12
For step one, I created a variable
named number of buttons.
0:14
I divided the length of the array passed
to this function by the authorsPerPage
0:18
variable, then I rounded
the number up using Math.ceil.
0:23
Next, I started a for loop to the length
of my number of buttons variable.
0:27
Since we don't want to start our
pagination buttons with zero,
0:32
I decided to start my index variable at
one and loop as long as it's less than or
0:35
equal to the number of buttons.
0:39
You could have started with
zero as we normally would and
0:42
adjusted i in the markup below and
that's totally fine.
0:45
I just wanted to show
you another approach.
0:47
Inside the loop, I created a variable
named html and set it equal to
0:49
a template literal, holding the markup
found in the index.html file.
0:55
Instead of the hard coded
number in the button's content,
1:00
I'm dynamically adding
in our index variable.
1:04
Then I targeted the paginationList UL and
1:07
used insertAdjacentHTML to add this markup
variable at the beforeend position so
1:10
that at the end of each loop,
they are added after the previous one.
1:16
Finally, once the loop is completed,
1:20
I targeted the first button using
querySelector on the pagination list.
1:23
I then used classList.add to
give it the active class.
1:28
Let's see how this is looking
in the browser so far.
1:32
Awesome, though we haven't created any
cards yet, we can see that it has created
1:36
four pagination buttons for us and
applied the active class to the first one.
1:41
There are 11 author objects
in our authors array and
1:45
our authors per page is set to 3.
1:49
So, 11 divided by 3 and
rounded up is 4, perfect.
1:50
In the next video,
we'll go over the show page function.
1:55
See you there.
1:59
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