Link to pokemon SearchApp
Good morning freeCodeCamp,
I am failing the test for the types:
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 . Make sure the #types element content is cleared between searches.
When the #search-input element contains the value 94 and the #search-button element is clicked, the #types element should contain two inner elements with the text values GHOST and POISON , respectively. Make sure the #types element content is cleared between searches.
Here is My code
let pkmnDataArr = []
const pokemonName = document.getElementById("pokemon-name")
const pokemonId = document.getElementById("pokemon-id")
const pokemonWeight = document.getElementById("weight")
const pokemonHP = document.getElementById("hp")
const pokemonAttack = document.getElementById("attack")
const pokemonDefence = document.getElementById("defense")
const pokemonSpA = document.getElementById("special-attack")
const pokemonSpD = document.getElementById("special-defense")
const pokemonSpeed = document.getElementById("speed")
const pokemonHeight = document.getElementById("height")
const pokemonTypes = document.querySelectorAll("#types")
const searchButton = document.getElementById("search-button")
const inputBox = document.getElementById("search-input")
const sprite = document.getElementById("sprite")
let resultUrl = ""
async function getData() {
const response = await fetch('https://pokeapi-proxy.freecodecamp.rocks/api/pokemon')
const data = await response.json()
pokemonTypes.innerText =""
if(Number.isInteger(parseInt(inputBox.value)) && data.results.find(pkmn => pkmn.id == inputBox.value)){
let pokemon = data.results.find(pkmn => pkmn.id == inputBox.value)
resultUrl = pokemon.url
const response2 = await fetch(resultUrl)
const data2 = await response2.json()
console.log(data2)
pokemonName.innerText = data2.name
pokemonId.innerText = data2.id
pokemonWeight.innerText = data2.weight
pokemonHP.innerText = data2["stats"][0]["base_stat"]
pokemonAttack.innerText = data2["stats"][1]["base_stat"]
pokemonDefence.innerText = data2["stats"][2]["base_stat"]
pokemonSpA.innerText = data2["stats"][3]["base_stat"]
pokemonSpD.innerText = data2["stats"][4]["base_stat"]
pokemonSpeed.innerText = data2["stats"][5]["base_stat"]
pokemonHeight.innerText = data2.height
sprite.src = data2.sprites["front_default"]
pokemonTypes[0].innerText = `${data2.types[0].type.name.toUpperCase()}`
pokemonTypes[1].innerText = data2.types[1].type.name ? `${data2.types[1].type.name.toUpperCase()}`: "";
}else if(typeof inputBox.value == "string" && data.results.find(pokemon => pokemon.name === inputBox.value.toLowerCase())){
let pokemon = data.results.find(pokemon => pokemon.name === inputBox.value.toLowerCase())
resultUrl = pokemon.url
const response2 = await fetch(resultUrl)
const data2 = await response2.json()
console.log(data2)
pokemonName.innerText = data2.name
pokemonId.innerText = data2.id
pokemonWeight.innerText = data2.weight
pokemonHP.innerText = data2["stats"][0]["base_stat"]
pokemonAttack.innerText = data2["stats"][1]["base_stat"]
pokemonDefence.innerText = data2["stats"][2]["base_stat"]
pokemonSpA.innerText = data2["stats"][3]["base_stat"]
pokemonSpD.innerText = data2["stats"][4]["base_stat"]
pokemonSpeed.innerText = data2["stats"][5]["base_stat"]
pokemonHeight.innerText = data2.height
sprite.src = data2.sprites["front_default"]
pokemonTypes[0].innerText = `${data2.types[0].type.name.toUpperCase()}`
pokemonTypes[1].innerText = data2.types[1].type.name ? `${data2.types[1].type.name.toUpperCase()}`: ""
}else{
alert("Pokemon not found")
}
}
const clear = () => {
pokemonTypes[0].innerText = ""
pokemonTypes[1].innerText = ""
}
searchButton.addEventListener("click", clear)
searchButton.addEventListener("click", getData)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="syles.css">
</head>
<body>
<input id="search-input" required />
<button id="search-button">search</button>
<img id="sprite">
<ul>
<li id="pokemon-name"></li>
<li id="pokemon-id"></li>
<li id="weight"></li>
<li id="height"></li>
<li id="types"></li>
<li id="types"></li>
<li id="hp"></li>
<li id="attack"></li>
<li id="defense"></li>
<li id="special-attack"></li>
<li id="special-defense"></li>
<li id="speed"></li>
</ul>
</body>
<script src="script.js">
</script>
</html>
At the bottom I created code to clear the text content before a search.
When the #search-input element contains a valid Pokemon id and the #search-button element is clicked, the UI should be filled with the correct data.
Any help is appreciated, thank you
I have not ran the code, but you should change the variables to something other than the same name as the getElementById entry. The main one I think is the use of sprite as a var and an Id.
Hi, I refactored my code, rewrote it and it still gives the same errors
const pokemonName = document.getElementById("pokemon-name")
const pokemonId = document.getElementById("pokemon-id")
const pokemonWeight = document.getElementById("weight")
const pokemonHP = document.getElementById("hp")
const pokemonAttack = document.getElementById("attack")
const pokemonDefence = document.getElementById("defense")
const pokemonSpA = document.getElementById("special-attack")
const pokemonSpD = document.getElementById("special-defense")
const pokemonSpeed = document.getElementById("speed")
const pokemonHeight = document.getElementById("height")
const pokemonTypes = document.querySelectorAll("#types")
const searchButton = document.getElementById("search-button")
const inputBox = document.getElementById("search-input")
const image = document.getElementById("sprite")
async function getData() {
try{
const response = await fetch(`https://pokeapi-proxy.freecodecamp.rocks/api/pokemon/${inputBox.value.toLowerCase()}`)
const data = await response.json()
const {name, id, weight, sprites, stats, types, height} = data
image.src = sprites.front_default
console.log(types[0].type.name)
pokemonTypes[0].innerText = types[0].type.name.toUpperCase()
pokemonTypes[1].innerText = types[1] ? types[1].type.name.toUpperCase(): "";
pokemonName.innerText = name
pokemonId.innerText = id
pokemonWeight.innerText = weight
pokemonHeight.innerText = height
pokemonHP.innerText = stats[0].base_stat
pokemonAttack.innerText = stats[1].base_stat
pokemonDefence.innerText = stats[2].base_stat
pokemonSpA.innerText = stats[3].base_stat
pokemonSpD.innerText = stats[4].base_stat
pokemonSpeed.innerText = stats[5].base_stat
}catch(err){
alert('Pokemon not found')
}
}
searchButton.addEventListener("click", getData)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="syles.css">
</head>
<body>
<input id="search-input" required />
<button id="search-button">search</button>
<img id="sprite">
<ul>
<li>Type: <span id="types"></span> <span id="types"></span></li>
<li>Name: <span id="pokemon-name"></span></li>
<li>ID: <span id="pokemon-id"></span></li>
<li>Weight: <span id="weight"></span></li>
<li>Height: <span id="height"></span></li>
<li>HP: <span id="hp"></span></li>
<li>Attack: <span id="attack"></span></li>
<li>Defense: <span id="defense"></span></li>
<li>Special Attack: <span id="special-attack"></span></li>
<li>Special Defense: <span id="special-defense"></span></li>
<li>Speed: <span id="speed"></span></li>
</ul>
</body>
<script src="script.js">
</script>
</html>
Teller
February 16, 2025, 9:52pm
5
Hi @gurvirsanghera52
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 . Make sure the #types element content is cleared between searches.
Your #types element contains two inner elements instead of just one.
Happy coding
Hi @Teller ,
I refactored my code again to have a ternary operator that adds a second element only when it exists:
const pokemonTypes = document.getElementById("types")
pokemonTypes.innerText = types[0].type.name.toUpperCase()
pokemonTypes.innerText += types[1] ? ` ${types[1].type.name.toUpperCase()}
<li>Type: <span id="types"></span></li>
And I am still getting the same errors. I am about to post the updated html and js
const pokemonName = document.getElementById("pokemon-name")
const pokemonId = document.getElementById("pokemon-id")
const pokemonWeight = document.getElementById("weight")
const pokemonHP = document.getElementById("hp")
const pokemonAttack = document.getElementById("attack")
const pokemonDefence = document.getElementById("defense")
const pokemonSpA = document.getElementById("special-attack")
const pokemonSpD = document.getElementById("special-defense")
const pokemonSpeed = document.getElementById("speed")
const pokemonHeight = document.getElementById("height")
const pokemonTypes = document.getElementById("types")
const searchButton = document.getElementById("search-button")
const inputBox = document.getElementById("search-input")
const image = document.getElementById("sprite")
async function getData() {
try{
const response = await fetch(`https://pokeapi-proxy.freecodecamp.rocks/api/pokemon/${inputBox.value.toLowerCase()}`)
const data = await response.json()
const {name, id, weight, sprites, stats, types, height} = data
image.src = sprites.front_default
console.log(types[0].type.name)
pokemonTypes.innerText = types[0].type.name.toUpperCase()
pokemonTypes.innerText += types[1] ? ` ${types[1].type.name.toUpperCase()}`: "";
pokemonName.innerText = name
pokemonId.innerText = id
pokemonWeight.innerText = weight
pokemonHeight.innerText = height
pokemonHP.innerText = stats[0].base_stat
pokemonAttack.innerText = stats[1].base_stat
pokemonDefence.innerText = stats[2].base_stat
pokemonSpA.innerText = stats[3].base_stat
pokemonSpD.innerText = stats[4].base_stat
pokemonSpeed.innerText = stats[5].base_stat
}catch(err){
alert('Pokemon not found')
}
}
searchButton.addEventListener("click", getData)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="syles.css">
</head>
<body>
<input id="search-input" required />
<button id="search-button">search</button>
<img id="sprite">
<ul>
<li>Type: <span id="types"></span></li>
<li>Name: <span id="pokemon-name"></span></li>
<li>ID: <span id="pokemon-id"></span></li>
<li>Weight: <span id="weight"></span></li>
<li>Height: <span id="height"></span></li>
<li>HP: <span id="hp"></span></li>
<li>Attack: <span id="attack"></span></li>
<li>Defense: <span id="defense"></span></li>
<li>Special Attack: <span id="special-attack"></span></li>
<li>Special Defense: <span id="special-defense"></span></li>
<li>Speed: <span id="speed"></span></li>
</ul>
</body>
<script src="script.js">
</script>
</html>
When the #search-input element contains the value 94 and the #search-button element is clicked, the #types element should contain two inner elements with the text values GHOST and POISON , respectively. Make sure the #types element content is cleared between searches.
This error says that it needs two elements, hence the ternary operator
Teller
February 16, 2025, 11:02pm
9
Each text value need to be nested in a separate element.
Hi,
console.log(types.map(element => {
pokemonTypes.innerHTML += `<span>${element.type.name.toUpperCase()} </span>`
}))
Teller
February 17, 2025, 8:15pm
11
Console logging them may not work.
I found the solution, it was clearing the html element between searches
