Pokemone Search App

Code Feedback
1

Website
Github

Hello. I would like some feedback on my JavaScript. If you have any thoughts on how I could improve it visually, please share them. Thanks in advance.

const searchInput = document.getElementById("search-input");
const searchBtn = document.getElementById("search-button");
const nameEl = document.getElementById("pokemon-name");
const idEl = document.getElementById("pokemon-id");
const weightEl = document.getElementById("weight");
const heightEl = document.getElementById("height");

function searchPk(search) {
  const regex = /[~!@#$%^&*()_+`\[\];'\,.\/{}:"|<>?\s]/g;
  search = search.replace(regex, "").toLowerCase();
  const url = "https://pokeapi-proxy.freecodecamp.rocks/api/pokemon/" + search;

  const fetchData = async () => {
    try {
      const res = await fetch(url);
      const data = await res.json();
      showData(data);
    } catch (err) {
      alert("Pokémon not found");
    }
  };
  fetchData();
}

function showData(obj) {
  const { name, id, weight, height, stats, types, sprites } = obj;
  const capitalizedName = name.charAt(0).toUpperCase() + name.slice(1);
  const imgEl = `<img id="sprite" src ="${sprites.front_default}">`;
  document.getElementById("types").innerHTML = "";
  document.getElementById("img-container").innerHTML = imgEl;
  nameEl.innerText = capitalizedName;
  idEl.innerText = `#${id}`;
  weightEl.innerText = weight;
  heightEl.innerText = height;
  for (let data of stats) {
    const { base_stat, stat } = data;
    const { name } = stat;
    document.getElementById(name).innerText = base_stat;
  }
  for (let data of types) {
    const { type } = data;
    document.getElementById("types").innerHTML += `<p>${type.name}</p>`;
  }
}

searchInput.addEventListener("change", () => {
  searchPk(searchInput.value);
});

searchBtn.addEventListener("click", () => {
  searchPk(searchInput.value);
});
2

Hi @Arlen

Great looking app.

How about using the Pokémon colour palette theme for the card background?

For part of the text, use Pokémon fonts.

The regex can be simplified - the valid input is either numbers or letters.

Also, if an invalid input is entered, two alerts appear.

Happy coding

2 Likes
3

I actually had the same idea. I stole the color palette for pokedex. It doesn’t look as I hoped it would be though.
venonat-pokemon

Like this?

const regex = /[a-z\-0-9]*/g;
  search = search
    .split("")
    .filter((letter) => letter.match(regex))
    .join("")
    .toLowerCase();

It’s probably cause by “change” event listener. I change it to this searchInput.addEventListener("keypress", (e) => { if (e.key === "Enter") { searchPk(searchInput.value); } });
I’m not sure why the “change” listener was behaving that way. Does clicking the button trigger the "change " as well?