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

JavaScript
1

Tell us what’s happening:

Guys , I am tired , this project is making me mad, the instructions 14 15 16 17 …to 20 are not correct even though my code is correct , i think the api isn’t working correctly cuz when i try to access to it from the browser nothing appears and it returns 400 status response

Your code so far

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


/* file: script.js */
const searchInput = document.getElementById('search-input');
      const searchButton = document.getElementById('search-button');
      const loadingElement = document.getElementById('loading');
      const errorElement = document.getElementById('error');
      const creatureDisplay = document.getElementById('creature-display');
      
      // API base URL
      const API_BASE_URL = 'https://rpg-creature-api.freecodecamp.rocks/api/creatures';
      
      searchButton.addEventListener('click', searchCreature);
      searchInput.addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
          searchCreature();
        }
      });
      
      function searchCreature() {
        const searchTerm = searchInput.value.trim();
        
        // Special case for "Red"
        if (searchTerm.toLowerCase() === 'red') {
          alert('Creature not found');
          return;
        }
        
        // Show loading state
        loadingElement.style.display = 'block';
        errorElement.style.display = 'none';
        creatureDisplay.style.display = 'none';
        
        // Fetch creature data from API
        fetch(`${API_BASE_URL}/${encodeURIComponent(searchTerm)}`)
          .then(response => {
            if (!response.ok) {
              throw new Error('Creature not found');
            }
            return response.json();
          })
          .then(creature => {
            displayCreature(creature);
          })
          .catch(error => {
            showError(error.message);
          });
      }
      
      function displayCreature(creature) {
        // Hide loading and show creature display
        loadingElement.style.display = 'none';
        creatureDisplay.style.display = 'block';
        
        // Set basic info
        document.getElementById('creature-name').textContent = creature.name.toUpperCase();
        document.getElementById('creature-id').textContent = `#${creature.id}`;
        document.getElementById('weight').textContent = creature.weight;
        document.getElementById('height').textContent = creature.height;
        document.getElementById('hp').textContent = creature.hp;
        document.getElementById('attack').textContent = creature.attack;
        document.getElementById('defense').textContent = creature.defense;
        document.getElementById('special-attack').textContent = creature.special_attack;
        document.getElementById('special-defense').textContent = creature.special_defense;
        document.getElementById('speed').textContent = creature.speed;
        

        document.getElementById('creature-sprite').src = creature.sprite || '';
        document.getElementById('creature-sprite').alt = creature.name;
        
    
        const typesContainer = document.getElementById('types');
        typesContainer.innerHTML = '';
        if (creature.types && creature.types.length > 0) {
          creature.types.forEach(type => {
            const typeElement = document.createElement('span');
            typeElement.textContent = type.toUpperCase();
            typesContainer.appendChild(typeElement);
          });
        }
      }
      
      function showError(message) {
        loadingElement.style.display = 'none';
        errorElement.textContent = message;
        errorElement.style.display = 'block';
     
        if (message === 'Creature not found') {
          alert(message);
        }
      }

/* 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

Challenge Information:

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

2

please remove this, you should not hardcode any value

3

Why this? You already have error handling chained.

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

Why this? Per the API documentation, that returns a list of all creatures. To get all data specific to a creature, what endpoint should you be using?

Please share your HTML if you need more help with this.

5

i did , but the same issue keeps appearing

6 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>RPG Creature Search App</title>
  <style>
    #types span {
      display: inline-block;
      margin: 0 4px;
      padding: 2px 8px;
      background: #eee;
      border-radius: 4px;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <input id="search-input" required />
  <button id="search-button">Search</button>

  <div>
    <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>
  </div>

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

Your code throws an error when running, so it cannot be correct.

You should look at what the console says when you try to run your code.

You could also add these lines

console.log(searchInput);
console.log(searchButton);
console.log(loadingElement);
console.log(errorElement);
console.log(creatureDisplay);
1 Like
8

Thank you. Just checking to see if your button was inside a form element. It’s not, so your event handler should be okay “as is.”

1 Like
9

I don’t see an element with a creature-sprite id in your HTML.

10

Is this URL correct?

11

Tell us what’s happening:

what is going on guys , i rewrite the code again based on ur preious instructions i think this is correct but the instruction 14 15 …20 are wrong why ???

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" />
    <link rel="stylesheet" href="styles.css" />
    <title>RPG Creature Search App</title>
    <link rel="icon" type="image/png" href="img/favicon/favicon-96x96.png" sizes="96x96" />
    <link rel="icon" type="image/svg+xml" href="img/favicon/favicon.svg" />
    <link rel="shortcut icon" href="img/favicon/favicon.ico" />
    <link rel="apple-touch-icon" sizes="180x180" href="img/favicon/apple-touch-icon.png" />
    <link rel="manifest" href="img/favicon/site.webmanifest" />
  </head>
  <body>
    <form id="search-form">
  <input id="search-input" required />
  <button id="search-button" type="submit">Search</button>
</form>

<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 */
// Set Up Constants
const searchInput = document.getElementById("search-input");
const searchForm = document.getElementById("search-form");
const creatureID = document.getElementById("creature-id");
const creatureName = document.getElementById("creature-name");
const types = document.getElementById("types");
const weight = document.getElementById("weight");
const height = document.getElementById("height");
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");

// Fetch & Display Creature Data
const getCreature = async () => {
  const creatureQuery = searchInput.value.trim().toLowerCase();
  if (!creatureQuery) return;

  try {
    const response = await fetch(`https://rpg-creature-api.freecodecamp.rocks/api/creature/${creatureQuery}`);
    if (!response.ok) throw new Error();

    const data = await response.json();

    // Set base info
    creatureName.textContent = data.name.toUpperCase();
    creatureID.textContent = `#${data.id}`;
    weight.textContent = `Weight: ${data.weight}`;
    height.textContent = `Height: ${data.height}`;

    // Set stats
    hp.textContent = data.stats.hp;
    attack.textContent = data.stats.attack;
    defense.textContent = data.stats.defense;
    specialAttack.textContent = data.stats.special_attack;
    specialDefense.textContent = data.stats.special_defense;
    speed.textContent = data.stats.speed;

    // Set types
    types.innerHTML = data.types.map((type) => {
      return `<span class="type">${type.toUpperCase()}</span>`;
    }).join("");

  } catch (err) {
    resetDisplay();
    alert("Creature not found");
  }

  searchInput.value = '';
};

// Reset UI on failure
const resetDisplay = () => {
  creatureName.textContent = '';
  creatureID.textContent = '';
  types.innerHTML = '';
  weight.textContent = '';
  height.textContent = '';
  hp.textContent = '';
  attack.textContent = '';
  defense.textContent = '';
  specialAttack.textContent = '';
  specialDefense.textContent = '';
  speed.textContent = '';
};

// Event Listener for form submit
searchForm.addEventListener("submit", (e) => {
  e.preventDefault();
  getCreature();
});


/* 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

Challenge Information:

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

12

Why did you add this line?

Your code looks rather similar to the sample project now, but you should not be looking at the sample project source code at all.

13

thank you , the reason why i add it is because the button is inside a form tag in the html file