Tell us what’s happening:
I have completed 19 of the 20 objectives it asks me for: The last one I’m missing: Waiting:20. “When the #search-input element contains a valid creature ID and the #search-button element is clicked, the UI should be filled with the correct data.” I don’t quite understand what this refers to; it refers to a more elaborate CSS?. The API they asked me to create didn’t have the data, so I created an array with predefined data.
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div>
<input type="text" id="search-input" required>
<button type="button" id="search-button">Search</button>
</div>
<div>
<p>Name: <span id="creature-name"></span></p>
<p>ID: <span id="creature-id"></span></p>
</div>
<div>
<p>Weight: <span id="weight"></span></p>
<p>Height: <span id="height"></span></p>
</div>
<div>
<p id="types">Types: </p>
</div>
<div>
<p>HP: <span id="hp"></span></p>
<p>Attack: <span id="attack"></span></p>
<p>Defense: <span id="defense"></span></p>
<p>Special Attack: <span id="special-attack"></span></p>
<p>Special Defense: <span id="special-defense"></span></p>
<p>Speed: <span id="speed"></span></p>
</div>
</body>
<script src="script.js"></script>
</html>
/* file: script.js */
const url = " https://rpg-creature-search-app.freecodecamp.rocks.";
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 weight = document.getElementById("weight");
const height = document.getElementById("height");
const types = 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 specialDefense = document.getElementById("special-defense");
const speed = document.getElementById("speed");
const array = [
{
id: 1,
weight: 42,
height: 32,
hp: 65,
attack: 80,
defense: 50,
specialAttack: 90,
specialDefense: 55,
speed: 100,
types: ['FIRE']
},
{
id: 2,
weight: 220,
height: 53,
hp: 85,
attack: 90,
defense: 120,
specialAttack: 60,
specialDefense: 70,
speed: 40,
types: ['WATER', 'ROCK']
},
{
id: 3,
weight: 75,
height: 45,
hp: 70,
attack: 75,
defense: 60,
specialAttack: 85,
specialDefense: 65,
speed: 95,
types: ['ELECTRIC']
},
{
id: 4,
weight: 180,
height: 70,
hp: 90,
attack: 110,
defense: 80,
specialAttack: 70,
specialDefense: 80,
speed: 50,
types: ['GROUND', 'FIGHTING']
},
{
id: 5,
weight: 6,
height: 12,
hp: 40,
attack: 45,
defense: 35,
specialAttack: 60,
specialDefense: 40,
speed: 80,
types: ['BUG']
},
{
id: 6,
weight: 95,
height: 55,
hp: 75,
attack: 85,
defense: 70,
specialAttack: 95,
specialDefense: 80,
speed: 110,
types: ['PSYCHIC', 'FAIRY']
},
{
id: 7,
weight: 230,
height: 85,
hp: 100,
attack: 120,
defense: 100,
specialAttack: 50,
specialDefense: 70,
speed: 30,
types: ['ROCK', 'STEEL']
},
{
id: 8,
weight: 25,
height: 30,
hp: 55,
attack: 50,
defense: 45,
specialAttack: 75,
specialDefense: 55,
speed: 90,
types: ['GRASS', 'POISON']
},
{
id: 9,
weight: 150,
height: 65,
hp: 80,
attack: 100,
defense: 90,
specialAttack: 60,
specialDefense: 90,
speed: 60,
types: ['DRAGON']
},
{
id: 10,
weight: 40,
height: 25,
hp: 50,
attack: 65,
defense: 40,
specialAttack: 80,
specialDefense: 50,
speed: 105,
types: ['FLYING', 'NORMAL']
},
{
id: 11,
weight: 200,
height: 75,
hp: 95,
attack: 95,
defense: 85,
specialAttack: 65,
specialDefense: 85,
speed: 55,
types: ['DARK', 'ICE']
},
{
id: 12,
weight: 80,
height: 50,
hp: 65,
attack: 70,
defense: 60,
specialAttack: 100,
specialDefense: 75,
speed: 115,
types: ['GHOST']
},
{
id: 13,
weight: 10,
height: 15,
hp: 30,
attack: 35,
defense: 30,
specialAttack: 55,
specialDefense: 40,
speed: 70,
types: ['FAIRY']
},
{
id: 14,
weight: 300,
height: 90,
hp: 110,
attack: 130,
defense: 110,
specialAttack: 45,
specialDefense: 80,
speed: 35,
types: ['STEEL']
},
{
id: 15,
weight: 50,
height: 40,
hp: 60,
attack: 80,
defense: 50,
specialAttack: 70,
specialDefense: 60,
speed: 85,
types: ['FIGHTING']
},
{
id: 16,
weight: 120,
height: 60,
hp: 85,
attack: 90,
defense: 75,
specialAttack: 85,
specialDefense: 75,
speed: 65,
types: ['POISON', 'DARK']
},
{
id: 17,
weight: 5,
height: 10,
hp: 25,
attack: 30,
defense: 25,
specialAttack: 65,
specialDefense: 35,
speed: 120,
types: ['ELECTRIC', 'FLYING']
},
{
id: 18,
weight: 250,
height: 80,
hp: 105,
attack: 115,
defense: 95,
specialAttack: 55,
specialDefense: 75,
speed: 45,
types: ['GROUND', 'ROCK']
},
{
id: 19,
weight: 35,
height: 20,
hp: 45,
attack: 55,
defense: 40,
specialAttack: 75,
specialDefense: 50,
speed: 100,
types: ['FIRE', 'FLYING']
},
{
id: 20,
weight: 140,
height: 58,
hp: 75,
attack: 85,
defense: 70,
specialAttack: 95,
specialDefense: 80,
speed: 105,
types: ['WATER', 'PSYCHIC']
}
];
// Function to confirma valid id and name
function searchMonster(input, data) {
if (!isNaN(input)) {
return data.find(monster => monster.id == searchInput.value);
}
else {
return data.find(monster =>
monster.name.includes(searchInput.value)
);
}
}
searchButton.addEventListener('click', async function() {
try {
const response = await fetch('https://rpg-creature-api.freecodecamp.rocks/api/creatures');
const apiData = await response.json();
const monster = searchMonster(searchInput.value, apiData);
types.innerHTML = 'Types: ';
if(monster){
creatureName.textContent = monster.name.toUpperCase();
creatureId.textContent = monster.id;
const id = monster.id;
const finalData = array[id - 1];
weight.textContent = finalData.weight;
height.textContent = finalData.height;
hp.textContent = finalData.hp;
attack.textContent = finalData.attack;
defense.textContent = finalData.defense;
attack.textContent = finalData.attack;
specialAttack.textContent = finalData.specialAttack;
specialDefense.textContent = finalData.specialDefense;
defense.textContent = finalData.defense;
speed.textContent = finalData.speed;
for(let i = 0; i < finalData.types.length; i++){
types.innerHTML += `
<span>${finalData.types[i]}</span>
`
}
} else {
alert("Creature not found");
}
} catch (error) {
console.error('Error al obtener los datos:', error);
}
});
/* file: styles.css */
* {
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
body {
background: #a2a2a2a2;
font-family: Ubuntu, monospace;
}
div {
margin: 10px;
padding: 10px;
}
p {
color: white;
background-color: black;
display: inline-block;
padding: 10px;
}
span {
color: red;
text-decoration: underline;
}
Your browser information:
User Agent is: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/137.0.0.0 Safari/537.36
Challenge Information:
Build an RPG Creature Search App Project - Build an RPG Creature Search App