02-Pagination Functions

In this module, we'll apply pagination to our NYT search application.

Pagination Functions

The last thing we need to do is add the functionality for the pagination buttons. This will allow the user to view multiple pages of results and use the buttons to go back and forth in the results.

Review

This section serves as a refresher for some of the code we've already written. We'll also add some console statements to help with understanding.

Recall earlier that you added click listeners for the nextBtn and previousBtn, and we stubbed out simple functions that logged to the console. Let's add to those functions, starting with nextPage. Let's recall our variables at the top of the JavaScript file. Remember that we have these button variables:

const nextBtn = document.querySelector('.next');
const previousBtn = document.querySelector('.prev');

Also, recall that we created a few more variables that control navigation and pagination. Let's also console.log the pageNumber variable that is in this global scope:

const nav = document.querySelector('nav');

let pageNumber = 0;
console.log('PageNumber:', pageNumber);
let displayNav = false;

We'll use this pageNumber variable in our function to show different pages of results.

We also have our event listeners to control the functionality of our clicks. When we 'click' nextBtn, we'll fire nextPage. Same as previousBtn for firing off previousPage:

searchForm.addEventListener('submit', fetchResults);
nextBtn.addEventListener('click', nextPage);
previousBtn.addEventListener('click', previousPage);

Remember, too, that the pageNumber variable is inside of the url string inside of fetchResults. Let's go ahead and add a log for the url so we can see the change in the url string:

function fetchResults(e) {
  e.preventDefault();
  // Assemble the full URL
  url = baseURL + '?api-key=' + key + '&page=' + pageNumber + '&q=' + searchTerm.value;
  console.log("URL:", url);

All of this review will synthesize in the next steps.

nextPage()

The nextPage function does exactly what it says: allows the user to move to the next page of results. Let's add the code underneath the displayResults function and discuss:

function nextPage(e) {
   pageNumber++; //1
   fetchResults(e);  //2
   console.log("Page number:", pageNumber); //3
};

The task is relatively simple. We do two things: 1. We first increase the value of the pageNumber variable. 2. We rerun the fetchResults function. 3. We print the pageNumber variable so that we can see it increment.

This will pull and display the next page of results from the API.

Run

Go ahead and run the app and do a search. You should see the following:

Screenshot

Then, navigate to the next page by pressing the next page button:

Screenshot

Notice how the query string, specifically the page number, has changed in value.

previousPage()

The previousPage function works exactly the opposite, decreasing the pageNumber variable when we click it. Let's add the code underneath the nextPage function and then discuss:

function previousPage(e) {
  if(pageNumber > 0) { //1
    pageNumber--; //2
  } else {
    return; //3
  }
  fetchResults(e); //4
  console.log("Page:", pageNumber); //5

};

1. We have to account for the user being on the first page (page 0), as a pageNumber of -1 would cause an error.

2. If the page number is over 0, we decrement the page number by 1.

3. If the value is 0, however, we return nothing and get out of the function, thus ensuring that the value won't drop below 0.

4. If the value wasn't 0 and we've decremented the page number, we run fetchResults again.

CHALLENGE

At the moment, there is a bug in our pagination code. The only conditional working right now is checking whether or not there are 10 items in the articles array. When we reach the last few items of the search, the <nav> element is hidden because there are fewer than 10 items in the array. But what if we want to go back? We can't, because the button isn't there! Try to come up with a way to show the previousBtn even if there is less than 10 items in the array, while hiding the nextBtn in this situation.

hiddenNextBtn

BONUS CHALLENGE

See if you can find a way to hide the previousBtn on first page of results!

hiddenPrevBtn