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

GhassenAl · September 23, 2025, 3:43pm

Tell us what’s happening:

Hello i have a problem in the last 2 test 20 and 21 in RPG Creature app

Your code so far

<!-- file: index.html -->
<!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>
    <link rel="stylesheet" href="styles.css">
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">
  </head>
  <body>
    <img src="https://i.imgur.com/jqe4DD9.png" alt="RPG Creature Search App Logo" class="logo">
    <h1>RPG Creature Search App</h1>
    <div class="main-container" id="cont-1">
      <p class="instructions" id="search-instructions">Search for Creature Name or ID:</p>
      <div class="secondary-container" id="cont-1_5">
        <form>
          <input type="text" class="search" id="search-input" required>
          <button class="search-btn" id="search-button">Search</button>
        </form>
      </div>
      <div class="secondary-container" id="cont-2">
        <div class="secondary-container" id="cont-2_5">
          <p class="creature-gen" id="creature-name">Name</p><p class="creature-gen" id="creature-id">#ID</p>
          <p class="creature-size" id="weight">Weight: </p><p class="creature-size" id="height">Height: </p>
          <span id="types"></span>
        </div>
        <p class="moves" id="move-name">Move Name</p>
        <p class="moves" id="move-info">Move info</p>
      </div>
      <div class="secondary-container" id="cont-3">
        <span class="base" id="base-label">Base</span><span class="stats" id="stats-label">Stats</span>
        <span class="base" id="hp">HP</span><span class="stats" id="hp-stats">?</span>
        <span class="base" id="attack">Attack</span><span class="stats" id="attack-stats">?</span>
        <span class="base" id="defense">Defense</span><span class="stats" id="defense-stats">?</span>
        <span class="base" id="special-attack">Sp. Attack</span><span class="stats" id="special-attack-stats">?</span>
        <span class="base" id="special-defense">Sp. Defense</span><span class="stats" id="special-defense-stats">?</span>
        <span class="base" id="speed">Speed</span><span class="stats" id="speed-stats">?</span>
      </div>
    </div>
    <br>
    <script src="script.js"></script>
  </body>
</html>

/* file: script.js */
const input = document.getElementById("search-input");
const searchBtn = document.getElementById("search-button");
const randomBtn = document.getElementById("random-button");
const clearBtn = document.getElementById("clear-button");

const nameEl = document.getElementById("creature-name");
const idEl = document.getElementById("creature-id");
const weightEl = document.getElementById("weight");
const heightEl = document.getElementById("height");
const hpEl = document.getElementById("hp");
const attackEl = document.getElementById("attack");
const defenseEl = document.getElementById("defense");
const spAttackEl = document.getElementById("special-attack");
const spDefenseEl = document.getElementById("special-defense");
const speedEl = document.getElementById("speed");
const typesEl = document.getElementById("types");

// 📌 Créatures définies par FreeCodeCamp
const creatures = {
  "pyrolynx": {
    name: "PYROLYNX",
    id: 1,
    weight: 42,
    height: 32,
    stats: [65, 80, 50, 90, 55, 100], // hp, atk, def, spAtk, spDef, speed
    types: ["FIRE"]
  },
  "aquoroc": {
    name: "AQUOROC",
    id: 2,
    weight: 220,
    height: 53,
    stats: [85, 90, 120, 60, 70, 40],
    types: ["WATER", "ROCK"]
  }
};

// 🔹 Affiche une créature
function displayCreature(creature) {
  nameEl.textContent = creature.name;
  idEl.textContent = `#${creature.id}`;
  weightEl.textContent = `Weight: ${creature.weight}`;
  heightEl.textContent = `Height: ${creature.height}`;
  hpEl.textContent = creature.stats[0];
  attackEl.textContent = creature.stats[1];
  defenseEl.textContent = creature.stats[2];
  spAttackEl.textContent = creature.stats[3];
  spDefenseEl.textContent = creature.stats[4];
  speedEl.textContent = creature.stats[5];

  // 🔹 Nettoyer et ajouter les types
  typesEl.innerHTML = "";
  creature.types.forEach(t => {
    const span = document.createElement("span");
    span.textContent = t;
    typesEl.appendChild(span);
  });
}

