added button load more

css/styles.css

@@ -17,10 +17,12 @@ body {
   color: #f6c344;
 }
 
-.navbar .nav-item .nav-link {
+.navbar .nav-item .nav-link,
+.navbar .nav-item a {
   font-size: 1rem;
   font-weight: 500;
   color: #2a75bb;
+  text-decoration: none;
 }
 
 .navbar .nav-item .nav-link:hover,
@@ -110,6 +112,20 @@ body {
   margin: 2rem auto;
   z-index: 9999;
 }
+
+#load-more {
+  display: block;
+  margin: 20px auto;
+  padding: 10px 20px;
+  font-size: 1rem;
+  font-weight: 500;
+  color: #fff;
+  background-color: #2a75bb;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
 /* Modal */
 .modal-content {
   border-radius: 10px;

dist/scripts.min.js

@@ -1,14 +1,19 @@
 let pokemonRepository = (function () {
-  let e = [];
-  function t(e) {
+  let e = [],
+    t = "https://pokeapi.co/api/v2/pokemon/",
+    n = 0;
+  function o(e) {
     return e.charAt(0).toUpperCase() + e.slice(1);
   }
-  function n(n) {
-    "object" == typeof n && "name" in n
-      ? ((n.name = t(n.name)), e.push(n))
+  function i(t) {
+    "object" == typeof t && "name" in t
+      ? ((t.name = o(t.name)), e.push(t))
       : console.error("Invalid Pok\xe9mon name");
   }
-  function o(e) {
+  function l() {
+    return e;
+  }
+  function r(e) {
     let t = document.querySelector(".pokemon-list"),
       n = document.createElement("li");
     n.classList.add("list-group-item");
@@ -19,15 +24,58 @@ let pokemonRepository = (function () {
       o.setAttribute("data-bs-toggle", "modal"),
       o.setAttribute("data-bs-target", "#pokemonModal"),
       o.addEventListener("click", function () {
-        i(e);
+        c(e);
       }),
       n.appendChild(o),
       t.appendChild(n);
   }
-  function i(e) {
+  function a() {
+    return (
+      d(),
+      fetch(`${t}?limit=20&offset=${n}`)
+        .then(function (e) {
+          return e.json();
+        })
+        .then(function (e) {
+          e.results.forEach(function (e) {
+            i({ name: e.name, detailsUrl: e.url });
+          }),
+            (n += 20),
+            u();
+        })
+        .catch(function (e) {
+          console.error("Failed to load Pok\xe9mon list:", e), u();
+        })
+    );
+  }
+  function s() {
+    return (
+      d(),
+      fetch(`${t}?limit=20&offset=${n}`)
+        .then(function (e) {
+          return e.json();
+        })
+        .then(function (e) {
+          if (0 === e.results.length) {
+            console.log("No more Pok\xe9mon to load");
+            return;
+          }
+          e.results.forEach(function (e) {
+            let t = { name: e.name, detailsUrl: e.url };
+            i(t), r(t);
+          }),
+            (n += 20),
+            u();
+        })
+        .catch(function (e) {
+          console.error("Failed to load Pok\xe9mon list:", e), u();
+        })
+    );
+  }
+  function c(e) {
     var t;
     ((t = e),
-    a(),
+    d(),
     fetch(t.detailsUrl)
       .then(function (e) {
         return e.json();
@@ -37,98 +85,80 @@ let pokemonRepository = (function () {
           (t.height = e.height),
           (t.weight = e.weight),
           (t.types = e.types),
-          l();
+          u();
       })
       .catch(function (e) {
-        console.error("Failed to load Pok\xe9mon details:", e), l();
+        console.error("Failed to load Pok\xe9mon details:", e), u();
       })).then(function () {
-      r(e);
+      m(e);
     });
   }
-  function a() {
+  function d() {
     document.querySelector(".loading-message").innerText = "Loading...";
   }
-  function l() {
+  function u() {
     document.querySelector(".loading-message").innerText = "";
   }
-  function r(e) {
-    var n, o, i;
-    let a = document.querySelector(".modal-image"),
-      l = document.querySelector(".modal-title"),
-      r = document.querySelector(".modal-height"),
+  function m(e) {
+    var t, n, i;
+    let l = document.querySelector(".modal-image"),
+      r = document.querySelector(".modal-title"),
+      a = document.querySelector(".modal-height"),
       s = document.querySelector(".modal-weight"),
       c = document.querySelector(".modal-types");
-    (a.src = e.imageUrl),
-      (a.alt = `Image of ${e.name}`),
-      (l.innerText = e.name),
-      (r.innerHTML = `Height: <span class="bold">${
-        parseInt((n = e.height), 10) / 10
+    (l.src = e.imageUrl),
+      (l.alt = `Image of ${e.name}`),
+      (r.innerText = e.name),
+      (a.innerHTML = `Height: <span class="bold">${
+        parseInt((t = e.height), 10) / 10
       } m</span>`),
       (s.innerHTML = `Weight: <span class="bold">${
-        parseInt((o = e.weight), 10) / 10
+        parseInt((n = e.weight), 10) / 10
       } kg</span>`),
       (c.innerHTML = `Types: <span class="bold">${(i = e.types)
-        .map((e) => t(e.type.name))
+        .map((e) => o(e.type.name))
         .join(", ")}</span>`);
     let d = document.getElementById("pokemonModal");
     d.classList.add("show");
   }
-  function s() {
-    return e;
+  function f(t) {
+    p(e.filter((e) => e.name.toLowerCase().includes(t.toLowerCase())));
   }
-  function c(t) {
-    d(e.filter((e) => e.name.toLowerCase().includes(t.toLowerCase())));
-  }
-  function d(e) {
+  function p(e) {
     (document.querySelector(".pokemon-list").innerHTML = ""),
-      e.forEach((e) => o(e));
+      e.forEach((e) => r(e));
   }
   document
     .querySelector("#pokemon-search")
     .addEventListener("input", function (e) {
-      c(e.target.value);
+      f(e.target.value);
     });
-  let u = document.getElementById("btn-back-to-top");
+  let h = document.getElementById("btn-back-to-top");
   return (
     window.addEventListener("scroll", function () {
       window.scrollY > 300
-        ? (u.style.display = "block")
-        : (u.style.display = "none");
+        ? (h.style.display = "block")
+        : (h.style.display = "none");
     }),
-    u.addEventListener("click", function () {
+    h.addEventListener("click", function () {
       window.scrollTo({ top: 0, behavior: "smooth" });
     }),
+    a().then(function () {
+      pokemonRepository.getAll().forEach(function (e) {
+        pokemonRepository.addListItem(e);
+      });
+    }),
+    document.getElementById("load-more").addEventListener("click", s),
     {
-      getAll: s,
-      add: n,
-      addListItem: o,
-      loadList: function e() {
-        return (
-          a(),
-          fetch("https://pokeapi.co/api/v2/pokemon/?limit=150")
-            .then(function (e) {
-              return e.json();
-            })
-            .then(function (e) {
-              e.results.forEach(function (e) {
-                n({ name: e.name, detailsUrl: e.url });
-              }),
-                l();
-            })
-            .catch(function (e) {
-              console.error("Failed to load Pok\xe9mon list:", e), l();
-            })
-        );
-      },
-      showDetails: i,
-      showModal: r,
-      renderList: d,
-      searchPokemon: c,
+      getAll: l,
+      add: i,
+      addListItem: r,
+      loadInitialList: a,
+      loadMoreList: s,
+      showDetails: c,
+      showModal: m,
+      renderList: p,
+      searchPokemon: f,
     }
   );
 })();
-pokemonRepository.loadList().then(function () {
-  pokemonRepository.getAll().forEach(function (e) {
-    pokemonRepository.addListItem(e);
-  });
-});

dist/styles.min.css

@@ -11,11 +11,14 @@ body {
   font-weight: 700;
   color: #f6c344;
 }
-.navbar .nav-item .nav-link {
+.navbar .nav-item .nav-link,
+.navbar .nav-item a {
   font-size: 1rem;
   font-weight: 500;
   color: #2a75bb;
+  text-decoration: none;
 }
+
 .navbar .nav-item .nav-link.active,
 .navbar .nav-item .nav-link:hover {
   color: #f6c344;
@@ -92,6 +95,19 @@ body {
   margin: 2rem auto;
   z-index: 9999;
 }
+#load-more {
+  display: block;
+  margin: 20px auto;
+  padding: 10px 20px;
+  font-size: 1rem;
+  font-weight: 500;
+  color: #fff;
+  background-color: #2a75bb;
+  border: none;
+  border-radius: 5px;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
 .modal-content {
   border-radius: 10px;
   overflow: hidden;

index.html

@@ -28,11 +28,9 @@
                         <a class="nav-link active" aria-current="page" href="#">Home</a>
                     </li>
                     <li class="nav-item">
-                        <a class="nav-link" href="#">Pokemons</a>
-                    </li>
-                    <li class="nav-item">
-                        <a class="nav-link" href="#">Abilities</a>
+                        <a class="nav-link" href="https://github.com/aeueoe/Pokedex-app" target="_blank"> About </a>
                     </li>
+
                 </ul>
             </div>
         </div>
@@ -46,6 +44,7 @@
         <div class="loading-message"></div>
         <ul class="list-group pokemon-list list-unstyled">
         </ul>
+        <button id="load-more" class="btn ">Load More</button>
     </div>
     <div id="modal-container">
         <div class="modal fade" id="pokemonModal" tabindex="-1" aria-labelledby="pokemonModalLabel" aria-hidden="true">