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

JavaScript
1

Tell us what’s happening:

Hello! My code doesn’t pass the test number 14-21. I’ve checked each one of them and I don’t understand why.

Your code so far

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


/* file: script.js */


/* file: styles.css */

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:143.0) Gecko/20100101 Firefox/143.0

Challenge Information:

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

2

Welcome to the forum @lintangkk09

Please update the message to include your code. The code was too long to be automatically inserted by the help button.

When you enter a code, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

Happy coding

3 
const searchForm = document.getElementById('search-form');
const searchInput = document.getElementById('search-input');
const searchButton = document.getElementById('search-button');

// Creature info
const creatureID = document.getElementById('creature-id');
const creatureName = document.getElementById('creature-name');
const specialName = document.getElementById('special-name');
const specialDescription = document.getElementById('special-description');
const types = document.getElementById('types');
const height = document.getElementById('height');
const weight = document.getElementById('weight');

// Creature stats
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 getCreature = async () => {
  try {
    const creatureNameOrId = searchInput.value.toLowerCase();
    const response = await fetch(
      `https://rpg-creature-api.freecodecamp.rocks/api/creature/${creatureNameOrId}`
    );
    
    const data = await response.json();
	

    // Set Creature info
    creatureName.innerHTML = `<b>Monster: </b>${data.name.toUpperCase()}`;
    creatureID.innerHTML = `<b>ID: </b>${data.id}`;
    weight.innerHTML = `<b>Weight: </b>${data.weight}`;
    height.innerHTML = `<b>Height: </b>${data.height}`;

    // Set stats
    hp.innerHTML = `<b>HP: </b>${data.stats[0].base_stat}`;
    attack.innerHTML = `<b>Attack: </b>${data.stats[1].base_stat}`;
    defense.innerHTML = `<b>Defense: </b>${data.stats[2].base_stat}`;
    specialAttack.innerHTML = `<b>Special Attack: </b>${data.stats[3].base_stat}`;
    specialDefense.innerHTML = `<b>Special Defense: </b>${data.stats[4].base_stat}`;
    speed.innerHTML = `<b>Speed: </b>${data.stats[5].base_stat}`;

    // Set types
    types.innerHTML = `<b>Type: </b>` + data.types
      .map(obj => `<span class="type ${obj.name}">${obj.name.toUpperCase()}</span>`)
      .join(' ');
  } catch (err) {
    resetScreen();
    alert('Creature not found');
    console.log(`Creature not found: ${err}`);
  }
};

const resetScreen = () => {
  creatureName.textContent = '';
  creatureID.textContent = '';
  height.textContent = '';
  weight.textContent = '';
  types.innerHTML = '';
  specialName.innerHTML = '';
  specialDescription.innerHTML = '';
  hp.textContent = '';
  attack.textContent = '';
  defense.textContent = '';
  specialAttack.textContent = '';
  specialDefense.textContent = '';
  speed.textContent = '';
};

searchForm.addEventListener('submit', e => {
  e.preventDefault();
  getCreature();
});

searchButton.addEventListener('click', e => {
  e.preventDefault();
  getCreature();
});
4

Does this output match what’s expected in the user stories?

What error messages are you getting? You only included the script file, so it’s difficult to test.

5

14. When the #search-input element contains the value Red and the #search-button element is clicked, an alert should appear with the text “Creature not found”.

6

I can’t test further without your html and css. Please post.

7 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>RPG Creature Search App</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>RPG Creature Search App</h1>
    <div class="container">
      <!-- Search Form -->
      <form id="search-form" role="search">
        <input type="text" id="search-input" placeholder="Enter creature name or ID" required>
        <button id="search-button">Search</button>
      </form>

      <!-- Creature Info Display -->
      <div id="creature-name"></div>
      <div id="creature-id"></div>
      <div id="special-name"></div>
      <div id="special-description"></div>
      <div id="weight"></div>
      <div id="height"></div>
      <div id="types"></div>

      <!-- Stats Table -->
      <table>
        <thead>
          <tr>
            <th>Base</th>
            <th>Stats</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>HP</td>
            <td id="hp"></td>
          </tr>
          <tr>
            <td>Attack</td>
            <td id="attack"></td>
          </tr>
          <tr>
            <td>Defense</td>
            <td id="defense"></td>
          </tr>
          <tr>
            <td>Special Attack</td>
            <td id="special-attack"></td>
          </tr>
          <tr>
            <td>Special Defense</td>
            <td id="special-defense"></td>
          </tr>
          <tr>
            <td>Speed</td>
            <td id="speed"></td>
          </tr>
        </tbody>
      </table>
    </div>

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

body {
  font-family: 'Comic Sans MS',sans-serif;
}

.container {
  margin: 0 90px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

form {
  margin: 0 auto;
}

#search-input {
  padding: 8px;
  border-radius: 5rem;
}

table {
  border-collapse: collapse;
  color: white;
  background-color: purple;
}

td, th {
  padding: 10px;
}

.type {
  border: 1px solid;
  padding: 5px;
}

.normal {
  color: #b7b7aa;
  border-color: #b7b7aa;
}

.fire {
  color: #ff6f52;
  border-color: #ff6f52;
}

.water {
  color: #42a1ff;
  border-color: #42a1ff;
}

.electric {
  color: #fecc33;
  border-color: #fecc33;
}

.grass {
  color: #78cc55;
  border-color: #78cc55;
}

.ice {
  color: #66ccfe;
  border-color: #66ccfe;
}

.fighting {
  color: #d3887e;
  border-color: #d3887e;
}

.poison {
  color: #c68bb7;
  border-color: #c68bb7;
}

.ground {
  color: #dfba52;
  border-color: #dfba52;
}

.flying {
  color: #8899ff;
  border-color: #8899ff;
}

.psychic {
  color: #ff66a3;
  border-color: #ff66a3;
}

.bug {
  color: #aabb23;
  border-color: #aabb23;
}

.rock {
  color: #baaa66;
  border-color: #baaa66;
}

.ghost {
  color: #9995d0;
  border-color: #9995d0;
}

.dragon {
  color: #9e93f1;
  border-color: #9e93f1;
}

.dark {
  color: #b59682;
  border-color: #b59682;
}

.steel {
  color: #abaabb;
  border-color: #abaabb;
}

.fairy {
  color: #ed99ed;
  border-color: #ed99ed;
}
8

Have you updated your script? As I pointed out earlier, your output should match exactly to what is shown in the user stories. You have added extra labels.

9

No, I haven’t changed it since yesterday

10

It worked! I tried to remove some </b> tag and run on Google Chrome, and it workerd

1 Like