pagination

RohitSharma50 · RohitSharma50 · commit e18e196f8769 · 2025-03-03T23:55:38.000+05:30
diff --git a/Pagination/index.css b/Pagination/index.css
@@ -0,0 +1,56 @@
+.nav-bar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+  margin-bottom: 5px;
+  gap: 1rem;
+  border-bottom: solid 1px #aaa;
+  background-color: #aaa;
+}
+
+nav a {
+  min-width: 9rem;
+  border-radius: 0.3rem;
+  border: solid black;
+  background-color: rgb(111, 175, 231);
+  text-align: center;
+  text-decoration-line: none;
+  padding: 5px;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  background-color: rgb(23, 30, 30);
+}
+
+#container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 20px;
+}
+
+#container div {
+  text-align: center;
+}
+
+#container img {
+  height: 400px;
+  width: auto;
+  border-radius: 10px;
+}
+button {
+  background-color: rgb(214, 183, 206);
+  height: 30px;
+
+  width: 30px;
+  align-items: center;
+}
+#btn {
+  align-items: center;
+  justify-content: center;
+  margin: 5px;
+}
diff --git a/Pagination/index.html b/Pagination/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Pagination</title>
+    <link rel="stylesheet" href="index.css" />
+  </head>
+  <body>
+    <nav class="nav-bar">
+      <a href="/index.html">Home</a>
+      <a target="_blank" href="https://youtu.be/2s2sZm5gy-o?feature=shared"
+        >Youtube channel</a
+      >
+      <a
+        target="_blank"
+        href="https://github.com/RohitSharma50/Javascript_Machine_coding"
+        >Github</a
+      >
+    </nav>
+    <div id="container"></div>
+
+    <script src="index.js" defer></script>
+  </body>
+</html>
diff --git a/Pagination/index.js b/Pagination/index.js
@@ -0,0 +1,64 @@
+document.addEventListener("DOMContentLoaded", function () {
+  let list = [];
+  let page = 1;
+  async function fetchProduct() {
+    try {
+      const result = await fetch("https://dummyjson.com/products?limit=100");
+      const data = await result.json();
+
+      if (data && data.products) {
+        list = data.products;
+        render(page);
+      }
+    } catch (error) {
+      console.log(error, "Fetching Error occured");
+    }
+  }
+  function render(page) {
+    const mainDiv = document.getElementById("container");
+    mainDiv.innerHTML = "";
+    list.slice(page * 10 - 10, page * 10).forEach((prod) => {
+      const element = document.createElement("div");
+      element.id = "data";
+      element.innerHTML = `<img src="${prod.images[0]}" alt="${prod.title}" style="height: 400px; width:auto" />`;
+      mainDiv.appendChild(element);
+    });
+    createButton(page);
+  }
+
+  function createButton(page) {
+    const buttonContainer = document.createElement("div");
+    const mainDiv = document.getElementById("container");
+
+    const backButton = document.createElement("button");
+    backButton.innerHTML = "🔙";
+    backButton.addEventListener("click", function () {
+      render(page - 1);
+    });
+    if (page > 1) {
+      buttonContainer.appendChild(backButton);
+      mainDiv.appendChild(buttonContainer);
+    }
+    for (let i = 1; i < 10; i++) {
+      const btn = document.createElement("button");
+      btn.innerText = i;
+      btn.id = "btn";
+      btn.addEventListener("click", function () {
+        render(i);
+      });
+      buttonContainer.appendChild(btn);
+      mainDiv.appendChild(buttonContainer);
+    }
+    if (page < 10) {
+      const nextButton = document.createElement("button");
+      nextButton.innerHTML = "⏭";
+      nextButton.addEventListener("click", function () {
+        render(page + 1);
+      });
+      buttonContainer.appendChild(nextButton);
+      mainDiv.appendChild(buttonContainer);
+    }
+  }
+
+  fetchProduct();
+});
diff --git a/index.html b/index.html
@@ -48,14 +48,17 @@ <h1>Javascript-Challanges</h1>
           >Project 8 - Tic-Tac- Toe 📚
         </a>
         <a class="project-link" href="./Infinite Scroll/index.html"
-          >Project 9 - Infinite Scroll📚
+          >Project 9 - Infinite Scroll🫥
         </a>
         <a class="project-link" href="./Image Slider/index.html"
-          >Project 10 - Image Slider 🫥
+          >Project 10 - Image Slider 📚
         </a>
         <a class="project-link" href="./Holy Grail/index.html"
           >Project 10 - Holy Grail 🫥
         </a>
+        <a class="project-link" href="./Pagination/index.html"
+          >Project 11 - Pagination 👻
+        </a>
       </div>
     </main>
   </body>
