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 trial

JavaScript

Posted by Joseph Escobedo
.a{fill-rule:evenodd;}techdegree
Joseph Escobedo
Full Stack JavaScript Techdegree Student 4,172 Points

Pagination Unit 2

I've been stuck on this project for almost 3 weeks now and I have no idea what to do. I am so lost on what I should do to make this project work. The only success I've made is being able to make the page buttons work when they're clicked and I am able to get the first 10 students on to the first page, but Its not connected to any page at all and when i click another page button, it doesnt do anything but show that when its clicked, it has the active class. I've looked at the guide for this project and I've been trying to figure it out but I am still confused. When it comes to the arguments and the parameters in the functions, I dont know what to use as arguments or where to even put them in the code block, The code I have below is what I have so far for the entire project. Its becoming really stressful and discouraging to look at what I have so far and it not working. I think I've annoyed everyone else on slack about this project enough these last 3 weeks. If someone can please help me or go more in depth with me on this project, that would be very helpful. Thank you.

const studentList = document.querySelector(".student-list");
const studentItem = studentList.children;
const showPage = (list, page) => {
  list = studentItem;
  studentsPerPage = 10;
  pagesPerStudents = studentItem.length / 10;

  for (let i = 0; i < list.length; i++) {
    if (i >= studentsPerPage) {
      list[i].style.display = "none";
    }
    if (i <= studentsPerPage) {
      list[i].style.display = "";
    }
  }
};
showPage();
//showPage(studentItem, 10);
/*** 
   Create the `appendPageLinks function` to generate, append, and add 
   functionality to the pagination buttons.
***/
const appendPageLinks = list => {
  const pages = studentItem.length / 10;
  const div = document.createElement("div");
  div.className = "pagination";
  page.appendChild(div);
  //showPage();
  const ul = document.createElement("ul");
  div.appendChild(ul);

  for (let i = 0; i < pages; i++) {
    const li = document.createElement("li");
    const a = document.createElement("a");
    li.appendChild(a);
    ul.appendChild(li);
    a.textContent = i + 1;
    a.addEventListener("click", e => {
      const a = li.children;
      for (var i = 0; i < a.length; i++) {
        if (e.target.tagName === "A") {
          a[i].className = "active";
          console.log(a[i]);
        }
      }
    });
  }
};
appendPageLinks(studentItem);

2 Answers

Steven Parker
Steven Parker
243,199 Points
Steven Parker
Steven Parker
243,199 Points

The "showPage" function has two parameters, but the one named "page" isn't currently being used. You'll want to combine it with "studentsPerPage" to determine which of the items to display and which to hide. Also, be prepared to reveal items in a range, both after some hidden items and before others.

Then you probably don't want to set the "list" parameter to a constant value in the function. It wouldn't make sense to have it be a passed parameter at all if the incoming value is overwritten.

If you're using a workspace, consider sharing a "snapshot" link for future questions to both keep your question compact and make it easy to replicate and analyze your issue(s).

Joseph Escobedo
.a{fill-rule:evenodd;}techdegree
Joseph Escobedo
Full Stack JavaScript Techdegree Student 4,172 Points

So i added more variables to hold different information for each action I want to either change or use. I got it to the point where I was stuck at before where I only have 10 students on the first page. I changed the list (studentItems) to let instead of const and now my next move is trying to connect the 10 students per page, to each individual page.

const studentList = document.querySelector(".student-list");
let studentItem = studentList.children;
const currentPage = 1;
const minPerPage = 1;
const maxPerPage = 10;
const totalPages = studentItem / maxPerPage;
const showPage = (list, page) => {
  list = studentItem;
  page = totalPages;

  for (let i = 0; i < list.length; i++) {
    if (i >= maxPerPage) {
      list[i].style.display = "none";
    }
    if (i <= minPerPage) {
      list[i].style.display = "";
    }
  }
};
showPage();
Steven Parker
Steven Parker
243,199 Points
Steven Parker
Steven Parker
243,199 Points

You still need to use "page" in determining which items to show, and except for the first and last pages, there will be hidden items both before and after the ones displayed.

Also, you can't do math directly on "studentItem". Previously you were dividing "studentItem.length" which is probably what you still want.

Darrin Spell Jr
seal-mask
.a{fill-rule:evenodd;}techdegree
Darrin Spell Jr
Full Stack JavaScript Techdegree Student 10,303 Points
Darrin Spell Jr
.a{fill-rule:evenodd;}techdegree
Darrin Spell Jr
Full Stack JavaScript Techdegree Student 10,303 Points

I would suggest turning your showPage and appenPageLinks variables into a function. You're also changing the value of "a" since you have two variables named "a".