Tell us what’s happening:
Hi guys,i need some advice in this challenge. I fail to pass two tests here,the ones that say:
" 1. 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" and
" 1. 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, #special-defense, and #speedelements should be GENGAR, #94 or 94, Weight: 405 or 405, Height: 15 or 15, 60, 65, 60, 130, 75, and 110, respectively".
I am not sure what could i have done wrong in the code ,because every time i search for these two pokemons i get the result with all the stats as asked in the challenge. Can anyone point me in the right direction?
Thank you!
P.S: I haven’t done any styling yet because i wanted to get the functionality done first.
Your code so far
<html lang='eng'>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles.css" />
<title>Pokemon Search App</title>
</head>
<body>
<div>
<input id="search-input" placeholder='Name or id of pokemon' required/>
</div>
<div>
<button id='search-button' class="button">Search</button>
</div>
<div id="types"></div>
<div id="stats"></div>
<p id="pokemon-name"></p>
<p id="pokemon-id"></p>
<p id="weight"></p>
<p id="height"></p>
<p id="types"></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>
</div>
<script src='./script.js'></script>
</body>
</html>
const searchButton = document.getElementById('search-button');
const pokeName = document.getElementById('pokemon-name');
const pokeId = document.getElementById('pokemon-id');
const pokeWeight = document.getElementById('weight');
const pokeHeight = document.getElementById('height');
const types = document.getElementById('types');
const pokeHp = document.getElementById('hp');
const pokeAttack = document.getElementById('attack');
const pokeDefense = document.getElementById('defense');
const pokeSpecialAttack = document.getElementById('special-attack');
const pokeSpecialDefense = document.getElementById('special-defense');
const pokeSpeed = document.getElementById('speed');
const allPokemons = "https://pokeapi-proxy.freecodecamp.rocks/api/pokemon";
const getPokemonData = async (pokemonName) => {
try {
let url;
if (!isNaN(pokemonName)) { // Check if input is a number (ID)
url = `${allPokemons}/${pokemonName}`;
} else { // Assume input is a string (name)
url = `${allPokemons}/${pokemonName.toLowerCase()}`;
}
const response = await fetch(url);
const data = await response.json();
return data;
} catch (err) {
console.error(err);
}
};
const showPokemon = async (event) => {
event.preventDefault();
const input = document.getElementById('search-input');
const pokemonName = input.value;
if (!pokemonName) {
alert("Pokémon not found");
return;
}
const pokemonData = await getPokemonData(pokemonName);
if (pokemonData) {
const { name, id, weight, height, types, stats, sprites } = pokemonData;
const hp = stats.find(stat => stat.stat.name === 'hp').base_stat;
const attack = stats.find(stat => stat.stat.name === 'attack').base_stat;
const defense = stats.find(stat => stat.stat.name === 'defense').base_stat;
const specialAttack = stats.find(stat => stat.stat.name === 'special-attack').base_stat;
const specialDefense = stats.find(stat => stat.stat.name === 'special-defense').base_stat;
const speed = stats.find(stat => stat.stat.name === 'speed').base_stat;
const typesElement = document.getElementById('types');
typesElement.innerHTML = ''; // Clear previous content
types.forEach(type => {
const typeElement = document.createElement('p');
typeElement.textContent = type.type.name.toUpperCase();
typesElement.appendChild(typeElement);
});
const statsElement = document.getElementById('stats');
statsElement.innerHTML = `<img id="sprite" src="${src}" alt="Pokemon Sprite">`;
const spriteElement = document.getElementById('sprite');
const src = spriteElement.src = sprites.front_default;
pokeName.innerHTML = `Name: ${name.toUpperCase()}`;
pokeId.innerHTML = `ID: #${id}`;
pokeWeight.innerHTML = `Weight: ${weight}`;
pokeHeight.innerHTML = `Height: ${height}`;
pokeHp.innerHTML = `HP: ${hp}`;
pokeAttack.innerHTML = `Attack : ${attack}`;
pokeDefense.innerHTML = `Defense: ${defense}`;
pokeSpecialAttack.innerHTML = `Special Attack: ${specialAttack}`;
pokeSpecialDefense.innerHTML = `Special Defense: ${specialDefense}`;
pokeSpeed.innerHTML = `Speed: ${speed}`;
} else {
const statsElement = document.getElementById('stats');
alert('Pokémon not found');
}
};
searchButton.addEventListener('click', showPokemon);
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36 Edg/121.0.0.0
Challenge Information:
Build a Pokémon Search App Project - Build a Pokémon Search App