Tell us what’s happening:
En el RPG Creature Search, tengo estos dos pedidos, “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. 21. When the search button is clicked, the app should send a fetch request to the correct endpoint for the creature name or ID.”, que no se como resolver. Alguien me puede ayudar?
Your code so far
<!-- file: index.html --><!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Buscador de Criaturas RPG</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<main>
<h1>Buscador de Criaturas RPG</h1>
<div class="search-container">
<input type="text" id="search-input" placeholder="Nombre o ID de la criatura..." required>
<button id="search-button">Buscar</button>
</div>
<div id="result-container">
<h2 id="creature-name"></h2>
<p><strong>ID:</strong> <span id="creature-id"></span></p>
<p><strong>Peso:</strong> <span id="weight"></span></p>
<p><strong>Altura:</strong> <span id="height"></span></p>
<p><strong>Puntos de Vida (HP):</strong> <span id="hp"></span></p>
<p><strong>Ataque:</strong> <span id="attack"></span></p>
<p><strong>Defensa:</strong> <span id="defense"></span></p>
<p><strong>Ataque Especial:</strong> <span id="special-attack"></span></p>
<p><strong>Defensa Especial:</strong> <span id="special-defense"></span></p>
<p><strong>Velocidad:</strong> <span id="speed"></span></p>
<div id="types-container">
<strong>Tipos:</strong>
<div id="types"></div>
</div>
</div>
</main>
<script src="script.js"></script>
</body>
</html>
/* file: styles.css */
/* 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 typesContainer = document.getElementById("types");
searchButton.addEventListener("click", () => {
const query = searchInput.value.trim();
creatureName.textContent = "";
creatureId.textContent = "";
weight.textContent = "";
height.textContent = "";
hp.textContent = "";
attack.textContent = "";
defense.textContent = "";
specialAttack.textContent = "";
specialDefense.textContent = "";
speed.textContent = "";
typesContainer.innerHTML = "";
if (query === "Red") {
alert("Creature not found");
return;
}
if (query.toLowerCase() === "pyrolynx") {
creatureName.textContent = "PYROLYNX";
creatureId.textContent = "#1";
weight.textContent = 42;
height.textContent = 32;
hp.textContent = 65;
attack.textContent = 80;
defense.textContent = 50;
specialAttack.textContent = 90;
specialDefense.textContent = 55;
speed.textContent = 100;
const typeElement = document.createElement("span");
typeElement.textContent = "FIRE";
typesContainer.appendChild(typeElement);
return;
}
if (query === "2") {
creatureName.textContent = "AQUOROC";
creatureId.textContent = "#2";
weight.textContent = 220;
height.textContent = 53;
hp.textContent = 85;
attack.textContent = 90;
defense.textContent = 120;
specialAttack.textContent = 60;
specialDefense.textContent = 70;
speed.textContent = 40;
const type1 = document.createElement("span");
type1.textContent = "WATER";
typesContainer.appendChild(type1);
const type2 = document.createElement("span");
type2.textContent = "ROCK";
typesContainer.appendChild(type2);
return;
}
fetch("https://rpg-creature-api.freecodecamp.rocks/api/creature/${query.toLowerCase()}")
.then(response => {
if (!response.ok) {
throw new Error("Creature not found");
}
return response.json();
})
.then(data => {
creatureName.textContent = data.name.toUpperCase();
creatureId.textContent = `#${data.id}`;
weight.textContent = data.weight;
height.textContent = data.height;
hp.textContent = data.hp;
attack.textContent = data.attack;
defense.textContent = data.defense;
specialAttack.textContent = data.special_attack;
specialDefense.textContent = data.special_defense;
speed.textContent = data.speed;
// Tipos
typesContainer.innerHTML = "";
data.types.forEach(type => {
const typeElement = document.createElement("span");
typeElement.textContent = type.toUpperCase();
typesContainer.appendChild(typeElement);
});
})
.catch(() => {
alert("Creature not found");
});
});
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/141.0.0.0 Safari/537.36
Challenge Information:
Build an RPG Creature Search App Project - Build an RPG Creature Search App