Tell us what’s happening:
Im not sure why the test that starts with :
“When the #search-input element contains the value Pikachu”
and the test that starts with:
“When the #search-input element contains the value 94 and”
arent passing when I put those terms into the search each of those items are correct and present
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pokémon Search App</title>
<link rel="stylesheet" href="style.css"> <!-- Optional: Link to your CSS -->
</head>
<body>
<h1>Pokémon Search App</h1>
<div>
<input type="text" id="search-input" placeholder="Enter Pokémon name or ID" required>
<button id="search-button">Search</button>
</div>
<div>
<h2>Pokémon Information</h2>
<p id="pokemon-name"></p>
<p id="pokemon-id"></p>
<p id="weight"></p>
<p id="height"></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 id="types"></div> <!-- This will contain the Pokémon types -->
<img id="sprite" style="display: none;"> <!-- Hidden by default -->
</div>
<script src="script.js"></script> <!-- Link to your JavaScript -->
</body>
</html>
/* file: styles.css */
body {
font-family: Arial, sans-serif;
padding: 20px;
}
input {
padding: 5px;
}
button {
padding: 5px;
}
h2 {
margin-top: 20px;
}
img {
width: 100px; /* Adjust as needed */
}
/* file: script.js */
document.getElementById('search-button').addEventListener('click', async () => {
const searchInput = document.getElementById('search-input').value.trim().toLowerCase();
const apiUrl = `https://pokeapi.co/api/v2/pokemon/${searchInput}`;
try {
const response = await fetch(apiUrl);
if (response.status === 404) {
alert("Pokémon not found");
return;
}
const data = await response.json();
// Assign values to the elements
document.getElementById('pokemon-name').textContent = data.name.toUpperCase(); // PIKACHU
document.getElementById('pokemon-id').textContent = `#${data.id}`; // #25
document.getElementById('weight').textContent = `Weight: ${data.weight}`; // Weight: 60
document.getElementById('height').textContent = `Height: ${data.height}`; // Height: 4
const statsMap = {
hp: 'HP',
attack: 'Attack',
defense: 'Defense',
'special-attack': 'Special Attack',
'special-defense': 'Special Defense',
speed: 'Speed'
};
data.stats.forEach(stat => {
const statName = stat.stat.name;
const statValue = stat.base_stat;
if (statName in statsMap) {
document.getElementById(statName).textContent = `${statsMap[statName]}: ${statValue}`;
}
});
// Update Pokémon sprite
const sprite = document.getElementById('sprite');
sprite.src = data.sprites.front_default; // Assign the front_default sprite
sprite.style.display = 'block';
// Update Pokémon types
const typesDiv = document.getElementById('types');
typesDiv.innerHTML = ''; // Clear any existing content
data.types.forEach(type => {
const typeElem = document.createElement('p');
typeElem.textContent = type.type.name.toUpperCase(); // ELECTRIC
typesDiv.appendChild(typeElem);
});
} catch (error) {
console.error('Error fetching Pokémon:', error);
alert("An error occurred while fetching Pokémon data");
}
});
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/123.0.0.0 Safari/537.36
Challenge Information:
Build a Pokémon Search App Project - Build a Pokémon Search App