Build a Pokémon Search App Project - Build a Pokémon Search App

[uv252003]

Tell us what’s happening:

I have created a div element to nest img element each time the search btn is pressed div element is formatted and new img element are created the application is working perfectly in the preview but all the conditions associated with the img element are not met what could be possible reason please help me out

Your code so far

const btn = document.getElementById("search-button");
const nam = document.getElementById("pokemon-name");
const pid = document.getElementById("pokemon-id");
const weight = document.getElementById("weight");
const height = document.getElementById("height");
const type = document.getElementById("types");
const hp = document.getElementById("hp");
const attack = document.getElementById("attack");
const defense = document.getElementById("defense");
const sattack = document.getElementById("special-attack");
const sdefense = document.getElementById("special-defense");
const speed = document.getElementById("speed");
const prite=(sprit)=>sprit?`<img id="sprite" src="${sprit}"></img>`:"";
const prop=(data)=>{

  nam.innerText=data.name;
  pid.innerText=data.id;
  weight.innerText=data.weight;
  height.innerText=data.height;
  type.innerText="";
  for(let i=0;i<data.types.length;i++)
  type.innerText+=data.types[i].type.name.toUpperCase();
  hp.innerText=data.stats[0].base_stat;
  attack.innerText=data.stats[1].base_stat;
  defense.innerText=data.stats[2].base_stat;
  sattack.innerText=data.stats[3].base_stat;
  sdefense.innerText=data.stats[4].base_stat;
  speed.innerText=data.stats[5].base_stat;
  document.getElementById("page").innerText="";
  document.getElementById("page").innerHTML=`
  ${prite(data.sprites.back_default)}
  ${prite(data.sprites.back_shiny)}
  ${prite(data.sprites.back_default_female)}
  ${prite(data.sprites.back_shiny_female)}
  ${prite(data.sprites.front_default)}
  ${prite(data.sprites.front_shiny)}
  ${prite(data.sprites.front_default_female)}
  ${prite(data.sprites.front_shiny_female)}
  `
}
const search=()=>{
  let input=document.getElementById("search-input").value.trim();
  if(/^[A-Za-z]+$/.test(input)){
    const str=input.toLowerCase();
    fetch(`https://pokeapi-proxy.freecodecamp.rocks/api/pokemon/${str}`)
  .then((res) => res.json())
  .then(data=>prop(data)).catch(()=>alert("Pokemon not found"))
  return;
  }else if(/^[0-9]+$/.test(input)){
    fetch(`https://pokeapi-proxy.freecodecamp.rocks/api/pokemon/${input}`)
  .then((res) => res.json())
  .then(data=>prop(data)).catch(()=>alert("Pokemon not found"))
  }else{
    alert("Pokemon not found")
  }
}
btn.addEventListener("click",search)

Challenge Information:

Build a Pokémon Search App Project - Build a Pokémon Search App

freeCodeCamp.org

[ILM]

you will need to show all your code (html and css included) to allow for debugging

[uv252003]

Post with complete code

[ILM]

please share your html here

When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

[manubrs]

I have an exmple to build a pokemon search app. Building a Pokémon Search App is a great way to practice web development skills. Below is a basic example of how you can create such an app using HTML, CSS, and JavaScript. This example allows users to search for a Pokémon by name or ID and displays relevant information.

You can try this code.

code removed by moderator

Here is the detailed explation of code:
Explanation:

• HTML: Sets up the structure of the app, including an input field for the Pokémon name or ID, a search button, and elements to display the Pokémon’s information.
• CSS: Provides basic styling to center the content and style the input, button, and information display.
• JavaScript: Adds an event listener to the search button. When clicked, it fetches data from the PokéAPI based on the user’s input. If the Pokémon is found, it displays the information; otherwise, it shows an error message.

[ILM]

Do not write code for people, this is a certification project and so it is against the Academic Honesty Pledge

It is great that you solved the challenge, but instead of posting your full working solution, it is best to stay focused on answering the original poster’s question(s) and help guide them with hints and suggestions to solve their own issues with the challenge. How to Help Someone with Their Code Using the Socratic Method

We are trying to cut back on the number of spoiler solutions found on the forum and instead focus on helping other campers with their questions and definitely not posting full working solutions.

[uv252003]

<!-- file: index.html -->
<!DOCTYPE html>
<html>
  <head>
    <link type="stylesheet" href="styles.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pokemon Search App</title>
  </head>
  <body>
    <main>
      <input type="text" id="search-input" required></input>
      <button id="search-button">Search</button>
      <div id="pokemon-name"></div>
      <div id="pokemon-id"></div>
      <div id="weight"></div>
      <div id="height"></div>
      <div id="types"></div>
      <div id="hp"></div>
      <div id="attack"></div>
      <div id="defense"></div>
      <div id="special-attack"></div>
      <div id="special-defense"></div>
      <div id="speed"></div>
      <div id="page"></div>
    </main>
    <script src="script.js"></script>
  </body>
</html>

[ILM]

the #types element should contain a single inner element with the value ELECTRIC.

You are not adding an element inside #types

you have many elements with the id of sptrite, you can’t have multiple elements with the same id in html

[rkalo]

1. Your practice of declaring all of the characteristic labels for the different stat categories, it’s legal Javascript but people will still give you marks against doing this, because destructuring ( “const [ height, weight, whatever, whatever1, whatever5 ] = your_object” ) is what people who know what destructuring is do, and the course tries to teach this; moving forward continuing to do this is going to show people you don’t know what destructuring is. If those properties are present in the nesting level of that object they will be assigned appropriately. Same thing goes for accessing properties of for example, object[key1][key2ofkey1][key3ofkey2ofkey1] and the properties that may or may not exist there. if they don’t exist they should only be giving you undefined assignments.
2. Don’t format your written code like you are doing. The point of software documents is so that people other than you can quickly read what you’re thinking & driving at. And it is currently hard to read because you aren’t creating new lines at the beginning of every callback response.
3. Also I don’t think you’re actually running any code when you write this function as it is because lexical arrow functuons (const = () =>) are returned when you assign them to a new variable and you’re treating them as if they are a function declaration (that follows function(){} syntax)

[ILM]

@rkalo

it is because lexical arrow functuons (const = () =>) are returned when you assign them to a new variable and you’re treating them as if they are a function declaration

I have no idea what you mean with this, but also it doesn’t seem accurate
arrow functions can work perfectly fine

[uv252003]

Thank you man i add all sprite properties unnecessarly without looking at conditions properly now its done