Display a “page”

Good day,

If I may humbly ask a little help, any hints, comments and suggestions are very much welcome, thank you in advance for all your help, please see question below, how do I code this?: /* Create the showPage function This function will create and insert/append the elements needed to display a "page" of nine students */

function showPage(list, page) { // create two variables which will represent the index for the first and last student on the page

// select the element with a class of student-list and assign it to a variable

// set the innerHTML property of the variable you just created to an empty string

// loop over the length of the list parameter // inside the loop create a conditional to display the proper students // inside the conditional: // create the elements needed to display the student information // insert the above elements }

/* Create the addPagination function This function will create and insert/append the elements needed for the pagination buttons */ function addPagination(list) { // create a variable to calculate the number of pages needed

// select the element with a class of link-list and assign it to a variable

// set the innerHTML property of the variable you just created to an empty string

// loop over the number of pages needed // create the elements needed to display the pagination button // insert the above elements

// give the first pagination button a class of "active"

// create an event listener on the link-list element // if the click target is a button: // remove the "active" class from the previous button // add the active class to the clicked button // call the showPage function passing the list parameter and page to display as arguments }

// Call functions

My answer/attempt its not displaying any of the students in data.js:

/* 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'; } } };

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);

Snapshot:https: https://w.trhou.se/xbobnk4qrn