Add PHP scripts for fetching Pokémon data and update JavaScript to utilize new API endpoints

pokedex/get_pokemon.php

@@ -0,0 +1,47 @@
+<?php
+header('Content-Type: application/json');
+
+$servername = "localhost";
+$username = "root";
+$password = "";
+$dbname = "pokedex";
+
+$conn = new mysqli($servername, $username, $password, $dbname);
+
+if ($conn->connect_error) {
+    die("Connection failed: " . $conn->connect_error);
+}
+
+if (isset($_GET['id'])) {
+    $id = intval($_GET['id']);
+
+    $sql = "SELECT p.id, p.name, p.height, p.weight, p.base_experience, p.image_url, s.genus, s.flavor_text, s.growth_rate, s.base_happiness, s.capture_rate, s.gender_rate, GROUP_CONCAT(DISTINCT t.name) AS types, GROUP_CONCAT(DISTINCT a.name) AS abilities, GROUP_CONCAT(DISTINCT e.name) AS egg_groups, st.hp, st.attack, st.defense, st.sp_attack, st.sp_defense, st.speed
+            FROM pokemon p
+            LEFT JOIN species s ON p.id = s.pokemon_id
+            LEFT JOIN pokemon_types pt ON p.id = pt.pokemon_id
+            LEFT JOIN types t ON pt.type_id = t.id
+            LEFT JOIN pokemon_abilities pa ON p.id = pa.pokemon_id
+            LEFT JOIN abilities a ON pa.ability_id = a.id
+            LEFT JOIN pokemon_egg_groups peg ON p.id = peg.pokemon_id
+            LEFT JOIN egg_groups e ON peg.egg_group_id = e.id
+            LEFT JOIN stats st ON p.id = st.pokemon_id
+            WHERE p.id = $id
+            GROUP BY p.id";
+
+    $result = $conn->query($sql);
+
+    if ($result->num_rows > 0) {
+        $row = $result->fetch_assoc();
+        $row['types'] = explode(',', $row['types']);
+        $row['abilities'] = explode(',', $row['abilities']);
+        $row['egg_groups'] = explode(',', $row['egg_groups']);
+        echo json_encode($row);
+    } else {
+        echo json_encode([]);
+    }
+} else {
+    echo json_encode(["error" => "No ID provided"]);
+}
+
+$conn->close();
+?>

pokedex/get_pokemons.php

@@ -0,0 +1,38 @@
+<?php
+header('Content-Type: application/json');
+
+$servername = "localhost";
+$username = "root";
+$password = "";
+$dbname = "pokedex";
+
+$conn = new mysqli($servername, $username, $password, $dbname);
+
+if ($conn->connect_error) {
+    die("Connection failed: " . $conn->connect_error);
+}
+
+$start = intval($_GET['start']);
+$end = intval($_GET['end']);
+
+$sql = "SELECT p.id, p.name, p.height, p.weight, p.image_url, GROUP_CONCAT(DISTINCT t.name) AS types
+        FROM pokemon p
+        LEFT JOIN pokemon_types pt ON p.id = pt.pokemon_id
+        LEFT JOIN types t ON pt.type_id = t.id
+        WHERE p.id BETWEEN $start AND $end
+        GROUP BY p.id";
+
+$result = $conn->query($sql);
+
+$pokemons = array();
+if ($result->num_rows > 0) {
+    while($row = $result->fetch_assoc()) {
+        $row['types'] = explode(',', $row['types']);
+        $pokemons[] = $row;
+    }
+}
+
+echo json_encode($pokemons);
+
+$conn->close();
+?>

pokedex/script.js

@@ -1,5 +1,4 @@
 const poke_container = document.getElementById("poke-container");
