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

JavaScript
1

Tell us what’s happening:

// running tests
20. When the #search-input element contains a valid creature ID and the #search-button element is clicked, the UI should be filled with the correct data.
// tests completed
This show when i try to compile, why the 20th test case didn’t pass?? Anyone help me

Your code so far

<!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>
    <link rel="stylesheet" href="style.css">
   
</head>
<body>
   <div id="controls">
    <input type="text" id="search-input" placeholder="Enter creature name or ID" required>
    <button id="search-button">Search</button>
  </div>
  <div id="results">
    <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>


/* file: styles.css */


document.addEventListener('DOMContentLoaded', function() {
  const creatures = [
    {
      name: "PYROLYNX",
      id: "1",
      weight: 42,
      height: 32,
      types: ["FIRE"],
      hp: 65,
      attack: 80,
      defense: 50,
      specialAttack: 90,
      specialDefense: 55,
      speed: 100
    },
    {
      name: "AQUOROC",
      id: "2",
      weight: 220,
      height: 53,
      types: ["WATER", "ROCK"],
      hp: 85,
      attack: 90,
      defense: 120,
      specialAttack: 60,
      specialDefense: 70,
      speed: 40
    }
  ];

  const searchInput = document.getElementById('search-input');
  const searchButton = document.getElementById('search-button');
  const resultsDisplay = document.getElementById('results');
  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');

  function displayCreature(creature) {
    creatureName.textContent = creature.name;
    creatureId.textContent = creature.id;
    weight.textContent = `Weight: ${creature.weight}`;
    height.textContent = `Height: ${creature.height}`;
    types.innerHTML = '';
    creature.types.forEach(type => {
      const typeElement = document.createElement('span');
      typeElement.className = 'type';
      typeElement.textContent = type;
      types.appendChild(typeElement);
    });
    hp.textContent = creature.hp;
    attack.textContent = creature.attack;
    defense.textContent = creature.defense;
    specialAttack.textContent = creature.specialAttack;
    specialDefense.textContent = creature.specialDefense;
    speed.textContent = creature.speed;
    resultsDisplay.style.display = 'block';
  }

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

  searchButton.addEventListener('click', () => {
    const searchTerm = searchInput.value.trim();
    if (!searchTerm) {
      alert("Please enter a creature name or ID");
      clearDisplay();
      return;
    }

    let creature;
    if (!isNaN(searchTerm)) {
      creature = creatures.find(c => c.id === searchTerm);
    } else {
      creature = creatures.find(c => c.name.toLowerCase() === searchTerm.toLowerCase());
    }

    if (creature) {
      displayCreature(creature);
    } else {
      alert('Creature not found');
      clearDisplay();
    }
  });
});

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.

You should be using the provided API, do not hard code the creatures data

4

hi @tsop_n_GOD we are unable to help in this topic, please create your own topic

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.