dishamodi0910 · dishamodi0910 · May 26, 2024 · May 21, 2024 · May 21, 2024 · May 21, 2024
diff --git a/Existing_API_Collection/PokeAPI/README.md b/Existing_API_Collection/PokeAPI/README.md
@@ -0,0 +1,25 @@
+# Pokémon API
+Welcome to the Pokémon API! This API provides information about various Pokémon species, including their abilities, base stats, types, and evolution details. It serves as a valuable resource for developers interested in building applications related to Pokémon.
+
+## Features
+- Fetch detailed information about Pokémon species.
+- Retrieve data such as abilities, base stats, types, and evolution details.
+- Error handling
+- Simple and easy-to-use interface.
+
+## Technologies Used
+- HTML
+- Tailwind CSS
+- JavaScript
+- API
+
+# API Integration
+This application uses Pokémon API `https://pokeapi.co/api/v2/pokemon/your-pokemon` to fetch the data.
+
+## Installation
+To set up the Pokémon API locally, follow these steps:
+
+- Clone the repository
+- Run command `.\/index.html`
+
+## Hope, you enjoyed the Pokémon verse!!🥳
diff --git a/Existing_API_Collection/PokeAPI/img/pikachu-ash1.png b/Existing_API_Collection/PokeAPI/img/pikachu-ash1.png
diff --git a/Existing_API_Collection/PokeAPI/img/pokeball.png b/Existing_API_Collection/PokeAPI/img/pokeball.png
diff --git a/Existing_API_Collection/PokeAPI/img/pokemon.png b/Existing_API_Collection/PokeAPI/img/pokemon.png
diff --git a/Existing_API_Collection/PokeAPI/index.html b/Existing_API_Collection/PokeAPI/index.html
@@ -7,17 +7,32 @@
     <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" />
+    <script src="https://cdn.tailwindcss.com"></script>
+
+    <link rel = 'stylesheet' 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>
+  <body> 
+    <div class="flex flex-row items-center bg-gradient-to-r from-slate-700 to-slate-800">
+      <div class="mx-24 h-96">
+        <img src = './img/pokemon.png' alt = 'pokemon-logo' class="h-28">
+        <p class = 'text-white text-lg'>Welcome to the Pokémon Realm, where legends and mysteries await! Explore the vast diversity of Pokémon, from the iconic to 
+          the obscure, and embark on an unforgettable journey to become the ultimate Pokémon Master!</p>
+
+          <form id = 'search'>
+            <div class="flex flex-row">
+              <input id = 'input' class = 'bg-slate-200 w-96 my-10 text-lg border border-gray-300 rounded-md p-3 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500' placeholder="Search your Pokémon">
+              <div class="pointer-events-none">
+                <button><img src = './img/pokeball.png' alt = 'search-icon' class="w-20 m-8 pointer-events-auto"></button>
+              </div>
+            </div>
+          </form>
+        <p id = 'poke-load' class = 'text-white mx-20 text-lg'></p>
+        <p id = 'poke-error' class = 'text-red-500 mx-20 text-lg'></p>
+      </div>
+      <img src = './img/pikachu-ash1.png' alt = 'bg-img' class="h-screen mx-16">
+    </div>
+
     <script src="index.js"></script>
   </body>
 </html>
diff --git a/Existing_API_Collection/PokeAPI/index.js b/Existing_API_Collection/PokeAPI/index.js
@@ -1,30 +1,31 @@
 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 pokeError = document.querySelector('#poke-error')
+const pokeLoad = document.querySelector('#poke-load')
+const searchForm = document.querySelector('#search')
 
-  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 fetchPokeData = async (query) => {
+  try{
+    pokeLoad.innerHTML = 'Loading...'
+    pokeError.innerHTML = ''
+    const response = await fetch(`${API_URL}/${query}`)
+    if (!response.ok){
+      throw new Error('Sorry! Pokemon not found.')
+    }
+    const data = await response.json();
+
+    window.location.href = `pokemon.html?name=${data.name}`;
+  }catch(error){
+    pokeLoad.innerHTML = ''
+    pokeError.innerHTML = error.message
   }
+}
 
-  const response = await fetch(url);
-  const responseBody = await response.json();
-  addDataToPage(responseBody.results);
-
-  document.getElementById("loadmore").value = responseBody.next;
-};
+searchForm.addEventListener('submit', (e) => {
+  e.preventDefault()
+  const input = document.querySelector('#input').value.trim();
+  if (input){
+    fetchPokeData(input)
+  }
+} )
 
