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

JavaScript
1

Tell us what’s happening:

my codes are not passing for one instruction for a project: 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.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>BUILD AN RPG CREATURE SEARCH APP</title>
    <link rel="stylesheet" href="styles.css"/>
    </head>

    <body>
      <header>
        <h1>Last Project for Certificate</h1>
        </header>

  <main>
 <input id="search-input" required> </input>
 <button id="search-button">search</button>
 <p id="creature-name">Name</p>
 <p id="creature-id">ID</p>
 <p id="weight">Weight</p>
 <p id="height">Height</p>
 <p id="types">Types</p>
 <p id="hp">HP</p>
 <p id="attack">Attack</p>
 <p id="defense">Defense</p>
 <p id="special-attack">Special Att</p>
 <p id="special-defense">Special Def</p>
 <p id="speed">Speed</p>
  </main>
  <script src="script.js"> </script>
 </body> 
</html>

/* file: script.js */
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 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 typesElement = document.getElementById("types");

const creatures = {
  "Pyrolynx": {
    name: "PYROLYNX",
    id: "#1",
    weight: "Weight: 42",
    height: "Height: 32",
    hp: "65",
    attack: "80",
    defense: "50",
    specialAttack: "90",
    specialDefense: "55",
    speed: "100",
    types: ["FIRE"]
  },
  "#2": {
    name: "AQUOROC",
    id: "#2",
    weight: "Weight: 220",
    height: "Height: 53",
    hp: "85",
    attack: "90",
    defense: "120",
    specialAttack: "60",
    specialDefense: "70",
    speed: "40",
    types: ["WATER", "ROCK"]
  }
};

searchButton.addEventListener("click", () => {
  const input = searchInput.value.trim();

  
  let creature = creatures[input];

  
  if (!creature) {
    for (let key in creatures) {
      const c = creatures[key];
      if (c.id === input || c.id === `#${input}` || c.id.replace("#", "") === input) {
        creature = c;
        break;
      }
    }
  }

  if (creature) {
    creatureName.textContent = creature.name;
    creatureId.textContent = creature.id;
    weight.textContent = creature.weight;
    height.textContent = creature.height;
    hp.textContent = creature.hp;
    attack.textContent = creature.attack;
    defense.textContent = creature.defense;
    specialAttack.textContent = creature.specialAttack;
    specialDefense.textContent = creature.specialDefense;
    speed.textContent = creature.speed;

    typesElement.innerHTML = "";
    creature.types.forEach(type => {
      const typeEl = document.createElement("div");
      typeEl.textContent = type;
      typesElement.appendChild(typeEl);
    });
  } else {
    alert("Creature not found");
  }
});


/* file: styles.css */

Your browser information:

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

Challenge Information:

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

2

Hi @adecunle

To retrieve the creature data and images, you’ll use freeCodeCamp’s RPG Creature API.

For this project you need to use the API.

Happy coding

3

Thank you for this guidance, I didn’t pay attention to that part of the instruction. Thank you!

1 Like