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

Tell us what’s happening:

The code repeatedly fails on test 20 and 21 please if anyone can help

Your code so far

<!-- file: ind<!-- file: index.html -->
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <div>
      <input type="text" id="search-input" required>
      <button type="button" id="search-button">Search</button>
    </div>
    <div>
      <p>Name: <span id="creature-name"></span></p>
      <p>ID: <span id="creature-id"></span></p>
    </div>
    <div>
      <p>Weight: <span id="weight"></span></p>
      <p>Height: <span id="height"></span></p>
    </div>
    <div>
      <p id="types">Types: </p>
    </div>
    <div>
      <p>HP: <span id="hp"></span></p>
      <p>Attack: <span id="attack"></span></p>
      <p>Defense: <span id="defense"></span></p>
      <p>Special Attack: <span id="special-attack"></span></p>
      <p>Special Defense: <span id="special-defense"></span></p>
      <p>Speed: <span id="speed"></span></p>
    </div>
  </body>
  <script src="script.js"></script>
</html>ex.html -->

/* file: styles.css */

/* file: script.js */
/* file: script.js */
const url = " https://rpg-creature-search-app.freecodecamp.rocks.";
const searchInput = document.getElementById("search-input");
const searchButton = document.getElementById("search-button");
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");

const array = [
    {
        id: 1,
        weight: 42,
        height: 32,
        hp: 65,
        attack: 80,
        defense: 50,
        specialAttack: 90,
        specialDefense: 55,
        speed: 100,
        types: ['FIRE']
    },
    {
        id: 2,
        weight: 220,
        height: 53,
        hp: 85,
        attack: 90,
        defense: 120,
        specialAttack: 60,
        specialDefense: 70,
        speed: 40,
        types: ['WATER', 'ROCK']
    },
    {
        id: 3,
        weight: 75,
        height: 45,
        hp: 70,
        attack: 75,
        defense: 60,
        specialAttack: 85,
        specialDefense: 65,
        speed: 95,
        types: ['ELECTRIC']
    },
    {
        id: 4,
        weight: 180,
        height: 70,
        hp: 90,
        attack: 110,
        defense: 80,
        specialAttack: 70,
        specialDefense: 80,
        speed: 50,
        types: ['GROUND', 'FIGHTING']
    },
    {
        id: 5,
        weight: 6,
        height: 12,
        hp: 40,
        attack: 45,
        defense: 35,
        specialAttack: 60,
        specialDefense: 40,
        speed: 80,
        types: ['BUG']
    },
    {
        id: 6,
        weight: 95,
        height: 55,
        hp: 75,
        attack: 85,
        defense: 70,
        specialAttack: 95,
        specialDefense: 80,
        speed: 110,
        types: ['PSYCHIC', 'FAIRY']
    },
    {
        id: 7,
        weight: 230,
        height: 85,
        hp: 100,
        attack: 120,
        defense: 100,
        specialAttack: 50,
        specialDefense: 70,
        speed: 30,
        types: ['ROCK', 'STEEL']
    },
    {
        id: 8,
        weight: 25,
        height: 30,
        hp: 55,
        attack: 50,
        defense: 45,
        specialAttack: 75,
        specialDefense: 55,
        speed: 90,
        types: ['GRASS', 'POISON']
    },
    {
        id: 9,
        weight: 150,
        height: 65,
        hp: 80,
        attack: 100,
        defense: 90,
        specialAttack: 60,
        specialDefense: 90,
        speed: 60,
        types: ['DRAGON']
    },
    {
        id: 10,
        weight: 40,
        height: 25,
        hp: 50,
        attack: 65,
        defense: 40,
        specialAttack: 80,
        specialDefense: 50,
        speed: 105,
        types: ['FLYING', 'NORMAL']
    },
    {
        id: 11,
        weight: 200,
        height: 75,
        hp: 95,
        attack: 95,
        defense: 85,
        specialAttack: 65,
        specialDefense: 85,
        speed: 55,
        types: ['DARK', 'ICE']
    },
    {
        id: 12,
        weight: 80,
        height: 50,
        hp: 65,
        attack: 70,
        defense: 60,
        specialAttack: 100,
        specialDefense: 75,
        speed: 115,
        types: ['GHOST']
    },
    {
        id: 13,
        weight: 10,
        height: 15,
        hp: 30,
        attack: 35,
        defense: 30,
        specialAttack: 55,
        specialDefense: 40,
        speed: 70,
        types: ['FAIRY']
    },
    {
        id: 14,
        weight: 300,
        height: 90,
        hp: 110,
        attack: 130,
        defense: 110,
        specialAttack: 45,
        specialDefense: 80,
        speed: 35,
        types: ['STEEL']
    },
    {
        id: 15,
        weight: 50,
        height: 40,
        hp: 60,
        attack: 80,
        defense: 50,
        specialAttack: 70,
        specialDefense: 60,
        speed: 85,
        types: ['FIGHTING']
    },
    {
        id: 16,
        weight: 120,
        height: 60,
        hp: 85,
        attack: 90,
        defense: 75,
        specialAttack: 85,
        specialDefense: 75,
        speed: 65,
        types: ['POISON', 'DARK']
    },
    {
        id: 17,
        weight: 5,
        height: 10,
        hp: 25,
        attack: 30,
        defense: 25,
        specialAttack: 65,
        specialDefense: 35,
        speed: 120,
        types: ['ELECTRIC', 'FLYING']
    },
    {
        id: 18,
        weight: 250,
        height: 80,
        hp: 105,
        attack: 115,
        defense: 95,
        specialAttack: 55,
        specialDefense: 75,
        speed: 45,
        types: ['GROUND', 'ROCK']
    },
    {
        id: 19,
        weight: 35,
        height: 20,
        hp: 45,
        attack: 55,
        defense: 40,
        specialAttack: 75,
        specialDefense: 50,
        speed: 100,
        types: ['FIRE', 'FLYING']
    },
    {
        id: 20,
        weight: 140,
        height: 58,
        hp: 75,
        attack: 85,
        defense: 70,
        specialAttack: 95,
        specialDefense: 80,
        speed: 105,
        types: ['WATER', 'PSYCHIC']
    }
];


