Build an RPG Creature Search App

JavaScript
1

Hello,

I am stuck at step 20 and 21

Can someone please give a check to my code and tell me what can I do in order to pass final steps?

Thank you in advance!

const creatures = [
  {
    name: "Pyrolynx",
    id: "1",
    weight: "42",
    height: "32",
    hp: "65",
    attack: "80",
    defense: "50",
    specialAttack: "90",
    specialDefense: "55",
    speed: "100",
    types: ["fire"],
  },
  {
    name: "Aquoroc",
    id: "2",
    weight: "220",
    height: "53",
    hp: "85",
    attack: "90",
    defense: "120",
    specialAttack: "60",
    specialDefense: "70",
    speed: "40",
    types: ["water", "rock"],
  },
];



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

// stat elements
const creatureName = document.getElementById("creature-name");
const creatureId = document.getElementById("creature-id");
const weight = document.getElementById("weight");
const height = document.getElementById("height");
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 types = document.getElementById("types");


//Search-button function
searchBtn.addEventListener("click", () => {
  console.log("hit");  
  
  const value = searchInput.value.trim().toLowerCase(); // trim spaces
  
  types.innerHTML = ""; // clear old types before adding new ones  
  
  if (!value) {

    alert("Please enter a creature name or ID");
    return;

  }  // Find creature in static data

  const creature = creatures.find(

    (c) => c.name.toLowerCase() === value || c.id === value

  );  
  
  
  if (!creature) {

    alert("Creature not found");

    // Clear UI
    creatureName.innerText = "";
    creatureId.innerText = "";
    weight.innerText = "";
    height.innerText = "";
    hp.innerText = "";
    attack.innerText = "";
    defense.innerText = "";
    specialAttack.innerText = "";
    specialDefense.innerText = "";
    speed.innerText = "";
    types.innerHTML = "";
    return;

  } 
  
   // Update UI with creature data
  creatureName.innerText = creature.name.toUpperCase();
  creatureId.innerText = creature.id;
  weight.innerText = creature.weight;
  height.innerText = creature.height;
  hp.innerText = creature.hp;
  attack.innerText = creature.attack;
  defense.innerText = creature.defense;
  specialAttack.innerText = creature.specialAttack;
  specialDefense.innerText = creature.specialDefense;
  speed.innerText = creature.speed; 


  
  
  // Populate types
  creature.types.forEach((type) => {
    
    const typeElement = document.createElement("span");

    typeElement.innerText = type.toUpperCase();

    typeElement.classList.add("type-badge", type.toLowerCase());

    types.appendChild(typeElement);

  });
  
});
2

Hi @html_carlos

You need to use the endpoints provided in the challenge.

Happy coding

1 Like
3

Hello @Teller nice to text to you, and to let you know I did fix that issue with the endpoints a few days ago helping myself with Grok and Chat-gpt :laughing:

I shared my concerns to grok, in a couple minutes it helps me to debug and rewrite the correct practice for my script to work right, but the endpoint issue didn’t work yet, so then I took the script generated by Grok to Chat-gpt for a second try, then Chat tells me that it was all good but it needed more info -the endpoints provided by freeCodeCamp- to give me the correct solution, then I do it, I give it the information, but something was not right, there was one little detail stopping both IA’s and I from finishing the program and claiming the certification,

async function fetchCreature(query) {
const res = await fetch(
https://rpg-creature-api.freecodecamp.rocks/api/creature/${encodeURIComponent(query)}
);

/api/creature/ the issue or bug was that, the endpoint provided by freeCodeCamp had an “s” at the end of creature(s), so that little stupid “s” had the entire project in a deep freeze for months, but finally it is done with hard thinking and problem solving skills from a self-taught programmer.

Merry Christmas and Happy New Year!

4

I would not use LLMs to do the problem solving while learning

5

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.