Preview
Video Player
00:00
00:00
Solution: Display a Specific Page
1:53This video shows one way of dynamically creating and inserting the author cards to the DOM.
Welcome back, let's see how I went
about filling in the showPage function.
0:00
All right, for steps four and five, I've
created variables named start and end.
0:04
For start, I've multiplied our page
variable by our authors per page,
0:09
then subtracted authors
per page from that result.
0:13
For end,
I've done the same multiplication.
0:16
But instead, subtracted 1 from the result.
0:19
Because remember, arrays are zero-based.
0:21
Now, we can dynamically add the correct
authors to whichever page we decide to
0:25
display.
0:30
Step six is a sneaky
issue that is necessary.
0:31
Because without it, the browser would
keep displaying all of the author cards
0:33
from previous pages we've viewed.
0:38
I'll demonstrate the importance
of this momentarily.
0:40
But in short, I've targeted
the authorContainer's innerHTML and
0:43
set it equal to an empty string.
0:47
Step seven is a tricky one.
0:49
I started a for
loop to the length of the array passed in.
0:51
Inside the loop,
0:54
I immediately run a conditional statement
checking if our index is greater than or
0:55
equal to our start variable and index is
less than or equal to our end variable.
1:00
This ensures we're only adding
the authors that belong on the current
1:05
page we're wanting to view.
1:08
If both of those conditions are true,
1:09
I again created a variable named HTML and
set it to a template literal.
1:12
Again, I copied the markup
from index.html and
1:16
added in the info we needed dynamically.
1:20
Like before I used insertAdjacen
HTML to append this to the page and
1:23
the before end position, but adding
it to the authorContainer this time.
1:28
Okay, let's see how it's
looking in the browser.
1:33
Sweet, we're seeing our first
three author cards on the page.
1:35
This is because I'm passing in one
as the second argument when calling
1:39
the showPage function at
the bottom of script.js.
1:43
In the final video, we'll complete the
last part of the challenge to allow users
1:47
to interact and show different pages.
1:51