Tell us what’s happening:
I feel that my code works perfectly but i still got error for task 14 where to show alert (“Pokémon not found”), is it bug?
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" >
<title>Pokemon Search App</title>
<link href="styles.css" rel="stylesheet">
</head>
<body>
<h1>Pokémon Search App</h1>
<div class="container">
<h4>Search for Pokémon Name or Id:</h4>
<div class="input-section">
<input id="search-input" placeholder="Ex: Pikachu" type="text" required>
<button id="search-button">Search</button>
</div>
<div class="output-section">
<p id="pokemon-name" class="pokemon-name"></p>
<span id="pokemon-id" class="pokemon-id"></span>
<span class="block"></span>
<p id="weight" class="weight"></p>
<span id="height" class="height"></span>
<span class="block"></span>
<div class="img-container">
<img src="" alt="" id="sprite" class="sprite">
</div>
<div class="types" id="types">
</div>
</div>
<table>
<tr>
<th>Base</th>
<th>Stats</th>
</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>
</table>
</div>
<script src="script.js"></script>
</body>
</html>
```javascript
const searchInput = document.getElementById("search-input");
const searchButton = document.getElementById("search-button");
const pokemonName = document.getElementById("pokemon-name");
const pokemonId = document.getElementById("pokemon-id");
const pokemonWeight = document.getElementById("weight");
const pokemonHeight = document.getElementById("height");
const pokemonTypes = document.getElementById("types");
const pokemonHp = document.getElementById("hp");
const pokemonAttack = document.getElementById("attack");
const pokemonDefense = document.getElementById("defense");
const pokemonSpecialAttack = document.getElementById("special-attack");
const pokemonSpecialDefense = document.getElementById("special-defense");
const pokemonSpeed = document.getElementById("speed");
const sprite = document.getElementById("sprite");
const pokeAPI = "https://pokeapi-proxy.freecodecamp.rocks/api/pokemon";
const fetchData = async () => {
try{
const res = await fetch(pokeAPI);
const data = await res.json();
searchPokemon(data);
}catch (err){
console.log(err);
}
}
const capitalizeFirstLetter = (str) => {
if (!str) return "";
return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
};
const searchPokemon = (data) => {
const { results } = data;
const pokeNames = results.map((item) => item.name.toLowerCase());
const pokeId = results.map((item) => item.id);
searchButton.addEventListener("click", () => {
// Clear previous results
pokemonTypes.innerHTML = "";
pokemonName.textContent = "";
pokemonId.textContent = "";
pokemonWeight.textContent = "";
pokemonHeight.textContent = "";
sprite.style.display = "none";
const searchPokemon = searchInput.value.toLowerCase();
const searchPokemonId = parseInt(searchInput.value);
const searchedIndex = pokeNames.indexOf(searchPokemon);
const searchedIdIndex = pokeId.indexOf(searchPokemonId);
// Get the index for ID
let pokemon;
// Check if Pokémon was found by name or ID
if (searchedIndex !== -1) {
pokemon = results[searchedIndex];
} else if (searchedIdIndex !== -1) {
pokemon = results[searchedIdIndex];
}
if (pokemon) {
const url = pokemon.url;
pokemonName.textContent = capitalizeFirstLetter(pokemon.name);
pokemonId.textContent = "#" + pokemon.id;
fetch(url)
.then(res => {
if (!res.ok) {
throw new Error('Network response was not ok');
}
return res.json();
})
.then(pokemonData => {
pokemonWeight.textContent = "Weight: " + pokemonData.weight;
pokemonHeight.textContent = "Height: " + pokemonData.height;
sprite.style.display = "inline";
sprite.src = pokemonData.sprites.front_default;
const elementTypes = pokemonData.types.map(item => item.type.name);
elementTypes.forEach((type) => {
pokemonTypes.innerHTML += `<p style="background-color:var(--${type}-element)">${type}</p>`;
});
const pokeStats = pokemonData.stats.map(item => item.base_stat);
pokemonHp.textContent = pokeStats[0];
pokemonAttack.textContent = pokeStats[1];
pokemonDefense.textContent = pokeStats[2];
pokemonSpecialAttack.textContent = pokeStats[3];
pokemonSpecialDefense.textContent = pokeStats[4];
pokemonSpeed.textContent = pokeStats[5];
});
} else{
alert("Pokémon Not Found")
}
});
}
fetchData();
```css
*,
*::before,
*::after{
margin: 0;
padding: 0;
box-sizing: inherit;
}
:root{
--dark-color: #1b1b32;
--light-color: #f5f6f7;
--secondary-color: #f0f1f7;
--pink-color: #7f21ab;
--gray-color: #646371;
--water-element: #42a1ff;
--dragon-element: #9e93f1;
--electric-element: #fecc33;
--grass-element: #78cc55;
--poison-element: #c68bb7;
--psychic-element: #ff66a3;
--fire-element: #ff6f52;
--ground-element: #dfba52;
--normal-element: #b7b7aa;
--machamp-element: #d3887e;
--flying-element: #8899ff;
--rock-element: #baaa66;
--bug-element: #aabb23;
--ghost-element: #9995d0;
--steel-element: #abaabb;
--ice-element: #66ccfe;
--dark-element: #b59682;
--fairy-element: #ed99ed;
}
body{
background-color: var(--dark-color);
font-family: Verdana, Tahoma, sans-serif;
}
h1{
color: var(--light-color);
text-align: center;
margin-top: 15px;
}
.container{
width: 70%;
height: 800px;
background-color: var(--light-color);
margin: 10px auto;
border-radius: 15px;
box-shadow: 10px 10px var(--gray-color);
}
h4{
text-align: center;
color: var(--pink-color);
padding: 10px 10px;
}
.input-section{
text-align: center;
}
.input-section input{
height: 15px;
font-size: 15px;
padding: 10px 10px;
}
.input-section button{
font-size: 15px;
padding: 10px 10px;
border-radius: 5px;
border: none;
background-color: var(--pink-color);
color: var(--light-color);
}
.output-section{
background-color: var(--secondary-color);
width: 90%;
height: 300px;
margin: 15px auto;
padding: 5px 5px;
}
.pokemon-name, .weight{
display: inline;
}
.block{
display: block;
margin-top: 10px;
}
.pokemon-name, .pokemon-id{
font-weight: bold;
}
.weight, .height{
font-size: 15px;
}
.img-container{
text-align: center;
}
.sprite{
width: 200px;
display: none;
}
.types{
display: flex;
}
.types p{
margin-left: 8px;
font-size: 14px;
padding: 10px 10px;
border-radius: 5px;
}
table{
border-collapse: collapse;
margin: 0 auto;
width: 95%;
}
td,th{
border: 4px solid var(--light-color);
background-color: var(--pink-color);
color: var(--light-color);
text-align:center;
padding: 10px 10px;
}
### Your browser information:
User Agent is: <code>Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.0.0 Safari/537.36</code>
### Challenge Information:
Build a Pokémon Search App Project - Build a Pokémon Search App
https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures-v8/build-a-pokemon-search-app-project/build-a-pokemon-search-app