Hello. I made a Pokemon Search App code. I just follow all the user stories, especially the user stories from 14-20, but did not pass when I ran the tests. Is there any errors in my javascript code?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<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>
<h1>Pokémon Search App</h1>
<main>
<div class="pokemon-form">
<label for="Pokemon">Enter the Pokemon name or ID:</label>
<input id="search-input" type="text" name="pokemon" value="" required />
<button type="button" id="search-button">Search</button>
</div>
<div class="pokemon-container">
<div class="pokemon-name-id">
<span id="pokemon-name"></span>
<span id="pokemon-id"></span>
</div>
<div class="pokemon-size">
<span id="weight"></span>
<span id="height"></span>
</div>
<div id="sprite-img"></div>
<p id="types"></p>
</div>
<table class="pokemon-table">
<thead>
<tr>
<th>Base</th>
<th>Stats</th>
</tr>
</thead>
<tbody>
<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>Special Attack:</td>
<td id="special-attack"></td>
</tr>
<tr>
<td>Special Defense:</td>
<td id="special-defense"></td>
</tr>
<tr>
<td>Speed:</td>
<td id="speed"></td>
</tr>
</tbody>
</table>
</main>
<script src="script.js"></script>
</body>
</html>
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 pokemonSprites = document.getElementById("sprite-img");
const pokemonSprite = document.getElementById("sprite");
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");
const pokemonSearch = () =>{
const pokeValue = searchInput.value.toLowerCase();
const pokeurl = `https://pokeapi-proxy.freecodecamp.rocks/api/pokemon/${pokeValue}`;
fetch(pokeurl)
.then(response => response.json())
.then(data => {
pokemonName.textContent = data.name.toUpperCase();
pokemonId.textContent = `#${data.id}`;
pokemonWeight.textContent = `Weight: ${data.weight}`;
pokemonHeight.textContent = `Height: ${data.height}`;
pokemonHp.textContent = data.stats[0].base_stat;
pokemonAttack.textContent = data.stats[1].base_stat;
pokemonDefense.textContent = data.stats[2].base_stat;
pokemonSpAttack.textContent = data.stats[3].base_stat;
pokemonSpDefense.textContent = data.stats[4].base_stat;
pokemonSpeed.textContent = data.stats[5].base_stat;
pokemonTypes.innerHTML = "";
data.types.forEach((type) => {
pokemonTypes.innerHTML += `<span>${type.type.name.toUpperCase()}</span>`;
});
let sprite = document.createElement("img");
sprite.src = data.sprites.front_default;
sprite.id = "sprite";
pokemonSprites.innerHTML = "";
pokemonSprites.appendChild(sprite);
}).catch(error => {
console.log(error);
resetPokemonData();
alert("Pokémon not found");
})
};
const resetPokemonData = () => {
if(pokemonSprite){
pokemonSprite.remove();
}
pokemonName.textContent = "";
pokemonId.textContent = "";
pokemonWeight.textContent = "";
pokemonHeight.textContent = "";
pokemonHp.textContent = "";
pokemonAttack.textContent = "";
pokemonDefense.textContent = "";
pokemonSpAttack.textContent = "";
pokemonSpDefense.textContent = "";
pokemonSpeed.textContent = "";
pokemonTypes.textContent = "";
pokemonSprites.innerHTML = "";
}
searchButton.addEventListener("click",pokemonSearch);
