Tell us what’s happening:
Testing my code, all tasks pass except 14. When I type in Red or red though, it does not find anything. It alerts saying the correct response but still I fail this task.
Failed:14. When the #search-input element contains the value Red and the #search-button element is clicked, an alert should appear with the text “Pokémon not found”.
Forgive the ugliness, I haven’t completed CSS or HTML .
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<h1 class="title">Pokemon Card Search App</h1>
<main>
<input id="search-input" placeholder="Enter Pokemon Name" required></input><button id="search-button">Search</button>
<div class= "pokemon-card">
<p id="pokemon-name"></p>
<img id="sprite" src="">
<p id="pokemon-id"></p><p id="weight"></p>
<p id="height"></p>
<p id="types"></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>
<div id="test-container" class="test-container"></div>
</main>
<script src="script.js"></script>
</body>
</html>
/* file: script.js */
const allPokemon = "https://pokeapi-proxy.freecodecamp.rocks/api/pokemon";
const findPokemon = "https://pokeapi-proxy.freecodecamp.rocks/api/pokemon/";
const searchInput = document.getElementById("search-input");
const searchBtn = document.getElementById("search-button");
const testContainer = document.getElementById("test-container");
const pokemonHeaderData = {};
let pokemonName = document.getElementById("pokemon-name");
let pokemonId = document.getElementById("pokemon-id");
let pokemonWeight = document.getElementById("weight");
let pokemonHeight = document.getElementById("height");
let pokemonTypes = document.getElementById("types");
let pokemonHp = document.getElementById("hp");
let pokemonAttack = document.getElementById("attack");
let pokemonDefense = document.getElementById("defense");
let pokemonSpecialAttack = document.getElementById("special-attack");
let pokemonSpecialDefense = document.getElementById("special-defense");
let pokemonSpeed = document.getElementById("speed");
let pokemonSprite = document.getElementById("sprite");
const fetchAllPokemon = async () => {
try {
const res = await fetch(allPokemon);
const data = await res.json();
showAllPokemon(data);
} catch (err) {
console.log(err);
}
};
fetchAllPokemon();
const showAllPokemon = (data) => {
const pokemonList = data.results;
pokemonList.forEach((pokemon) => {
const pokemonId = pokemon.url.split("/").slice(-2, -1)[0];
const pokemonName = pokemon.name;
pokemonHeaderData[pokemonName] = {
name: pokemon.name,
id: pokemonId,
url: pokemon.url
};
pokemonHeaderData[pokemonId] = {
name: pokemon.name,
id: pokemonId,
url: pokemon.url
};
console.log(pokemonName);
});
searchBtn.addEventListener("click", () => {
const searchValue = searchInput.value.trim().toLowerCase();
const searchValueAsNumber = Number(searchValue);
if (!isNaN(searchValueAsNumber) && searchValueAsNumber in pokemonHeaderData) {
fetchPokemonStats(searchValueAsNumber);
return;
} else if (searchValue in pokemonHeaderData) {
fetchPokemonStats(searchValue);
return;
} else {
alert("Pokémon not found");
return;
}
});
const fetchPokemonStats = async (searchValue) => {
try {
const res = await fetch(pokemonHeaderData[searchValue].url);
const data = await res.json();
showPokemonStats(data);
} catch (err) {
console.log(err);
}
};
const showPokemonStats = (data) => {
pokemonSprite.src = data.sprites.front_default;
pokemonName.textContent = data.name.charAt(0).toUpperCase() + data.name.slice(1);
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}`;
pokemonSpecialAttack.textContent = `${data.stats[3].base_stat}`;
pokemonSpecialDefense.textContent = `${data.stats[4].base_stat}`;
pokemonSpeed.textContent = `${data.stats[5].base_stat}`;
// Clear Types before searching
pokemonTypes.textContent = "";
data.types.forEach((type, index) => {
const typeElement = document.createElement("span");
typeElement.textContent = type.type.name.toUpperCase();
// Append the type element
pokemonTypes.appendChild(typeElement);
// If it's not the last type, append a comma
if (index < data.types.length - 1) {
pokemonTypes.appendChild(document.createTextNode(", "));
}
});
};
};
/* file: styles.css */
body {
background-color: #3D7DCA;
}
h1 {
color: #FFCB05;
font: bold 24px 'Arial', sans-serif;
}
#text {
background-color: #0a0a23;
color: #ffffff;
padding: 10px;
}
button {
cursor: pointer;
color: #0a0a23;
background-color: #feac32;
background-image: linear-gradient(#fecc4c, #ffac33);
border: 3px solid #feac32;
}
#pokemon-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.pokemon-card {
border-radius: 15px;
width: 300px;
height: auto; /* Let height adjust based on content */
background-color: #FFCB05;
margin: 20px;
color: #003A70;
font: 12px 'Tahoma', sans-serif;
padding: 20px; /* Add padding inside the card */
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
text-align: center;
}
#pokemon-name {
font: bold 18px 'Tahoma', sans-serif;
text-align: left;
}
#sprite {
justify-content: auto;
}
#sprite {
display: block;
margin: 0 auto;
border-radius: 3px;
background-color: white;
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36
Challenge Information:
Build a Pokémon Search App Project - Build a Pokémon Search App