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

JavaScript
1

Tell us what’s happening:

Please why is my search input value always an “”?
I queried its element with querySelector and I tried changing its backgroundColor with js and it changed…but the input value is still empty.
I then get it with getElementById I’m still experiencing the same thing …the input value is still an empty string

So I can proceed with my coding .

Please, I need help

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" />
<title>RPG SEARCH PROJECT</title>
<link rel="stylesheet" href="styles.css">
<body>
<header><h1>RPG Creature Search App Project</h1></header>
<input id="search-input" required>
<button id="search-button">Search</button>
<div id="others">
<h2 id="creature-name"><span id="creature-id"></span></h2>
<p id="weight"></p>
<p id="height"></p>
<p id="types"></p>
</div>

<div style="display: flex">
<div class="sub1a" style="width: 50%">Base</div>
<div class="sub1b" style="width: 50%">Satats
</div>
</div>

<div style="display: flex">
<div class="sub1a" style="width: 50%">HP:</div>
<div class="sub1b" style="width: 50%"><span  id="hp"></span>
</div>
</div>

<div style="display: flex">
<div class="sub1a" style="width: 50%">Attack:</div>
<div class="sub1b" style="width: 50%"><span id="attack"></span>
</div>
</div>

<div style="display: flex">
<div class="sub1a" style="width: 50%">Defense:</div>
<div class="sub1b" style="width: 50%"><span id="defense"></span>
</div>
</div>

<div style="display: flex">
<div class="sub1a" style="width: 50%">Special Attack:</div>
<div class="sub1b" style="width: 50%"><span id="special-attack"></span>
</div>
</div>

<div style="display: flex">
<div class="sub1a" style="width: 50%">Special  Defense:</div>
<div class="sub1b" style="width: 50%"><span id="special-defense"></span>
</div>
</div>

<div style="display: flex">
<div class="sub1a" style="width: 50%">Speed:</div>
<div class="sub1b" style="width: 50%"><span id="speed"></span>
</div>
</div>




  



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

/* file: script.js */
const searchInput = document.getElementById("search-input");
const searchBtn = 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 types = document.getElementById("types");
const hp = document.getElementById("hp");
const speed = document.getElementById("speed");
const attack = document.getElementById("attack");
const defense = document.getElementById("defense");
const specialAttack = document.getElementById("special-attack");
const specialDefense = document.getElementById("special-defense");

const allValidCreatures = "https://rpg-creature-api.freecodecamp.rocks/api/creatures"

const creatureDetails = "https://rpg-creature-api.freecodecamp.rocks/api/creature/name|id"

const fetchAllValidCreatures = async()=>{
  try{
const res = await fetch(allValidCreatures)
const data = await res.json()
  }catch(err){
console.log(err)
  }
}
fetchAllValidCreatures()

 console.log(searchInput.value)
 


  














/* file: styles.css */
.sub1a{
  padding-left: 2vw;
  background-color: rgb(16,78,60);
margin-top: 20px;
 color: white;
 height: 20px;
padding: 5px;

}
.sub1b{
 background-color: rgb(16,78,60); 
margin-left: 3vw;
padding-left: 2vw;
margin-top: 20px;
color: white;
padding: 5px;
 height: 20px
 
}

body{
background-color: rgb(15,18,40);
color: rgb(192,192,192)
}
input {
  background-color: rgb(192,192,192);
  padding: 1.5vw;
  margin-top: 10px;
  border-radius: 5px;
    margin-left: 120px
}
button {
  background-color: rgb(10,150,10);
  padding: 10px;
  color: white;
  border-radius: 15px;
}
header{
  margin-top: 0px;
}
#creature-id {
  margin-left: 5px
}

Your browser information:

User Agent is: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/137.0.0.0 Safari/537.36 OPR/90.0.0.0

Challenge Information:

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

2

you are getting the value when the app starts, how do you expect the console.log to print something else?

3

Ok, I wanted all to be functional before proceeding ,

input values are only accessible if it’s accessed within a button’s addeventListener callback ?

Thanks.

4

you are getting the value that it has when the app starts "", if you want a different value you need to have something that is executed when you want to capture the value

1 Like
5

Tell us what’s happening:

Please I need help.
I have been debugging since yesterday.
Please, my code is unable to pass test 15 and 17, but it passed test 20 which says that the UI should be filled with the accurate data. Please help me .
I used for…loop to access the data object and pushed the base_stat values to an array still it didn’t work, you can see how I commented out the loop.
I then accessed the object with bracket notation, still it didn’t work
Please, don’t correct the code directly, ask me questions.

const searchInput = document.getElementById(“search-input”);

const searchBtn = 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 types = document.getElementById(“types”);

const hp = document.getElementById(“hp”);

