JavaScript

Benjamin Thai
Benjamin Thai
Full Stack JavaScript Techdegree Student 10,886 Points

How come every time I click any of the page button after the first time, all the elements are removed? please help

/******************************************
Treehouse Techdegree:
FSJS project 2 - List Filter and Pagination
******************************************/

const studentList = document.querySelector('.student-list'); 
const student = studentList.children;


function showPage(list, page) {
   let pageNum = page * 10; 

   if (pageNum == 10) {
      for (var i = 0; i < student.length; i++) {
         if (i >= 10) {         
            student[i].style.display = 'none';
         }}};

   if (pageNum == 20) {
      for (var i = 0; i < student.length; i++) {
         if (i >= 20 || i < 10) {                   
            student[i].style.display = 'none';
         }}};

   if (pageNum == 30) {
      for (var i = 0; i < student.length; i++) {
         if (i >= 30 || i < 20) {                  
            student[i].style.display = 'none';
         }}};

   if (pageNum == 40) {
      for (var i = 0; i < student.length; i++) {
         if (i >= 40 || i < 30) {                    
            student[i].style.display = 'none';
         }}};

   if (pageNum == 50) { 
      for (var i = 0; i < student.length; i++) {
         if (i >= 50 || i < 40) {                    
            student[i].style.display = 'none';
         }}};

   if (pageNum == 60) { 
      for (var i = 0; i < student.length; i++) {
         if (i >= 60 || i < 50) {               
            student[i].style.display = 'none';
         }}};

   };


function appendPageLinks(list) {
const pagebody = document.querySelector('div.page');
const pagediv = document.createElement('div'); 
pagediv.classList.add("pagination"); 
pagebody.appendChild(pagediv);

let pageLi = document.createElement('li'); 
let pageLi2 = document.createElement('li'); 
let pageLi3 = document.createElement('li'); 
let pageLi4 = document.createElement('li'); 
let pageLi5 = document.createElement('li'); 
let pageLi6 = document.createElement('li'); 

pagediv.appendChild(pageLi); 
pagediv.appendChild(pageLi2); 
pagediv.appendChild(pageLi3); 
pagediv.appendChild(pageLi4); 
pagediv.appendChild(pageLi5); 
pagediv.appendChild(pageLi6); 


let pageAnchor = document.createElement('a'); 
pageLi.appendChild(pageAnchor); 
pageAnchor.setAttribute('href', "#");
pageAnchor.innerHTML= "1";       
pageAnchor.addEventListener("click", function(){
   showPage(studentList, 1);
}); 

let pageAnchor2 = document.createElement('a'); 
pageLi2.appendChild(pageAnchor2); 
pageAnchor2.setAttribute('href', "#");
pageAnchor2.innerHTML= "2";       //page link 2
pageAnchor2.addEventListener("click", function(){
   showPage(studentList, 2);
}); 

let pageAnchor3 = document.createElement('a'); 
pageLi3.appendChild(pageAnchor3); 
pageAnchor3.setAttribute('href', "#");
pageAnchor3.innerHTML= "3";      
pageAnchor3.addEventListener("click", function(){
   showPage(studentList, 3);
}); 

let pageAnchor4 = document.createElement('a'); 
pageLi4.appendChild(pageAnchor4); 
pageAnchor4.setAttribute('href', "#");
pageAnchor4.innerHTML= "4";       
pageAnchor4.addEventListener("click", function () {
   showPage(studentList, 4);
}); 

let pageAnchor5 = document.createElement('a'); 
pageLi5.appendChild(pageAnchor5); 
pageAnchor5.setAttribute('href', "#");
pageAnchor5.innerHTML= "5";       
pageAnchor5.addEventListener("click", function(){
   showPage(studentList, 5);
}); 

let pageAnchor6 = document.createElement('a'); 
pageLi6.appendChild(pageAnchor6); //append pageAnchor to pageLi
pageAnchor6.setAttribute('href', "#");
pageAnchor6.innerHTML= "6";      
pageAnchor6.addEventListener("click", function(){
   showPage(studentList, 6);
});

}

showPage(studentList, 6);
appendPageLinks(studentList);
Benjamin Thai
Benjamin Thai
Full Stack JavaScript Techdegree Student 10,886 Points

And are there a better function that i can use to create all these page anchor links without repeating the same code?? And also, how come I can't show any elements with document.style.display= "block"? Thank you

Steven Parker
Steven Parker
159,145 Points

Parts of the code needed to replicate the issue are missing, including the entire HTML component. The best way to share an entire workspace at once is to make a snapshot of your workspace and post the link to it here.

