numOfPages = Math.ceil(list length / items per page).hints, suggestions and comments are very much appreciated thank you

Karl Russell Sumando Menil can you provide a link to the challenge this references ?

Good day,

Reggie Williams hello sir thank you for your response, apologies for the ugly pasting of the code i do not know how to comment properly yet, thank you i9n advance for your help, any hints, suggestions and comments are very much welcome, please go directly to script.js thank you, below is my draft code:

/* Create the showPage function This function will create and insert/append the elements needed to display a "page" of nine students */ let StudentListItem = document.getElementsByTagName('li'); console.log(StudentListItem.length); let ChildListItem = StudentListItem.children; let NumberofItem = StudentListItem.length; const ItemPerPage = 10; const TotalPages = Math.ceil(StudentListItem.length/ItemPerPage); for (var i = 0; i < StudentListItem.length; i++) { StudentListItem[i].style.display = 'none'; } function showPage (page, ChildListItem) {

for (let i = 0; i < StudentListItem.length; i++) { if (i < (page * ItemPerPage) && i >= ((page * ItemPerPage) - ItemPerPage)) { StudentListItem[i].style.display = 'block'; } else { StudentListItem[i].style.display = 'none';items } } };

showPage(1,ChildListItem);

/* Create the addPagination function This function will create and insert/append the elements needed for the pagination buttons */ const buttonDiv = document.createElement('div'); const mainPage = document.querySelector('.page'); console.log(mainPage); mainPage.appendChild(buttonDiv); buttonDiv.className = 'pagination'; console.log(buttonDiv); const buttonUl = document.createElement('ul'); buttonDiv.appendChild(buttonUl);

for (let i = 0; i < TotalPages; i+= 1) { pageli = document.createElement('li'); const pageLink = document.createElement('a'); pageLink.className = 'active'; pageLink.href = '#'; pageLink.textContent = i + 1; pageli.appendChild(pageLink); buttonUl.appendChild(pageli);

buttonDiv.addEventListener('click', (event) => { let buttonNumber = parseInt(event.target.textContent); let max = buttonNumber * 10; let min = max - 10; for (let i = 0; i < StudentListItem.length; i++) { if (i >= min && i < max) { StudentListItem[i].style.display = ''; } else { StudentListItem[i].style.display = 'none'; } } });

}

// Call functions console.log(buttonUl); console.log(TotalPages);

Here is the link for the snapshot: https://w.trhou.se/uzzmt40elo

Hey Karl Russell Sumando Menil no need for apologies you're in a great place to learn. It looks like your HTML file is trying to access js and css files that are in js and css folders. The file paths you have include a folder name for example <script src="js/script.js"></script> should be <script src="script.js"></script> with the current structure of your project

Reggie Williams thank you for your reply sir, please see link to my snapshot: https://w.trhou.se/hxsocj0f98, i think its a little messy, i tried to ass some more stuff in the html:

Create the DOM elements needed to display the information for each matching student as you iterate over the list parameter. please see link: https://w.trhou.se/hxsocj0f98 please go directly to index.html

<li class="student-item cf"> <div class="student-details"> <img class="avatar" src="https://randomuser.me/api/portraits/thumb/men/48.jpg"> <h3>Mr Allen Thompson</h3> <span class="email">allen.thompson@example.com</span> </div> <div class="joined-details"> <span class="date">Joined 08-14-2010</span> <span class="age">10</span> </div> </li> </ul>

Create the DOM elements needed to display the pagination button as you iterate over the number of pages.please see link: https://w.trhou.se/hxsocj0f98 please go directly to index.html

<div class="pagination"> <ul class="link-list">

    <!-- Dynamically insert pagination buttons here

      EXAMPLE - Two pagination buttons, one with active class, one without:

      <li>
        <button type="button" class="active">1</button>
      </li>
      <li>
        <button type="button">2</button>
      </li>

    -->
    <div class="pagination">//this should be removed right?
      <ul>
        <li>
          <a class="active" href="#">1</a>
        </li>
         <li>
          <a href="#">2</a>
        </li>
         <li>
          <a href="#">3</a>
        </li>
         <li>
          <a href="#">4</a>
        </li>
         <li>
          <a href="#">5</a>
        </li>
        </li>
         <li>
          <a href="#">6</a>
        </li>
      </ul>
    </div>


  </div>
  </ul>
</div>

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

Also sir how do i turn them into 4 person/student per column? Again apologies for my shortcomings and for the trouble that i have caused you.

Karl Russell Sumando Menil no worries, that is what the community is here for! For the number of students you can control that with itemsPerPage variable. Can you send me a link to the treehouse course this is related to? In future questions it can be helpful to make sure you mention what error you are getting or what behavior you want the program to have that isn't happening. Also since you've provided the workspace snapshot you don't have to do any extra work by pasting the code. The workspace allows a reviewer to run your code so it's the preferred method.

Reggie Williams thank you for your response sir here is the link for your reference: https://teamtreehouse.com/library/walkthrough-for-project-2-data-pagination-and-filtering Updated snapshot for your reference: https://w.trhou.se/dbvjn2045o i got the page to turn from page 1 to 5, but i cant get it to have 3 people in one column and 3 people in one row how do i do that?also how do i make the search box to work? thank you sir.

Hey Karl Russell Sumando Menil I'm seeing that you're a techdegree student and have a slack account. For techdegree projects it's best to use the slack forum for feedback. Have you completed this warm up activity listed in the project guide for the search feature?

You'll also want to make sure you're following the guidelines for appearance as far as rows and columns. You can always experiment with the code after submitting projects!

Reggie Williams i know that sir i am just trying to get more attention because i need more help, apologies for that, but if i may humbly ask one last favour because i think i am almost most there my javascript should be working buts its not displaying on the html file can you help me figure this out for one last time? thank you in advance for your help here is the snapshot for my workspace: https://w.trhou.se/c882ouak1n