Build an RPG Creature Search App Project - Build an RPG Creature Search App Stuck at Step 14

JavaScript
1

Tell us what’s happening:

I don’t know what is happening…
14. When the #search-input element contains the value Red and the #search-button element is clicked, an alert should appear with the text “Creature not found”.
[Error: AssertionError: expected undefined to equal ‘creature not found’]

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, inital-scale=1.0">
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
      <input id="search-input" type="text" required>
      <button id="search-button">Search</button>
      <div id="creature-name"></div>
      <div id="creature-id"></div>
      <div id="weight"></div>
      <div id="height"></div>
      <div id="types"></div>
      <div id="hp"></div>
      <div id="attack"></div>
      <div id="defense"></div>
      <div id="special-attack"></div>
      <div id="special-defense"></div>
      <div id="speed"></div>
  </body>
  <script src="script.js"></script>
</html>

/* file: script.js */
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 weightDiv=document.getElementById("weight")
const heightDiv=document.getElementById("height")
const typesDiv=document.getElementById("types")
const hpDiv=document.getElementById("hp")
const attackDiv=document.getElementById("attack")
const defenseDiv=document.getElementById("defense")
const specialAttackDiv=document.getElementById("special-attack")
const specialDefenseDiv=document.getElementById("special-defense")
const speedDiv=document.getElementById("speed")
const dataCreature="https://rpg-creature-api.freecodecamp.rocks/api/creatures"
const data1Monster=`https://rpg-creature-api.freecodecamp.rocks/api/creature/`
const fetchDataMonster = async () => {
  try {
    const res = await fetch(dataCreature);
    const dataMonsters = await res.json();
    findMonsterIdName(dataMonsters)
  } catch (err) {
    console.log(err);
  }
};
fetchDataMonster()
  
const findMonsterIdName=(data)=>{
  searchButton.addEventListener("click",()=>{
    const searchTerm = searchInput.value
    const foundCreature = data.find(
      (el) =>
        el.name === searchTerm || el.id === Number(searchTerm)
    );

    if (foundCreature) {
      fetch(data1Monster + foundCreature.id)
        .then(res1 => res1.json())
        .then(data => {
          showMonsterStats(data);
    });
    } else {
      alert('creature not found'); 
    }
  })
}
const showMonsterStats=(data)=>{
  const {
    id,
    name,
    weight,
    height,
    stats,
    types,
  }=data
creatureName.textContent=name
creatureId.textContent=id
weightDiv.textContent=weight
heightDiv.textContent=height
typesDiv.innerHTML = ""; 
typesDiv.innerHTML+=typesDamage(types)
hpDiv.textContent=stats[0].base_stat
attackDiv.textContent=stats[1].base_stat
defenseDiv.textContent=stats[2].base_stat
specialAttackDiv.textContent=stats[3].base_stat
specialDefenseDiv.textContent=stats[4].base_stat
speedDiv.textContent=stats[5].base_stat
}
const typesDamage=data=>{
return data.map((el)=>`<span>${el.name.toUpperCase()}</span>`).join(" ")
}


/* file: styles.css */

Your browser information:

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

Challenge Information:

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

2

you should try to use the fact that if you call the API with a non existing creatures it returns 404

1 Like