-const pokemon_count = 1010;
 const colors = {
   fire: "#e03a3a",
   grass: "#50C878",
@@ -66,40 +65,25 @@ const regions = {
 const loader = document.querySelector(".lds-ring");
 const fetchPokemons = async (region) => {
   const { start, end } = regions[region];
-
   loader.classList.add("ring-active");
 
-  for (let i = start; i <= end; i++) {
-    const pokemonName = i.toString();
-    const url = `https://pokeapi.co/api/v2/pokemon/${pokemonName}`;
-
-    let res = await fetch(url);
-    let data = await res.json();
-    loader.classList.remove('ring-active')
-    createPokemonCard(data);
-    setTimeout(() => {
-    }, "150");
+  const url = `http://localhost/pokedex/pokedex/get_pokemons.php?start=${start}&end=${end}`;
+  try {
+    const res = await fetch(url);
+    if (!res.ok) {
+      throw new Error(`HTTP error! status: ${res.status}`);
+    }
+    const data = await res.json();
+    loader.classList.remove('ring-active');
+    data.forEach(pokemon => createPokemonCard(pokemon));
+  } catch (error) {
+    console.error('Error fetching Pokémon data:', error);
   }
 };
 
 const main_types = Object.keys(colors);
 
-// const fetchPokemons = async () => {
-//   for (let i = 1; i <= pokemon_count; i++) {
-//     await getPokemon(i);
-//   }
-// };
-
-// const getPokemon = async (id) => {
-//   const url = `https://pokeapi.co/api/v2/pokemon/${id}`;
-//   const res = await fetch(url);
-//   const data = await res.json();
-//   console.log(data);
-//   createPokemonCard(data);
-// };
-
 const createPokemonCard = (pokemon) => {
-
   const pokemonEl = document.createElement("div");
   pokemonEl.classList.add("card");
   pokemonEl.id = pokemon.id;
@@ -111,32 +95,14 @@ const createPokemonCard = (pokemon) => {
     name = name;
   }
   const id = pokemon.id.toString().padStart(3, "0");
-  //    const moves = [];
-  //    try {
-  //     for (let i = 0; i <= 1 ; i++) {
-  //             moves.push(pokemon.moves[i].move.name);
-  //     }
-  //     console.log(moves);
-  //     } catch (error) {
-  //         console.log(error);
-  //     }
 
   let weight = pokemon.weight / 10 + "kg";
   let height = pokemon.height / 10 + "m";
 
-  const poke_types = pokemon.types.map((type) => type.type.name);
+  const poke_types = pokemon.types;
   const type = main_types.find((type) => poke_types.indexOf(type) > -1);
   const color = colors[type];
-  let frontImg;
-  let backImg;
-  try{
-    frontImg = pokemon.sprites.front_default;
-    backImg = pokemon.sprites.back_default;
-  }
-  catch(err){
-    frontImg = "#";
-    backImg = "#";
-  }
+  const frontImg = pokemon.image_url;
 
   pokemonEl.style.backgroundColor = color;
 
@@ -149,22 +115,16 @@ const createPokemonCard = (pokemon) => {
         <span class="number">#${id}</span>
         <h3 class="name">${name}</h3>
         <div class="types">
-          ${poke_types
-            .map(
-              (type) => `
+          ${poke_types.map(type => `
             <div class="poke__type__bg ${type}">
               <img src="Icons/${type}.svg" alt="Type">
             </div>
-          `
-            )
-            .join("")}
+          `).join("")}
         </div>
     </div>
     <div class="back side">
         <div class="img-container">
-        <img class="image" src="${
-          backImg == null ? frontImg : backImg
-        }" alt="${name}" />
+        <img class="image" src="${frontImg}" alt="${name}" />
         <img class="background" src="./Icons/default/pokeball.svg" alt="pokeball">
         </div>
         <span class="number">#${id}</span>
@@ -175,15 +135,8 @@ const createPokemonCard = (pokemon) => {
     </div>
   `;
 
-  // <div class="moves">
-  // <div>${moves[0]}</div>
-  // <div>${moves[1]}</div>
-  // </div>
-
   pokemonEl.innerHTML = pokemonInnerHTML;
-  // Add event listener to open new page on card click
   pokemonEl.addEventListener("click", () => {
-    // Open new page with specific card details
     window.open(`details.html?id=${id}`, "_self");
   });
 
@@ -219,14 +172,12 @@ window.addEventListener("scroll", function () {
   }
 });
 
-document
-  .getElementById("scrollToTopBtn")
-  .addEventListener("click", function () {
+document.getElementById("scrollToTopBtn").addEventListener("click", function () {
   window.scrollTo({
     top: 0,
     behavior: "smooth",
   });
-  });
+});
 
 window.addEventListener("scroll", function () {
   var scrollToDownBtn = document.getElementById("scrollToDownBtn");
@@ -237,57 +188,45 @@ window.addEventListener("scroll", function () {
   }
 });
 
-document
-  .getElementById("scrollToDownBtn")
-  .addEventListener("click", function () {
+document.getElementById("scrollToDownBtn").addEventListener("click", function () {
   window.scrollTo({
     top: 999999,
     behavior: "smooth",
   });
-  });
+});
+
 function search_pokemon() {
   let input = document.getElementById("searchbar").value;
   input = input.toLowerCase();
   input = input.replace(/\s+/g, ""); // removing all spaces from search box
-  // storing all card along wiith details in variable
   let x = document.getElementsByClassName("cardContainer");
 
   for (i = 0; i < x.length; i++) {
-    // checking  the name or type entered by user from search box if doesn't match than dont display the message
     if (!x[i].innerHTML.toLowerCase().includes(input)) {
       x[i].style.display = "none";
-    }
-    // checking  the name or type entered by user from search box if doesn't match than dont display the pokemon card
-    else {
+    } else {
       x[i].style.display = "block";
     }
   }
 }
 
-
-// dark mode enabled
 const darkModeButton = document.getElementById("dark");
 
 darkModeButton.addEventListener("click", () => {
-
   let element = document.body;
   element.classList.toggle("dark-mode");
   document.body.classList.toggle("dark-mode");
 
   const regions = document.querySelectorAll(".regionvalue");
-  console.log(regions);
   regions.forEach(region => {
     region.classList.toggle("dark-mode");
   });
-
 });
 
 const darkModeIcon = document.getElementById("dark");
 darkModeButton.addEventListener("click", () => {
   document.body.classList.toggle("dark-mode");
   darkModeIcon.classList.toggle("fa-toggle-on");
-  // You can add additional elements that need dark mode here
 });
 
-
 changeRegion();

pokedex/script2.js

@@ -1,7 +1,6 @@
 const params = new URLSearchParams(window.location.search);
 const id = parseInt(params.get("id"));
 
-// console.log(id);
 const colors = {
   fire: "#e03a3a",
   grass: "#50C878",
@@ -24,244 +23,32 @@ const colors = {
 };
 const main_types = Object.keys(colors);
 
-
-
-
-// const getPokeApi = async (url)=>{
-  
-//    await fetch(url)
-//     .then(
-//       async response => {
-//         let isJson = response.headers.get('content-type')?.includes('application/json');
-//         let data = isJson ? await response.json() : null;
-
-//         // check for error response
-//         if (!response.ok) {
-//             // get error message from body or default to response status
-//             const error = (data && data.message) || response.status;
-//             return Promise.reject(error);
-//         }
-//         // element.innerHTML = JSON.stringify(data, null, 4);
-//     })
-//     .catch(error => {
-//         // element.parentElement.innerHTML = `Error: ${error}`;
-//         console.error('There was an error!', error);
-//     });
-// }
-const getType_data = async(url)=>{
-  let res = await fetch(url);
-  let data = await res.json();
-  return data;
-}
 const fetchPokemonDetails = async () => {
-
-
-  const url = `https://pokeapi.co/api/v2/pokemon/${id}/`;
-  const url2 = `https://pokeapi.co/api/v2/pokemon-species/${id}/`;
-  //changing the api so that the query is pokemon specific
-  // const url3 = `https://pokeapi.co/api/v2/type/${id}/`; 
- 
+  const url = `http://localhost/pokedex/pokedex/get_pokemon.php?id=${id}`;
   const res = await fetch(url);
-  const res2 = await fetch(url2);
-  
   const data = await res.json();
-  const data2 = await res2.json();
-  
-  
-  // get the type of pokemon
-  let type_names = data.types.map((val, index)=>val.type.name)
-  // console.log(data.types);
-  let data3 = type_names.map( async (val) => {
-    return await getType_data(`https://pokeapi.co/api/v2/type/${val}/`)
-  })
-  
-  // console.log(type_names);
-  
-  const arr = [data, data2, data3];
-  await displayPokemonDetails(arr);
-  // console.log(arr);
+  displayPokemonDetails(data);
 };
 
-const displayPokemonDetails = async (pokemon) => {
-  const name = pokemon[0].name[0].toUpperCase() + pokemon[0].name.slice(1);
-  const japaneseName = pokemon[1].names[0].name;
-  const id = pokemon[0].id.toString().padStart(3, "0");
-  const imageSrc = pokemon[0].sprites.other.dream_world.front_default;
-  const imageSrc2 = pokemon[0].sprites.other["official-artwork"].front_default;
-  const poke_types = pokemon[0].types.map((type) => type.type.name);
-  const type = main_types.find((type) => poke_types.indexOf(type) > -1);
-
+const displayPokemonDetails = (pokemon) => {
+  const name = pokemon.name;
+  const japaneseName = pokemon.japanese_name;
+  const id = pokemon.id.toString().padStart(3, "0");
+  const imageSrc = pokemon.image_url;
+  const poke_types = pokemon.types;
+  const type = poke_types[0];
   const color = colors[type];
 
-  const hp = pokemon[0].stats[0].base_stat;
-  // const maxHp = hp * 2 + 204;
-  // const minHp = hp * 2 + 110;
-  const attack = pokemon[0].stats[1].base_stat;
-  // const maxAttack = Math.floor((attack * 2 + 99) * 1.1);
-  // const minAttack = Math.floor((attack * 2 + 5) * 0.9);
-  const spAttack = Math.floor(pokemon[0].stats[3].base_stat);
-  // const maxSpAttack = Math.floor((spAttack * 2 + 99) * 1.1);
-  // const minSpAttack = Math.floor((spAttack * 2 + 5) * 0.9);
-  const spDefense = Math.floor(pokemon[0].stats[4].base_stat);
-  // const maxSpDefense = Math.floor((spDefense * 2 + 99) * 1.1);
-  // const minSpDefense = Math.floor((spDefense * 2 + 5) * 0.9);
-  const defense = pokemon[0].stats[2].base_stat;
-  // const maxDefense = Math.floor((defense * 2 + 99) * 1.1);
-  // const minDefense = Math.floor((defense * 2 + 5) * 0.9);
-  const speed = pokemon[0].stats[5].base_stat;
-  // const maxSpeed = Math.floor((speed * 2 + 99) * 1.1);
-  // const minSpeed = Math.floor((speed * 2 + 5) * 0.9);
+  const hp = pokemon.stats?.hp || 0;
+  const attack = pokemon.stats?.attack || 0;
+  const spAttack = pokemon.stats?.sp_attack || 0;
+  const spDefense = pokemon.stats?.sp_defense || 0;
+  const defense = pokemon.stats?.defense || 0;
+  const speed = pokemon.stats?.speed || 0;
 
-  const abilities = pokemon[0].abilities.map((ability) => ability.ability.name);
-  const eggGroups = pokemon[1].egg_groups.map((group) => group.name);
-  // const moves = pokemon[0].moves.map((move) => move.move.name);
+  const abilities = pokemon.abilities;
+  const eggGroups = pokemon.egg_groups;
   document.body.style.backgroundColor = color;
-  const evolutionChainUrl = pokemon[1].evolution_chain.url;
-  const resEvolutionChain = await fetch(evolutionChainUrl);
-  const evolutionChainData = await resEvolutionChain.json();
-  // console.log(evolutionChainData);
-
-  const varieties = pokemon[1].varieties
-    .map((variety) => {
-      if (variety.is_default === true) {
-        return null; // or return undefined;
-      }
-      return variety.pokemon;
-    })
-    .filter((item) => item !== null); // Remove null items from the array
-  // console.log(varieties);
-  const resVarieties = await Promise.all(
-    varieties.map((variety) => fetch(variety.url))
-  );
-  const varietiesData = await Promise.all(
-    resVarieties.map((res) => res.json())
-  );
-  // console.log(varietiesData);
-
-  let tab3 = document.getElementById("tab_3");
-  tab3.innerHTML = `
-  <div class="evolution">
-  </div>
-  <div class="varieties">
-  </div>
-  `;
-
-  const displayVarieties = (varietiesData) => {
-    const container = document.querySelector(".varieties");
-    container.innerHTML = "";
-
-    varietiesData.forEach((variety) => {
-      const pokemonName = variety.name;
-      const imgUrl = variety.sprites.other["official-artwork"].front_default;
-
-      const pokemonDiv = document.createElement("div");
-      pokemonDiv.classList.add("varieties__pokemon");
-
-      const nameElement = document.createElement("h1");
-      nameElement.textContent = pokemonName;
-      pokemonDiv.appendChild(nameElement);
-
-      const imageElement = document.createElement("img");
-      imageElement.src = imgUrl;
-      pokemonDiv.appendChild(imageElement);
-
-      container.appendChild(pokemonDiv);
-    });
-  };
-
-  displayVarieties(varietiesData);
-  const displayEvolutionChain = (evolutionChainData) => {
-    const container = document.querySelector(".evolution");
-    container.innerHTML = "";
-
-    const chain = evolutionChainData.chain;
-    displayEvolutionRecursive(chain, container);
-  };
-
-  const displayEvolutionRecursive = (chain, container) => {
-    try{
-
-    const pokemonName = chain.species.name;
-    const imgUrl = `https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/${getPokemonIdFromURL(
-      chain.species.url
-    )}.png`;
-
-    const EvolutionId = getPokemonIdFromURL(chain.species.url);
-
-    const pokemonDiv = document.createElement("div");
-    pokemonDiv.classList.add("evolution__pokemon");
-    const iconDiv = document.createElement("div");
-
-    const nameElement = document.createElement("h1");
-    nameElement.textContent = pokemonName;
-    pokemonDiv.appendChild(nameElement);
-
-    const imageElement = document.createElement("img");
-    imageElement.src = imgUrl;
-    pokemonDiv.appendChild(imageElement);
-    imageElement.addEventListener("click", () => {
-      window.location.href = `details.html?id=${EvolutionId}}`;
-    });
-
-    if (chain.evolves_to.length > 0) {
-      const arrowIndicator = document.createElement("i");
-      arrowIndicator.classList.add(
-        "fa-solid",
-        "fa-caret-right",
-        "fa-2x",
-        "fa-beat"
-      );
-      iconDiv.appendChild(arrowIndicator);
-    }
-
-    container.appendChild(pokemonDiv);
-    container.appendChild(iconDiv);
-
-    if (chain.evolves_to.length > 0) {
-      const evolutionData = chain.evolves_to[0];
-      displayEvolutionRecursive(evolutionData, container);
-    }
-
-    }
-    catch(err){
-      console.log(err);
-    }
-
-  };
-
-  function getPokemonIdFromURL(url) {
-    const parts = url.split("/");
-    return parts[parts.length - 2];
-  }
-  displayEvolutionChain(evolutionChainData);
-
-  if(pokemon[2] != null){
-
-    var weakTypesString='';
-    var strongTypesString='';
-    
-    pokemon[2].map(async (val)=>{
-
-      val.then((res)=>{
-        // console.log(res);
-
-        let weakTypes=[res.damage_relations.no_damage_to.map((type)=>{
-          return `<img src="./Icons/${type.name}.svg" alt="test images" class="${type.name} poke_type_bg"></img>`
-        })]
-
-        // var weakTypesString='';
-        for(let i in weakTypes){
-          weakTypesString += weakTypes[i];
-        }
-        
-        let strongTypes=[res.damage_relations.double_damage_to.map((type)=>{
-          return `<img src="./Icons/${type.name}.svg" alt="test images" class="${type.name} poke_type_bg"></img>`
-        })]
-        
-        // var strongTypesString='';
-        for(let i in strongTypes){
-          strongTypesString += strongTypes[i];
-        }
 
   let tab2 = document.getElementById("tab_2");
   tab2.innerHTML = `
@@ -271,277 +58,53 @@ const displayPokemonDetails = async (pokemon) => {
           <span> Health:</span>
           <span>${hp}</span>
         </div>
-          <meter id="hp"
-          style="content: 'HP';"
-            min="0" max="255"
-            low="70" high="120" optimum="150"
-            value="${hp}">
-        </meter>
+        <meter id="hp" min="0" max="255" low="70" high="120" optimum="150" value="${hp}"></meter>
       </div>
-      
-      
       <div class="stat">
         <div>
           <span> Attack:</span>
           <span>${attack}</span>
         </div>
-          <meter id="attack"
-              min="0" max="255"
-              low="70" high="120" optimum="150"
-              value="${attack}">
-        </meter>
+        <meter id="attack" min="0" max="255" low="70" high="120" optimum="150" value="${attack}"></meter>
       </div>
-      
-      
-      
       <div class="stat">
         <div>
           <span> Defense:</span>
           <span>${defense}</span>
         </div>
-          <meter id="defense"
-              min="0" max="255"
-              low="70" high="120" optimum="150"
-              value="${defense}">
-        </meter>
+        <meter id="defense" min="0" max="255" low="70" high="120" optimum="150" value="${defense}"></meter>
       </div>
-      
-      
-      
       <div class="stat">
         <div>
           <span> Sp. Atk:</span>
           <span>${spAttack}</span>
         </div>
-          <meter id="spattack"
-              min="0" max="255"
-              low="70" high="120" optimum="150"
-              value="${spAttack}">
-        </meter>
+        <meter id="spattack" min="0" max="255" low="70" high="120" optimum="150" value="${spAttack}"></meter>
       </div>
-      
-      
       <div class="stat">
         <div>
           <span> Sp. Def:</span>
           <span>${spDefense}</span>
         </div>
-          <meter id="spdefense"
-              min="0" max="255"
-              low="70" high="120" optimum="150"
-              value="${spDefense}">
-        </meter>
+        <meter id="spdefense" min="0" max="255" low="70" high="120" optimum="150" value="${spDefense}"></meter>
       </div>
-      
-      
-      
       <div class="stat">
         <div>
           <span>Speed:</span>
           <span>${speed}</span>
         </div>
-          <meter id="speed"
-              min="0" max="255"
-              low="70" high="120" optimum="150"
-              value="${speed}">
-        </meter>
+        <meter id="speed" min="0" max="255" low="70" high="120" optimum="150" value="${speed}"></meter>
       </div>
-      
-                                  
       <div class="stat">
         <div>
           <span> Total:</span>
           <span>${speed + hp + attack + defense + spAttack + spDefense}</span>
         </div>
-          <meter id="total"
-              min="0" max="1530"
-              low="500" high="720" optimum="1000"
-              value="${speed + hp + attack + defense + spAttack + spDefense}">
-        </meter>
-        </div>
-          <div class="statTypes">
-            <div class="statTypeText">
-              <div>
-                Weak Against
-              </div>
-              
-            </div>
-            
-              <div class="statIconHolder">
-                ${weakTypesString==""?'None':weakTypesString}
-                
-            </div> 
-          </div>
-          <div class="statTypes">
-            <div class="statTypeText">
-              <span>
-                Strong Against
-              </span>
-            </div>
-          
-            <div class="statIconHolder">
-            ${strongTypesString==""?'None':strongTypesString}
+        <meter id="total" min="0" max="1530" low="500" high="720" optimum="1000" value="${speed + hp + attack + defense + spAttack + spDefense}"></meter>
       </div>
     </div>
   `;
 
-      })
-      
-    })
-
-    
-    // let weakTypes=[...pokemon[2].damage_relations.no_damage_to.map((type)=>{
-    //     return `<img src="./Icons/${type.name}.svg" alt="test images" class="${type.name} poke_type_bg"></img>`
-    // })]
-  
-    // var weakTypesString='';
-    // for(let i in weakTypes){
-    //   weakTypesString=weakTypesString+weakTypes[i];
-  
-    // }
-  
-    // let strongTypes=[...pokemon[2].damage_relations.double_damage_to.map((type)=>{
-    //   return `<img src="./Icons/${type.name}.svg" alt="test images" class="${type.name} poke_type_bg"></img>`
-    // })]
-
-    // var strongTypesString='';
-    // for(let i in strongTypes){
-    //   strongTypesString=strongTypesString+strongTypes[i];
-    // }
-
-    // let tab2 = document.getElementById("tab_2");
-    // tab2.innerHTML = `
-    // <div class="stats">
-    // <div class="stat">
-    // <div>
-    // <span> Health:</span>
-    // <span>${hp}</span>
-    // </div>
-    //   <meter id="hp"
-    //   style="content: 'HP';"
-    //      min="0" max="255"
-    //      low="70" high="120" optimum="150"
-    //      value="${hp}">
-    // </meter>
-    // </div>
-  
-  
-    //   <div class="stat">
-    //   <div>
-    // <span> Attack:</span>
-    // <span>${attack}</span>
-    // </div>
-    //   <meter id="attack"
-    //       min="0" max="255"
-    //       low="70" high="120" optimum="150"
-    //       value="${attack}">
-    // </meter>
-    // </div>
-  
-  
-  
-    //   <div class="stat">
-    //   <div>
-    // <span> Defense:</span>
-    // <span>${defense}</span>
-    // </div>
-    //   <meter id="defense"
-    //       min="0" max="255"
-    //       low="70" high="120" optimum="150"
-    //       value="${defense}">
-    // </meter>
-    // </div>
-  
-  
-  
-    //     <div class="stat">
-    //   <div>
-    // <span> Sp. Atk:</span>
-    // <span>${spAttack}</span>
-    // </div>
-    //   <meter id="spattack"
-    //       min="0" max="255"
-    //       low="70" high="120" optimum="150"
-    //       value="${spAttack}">
-    // </meter>
-    // </div>
-  
-  
-    //     <div class="stat">
-    //   <div>
-    // <span> Sp. Def:</span>
-    // <span>${spDefense}</span>
-    // </div>
-    //   <meter id="spdefense"
-    //       min="0" max="255"
-    //       low="70" high="120" optimum="150"
-    //       value="${spDefense}">
-    // </meter>
-    // </div>
-  
-  
-  
-    //   <div class="stat">
-    //   <div>
-    // <span>Speed:</span>
-    // <span>${speed}</span>
-    // </div>
-    //   <meter id="speed"
-    //       min="0" max="255"
-    //       low="70" high="120" optimum="150"
-    //       value="${speed}">
-    // </meter>
-    // </div>
-  
-                              
-    //     <div class="stat">
-    //     <div>
-    // <span> Total:</span>
-    // <span>${speed + hp + attack + defense + spAttack + spDefense}</span>
-    // </div>
-    //   <meter id="total"
-    //       min="0" max="1530"
-    //       low="500" high="720" optimum="1000"
-    //       value="${speed + hp + attack + defense + spAttack + spDefense}">
-    // </meter>
-    // </div>
-    //   <div class="statTypes">
-    //     <div class="statTypeText">
-    //       <div>
-    //         Weak Against
-    //       </div>
-          
-    //     </div>
-        
-    //       <div class="statIconHolder">
-    //         ${weakTypesString==""?'None':weakTypesString}
-            
-    //      </div> 
-    //   </div>
-    //   <div class="statTypes">
-    //     <div class="statTypeText">
-    //       <span>
-    //         Strong Against
-    //       </span>
-    //     </div>
-      
-    //     <div class="statIconHolder">
-    //      ${strongTypesString==""?'None':strongTypesString}
-    //    </div>
-    //   </div>
-    // `;
-
-
-
-
-  }
-  else{
-    console.log(pokemon[2])
-  }
-
-
-
-
   let pokemonDetailsEl = document.getElementById("pokemon-details");
   pokemonDetailsEl.innerHTML = `
     <div class="btn">
@@ -551,42 +114,18 @@ const displayPokemonDetails = async (pokemon) => {
     <div class="names">
       <div class="japaneseName">${japaneseName}</div>
       <div class="name">${name}</div>
-        
     </div>
     <div class="top">
       <div class="image">
-        <img class="imgFront" src="${
-          imageSrc == null ? imageSrc2 : imageSrc
-        }" alt="${name}">
+        <img class="imgFront" src="${imageSrc}" alt="${name}">
         <img class="imgBack" src="./Icons/default/pokeball.svg" alt="pokeball">
       </div>
-
     </div>
-
   `;
 
-  const desiredLanguage = "en";
-  let overview = "Sorry, no description available.";
-  let genus = "Sorry, no description available.";
-
-  for (const entry of pokemon[1].flavor_text_entries) {
-    if (entry.language.name === desiredLanguage) {
-      // Replace "\f" with a space in the flavor text
-      overview = entry.flavor_text.replace("\f", " ");
-      break; // Stop the loop once we find the English flavor text
-    }
-  }
-  for (const entry of pokemon[1].genera) {
-    if (entry.language.name === desiredLanguage) {
-      genus = entry.genus;
-      break;
-    }
-  }
-
-  const height = pokemon[0].height / 10 + "m";
-  const weight = pokemon[0].weight / 10 + "kg";
-
-  const genderRate = pokemon[1].gender_rate;
+  const height = pokemon.height / 10 + "m";
+  const weight = pokemon.weight / 10 + "kg";
+  const genderRate = pokemon.gender_rate;
   let male = "";
   let female = "";
   if (genderRate === -1) {
@@ -602,50 +141,38 @@ const displayPokemonDetails = async (pokemon) => {
     female = (genderRate / 8) * 100 + "%";
     male = 100 - (genderRate / 8) * 100 + "%";
   }
-  const friendship = pokemon[1].base_happiness;
-  const catchRate = pokemon[1].capture_rate;
+  const friendship = pokemon.base_happiness;
+  const catchRate = pokemon.capture_rate;
 
   let tab1 = document.getElementById("tab_1");
   tab1.innerHTML = `
     <div>
       <div class="overview">
-  <p><span class="genus">${genus}</span><br>${overview}</p>
+        <p><span class="genus">${pokemon.genus}</span><br>${pokemon.flavor_text}</p>
         <div class="heightWeight">
           <span>Height:<br><b>${height}</b></span>
           <span>Weight:<br><b>${weight}</b></span>
         </div>
-
         <div class="types">
-  ${poke_types
-    .map(
-      (type) => `
+          ${poke_types.map(type => `
             <div class="poke__type__bg ${type}">
               <img src="Icons/${type}.svg" alt="Type">
             </div>
-  `
-    )
-    .join("")}
+          `).join("")}
         </div>
       </div>
-
       <div class="about">
         <div>Id: <b class="id">#${id}</b></div>
         <div>Gender: <b><i class="fa-solid fa-mars" style="color: #1f71ff;"></i>${male}  <i class="fa-solid fa-venus" style="color: #ff5c74;"></i>${female}</b></div>
         <span>Abilities: <b>${abilities.join(", ")}</b></span>
-  <span>Catch Rate: <b>${catchRate} (${((catchRate / 255) * 100).toFixed(
-    2
-  )}% chance)</b></span>
-  <span>Base Friendship: <b>${friendship} (${
-    friendship < 50 ? "lower" : friendship < 100 ? "normal" : "higher"
-  })</b></span>
-  <span>Base Exp: <b>${pokemon[0].base_experience}</b></span>
-  <span>Growth Rate: <b>${pokemon[1].growth_rate.name}</b></span>
+        <span>Catch Rate: <b>${catchRate} (${((catchRate / 255) * 100).toFixed(2)}% chance)</b></span>
+        <span>Base Friendship: <b>${friendship} (${friendship < 50 ? "lower" : friendship < 100 ? "normal" : "higher"})</b></span>
+        <span>Base Exp: <b>${pokemon.base_experience}</b></span>
+        <span>Growth Rate: <b>${pokemon.growth_rate}</b></span>
         <span>Egg Groups: <b>${eggGroups.join(", ")}</b></span>
-
       </div>
-        
-
-`;
+    </div>
+  `;
 };
 
 const tabs = document.querySelectorAll("[data-tab-value]");

pokedex/style.css

@@ -463,9 +463,6 @@ a {
 #regionSelect::-webkit-scrollbar {
   display: none;
 }
-#regionSelect::-moz-scrollbar {
-  display: none;
-}
 
 #regionSelect span {
   background-color: rgba(46, 46, 46, 0.1);
@@ -605,7 +602,7 @@ a {
 .dark-mode #regionSelect span {
   border: 1px solid #ccc; 
 }
-relative
+
 .dark-mode #regionSelect span:hover{
   color: black;
   background-color: #ead51d;