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

JavaScript
1

Tell us what’s happening:

I have completed 19 of the 20 objectives it asks me for: The last one I’m missing: Waiting: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.” I don’t quite understand what this refers to; it refers to a more elaborate CSS?. The API they asked me to create didn’t have the data, so I created an array with predefined data.

Your code so far

<!-- 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>

/* 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);
    }
});


/* file: styles.css */
* {
  padding: 0px;
  margin: 0px;
  box-sizing: border-box;
}

body {
  background: #a2a2a2a2;
  font-family: Ubuntu, monospace;
}

div {
  margin: 10px;
  padding: 10px;
}

p {
  color: white;
  background-color: black;
  display: inline-block;
  padding: 10px;
}

span {
  color: red;
  text-decoration: underline;
}

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64) 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

The API does have the data to display in the UI.

Please log apiData to the console and look through it carefully. Expand all of the arrays and you will see the data you need to display.

3

As @fcc4b6d10c4-b540-4e2 says, the data is all there. You’ll need to query the API with the creature name or id to retrieve the full data for a particular creature.

Refer to this page for more info (as given in the challenge description):

1 Like
4

This is what appears on my console. There is no height, weight, speed, etc.

[ { id: 1, name: ‘Pyrolynx’ },
{ id: 2, name: ‘Aquoroc’ },
{ id: 3, name: ‘Voltadon’ },
{ id: 4, name: ‘Floraspine’ },
{ id: 5, name: ‘Cryostag’ },
{ id: 6, name: ‘Terradon’ },
{ id: 7, name: ‘Emberapod’ },
{ id: 8, name: ‘Lunaclaw’ },
{ id: 9, name: ‘Quillquake’ },
{ id: 10, name: ‘Mystifin’ },
{ id: 11, name: ‘Dracilume’ },
{ id: 12, name: ‘Thornaconda’ },
{ id: 13, name: ‘Frostbyte’ },
{ id: 14, name: ‘Graviboa’ },
{ id: 15, name: ‘Zephyreon’ },
{ id: 16, name: ‘Blazebore’ },
{ id: 17, name: ‘Brontogale’ },
{ id: 18, name: ‘Shadeelisk’ },
{ id: 19, name: ‘Titanule’ },
{ id: 20, name: ‘Faegis’ } ]

That’s the main reason why I created my own array.

5

I deleted the code, pasted it again, and it marked as complete. I have no idea why it gave me the error again. In fact, I copied it from my own JS code on this forum. Thanks anyway, although I’ll have to let freeCodeCamp know about the incomplete API.

6

The API is not incomplete. You were using it incorrectly. Refer to the document @igorgetmeabrain referenced. Your endpoint is https://rpg-creature-api.freecodecamp.rocks/api/creatures, which returns a list of all creatures, but when you search for a specific creature, you need to use the endpoint https://rpg-creature-api.freecodecamp.rocks/api/creature/{name-or-id} to get all the data for a creature. I’d be more inclined to let freeCodeCamp know that the tests passed your code when they definitely should not have.

1 Like
7

you can create an issue about that, please

1 Like