Tell us what’s happening:
i have tried it in localhost, and it seems to work, but it failed test 14 onwards, im confused especially in test 15.
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</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 input = document.getElementById("search-input");
const searchBtn = document.getElementById("search-button");
const nameCreature = document.getElementById("creature-name");
const id = 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 spAttack = document.getElementById("special-attack");
const spDefense = document.getElementById("special-defense");
const speed = document.getElementById("speed");
showData = (creature) => {
let creatureTypes = "";
nameCreature.textContent = `${creature.name.toUpperCase()}`;
id.textContent = `#${creature.id}`;
height.textContent = `Height: ${creature.height}`;
weight.textContent = `Weight: ${creature.weight}`;
hp.textContent = `${creature.stats[0].base_stat}`;
attack.textContent = `${creature.stats[1].base_stat}`;
defense.textContent = `${creature.stats[2].base_stat}`;
spAttack.textContent = `${creature.stats[3].base_stat}`;
spDefense.textContent = `${creature.stats[4].base_stat}`;
speed.textContent = `${creature.stats[5].base_stat}`;
for (let i = 0; i < creature.types.length; i++) {
creatureTypes += creature.types[i].type.name.toUpperCase();
if (i < creature.types.length - 1) {
creatureTypes += ", ";
}
}
types.textContent = creatureTypes;
};
searchBtn.addEventListener("click", function() {
fetch("https://rpg-creature-api.freecodecamp.rocks/api/creature/" + input.value.toLowerCase())
.then((res) => res.json())
.then((data) => {
const creatureData = data.data;
console.log(creatureData);
showData(creatureData);
})
.catch((err) => {
alert("Creature not found");
});
});
/* 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/138.0.0.0 Safari/537.36
Challenge Information:
Build an RPG Creature Search App Project - Build an RPG Creature Search App