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

JavaScript
1

Tell us what’s happening:

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 defens

Your code so far

<!-- file: index.html -->
<!-- file: index.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="styles.css" />
    <title>RPG Creature Search</title>
  </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>
      <!-- خلي اللّيبل برّه الـ #types عشان التستات 16 و18 -->
      <p>Types: <span id="types"></span></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>

    <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 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");

async function fetchCreature(query) {
  try {
    const res = await fetch(`https://rpg-creature-api.freecodecamp.rocks/api/creature/${query.toLowerCase()}`);
    if (!res.ok) throw new Error("Creature not found");
    return await res.json();
  } catch {
    alert("Creature not found");
    return null;
  }
}

function displayCreature(data) {
  
  creatureName.textContent = data.name.toUpperCase();
  creatureId.textContent = `#${data.id}`;
  weight.textContent = data.weight;
  height.textContent = data.height;

  hp.textContent = data.stats.hp;
  attack.textContent = data.stats.attack;
  defense.textContent = data.stats.defense;
  specialAttack.textContent = data.stats.special_attack;
  specialDefense.textContent = data.stats.special_defense;
  speed.textContent = data.stats.speed;

  
  types.innerHTML = "";
  data.types.forEach(type => {
    const span = document.createElement("span");
    span.textContent = type.toUpperCase();
    types.appendChild(span);
  });
}

searchButton.addEventListener("click", async () => {
  const query = searchInput.value.trim();
  if (!query) return;

  const creatureData = await fetchCreature(query);
  if (creatureData) {
    displayCreature(creatureData);
  }
});


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

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

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

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

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

Your browser information:

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

Challenge Information:

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

what is wrong with code I fail in 15 to 18 and 20 tests

2

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

  • What is the requirement of the first failing test?
  • Check the related User Story and ensure it’s followed precisely.
  • What line of code implements this?
  • 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.)
  • Are there any errors or messages in the console?

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