Help me with the failed steps in my javaScript code

JavaScript
1 
```js
const searchButton = document.getElementById("search-button");
const searchInput = document.getElementById("search-input");

const fields = {
  name: document.getElementById("creature-name"),
  id: document.getElementById("creature-id"),
  weight: document.getElementById("weight"),
  height: document.getElementById("height"),
  types: document.getElementById("types"),
  hp: document.getElementById("hp"),
  attack: document.getElementById("attack"),
  defense: document.getElementById("defense"),
  specialAttack: document.getElementById("special-attack"),
  specialDefense: document.getElementById("special-defense"),
  speed: document.getElementById("speed")
};

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

  try {
    const res = await fetch(`https://rpg-creature-api.freecodecamp.rocks/api/creature/${query}`);
    if (!res.ok) throw new Error("Creature not found");

    const data = await res.json();
    console.log("API Response:", JSON.stringify(data, null, 2));

    fields.types.innerHTML = "";

    fields.name.textContent = data.name?.toUpperCase() || "";
    fields.id.textContent = data.id ? `#${data.id}` : "";
    fields.weight.textContent = data.weight ? `Weight: ${data.weight}` : "";
    fields.height.textContent = data.height ? `Height: ${data.height}` : "";

    const getStat = (name) => {
      if (!Array.isArray(data.stats)) return "";
      const statObj = data.stats.find(s => s.stat && s.stat.name === name);
      return statObj ? statObj.base_stat : "";
    };

    fields.hp.textContent = getStat("hp");
    fields.attack.textContent = getStat("attack");
    fields.defense.textContent = getStat("defense");
    fields.specialAttack.textContent = getStat("special-attack");
    fields.specialDefense.textContent = getStat("special-defense");
    fields.speed.textContent = getStat("speed");

    if (Array.isArray(data.types)) {
      data.types.forEach(typeObj => {
        const typeName = typeObj?.type?.name?.toUpperCase();
        if (typeName) {
          const typeEl = document.createElement("span");
          typeEl.textContent = typeName;
          fields.types.appendChild(typeEl);
        }
      });
    }
  } catch (err) {
    alert("Creature not found");
  }
});
```
15. 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.
Passed:19. When the #search-input element contains an invalid creature name and the #search-button element is clicked, an alert should appear with the text "Creature not found".
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.
Passed:21. When the search button is clicked, the app should send a fetch request to the correct endpoint for the creature name or ID.
Hello guys, I'm trying to post my code, i want to know if you can see it, i have never done this before so bear with me
2

Please share a link to this challenge and format your code

When you enter a code block into a forum post, please precede it with three backticks to make it easier to read.

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

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

Hi. Please link to the url of the project you are doing

4

are you able to see it now

5

you did not link to the project, and you have extra things in the code block

6 
const searchButton = document.getElementById("search-button");
const searchInput = document.getElementById("search-input");

const fields = {
  name: document.getElementById("creature-name"),
  id: document.getElementById("creature-id"),
  weight: document.getElementById("weight"),
  height: document.getElementById("height"),
  types: document.getElementById("types"),
  hp: document.getElementById("hp"),
  attack: document.getElementById("attack"),
  defense: document.getElementById("defense"),
  specialAttack: document.getElementById("special-attack"),
  specialDefense: document.getElementById("special-defense"),
  speed: document.getElementById("speed")
};

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

  try {
    const res = await fetch(`https://rpg-creature-api.freecodecamp.rocks/api/creature/${query}`);
    if (!res.ok) throw new Error("Creature not found");

    const data = await res.json();
    console.log("API Response:", JSON.stringify(data, null, 2)); // Debug output

    // Clear types before adding new ones
    fields.types.innerHTML = "";

    // Fill in basic fields
    fields.name.textContent = data.name?.toUpperCase() || "";
    fields.id.textContent = data.id ? `#${data.id}` : "";
    fields.weight.textContent = data.weight ? `Weight: ${data.weight}` : "";
    fields.height.textContent = data.height ? `Height: ${data.height}` : "";

    // Extract stats explicitly
    const getStat = (name) => {
      if (!Array.isArray(data.stats)) return "";
      const statObj = data.stats.find(s => s.stat && s.stat.name === name);
      return statObj ? statObj.base_stat : "";
    };

    fields.hp.textContent = getStat("hp");
    fields.attack.textContent = getStat("attack");
    fields.defense.textContent = getStat("defense");
    fields.specialAttack.textContent = getStat("special-attack");
    fields.specialDefense.textContent = getStat("special-defense");
    fields.speed.textContent = getStat("speed");

    // Add type elements
    if (Array.isArray(data.types)) {
      data.types.forEach(typeObj => {
        const typeName = typeObj?.type?.name?.toUpperCase();
        if (typeName) {
          const typeEl = document.createElement("span");
          typeEl.textContent = typeName;
          fields.types.appendChild(typeEl);
        }
      });
    }

  } catch (err) {
    alert("Creature not found");
  }
});
```
7

please share the link to the challenge so we can also test your code

8

search_project.js

i need help in the failed stages:

15. 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. Passed:19. When the #search-input element contains an invalid creature name and the #search-button element is clicked, an alert should appear with the text “Creature not found”. 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. Passed:21. When the search button is clicked, the app should send a fetch request to the correct endpoint for the creature name or ID.

9

So that we are able to help you, please share

  • the link to the project on freeCodeCamp
  • your html and css

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

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

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