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

JavaScript
1

Tell us what’s happening:

I am doing this project for days and i can’t solve the step 20 and 21. I’ve used different methods and even AI but i can’t do anything. someone please help this is the last project for my certificate

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>RPG Creature Search App</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <main>
      <input id="search-input" type="text"required>
      <button id="search-button">Search</button>
      <p id="creature-name"></p>
      <p id="creature-id"></p>
      <p id="weight"></p>
      <p id="height"></p>
      <p id="types"></p>
      <p id="hp"></p>
      <p id="attack"></p>
      <p id="defense"></p>
      <p id="special-attack"></p>
      <p id="special-defense"></p>
      <p id="speed"></p>
    </main>
    <script src="script.js"></script>
  </body>
</html>

/* file: script.js */
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
    }
  }
};

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

  document.getElementById("types").innerHTML = "";

  if (input === "Red" || !creature) {
    alert("Creature not found");
    return;
  }
  if (input === creature || input === creature.id) {
    return typeEl;
  }

  document.getElementById("creature-name").textContent = creature.name;
  document.getElementById("creature-id").textContent = creature.id;
  document.getElementById("weight").textContent = creature.weight;
  document.getElementById("height").textContent = 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 typeEl = document.createElement("div");
    typeEl.textContent = type;
    document.getElementById("types").appendChild(typeEl);
  });

  const fetchData = async () => {
  try {
    const nameOrId = input.toLowerCase();
    const res = await fetch(`https://rpg-creature-api.freecodecamp.rocks/api/creature/${nameOrId}`);
    const data = await res.json();
  } catch (err) {
    console.log(err);
  }
};

fetchData();
});

/* file: styles.css */

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:142.0) Gecko/20100101 Firefox/142.0

Challenge Information:

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

2

have you tried not hardcoding data, and using the API instead?

other instance of hardcoding, please remove this check