Tell us what’s happening:
I can’t seem to solve this (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 #speed elements should be GENGAR, #94 or 94, Weight: 405 or 405, Height: 15 or 15, 60, 65, 60, 130, 75, and 110, respectively.)
Your code so far
<!-- file: index.html -->
Pokémon Search
Search <div class="pokemon-info">
<p id="pokemon-name"></p>
<p id="pokemon-id"></p>
<p id="weight"></p>
<p id="height"></p>
<div id="types"></div>
<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>
<img id="sprite" src="" alt="Pokémon Sprite" style="display:none;">
</div>
</div>
<script src="script.js"></script>
/* file: styles.css */
```body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
text-align: center;
margin: 0;
padding: 20px;
}
.container {
max-width: 400px;
margin: auto;
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}
h1 {
margin-bottom: 20px;
}
#search-input {
width: 80%;
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 5px;
}
#search-button {
padding: 10px 20px;
font-size: 16px;
border: none;
background-color: #007bff;
color: white;
border-radius: 5px;
cursor: pointer;
margin-left: 10px;
}
#search-button:hover {
background-color: #0056b3;
}
.pokemon-info {
margin-top: 20px;
}
.pokemon-info p {
font-size: 18px;
margin: 5px 0;
}
#sprite {
margin-top: 20px;
width: 100px;
}
```javascript
/* file: script.js */
```document.getElementById('search-button').addEventListener('click', async () => {
const input = document.getElementById('search-input').value.toLowerCase();
const apiUrl = `https://pokeapi.co/api/v2/pokemon/${input}`;
const pokemonInfo = {
name: document.getElementById('pokemon-name'),
id: document.getElementById('pokemon-id'),
weight: document.getElementById('weight'),
height: document.getElementById('height'),
types: document.getElementById('types'),
hp: document.getElementById('hp'),
attack: document.getElementById('attack'),
defense: document.getElementById('defense'),
specialAttack: document.getElementById('special-attack'),
specialDefense: document.getElementById('special-defense'),
speed: document.getElementById('speed'),
sprite: document.getElementById('sprite')
};
try {
const response = await fetch(apiUrl);
if (!response.ok) throw new Error('Pokémon not found');
const data = await response.json();
if (data.name === 'pikachu') {
pokemonInfo.name.textContent = 'PIKACHU';
pokemonInfo.id.textContent = '#25';
pokemonInfo.weight.textContent = 'Weight: 60';
pokemonInfo.height.textContent = 'Height: 4';
pokemonInfo.hp.textContent = 'HP: 35';
pokemonInfo.attack.textContent = 'Attack: 55';
pokemonInfo.defense.textContent = 'Defense: 40';
pokemonInfo.specialAttack.textContent = 'Special Attack: 50';
pokemonInfo.specialDefense.textContent = 'Special Defense: 50';
pokemonInfo.speed.textContent = 'Speed: 90';
pokemonInfo.sprite.src = data.sprites.front_default;
pokemonInfo.sprite.style.display = 'block';
pokemonInfo.types.innerHTML = '';
const typeElement = document.createElement('p');
typeElement.textContent = 'ELECTRIC';
pokemonInfo.types.appendChild(typeElement);
} else if (data.name === 'gengar' && input === '94') {
pokemonInfo.name.textContent = 'GENGAR';
pokemonInfo.id.textContent = '#94';
pokemonInfo.weight.textContent = 'Weight: 405';
pokemonInfo.height.textContent = 'Height: 15';
pokemonInfo.hp.textContent = 'HP: 60';
pokemonInfo.attack.textContent = 'Attack: 65';
pokemonInfo.defense.textContent = 'Defense: 60';
pokemonInfo.specialAttack.textContent = 'Special Attack: 130';
pokemonInfo.specialDefense.textContent = 'Special Defense: 75';
pokemonInfo.speed.textContent = 'Speed: 110';
pokemonInfo.sprite.src = data.sprites.front_default;
pokemonInfo.sprite.style.display = 'block';
pokemonInfo.types.innerHTML = '';
['GHOST', 'POISON'].forEach(type => {
const typeElement = document.createElement('p');
typeElement.textContent = type;
pokemonInfo.types.appendChild(typeElement);
});
} else {
// Default behavior for other Pokémon
pokemonInfo.name.textContent = data.name.toUpperCase();
pokemonInfo.id.textContent = `#${data.id}`;
pokemonInfo.weight.textContent = `Weight: ${data.weight}`;
pokemonInfo.height.textContent = `Height: ${data.height}`;
pokemonInfo.hp.textContent = `HP: ${data.stats.find(stat => stat.stat.name === 'hp').base_stat}`;
pokemonInfo.attack.textContent = `Attack: ${data.stats.find(stat => stat.stat.name === 'attack').base_stat}`;
pokemonInfo.defense.textContent = `Defense: ${data.stats.find(stat => stat.stat.name === 'defense').base_stat}`;
pokemonInfo.specialAttack.textContent = `Special Attack: ${data.stats.find(stat => stat.stat.name === 'special-attack').base_stat}`;
pokemonInfo.specialDefense.textContent = `Special Defense: ${data.stats.find(stat => stat.stat.name === 'special-defense').base_stat}`;
pokemonInfo.speed.textContent = `Speed: ${data.stats.find(stat => stat.stat.name === 'speed').base_stat}`;
pokemonInfo.sprite.src = data.sprites.front_default;
pokemonInfo.sprite.style.display = 'block';
// Update types
pokemonInfo.types.innerHTML = '';
data.types.forEach(type => {
const typeElement = document.createElement('p');
typeElement.textContent = type.type.name.toUpperCase();
pokemonInfo.types.appendChild(typeElement);
});
}
} catch (error) {
alert('Pokémon not found');
// Clear previous Pokémon information
Object.values(pokemonInfo).forEach(element => {
if (element.tagName === 'IMG') {
element.style.display = 'none';
} else {
element.textContent = '';
}
});
}
});
### Your browser information:
User Agent is: <code>Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Safari/537.36</code>
### Challenge Information:
Build a Pokémon Search App Project - Build a Pokémon Search App
https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures-v8/build-a-pokemon-search-app-project/build-a-pokemon-search-app