Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trialKarl Russell Sumando Menil
Full Stack JavaScript Techdegree Student 4,004 PointsDisplay 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