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

JavaScript
1

Tell us what’s happening:

Why am I failing this test? 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”.

When I test it manually I am getting the alert for values that are not found in the data array. And values in the data array don’t trigger the alert. Am I missing something?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> RPG Creature Search App</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>RPG Creature Search App</h1>
    <div class="container">
      <form>
        <label for="search-input">Search for Creature Name or ID:</label>
        <div class="input-wrapper">
          <input id="search-input" name="search-input" type="text" required>
          <button id="search-button" type="submit">Search</button>
        </div>
      </form>
      <div id="results">
        <div id="creature-name"></div>
        <div id="creature-id"></div>
        <div id="weight"></div>
        <div id="height"></div>
        <div id="types"></div>
      </div>
      <div class="container-grid">
        <div><strong>Base</strong></div><div><strong>Stats</strong></div>
        <div>HP:</div><div id="hp"></div>
        <div>Attack:</div><div id="attack"></div>
        <div>Defense:</div><div id="defense"></div>
        <div>Sp. Attack</div><div id="special-attack"></div>
        <div>Sp. Defense</div><div id="special-defense"></div>
        <div>Speed</div><div id="speed"></div>
      </div>
    </div>
    <script src="script.js"></script>
  </body>
</html>

/* file: script.js */
// const creatureName =   "creature-name"
//   "creature-id"
//   "weight"
//   "height"
//   "types"

const searchButton = document.getElementById("search-button");
const searchInput = document.getElementById("search-input");

//Sends a network request to API
//And returns a Promise which becomes a Response object if fetch does not fail
fetch("https://rpg-creature-api.freecodecamp.rocks/api/creatures") // only gives name and id
.then((res)=>res.json()) //converts Response from JSON into JS Object
.then((data)=>{
  console.log(data) //log JS object to console
  searchButton.addEventListener("click", (event) => {
    event.preventDefault();
    const inputVal = searchInput.value;
    // loop thru data array of objs and for every creature/ele/obj
    const creatureFound = data.some((creature)=>{
      // if creatures name in lower case equals inputVal in lower case
      // or creatures id converted to a string is equal to inputVal
      if(creature.name.toLowerCase() === inputVal.toLowerCase() || creature.id.toString() === inputVal){
        // then creature is found
        return true;
      }
      else {
        return false;
      }
    });

    // if creature is not found make an alert
    if (!creatureFound){
      alert("Creature not found");
    }
  })
})
.catch((err)=>{ //if an error occurs log it
  console.error(`There was an error: ${err}`);
})

/* file: styles.css */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  background-color: rgb(27, 27, 51);
  /* display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; */
  height: 100%;
}

h1 {
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
  /* display: flex;
  justify-content: center;
  align-items: flex-start; */
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.container {
  /* display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; */
  margin: 2rem auto;
  padding: 1rem 2rem;
  background-color: rgb(241, 241, 241);
  width: 400px;
  height: 550px;
  border-radius: 15px;
  box-shadow: 10px 10px gray;
}

form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.5;
}

.input-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
}

label {
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  margin-bottom: 10px;
  font-size: 17px;
}

input, button{
  height: 40px;
}

button {
  width: 70px;
  color: #fff;
  background-color: rgb(150, 2, 196);
  border-radius: 17px;
  border: none;
}

.container-grid {
  display: grid;
  background-color: rgb(150, 2, 196);
  grid-template-columns: 2fr 1fr;
  color: #fff;
  /* margin-top: 10rem; */
}

.container-grid div {
  padding: 10px;
  border: 2px solid white;
}

#results {
  margin-top: 20px;
  margin-bottom: 10px;
  display: grid;
  grid-template-columns: 1fr;
  width: 333px;
  height: 133px;
  object-fit: contain;
  background-color: rgb(220, 220, 228);
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.2 Safari/605.1.15

Challenge Information:

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

2

Ok so I fixed it! I moved the event listener outside of the fetch and created a global variable let creaturesList = []; that I reassigned to the data array. And I used that variable to loop through the data inside my event listener:

// const creatureName =   "creature-name"
//   "creature-id"
//   "weight"
//   "height"
//   "types"

const searchButton = document.getElementById("search-button");
const searchInput = document.getElementById("search-input");
let creaturesList = [];
//Sends a network request to API
//And returns a Promise which becomes a Response object if fetch does not fail
fetch("https://rpg-creature-api.freecodecamp.rocks/api/creatures") // only gives name and id
.then((res)=>res.json()) //converts Response from JSON into JS Object
.then((data)=>{
  console.log(data) //log JS object to console
  creaturesList = data; //save this data to a variable
})
.catch((err)=>{ //if an error occurs log it
  console.error(`There was an error: ${err}`);
})

searchButton.addEventListener("click", (event) => {
    event.preventDefault();
    //remove unnecessary white space from user input
    const inputVal = searchInput.value.trim();
    // loop thru data array of objs and for every creature/ele/obj
    let creatureFound = creaturesList.some((creature)=>{
      // if creatures name in lower case equals inputVal in lower case
      // or creatures id converted to a string is equal to inputVal
      if(creature.name.toLowerCase() === inputVal.toLowerCase() || creature.id.toString() === inputVal){
        // then creature is found
        return true;
      }
      else {
        return false;
      }
    });

    // if creature is not found make an alert
    if (!creatureFound){
      alert("Creature not found");
    }
  })