I seem to keep missing key points in my project 2

const studentsList = document.querySelector('.student-list');
console.log(studentsList);
const studentItems = studentsList.children;
const studentsPerPage = 10;

// Reference so that we can dynamically add the pagination buttons
const page = document.querySelector('.page');

const showPage = (studentItems, page) => {

   let startIndex = (page * 10) - 10;
   let endIndex = page * 10;
   for (let i = 0; i < studentItems.length; i++) {
      if ( i >= startIndex && i < endIndex ) { studentItems[i].style.display = ''; }
      else { studentItems[i].style.display = 'none' }
   }
};

const appendPageLinks = (studentItems) => {

   // Since we have 54 students and we divide studentItems.length(54) by studentsPerPage(10)
   // we have to ceil the number to get a whole number, ex.: 5.4 > 6, meaning there will be 6 pages
   let pageNumber = Math.ceil(studentItems.length/studentsPerPage);
   const div = document.createElement('div');
   div.className = 'pagination';

   // Before you where getting 'page was not defined' because you did not defined it. I went ahead and defined it above.
   page.appendChild(div);

   const ul = document.createElement('ul');
   div.appendChild(ul);
   for (let i = 1; i<= pageNumber; i++) {
      const li = document.createElement('li');
      const a = document.createElement('a');
      a.textContent = i;
      // Since we always start at page 1, might as well make the first pagination button active
      if (i === 1) { a.className = "active" }
      ul.appendChild(li);
      li.appendChild(a);

   a.addEventListener('click', (e) => {
      // We want to clear a element's class, so we want to select all the a elements in the .pagination ul li a
      let paginationLinks = document.querySelectorAll('.pagination ul li a');
      for(i=0; i < paginationLinks.length; i++) {
         paginationLinks[i].className = '';
      }
      // if we click on a element, give that element an 'active' class
      if (e.target.tagName === "A") {
         e.target.className = 'active';
         showPage(studentItems, a.textContent);
      }     
   });

   // Just a little effect to make it feel like a button
   a.addEventListener('mouseover', (e) => {
      e.target.style.cursor = 'pointer';
   });

   }
   };

showPage(studentItems,1)

appendPageLinks(studentItems);