Tell us what’s happening:
Hello!
I have some trouble with step 21.
Every time that I enter a value i get the information just right and every other step is checked.
No clue where I could be mistaken.
Thanks!
Your code so far
<!-- file: index.html -->
<input id="search-input" required></input>
<button id="search-button">Boton</button>
<p id="creature-name"></p>
<p id="creature-id"></p>
<p id="weight"></p>
<p id="height"></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 id="types"></div>
<script src="script.js"></script>
/* file: script.js */
const searchInput = document.getElementById('load-more-btn');
const searchButton = document.getElementById('search-button');
const creatureName = document.getElementById('creature-name');
const creatureId = document.getElementById('creature-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 specialAttack = document.getElementById('special-attack');
const specialDefense = document.getElementById('special-defense');
const speed = document.getElementById('speed');
searchButton.addEventListener("click", async () => {
let respuesta = document.getElementById("search-input").value;
console.log("console log de respuesta: " + respuesta);
let checkRespuesta = Number(respuesta);
console.log("console log de checkResuesta: " + checkRespuesta);
if (!isNaN(checkRespuesta)) {
console.log("La respuesta es efectivamente un numero");
if (checkRespuesta >= 1 && checkRespuesta <= 20) {
const datosCreature = await pedirDatosConcretos(checkRespuesta);
console.log("aqui estamos antes de la funcion de extraerStats");
console.log(extraerStats(datosCreature.stats));
const arrayStats = extraerStats(datosCreature.stats);
console.log(arrayStats)
const arrayTypes = extraerTypes(datosCreature.types)
console.log(arrayTypes)
console.log(datosCreature);
console.log("El nombre es" + datosCreature.name)
console.log("El id es" + datosCreature.id)
console.log("El weight es" + datosCreature.weight)
console.log("El height es" + datosCreature.height)
console.log("El hp es" + arrayStats[0])
console.log("El attack es" + arrayStats[1])
console.log("El defense es" + arrayStats[2])
console.log("El special-attack es" + arrayStats[3])
console.log("El special-defense es" + arrayStats[4])
console.log("El speed es" + arrayStats[5])
console.log("El type es" + arrayTypes)
actualizarInformacion(datosCreature.name, datosCreature.id, datosCreature.weight, datosCreature.height,
arrayStats[0], arrayStats[1], arrayStats[2], arrayStats[3], arrayStats[4], arrayStats[5],
arrayTypes)
}
}
else {
console.log("La respuesta es efectivamente una palabra");
pedirDatosConcretos(respuesta);
const listaNombres = await pedirNombresParaLista()
if (listaNombres.includes(respuesta)) {
console.log("el nombre esta en la lista")
const datosCreature = await pedirNombresConcretos(respuesta)
console.log("aqui estamos antes de la funcion de extraerStats");
console.log(extraerStats(datosCreature.stats));
const arrayStats = extraerStats(datosCreature.stats);
console.log(arrayStats)
const arrayTypes = extraerTypes(datosCreature.types)
console.log(arrayTypes)
console.log(datosCreature);
console.log("El nombre es" + datosCreature.name)
console.log("El id es" + datosCreature.id)
console.log("El weight es" + datosCreature.weight)
console.log("El height es" + datosCreature.height)
console.log("El hp es" + arrayStats[0])
console.log("El attack es" + arrayStats[1])
console.log("El defense es" + arrayStats[2])
console.log("El special-attack es" + arrayStats[3])
console.log("El special-defense es" + arrayStats[4])
console.log("El speed es" + arrayStats[5])
console.log("El type es" + arrayTypes)
actualizarInformacion(datosCreature.name, datosCreature.id, datosCreature.weight, datosCreature.height,
arrayStats[0], arrayStats[1], arrayStats[2], arrayStats[3], arrayStats[4], arrayStats[5],
arrayTypes)
}
else {
console.log("el nombre NO esta en la lista")
alert("Creature not found");
}
}
});
async function pedirDatosConcretos(id) {
const res = await fetch(`https://rpg-creature-api.freecodecamp.rocks/api/creature/${id}`);
const data = await res.json();
return data;
}
function extraerStats(dataStats) {
return dataStats.map(stat => `${stat.base_stat}`);
return dataStats.map(stat => `${stat.name}: ${stat.base_stat}`);
}
function extraerTypes(dataTypes) {
return dataTypes.map(test => `${test.name}`)
}
async function pedirNombresConcretos(name) {
const res = await fetch(`https://rpg-creature-api.freecodecamp.rocks/api/creature/${name}`);
const data = await res.json();
return data;
}
function actualizarInformacion(creatureNameVal, creatureIdVal, weightVal, heightVal, hpVal, attackVal, defenseVal, specialAttackVal, specialDefenseVal, speedVal, typesVal) {
types.innerHTML = "";
creatureName.innerText = creatureNameVal.toUpperCase();
creatureId.innerText = creatureIdVal;
weight.innerText = "Weight: " + weightVal;
height.innerText = "Height: " + heightVal;
hp.innerText = hpVal;
attack.innerText = attackVal;
defense.innerText = defenseVal;
specialAttack.innerText = specialAttackVal;
specialDefense.innerText = specialDefenseVal;
speed.innerText = speedVal;
typesVal.forEach(type => {
let p = document.createElement("p");
p.innerText = type.toUpperCase(); // WATER, ROCK
types.appendChild(p);
});
}
async function pedirNombresParaLista() {
const res = await fetch(`https://rpg-creature-api.freecodecamp.rocks/api/creatures`);
const data = await res.json();
const nombres = data.map(creature => creature.name)
console.log(nombres)
return nombres;
}
/* file: styles.css */
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/139.0.0.0 Safari/537.36
Challenge Information:
Build an RPG Creature Search App Project - Build an RPG Creature Search App