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

JavaScript
1

Tell us what’s happening:

I been work half way in this project, but I feel like my API link is not correct, especially when I try to display weight and height it’s underfined, can someone show me what exactly API should I use. Thanks!

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>Document</title>
</head>
<body>
  <input id="search-input" 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>









  <script src="script.js"></script>
</body>
</html>

/* file: script.js */
const searchInput = document.getElementById('search-input')
const searchBtn = document.getElementById('search-button')
const getName = document.getElementById('creature-name')
const getId = document.getElementById('creature-id')
const weight = document.getElementById('weight')
const height = document.getElementById('height')
const type = document.getElementById('types')
const hp = document.getElementById('hp')
const attack = document.getElementById('attack')
const defense = document.getElementById('defense')
const specialAttack = document.getElementById('special-attack')
const speacialDefense = document.getElementById('special-defense')
const speed = document.getElementById('speed')

async function searchList(){
  try{
  const searchNameValue = searchInput.value.toLowerCase()
  const res = await fetch(`https://rpg-creature-api.freecodecamp.rocks/api/creature/${searchNameValue}`)
  const data = await res.json()
  searchValue(data)
  if(searchNameValue === "Red"){
    alert("Creature not found")
  }
  } catch(error){
    alert('Creature not found');
    console.log(`Creature not found: ${err}`);
  }
}

const searchValue = data => {
  const { id, name, weight, height, special, stats, types} = data
  getName.innerText = `${name}`
  getId.innerText = `#${id}`
  weight.innerText = `Weight: ${weight}`
  height.innerText = `Height: ${height}`
  type.innerText = `${types}`
  hp.innerText = `${stats[0].base_stat}`
  speed.textContent = `${special}`
}

searchBtn.addEventListener("click", e => {
  e.preventDefault()
  searchList()
})
searchInput.addEventListener("keydown", e => {
  if(e.key === "Enter"){
    searchBtn.click()
  }
})


/* 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

By undefined weight or height do you mean the data returned from API, or element on page?

3

don’t do this, also this is never going to be true, you make searchNameValue lowercase a few lines above, but let the fact that the api returns 404 if the creature is not in the database determine if you show the alert or not

if this gives that one of the values is undefined, look at data, log it, is it made in the way you expect?

4

  1. Any function called inside the try block that errors will make the catch run.

  2. You are not logging the correct catch error parameter. If you log it out correctly, you get a more helpful error message.

  3. You are shadowing variables. You have variables in an outer scope named the same as inside your function. The function local variables will take precedence. So the function local weight and height is not the elements, it is the data the API returned, and you can not set innerText on a primitive value.