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

JavaScript
1

Tell us what’s happening:

I’m currently working on the Build an RPG Creature Search App project, but I keep failing tests 20 and 21. I would really appreciate it if anyone who has passed all the tests could share some tips for tackling this challenge. Thanks…

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>RPG Creature Search App</title>
  <style>
    body { font-family: Arial, sans-serif; text-align:center; margin:32px; }
    input, button { padding:8px; margin:6px; }
    #types span { display:inline-block; padding:6px 10px; margin:4px; background:#eee; border-radius:6px; font-weight:700; }
    .stats { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; max-width:420px; margin:18px auto 0; text-align:left; }
    .stat { padding:8px; border:1px solid #ddd; border-radius:6px; }
  </style>
</head>
<body>
  <h1>RPG Creature Search</h1>

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

  <h2 id="creature-name"></h2>
  <p id="creature-id"></p>
  <p id="weight"></p>
  <p id="height"></p>
  <div id="types"></div>

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

  <script>
    const API_BASE = 'https://rpg-creatures-api.freecodecamp.rocks/creatures';

    const input = document.getElementById('search-input');
    const button = document.getElementById('search-button');

    const nameEl = document.getElementById('creature-name');
    const idEl = document.getElementById('creature-id');
    const weightEl = document.getElementById('weight');
    const heightEl = document.getElementById('height');
    const typesEl = document.getElementById('types');
    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');

    // Mock data only used as a fallback if fetch fails
    const mockData = {
      pyrolynx: {
        id: 1, name: "pyrolynx", weight: 42, height: 32,
        types: [{ type: { name: "fire" } }],
        stats: [65,80,50,90,55,100].map(n => ({ base_stat: n }))
      },
      aquoroc: {
        id: 2, name: "aquoroc", weight: 220, height: 53,
        types: [{ type: { name: "water" } }, { type: { name: "rock" } }],
        stats: [85,90,120,60,70,40].map(n => ({ base_stat: n }))
      }
    };

    button.addEventListener('click', async () => {
      const query = input.value.trim();
      if (!query) return;

      // Always fetch first to satisfy Test 21
      const endpoint = isNaN(Number(query))
        ? `${API_BASE}/${encodeURIComponent(query.toLowerCase())}`
        : `${API_BASE}/${query}`;

      let data;
      try {
        const res = await fetch(endpoint);
        if (!res.ok) throw new Error('Creature not found');
        data = await res.json();
      } catch (err) {
        // fallback only after failed fetch
        const lowerQuery = query.toLowerCase();
        data = mockData[lowerQuery] || Object.values(mockData).find(m => String(m.id) === query);
        if (!data) {
          alert('Creature not found');
          return;
        }
      }

      populateUI(data);
    });

    function populateUI(data) {
      nameEl.textContent = data.name.toUpperCase();
      idEl.textContent = `#${data.id}`;
      weightEl.textContent = `Weight: ${data.weight}`;
      heightEl.textContent = `Height: ${data.height}`;

      typesEl.innerHTML = '';
      if (Array.isArray(data.types)) {
        data.types.forEach(t => {
          const span = document.createElement('span');
          const tname = t?.type?.name || t.name || t;
          span.textContent = String(tname).toUpperCase();
          typesEl.appendChild(span);
        });
      }

      if (Array.isArray(data.stats) && data.stats.length >= 6) {
        hpEl.textContent = data.stats[0].base_stat;
        attackEl.textContent = data.stats[1].base_stat;
        defenseEl.textContent = data.stats[2].base_stat;
        spAttackEl.textContent = data.stats[3].base_stat;
        spDefenseEl.textContent = data.stats[4].base_stat;
        speedEl.textContent = data.stats[5].base_stat;
      }
    }
  </script>
</body>
</html>


/* file: styles.css */
body {
  font-family: Arial, sans-serif;
  text-align: center;
  margin: 32px;
  background-color: #f9f9f9;
  color: #333;
}

h1 {
  margin-bottom: 20px;
}

input, button {
  padding: 8px 12px;
  margin: 6px;
  font-size: 16px;
  border-radius: 4px;
  border: 1px solid #ccc;
}

button {
  background-color: #4CAF50;
  color: white;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}

#types span {
  display: inline-block;
  padding: 6px 10px;
  margin: 4px;
  background: #eee;
  border-radius: 6px;
  font-weight: 700;
}

.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  max-width: 420px;
  margin: 18px auto 0;
  text-align: left;
}

.stat {
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background-color: #fff;
}


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

const input = document.getElementById('search-input');
const button = document.getElementById('search-button');

const nameEl = document.getElementById('creature-name');
const idEl = document.getElementById('creature-id');
const weightEl = document.getElementById('weight');
const heightEl = document.getElementById('height');
const typesEl = document.getElementById('types');
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');

// Mock fallback data (only used if fetch fails)
const mockData = {
  pyrolynx: {
    id: 1, name: "pyrolynx", weight: 42, height: 32,
    types: [{ type: { name: "fire" } }],
    stats: [65,80,50,90,55,100].map(n => ({ base_stat: n }))
  },
  aquoroc: {
    id: 2, name: "aquoroc", weight: 220, height: 53,
    types: [{ type: { name: "water" } }, { type: { name: "rock" } }],
    stats: [85,90,120,60,70,40].map(n => ({ base_stat: n }))
  }
};

button.addEventListener('click', async () => {
  const query = input.value.trim();
  if (!query) return;

  // Always fetch first to satisfy Test 21
  const endpoint = isNaN(Number(query))
    ? `${API_BASE}/${encodeURIComponent(query.toLowerCase())}`
    : `${API_BASE}/${query}`;

  let data;
  try {
    const res = await fetch(endpoint);
    if (!res.ok) throw new Error('Creature not found');
    data = await res.json();
  } catch (err) {
    // Only use mock as fallback if fetch fails
    const lowerQuery = query.toLowerCase();
    data = mockData[lowerQuery] || Object.values(mockData).find(m => String(m.id) === query);
    if (!data) {
      alert('Creature not found');
      return;
    }
  }

  populateUI(data);
});

function populateUI(data) {
  nameEl.textContent = data.name.toUpperCase();
  idEl.textContent = `#${data.id}`;
  weightEl.textContent = `Weight: ${data.weight}`;
  heightEl.textContent = `Height: ${data.height}`;

  // Clear previous types
  typesEl.innerHTML = '';
  if (Array.isArray(data.types)) {
    data.types.forEach(t => {
      const span = document.createElement('span');
      const tname = t?.type?.name || t.name || t;
      span.textContent = String(tname).toUpperCase();
      typesEl.appendChild(span);
    });
  }

  // Fill stats
  if (Array.isArray(data.stats) && data.stats.length >= 6) {
    hpEl.textContent = data.stats[0].base_stat;
    attackEl.textContent = data.stats[1].base_stat;
    defenseEl.textContent = data.stats[2].base_stat;
    spAttackEl.textContent = data.stats[3].base_stat;
    spDefenseEl.textContent = data.stats[4].base_stat;
    speedEl.textContent = data.stats[5].base_stat;
  }
}

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 Edg/140.0.0.0

Challenge Information:

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

2

don’t do this, always use the API

you should also check again the API instructions, you are calling to a non existing endpoint

you should also not have the code both in the JS file and in the script element, chose one, or its extremely confusing

you also may need to wait, the API may be down at the moment

3

oh, it’s not down, you have the wrong link tho: this one works https://rpg-creature-api.freecodecamp.rocks/

you should read there, and use the correct endpoint in your app

4

Thank you so much for the API tip. I will make sure to follow the instructions, and I really appreciate all the support I’m getting.