My code can’t complete the tests. It fails on 14, 16, 19. I’m lost.
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”
When i input Red in to the search bar and press the button, i get the alert.
16: When the #search-input element contains the value Pikachu and the #search-button element is clicked, you should add an img element with the id of “sprite” and the src set to the Pokémon’s front_default sprite to the page.
When i enter Pikachu, i can see the image
19: When the #search-input element contains the value 94 and the #search-button element is clicked, you should add an img element with the id of “sprite” and the src set to the Pokémon’s front_default sprite to the page.
Again i inputed 94 into the search bar and it displayed an image.
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<input id="search-input" required>
<button id="search-button">search</button>
<main>
<h4>Your pokemon</h4>
<div id="images"></div>
<p>name: <span id="pokemon-name"></span></p>
<p>id: <span id="pokemon-id"></span></p>
<p>weight: <span id="weight"></span></p>
<p>height: <span id="height"></span></p>
<p>types: <div id="types"></div></p>
<p>hp: <span id="hp"></span></p>
<p>attack: <span id="attack"></span></p>
<p>defense: <span id="defense"></span></p>
<p>special attack: <span id="special-attack"></span></p>
<p>special defense: <span id="special-defense"></span></p>
<p>speed: <span id="speed"></span></p>
</main>
<script src="script.js"></script>
</body>
</html>
CSS:
p {
margin: 0;
}
Javascript:
let ids = [];
let names = [];
let completedFetch = false;
const url = "https://pokeapi-proxy.freecodecamp.rocks/api/pokemon";
async function fetchData() {
try {
const arr = (await (await fetch(url)).json()).results;
ids = new Int32Array(arr.length);
names = new Array(arr.length);
arr.forEach((object, ind, array) => {
ids[ind] = object.id;
names[ind] = object.name;
});
completedFetch = true;
} catch {
console.log("error getting data");
}
}
fetchData();
const pokName = document.getElementById("pokemon-name");
const id = document.getElementById("pokemon-id");
const weight = document.getElementById("weight");
const height = document.getElementById("height");
const types = document.getElementById("types");
const hp = document.getElementById("hp");
const attack = document.getElementById("attack");
const defense = document.getElementById("defense");
const spAttack = document.getElementById("special-attack");
const spDefense = document.getElementById("special-defense");
const speed = document.getElementById("speed");
const img = document.getElementById("images");
const input = document.getElementById("search-input");
const btn = document.getElementById("search-button");
//main logic
const notFound = () => {
alert("Pokémon not found");
}
async function fill(key) {
try {
const object = await (await fetch(url+"/"+key)).json();
pokName.textContent = object.name.toUpperCase();
id.textContent = object.id;
weight.textContent = object.weight;
height.textContent = object.height;
object.types.forEach(el=>{
types.innerHTML += `<p>${el.type.name.toUpperCase()}</p>`;
})
const stats = {};
object.stats.forEach(el => {
stats[el.stat.name] = el.base_stat;
})
hp.textContent = stats.hp;
attack.textContent = stats.attack;
defense.textContent = stats.defense;
spAttack.textContent = stats['special-attack'];
spDefense.textContent = stats['special-defense'];
speed.textContent = stats.speed;
img.innerHTML = `<img src="${object.sprites.front_default}" id="sprites">`;
} catch {
console.log("error filling data for pokemon");
}
}
const findId = () => {
const id = ids.find(id => id == input.value);
if (id===undefined){
notFound();
} else {
fill(id);
}
}
const findName = () => {
let arr = [...input.value].filter(char => /[a-zA-Z-]/.test(c => c == c)).map(char => {
if(!/A-Z/.test(char)) {
return char.toLowerCase();
} else {
return char;
}
}).join("");
if (names.find(e => e == arr)) {
fill(arr);
} else {
notFound();
}
}
btn.addEventListener("click", () => {
types.innerHTML = "";
if (!completedFetch){
for (let i = 0; i < 50000; i++) {}
if (!completedFetch) {
console.log("error, not yet gotten the data");
return;
}
}
if (/^[0-9]+$/.test(input.value)){
findId();
} else {
findName();
}
});