// Function to confirma valid id and name
function searchMonster(input, data) {
    if (!isNaN(input)) {
        return data.find(monster => monster.id == searchInput.value);
    } 
    else {
        return data.find(monster => 
            monster.name.includes(searchInput.value)
        );
    }
}


searchButton.addEventListener('click', async function() {
    
    try {

        const response = await fetch('https://rpg-creature-api.freecodecamp.rocks/api/creatures');
        const apiData = await response.json();

        const monster = searchMonster(searchInput.value, apiData);

          types.innerHTML = 'Types: ';

        if(monster){
            
          creatureName.textContent = monster.name.toUpperCase();
          creatureId.textContent = monster.id;
          
          const id = monster.id;
          const finalData = array[id - 1];

          weight.textContent = finalData.weight;
          height.textContent = finalData.height;
          hp.textContent = finalData.hp;
          attack.textContent = finalData.attack;
          defense.textContent = finalData.defense;
          attack.textContent = finalData.attack;
          specialAttack.textContent = finalData.specialAttack;
          specialDefense.textContent = finalData.specialDefense;
          defense.textContent = finalData.defense;
          speed.textContent = finalData.speed;

          for(let i = 0; i < finalData.types.length; i++){
            types.innerHTML += `
                <span>${finalData.types[i]}</span>
            `          
          }

        } else {
            alert("Creature not found");
        }

        

    } catch (error) {
        console.error('Error al obtener los datos:', error);
    }
});

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/139.0.0.0 Safari/537.36 Edg/139.0.0.0

Challenge Information:

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

you should use conditional statements and catch (err) to fulfill the user stories

1 Like

You are hard coding the creature values, but these should come from the API as indicated in the instructions.

1 Like

still have a problem on those 2 steps 20 N 21

idk what should i add or change

this is js

Here are some troubleshooting steps you can follow. Focus on one test at a time:

  1. Are there any errors or messages in the console?
  2. What is the requirement of the first failing test?
  3. Check the related User Story and ensure it’s followed precisely.
  4. What line of code implements this?
  5. What is the result of the code and does it match the requirement? (Write the value of a variable to the console at that point in the code if needed.)

If this does not help you solve the problem, please reply with answers to these questions.

Please don’t share screenshots of code, you can copy and paste the code in here if you’ve changed it.

image

You still have hard-coded variables that are checking for specific expected values. That is not solving this problem in the general case. Imagine if the data in this API changed and/or you were given different input values. Would your code be able to return the correct information about a creature?

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

Please post the actual code instead of a picture. Thanks