Pagination info

src/js/pagination.js

@@ -13,7 +13,7 @@ const prevButton = document.getElementById('prev-button');
 const nextButton = document.getElementById('next-button');
 
 let isShown = 0;
-let isFirstSearch = true;
+let isFirstSearch = null;
 let currentPage = 1;
 let query = ''
 const api = new ApiService();
@@ -71,7 +71,7 @@ async function fetchGallery(currentPage) {
     }
 
     if (isFirstSearch && isShown < totalHits) {
-      showToast('success', `Hooray! We found ${totalHits} images !!!`);
+      showToast('success', `Hooray! We found ${totalHits} images!`);
       isFirstSearch = false;
       setupPagination({ hits, totalHits });
     }
@@ -81,7 +81,7 @@ async function fetchGallery(currentPage) {
     isShown += hits.length;
 
     if (isShown >= totalHits) {
-      showToast('info', "You've reached the end of search results.");
+      showToast('info', "You've reached the end of search results.");      
     }
   } catch (error) {
     console.error('Error fetching gallery:', error);
@@ -134,29 +134,55 @@ function setupPagination({ hits, totalHits }) {
     pageNumber.textContent = i;
 
     paginationByttons.appendChild(pageNumber);
-    paginationContainer.classList.remove('is-hidden')
+
+    if (pageCount > 2) {
+       paginationContainer.classList.remove('is-hidden')
+    }
+
     pageNumber.addEventListener('click', () => {
       setCurrentPage(i);
     });    
   }
-  handlePageButtonsStatus();
+  handlePageButtonsStatus(); 
+  handleActivePageNumber();
 }
 
 function setCurrentPage(i) {
   currentPage = i; 
   fetchGallery(currentPage);
   handlePageButtonsStatus();
+  handleActivePageNumber();
 }
 
-function handlePageButtonsStatus() {
-  prevButton.disabled = currentPage === 1;
-  nextButton.disabled = currentPage ===  paginationByttons.children.length;
-}
+const disableButton = (button) => {
+  button.classList.add("disabled");
+  button.setAttribute("disabled", true);
+};
+
+const enableButton = (button) => {
+  button.classList.remove("disabled");
+  button.removeAttribute("disabled");
+};
+
+const handlePageButtonsStatus = () => {
+  if (currentPage === 1) {
+    disableButton(prevButton);
+  } else {
+    enableButton(prevButton);
+  }
 
-prevButton.addEventListener('click', () => {
-  setCurrentPage(currentPage - 1);
-});
+  if (currentPage === paginationByttons.children.length) {
+    disableButton(nextButton);
+  } else {
+    enableButton(nextButton);
+  }
+};
 
-nextButton.addEventListener('click', () => {
-  setCurrentPage(currentPage + 1);
-});
+const handleActivePageNumber = () => {
+  document.querySelectorAll(".pagination-number").forEach((button, page) => {
+    button.classList.remove("active");
+    if (page + 1 === currentPage) {
+      button.classList.add("active");
+    }
+  });
+};

src/sass/_pagination.scss

@@ -1,24 +1,29 @@
 .pagination-container {
   display: flex;
-  justify-content: center;  
+  justify-content: center;
+  margin: 20px 0;  
 }
 
 .pagination-number,
 .pagination-button{
   font-size: 1.1rem;
   background-color: transparent;
   border: none;
-  margin: 0.25rem 0.25rem;
-  cursor: pointer;
+  margin: 0.25rem 0.25rem; 
   height: 2.5rem;
   width: 2.5rem;
   border-radius: .2rem;
 }
+
 .pagination-number:hover,
 .pagination-button:not(.disabled):hover {
-  background: #fff;
+  background: #dedede;
+  border-radius: 50px;
+  cursor: pointer;  
 }
+
 .pagination-number.active {
   color: #fff;
-  background: #0085b6;
+  background: #949494;
+  border-radius: 50px;
 }