Tell us what’s happening:
Hi guys, I need help with this. I passed most of the tests except this 2. But if search the name/id of the Pokemon it shows the result accordingly. I tried to fix but i’m still stuck.
" 1. When the #search-input element contains the value Pikachu and the #search-button element is clicked, the values in the #pokemon-name, #pokemon-id, #weight, #height, #hp, #attack, #defense, #special-attack, #special-defense, and #speed elements should be PIKACHU, #25 or 25, Weight: 60 or 60, Height: 4 or 4, 35, 55, 40, 50, 50, and 90, respectively"
" 1. When the #search-input element contains the value 94 and the #search-button element is clicked, the values in the #pokemon-name, #pokemon-id, #weight, #height, #hp, #attack, #defense, #special-attack, #special-defense, and #speedelements should be GENGAR, #94 or 94, Weight: 405 or 405, Height: 15 or 15, 60, 65, 60, 130, 75, and 110, respectively ".
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Share+Tech&family=Share+Tech+Mono&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="styles.css" />
<title>Pokemon Search App</title>
</head>
<body>
<div id="main-container">
<h1>Pokémon Search App</h1>
<div id="second-container">
<div id="display-card">
<div id="description">
<div class="search-box">
<label id="search-form">Search for Pokémon Name or ID:</label>
<input id="search-input" type="text" required></input>
<button id="search-button">Search</button>
</div>
<div id="display-pokemon">
<div id="pokemon-name-container">
<span id="pokemon-name"></span>
<span id="pokemon-id"></span>
</div>
<div id="pokemon-physical-container">
<span id="weight"></span>
<span id="height"></span>
</div>
<div id="pokemon-photo">
<img id="sprite">
</div>
<div id="pokemon-type">
<span id="types"></span>
</div>
<div id="table-stats">
<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>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="index.js"></script>
</body>
</html>
/* file: styles.css */
body {
background-color: #081c15;
color: azure;
font-family: "Share Tech Mono";
}
#display-card {
height: 700px;
width: 416px;
background-color: whitesmoke;
color: black;
padding: 20px;
border-width: 1px;
border-radius: 16px;
box-shadow: 12px 8px rgb(123, 255, 0);
}
#display-pokemon {
display: none;
}
h1 {
text-align: center;
}
#second-container {
display: flex;
justify-content: center;
align-items: center;
}
#description {
padding-right: 10px;
}
.search-box {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
padding-top: 20px;
padding-bottom: 20px;
}
#search-form {
padding-bottom: 10px;
}
#search-input {
padding-top: 5px;
border-radius: 5px;
border-width: 1px;
padding-left: 10px;
padding-bottom: 10px;
}
#search-input:focus {
background-color: #2b9348;
}
#search-button {
cursor: pointer;
margin-left: 10px;
border: solid 1px;
border-radius: 10px;
padding: 10px 15px;
color: black;
background-color: rgb(123, 255, 0);
border-color: black;
}
#search-button:hover {
background-color: #2b9348;
color: white;
}
#display-pokemon {
padding-left: 15px;
}
#pokemon-name {
font-size: 20px;
}
#pokemon-physical-container {
padding-top: 10px;
padding-bottom: 10px;
}
#types {
padding-top: 8px;
}
#pokemon-photo {
display: flex;
justify-content: center;
align-items: center;
padding: 30px;
}
img {
height: 100px;
width: 120px;
}
.types {
background-color: rgb(123, 255, 0);
padding: 12px;
border-radius: 4px;
}
.types:nth-child(2), .types:nth-child(3), .types:nth-child(4) {
margin-left: 5px;
}
#table-stats {
padding-top: 20px;
padding-bottom: 20px;
height: auto;
font-size: 20px;
}
tr,
td,
th {
background-color: rgb(123, 255, 0);
color: black;
border: solid 1px;
text-align: center;
padding: 8px;
width: 100%;
}
/* file: script.js */
const searchBtn = 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 pokemonPhoto = document.getElementById("sprite");
const hp = document.getElementById("hp");
const attack = document.getElementById("attack");
const defense = document.getElementById("defense");
const specialAttack = document.getElementById("special-attack");
const specialDefense = document.getElementById("special-defense");
const speed = document.getElementById("speed");
const pokemonTypes = document.getElementById("types");
const displayPokemon = document.getElementById("display-pokemon");
const fetchPokemon = () => {
const searchInput = document
.getElementById("search-input")
.value.toLowerCase();
displayPokemon.style.display = "none";
const url = `https://pokeapi-proxy.freecodecamp.rocks/api/pokemon/${searchInput}`;
fetch(url)
.then((res) => res.json())
.then((data) => {
const pokemons = data;
pokemonTypes.textContent = "";
if (
searchInput === pokemons.name ||
searchInput === pokemons.id.toString()
) {
displayPokemon.style.display = "block";
pokemonName.textContent =
pokemons.name.toUpperCase();
pokemonId.textContent = `#${pokemons.id}`;
pokemonWeight.textContent = `Weight:${pokemons.weight}`;
pokemonHeight.textContent = `Height:${pokemons.height}`;
pokemonPhoto.src = pokemons.sprites.front_default;
const pokemonsTypes = pokemons.types;
pokemonsTypes.forEach((type) => {
pokemonTypes.innerHTML += `<span class="types" id="types">${type.type.name}</span>`;
});
hp.textContent = `${pokemons.stats[0].base_stat}`;
attack.textContent = `${pokemons.stats[1].base_stat}`;
defense.textContent = `${pokemons.stats[2].base_stat}`;
specialAttack.textContent = `${pokemons.stats[3].base_stat}`;
specialDefense.textContent = `${pokemons.stats[4].base_stat}`;
speed.textContent = `${pokemons.stats[5].base_stat}`;
} else if (
searchInput !== pokemons.name ||
searchInput !== pokemons.id.toString()
) {
alert("Pokémon not found");
}
})
.catch((error) => {
console.log(error);
alert("Pokémon not found");
});
};
searchBtn.addEventListener("click", fetchPokemon);
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36
Challenge Information:
Build a Pokémon Search App Project - Build a Pokémon Search App