const speed = document.getElementById(“speed”);

const attack = document.getElementById(“attack”);

const defense = document.getElementById(“defense”);

const others = document.getElementById(“others”);

const specialAttack = document.getElementById(“special-attack”);

const specialDefense = document.getElementById(“special-defense”);

const searchCreature = ()=>{

const fetchCreatureDetails = async()=>{

try{

const res = await fetch(“https://rpg-creature-api.freecodecamp.rocks/api/creature/”+`${searchInput.value}`)

const data = await res.json()

displayData(data)

}catch(err){

alert(“Creature not found”);

};

};

fetchCreatureDetails()

};

const displayData = (data)=>{

others.style.display = “block”

types.innerHTML = “”;

creatureName.textContent = `${data[“name”].toUpperCase()}`

creatureId.textContent = `ID: ${ data.id}`

weight.textContent = `Weight: ${data[“weight”]}`

height.textContent = `Height: ${data[“height”]}`

if (data[“types”].length === 2){

const type = data[“types”]

types.innerHTML = `

${type[0][“name”].toUpperCase()}

${type[1][“name”].toUpperCase()}

`

}

else{

types.innerHTML = `

${data[“types”][0][“name”].toUpperCase()}

`

}

/*

const stat = data[“stats”];

let baseValues =

for (let i = 0; i<stat.length; i++){

baseValues.push(stat[i][“base_stat”])

};

*/

hp.textContent =`HP: ${data[“stats”][0][“base_stat”]}`

attack.textContent = `Attack: ${data[“stats”][1][“base_stat”]}`

defense.textContent = `Defense: ${data[“stats”][2][“base_stat”]}`

specialAttack.textContent = `Special Attack: ${data[“stats”][3][“base_stat”]}`

specialDefense.textContent = `Special Defense: ${data[“stats”][4][“base_stat”]}`

speed.textContent = `Speed: ${data[“stats”][5][“base_stat”]}`

};

searchBtn.onclick = searchCreature;

Your code so far

<!-- file: index.html -->

/* file: styles.css */


/* file: script.js */

Your browser information:

User Agent is: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/137.0.0.0 Safari/537.36 OPR/90.0.0.0

Challenge Information:

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

6

can you please edit your post and format your code in a code block? You can use the </> to create a code block, and your code needs to go inside that

7

```const attack = document.getElementById(“attack”);

const defense = document.getElementById(“defense”);

const others = document.getElementById(“others”);

const specialAttack = document.getElementById(“special-attack”);

const specialDefense = document.getElementById(“special-defense”);

const searchCreature = ()=>{

const fetchCreatureDetails = async()=>{

try{

const res = await fetch(“https://rpg-creature-api.freecodecamp.rocks/api/creature/”+`${searchInput.value}`)

const data = await res.json()

displayData(data)

}catch(err){

alert(“Creature not found”);

};

};

fetchCreatureDetails()

};

const displayData = (data)=>{

others.style.display = “block”

types.innerHTML = “”;

creatureName.textContent = ${data[“name”].toUpperCase()}

creatureId.textContent = ID: ${ data.id}

weight.textContent = Weight: ${data[“weight”]}

height.textContent = Height: ${data[“height”]}

if (data[“types”].length === 2){

const type = data[“types”]

types.innerHTML = `

${type[0][“name”].toUpperCase()}

${type[1][“name”].toUpperCase()}

`

}

else{

types.innerHTML = `

${data[“types”][0][“name”].toUpperCase()}

`

}

/*

const stat = data[“stats”];

let baseValues =

for (let i = 0; i<stat.length; i++){

baseValues.push(stat[i][“base_stat”])

};

*/

hp.textContent =HP: ${data[“stats”][0][“base_stat”]}

attack.textContent = Attack: ${data[“stats”][1][“base_stat”]}

defense.textContent = Defense: ${data[“stats”][2][“base_stat”]}

specialAttack.textContent = Special Attack: ${data[“stats”][3][“base_stat”]}

specialDefense.textContent = Special Defense: ${data[“stats”][4][“base_stat”]}

speed.textContent = Speed: ${data[“stats”][5][“base_stat”]}

};

searchBtn.onclick = searchCreature;

8

Please , explain to me. I thought it would be uploaded automatically.

9

if you are using backticks you need three backticks on their own line above your code and three backticks on their own line below the code.

Your code is not uploaded automatically if it is too long.

Also please share your HTML too.

When you enter a code block into a forum post, please precede it with three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add the backticks.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

10

Tell us what’s happening:

Please I need help my code can’t pass test 15 and 17, but it passed 20 and others . Please my UI is filled with the correct data.
You can see how I commented out my for..loop. I thought it was breaking prematurely, I then used bracket notation..I’m still experiencing the same problem.

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" />
<title>RPG SEARCH PROJECT</title>
<link rel="stylesheet" href="styles.css">
<body>
<header><h1>RPG Creature Search App Project</h1></header>
<input id="search-input" required>
<button id="search-button">Search</button>
<div id="others">
<h2 id="creature-name"></h2>
<h3 id="creature-id"></h3>
<h3 id="weight"></h3>
<h3 id="height"></h3>
<div id="types"></div>
</div>

<div style="display: flex">
<div class="sub1b" style="width: 50%">Stats
</div>
</div>

<div style="display: flex">
<div class="sub1b" style="width: 50%"><span  id="hp"></span>
</div>
</div>

<div style="display: flex">
<div class="sub1b" style="width: 50%"><span id="attack"></span>
</div>
</div>

<div style="display: flex">
<div class="sub1b" style="width: 50%"><span id="defense"></span>
</div>
</div>

<div style="display: flex">
<div class="sub1b" style="width: 50%"><span id="special-attack"></span>
</div>
</div>

<div style="display: flex">
<div class="sub1b" style="width: 50%"><span id="special-defense"></span>
</div>
</div>

<div style="display: flex">
<div class="sub1b" style="width: 50%"><span id="speed"></span>
</div>
</div>

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

/* file: script.js */
const searchInput = document.getElementById("search-input");
const searchBtn = 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 types = document.getElementById("types");
const hp = document.getElementById("hp");
const speed = document.getElementById("speed");
const attack = document.getElementById("attack");
const defense = document.getElementById("defense");
const others = document.getElementById("others");

const specialAttack = document.getElementById("special-attack");
const specialDefense = document.getElementById("special-defense");

const searchCreature = ()=>{
const fetchCreatureDetails = async()=>{
try{
const res = await fetch("https://rpg-creature-api.freecodecamp.rocks/api/creature/"+`${searchInput.value}`)
const data = await res.json()
displayData(data)
}catch(err){
alert("Creature not found");
};
};
 fetchCreatureDetails()
};

const displayData = (data)=>{
others.style.display = "block"
types.innerHTML = "";
creatureName.textContent = `${data["name"].toUpperCase()}`
creatureId.textContent = `ID: ${ data.id}`
weight.textContent = `Weight: ${data["weight"]}`
height.textContent = `Height: ${data["height"]}`
if (data["types"].length === 2){
const type = data["types"]
types.innerHTML = `<h3>${type[0]["name"].toUpperCase()}</h3><h3>${type[1]["name"].toUpperCase()}</h3>`
}
else{
  types.innerHTML = `<h3>${data["types"][0]["name"].toUpperCase()}</h3>`
}

/*
const stat = data["stats"];
let baseValues = []
for (let i = 0; i<stat.length; i++){
  baseValues.push(stat[i]["base_stat"])
};*/
hp.textContent =`HP: ${data["stats"][0]["base_stat"]}`
attack.textContent =  `Attack: ${data["stats"][1]["base_stat"]}`
defense.textContent =  `Defense: ${data["stats"][2]["base_stat"]}`
specialAttack.textContent =  `Special Attack: ${data["stats"][3]["base_stat"]}`
specialDefense.textContent =  `Special Defense: ${data["stats"][4]["base_stat"]}`
speed.textContent =  `Speed: ${data["stats"][5]["base_stat"]}`

};
searchBtn.onclick = searchCreature;

/* file: styles.css */

.sub1b{
 background-color: rgb(1,0,0); 
margin-left: auto;
padding-left: 2vw;
margin-top: 10px;
color: white;
padding: 5px;
 height: 20px;
 text-align: center;
 width: 80vw!important ;
 margin-right: auto;

}

body{
background-color: rgb(20,20,30);
color: rgb(192,192,192)
}
input {
  background-color: rgb(192,192,192);
  padding: 1.5vw;
  margin-top: 10px;
  border-radius: 5px;
    margin-left: 120px
}
button {
  background-color: rgb(10,150,10);
  padding: 10px;
  color: white;
  border-radius: 15px;
}
header{
  margin-top: 0px;
}
#others{
  background-color: rgb(0,0,0);
  color: yellow;
  padding-left: 2vw;
  width: 70vw;
  border-radius: 30px;
padding-bottom: 5px;
padding-top: 0.5px;
display: none;
margin: 0px auto 0px;
}

Your browser information:

User Agent is: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/137.0.0.0 Safari/537.36 OPR/90.0.0.0

Challenge Information:

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

11

you are writing ID: 1 in an element, the test is finding that and failing. Please check again the user stories on what should be in the element

1 Like
12

May the God I serve reward you a million times.
Thanks for saving me . Oooh no I was just feeling stupid. I have crushed it