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

Curriculum Help
, ,
1

Tell us what’s happening:

The webpage is working fine when I open it up in my browser and also in the freeCodeCamp preview panel. But for some reason it is failing the test #17. It passes all other tests including #15 which is of similar type. Does anyone has a fix?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html>
  <head>
    <title>RPG Creature Search App</title>
    <link rel="stylesheet" href="styles.css" >
  </head>
  <body>
    <main>
      <div id="container">
        <div id="search-area">
          <input id="search-input" required>
          <button id="search-button">Search</button>
        </div>
        <div id="details-area">
          <p><span id="creature-name"></span><span id="creature-id"></span></p>
          <p><span id="weight"></span><span id="height"></span></p>
          <div id="types"></div>
          <div>
            <p id="special-name"></p>
            <p id="special-description"></p>
          </div>
        </div>
        <div id="stats-area">
          <p><span><b>Base</b></span><span><b>Stats</b></span></p>
          <p><span>HP:</span><span id="hp"></span></p>
          <p><span>Attack:</span><span id="attack"></span></p>
          <p><span>Defense:</span><span id="defense"></span></p>
          <p><span>Sp. Attack:</span><span id="special-attack"></span></p>
          <p><span>Sp. Defense:</span><span id="special-defense"></span></p>
          <p><span>Speed:</span><span id="speed"></span></p>
        </div>
      </div>
    </main>
    <script src="script.js"></script>
  </body>
</html>


/* file: styles.css */
html {
  font-size: 16px;
  padding: 0px;
  margin: 0px;
  color: white;
}

body {
  padding: 0px;
  background-color: #128;
}

main {
  padding: 2rem;
  margin: 0;
}

#container {
  margin: auto;
  background-color: #ccc;
  width: 20rem;
  border-radius: 1rem;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#search-area {
  display: flex;
  justify-content: center;
  height: 2rem;
}

#search-button {
  font-weight: bold;
  background-color: green;
}

#details-area {
  height: 12rem;
  color: black;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

#details-area > p, #details-area > div {
  margin: 0 0.5rem 0 0;
}

#details-area > p > span {
  margin: 0.5rem 0.5rem 0 0;
}

#creature-name {
  font-size: 2rem;
  font-weight: bold;
}

#creature-id {
  font-size: 1.5rem;
  font-weight: bold;
}

#types > span {
  font-size: 0.75rem;
  margin: 0.5rem;
  padding: 0.25rem 0.5rem;
  background-color: blue;
  border-radius: 0.5rem;
}

#special-name {
  font-size: 1.5rem;
  font-weight: bold;
  margin: 0;
}

#special-desc {
  margin: 0;
}

#stats-area > p {
  display: flex;
  justify-content: space-between;
}

#stats-area > p > span {
  padding: 0.5rem;
  width: 43%;
  background-color: purple;
}


/* file: script.js */
// search
const input = document.getElementById("search-input");
const button = document.getElementById("search-button");

// detail area
const creatureName = document.getElementById("creature-name");
const creatureId = document.getElementById("creature-id");
const weight = document.getElementById("weight");
const height = document.getElementById("height");
const types = document.getElementById("types");
const specialName = document.getElementById("special-name");
const specialDesc = document.getElementById("special-description");

// stats
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');

async function getRPGCreature(creature_id) {
  const url = `https://rpg-creature-api.freecodecamp.rocks/api/creature/${creature_id}`;
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    const data = await response.json();
    return data;
  } catch (error) {
    console.error(`Failed to fetch data: ${error}`);
  }
}

async function handleData(creature) {
  try {
    const data = await getRPGCreature(creature);

    if (!data) {
      alert("Creature not found");
      throw new Error("Creature not found!");
    }

    creatureName.textContent = data.name.toUpperCase();
    creatureId.textContent = `#${data.id}`;

    weight.textContent = `Weight: ${data.weight}`;
    height.textContent = `Height: ${data.height}`;

    specialName.textContent = data.special.name;
    specialDesc.textContent = data.special.description;

    types.innerHTML = '';
    data.types.forEach(type => {
      types.innerHTML += `<span>${type.name.toUpperCase()}</span>`;
    });

    hp.textContent = data.stats[0].base_stat;
    attack.textContent = data.stats[1].base_stat;
    defense.textContent = data.stats[2].base_stat;
    specialAttack.textContent = data.stats[3].base_stat;
    specialDefense.textContent = data.stats[4].base_stat;
    speed.textContent = data.stats[5].base_stat;
  } catch (error) {
    console.error(error);
    creatureName.textContent = "";
    creatureId.textContent = "";
    weight.textContent = "";
    height.textContent = "";
    specialName.textContent = "";
    specialDesc.textContent = "";
    types.innerHTML = "";
    hp.textContent = "";
    attack.textContent = "";
    defense.textContent = "";
    specialAttack.textContent = "";
    specialDefense.textContent = "";
    speed.textContent = "";
  }
}

button.addEventListener("click", () => handleData(input.value.trim()));

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64; rv:151.0) Gecko/20100101 Firefox/151.0

Challenge Information:

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

GitHub Link: freeCodeCamp/curriculum/challenges/english/blocks/build-an-rpg-creature-search-app-project/6555c1d3e11a1574434cf8b5.md at main · freeCodeCamp/freeCodeCamp · GitHub

2

try clearing the infos already shown as soon as possible before you start working on the next search , you clean them only in the catch field, and it seems the tests do not wait for the values to change so see outdated values

3

Welcome to the forum @karthikyadav,

Maybe try a different approach where you call getRPGCreature inside the search button listener after input validation then, inside getRPGCreature, pass the data back to handleData in a function call. That way, you would only have one async function.

Happy coding

4

Thanks. It worked. I just had to clear all the previous data before fetching the new data.