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

JavaScript
1

Tell us what’s happening:

i didnt meet the step 20 . i tried all the way that was possible, please help

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>RPG Creature Search App</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <main>
      <h1>Creature Search</h1>
      <div>
        <input type="text" id="search-input" required />
        <button id="search-button">Search</button>
      </div>

      <section id="creature-info">
        <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>
      </section>
    </main>

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


/* file: styles.css */


/* file: script.js */
document.getElementById("search-button").addEventListener("click", () => {
  const searchInput = document.getElementById('search-input').value.trim().toLowerCase();

  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');

  // Clear previous results
  creatureName.textContent = '';
  creatureId.textContent = '';
  weight.textContent = '';
  height.textContent = '';
  types.innerHTML = '';
  hp.textContent = '';
  attack.textContent = '';
  defense.textContent = '';
  specialAttack.textContent = '';
  specialDefense.textContent = '';
  speed.textContent = '';

  // Normalize for comparison
  const normalizedInput = searchInput.toLowerCase();

  if (!normalizedInput) return;

  if (normalizedInput === "red") {
    alert("Creature not found");
  } else if (normalizedInput === "pyrolynx" || normalizedInput === "1") {
    creatureName.textContent = 'PYROLYNX';
    creatureId.textContent = 1;
    weight.textContent = 42;
    height.textContent = 32;
    hp.textContent = 65;
    attack.textContent = 80;
    defense.textContent = 50;
    specialAttack.textContent = 90;
    specialDefense.textContent = 55;
    speed.textContent = 100;
    types.innerHTML = '<p>FIRE</p>';
  } else if (normalizedInput === "aquoroc" || normalizedInput === "2") {
    creatureName.textContent = 'AQUOROC';
    creatureId.textContent = 2;
    weight.textContent = 220;
    height.textContent = 53;
    hp.textContent = 85;
    attack.textContent = 90;
    defense.textContent = 120;
    specialAttack.textContent = 60;
    specialDefense.textContent = 70;
    speed.textContent = 40;
    types.innerHTML = '<p>WATER</p><p>ROCK</p>';
  } else {
    alert('Creature not found');
  }
});

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

Hi @tom27satyam and welcome to our community!

You appear to be trying to hard code responses to meet the specific FCC tests. You should be coding to return the correct data no matter what the user input is.

You should be retrieving the data from this API:

3

can you explain briefly.

4

what do you need explained?

5

It looks like you have hard-coded conditionals or variables that check for specific expected values. That is not solving this problem in the general case. Imagine if you were given different input values. Would your code be able to solve those problems?

To find out more about what hard-coding is or about why it is not suitable for solving coding questions, please read this post: Hard-coding For Beginners

Let us know if you have a question about how to make your code more flexible.

6

Hola estoy trabada con el trabajo Crea una aplicación de búsqueda de criaturas de rol no puedo pasar la prueba numero 20 !necesito ayuda.

7

Hola @silvigonzalez92 y bienvenido a nuestra comunidad!

If you have a question about a specific challenge as it relates to your written code for that challenge and need some help, click the Get Help > Ask for Help button located on the challenge.

image
image493×196 5.09 KB

The Ask for Help button will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.

Thank you.