04-Results Navigation

In this module, we'll add navigation for showing multiple results, if we get more than 10 in our response.

Adding the Navigation

Add the following code after the articles variable in displayResults. Note that some code has been omitted from the below code, but you should still keep them in your code (i.e. don't delete the previous code of article.length === 0:

function displayResults(json) {
  let articles = json.response.docs;

  if(articles.length === 10) {
    nav.style.display = 'block'; //shows the nav display if 10 items are in the array
  } else {
    nav.style.display = 'none'; //hides the nav display if less than 10 items are in the array
  }

};

Analysis

Here we've added an if-else that does the following things: 1. We check to see if articles.length is greater than 10. If it is, we will set the CSS display to block. Notice that we are targeting the nav element created in the nav variable at the top of the page. Remember that this nav variable is targeting the nav in our original html file, we have this element:

     <div class="results">
        <nav>
          <button class="prev">Previous 10</button>
          <button class="next">Next 10</button>
        </nav>

        <section>
        </section>
      </div>

Essentially, if we get ten results in the JSON data, it will display the nav element in the dom with the two buttons, Previous 10 & Next 10.

If we do not have at least 10 results, we set the CSS display property to none. This means, of course, that the buttons won't show. If we only get 7 or 8 results, we don't need buttons to navigate to the next 10 results.

Screenshot

Here's what you should be seeing now when the results are 10 or more. Note that the buttons will not be functional until later.

Screenshot