From b61ac29af242247bb36ed9aeea8dbacc1e2e5e07 Mon Sep 17 00:00:00 2001
From: Praju2002 <104666507+Praju2002@users.noreply.github.com>
Date: Fri, 8 Nov 2024 11:34:38 +0545
Subject: [PATCH] added pagination

---
 index.html        | 11 ++++++++---
 package.json      | 12 ++++++++++++
 script/reviews.js | 39 +++++++++++++++++++++++++++++++++++++++
 3 files changed, 59 insertions(+), 3 deletions(-)
 create mode 100644 package.json
 create mode 100644 script/reviews.js

diff --git a/index.html b/index.html
index 60ce16c6..b692ea57 100644
--- a/index.html
+++ b/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>
diff --git a/package.json b/package.json
new file mode 100644
index 00000000..f4bf0f4f
--- /dev/null
+++ b/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"
+}
diff --git a/script/reviews.js b/script/reviews.js
new file mode 100644
index 00000000..49acb1bd
--- /dev/null
+++ b/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);