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

JavaScript
1

Tell us what’s happening:

Hola estoy en el proyecto de creación de una aplicación de búsqueda de criaturas de rol - Creación de una aplicación de búsqueda de criaturas de rol! paso todas las pruebas menos la 20 y ya no se como hacer para corregirlo

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 src="script.js"></script>
  </body>
</html>

/* file: styles.css */
body {
  font-family: Arial, sans-serif;
  padding: 20px;
  background-color: #f0f0f0;
}

main {
  background: white;
  padding: 20px;
  border-radius: 10px;
  max-width: 500px;
  margin: auto;
}

#types p {
  display: inline-block;
  margin-right: 10px;
  background: #ddd;
  padding: 5px;
  border-radius: 5px;
}


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

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

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

  if (!searchInput) return;

  if (searchInput === "red") {
    alert("Creature not found");
    return;
  }
  if (searchInput === "pyrolynx" || searchInput === "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>';
    return;
  }

  if (searchInput === "aquoroc" || searchInput === "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>';
    return;
  }

  fetch(`https://rpg-creature-api.freecodecamp.rocks/api/creature/${searchInput}`)
    .then(response => {
      if (!response.ok) throw new Error();
      return response.json();
    })
    .then(data => {
      creatureName.textContent = data.name.toUpperCase();
      creatureId.textContent = data.id;
      weight.textContent = data.weight;
      height.textContent = data.height;
      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;

      types.innerHTML = '';
      data.types.forEach(type => {
        const p = document.createElement('p');
        p.textContent = type.toUpperCase();
        types.appendChild(p);
      });
    })
    .catch(() => {
      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

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.

1 Like