08/01/2024
Pokémon Search App
/* Add your own styling here */
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 20px;
}
input, button {
margin: 10px;
}
span {
margin-right: 5px;
}
img {
max-width: 100%;
height: auto;
}
Search Pokémon:
Search
Pokémon Info
Name:
ID:
Weight:
Height:
HP:
Attack:
Defense:
Special Attack:
Special Defense:
Speed:
Types:
document.getElementById('search-button').addEventListener('click', searchPokemon);
function searchPokemon() {
// Get the input value
const inputValue = document.getElementById('search-input').value.toLowerCase();
// Use PokéAPI Proxy to fetch Pokémon data
fetch(`https://pokeapi.co/api/v2/pokemon/${inputValue}`)
.then(response => response.json())
.then(data => {
displayPokemonInfo(data);
})
.catch(error => {
// Display an alert for Pokémon not found
alert('Pokémon not found');
});
}
function displayPokemonInfo(data) {
// Update the HTML elements with Pokémon 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('hp').innerText = data.stats[0].base_stat;
document.getElementById('attack').innerText = data.stats[1].base_stat;
document.getElementById('defense').innerText = data.stats[2].base_stat;
document.getElementById('special-attack').innerText = data.stats[3].base_stat;
document.getElementById('special-defense').innerText = data.stats[4].base_stat;
document.getElementById('speed').innerText = data.stats[5].base_stat;
// Add types to the element
const typesContainer = document.getElementById('types');
typesContainer.innerHTML = 'Types:';
data.types.forEach(type => {
const typeSpan = document.createElement('span');
typeSpan.innerText = type.type.name.toUpperCase();
typesContainer.appendChild(typeSpan);
});
// Add Pokémon sprite
const spriteContainer = document.getElementById('sprite-container');
spriteContainer.innerHTML = ``;
}
