add pokeapi page

dishamodi0910 · Oct 9, 2023 · d41bf6a · d41bf6a
1 parent ea8bc19
commit d41bf6a
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 0 deletions.
diff --git a/Existing_API_Collection/PokeAPI/index.html b/Existing_API_Collection/PokeAPI/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+
+    <title>PokeAPI</title>
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <meta name="description" content="PokeAPI page example" />
+
+    <link rel="stylesheet" type="text/css" href="style.css" />
+  </head>
+  <body>
+    <h1>PokeAPI</h1>
+    <table id="pokemon">
+      <tr>
+        <th>Name</th>
+        <th>URL</th>
+      </tr>
+    </table>
+    <button id="loadmore" onclick="fetchData()">Load More</button>
+    <script src="index.js"></script>
+  </body>
+</html>
diff --git a/Existing_API_Collection/PokeAPI/index.js b/Existing_API_Collection/PokeAPI/index.js
@@ -0,0 +1,30 @@
+const API_URL = "https://pokeapi.co/api/v2/pokemon";
+
+const addDataToPage = (value = []) => {
+  const pageData = value
+    .map(
+      (val) =>
+        `<tr><td>${val.name}</td><td><a href="${val.url}">${val.url}</a></td></tr>`
+    )
+    .join("");
+
+  const pokemonTag = document.getElementById("pokemon");
+  pokemonTag.innerHTML += pageData;
+};
+
+const fetchData = async () => {
+  let url = "";
+  if (document.getElementById("loadmore").value) {
+    url = document.getElementById("loadmore").value;
+  } else {
+    url = API_URL;
+  }
+
+  const response = await fetch(url);
+  const responseBody = await response.json();
+  addDataToPage(responseBody.results);
+
+  document.getElementById("loadmore").value = responseBody.next;
+};
+
+fetchData();
diff --git a/Existing_API_Collection/README.md b/Existing_API_Collection/README.md
@@ -12,3 +12,4 @@
 |[Nasa API](./NasaAPI)|The APOD API provides access to the Astronomy Picture of the Day, which showcases a different astronomical image or photograph each day along with a brief explanation written by a professional astronomer.|
 |[CryptoCurrencies API](./CryptoCurrenciesAPIs)| It is giving the data about total trading of the popular coins in 24 hrs.|
 |[Giphy API](./GiphyAPI)|This API allows developers to integrate Giphy's vast library of GIFs into their own applications, websites, and services.|
+|[PokeAPI](./PokeAPI/)| This API provides data regarding Pokemon and others related. |