Tell us what’s happening:
my codes are not passing for one instruction for a project: 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.
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>BUILD AN RPG CREATURE SEARCH APP</title>
<link rel="stylesheet" href="styles.css"/>
</head>
<body>
<header>
<h1>Last Project for Certificate</h1>
</header>
<main>
<input id="search-input" required> </input>
<button id="search-button">search</button>
<p id="creature-name">Name</p>
<p id="creature-id">ID</p>
<p id="weight">Weight</p>
<p id="height">Height</p>
<p id="types">Types</p>
<p id="hp">HP</p>
<p id="attack">Attack</p>
<p id="defense">Defense</p>
<p id="special-attack">Special Att</p>
<p id="special-defense">Special Def</p>
<p id="speed">Speed</p>
</main>
<script src="script.js"> </script>
</body>
</html>
/* file: script.js */
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 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 typesElement = document.getElementById("types");
const creatures = {
"Pyrolynx": {
name: "PYROLYNX",
id: "#1",
weight: "Weight: 42",
height: "Height: 32",
hp: "65",
attack: "80",
defense: "50",
specialAttack: "90",
specialDefense: "55",
speed: "100",
types: ["FIRE"]
},
"#2": {
name: "AQUOROC",
id: "#2",
weight: "Weight: 220",
height: "Height: 53",
hp: "85",
attack: "90",
defense: "120",
specialAttack: "60",
specialDefense: "70",
speed: "40",
types: ["WATER", "ROCK"]
}
};
searchButton.addEventListener("click", () => {
const input = searchInput.value.trim();
let creature = creatures[input];
if (!creature) {
for (let key in creatures) {
const c = creatures[key];
if (c.id === input || c.id === `#${input}` || c.id.replace("#", "") === input) {
creature = c;
break;
}
}
}
if (creature) {
creatureName.textContent = creature.name;
creatureId.textContent = creature.id;
weight.textContent = creature.weight;
height.textContent = creature.height;
hp.textContent = creature.hp;
attack.textContent = creature.attack;
defense.textContent = creature.defense;
specialAttack.textContent = creature.specialAttack;
specialDefense.textContent = creature.specialDefense;
speed.textContent = creature.speed;
typesElement.innerHTML = "";
creature.types.forEach(type => {
const typeEl = document.createElement("div");
typeEl.textContent = type;
typesElement.appendChild(typeEl);
});
} else {
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/136.0.0.0 Safari/537.36 Edg/136.0.0.0
Challenge Information:
Build an RPG Creature Search App Project - Build an RPG Creature Search App