Merge pull request #1101 from Praju2002/added-reviews-pagination

Added reviews pagination

index.html

@@ -268,9 +268,10 @@ <h3>Fun & Friendly Atmosphere</h3>
     </section>
 
     <!-- reviews -->
-    <section class="reviewSection" id="reviewsSection">
+
+    <section class="reviewSection" id="reviewsSection" style="display: flex;align-items: center;justify-content: center;flex-direction: column;">
         <h1>Top Reviews</h1>
-        <div class="reviews">
+        <div class="reviews" id="reviewsContainer">
             <div class="review-box bottomani">
                 <i class="fa fa-quote-right quote" aria-hidden="true"></i>
                 <i class="fa fa-quote-right quote" aria-hidden="true"></i>
@@ -390,8 +391,12 @@ <h1>Top Reviews</h1>
                     course."
                 </div>
             </div>
+
 
         </div>
+        <div class="pagination" id="pagination">
+            <!-- Pagination buttons will be generated here -->
+        </div>
     </section>
 
     <!-- contact -->
@@ -547,7 +552,7 @@ <h4>Newsletter</h4>
     <script type="module" src="script/flavor_section.js"></script>
     <script src="script/cursor.js"></script>
     <script src="script/script.js"></script>
-
+    <script src="script/reviews.js"></script>
 </body>
 
 </html>

package.json

@@ -0,0 +1,12 @@
+{
+  "name": "ice-cream-parlour-website",
+  "version": "1.0.0",
+  "description": "![Ice Cream Website Screenshot](/images/readme.png)",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC"
+}

script/reviews.js

@@ -0,0 +1,39 @@
+const reviewsPerPage = 2; // Number of reviews per page
+const reviewsContainer = document.getElementById('reviewsContainer');
+const paginationContainer = document.getElementById('pagination');
+const reviews = Array.from(document.querySelectorAll('.review-box'));
+
+function displayReviews(page) {
+    // Hide all reviews first
+    reviews.forEach(review => review.style.display = 'none');
+
+    // Calculate the start and end index of the reviews for the current page
+    const start = (page - 1) * reviewsPerPage;
+    const end = start + reviewsPerPage;
+
+    // Show the reviews for the current page
+    reviews.slice(start, end).forEach(review => review.style.display = 'block');
+
+    // Update the pagination buttons
+    updatePaginationButtons(page);
+}
+
+function updatePaginationButtons(currentPage) {
+    // Calculate the total number of pages
+    const totalPages = Math.ceil(reviews.length / reviewsPerPage);
+
+    // Clear the pagination container
+    paginationContainer.innerHTML = '';
+
+    // Generate pagination buttons
+    for (let i = 1; i <= totalPages; i++) {
+        const button = document.createElement('button');
+        button.innerText = i;
+        button.classList.toggle('active', i === currentPage);
+        button.addEventListener('click', () => displayReviews(i));
+        paginationContainer.appendChild(button);
+    }
+}
+
+// Initial display of the first page
+displayReviews(1);