If you aren't using workspaces, or need to post directly for other reasons, be sure to use "markdown" formatting. There's a pop-up "cheatsheet" below, or you can watch this video on code formatting.

Louise St. Germain
Louise St. Germain
Treehouse Moderator 14,176 Points

I just modified the question so that the code is formatted. Hopefully this will make it easier for others to review! :-)

3 Answers

Steven Parker
Steven Parker
159,145 Points

That will do for now, but for future questions please use the snapshot feature to guarantee complete code and also keep the question short.

It looks like the issue is that the entries get turned off ("none") but are never turned back on. You can fix that by adding an "else" to the "if" that sets the proper items back on.

You can also make the "showPage" function more compact by computing the first and last limits so only one loop is needed:

function showPage(list, page) {
  let last = page * 10;
  let first = last - 10;

  for (var i = 0; i < student.length; i++) {
    if (i >= last || i < first) {
      student[i].style.display = "none";
    } else {
      student[i].style.display = "";  // "block" would also work
    }
  }
}
Benjamin Thai
Benjamin Thai
Full Stack JavaScript Techdegree Student 10,886 Points

To replicate the the issue, would i just have to insert the missing code after the for loop and before the second if statement

function showPage(list, page) {
   let pageNum = page * 10; 

   if (pageNum == 10) {
      for (var i = 0; i < student.length; i++) {
        //bring the student list back somehow
         if (i >= 10) {         
            student[i].style.display = 'none';
         }}};

& I see I was also missing the UL element on the appendPageLinks function, thank you haha

Steven Parker
Steven Parker
159,145 Points

We'd still need the HTML. Can you make a "snapshot"?

Benjamin Thai
Benjamin Thai
Full Stack JavaScript Techdegree Student 10,886 Points
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Students</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/design.css">
  </head>
  <body>
    <div class="page">
      <div class="page-header cf">
        <h2>Students</h2>
        <!-- dynamically insert search form here (optional) -->

      </div>
      <ul class="student-list">
        <li class="student-item cf">
            <div class="student-details">
                <img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/67.jpg">
                <h3>iboya vat</h3>
                <span class="email">iboya.vat@example.com</span>
            </div>
            <div class="joined-details">
                   <span class="date">Joined 07/15/15</span>
           </div>
        </li>
        <li class="student-item cf">
            <div class="student-details">
                <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/75.jpg">
                <h3>aapo niskanen</h3>
                <span class="email">aapo.niskanen@example.com</span>
            </div>
            <div class="joined-details">
                   <span class="date">Joined 06/15/12</span>
           </div>
        </li>
        <li class="student-item cf">
            <div class="student-details">
                <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/34.jpg">
                <h3>phillip cox</h3>
                <span class="email">phillip.cox@example.com</span>
            </div>
            <div class="joined-details">
                   <span class="date">Joined 09/11/14</span>
           </div>
        </li>
        <li class="student-item cf">
            <div class="student-details">
                <img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/38.jpg">
                <h3>zilda moreira</h3>
                <span class="email">zilda.moreira@example.com</span>
            </div>
            <div class="joined-details">
                   <span class="date">Joined 07/15/15</span>
           </div>
        </li>
        <li class="student-item cf">
            <div class="student-details">
                <img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/23.jpg">
                <h3>lilou le gall</h3>
                <span class="email">lilou.le gall@example.com</span>
            </div>
            <div class="joined-details">
                   <span class="date">Joined 06/16/13</span>
           </div>
        </li>
        <li class="student-item cf">
            <div class="student-details">
                <img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/94.jpg">
                <h3>lucy hall</h3>
                <span class="email">lucy.hall@example.com</span>
            </div>
            <div class="joined-details">
                   <span class="date">Joined 09/11/16</span>
           </div>
        </li>
        <li class="student-item cf">
            <div class="student-details">
                <img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/24.jpg">
                <h3>mark colin</h3>
                <span class="email">mark.colin@example.com</span>
            </div>
            <div class="joined-details">
                   <span class="date">Joined 01/14/14</span>
           </div>
        </li>
        <li class="student-item cf">
            <div class="student-details">
                <img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/14.jpg">
                <h3>sara alves</h3>
                <span class="email">sara.alves@example.com</span>
            </div>
            <div class="joined-details">
                   <span class="date">Joined 07/19/16</span>
           </div>
        </li>
        <li class="student-item cf">
            <div class="student-details">
                <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/49.jpg">
                <h3>ramon macrae</h3>
                <span class="email">ramon.macrae@example.com</span>
            </div>
            <div class="joined-details">
                   <span class="date">Joined 05/13/12</span>
           </div>
        </li>
        <li class="student-item cf">
            <div class="student-details">
                <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/15.jpg">
                <h3>connor taylor</h3>
                <span class="email">connor.taylor@example.com</span>
            </div>
            <div class="joined-details">
                   <span class="date">Joined 05/18/14</span>
           </div>
        </li>
        <li class="student-item cf">
            <div class="student-details">
                <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/11.jpg">
                <h3>aymeric morel</h3>
                <span class="email">aymeric.morel@example.com</span>
            </div>
            <div class="joined-details">
                   <span class="date">Joined 06/13/13</span>
           </div>
        </li>
        <li class="student-item cf">
            <div class="student-details">
                <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/49.jpg">
                <h3>lorenz otto</h3>
                <span class="email">lorenz.otto@example.com</span>
            </div>
            <div class="joined-details">
                   <span class="date">Joined 05/11/14</span>
           </div>
        </li>
        <li class="student-item cf">
            <div class="student-details">
                <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/29.jpg">
                <h3>karl williamson</h3>
                <span class="email">karl.williamson@example.com</span>
            </div>
            <div class="joined-details">
                   <span class="date">Joined 01/12/14</span>
           </div>
        </li>
        <li class="student-item cf">
            <div class="student-details">
                <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/34.jpg">
                <h3>ouassim heering</h3>
                <span class="email">ouassim.heering@example.com</span>
            </div>
            <div class="joined-details">
                   <span class="date">Joined 01/18/12</span>
           </div>
        </li>
        <li class="student-item cf">
            <div class="student-details">
                <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/91.jpg">
                <h3>roberto molina</h3>
                <span class="email">roberto.molina@example.com</span>
            </div>
            <div class="joined-details">
                   <span class="date">Joined 06/13/15</span>
           </div>
        </li>
        <li class="student-item cf">
            <div class="student-details">
                <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/28.jpg">
                <h3>jordan hubert</h3>
                <span class="email">jordan.hubert@example.com</span>
            </div>
            <div class="joined-details">
                   <span class="date">Joined 06/13/15</span>
           </div>
        </li>
        <li class="student-item cf">
            <div class="student-details">
                <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/29.jpg">
                <h3>melvin baker</h3>
                <span class="email">melvin.baker@example.com</span>
            </div>
            <div class="joined-details">
                   <span class="date">Joined 09/18/14</span>
           </div>
        </li>
        <li class="student-item cf">
            <div class="student-details">
                <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/26.jpg">
                <h3>everett gordon</h3>
                <span class="email">everett.gordon@example.com</span>
            </div>
            <div class="joined-details">
                   <span class="date">Joined 06/17/15</span>
           </div>
        </li>
        <li class="student-item cf">
            <div class="student-details">
                <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/82.jpg">
                <h3>aiden ma</h3>
                <span class="email">aiden.ma@example.com</span>
            </div>
            <div class="joined-details">
                   <span class="date">Joined 07/18/12</span>
           </div>
        </li>
        <li class="student-item cf">
            <div class="student-details">
                <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/62.jpg">
                <h3>florent gerard</h3>
                <span class="email">florent.gerard@example.com</span>
            </div>
            <div class="joined-details">
                   <span class="date">Joined 02/12/13</span>
           </div>
        </li>
        <li class="student-item cf">
            <div class="student-details">
                <img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/96.jpg">
                <h3>amber chen</h3>
                <span class="email">amber.chen@example.com</span>
            </div>
            <div class="joined-details">
                   <span class="date">Joined 07/12/12</span>
           </div>
        </li>
        <li class="student-item cf">
            <div class="student-details">
                <img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/9.jpg">
                <h3>alexandra davies</h3>
                <span class="email">alexandra.davies@example.com</span>
            </div>
            <div class="joined-details">
                   <span class="date">Joined 05/11/13</span>
           </div>
        </li>
        <li class="student-item cf">
            <div class="student-details">
                <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/57.jpg">
                <h3>sergio cole</h3>
                <span class="email">sergio.cole@example.com</span>
            </div>
            <div class="joined-details">
                   <span class="date">Joined 02/17/15</span>
           </div>
        </li>
        <li class="student-item cf">
            <div class="student-details">
                <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/98.jpg">
                <h3>edgar dixon</h3>
                <span class="email">edgar.dixon@example.com</span>
            </div>
            <div class="joined-details">
                   <span class="date">Joined 06/17/11</span>
           </div>
        </li>
        <li class="student-item cf">
            <div class="student-details">
                <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/94.jpg">
                <h3>kirk myers</h3>
                <span class="email">kirk.myers@example.com</span>
            </div>
            <div class="joined-details">
                   <span class="date">Joined 09/17/15</span>
           </div>
        </li>
        <li class="student-item cf">
            <div class="student-details">
                <img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/28.jpg">
                <h3>ani hesseling</h3>
                <span class="email">ani.hesseling@example.com</span>
            </div>
            <div class="joined-details">
                   <span class="date">Joined 08/14/16</span>
           </div>
        </li>
        <li class="student-item cf">
            <div class="student-details">
                <img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/24.jpg">
                <h3>victoire bonnet</h3>
                <span class="email">victoire.bonnet@example.com</span>
            </div>
            <div class="joined-details">
                   <span class="date">Joined 05/13/16</span>
           </div>
        </li>
        <li class="student-item cf">
            <div class="student-details">
                <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/44.jpg">
                <h3>marcos morales</h3>
                <span class="email">marcos.morales@example.com</span>
            </div>
            <div class="joined-details">
                   <span class="date">Joined 01/12/12</span>
           </div>
        </li>
        <li class="student-item cf">
            <div class="student-details">
                <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/75.jpg">
                <h3>nils neumann</h3>
                <span class="email">nils.neumann@example.com</span>
            </div>
            <div class="joined-details">
                   <span class="date">Joined 03/11/12</span>
           </div>
        </li>
        <li class="student-item cf">
            <div class="student-details">
                <img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/86.jpg">
                <h3>emily harrison</h3>
                <span class="email">emily.harrison@example.com</span>
            </div>
            <div class="joined-details">
                   <span class="date">Joined 07/18/15</span>
           </div>
        </li>
        <li class="student-item cf">
            <div class="student-details">
                <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/41.jpg">
                <h3>matthew fortin</h3>
                <span class="email">matthew.fortin@example.com</span>
            </div>
            <div class="joined-details">
                   <span class="date">Joined 03/18/15</span>
           </div>
        </li>
        <li class="student-item cf">
            <div class="student-details">
                <img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/32.jpg">
                <h3>charlotte steward</h3>
                <span class="email">charlotte.steward@example.com</span>
            </div>
            <div class="joined-details">
                   <span class="date">Joined 02/18/11</span>
           </div>
        </li>
        <li class="student-item cf">
            <div class="student-details">
                <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/3.jpg">
                <h3>marceau rodriguez</h3>
                <span class="email">marceau.rodriguez@example.com</span>
            </div>
            <div class="joined-details">
                   <span class="date">Joined 07/13/14</span>
           </div>
        </li>
        <li class="student-item cf">
            <div class="student-details">
                <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/91.jpg">
                <h3>hudson anderson</h3>
                <span class="email">hudson.anderson@example.com</span>
            </div>
            <div class="joined-details">
                   <span class="date">Joined 09/12/15</span>
           </div>
        </li>
        <li class="student-item cf">
            <div class="student-details">
                <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/33.jpg">
                <h3>warren phillips</h3>
                <span class="email">warren.phillips@example.com</span>
            </div>
            <div class="joined-details">
                   <span class="date">Joined 01/11/12</span>
           </div>
        </li>
        <li class="student-item cf">
            <div class="student-details">
                <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/41.jpg">
                <h3>leo niva</h3>
                <span class="email">leo.niva@example.com</span>
            </div>
            <div class="joined-details">
                   <span class="date">Joined 09/14/15</span>
           </div>
        </li>
        <li class="student-item cf">
            <div class="student-details">
                <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/3.jpg">
                <h3>hani prevoo</h3>
                <span class="email">hani.prevoo@example.com</span>
            </div>
            <div class="joined-details">
                   <span class="date">Joined 01/11/15</span>
           </div>
        </li>
        <li class="student-item cf">
            <div class="student-details">
                <img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/79.jpg">
                <h3>veronica rodriguez</h3>
                <span class="email">veronica.rodriguez@example.com</span>
            </div>
            <div class="joined-details">
                   <span class="date">Joined 07/17/12</span>
           </div>
        </li>
        <li class="student-item cf">
            <div class="student-details">
                <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/41.jpg">
                <h3>ginestal das neves</h3>
                <span class="email">ginestal.das neves@example.com</span>
            </div>
            <div class="joined-details">
                   <span class="date">Joined 06/19/12</span>
           </div>
        </li>
        <li class="student-item cf">
            <div class="student-details">
                <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/63.jpg">
                <h3>devon barnes</h3>
                <span class="email">devon.barnes@example.com</span>
            </div>
            <div class="joined-details">
                   <span class="date">Joined 09/19/14</span>
           </div>
        </li>
        <li class="student-item cf">
            <div class="student-details">
                <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/55.jpg">
                <h3>brennan pierce</h3>
                <span class="email">brennan.pierce@example.com</span>
            </div>
            <div class="joined-details">
                   <span class="date">Joined 05/15/14</span>
           </div>
        </li>
        <li class="student-item cf">
            <div class="student-details">
                <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/35.jpg">
                <h3>zachary singh</h3>
                <span class="email">zachary.singh@example.com</span>
            </div>
            <div class="joined-details">
                   <span class="date">Joined 05/19/11</span>
           </div>
        </li>
        <li class="student-item cf">
            <div class="student-details">
                <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/35.jpg">
                <h3>arlo harris</h3>
                <span class="email">arlo.harris@example.com</span>
            </div>
            <div class="joined-details">
                   <span class="date">Joined 07/12/15</span>
           </div>
        </li>
        <li class="student-item cf">
            <div class="student-details">
                <img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/60.jpg">
                <h3>hannah ginnish</h3>
                <span class="email">hannah.ginnish@example.com</span>
            </div>
            <div class="joined-details">
                   <span class="date">Joined 05/17/14</span>
           </div>
        </li>
        <li class="student-item cf">
            <div class="student-details">
                <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/95.jpg">
                <h3>goos brunt</h3>
                <span class="email">goos.brunt@example.com</span>
            </div>
            <div class="joined-details">
                   <span class="date">Joined 09/15/12</span>
           </div>
        </li>
        <li class="student-item cf">
            <div class="student-details">
                <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/91.jpg">
                <h3>eduard riedel</h3>
                <span class="email">eduard.riedel@example.com</span>
            </div>
            <div class="joined-details">
                   <span class="date">Joined 06/12/15</span>
           </div>
        </li>
        <li class="student-item cf">
            <div class="student-details">
                <img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/42.jpg">
                <h3>geesken jekel</h3>
                <span class="email">geesken.jekel@example.com</span>
            </div>
            <div class="joined-details">
                   <span class="date">Joined 02/12/13</span>
           </div>
        </li>
        <li class="student-item cf">
            <div class="student-details">
                <img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/54.jpg">
                <h3>dolores ryan</h3>
                <span class="email">dolores.ryan@example.com</span>
            </div>
            <div class="joined-details">
                   <span class="date">Joined 06/17/16</span>
           </div>
        </li>
        <li class="student-item cf">
            <div class="student-details">
                <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/49.jpg">
                <h3>steven rogers</h3>
                <span class="email">steven.rogers@example.com</span>
            </div>
            <div class="joined-details">
                   <span class="date">Joined 01/18/11</span>
           </div>
        </li>
        <li class="student-item cf">
            <div class="student-details">
                <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/63.jpg">
                <h3>virgulino silva</h3>
                <span class="email">virgulino.silva@example.com</span>
            </div>
            <div class="joined-details">
                   <span class="date">Joined 03/18/11</span>
           </div>
        </li>
        <li class="student-item cf">
            <div class="student-details">
                <img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/11.jpg">
                <h3>lucile bertrand</h3>
                <span class="email">lucile.bertrand@example.com</span>
            </div>
            <div class="joined-details">
                   <span class="date">Joined 06/13/16</span>
           </div>
        </li>
        <li class="student-item cf">
            <div class="student-details">
                <img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/10.jpg">
                <h3>elsa lahti</h3>
                <span class="email">elsa.lahti@example.com</span>
            </div>
            <div class="joined-details">
                   <span class="date">Joined 04/15/12</span>
           </div>
        </li>
        <li class="student-item cf">
            <div class="student-details">
                <img class="avatar" src="https://randomuser.me/api/portraits/thumb/women/12.jpg">
                <h3>soline leclercq</h3>
                <span class="email">soline.leclercq@example.com</span>
            </div>
            <div class="joined-details">
                   <span class="date">Joined 05/12/14</span>
           </div>
        </li>
        <li class="student-item cf">
            <div class="student-details">
                <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/89.jpg">
                <h3>henri kruse</h3>
                <span class="email">henri.kruse@example.com</span>
            </div>
            <div class="joined-details">
                   <span class="date">Joined 05/14/13</span>
           </div>
        </li>
      </ul>
      <!-- dynamically add pagination links here -->

    </div>
    <script src="js/script.js"></script>
  </body>
</html>