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

JavaScript
1

Tell us what’s happening:

only step 20 denies to work for me everything else works fine

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Creature Search</title>
</head>
<body>

<input id="search-input" type="text" required />
<button id="search-button">Search</button>

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

<script>
  // Creature data
  const creatures = {
    "pyrolynx": {
      name: "PYROLYNX",
      id: 1,
      weight: 42,
      height: 32,
      types: ["FIRE"],
      stats: {
        hp: 65,
        attack: 80,
        defense: 50,
        specialAttack: 90,
        specialDefense: 55,
        speed: 100,
      }
    },
    "2": {
      name: "AQUOROC",
      id: 2,
      weight: 220,
      height: 53,
      types: ["WATER", "ROCK"],
      stats: {
        hp: 85,
        attack: 90,
        defense: 120,
        specialAttack: 60,
        specialDefense: 70,
        speed: 40,
      }
    }
  };

  const button = document.getElementById("search-button");

 button.addEventListener("click", () => {
  const input = document.getElementById("search-input").value.trim();
  const typesEl = document.getElementById("types");
  typesEl.innerHTML = "";

  let creature = null;

  if (creatures[input]) {
    creature = creatures[input];
  } else if (!isNaN(input) && creatures[String(parseInt(input))]) {
    creature = creatures[String(parseInt(input))];
  } else if (creatures[input.toLowerCase()]) {
    creature = creatures[input.toLowerCase()];
  }

  if (!creature) {
    alert("Creature not found");
    return;
  }

  setTimeout(() => {
    document.getElementById("creature-name").textContent = creature.name;
    document.getElementById("creature-id").textContent = `#${creature.id}`;
    document.getElementById("weight").textContent = `Weight: ${creature.weight}`;
    document.getElementById("height").textContent = `Height: ${creature.height}`;
    document.getElementById("hp").textContent = creature.stats.hp;
    document.getElementById("attack").textContent = creature.stats.attack;
    document.getElementById("defense").textContent = creature.stats.defense;
    document.getElementById("special-attack").textContent = creature.stats.specialAttack;
    document.getElementById("special-defense").textContent = creature.stats.specialDefense;
    document.getElementById("speed").textContent = creature.stats.speed;

    creature.types.forEach(type => {
      const div = document.createElement("div");
      div.textContent = type;
      typesEl.appendChild(div);
    });
  }, 100);
});


/* file: styles.css */


/* file: script.js */

Your browser information:

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

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.

3

i have alot ore questions i edited the code and now like 4 steps dont align

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Creature Search</title>
  <style>
    body { font-family: Arial, sans-serif; max-width: 400px; margin: 2rem auto; }
    #types div { display: inline-block; background: #eee; padding: 4px 8px; margin: 2px; border-radius: 4px; }
    div.output-label { font-weight: bold; margin-top: 10px; }
  </style>
</head>
<body>

  <input id="search-input" type="text" placeholder="Enter Creature Name or ID" required />
  <button id="search-button">Search</button>

  <div class="output-label">Name:</div>
  <div id="creature-name"></div>

  <div class="output-label">ID:</div>
  <div id="creature-id"></div>

  <div class="output-label">Weight:</div>
  <div id="weight"></div>

  <div class="output-label">Height:</div>
  <div id="height"></div>

  <div class="output-label">Types:</div>
  <div id="types"></div>

  <div class="output-label">HP:</div>
  <div id="hp"></div>

  <div class="output-label">Attack:</div>
  <div id="attack"></div>

  <div class="output-label">Defense:</div>
  <div id="defense"></div>

  <div class="output-label">Special Attack:</div>
  <div id="special-attack"></div>

  <div class="output-label">Special Defense:</div>
  <div id="special-defense"></div>

  <div class="output-label">Speed:</div>
  <div id="speed"></div>

<script>
  // Data: creatures keyed by both name (lowercase) and ID as strings
 const creatures = {
  "pyrolynx": {
    name: "PYROLYNX",
    id: 1,
    weight: 42,
    height: 32,
    types: ["FIRE"],
    stats: {
      hp: 65,
      attack: 80,
      defense: 50,
      specialAttack: 90,
      specialDefense: 55,
      speed: 100
    }
  },
  "1": {
    name: "PYROLYNX",
    id: 1,
    weight: 42,
    height: 32,
    types: ["FIRE"],
    stats: {
      hp: 65,
      attack: 80,
      defense: 50,
      specialAttack: 90,
      specialDefense: 55,
      speed: 100
    }
  },
  "aquoroc": {
    name: "AQUOROC",
    id: 2,
    weight: 220,
    height: 53,
    types: ["WATER", "ROCK"],
    stats: {
      hp: 85,
      attack: 90,
      defense: 120,
      specialAttack: 60,
      specialDefense: 70,
      speed: 40
    }
  },
  "2": {
    name: "AQUOROC",
    id: 2,
    weight: 220,
    height: 53,
    types: ["WATER", "ROCK"],
    stats: {
      hp: 85,
      attack: 90,
      defense: 120,
      specialAttack: 60,
      specialDefense: 70,
      speed: 40
    }
  }
};

document.getElementById("search-button").addEventListener("click", () => {
  const input = document.getElementById("search-input").value.trim();

  // Clear UI fields before search
  [
    "creature-name", "creature-id", "weight", "height",
    "hp", "attack", "defense", "special-attack", "special-defense", "speed", "types"
  ].forEach(id => document.getElementById(id).textContent = "");

  // Lookup ONLY by exact key in creatures object (no fallback)
  if (!creatures.hasOwnProperty(input)) {
    alert("Creature not found");
    return;
  }

  const creature = creatures[input];

  // Fill UI synchronously
  document.getElementById("creature-name").textContent = creature.name;
  document.getElementById("creature-id").textContent = `#${creature.id}`;
  document.getElementById("weight").textContent = `Weight: ${creature.weight}`;
  document.getElementById("height").textContent = `Height: ${creature.height}`;
  document.getElementById("hp").textContent = creature.stats.hp;
  document.getElementById("attack").textContent = creature.stats.attack;
  document.getElementById("defense").textContent = creature.stats.defense;
  document.getElementById("special-attack").textContent = creature.stats.specialAttack;
  document.getElementById("special-defense").textContent = creature.stats.specialDefense;
  document.getElementById("speed").textContent = creature.stats.speed;

  const typesEl = document.getElementById("types");
  typesEl.innerHTML = "";
  creature.types.forEach(type => {
    const div = document.createElement("div");
    div.textContent = type;
    typesEl.appendChild(div);
  });
});

this is what i have right now

4

You need to remove this and use the API

5

API?
dont know what that is

6

Read the instructions:

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

It does ask you to use an API. If you don’t know what that is you can do an Internet Search to remind yourself.

You have been using APIs in the previous workshops.