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

Tell us what’s happening:

I’m stuck in step 15. exhausted my brain so much i couldn’t think anymore. send help. lol. is it possible that maybe the API is not working? I’ve been stuck in step 15 for a while now, going back and forth.

Your code so far

<!--<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>RPG creature search app</title>
</head>
<body>
    <main>
        <img class="freecodecamp-logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo">
        <h1>RPG Creature Search App</h1>
        <div class="container">
            <form role="search" id="search-form">
                <label for="search-input">Search for Creature Name or ID:</label>
                <input type="text" name="creature" id="search-input" required="">
                <button id="search-button">Search</button>
            </form>
        
            <div class="output">
              <div class="top-container">
                <div class="name-and-id">
                        <span id="creature-name"></span>
                        <span id="creature-id"></span>
                    <div class="size">
                        <span id="weight"></span>
                        <span id="height"></span>
                    </div>
                </div>
            
                <div id="types"></div>
                    <div>
                        <div id="special-name"></div>
                        <div id="special-description"></div>
                    </div>
                </div>
          
                <div class="bottom-container">
                    <table>
                        <tbody><tr>
                            <th>Base</th>
                            <th>Stats</th>
                        </tr>
                        <tr>
                            <td>HP:</td>
                            <td id="hp"></td>
                        </tr>
                        <tr>
                            <td>Attack:</td>
                            <td id="attack"></td>
                        </tr>
                        <tr>
                            <td>Defense:</td>
                            <td id="defense"></td>
                        </tr>
                        <tr>
                            <td>Sp. Attack:</td>
                            <td id="special-attack"></td>
                        </tr>
                        <tr>
                            <td>Sp. Defense:</td>
                            <td id="special-defense"></td>
                        </tr>
                        <tr>
                            <td>Speed:</td>
                            <td id="speed" class="speed"></td>
                        </tr>
                    </tbody></table>
                </div>
            </div>
        </div>
    </main>
    <script src="script.js"></script>
</body>
</html> -->

/* window.addEventListener('DOMContentLoaded', () => {
const searchInput = document.getElementById('search-input');
const searchBtn = document.getElementById('search-button');
const searchForm = document.getElementById('search-form');

const handleSearch = async (event) => {
  event.preventDefault();

  const query = searchInput.value.trim();

  if (!query) return;

  try {
    const response = await fetch(`https://rpg-creature-api.freecodecamp.rocks/api/creatures/${query.toLowerCase()}`);

    if (!response.ok) {
      alert('Creature not found');
      clearCreatureInfo();
      return;
    }

  const creature = await response.json();
  updateCreatureInfo(creature);
  
  } catch (error) {
    alert('Creature not found');
    clearCreatureInfo();
  }
};

searchForm.addEventListener('submit', handleSearch);
searchBtn.addEventListener('click', handleSearch);

const clearCreatureInfo = () => {
  document.getElementById('creature-name').textContent = '';
  document.getElementById('creature-id').textContent = '';
  document.getElementById('weight').textContent = '';
  document.getElementById('height').textContent = '';
  document.getElementById('hp').textContent = '';
  document.getElementById('attack').textContent = '';
  document.getElementById('defense').textContent = '';
  document.getElementById('special-attack').textContent = '';
  document.getElementById('special-defense').textContent = '';
  document.getElementById('speed').textContent = '';
  document.getElementById('types').innerHTML = '';
}

const updateCreatureInfo = (creature) => {
  console.log('Creature', creature);
  if (!creature) {
    clearCreatureInfo();
    return;
  }
  const data = Array.isArray(creature) ? creature[0] : creature;
  document.getElementById('creature-name').textContent = data.name.toUpperCase();
  document.getElementById('creature-id').textContent = data.id;
  document.getElementById('weight').textContent = data.weight;
  document.getElementById('height').textContent = data.height;
  document.getElementById('hp').textContent = data.hp;
  document.getElementById('attack').textContent = data.attack;
  document.getElementById('defense').textContent = data.defense;
  document.getElementById('special-attack').textContent = data.special_attack;
  document.getElementById('special-defense').textContent = data.special_defense;
  document.getElementById('speed').textContent = data.speed;

  const typesContainer = document.getElementById('types');
typesContainer.innerHTML = '';
data.types.forEach(type => {
  const typeEl = document.createElement('div');
  typeEl.textContent = type.toUpperCase();
  typesContainer.appendChild(typeEl);
});
};


}); */

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/136.0.0.0 Safari/537.36

Challenge Information:

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

what make you think that the api is not working? what testing have you done?

The endpoint for a single creature is not plural. The plural endpoint is for all creatures.

Usage

Use the endpoint https://rpg-creature-api.freecodecamp.rocks/api/creatures to see a list of all valid creature names and ID numbers.

Use the endpoint https://rpg-creature-api.freecodecamp.rocks/api/creature/{name-or-id} to get data for a creature, where {name-or-id} is the creature’s name or ID number.

  • Log out the catch error.

  • Look at the shape of the creature data you are logging. Make sure you are accessing the data/properties correctly.


I will say, I find the data shape the API returns a little odd. However, I think it is meant for easier creation of the label and associated data.