// 🔹 Recherche par nom ou id
function searchCreature(query) {
  const key = query.toLowerCase();

  if (creatures[key]) {
    displayCreature(creatures[key]);
  } else if (query === "1") {
    displayCreature(creatures["pyrolynx"]);
  } else if (query === "2") {
    displayCreature(creatures["aquoroc"]);
  } else {
    alert("Creature not found");
  }
}

// 🎯 Listeners
searchBtn.addEventListener("click", () => {
  if (input.value.trim() !== "") {
    searchCreature(input.value.trim());
  }
});

clearBtn.addEventListener("click", () => {
  input.value = "";
  nameEl.textContent = "";
  idEl.textContent = "";
  weightEl.textContent = "";
  heightEl.textContent = "";
  hpEl.textContent = "";
  attackEl.textContent = "";
  defenseEl.textContent = "";
  spAttackEl.textContent = "";
  spDefenseEl.textContent = "";
  speedEl.textContent = "";
  typesEl.innerHTML = "";
});

randomBtn.addEventListener("click", () => {
  const keys = Object.keys(creatures);
  const rand = keys[Math.floor(Math.random() * keys.length)];
  displayCreature(creatures[rand]);
});

/* file: styles.css *//* ====== GENERALI ====== */
body {
  background-color: #1B1B32;
  margin: 0;
  font-family: 'Roboto', sans-serif;
}

.logo {
  max-width: 8%;
  height: auto;
  display: block;
  margin: 0 auto;
  padding-top: 0.75rem;
}

h1 {
  color: white;
  text-align: center;
  font-family: "Courier", sans-serif;
  font-size: 2rem;
  font-weight: bold;
}

/* ====== CONTENITORI PRINCIPALI ====== */
#cont-1 {
  margin: 0 auto;
  background-color: #F5F6F7;
  width: 33vw;
  height: 108vh;
  border-radius: 15px;
  box-shadow: 10px 10px 0px #AEACB2;
  padding-bottom:20px;
}

#cont-1_5 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 31vw;
  margin: 0 auto;
}

/* ====== INPUT E BUTTON ====== */
input {
  width: 180px;
  height: 35px;
  font-size: 0.8rem;
  padding-left: 5px;
  margin: 0 10px;
}

input:focus {
  outline: 2px solid #198EEE;
}

button {
  color: white;
  background-color: #7F21AB;
  border: none;
  width: 80px;
  height: 40px;
  border-radius: 18px;
  cursor: pointer;
}

/* ====== ISTRUZIONI ====== */
.instructions {
  font-size: 1.1rem;
  font-weight: bold;
  text-align: center;
  padding-top: 15px;
}

/* ====== CONTENUTO CREATURE ====== */
#cont-2 {
  margin: 25px auto 10px auto;
  background-color: #F0F1F7;
  width: 30vw;
  height: 34vh;
  padding: 10px;
  border-radius: 10px;
}

#cont-2_5 {
  width: 11vw;
  height: 10vh;
  margin: 10px auto 50px 1px;
}

/* ====== INFORMAZIONI CREATURE ====== */
.creature-gen {
  display: inline-flex;
  font-size: 0.9rem;
  font-family:"Arial",sans-serif;
  font-weight: bold;
  margin: 10px 0 5px 3px;
  white-space: nowrap;
}

#creature-id {
  white-space: nowrap;
  font-weight:normal;
  font-size:0.8rem;
  padding-left:5px;
}

.creature-size {
  display: inline;
  font-size: 0.8rem;
  font-weight: normal;
  margin: 5px 2px 0 5px;
  white-space: nowrap;
}

#creature-id {
  font-weight: bold;
  font-size: 0.7rem;
  margin-top: 2px;
}

