RPG Creature Seacch APP : conditions 15, 16, 17, 18, 20 not passing

JavaScript
1 
<!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>Finding RPG Creatures</title>
</head>

<body>
  <header id="header"><b>Finding RPG Creatures</b></header>

  <section>
    <label>Find your favourite creature here below!</label>

    <p>Search for Creature Name or ID</p>

    <input id="search-input" placeholder="give a name or ID to find" required />
    <button id="search-button">SEARCH</button>
  </section>

  <section class="creature">

    <p><span id="creature-name"></span></p>
    <p><span id="creature-id"></span></p>

    <p></p>
    <div id="types"></div>

    <p><span id="weight"></span></p>
    <p><span id="height"></span></p>
<p id="special-name"></p>
<p id="description"></p>
  </section>

  <section>
    <table border="1" cellpadding="6" width="70%">
      <caption><strong>Statistics</strong></caption>

      <tr>
        <th>Base</th>
        <th>Value</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>Special Attack:</td>
        <td id="special-attack"></td>
      </tr>

      <tr>
        <td>Special Defense:</td>
        <td id="special-defense"></td>
      </tr>

      <tr>
        <td>Speed:</td>
        <td id="speed"></td>
      </tr>

    </table>
  </section>

</body>
    
<script>
const searchInput = document.getElementById("search-input");
const searchButton = document.getElementById("search-button");
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");
const specialName=document.getElementById("special-name");
const description=document.getElementById("description");

searchButton.addEventListener("click", ()=>{

const inputValue = searchInput.value.trim(); 
  if (inputValue.toLowerCase() === "red") {
   
    alert("Creature not found");

}

//fetching 
const endpoint=`https://rpg-creature-api.freecodecamp.rocks/api/creature/${inputValue.toLowerCase()}`;

fetch(endpoint).then((res)=>res.json())
.then((data)=> {
creature=data; 
creatureName.textContent=creature.name.toUpperCase(); 
creatureId.textContent=`#${creature.id}`; 
weight.textContent=`Weight: ${creature.weight}`;
height.textContent=`Height: ${creature.height}`;

const getStat = (name) =>
  creature.stats.find(stat => stat.name === name).base_stat;
hp.textContent = getStat("hp");
    attack.textContent = getStat("attack");
    defense.textContent = getStat("defense");
    specialAttack.textContent = getStat("special-attack");
    specialDefense.textContent = getStat("special-defense");
    speed.textContent = getStat("speed");

specialName.textContent=creature.special.name;
description.textContent=creature.special.description; 

types.innerHTML="";
creature.types.forEach(typeObj => {
  const span = document.createElement("span");
  span.textContent = typeObj.name.toUpperCase();
  types.appendChild(span);
});

})
.catch (()=>{
alert("Creature not found");
})


})
 
</script>

  </html>

here 's is my code . please guide me why its not passing the conditions 15, 16, 17, 18, 20 .

1 Like
2

Please post your code and a link to the Step.

Also, please talk about how you are stuck debugging those failing tests

3

Here are some troubleshooting steps you can follow. Focus on one test at a time:

  1. Are there any errors or messages in the console?
  2. What is the requirement of the first failing test?
  3. Check the related User Story and ensure it’s followed precisely.
  4. What line of code implements this?
  5. What is the result of the code and does it match the requirement? (Write the value of a variable to the console at that point in the code if needed.)

If this does not help you solve the problem, please reply with answers to these questions.

1 Like
6

Please post a link to the Step.

Also, please talk about how you are stuck debugging.

Thanks

8

Please post a link to the Step.

Also, please talk about how you are stuck debugging.

Thanks

Writing the answer for you isn’t something we do. We need you to help us help you.

9

https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures-v8/build-an-rpg-creature-search-app-project/build-an-rpg-creature-search-app

my code is not passing. the console says same as the conditions 15, 16, 17 , 18. i don’t understand what’ to edit in my code and what is the issue that its not passing

10

What are tests 15, 16, 17 and 18?

Which specific lines do you think should satisfy each of those tests?

11

I am stuck here. The code seems fine . but it’s not passing

12

Okay . there are some errors i have noticed like not adding return and not adding const for variable making . I have edit those now it passes. thank you

1 Like