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

JavaScript
1

Tell us what’s happening:

My code is not passing for the last 5 tests. Can any one help me with improving the code? Thanks

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Document</title>
  </head>

  <body>
<input type="text" name="creature" id="search-input" required/> 
<button id="search-button">Search</button>
<div id="creature-name"></div>
<div id="creature-id"></div>
<div id="weight"></div>
<div id="height"></div>
<div id="types"></div>
<div id="hp"></div>
<div id="attack"></div>
<div id="defense"></div>
<div id="special-attack"></div>
<div id="special-defense"></div>
<div id="speed"></div>
<script src="script.js"></script>
     </body>
</html>


/* file: script.js */
const searchInput = document.getElementById("search-input");
const searchBtn = document.getElementById("search-button");
const creatureName = document.getElementById("creature-name");
const creatureId = document.getElementById("creature-id");
const creatureWeight = document.getElementById("weight");
const creatureHeight = document.getElementById("height");
const creatureTypes = document.getElementById("types");
const creatureHp = document.getElementById("hp");
const creatureAttack = document.getElementById("attack");
const creatureDefense = document.getElementById("defense");
const creatureSpecialAttack = document.getElementById("special-attack");
const creatureSpecialDefense = document.getElementById("special-defense");
const creatureSpeed = document.getElementById("speed");

const getCreature = async () => {
  try {
const creatureName = searchInput.value.toLowerCase();
const creatureId = searchInput.value.toLowerCase();
    
   const res = await fetch(`https://rpg-creature-api.freecodecamp.rocks/api/creatures/${creatureName}${creatureId}`);
    const data = await res.json();
getCreatureInfo(data);
  } catch (err) {
    alert ("Creature not found")
    console.log(err);
  }
};

const getCreatureInfo = (data) => {
const { name, id, weight, height, types, stats } = data;

creatureName.textContent = `${name[0].toUpperCase() + name.slice(1)}`;
creatureId.textContent = `#${id}`;
creatureWeight.textContent = `Weight: ${weight}`;
creatureHeight.textContent = `Height: ${height}`;

creatureHp.textContent=stats[0].base_stat;
creatureAttack.textContent=stats[1].base_stat;
creatureDefense.textContent=stats[2].base_stat;
creatureSpecialAttack.textContent=stats[3].base_stat;
creatureSpecialDefense.textContent=stats[4].base_stat;
creatureSpeed.textContent=stats[5].base_stat;

creatureTypes.innerHTML = types.map(obj => `
<span>${obj.type.name[0].toUpperCase() + obj.type.name.slice(1)}</span>`).join(" ");

};

searchBtn.addEventListener ("click", e => {
  e.preventDefault();
  getCreature();
});

searchInput.addEventListener ("keydown", e => {
 if (e.key==="Enter") {searchBtn.click()}
});




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

Challenge Information:

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

2

have you tried your app? what’s the behavior when you do the things described in the tests?

3

Yes I have tried but the test for the last 5 user stories doesn’t pass. I can post it here for you. Test 15, 16, 17, 18 and 20 do not pass.

4

if you try to do what the last 5 user stories say, what does your app do?

5

The responses needed in the app do not show. Any input i initiate returns “creature not found”.

6

try to figure out why then