Tell us what’s happening:
15,16,17,18,20,21 these steps are not working why???
Your code so far
<!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>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<h1>RPG Creature Search</h1>
<input id="search-input" type="text" required placeholder="Enter creature name or ID" />
<button id="search-button">Search</button>
<div class="results">
<h2 id="creature-name"></h2>
<p id="creature-id"></p>
<p id="weight"></p>
<p id="height"></p>
<div id="types"></div>
<p id="hp"></p>
<p id="attack"></p>
<p id="defense"></p>
<p id="special-attack"></p>
<p id="special-defense"></p>
<p id="speed"></p>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
/* file: script.js */
const API_URL = 'https://rpg-creatures.freecodecamp.rocks/api/creature/';
const input = document.getElementById('search-input');
const button = 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');
button.addEventListener('click', async () => {
const query = input.value.trim().toLowerCase();
if (!query) return;
try {
const response = await fetch(`${API_URL}${query}`);
if (!response.ok) throw new Error('Creature not found');
const data = await response.json();
// Name and ID
creatureName.textContent = data.name.toUpperCase();
creatureId.textContent = `#${data.id}`;
// Weight & Height
weight.textContent = `Weight: ${data.weight}`;
height.textContent = `Height: ${data.height}`;
// Clear & Set Types
types.innerHTML = '';
data.types.forEach(type => {
const span = document.createElement('span');
span.textContent = type.toUpperCase();
types.appendChild(span);
});
// Stats
hp.textContent = data.stats.hp;
attack.textContent = data.stats.attack;
defense.textContent = data.stats.defense;
specialAttack.textContent = data.stats.special_attack;
specialDefense.textContent = data.stats.special_defense;
speed.textContent = data.stats.speed;
} catch (error) {
alert('Creature not found');
clearUI();
}
});
function clearUI() {
creatureName.textContent = '';
creatureId.textContent = '';
weight.textContent = '';
height.textContent = '';
types.innerHTML = '';
hp.textContent = '';
attack.textContent = '';
defense.textContent = '';
specialAttack.textContent = '';
specialDefense.textContent = '';
speed.textContent = '';
}
/* file: styles.css */
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
text-align: center;
padding: 20px;
}
.container {
max-width: 500px;
margin: auto;
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
}
input[type="text"] {
padding: 10px;
width: 65%;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
padding: 10px 16px;
font-size: 16px;
margin-left: 10px;
background-color: #28a745;
color: white;
border: none;
border-radius: 4px;
}
button:hover {
background-color: #218838;
}
.results p,
.results h2 {
margin: 8px 0;
}
#types span {
display: inline-block;
margin: 4px;
padding: 6px 12px;
background: #eee;
border-radius: 4px;
font-weight: bold;
}
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 Edg/138.0.0.0
Challenge Information:
Build an RPG Creature Search App Project - Build an RPG Creature Search App
