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

JavaScript
1

Tell us what’s happening:

i am stuck here .. my code cannot pass the tests from 15 to 20.. can you plese give me a hint whats wrong

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>RPG Creature Search</title>
  <style>
    body { font-family: Arial, sans-serif; margin: 20px; }
    #types span { display: inline-block; margin-right: 5px; padding: 3px 6px; background:#eee; border-radius:4px; }
  </style>
</head>
<body>
  <h1>RPG Creature Search</h1>

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

  <h2 id="creature-name"></h2>
  <p id="creature-id"></p>
  <p id="weight"></p>
  <p id="height"></p>
  <div id="types"></div>

  <ul>
    <li>HP: <span id="hp"></span></li>
    <li>Attack: <span id="attack"></span></li>
    <li>Defense: <span id="defense"></span></li>
    <li>Special Attack: <span id="special-attack"></span></li>
    <li>Special Defense: <span id="special-defense"></span></li>
    <li>Speed: <span id="speed"></span></li>
  </ul>

  <script src="script.js"></script>
</body>
</html>


/* file: styles.css */


/* file: script.js */
const searchInput       = document.getElementById('search-input');
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');

const BASE_URL = 'https://rpg-creature-api.freecodecamp.rocks/api/creature/';

searchButton.addEventListener('click', async () => {
  const query = searchInput.value.trim();
  if (!query) return; // required input

  try {
    const res = await fetch(`${BASE_URL}${query.toLowerCase()}`);
    if (!res.ok) throw new Error('Creature not found');

    const data = await res.json();
    displayCreature(data);
  } catch (err) {
    alert('Creature not found');
    clearDisplay();
  }
});

function displayCreature(data) {
  // Creature name and id
  creatureName.textContent = data.name.toUpperCase();     // e.g. PYROLYNX
  creatureId.textContent   = `#${data.id}`;               // e.g. #1

  // weight and height
  weight.textContent = `Weight: ${data.weight}`;          // exactly what tests allow
  height.textContent = `Height: ${data.height}`;

  // types
  types.innerHTML = '';
  data.types.forEach(t => {
    const span = document.createElement('span');
    span.textContent = t.type.name.toUpperCase();         // FIRE, WATER, ROCK etc
    types.appendChild(span);
  });

  // stats
  hp.textContent             = getStat(data, 'hp');
  attack.textContent         = getStat(data, 'attack');
  defense.textContent        = getStat(data, 'defense');
  specialAttack.textContent  = getStat(data, 'special-attack');
  specialDefense.textContent = getStat(data, 'special-defense');
  speed.textContent          = getStat(data, 'speed');
}

function getStat(data, statName) {
  const stat = data.stats.find(s => s.stat.name === statName);
  return stat ? stat.base_stat : '';
}

function clearDisplay() {
  creatureName.textContent = '';
  creatureId.textContent = '';
  weight.textContent = '';
  height.textContent = '';
  types.innerHTML = '';
  hp.textContent = '';
  attack.textContent = '';
  defense.textContent = '';
  specialAttack.textContent = '';
  specialDefense.textContent = '';
  speed.textContent = '';
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/140.0.0.0 Safari/537.36

Challenge Information:

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

2

there is something that is triggering the alert for valid values

image
image882×437 34.3 KB

If I add a console.log(err) inside the catch part, I see that the error being caught is not from the API, it’s [TypeError: Cannot read properties of undefined (reading 'name')]

you need to do some debugging

1 Like