Tell us what’s happening:
I keep failing test 14, can someone help as my code seems to do what the test requires.
Your code so far
<!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>
<h1 id="title">Pokémon Search App</h1>
<input id ="search-input" placeholder="Enter Pokémon Name" required></input>
<button id="search-button">Search</button>
<div id="pokemon">
<div id="pokemon-name"></div>
<div id="pokemon-id"></div>
<div id="weight"></div>
<div id="height"></div>
<div id="types"></div>
<div id="hp"></div>
<div id="attack"></div>
<div id="defense"></div>
<div id="special-attack"></div>
<div id="special-defense"></div>
<div id="speed"></div>
</div>
<script src="script.js"></script>
</body>
</html>
document.addEventListener('DOMContentLoaded', () => {
const searchInput = document.getElementById('search-input');
const searchButton = document.getElementById('search-button');
const displayContainer = document.getElementById('pokemon');
const pokemonNameDisplay = document.getElementById('pokemon-name');
const pokemonIdDisplay = document.getElementById('pokemon-id');
const weightDisplay = document.getElementById('weight');
const heightDisplay = document.getElementById('height');
const typesDisplay = document.getElementById('types');
const hpDisplay = document.getElementById('hp');
const attackDisplay = document.getElementById('attack');
const defenseDisplay = document.getElementById('defense');
const specialAttackDisplay = document.getElementById('special-attack');
const specialDefenseDisplay = document.getElementById('special-defense');
const speedDisplay = document.getElementById('speed');
fetch("https://pokeapi-proxy.freecodecamp.rocks/api/pokemon")
.then(response => {
if (!response.ok) {
throw new Error("Network response was not ok");
}
return response.json();
})
.then(data => {
searchButton.addEventListener('click', () => {
if (!searchInput) {
alert("Search input element not found");
return;
}
const pokeValue = searchInput.value.trim();
const pokemon = data.results.find(p => p.name.toLowerCase() === pokeValue.toLowerCase() || p.id.toString() === pokeValue);
typesDisplay.innerHTML = '';
const existingImage = document.getElementById('sprite');
if (existingImage) {
existingImage.remove();
}
if (pokemon) {
fetch(pokemon.url)
.then(response => {
if (!response.ok) {
throw new Error("Network response was not ok");
}
return response.json();
})
.then(pokemonDetails => {
const pokemonName = pokemonDetails.name.toUpperCase();
const pokemonId = pokemonDetails.id;
const pokemonWeight = pokemonDetails.weight;
const pokemonHeight = pokemonDetails.height;
const pokemonTypes = pokemonDetails.types.map(type => type.type.name.toUpperCase());
const pokemonHp = pokemonDetails.stats.find(stat => stat.stat.name === 'hp').base_stat;
const pokemonAttack = pokemonDetails.stats.find(stat => stat.stat.name === 'attack').base_stat;
const pokemonDefense = pokemonDetails.stats.find(stat => stat.stat.name === 'defense').base_stat;
const pokemonSpecialAttack = pokemonDetails.stats.find(stat => stat.stat.name === 'special-attack').base_stat;
const pokemonSpecialDefense = pokemonDetails.stats.find(stat => stat.stat.name === 'special-defense').base_stat;
const pokemonSpeed = pokemonDetails.stats.find(stat => stat.stat.name === 'speed').base_stat;
const pokePic = document.createElement('img');
pokePic.id = "sprite";
pokePic.src = pokemonDetails.sprites.front_default;
displayContainer.appendChild(pokePic);
pokemonNameDisplay.textContent = pokemonName;
pokemonIdDisplay.textContent = pokemonId;
weightDisplay.textContent = pokemonWeight;
heightDisplay.textContent = pokemonHeight;
hpDisplay.textContent = pokemonHp;
attackDisplay.textContent = pokemonAttack;
defenseDisplay.textContent = pokemonDefense;
specialAttackDisplay.textContent = pokemonSpecialAttack;
specialDefenseDisplay.textContent = pokemonSpecialDefense;
speedDisplay.textContent = pokemonSpeed;
pokemonTypes.forEach(type => {
const typeElement = document.createElement('div');
typeElement.textContent = type;
typesDisplay.appendChild(typeElement);
});
})
.catch(error => {
console.error("Error fetching Pokémon details:", error);
});
} else {
alert("Pokémon not found");
}
});
})
.catch(error => {
console.error("Error:", error);
});
});
/* Basic styles */
body {
font-family: Arial, sans-serif;
background-color: #EAF4EB;
margin: 0;
padding: 0;
}
h1#title {
color: #3D6B35;
text-align: center;
margin-top: 20px;
}
input#search-input {
display: block;
margin: 20px auto;
padding: 10px;
border: 2px solid #3D6B35;
border-radius: 5px;
width: 80%;
max-width: 400px;
}
button#search-button {
display: block;
margin: 10px auto;
padding: 10px 20px;
background-color: #3D6B35;
color: #FFFFFF;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
button#search-button:hover {
background-color: #285022;
}
div#pokemon {
text-align: center;
margin-top: 20px;
}
div#pokemon div {
background-color: #C6E3CC;
color: #3D6B35;
padding: 10px;
margin: 5px auto;
border-radius: 5px;
max-width: 300px;
}
img#sprite {
display: block;
margin: 10px auto;
width: 150px;
height: 150px;
border: 2px solid #3D6B35;
border-radius: 10px;
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36 Edg/131.0.0.0
Challenge Information:
Build a Pokémon Search App Project - Build a Pokémon Search App