Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Practice Data Pagination

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Solution: Display a Specific Page

1:53 with Travis Alstrand

This video shows one way of dynamically creating and inserting the author cards to the DOM.

Resources

insertAdjacentHTML() - MDN

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    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

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up