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

My problem :

I dont understand why my code is not valid, everything work its exactly the same result that the instructions aks but i still have the 4 last errors.
If someone can please help me because i really dont understand where is the prob :smiling_face_with_tear:.

  1. When the #search-input element contains the value Pikachu and the #search-button element is clicked, the #types element should contain a single inner element with the value ELECTRIC

  2. When the #search-input element contains the value 94 and the #search-button element is clicked, the values in the #pokemon-name, #pokemon-id, #weight, #height, #hp, #attack, #defense, #special-attack, and #special-defense elements should be GENGAR, #94 or 94, Weight: 405 or 405, Height: 15 or 15, 60, 65, 60, 130, 75, and 110, respectively

  3. 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

  4. When the #search-input element contains the value 94 and the #search-button element is clicked, the #types element should contain a two inner element with the text values GHOST and POISON, respectively

My code :

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./style.css">
  <title>Pokémon Search App Bryan</title>
</head>
<body class="bg-[#1c0e67] h-screen w-screen relative">
  <div class="absolute text-white top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
    <h1 class="text-2xl font-bold mb-4">Projet : Pokémon Search App</h1>
    <h2 class="text-xl font-medium mb-5 text-[#9088fd]">Bryan Cellier</h2>
    <div class= "max-w-[500px] border p-4 rounded-lg">
      <h3 class="mb-6">Ecrivez le nom d'un pokémon en anglais pour l'afficher.</h3>
      <div class="flex mb-6 gap-2">
        <input class="px-2 py-2 bg-[#1c0e67] border-b-2 w-96" id="search-input" required/>
        <button class="py-2 px-4 bg-[#6a58fa] rounded-xl w-25" id ="search-button">Rechercher</button>
      </div>
      <div id="result">
        <div class="flex gap-1 mb-2">
          <h3 id="pokemon-name" class="text-lg font-medium text-white"><!-- Pokémon Name --></h3>
          <h3 id="pokemon-id" class="text-lg font-medium text-white"><!-- #Id --></h3>
        </div>
        <div class="flex gap-1 mb-2">
          <p id="weight"><!-- Weight --></p>
          <p id="height"><!-- Height --></p>
        </div> 
        <div id="imgInside" class="mb-2">
          <!-- Image -->
        </div>
        <div id="types" class="flex gap-1">
          <!-- Type -->
        </div>
      </div>

      <table class="table-auto text-white w-full bg-[#6a58fa] divide-y divide-[#fff] mt-6">
        <thead>
          <tr>
            <th class="font-medium border-r-2">Base</th>
            <th class="font-medium">Stats</th>
          </tr>
        </thead>
        <tbody id="tableBody" class="divide-y divide-[#fff]">
          <tr class="">
            <td class="text-center border-r-2">HP:</td>
            <td id="hp" class="text-center"> <!-- HP --></td>
          </tr>
          <tr class="">
            <td class="text-center border-r-2">Attack:</td>
            <td id="attack" class="text-center"> <!-- Attack --></td>
          </tr>
          <tr class="">
            <td class="text-center border-r-2">Defense:</td>
            <td id="defense" class="text-center"> <!-- Defense --></td>
          </tr>
          <tr class="">
            <td class="text-center border-r-2">Sp. Attack:</td>
            <td id="special-attack" class="text-center"> <!-- Sp. Attack --></td>
          </tr>
          <tr class="">
            <td class="text-center border-r-2">Sp. Defense:</td>
            <td id="special-defense" class="text-center"> <!-- Sp. Defense --></td>
          </tr>
          <tr class="">
            <td class="text-center border-r-2">Speed:</td>
            <td id="speed" class="text-center"> <!-- Speed --></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

  <script src="https://cdn.tailwindcss.com"></script>
  <script src="./script.js"></script>
</body>
</html>
//Variables
const putImg = document.getElementById('imgInside')
const searchPokemon = document.getElementById('search-input')
const searchBtn = document.getElementById('search-button')
const tableBody = document.getElementById('tableBody')
const pokemonName = document.getElementById('pokemon-name')
const pokemonId = document.getElementById('pokemon-id')
const weight = document.getElementById('weight')
const height = document.getElementById('height')
const types = document.getElementById('types')
const hp = document.getElementById('hp')
const attack = document.getElementById('attack')
const defense = document.getElementById('defense')
const specialAtt = document.getElementById('special-attack')
const specialDef = document.getElementById('special-defense')
const speed = document.getElementById('speed')
const pokemonList = 'https://pokeapi-proxy.freecodecamp.rocks/api/pokemon'
let pokemonDatas = 'https://pokeapi-proxy.freecodecamp.rocks/api/pokemon/'

//Functions
const fetchListOfPokemon = async (pokemon) => {
  try {
    const res = await fetch(pokemonList)
    const data = await res.json()
    showListOfPokemon(data,pokemon)
  }catch(err){
    console.log(err)
  }
}
const fetchPokemon = async (pokemonLink) => {
  try{
    const res = await fetch(pokemonLink)
    const data = await res.json()

    data.types.forEach(item => {
      const span = document.createElement('span'); 
      span.className = 'bg-[#6a58fa] px-4 py-2 rounded text-xs'; 
      span.textContent = item.type.name.toUpperCase(); 
      types.appendChild(span);
    });

    pokemonId.textContent = `#${data.id}`
    pokemonName.textContent = data.name.toUpperCase()
    weight.textContent = `Weight: ${data.weight}`
    height.textContent = `Height: ${data.height}`
    putImg.innerHTML = `<img id="sprite" src="${data.sprites.front_default}"/>`
    hp.textContent = data.stats[0].base_stat
    attack.textContent = data.stats[1].base_stat
    defense.textContent = data.stats[2].base_stat
    specialAtt.textContent = data.stats[3].base_stat
    specialDef.textContent = data.stats[4].base_stat
    speed.textContent = data.stats[5].base_stat
  }catch(err){
    console.log(err)
  }
}

const showPokemon = (data,pokemon) => {
  let pokemonWanted = {}
  if(typeof pokemon === 'number')
  {
    if(data.results.find((item) => item.id === pokemon) !== undefined){
      pokemonWanted = data.results.find((item) => item.id === pokemon)
    }else{
      return alert('Pokémon not found')
    }
    pokemonDatas += pokemonWanted.id
  }else{
    if(data.results.find((item) => item.name === pokemon) !== undefined){
      pokemonWanted = data.results.find((item) => item.name === pokemon)
    }else{
    return alert('Pokémon not found')
    }
    pokemonDatas += pokemonWanted.name
  }
  fetchPokemon(pokemonDatas)
}

const showListOfPokemon = (data,pokemon) => {
  const {id, name, url} = data
  showPokemon(data,pokemon)
}


//Processing
searchBtn.addEventListener("click", () => {
  const pokemon = searchPokemon.value.toLowerCase()
  const pokemonConverted = !isNaN(pokemon) ? Number(pokemon) : pokemon
  fetchListOfPokemon(pokemonConverted)
})

Challenge Information:

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

Have you tried running this without tailwind, I noticed your missing a letter in your css link but I guess that doesn’t matter.

Yes even without tailwind its still the same :confused:

for me test case 17 seems to be passing…

18 and 19 seems to be also in order…

20 i noticed when “clearing out” search input text, previous search result remains!! and instructions here asks of you to change that, lets refer to that from instructions

Make sure the #type element content is cleared between searches

happy coding :slight_smile:

1 Like