Build an RPG Creature Search App

JavaScript
1

Hello. I’m in need of an assistance here to tackle this final project. I spent hours without finding the issue(s) as to why my code isnt working. I’d always get stuck in step 15 onward.

const searchButton = document.getElementById('search-button');
const searchInput = document.getElementById('search-input');
const creatureName = document.getElementById('creature-name');
const creatureId = document.getElementById('creature-id');
const weight = document.getElementById('weight');
const height = document.getElementById('height');
const creatureTypes = 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');

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

// Display creature function
const displayCreature = (creature) => {
  const { name, id, weight, height, types, stats } = creature;
  // Set basic info
  creatureName.textContent = name.toUpperCase();
  creatureId.textContent = `#${id}`;
  weight.textContent = `Weight: ${weight}`;
  height.textContent = `Height: ${height}`;
  // Replace the stats assignment in displayCreature() with this:
  hp.textContent = stats[0].base_stat;
  attack.textContent = stats[1].base_stat;
  defense.textContent = stats[2].base_stat;
  spAttack.textContent = stats[3].base_stat;
  spDefense.textContent = stats[4].base_stat;
  speed.textContent = stats[5].base_stat;

  // Set types
  creatureTypes.innerHTML = types.map((obj) =>
    `<span>${obj.type.name.toUpperCase()}</span>`
  ).join('');

};

// Event listeners
searchButton.addEventListener('click', (e) => {
  e.preventDefault();
  fetchCreature();
});

searchInput.addEventListener('keydown', (e) => {
  if (e.key === 'Enter') {
    searchButton.click();
  }
});
2

Hi,

Would you post your HTML, please?

3

Here’s my HTML:

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>RPG Creature Search</title>
</head>

<body>
  <input type="text" id="search-input" placeholder="Enter creature name or ID..." required>
  <button id="search-button">Search</button>

  <h2 id="creature-name"></h2>
  <p id="creature-id"></p>
  <div id="types""></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>
4

What about your code isn’t working exactly?

5

Look carefully at your divs.

6

fixed the typo, but that’s not causing the issue of step 15 onward

7

It’s not really fetching the creature data from the API as I type in the name or the ID of the creature, always gave me “Creature not found” notification,

8

Look again. I’m not referring to a typo. There is something there that shouldn’t be there.

9

I would add more console.log statements to check where in the fetching the error is coming

10

What message are you getting in the console when you get, “Creature not found”?

11

just removed the duplicate, but still same issue

1 Like
12

TypeError: Cannot create property ‘textContent’ on number ‘42’

13

So where are you setting a textContent? Any why does JavaScript think you are trying to set a property of a number? (I know the answer to this, but you should try to answer these questions as its going to unlock a bit of debuging)

14

no idea, really cant do this

15

Made a slight adjustment to the JS but still not working:

const searchButton = document.getElementById('search-button');
const searchInput = document.getElementById('search-input');
const creatureName = document.getElementById('creature-name');
const creatureId = document.getElementById('creature-id');
const weight = document.getElementById('weight');
const height = document.getElementById('height');
const creatureTypes = 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');

// Search function - handles API call and error checking
const searchCreature = async () => {
  try {
    const creatureSearch = searchInput.value.toLowerCase();
    const api_url = `https://rpg-creature-api.freecodecamp.rocks/api/creature/${creatureSearch}`;
    const res = await fetch(api_url);
    const data = await res.json();

    const creature = data.find((c) => c.name.toLowerCase() === creatureSearch || c.id.toString() === creatureSearch)

    if (creature) {
      displayCreature(creature)
    } else {
      alert("Creature not found")
    }

  } catch (err) {
    console.error(err);
    alert("Creature not found");
  }
}

// Display creature function - populates the UI with creature data
const displayCreature = (creature) => {
  const { name, id, weight, height, types, stats } = creature;

  // Set basic info - using exact formatting expected by tests
  creatureName.textContent = name.toUpperCase();
  creatureId.textContent = `#${id}`;
  weight.textContent = `Weight: ${weight}`;
  height.textContent = `Height: ${height}`;

  // Set stats - the API returns stats in a specific order
  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;

  // Clear previous types and add new ones
  creatureTypes.innerHTML = '';
  types.forEach((type) => {
    const typeElement = document.createElement('span');
    typeElement.textContent = type.toUpperCase();
    creatureTypes.appendChild(typeElement);
  });
};

// Event listeners - handle user interactions
searchButton.addEventListener('click', searchCreature);

// Allow Enter key to trigger search
searchInput.addEventListener('keydown', (e) => {
  if (e.key === 'Enter') {
    searchCreature();
  }
});
16

could you check my latest code above which still doesnt fix the issue?

17

what issues do you have now? how has the behaviour of your code changed since the last you posted?

18

Issue is largely the same, still cant get past tests 14 onward. I only made small adjustments for code-clarity.

19

so the error TypeError: Cannot create property ‘textContent’ on number ‘42’ is still happening?

20

no console just shows the tests that need to be passed