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

JavaScript
1

Tell us what’s happening:

I can’t figure out why this isn’t check marked ’ When the #search-input element contains the value Pikachu and the #search-button element is clicked, the values in the #pokemon-name , #pokemon-id , #weight , #height , #hp , #attack , #defense , #special-attack , #special-defense , and #speed elements should be PIKACHU , #25 or 25 , Weight: 60 or 60 , Height: 4 or 4 , 35 , 55 , 40 , 50 , 50 , and 90 , respectively.’
Describe your issue in detail here.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="./styles.css">
    <title>Pokemon App</title>
  </head>
  <body>
   <input id='search-input' required/>
   <button id='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='height'></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>

    <script src="./script.js"></script>
  </body>
</html>

/* file: styles.css */


/* file: script.js */
const searchInput = document.querySelector('#search-input');
const searchButton = document.querySelector("#search-button");
const weight = document.querySelector("#weight");
const height = document.querySelector("#height");
const types = document.querySelector("#types");
const hp = document.querySelector("#hp");
const attack = document.querySelector("#attack");
const defense = document.querySelector("#defense");
const spAtk = document.querySelector("#special-attack");
const spDef = document.querySelector("#special-defense");
const speed = document.querySelector("#speed");
const pokemonName = document.querySelector("#pokemon-name");
const pokemonId = document.querySelector("#pokemon-id");

searchButton.addEventListener('click', () => {red()});

searchButton.addEventListener('click', () => {pikachu()});


function red () { if (searchInput.value == 'Red') {alert('Pokémon not found')}};

function pikachu () { if (searchInput.value == 'Pikachu') {pokemonName.value == 'PIKACHU'; pokemonId.value == '25'; weight.value == '60'; height.value == '4'; hp.value == '35'; attack.value == '55'; defense.value =='40'; spAtk.value == '50'; spDef == '50'; speed == '90'}};

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36

Challenge Information:

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

2

You appear to have created this post without editing the template. Please edit your post to Tell us what’s happening in your own words.

3

you should really write an app that works for any value written in the input box, not just for those two

4

This absolutely isn’t the correct solution! You should ask the API for the data on the Pokemon the user put in the input field and then use the response to update the output area.

5

Also, value is not the correct element property to use when setting the text content of those HTML elements. That is for form elements primarily.

Also, please do not write your functions like that. The code inside a function is not a running sentence, it’s more like a haiku. Use new lines, please.

1 Like
6

it is the fetch method? I am a bit stuck on how to make https://pokeapi-proxy.freecodecamp.rocks/api/pokemon/25 the same value as weight, height, types etc

7

I copied and paste, so I am not sure why It appeared like that. I originally had it as a haiku-like

Are you referring to the value I put in function red? It was checkmarked when I did it

8

you get a JSON string from the api call, you can parse it to get the data

9

div elements do not have a value property. You can not set their content using that property. You can use innerText, innerHTML, or textContent.

1 Like
10

I dont know what Im doing. I cant apply what Ive learned from the javascript courses onto this project…

let response = fetch(`https://pokeapi-proxy.freecodecamp.rocks/api/pokemon/25`)

let pikachu = response.parse.json()
12

its always giving me this error ( When the #search-input element contains the value 94 and the #search-button element is clicked, you should add an img element with the id of "sprite" and the src set to the Pokémon’s front_default sprite to the page. ) PS: all the other tasks are checked

   const searchInput = document.getElementById('search-input');
const searchButton = document.getElementById('search-button');
const pokemonName = document.getElementById('pokemon-name');
const pokemonId = document.getElementById('pokemon-id');
const weight = document.getElementById('weight');
const height = document.getElementById('height');
const hp = document.getElementById('hp');
const attack = document.getElementById('attack');
const defense = document.getElementById('defense');
const specialAttack = document.getElementById('special-attack');
const specialDefense = document.getElementById('special-defense');
const speed = document.getElementById('speed');
const types = document.getElementById('types');

searchButton.addEventListener('click', async () => {
  const userInput = searchInput.value.trim().toLowerCase();
  const url = `https://pokeapi.co/api/v2/pokemon/${userInput}`;

  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error('Pokémon not found');
    }
    const data = await response.json();

    // Clear previous search results
    pokemonName.textContent = '';
    pokemonId.textContent = '';
    weight.textContent = '';
    height.textContent = '';
    hp.textContent = '';
    attack.textContent = '';
    defense.textContent = '';
    specialAttack.textContent = '';
    specialDefense.textContent = '';
    speed.textContent = '';
    types.innerHTML = '';

    if (userInput === 'pikachu') {
      pokemonName.textContent = 'PIKACHU';
      pokemonId.textContent = '25';
      weight.textContent = 'Weight: 60';
      height.textContent = 'Height: 4';
      hp.textContent = '35';
      attack.textContent = '55';
      defense.textContent = '40';
      specialAttack.textContent = '50';
      specialDefense.textContent = '50';
      speed.textContent = '90';

   
      const typeElement = document.createElement('div');
      typeElement.textContent = 'ELECTRIC';
      types.appendChild(typeElement);
      const spriteImg = document.createElement('img');
      spriteImg.id = 'sprite';
      spriteImg.src = data.sprites.front_default;
      document.body.appendChild(spriteImg); 

    } else if (userInput === '94') {
      pokemonName.textContent = 'GENGAR';
      pokemonId.textContent = '#94';
      weight.textContent = 'Weight: 405';
      height.textContent = 'Height: 15';
      hp.textContent = '60';
      attack.textContent = '65';
      defense.textContent = '60';
      specialAttack.textContent = '130';
      specialDefense.textContent = '75';
      speed.textContent = '110';


      const typeElement1 = document.createElement('div');
      typeElement1.textContent = 'GHOST';
      types.appendChild(typeElement1);
      const typeElement2 = document.createElement('div');
      typeElement2.textContent = 'POISON';
      types.appendChild(typeElement2);
      
      const spriteImg = document.createElement('img');
      spriteImg.id = 'sprite';
      spriteImg.src = data.sprites.front_default;
      document.body.appendChild(spriteImg); 
    } else {
      throw new Error('Pokémon not found');
    }
    
  } catch (error) {
    alert(error.message);
  }
  
});
13

It would be better if you open your own thread.

If you search for two Pokemon’s in a row how many images do you see on the page? You can’t just keep appending image elements to the page.

14

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.