i already do all the test, but its not complete, it’s says when search-input value is Red, alert should show with text (“Pokemon not found”),i done it in my app, please give me insight
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pokemon Search</title>
</head>
<body>
<h1>Pokemon Search App</h1>
<div class="container">
<p>Search for Pokémon Name or ID:</p>
<input id="search-input" required>
<button id="search-button">Search</button>
<div class="output">
<div class="top-output">
<div class="pokemon-name-id">
<span id="pokemon-name"></span>
<span id="pokemon-id"></span>
</div>
<div class="pokemon-w-h">
<span id="weight"></span>
<span id="height"></span>
</div>
<div id="sprite-container"></div>
<div id="types"></div>
</div>
<div class="bot-output">
<table>
<tbody>
<tr>
<td>Base</td>
<td>Stats</td>
</tr>
<tr>
<td>HP: </td>
<td id="hp"></td>
</tr>
<tr>
<td>Attack: </td>
<td id="attack"></td>
</tr>
<tr>
<td>Defense: </td>
<td id="defense"></td>
</tr>
<tr>
<td>Sp. Attack: </td>
<td id="special-attack"></td>
</tr>
<tr>
<td>Sp. Defense: </td>
<td id="special-defense"></td>
</tr>
<tr>
<td>Speed: </td>
<td id="speed"></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script>
const allDataPokemon = "https://pokeapi-proxy.freecodecamp.rocks/api/pokemon";
const input = document.getElementById('search-input');
const searchBtn = document.getElementById('search-button');
const pokemonName = document.getElementById('pokemon-name')
const pokemonId = document.getElementById('pokemon-id')
const pokemonW = document.getElementById('weight')
const pokemonH = document.getElementById('height')
const spriteContainer = document.getElementById('sprite-container');
const pokemonTypes = document.getElementById('types');
const pokemonHP = document.getElementById('hp')
const pokemonAttack = document.getElementById('attack')
const pokemonDefense = document.getElementById('defense')
const pokemonSpAttack = document.getElementById('special-attack')
const pokemonSpDefense = document.getElementById('special-defense')
const pokemonSpeed = document.getElementById('speed')
let data = null;
const fetchData = async () => {
try {
const res = await fetch(allDataPokemon);
data = await res.json();
console.log(data); // Check the structure of the fetched data
// Define the inputMatch function inside fetchData
const inputMatch = async () => {
const userInput = input.value.toLowerCase();
const { results } = data;
// Find the matching Pokemon based on ID or name
const match = results.find(pokemon =>
pokemon.id.toString() === userInput || pokemon.name.toLowerCase() === userInput
);
if (match) {
console.log("Match found:", match);
const detailedData = await fetchPokemonDetails(match.url);
showResultsPokemon(detailedData);
} else {
console.log("No match found");
alert('Pokémon not found')
}
};
// Add event listener to call inputMatch when search button is clicked
searchBtn.addEventListener("click", inputMatch);
} catch (err) {
console.log(err);
}
};
const fetchPokemonDetails = async (url) => {
try {
const res = await fetch(url);
const pokemonDetails = await res.json();
return pokemonDetails;
} catch (err) {
console.log(err);
}
};
const showResultsPokemon = (pokemon) => {
// Display the Pokemon details
pokemonName.textContent = pokemon.name
pokemonId.textContent = "#" + pokemon.id
pokemonW.textContent = "Weight: " + pokemon.weight
pokemonH.textContent = "Height: " + pokemon.height
spriteContainer.innerHTML = `<img src="${pokemon.sprites.front_default}" alt="${pokemon.name} sprite" id="sprite">`
pokemonTypes.innerHTML = `
${pokemon.types.length > 1 ?
`<span>${pokemon.types[0].type.name}</span><span>${pokemon.types[1].type.name}</span>` :
`<span>${pokemon.types[0].type.name}</span>`
}`;
pokemonHP.textContent = pokemon.stats.find(stat => stat.stat.name === 'hp').base_stat
pokemonAttack.textContent = pokemon.stats.find(stat => stat.stat.name === 'attack').base_stat
pokemonDefense.textContent = pokemon.stats.find(stat => stat.stat.name === 'defense').base_stat
pokemonSpAttack.textContent = pokemon.stats.find(stat => stat.stat.name === 'special-attack').base_stat
pokemonSpDefense.textContent = pokemon.stats.find(stat => stat.stat.name === 'special-defense').base_stat
pokemonSpeed.textContent = pokemon.stats.find(stat => stat.stat.name === 'speed').base_stat
};
// <p>Base Experience: ${pokemon.base_experience}</p>
// Fetch data when the script loads
fetchData();
</script>
</body>
</html>