Build an RPG Creature Search App Project - Build an RPG Creature Search App

JavaScript
1

Tell us what’s happening:

Hello! I think so far, my work functions such that it suffices the function expected out of it. I dont get how i still violate step 16 and 18 though.

Your code so far

<!-- file: index.html -->


const searchBtn = document.getElementById("search-button");

const searchInput = document.getElementById("search-input");

//STATS//

const creatureName = document.getElementById("creature-name");

const id = document.getElementById("creature-id");

const weight1 = document.getElementById("weight");

const height1 = document.getElementById("height");

const type1 =document.getElementById("types");

const hp1 = document.getElementById("hp");

const attack1 = document.getElementById("attack")

const defense1 = document.getElementById("defense");

const specialATK = document.getElementById("special-attack");

const specialDEF = document.getElementById("special-defense");

const speed1 = document.getElementById("speed");

searchBtn.addEventListener('click', () =>{ fetchData(); console.log('fetch');

type1.innerText = ''

creatureName.innerText = '';

id.innerText = '';

weight1.innerText= '';

height1.innerText = '';

hp1.innerText = '';

attack1.innerText ='';

defense1.innerText = '';

specialATK.innerText = '';

specialDEF.innerText = '';

speed1.innerText = '';

})

async function fetchData(){

;

try{

const response = await fetch("https://rpg-creature-api.freecodecamp.rocks/api/creatures");

if(!response.ok){

console.log("Error Could not Fetch Resource")

return;

}

const data = await response.json()

let creatureExist = false;

for(let i = data.length - 1; i >= 0; i--){

console.log(data[i].name)

if(data[i].name === searchInput.value || data[i].id === parseInt(searchInput.value)){

creatureExist = true;

}

}

if (!creatureExist){

alert("Creature not found.")

}

else{

console.log("creature found :)")

let findName = searchInput.value;

console.log(findName)

try{ const statsResponse = await fetch(`https://rpg-creature-api.freecodecamp.rocks/api/creature/${findName}`)

const stats = await statsResponse.json()

console.log(stats)

creatureName.innerText = stats.name;

id.innerText = stats.id;

weight1.innerText= stats.weight;

height1.innerText = stats.height;

for(let keys in stats.types){

type1.innerText += ` ${stats.types[keys].name.toUpperCase()} `;

}

hp1.innerText = stats.stats[0].base_stat;

attack1.innerText = stats.stats[1].base_stat;

defense1.innerText = stats.stats[2].base_stat;

specialATK.innerText = stats.stats[3].base_stat;

specialDEF.innerText = stats.stats[4].base_stat;

speed1.innerText = stats.stats[5].base_stat;

}

catch(error){console.log(error)}

}

}

catch(err){console.log(err)}

}/* file: script.js 


*/


/* 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/137.0.0.0 Safari/537.36 Edg/137.0.0.0

Challenge Information:

Build an RPG Creature Search App Project - Build an RPG Creature Search App

2

Does your code satisfy the instruction in Test #18?

two elements should be added within the #types element that contain text values WATER and ROCK , respectively.

3

Yes , all elements are that exist within the object is added in the type class innertext

4

I think the fix was to add elements adding the type inner text and appending it to type span