Hi, almost finished the project, but i cant understand why it doesnt let my pass?Any ideas?
<!-- file: index.html -->
/* file: script.js */
/* file: styles.css */
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 OPR/116.0.0.0
Build a Pokémon Search App Project - Build a Pokémon Search App
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 appendHere = document.getElementById("pokemon-info")
const pokemonPic = document.getElementById("sprite")
let pokemonData = [];
let allInfo = {};
let pokemonFound;
let pokemonFoundUrl;
fetch('https://pokeapi-proxy.freecodecamp.rocks/api/pokemon')
.then((res) => res.json())
.then((data) =>{
pokemonData = data.results;
console.log(pokemonData);
})
.catch((err) => console.log('There was an error loading the pokemons')
);
const searchById = () => {
const searchInputValue = searchInput.value;
pokemonFound = "";
pokemonFoundUrl = "";
for (const object of pokemonData){
if (object.id == searchInputValue){
pokemonFound = object;
pokemonFoundUrl = object.url;
return true;
}
}
return false;
}
const getNameIdHeightWeight = async () => {
await fetch(pokemonFoundUrl)
.then((res) => res.json())
.then((data) =>{
allInfo = data;
console.log(allInfo);
})
.catch((err) => console.log('There was an error loading the stats of the pokemon'))
}
const updateIdHeightWeight = () => {
pokemonPic.src=`${allInfo.sprites.front_default}`;
pokemonName.innerHTML = `Name:${allInfo.name.toUpperCase()}`;
pokemonId.innerHTML = `Id:${allInfo.id}`;
pokemonHeight.innerHTML = `Height:${allInfo.height}`;
pokemonWeight.innerHTML =`Weight:${allInfo.weight}`;
console.log(allInfo.stats);
}
let otherStats = [];
let allTypes = [];
const updateOTHER = () => {
allTypes = [];
otherStats = [];
allInfo.stats.forEach(stat => {
console.log(`${stat.stat.name}: ${stat.base_stat}`); //now i have all stats
otherStats.push(stat.base_stat);
})
allInfo.types.forEach(type => {
console.log(`${type.type.name}`);//now i have all types
allTypes.push(type.type.name.toUpperCase());
})
console.log(otherStats); //whole stat array [ 45, 49, 49, 65, 65, 45, ] for id #1
pokemonHp.innerHTML = `HP:${otherStats[0]}`;
pokemonAttack.innerHTML = `Attack:${otherStats[1]}`;
pokemonDefense.innerHTML = `Defense:${otherStats[2]}`;
pokemonSpecialAttack.innerHTML = `Special Attack:${otherStats[3]}`;
pokemonSpecialDefense.innerHTML = `Special Defense:${otherStats[4]}`;
pokemonSpeed.innerHTML = `Speed:${otherStats[5]}`;
pokemonTypes.innerHTML = allTypes;
}
const searchByName = () => {
pokemonFound = "";
pokemonFoundUrl = "";
for (const object of pokemonData){
if (object.name == searchInput.value.toLowerCase()){
pokemonFound = object;
pokemonFoundUrl = object.url;
return true;
}
}
return false;
}
const checkIfOk = () => {
let foundId = searchById();
let foundName = searchByName();
if(!foundId && !foundName){
alert("Pokémon not found");
} else {
if (foundId) searchById();
if (foundName) searchByName();
}
}
const allTogether = async () => {
checkIfOk();
await getNameIdHeightWeight();
updateIdHeightWeight();
updateOTHER();
}
searchButton.addEventListener("click", allTogether);
this is my script
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<input id="search-input" required>
<button id="search-button">Search</button>
<div id="pokemon-info">
<img id="sprite"/>
<p id="pokemon-name"></p>
<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>
<script src="script.js"></script>
</body>
</html>
this is my html
Do you get any errors or hints? Please provide more information.
#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.#search-input element contains the value Pikachu and the #search-button element is clicked, the #types element should contain a single inner element with the value ELECTRIC . Make sure the #types element content is cleared between searches.#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 #speed elements should be GENGAR , #94 or 94 , Weight: 405 or 405 , Height: 15 or 15 , 60 , 65 , 60 , 130 , 75 , and 110 , respectively.#search-input element contains the value 94 and the #search-button element is clicked, the #types element should contain two inner elements with the text values GHOST and POISON , respectively. Make sure the #types element content is cleared between searches.#search-input element contains a valid Pokemon id and the #search-button element is clicked, the UI should be filled with the correct data.The types element should have nested elements for each type.
the
#typeselement should contain a single inner element with the valueELECTRIC.
the
#typeselement should contain two inner elements with the text valuesGHOSTandPOISON, respectively.
so foreach of types createElement with its value in it?
Yes, the types data should be nested inside an element. So one element per type.
<div id="types">
<span>first type</span>
<span>second type</span>
</div>
ok, so i made a func which creates p with each element in types, but it still doesnt pass
const createTypeElement = (arr) => {
pokemonTypes.innerHTML = "";
arr.forEach(el => {
const p = document.createElement("p");
p.textContent = el.toUpperCase();
pokemonTypes.appendChild(p);
})
}
It says that 15, 18 is still wrong
15. 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.
18. When the #search-input element contains the value 94 and the #search-button element is clicked, the #types element should contain two inner elements with the text values GHOST and POISON , respectively. Make sure the #types element content is cleared between searches.
check these, make sure you put in the element only the requested value and no extra tect. Confront with the failed test if the text matches
thanks, it worked, should’ve removed the name: and any text before stats