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

JavaScript
1

It works on my localhost, but when i want to run it on freeCodeCamp’s sandbox, i got this error:

Failed: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, and #special-defense elements should be PIKACHU, #25 or 25, Weight: 60 or 60, Height: 4 or 4, 35, 55, 40, 50, 50, and 90, respectively."

My code so far

const search = document.getElementById("search-input")
const searchButton = document.getElementById("search-button")
const name = document.getElementById("pokemon-name")
const id = 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 specialAtk = document.getElementById("special-attack")
const specialDef = document.getElementById("special-defense")
const speed = document.getElementById("speed")

const URL = `https://pokeapi-proxy.freecodecamp.rocks/api/pokemon/`

async function fetchData () {
  try {
    const userInput = search.value.toLowerCase()
    const response = await fetch(`${URL}${userInput}`)
    if(!response.ok) {
      alert('Pokémon not found')
      throw new Error(`couldn't fetch data`)
    }
    const data = await response.json()
    return data
  }
  catch(error) {
    console.error('Error al obtener los datos:', error);
  }
}

function assign(pokemon) {
  name.textContent = pokemon.name
  id.textContent = pokemon.id
  weight.textContent = pokemon.weight
  height.textContent = pokemon.height
  hp.textContent = pokemon.stats[0].base_stat
  attack.textContent = pokemon.stats[1].base_stat
  defense.textContent = pokemon.stats[2].base_stat
  specialAtk.textContent = pokemon.stats[3].base_stat
  specialDef.textContent = pokemon.stats[4].base_stat
  speed.textContent = pokemon.stats[5].base_stat

  let nTypes = pokemon.types.map(element => element.type.name).join(' ')
  if (types) {
    types.textContent = nTypes
  }
}

function spawnImg(data) {
  let pic = document.createElement('img');
  pic.src = data.sprites.front_default
  pic.id = 'sprite'
  document.body.appendChild(pic)
}

function seek () {
  let pokemon
  fetchData()
    .then((data) => {
      console.log(data);
      assign(data)
      spawnImg(data)
    })
    .catch((error) => {
      console.error('Error general:', error);
    })
}

searchButton.addEventListener("click", seek)


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Pokedex</title>
</head>
<body>
  <input id='search-input' type='text' autocomplete="none" required />
  <button id="search-button">Seek</button>
  <p id="pokemon-id"></p>
  <p id="pokemon-name"></p>
  <p id="types"></p>
  <p id="weight"></p>
  <p id="height"></p>
  <p id="hp"></p>
  <p id="attack"></p>
  <p id="defense"></p>
  <p id="special-attack"></p>
  <p id="special-defense"></p>
  <p id="speed"></p>
  <script src="script.js"></script>
</body>
</html>

This article seems to be useful, but i can’t understand what he specifically want me to do when he says " move the id element out of the name element" .
Maybe because i’m not good at all speaking english? Dunno… Becoming insane!

Your browser information:

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

Challenge Information:

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

2

I ran this with only your HTML and not much difference on the checklist. It just might be a test case issue. As far as removing an element I couldnt find a name element and/or a id element, it lead me to this article.

1 Like
4

Fixed:

const search = document.getElementById("search-input")
const searchButton = document.getElementById("search-button")
const pokename = document.getElementById("pokemon-name")
const id = document.getElementById("pokemon-id")
const weight = document.getElementById("weight")
const height = document.getElementById("height")
const poketypes = document.getElementById("types")
const hp = document.getElementById("hp")
const attack = document.getElementById("attack")
const defense = document.getElementById("defense")
const specialAtk = document.getElementById("special-attack")
const specialDef = document.getElementById("special-defense")
const speed = document.getElementById("speed")
const sprite = document.getElementById("sprite")
const URL = `https://pokeapi-proxy.freecodecamp.rocks/api/pokemon/`

function seek () {
  fetchData()
    .then((data) => {
      console.log(data);
      assign(data)
    })
    .catch((error) => {
      console.error('Error general:', error);
    })
}

async function fetchData () {
  try {
    const userInput = search.value.toLowerCase()
    const response = await fetch(`${URL}${userInput}`)
    if(!response.ok) {
      alert('Pokémon not found')
      throw new Error(`couldn't fetch data`)
    }
    const data = await response.json()
    return data
  }
  catch(error) {
    console.error('Error al obtener los datos:', error);
  }
}

function assign(pokemon) {
  const nTypes = pokemon.types.map((element) => element.type.name )
  nTypes.forEach((e) => {
    const span = document.createElement('span');
    span.textContent = e.toUpperCase();
    poketypes.appendChild(span);
  });
  pokename.textContent = pokemon.name.toUpperCase()
  id.textContent = pokemon.id
  weight.textContent = pokemon.weight
  height.textContent = pokemon.height
  hp.textContent = pokemon.stats[0].base_stat
  attack.textContent = pokemon.stats[1].base_stat
  defense.textContent = pokemon.stats[2].base_stat
  specialAtk.textContent = pokemon.stats[3].base_stat
  specialDef.textContent = pokemon.stats[4].base_stat
  speed.textContent = pokemon.stats[5].base_stat
  sprite.src = pokemon.sprites.front_default;

}

searchButton.addEventListener("click", seek)
5

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