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

JavaScript
1

Tell us what’s happening:

. When the #search-input element contains the value 2 and the #search-button element is clicked, the values in the #creature-name, #creature-id, #weight, #height, #hp, #attack, #defense, #special-attack, #special-defense, and #speed elements should be AQUOROC, #2 or 2, Weight: 220 or 220, Height: 53 or 53, 85, 90, 120, 60, 70, and 40, respectively.
Failed:18. When the #search-input element contains the value 2 and the #search-button element is clicked, two elements should be added within the #ty

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>RPG Creature Search App</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>

  <h1>RPG Creature Search</h1>

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

  <div id="creature-container">
    <p id="creature-name"></p>
    <p id="creature-id"></p>
    <p id="weight"></p>
    <p id="height"></p>
    <div id="types"></div>
    <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>
  </div>

  <script src="script.js"></script>
</body>
</html>

/* file: script.js */
/* file: script.js */
const apiUrl = "https://rpg-creatures-api.freecodecamp.rocks/creatures/";

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

  try {
    const response = await fetch(apiUrl + searchInput.toLowerCase());
    if (!response.ok) {
      throw new Error();
    }

    const data = await response.json();

    // Set text content
    document.getElementById("creature-name").textContent = data.name.toUpperCase();
    document.getElementById("creature-id").textContent = `#${data.id}`;
    document.getElementById("weight").textContent = `Weight: ${data.weight}`;
    document.getElementById("height").textContent = `Height: ${data.height}`;
    document.getElementById("hp").textContent = data.stats.hp;
    document.getElementById("attack").textContent = data.stats.attack;
    document.getElementById("defense").textContent = data.stats.defense;
    document.getElementById("special-attack").textContent = data.stats.special_attack;
    document.getElementById("special-defense").textContent = data.stats.special_defense;
    document.getElementById("speed").textContent = data.stats.speed;

    // Clear types then add
    const typesContainer = document.getElementById("types");
    typesContainer.innerHTML = "";

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

  } catch (error) {
    alert("Creature not found");
  }
});

/* file: styles.css */
/* file: styles.css */
body {
  font-family: Arial, sans-serif;
  text-align: center;
  padding: 20px;
  background-color: #f0f0f0;
}

h1 {
  margin-bottom: 20px;
}

#search-input, #search-button {
  padding: 10px;
  margin: 10px;
  font-size: 16px;
}

#creature-container {
  margin-top: 20px;
  padding: 20px;
  background-color: white;
  border-radius: 10px;
  display: inline-block;
  text-align: left;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

#types span {
  display: inline-block;
  background-color: #eee;
  padding: 5px 10px;
  margin: 2px;
  border-radius: 4px;
  font-weight: bold;
}

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

2

there are two urls available, double check which one accepts the name or id appended to it