Hi, I need your assistance with this. Except for this one, I passed the majority of the tests. Nevertheless, the results display appropriately if you search for the Pokemon’s name or ID. Despite my best efforts, I’m still trapped.
<input type="text" id="search-input"required>
<button id="search-button">Search</button>
<div id="pokemon-info">
<h2 id="pokemon-name"></h2>
<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>
<img id="sprite" src="" alt="Pokémon Sprite">
</div>
<script src="script.js"></script>
document.getElementById('search-button').addEventListener('click', function() {
let inputValue = document.getElementById('search-input').value.toLowerCase();
inputValue = inputValue.replace(/♀/g, '-f').replace(/♂/g, '-m');
fetch(`https://pokeapi-proxy.freecodecamp.rocks/api/pokemon/${inputValue}`)
.then(response => {
if (!response.ok) {
throw new Error('Pokémon not found');
}
return response.json();
})
.then(data => {
document.getElementById('pokemon-name').innerText = data.name.toUpperCase();
document.getElementById('pokemon-id').innerText = `#${data.id}`;
document.getElementById('weight').innerText = `Weight: ${data.weight}`;
document.getElementById('height').innerText = `Height: ${data.height}`;
document.getElementById('types').innerHTML = '';
data.types.forEach(type => {
const typeElement = document.createElement('span');
typeElement.textContent = type.type.name.toUpperCase();
document.getElementById('types').appendChild(typeElement);
});
const hpValue = data.stats.find(stat => stat.stat.name === 'hp').base_stat;
console.log('Actual HP Value:', hpValue);
document.getElementById('hp').innerText = `HP: ${hpValue}`;
document.getElementById('attack').innerText = `Attack: ${data.stats.find(stat => stat.stat.name === 'attack').base_stat}`;
document.getElementById('defense').innerText = `Defense: ${data.stats.find(stat => stat.stat.name === 'defense').base_stat}`;
document.getElementById('special-attack').innerText = `Special Attack: ${data.stats.find(stat => stat.stat.name === 'special-attack').base_stat}`;
document.getElementById('special-defense').innerText = `Special Defense: ${data.stats.find(stat => stat.stat.name === 'special-defense').base_stat}`;
document.getElementById('speed').innerText = `Speed: ${data.stats.find(stat => stat.stat.name === 'speed').base_stat}`;
const actualHP = parseInt(hpValue);
const expectedHP = parseInt(document.getElementById('hp').innerText.split(':')[1].trim()); // Splitting and trimming
if (actualHP !== expectedHP) {
throw new Error(`HP mismatch: expected ${expectedHP}, got ${actualHP}`);
}
document.getElementById('sprite').src = data.sprites.front_default;
})
.catch(error => alert(error.message));
});
