Tell us what’s happening:
// running tests
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.
// tests completed
This show when i try to compile, why the 20th test case didn’t pass?? Anyone help me
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 id="controls">
<input type="text" id="search-input" placeholder="Enter creature name or ID" required>
<button id="search-button">Search</button>
</div>
<div id="results">
<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>
</div>
<script src="script.js"></script>
</body>
</html>
/* file: styles.css */
document.addEventListener('DOMContentLoaded', function() {
const creatures = [
{
name: "PYROLYNX",
id: "1",
weight: 42,
height: 32,
types: ["FIRE"],
hp: 65,
attack: 80,
defense: 50,
specialAttack: 90,
specialDefense: 55,
speed: 100
},
{
name: "AQUOROC",
id: "2",
weight: 220,
height: 53,
types: ["WATER", "ROCK"],
hp: 85,
attack: 90,
defense: 120,
specialAttack: 60,
specialDefense: 70,
speed: 40
}
];
const searchInput = document.getElementById('search-input');
const searchButton = document.getElementById('search-button');
const resultsDisplay = document.getElementById('results');
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');
function displayCreature(creature) {
creatureName.textContent = creature.name;
creatureId.textContent = creature.id;
weight.textContent = `Weight: ${creature.weight}`;
height.textContent = `Height: ${creature.height}`;
types.innerHTML = '';
creature.types.forEach(type => {
const typeElement = document.createElement('span');
typeElement.className = 'type';
typeElement.textContent = type;
types.appendChild(typeElement);
});
hp.textContent = creature.hp;
attack.textContent = creature.attack;
defense.textContent = creature.defense;
specialAttack.textContent = creature.specialAttack;
specialDefense.textContent = creature.specialDefense;
speed.textContent = creature.speed;
resultsDisplay.style.display = 'block';
}
function clearDisplay() {
creatureName.textContent = '';
creatureId.textContent = '';
weight.textContent = '';
height.textContent = '';
types.innerHTML = '';
hp.textContent = '';
attack.textContent = '';
defense.textContent = '';
specialAttack.textContent = '';
specialDefense.textContent = '';
speed.textContent = '';
resultsDisplay.style.display = 'none';
}
searchButton.addEventListener('click', () => {
const searchTerm = searchInput.value.trim();
if (!searchTerm) {
alert("Please enter a creature name or ID");
clearDisplay();
return;
}
let creature;
if (!isNaN(searchTerm)) {
creature = creatures.find(c => c.id === searchTerm);
} else {
creature = creatures.find(c => c.name.toLowerCase() === searchTerm.toLowerCase());
}
if (creature) {
displayCreature(creature);
} else {
alert('Creature not found');
clearDisplay();
}
});
});
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) 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