Build an RPG Creature Search App Project - Build an RPG Creature Search App (No styling done yet)

JavaScript
1

Tell us what’s happening:

I am not sure why I am not passing check 14 and 19. Check 19 sometimes passes which is also weird. When I type in Red, I do get the alert with the correct text.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RPG Creature Search</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <header>
      <h1>RPG Creature Search</h1>
      <p>All creature data is retrieved from freeCodeCamp's <a href="https://rpg-creature-api.freecodecamp.rocks/">RPG Creature API</a></p>
      <p>Enter a valid creature name or id to load it's stats.</p>
    </header>
    <main>
      <input type="text" id="search-input" required>
      <button id="search-button">Search</button>
      <div id="creature-stats" class="creature-stats">
        <span id="creature-name" class="stat">temp-name</span>
        <span id="creature-id" class="stat">temp-id</span>
        <span id="weight" class="stat">temp-wt</span>
        <span id="height" class="stat">temp-ht</span>
        <span id="types" class="stat">temp-type</span>
        <span id="hp" class="stat">temp-hp</span>
        <span id="attack" class="stat">temp-atk</span>
        <span id="defense" class="stat">temp-def</span>
        <span id="special-attack" class="stat">temp-spAtk</span>
        <span id="special-defense" class="stat">temp-spDef</span>
        <span id="speed" class="stat">temp-speed</span>
      </div>
    </main>
  </body>
  <script src="script.js"></script>
</html>

/* file: script.js */
const validCreatureURL = "https://rpg-creature-api.freecodecamp.rocks/api/creatures";
//https://rpg-creature-api.freecodecamp.rocks/api/creature/{name-or-id}
const creatureInfoURL = "https://rpg-creature-api.freecodecamp.rocks/api/creature/";

const searchInput = document.getElementById("search-input");
const searchBtn = document.getElementById("search-button");
const creatureStatsSpans = document.querySelectorAll(".stat");
const creatureSpanMap = {};
let creatures = [];
let loaded = false;


//console.log(creatureStatsSpans);

//set creatureSpansMap so keys are id's instead of numbers for better accessibility.
creatureStatsSpans.forEach((span) => {
  //console.log(span.id);
  //console.log(span.innerText);
  if(span.id){
    creatureSpanMap[span.id] = span;
  }
})

//console.log(creatureSpanMap)

window.onload = async () => {
  creatures = await fetchData();
  searchBtn.addEventListener("click", searchCreatures);
}

const fetchData = async (link=validCreatureURL) => {
  try {
    const res = await fetch(link);
    const data = await res.json();
    //console.log(data);
    return data;
  } catch (err) {
    console.log(err);
  }
};

const clearStats = () => {
  Object.entries(creatureSpanMap).forEach(([id,span]) => {
    if(id === "types"){
      span.innerHTML = ``;
    }else{
      span.textContent = ``;
    }
  })
}

const loadData = async (obj) => {
  clearStats();
  const data = await fetchData(`${creatureInfoURL}${obj.id}`);
  //console.log(data);

  creatureSpanMap["creature-name"].textContent = data.name.toUpperCase();
  creatureSpanMap["creature-id"].textContent = `#${data.id}`;
  creatureSpanMap["weight"].textContent = `Weight: ${data.weight}`;
  creatureSpanMap["height"].textContent = `Height: ${data.height}`;
  data.types.forEach((type) => {
    creatureSpanMap["types"].innerHTML += `<div>${type.name.toUpperCase()}</div>`;
  })
  data.stats.forEach((stat) => {
    creatureSpanMap[stat.name].textContent = stat.base_stat;
  })
}


const searchCreatures = () => {
  let notFound = true;
  for(const obj of creatures){
    if(searchInput.value === obj.name || parseInt(searchInput.value) === obj.id){
      notFound = false;
      loadData(obj);
    }
  }
  if(notFound){
    clearStats();
    alert("Creature not found");
  }
}



/* file: styles.css */
*, ::before, ::after {
  box-sizing: inherit;
  padding: 0;
  margin: 0;
  scroll-behavior: smooth;
}
  
html {
  box-sizing: border-box;
  font-family: "Times New Roman";
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:139.0) Gecko/20100101 Firefox/139.0

Challenge Information:

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

2

try using only this one, for each search ping the API to check if the creature exists or not (you get a 404 error) and retrieve the data