title: Pagination withOUT jQuery. How can I select a range of elements with the same class? Does my logic make any sense?
body: <p>I am working on a project and I want to create a pagination feature for a list of students. There are 54 students and I want to show no more than 10 per page.</p>
  
  <p>The class of the list (<code>ul</code>) itself is <code>"student-list"</code> and the class of the individual students (<code>li</code>) is <code>"student-item"</code>.</p>
  
  <p>Of course, I also need to create buttons at the bottom of the page to link to the respective pages.</p>
  
  <p>My intuition tells me to link each button to a number. If that button is pressed then it will display the required range of students.</p>
  
  <p>I want to do this by setting all the <code>student-item</code>'s as hidden. Based on the button clicked, I can then set a certain range of the <code>student-item</code>'s to visible. How can I do this? Is this possible without jQuery?</p>
  
  <p>Here is my pseudocode. Please do not give too much away!:</p>
  
  <pre><code>//Problem: Shows too many people per page
  //Solution: Incorporate pagination and add search functionality
  
  var studentTotal = document.getElementsByClassName("student-item").length;
  var pageCount = Math.ceil(studentTotal/10);
  var pageNum;
  var buttonNum = pageCount;
  
  console.log(studentTotal);
  console.log(pageCount);
  
  
  //Add pagination feature
  
  
      var displayPage = function() {
          //Display first 10 students on initial page view, first 10 .student-items OF .studentList
          //Hide all but first 10 students when the page loads
          var divsToshow = document.getElementsByClassName("student-item");
  
          //Display buttons
          createButton();
  
          //active button = page number
      }   
  
      //Create enough buttons for amount of page numbers
      var createButton = function() {
  
  
          //add button list div, .pagination with an unordered list 
          //Create a button(li) for every page number
      }
  
  
      //Bind eventhandler to button action to display page
      var bindButton = function() {
  
      }
  
  
      //If user clicks on 2 in pagination, students 11-20 are shown etc.
      var buttonClick = function() {
          //Simple animation when transitioning between pages
  
          //call displayPage
          displayPage();
      }
  </code></pre>
  
  <p>Here is my html: </p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"/&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"/&gt;
      &lt;title&gt;Students&lt;/title&gt;
      &lt;link rel="stylesheet" href="css/reset.css"&gt;
      &lt;link rel="stylesheet" href="css/design.css"&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div class="page"&gt;
        &lt;div class="page-header cf"&gt;
          &lt;h2&gt;Students&lt;/h2&gt;
        &lt;/div&gt;
        &lt;ul class="student-list"&gt;
          &lt;li class="student-item cf"&gt;
              &lt;div class="student-details"&gt;
                  &lt;img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/67.jpg"&gt;
                  &lt;h3&gt;iboya vat&lt;/h3&gt;
                  &lt;span class="email"&gt;iboya.vat@example.com&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="joined-details"&gt;
                     &lt;span class="date"&gt;Joined 07/15/15&lt;/span&gt;
             &lt;/div&gt;
          &lt;/li&gt;
          &lt;li class="student-item cf"&gt;
              &lt;div class="student-details"&gt;
                  &lt;img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/75.jpg"&gt;
                  &lt;h3&gt;aapo niskanen&lt;/h3&gt;
                  &lt;span class="email"&gt;aapo.niskanen@example.com&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="joined-details"&gt;
                     &lt;span class="date"&gt;Joined 06/15/12&lt;/span&gt;
             &lt;/div&gt;
          &lt;/li&gt;
          &lt;li class="student-item cf"&gt;
              &lt;div class="student-details"&gt;
                  &lt;img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/34.jpg"&gt;
                  &lt;h3&gt;phillip cox&lt;/h3&gt;
                  &lt;span class="email"&gt;phillip.cox@example.com&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="joined-details"&gt;
                     &lt;span class="date"&gt;Joined 09/11/14&lt;/span&gt;
             &lt;/div&gt;
          &lt;/li&gt;
          &lt;li class="student-item cf"&gt;
              &lt;div class="student-details"&gt;
                  &lt;img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/38.jpg"&gt;
                  &lt;h3&gt;zilda moreira&lt;/h3&gt;
                  &lt;span class="email"&gt;zilda.moreira@example.com&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="joined-details"&gt;
                     &lt;span class="date"&gt;Joined 07/15/15&lt;/span&gt;
             &lt;/div&gt;
          &lt;/li&gt;
          &lt;li class="student-item cf"&gt;
              &lt;div class="student-details"&gt;
                  &lt;img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/23.jpg"&gt;
                  &lt;h3&gt;lilou le gall&lt;/h3&gt;
                  &lt;span class="email"&gt;lilou.le gall@example.com&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="joined-details"&gt;
                     &lt;span class="date"&gt;Joined 06/16/13&lt;/span&gt;
             &lt;/div&gt;
          &lt;/li&gt;
          &lt;li class="student-item cf"&gt;
              &lt;div class="student-details"&gt;
                  &lt;img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/94.jpg"&gt;
                  &lt;h3&gt;lucy hall&lt;/h3&gt;
                  &lt;span class="email"&gt;lucy.hall@example.com&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="joined-details"&gt;
                     &lt;span class="date"&gt;Joined 09/11/16&lt;/span&gt;
             &lt;/div&gt;
          &lt;/li&gt;
          &lt;li class="student-item cf"&gt;
              &lt;div class="student-details"&gt;
                  &lt;img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/24.jpg"&gt;
                  &lt;h3&gt;mark colin&lt;/h3&gt;
                  &lt;span class="email"&gt;mark.colin@example.com&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="joined-details"&gt;
                     &lt;span class="date"&gt;Joined 01/14/14&lt;/span&gt;
             &lt;/div&gt;
          &lt;/li&gt;
          &lt;li class="student-item cf"&gt;
              &lt;div class="student-details"&gt;
                  &lt;img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/14.jpg"&gt;
                  &lt;h3&gt;sara alves&lt;/h3&gt;
                  &lt;span class="email"&gt;sara.alves@example.com&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="joined-details"&gt;
                     &lt;span class="date"&gt;Joined 07/19/16&lt;/span&gt;
             &lt;/div&gt;
          &lt;/li&gt;
          &lt;li class="student-item cf"&gt;
              &lt;div class="student-details"&gt;
                  &lt;img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/49.jpg"&gt;
                  &lt;h3&gt;ramon macrae&lt;/h3&gt;
                  &lt;span class="email"&gt;ramon.macrae@example.com&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="joined-details"&gt;
                     &lt;span class="date"&gt;Joined 05/13/12&lt;/span&gt;
             &lt;/div&gt;
          &lt;/li&gt;
          &lt;li class="student-item cf"&gt;
              &lt;div class="student-details"&gt;
                  &lt;img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/15.jpg"&gt;
                  &lt;h3&gt;connor taylor&lt;/h3&gt;
                  &lt;span class="email"&gt;connor.taylor@example.com&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="joined-details"&gt;
                     &lt;span class="date"&gt;Joined 05/18/14&lt;/span&gt;
             &lt;/div&gt;
          &lt;/li&gt;
          &lt;li class="student-item cf"&gt;
              &lt;div class="student-details"&gt;
                  &lt;img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/11.jpg"&gt;
                  &lt;h3&gt;aymeric morel&lt;/h3&gt;
                  &lt;span class="email"&gt;aymeric.morel@example.com&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="joined-details"&gt;
                     &lt;span class="date"&gt;Joined 06/13/13&lt;/span&gt;
             &lt;/div&gt;
          &lt;/li&gt;
          &lt;li class="student-item cf"&gt;
              &lt;div class="student-details"&gt;
                  &lt;img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/49.jpg"&gt;
                  &lt;h3&gt;lorenz otto&lt;/h3&gt;
                  &lt;span class="email"&gt;lorenz.otto@example.com&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="joined-details"&gt;
                     &lt;span class="date"&gt;Joined 05/11/14&lt;/span&gt;
             &lt;/div&gt;
          &lt;/li&gt;
          &lt;li class="student-item cf"&gt;
              &lt;div class="student-details"&gt;
                  &lt;img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/29.jpg"&gt;
                  &lt;h3&gt;karl williamson&lt;/h3&gt;
                  &lt;span class="email"&gt;karl.williamson@example.com&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="joined-details"&gt;
                     &lt;span class="date"&gt;Joined 01/12/14&lt;/span&gt;
             &lt;/div&gt;
          &lt;/li&gt;
          &lt;li class="student-item cf"&gt;
              &lt;div class="student-details"&gt;
                  &lt;img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/34.jpg"&gt;
                  &lt;h3&gt;ouassim heering&lt;/h3&gt;
                  &lt;span class="email"&gt;ouassim.heering@example.com&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="joined-details"&gt;
                     &lt;span class="date"&gt;Joined 01/18/12&lt;/span&gt;
             &lt;/div&gt;
          &lt;/li&gt;
          &lt;li class="student-item cf"&gt;
              &lt;div class="student-details"&gt;
                  &lt;img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/91.jpg"&gt;
                  &lt;h3&gt;roberto molina&lt;/h3&gt;
                  &lt;span class="email"&gt;roberto.molina@example.com&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="joined-details"&gt;
                     &lt;span class="date"&gt;Joined 06/13/15&lt;/span&gt;
             &lt;/div&gt;
          &lt;/li&gt;
          &lt;li class="student-item cf"&gt;
              &lt;div class="student-details"&gt;
                  &lt;img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/28.jpg"&gt;
                  &lt;h3&gt;jordan hubert&lt;/h3&gt;
                  &lt;span class="email"&gt;jordan.hubert@example.com&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="joined-details"&gt;
                     &lt;span class="date"&gt;Joined 06/13/15&lt;/span&gt;
             &lt;/div&gt;
          &lt;/li&gt;
          &lt;li class="student-item cf"&gt;
              &lt;div class="student-details"&gt;
                  &lt;img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/29.jpg"&gt;
                  &lt;h3&gt;melvin baker&lt;/h3&gt;
                  &lt;span class="email"&gt;melvin.baker@example.com&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="joined-details"&gt;
                     &lt;span class="date"&gt;Joined 09/18/14&lt;/span&gt;
             &lt;/div&gt;
          &lt;/li&gt;
          &lt;li class="student-item cf"&gt;
              &lt;div class="student-details"&gt;
                  &lt;img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/26.jpg"&gt;
                  &lt;h3&gt;everett gordon&lt;/h3&gt;
                  &lt;span class="email"&gt;everett.gordon@example.com&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="joined-details"&gt;
                     &lt;span class="date"&gt;Joined 06/17/15&lt;/span&gt;
             &lt;/div&gt;
          &lt;/li&gt;
          &lt;li class="student-item cf"&gt;
              &lt;div class="student-details"&gt;
                  &lt;img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/82.jpg"&gt;
                  &lt;h3&gt;aiden ma&lt;/h3&gt;
                  &lt;span class="email"&gt;aiden.ma@example.com&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="joined-details"&gt;
                     &lt;span class="date"&gt;Joined 07/18/12&lt;/span&gt;
             &lt;/div&gt;
          &lt;/li&gt;
          &lt;li class="student-item cf"&gt;
              &lt;div class="student-details"&gt;
                  &lt;img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/62.jpg"&gt;
                  &lt;h3&gt;florent gerard&lt;/h3&gt;
                  &lt;span class="email"&gt;florent.gerard@example.com&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="joined-details"&gt;
                     &lt;span class="date"&gt;Joined 02/12/13&lt;/span&gt;
             &lt;/div&gt;
          &lt;/li&gt;
          &lt;li class="student-item cf"&gt;
              &lt;div class="student-details"&gt;
                  &lt;img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/96.jpg"&gt;
                  &lt;h3&gt;amber chen&lt;/h3&gt;
                  &lt;span class="email"&gt;amber.chen@example.com&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="joined-details"&gt;
                     &lt;span class="date"&gt;Joined 07/12/12&lt;/span&gt;
             &lt;/div&gt;
          &lt;/li&gt;
          &lt;li class="student-item cf"&gt;
              &lt;div class="student-details"&gt;
                  &lt;img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/9.jpg"&gt;
                  &lt;h3&gt;alexandra davies&lt;/h3&gt;
                  &lt;span class="email"&gt;alexandra.davies@example.com&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="joined-details"&gt;
                     &lt;span class="date"&gt;Joined 05/11/13&lt;/span&gt;
             &lt;/div&gt;
          &lt;/li&gt;
          &lt;li class="student-item cf"&gt;
              &lt;div class="student-details"&gt;
                  &lt;img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/57.jpg"&gt;
                  &lt;h3&gt;sergio cole&lt;/h3&gt;
                  &lt;span class="email"&gt;sergio.cole@example.com&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="joined-details"&gt;
                     &lt;span class="date"&gt;Joined 02/17/15&lt;/span&gt;
             &lt;/div&gt;
          &lt;/li&gt;
          &lt;li class="student-item cf"&gt;
              &lt;div class="student-details"&gt;
                  &lt;img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/98.jpg"&gt;
                  &lt;h3&gt;edgar dixon&lt;/h3&gt;
                  &lt;span class="email"&gt;edgar.dixon@example.com&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="joined-details"&gt;
                     &lt;span class="date"&gt;Joined 06/17/11&lt;/span&gt;
             &lt;/div&gt;
          &lt;/li&gt;
          &lt;li class="student-item cf"&gt;
              &lt;div class="student-details"&gt;
                  &lt;img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/94.jpg"&gt;
                  &lt;h3&gt;kirk myers&lt;/h3&gt;
                  &lt;span class="email"&gt;kirk.myers@example.com&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="joined-details"&gt;
                     &lt;span class="date"&gt;Joined 09/17/15&lt;/span&gt;
             &lt;/div&gt;
          &lt;/li&gt;
          &lt;li class="student-item cf"&gt;
              &lt;div class="student-details"&gt;
                  &lt;img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/28.jpg"&gt;
                  &lt;h3&gt;ani hesseling&lt;/h3&gt;
                  &lt;span class="email"&gt;ani.hesseling@example.com&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="joined-details"&gt;
                     &lt;span class="date"&gt;Joined 08/14/16&lt;/span&gt;
             &lt;/div&gt;
          &lt;/li&gt;
          &lt;li class="student-item cf"&gt;
              &lt;div class="student-details"&gt;
                  &lt;img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/24.jpg"&gt;
                  &lt;h3&gt;victoire bonnet&lt;/h3&gt;
                  &lt;span class="email"&gt;victoire.bonnet@example.com&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="joined-details"&gt;
                     &lt;span class="date"&gt;Joined 05/13/16&lt;/span&gt;
             &lt;/div&gt;
          &lt;/li&gt;
          &lt;li class="student-item cf"&gt;
              &lt;div class="student-details"&gt;
                  &lt;img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/44.jpg"&gt;
                  &lt;h3&gt;marcos morales&lt;/h3&gt;
                  &lt;span class="email"&gt;marcos.morales@example.com&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="joined-details"&gt;
                     &lt;span class="date"&gt;Joined 01/12/12&lt;/span&gt;
             &lt;/div&gt;
          &lt;/li&gt;
          &lt;li class="student-item cf"&gt;
              &lt;div class="student-details"&gt;
                  &lt;img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/75.jpg"&gt;
                  &lt;h3&gt;nils neumann&lt;/h3&gt;
                  &lt;span class="email"&gt;nils.neumann@example.com&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="joined-details"&gt;
                     &lt;span class="date"&gt;Joined 03/11/12&lt;/span&gt;
             &lt;/div&gt;
          &lt;/li&gt;
          &lt;li class="student-item cf"&gt;
              &lt;div class="student-details"&gt;
                  &lt;img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/86.jpg"&gt;
                  &lt;h3&gt;emily harrison&lt;/h3&gt;
                  &lt;span class="email"&gt;emily.harrison@example.com&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="joined-details"&gt;
                     &lt;span class="date"&gt;Joined 07/18/15&lt;/span&gt;
             &lt;/div&gt;
          &lt;/li&gt;
          &lt;li class="student-item cf"&gt;
              &lt;div class="student-details"&gt;
                  &lt;img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/41.jpg"&gt;
                  &lt;h3&gt;matthew fortin&lt;/h3&gt;
                  &lt;span class="email"&gt;matthew.fortin@example.com&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="joined-details"&gt;
                     &lt;span class="date"&gt;Joined 03/18/15&lt;/span&gt;
             &lt;/div&gt;
          &lt;/li&gt;
          &lt;li class="student-item cf"&gt;
              &lt;div class="student-details"&gt;
                  &lt;img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/32.jpg"&gt;
                  &lt;h3&gt;charlotte steward&lt;/h3&gt;
                  &lt;span class="email"&gt;charlotte.steward@example.com&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="joined-details"&gt;
                     &lt;span class="date"&gt;Joined 02/18/11&lt;/span&gt;
             &lt;/div&gt;
          &lt;/li&gt;
          &lt;li class="student-item cf"&gt;
              &lt;div class="student-details"&gt;
                  &lt;img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/3.jpg"&gt;
                  &lt;h3&gt;marceau rodriguez&lt;/h3&gt;
                  &lt;span class="email"&gt;marceau.rodriguez@example.com&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="joined-details"&gt;
                     &lt;span class="date"&gt;Joined 07/13/14&lt;/span&gt;
             &lt;/div&gt;
          &lt;/li&gt;
          &lt;li class="student-item cf"&gt;
              &lt;div class="student-details"&gt;
                  &lt;img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/91.jpg"&gt;
                  &lt;h3&gt;hudson anderson&lt;/h3&gt;
                  &lt;span class="email"&gt;hudson.anderson@example.com&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="joined-details"&gt;
                     &lt;span class="date"&gt;Joined 09/12/15&lt;/span&gt;
             &lt;/div&gt;
          &lt;/li&gt;
          &lt;li class="student-item cf"&gt;
              &lt;div class="student-details"&gt;
                  &lt;img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/33.jpg"&gt;
                  &lt;h3&gt;warren phillips&lt;/h3&gt;
                  &lt;span class="email"&gt;warren.phillips@example.com&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="joined-details"&gt;
                     &lt;span class="date"&gt;Joined 01/11/12&lt;/span&gt;
             &lt;/div&gt;
          &lt;/li&gt;
          &lt;li class="student-item cf"&gt;
              &lt;div class="student-details"&gt;
                  &lt;img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/41.jpg"&gt;
                  &lt;h3&gt;leo niva&lt;/h3&gt;
                  &lt;span class="email"&gt;leo.niva@example.com&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="joined-details"&gt;
                     &lt;span class="date"&gt;Joined 09/14/15&lt;/span&gt;
             &lt;/div&gt;
          &lt;/li&gt;
          &lt;li class="student-item cf"&gt;
              &lt;div class="student-details"&gt;
                  &lt;img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/3.jpg"&gt;
                  &lt;h3&gt;hani prevoo&lt;/h3&gt;
                  &lt;span class="email"&gt;hani.prevoo@example.com&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="joined-details"&gt;
                     &lt;span class="date"&gt;Joined 01/11/15&lt;/span&gt;
             &lt;/div&gt;
          &lt;/li&gt;
          &lt;li class="student-item cf"&gt;
              &lt;div class="student-details"&gt;
                  &lt;img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/79.jpg"&gt;
                  &lt;h3&gt;veronica rodriguez&lt;/h3&gt;
                  &lt;span class="email"&gt;veronica.rodriguez@example.com&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="joined-details"&gt;
                     &lt;span class="date"&gt;Joined 07/17/12&lt;/span&gt;
             &lt;/div&gt;
          &lt;/li&gt;
          &lt;li class="student-item cf"&gt;
              &lt;div class="student-details"&gt;
                  &lt;img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/41.jpg"&gt;
                  &lt;h3&gt;ginestal das neves&lt;/h3&gt;
                  &lt;span class="email"&gt;ginestal.das neves@example.com&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="joined-details"&gt;
                     &lt;span class="date"&gt;Joined 06/19/12&lt;/span&gt;
             &lt;/div&gt;
          &lt;/li&gt;
          &lt;li class="student-item cf"&gt;
              &lt;div class="student-details"&gt;
                  &lt;img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/63.jpg"&gt;
                  &lt;h3&gt;devon barnes&lt;/h3&gt;
                  &lt;span class="email"&gt;devon.barnes@example.com&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="joined-details"&gt;
                     &lt;span class="date"&gt;Joined 09/19/14&lt;/span&gt;
             &lt;/div&gt;
          &lt;/li&gt;
          &lt;li class="student-item cf"&gt;
              &lt;div class="student-details"&gt;
                  &lt;img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/55.jpg"&gt;
                  &lt;h3&gt;brennan pierce&lt;/h3&gt;
                  &lt;span class="email"&gt;brennan.pierce@example.com&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="joined-details"&gt;
                     &lt;span class="date"&gt;Joined 05/15/14&lt;/span&gt;
             &lt;/div&gt;
          &lt;/li&gt;
          &lt;li class="student-item cf"&gt;
              &lt;div class="student-details"&gt;
                  &lt;img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/35.jpg"&gt;
                  &lt;h3&gt;zachary singh&lt;/h3&gt;
                  &lt;span class="email"&gt;zachary.singh@example.com&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="joined-details"&gt;
                     &lt;span class="date"&gt;Joined 05/19/11&lt;/span&gt;
             &lt;/div&gt;
          &lt;/li&gt;
          &lt;li class="student-item cf"&gt;
              &lt;div class="student-details"&gt;
                  &lt;img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/35.jpg"&gt;
                  &lt;h3&gt;arlo harris&lt;/h3&gt;
                  &lt;span class="email"&gt;arlo.harris@example.com&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="joined-details"&gt;
                     &lt;span class="date"&gt;Joined 07/12/15&lt;/span&gt;
             &lt;/div&gt;
          &lt;/li&gt;
          &lt;li class="student-item cf"&gt;
              &lt;div class="student-details"&gt;
                  &lt;img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/60.jpg"&gt;
                  &lt;h3&gt;hannah ginnish&lt;/h3&gt;
                  &lt;span class="email"&gt;hannah.ginnish@example.com&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="joined-details"&gt;
                     &lt;span class="date"&gt;Joined 05/17/14&lt;/span&gt;
             &lt;/div&gt;
          &lt;/li&gt;
          &lt;li class="student-item cf"&gt;
              &lt;div class="student-details"&gt;
                  &lt;img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/95.jpg"&gt;
                  &lt;h3&gt;goos brunt&lt;/h3&gt;
                  &lt;span class="email"&gt;goos.brunt@example.com&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="joined-details"&gt;
                     &lt;span class="date"&gt;Joined 09/15/12&lt;/span&gt;
             &lt;/div&gt;
          &lt;/li&gt;
          &lt;li class="student-item cf"&gt;
              &lt;div class="student-details"&gt;
                  &lt;img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/91.jpg"&gt;
                  &lt;h3&gt;eduard riedel&lt;/h3&gt;
                  &lt;span class="email"&gt;eduard.riedel@example.com&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="joined-details"&gt;
                     &lt;span class="date"&gt;Joined 06/12/15&lt;/span&gt;
             &lt;/div&gt;
          &lt;/li&gt;
          &lt;li class="student-item cf"&gt;
              &lt;div class="student-details"&gt;
                  &lt;img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/42.jpg"&gt;
                  &lt;h3&gt;geesken jekel&lt;/h3&gt;
                  &lt;span class="email"&gt;geesken.jekel@example.com&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="joined-details"&gt;
                     &lt;span class="date"&gt;Joined 02/12/13&lt;/span&gt;
             &lt;/div&gt;
          &lt;/li&gt;
          &lt;li class="student-item cf"&gt;
              &lt;div class="student-details"&gt;
                  &lt;img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/54.jpg"&gt;
                  &lt;h3&gt;dolores ryan&lt;/h3&gt;
                  &lt;span class="email"&gt;dolores.ryan@example.com&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="joined-details"&gt;
                     &lt;span class="date"&gt;Joined 06/17/16&lt;/span&gt;
             &lt;/div&gt;
          &lt;/li&gt;
          &lt;li class="student-item cf"&gt;
              &lt;div class="student-details"&gt;
                  &lt;img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/49.jpg"&gt;
                  &lt;h3&gt;steven rogers&lt;/h3&gt;
                  &lt;span class="email"&gt;steven.rogers@example.com&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="joined-details"&gt;
                     &lt;span class="date"&gt;Joined 01/18/11&lt;/span&gt;
             &lt;/div&gt;
          &lt;/li&gt;
          &lt;li class="student-item cf"&gt;
              &lt;div class="student-details"&gt;
                  &lt;img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/63.jpg"&gt;
                  &lt;h3&gt;virgulino silva&lt;/h3&gt;
                  &lt;span class="email"&gt;virgulino.silva@example.com&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="joined-details"&gt;
                     &lt;span class="date"&gt;Joined 03/18/11&lt;/span&gt;
             &lt;/div&gt;
          &lt;/li&gt;
          &lt;li class="student-item cf"&gt;
              &lt;div class="student-details"&gt;
                  &lt;img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/11.jpg"&gt;
                  &lt;h3&gt;lucile bertrand&lt;/h3&gt;
                  &lt;span class="email"&gt;lucile.bertrand@example.com&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="joined-details"&gt;
                     &lt;span class="date"&gt;Joined 06/13/16&lt;/span&gt;
             &lt;/div&gt;
          &lt;/li&gt;
          &lt;li class="student-item cf"&gt;
              &lt;div class="student-details"&gt;
                  &lt;img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/10.jpg"&gt;
                  &lt;h3&gt;elsa lahti&lt;/h3&gt;
                  &lt;span class="email"&gt;elsa.lahti@example.com&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="joined-details"&gt;
                     &lt;span class="date"&gt;Joined 04/15/12&lt;/span&gt;
             &lt;/div&gt;
          &lt;/li&gt;
          &lt;li class="student-item cf"&gt;
              &lt;div class="student-details"&gt;
                  &lt;img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/12.jpg"&gt;
                  &lt;h3&gt;soline leclercq&lt;/h3&gt;
                  &lt;span class="email"&gt;soline.leclercq@example.com&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="joined-details"&gt;
                     &lt;span class="date"&gt;Joined 05/12/14&lt;/span&gt;
             &lt;/div&gt;
          &lt;/li&gt;
          &lt;li class="student-item cf"&gt;
              &lt;div class="student-details"&gt;
                  &lt;img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/89.jpg"&gt;
                  &lt;h3&gt;henri kruse&lt;/h3&gt;
                  &lt;span class="email"&gt;henri.kruse@example.com&lt;/span&gt;
              &lt;/div&gt;
              &lt;div class="joined-details"&gt;
                     &lt;span class="date"&gt;Joined 05/14/13&lt;/span&gt;
             &lt;/div&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div class="pagination"&gt;
        &lt;ul&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/body&gt;
    &lt;script type="text/javascript" src="js/app.js"&gt;&lt;/script&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here is an example of what my pagination html buttons should look like if I were to have 5 buttons:</p>
  
  <pre><code>&lt;div class="pagination"&gt;
          &lt;ul&gt;
            &lt;li&gt;
              &lt;a class="active" href="#"&gt;1&lt;/a&gt;
            &lt;/li&gt;
             &lt;li&gt;
              &lt;a href="#"&gt;2&lt;/a&gt;
            &lt;/li&gt;
             &lt;li&gt;
              &lt;a href="#"&gt;3&lt;/a&gt;
            &lt;/li&gt;
             &lt;li&gt;
              &lt;a href="#"&gt;4&lt;/a&gt;
            &lt;/li&gt;
             &lt;li&gt;
              &lt;a href="#"&gt;5&lt;/a&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
  </code></pre>