/* ====== TYPES ====== */
#types {
  display: inline-flex;
  gap: 8px;
  margin: 10px -5px 40px 5px;
  padding: 4px;
  white-space: nowrap;
}

#types span {
  padding: 4px 10px;
  margin-bottom:10px;
  margin-left:-5px;
  border-radius: 5px;
  color: white;
  font-weight: bold;
  font-size: 0.8rem;
  white-space: nowrap;
  background-color: grey; /* fallback */
}

/* ====== MOSSE ====== */
.moves {
  margin-left: 9px;
  display: flex;
  flex-direction: column;
  font-family: 'Arial', sans-serif;
}

#move-name {
  font-size: 0.9rem;
  font-weight: bold;
  margin: 60px 0px 5px 9px;
  display: block;
}

#move-info {
  font-size: 0.85rem;
  margin-bottom: 15px;
}

/* ====== STATISTICHE ====== */
#cont-3 {
  width: 32vw;
  margin: 15px auto 0 auto;
}

.base,
.stats {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background-color: #7F21AB;
  color: white;
  font-size: 1rem;
  font-weight: bold;
  text-align: center;
  height: 40px;
  width:auto;
  font-family: 'Roboto', sans-serif;
}

.base {
  width: 60%;
  margin: 0 0 5px 15px;
}

.stats {
  width: 30%;
  margin: 0 0 5px 5px;
}

#base-label,
#stats-label {
  font-size: 1.3rem;
  font-family: "Arial", sans-serif;
  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/140.0.0.0 Safari/537.36

Challenge Information:

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

ILM · September 23, 2025, 4:37pm

GhassenAl:

// 📌 Créatures définies par FreeCodeCamp
const creatures = {
  "pyrolynx": {
    name: "PYROLYNX",
    id: 1,
    weight: 42,
    height: 32,
    stats: [65, 80, 50, 90, 55, 100], // hp, atk, def, spAtk, spDef, speed
    types: ["FIRE"]
  },
  "aquoroc": {
    name: "AQUOROC",
    id: 2,
    weight: 220,
    height: 53,
    stats: [85, 90, 120, 60, 70, 40],
    types: ["WATER", "ROCK"]
  }
};

ditch this to start, do not hardcode stuff

same for

where is the code that uses the API?

html_carlos · September 24, 2025, 1:52am

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

  });
  
});

I am also stuck at the same tests!

Teller · September 24, 2025, 6:24am

Welcome to the forum @html_carlos

Please create your own topic when you have specific questions about your own challenge code. Only respond to another thread when you want to provide help to the original poster of the other thread or have follow up questions concerning other replies given to the original poster.

The easiest way to create a topic for help with your own solution is to click the Ask for Help button located on each challenge. This will automatically import your code in a readable format and pull in the challenge url while still allowing you to ask any question about the challenge or your code.

Happy coding

prannixranjit · September 27, 2025, 7:20am

is api not working now cuz it shows Cannot GET /creature/1

ILM · September 27, 2025, 7:57am

it works

but if you need help with your code please create your own topic, do not ask in other people topics

prannixranjit · September 27, 2025, 8:54am

ILM · September 27, 2025, 9:11am

you do not have the correct link, consult https://rpg-creature-api.freecodecamp.rocks/ for the correct link

Topic		Replies	Views
Build an RPG Creature Search App Project - Build an RPG Creature Search App JavaScript	30	265	January 13, 2026
Build an RPG Creature Search App Project - Build an RPG Creature Search App JavaScript	15	610	July 1, 2025
Build an RPG Creature Search App Project - Build an RPG Creature Search App JavaScript	2	59	January 14, 2026
Build an RPG Creature Search App JavaScript	4	42	January 29, 2026
Build an RPG Creature Search App Project - Build an RPG Creature Search App JavaScript	7	577	December 24, 2025

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

Tell us what’s happening:

Your code so far

Your browser information:

Challenge Information:

Related topics