-fetchData();
diff --git a/Existing_API_Collection/PokeAPI/pokemon.html b/Existing_API_Collection/PokeAPI/pokemon.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+    <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" />
+
+        <script src="https://cdn.tailwindcss.com"></script>
+
+    </head>
+    <body>
+        <div class="flex flex-row bg-gradient-to-r from-slate-100 to-slate-700 h-screen">
+
+            <div class="mx-16 basis-1/3">
+                <img src = './img/pokemon.png' alt = 'pokemon-logo' class="h-28">
+                <div class="my-11 text-lg px-16">
+                    <p><span class="font-semibold">Your pokemon is : </span><span id = 'name'></span></p>
+                    <p><span class="font-semibold">Type is : </span><span id = 'type'></span></p>
+                    <p><span class="font-semibold">Abilities are : </span><span id = 'ability'></span></p>
+                    <p><span class="font-semibold">Base Experience is : </span><span id = 'base-exp'></span></p>
+                    <p><span class="font-semibold">Height is : </span><span id = 'height'></span></p>
+                    <p><span class="font-semibold">Weight is : </span><span id = 'weight'></span></p>
+                    <p><span class="font-semibold">Evolves From : </span><span id = 'evolve-from'></span></p>
+                    <p><span class="font-semibold">Category : </span><span id = 'category'></span></p>
+                    <p class="font-semibold">Base Stats are : [</p>
+                    <p id = 'base-stat' class="mx-10"></p>
+                    <p class="font-semibold">]</p>
+                </div>
+            </div>
+            <img src = '' alt = 'pokemon' class = 'h-screen py-32 px-16' id = 'poke-img'>
+        </div>
+        <script src = 'pokemon.js'></script>
+    </body>
+</html>
diff --git a/Existing_API_Collection/PokeAPI/pokemon.js b/Existing_API_Collection/PokeAPI/pokemon.js
@@ -0,0 +1,63 @@
+const API_URL = "https://pokeapi.co/api/v2/pokemon";
+
+const getQueryParam = (name) => {
+    const params = new URLSearchParams(window.location.search);
+    return params.get(name);
+  };
+
+const pokemon = getQueryParam('name')
+const name = document.querySelector('#name')
+const type = document.querySelector('#type')
+const ability = document.querySelector('#ability')
+const baseExp = document.querySelector('#base-exp')
+const height = document.querySelector('#height')
+const weight = document.querySelector('#weight')
+const baseStat = document.querySelector('#base-stat')
+const image = document.querySelector('#poke-img')
+const evolve = document.querySelector('#evolve-from')
+const category = document.querySelector('#category')
+
+const fetchPokeData = async (query) => {
+
+    const response = await fetch(`${API_URL}/${query}`)
+    const data = await response.json()
+    const abilities = data.abilities.map(curr => curr.ability.name).join(', ')
+    const baseStat = data.stats.map(curr => ({[curr.stat.name] : curr.base_stat}))
+    const type = data.types.map(curr => curr.type.name).join(', ')
+    const speciesResponse = await fetch(data.species.url);
+    const speciesData = await speciesResponse.json();
+    const evolveFrom = speciesData.evolves_from_species ? speciesData.evolves_from_species.name : 'None';
+
+    return {
+        name : data.name,
+        ability : abilities,
+        baseExp : data.base_experience,
+        height : data.height,
+        weight : data.weight,
+        type ,
+        baseStat,
+        imgURL : data.sprites.other['official-artwork'].front_default,
+        evolveFrom,
+        category: speciesData.genera.find(genus => genus.language.name === 'en').genus.replace(' Pokémon', '')
+    }
+  }
+
+fetchPokeData(pokemon).then((pokemonData) => {
+    height.textContent += `${pokemonData.height / 10} m`
+    name.textContent += `${pokemonData.name}`
+    weight.textContent += `${weightConversion(pokemonData.weight)} kg`
+    type.textContent += `${pokemonData.type}`
+    ability.textContent += `${pokemonData.ability}`
+    baseExp.textContent += `${pokemonData.baseExp}`
+    category.textContent += `${pokemonData.category}`
+    evolve.textContent += `${pokemonData.evolveFrom}`
+    pokemonData.baseStat.forEach(stat => {
+        baseStat.innerHTML += `${Object.keys(stat)[0]}: ${Object.values(stat)[0]} <br>`
+      });
+    image.src = `${pokemonData.imgURL}`
+})
+
+//hectogram to kg
+function weightConversion(weight){
+    return weight * .1
+}
diff --git a/Existing_API_Collection/PokeAPI/tailwind.config.js b/Existing_API_Collection/PokeAPI/tailwind.config.js
@@ -0,0 +1,9 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+