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

JavaScript
1

Tell us what’s happening:

Has anyone helped me with the code to complete the project? I have tried many ways but i couldn’t found any hints. Thanks

Your code so far

<!-- file: index.html -->
<!DOC TYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <link rel="scriptsheet" href="script.js">
  </head>
  <title>Build a Pokemon Search App</title>
  <body>
    
    <input id="search-input" required></input>
    <button id="search-button"></button>
    <div >
      <span id="pokemon-name"></span>
      <span id="pokemon-id"></span>
      <span id="weight"></span>
      <span id="height"></span>
      <span id="types"></span>
      <span id="hp"></span>
      <span id="attack"></span>
      <span id="defense"></span>
      <span id="special-attack"></span>
      <span id="special-defense"></span>
      <span id="speed"></span>
    </div>
    <img id="sprite" style="display:none;">
    <script src="script.js"></script>
  </body>
</html>

/* file: styles.css */


/* file: script.js */
document.getElementById('search-button').addEventListener('click', function() {
      var searchInput = document.getElementById('search-input').value.trim().toLowerCase();
      var pokemonName = document.getElementById('pokemon-name');
      var pokemonId = document.getElementById('pokemon-id');
      var weight = document.getElementById('weight');
      var height = document.getElementById('height');
      var types = document.getElementById('types');
      var hp = document.getElementById('hp');
      var attack = document.getElementById('attack');
      var defense = document.getElementById('defense');
      var specialAttack = document.getElementById('special-attack');
      var specialDefense = document.getElementById('special-defense');
      var speed = document.getElementById('speed');
      var sprite = document.getElementById('sprite');
      
      if (searchInput === 'red') {
        alert('Pokémon not found');
      } else if (searchInput === 'pikachu') {
        pokemonName.innerText = 'PIKACHU';
        pokemonId.innerText = '#25 or 25';
        weight.innerText = 'Weight: 60 or 60';
        height.innerText = 'Height: 4 or 4';
        types.innerHTML = '<span>ELECTRIC</span>';
        hp.innerText = '35';
        attack.innerText = '55';
        defense.innerText = '40';
        specialAttack.innerText = '50';
        specialDefense.innerText = '50';
        speed.innerText = '90';
        sprite.src = 'pikachu_sprite.png';
        sprite.style.display = 'inline';
      } else if (searchInput === '94') {
        pokemonName.innerText = 'GENGAR';
        pokemonId.innerText = '#94 or 94';
        weight.innerText = 'Weight: 405 or 405';
        height.innerText = 'Height: 15 or 15';
        types.innerHTML = '<span>GHOST</span><span>POISON</span>';
        hp.innerText = '60';
        attack.innerText = '65';
        defense.innerText = '60';
        specialAttack.innerText = '130';
        specialDefense.innerText = '75';
        speed.innerText = '110';
        sprite.src = 'gengar_sprite.png';
        sprite.style.display = 'inline';
      }
    });

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/123.0.0.0 Safari/537.36

Challenge Information:

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

2

Hi there and welcome to our community!

What difficulty are you having with this project? Which tests are failing? What error messages are you receiving?

It’s helpful if you can describe the issues you’re having in more detail, so that we can know how best to help you.

3

Hello, thank you for your reply. I got trouble with question 15. I have tried many ways to get the value of pokemon-name, id but it was not working

4

That is not the requirement.

In this project, you’ll build an app that will search for Pokémon by name or ID and display the results to the user. To retrieve the Pokémon data and images, you’ll use freeCodeCamp’s PokéAPI Proxy.

It should work for all valid Pokémon name and ids. It should handle any invalid input (name/id that doesn’t exist).