Tell us what’s happening:
error 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.
error
When the #search-input element contains the value 94 and the #search-button element is clicked, the values in the #pokemon-name, #
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pokémon Search App</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<input type="text" id="search-input" required>
<button id="search-button">Search</button>
<div id="pokemon-details">
<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>
<img id="sprite" src="" alt="">
</div>
<script src="script.js"></script>
</body>
</html>
/* file: styles.css */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
#search-input {
padding: 8px;
font-size: 16px;
}
#search-button {
padding: 8px 16px;
font-size: 16px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
#search-button:hover {
background-color: #45a049;
}
#pokemon-details {
display: none;
margin-top: 20px;
}
#pokemon-details p {
margin: 8px 0;
}
#types {
margin: 8px 0;
}
#types span {
background-color: #f0f0f0;
padding: 4px 8px;
border-radius: 4px;
margin-right: 4px;
}
#sprite {
margin-top: 20px;
max-width: 200px;
}
/* file: script.js */
document.addEventListener('DOMContentLoaded', () => {
const searchInput = document.getElementById('search-input');
const searchButton = document.getElementById('search-button');
searchButton.addEventListener('click', () => {
const searchValue = searchInput.value.toLowerCase();
const pokemonDetails = document.getElementById('pokemon-details');
const typesElement = document.getElementById('types');
fetch(`https://pokeapi.co/api/v2/pokemon/${searchValue}`)
.then(response => {
if (!response.ok) {
throw new Error('Pokémon not found');
}
return response.json();
})
.then(data => {
pokemonDetails.style.display = 'block'; // Show Pokemon details
document.getElementById('pokemon-name').textContent = data.name.toUpperCase();
document.getElementById('pokemon-id').textContent = `#${data.id}`;
document.getElementById('weight').textContent = `Weight: ${data.weight}`;
document.getElementById('height').textContent = `Height: ${data.height}`;
document.getElementById('sprite').src = data.sprites.front_default;
// Clear previous types
typesElement.innerHTML = '';
// Add types
const types = data.types.map(type => type.type.name.toUpperCase());
types.forEach(type => {
const typeElement = document.createElement('span');
typeElement.textContent = type;
typesElement.appendChild(typeElement);
});
const stats = data.stats;
document.getElementById('hp').textContent = `HP: ${stats[0].base_stat}`;
document.getElementById('attack').textContent = `Attack: ${stats[1].base_stat}`;
document.getElementById('defense').textContent = `Defense: ${stats[2].base_stat}`;
document.getElementById('special-attack').textContent = `Special Attack: ${stats[3].base_stat}`;
document.getElementById('special-defense').textContent = `Special Defense: ${stats[4].base_stat}`;
document.getElementById('speed').textContent = `Speed: ${stats[5].base_stat}`;
})
.catch(error => {
alert(error.message);
});
});
});
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.4 Safari/605.1.15
Challenge Information:
Build a Pokémon Search App Project - Build a Pokémon Search App