Helo with rpg creature test project

JavaScript
1 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>RPG Creature Search App</title>
</head>
<body>
  <div class="container">
    <h1>RPG Creature Search</h1>
    <div class="search-section">
      <label for="search-input">Search by Creature Name or ID:</label>
      <input type="text" id="search-input" required />
      <button id="search-button">Search</button>
    </div>

    <div class="creature-display">
      <div class="image-and-name-container">
        <img id="creature-img" alt="Creature Image" style="display:none" />
        <span id="creature-name"></span>
        <span id="creature-id"></span>
      </div>

      <p id="weight"></p>
      <p id="height"></p>

      <div id="types-container">
        <span class="stat-label">Types:</span>
        <div id="types"></div>
      </div>

      <p><span class="stat-label">HP:</span> <span id="hp"></span></p>
      <p><span class="stat-label">Attack:</span> <span id="attack"></span></p>
      <p><span class="stat-label">Defense:</span> <span id="defense"></span></p>
      <p><span class="stat-label">Special Attack:</span> <span id="special-attack"></span></p>
      <p><span class="stat-label">Special Defense:</span> <span id="special-defense"></span></p>
      <p><span class="stat-label">Speed:</span> <span id="speed"></span></p>
    </div>
  </div>

  <script>
    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 typesDiv = 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");
    const creatureImg = document.getElementById("creature-img");

    const API_URL = "https://rpg-creature-api.freecodecamp.rocks/api/creatures/";

    function resetDisplay() {
      creatureName.textContent = "";
      creatureId.textContent = "";
      weight.textContent = "";
      height.textContent = "";
      typesDiv.innerHTML = "";
      hp.textContent = "";
      attack.textContent = "";
      defense.textContent = "";
      specialAttack.textContent = "";
      specialDefense.textContent = "";
      speed.textContent = "";
      creatureImg.src = "";
      creatureImg.style.display = "none";
    }

    function displayCreatureData(data) {
      resetDisplay();

      creatureName.textContent = data.name.toUpperCase();
      creatureId.textContent = `#${data.id}`;
      weight.textContent = `Weight: ${data.weight}`;
      height.textContent = `Height: ${data.height}`;

      hp.textContent = data.stats[0].base_stat;
      attack.textContent = data.stats[1].base_stat;
      defense.textContent = data.stats[2].base_stat;
      specialAttack.textContent = data.stats[3].base_stat;
      specialDefense.textContent = data.stats[4].base_stat;
      speed.textContent = data.stats[5].base_stat;

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

      if (data.sprites?.front_default) {
        creatureImg.src = data.sprites.front_default;
        creatureImg.alt = data.name;
        creatureImg.style.display = "block";
      }
    }

    async function fetchCreature() {
      const term = searchInput.value.trim().toLowerCase();
      if (!term) return alert("Please enter a creature name or ID.");

      try {
        const res = await fetch(API_URL + term);
        if (!res.ok) throw new Error();
        const data = await res.json();
        displayCreatureData(data);
      } catch {
        alert("Creature not found");
        resetDisplay();
      }
    }

    searchButton.addEventListener("click", fetchCreature);
    searchInput.addEventListener("keydown", e => {
      if (e.key === "Enter") fetchCreature();
    });

    document.addEventListener("DOMContentLoaded", resetDisplay);
  </script>
</body>
</html>

Dear Community! I am stuck with this topic and can´t find a solusion for this test. Pls help me with the questions below I am literally done.. even chat gpt cant help me :slight_smile: thanks in advance :smiley:

    1. When the #search-input element contains the value Pyrolynx 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 PYROLYNX, #1 or 1, Weight: 42 or 42, Height: 32 or 32, 65, 80, 50, 90, 55, and 100, respectively.

  • Failed:16. When the #search-input element contains the value Pyrolynx and the #search-button element is clicked, a single element should be added within the #types element that contains the text FIRE. The #types element content should be cleared between searches.

  • Failed:17. 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 #types element that contain text values WATER and ROCK, respectively. The #types element content should be cleared between searches.

  • Failed:20. 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.

2

Please share a link to this project

I’ve edited your post to improve the readability of the code. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

3

Welcome to the forum @Fun_Lifeguard

Check you are using the correct endpoint.

image

Happy coding