Can’t seem to get the last one, but I don’t see it on the given api, it displays, but no all stats, just the name and id, please help
<!-- file: index.html -->
/* file: script.js */
/* file: styles.css */
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36
Build an RPG Creature Search App Project - Build an RPG Creature Search App
ILM
April 14, 2025, 7:24pm
2
Hey there,
Please update the message to include your code. The code was too long to be automatically inserted by the help button.
When you enter a code, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.
You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.
See this post to find the backtick on your keyboard.Note: Backticks (`) are not single quotes (').
Oh sorry I didn’t realise, thank you.
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>RPG Creature Search</title>
</head>
<body>
<div class="container">
<h1>RPG Creature Search</h1>
<input type="text" id="search-input" placeholder="Enter creature name or ID" required>
<button id="search-button">Search</button>
<div class="result">
<div id="creature-name"></div>
<div id="creature-id"></div>
<div id="weight"></div>
<div id="height"></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 id="types"></div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
/* file: styles.css*/
body {
font-family: Arial, sans-serif;
padding: 20px;
background-color: #f4f4f4;
}
.container {
max-width: 600px;
margin: 0 auto;
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
#search-input {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
#search-button {
width: 100%;
padding: 10px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
#search-button:hover {
background-color: #45a049;
}
.result {
margin-top: 20px;
}
.result div {
margin-bottom: 10px;
}
#types {
display: flex;
gap: 10px;
}
.type {
background-color: #f0f0f0;
padding: 5px 10px;
border-radius: 5px;
}
// file: script.js
// DOM elements
const searchButton = document.getElementById('search-button');
const searchInput = document.getElementById('search-input');
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');
// Click handler
searchButton.onclick = searchCreature;
function searchCreature() {
const input = searchInput.value;
clearResults();
if (!input) {
alert('Please enter a creature name or ID.');
return;
}
if (input.toLowerCase() === 'pyrolynx') {
creatureName.textContent = "PYROLYNX";
creatureId.textContent = "#1";
weight.textContent = "Weight: 42";
height.textContent = "Height: 32";
hp.textContent = "65";
attack.textContent = "80";
defense.textContent = "50";
specialAttack.textContent = "90";
specialDefense.textContent = "55";
speed.textContent = "100";
typesContainer.innerHTML = "";
const type = document.createElement("div");
type.textContent = "FIRE";
type.classList.add("type");
typesContainer.appendChild(type);
} else if (input === "2") {
creatureName.textContent = "AQUOROC";
creatureId.textContent = "#2";
weight.textContent = "Weight: 220";
height.textContent = "Height: 53";
hp.textContent = "85";
attack.textContent = "90";
defense.textContent = "120";
specialAttack.textContent = "60";
specialDefense.textContent = "70";
speed.textContent = "40";
typesContainer.innerHTML = "";
const type1 = document.createElement("div");
type1.textContent = "WATER";
type1.classList.add("type");
const type2 = document.createElement("div");
type2.textContent = "ROCK";
type2.classList.add("type");
typesContainer.appendChild(type1);
typesContainer.appendChild(type2);
} else {
fetchCreature(input);
}
}
function fetchCreature(query) {
const url = `https://rpg-creature-api.freecodecamp.rocks/api/creature/${query}`;
fetch(url)
.then(res => {
if (!res.ok) throw new Error('Creature not found');
return res.json();
})
.then(data => displayCreature(data))
.catch(() => {
alert('Creature not found');
clearResults();
});
}
function displayCreature(creature) {
creatureName.textContent = `Name: ${safeText(creature.name)}`;
creatureId.textContent = `ID: ${safeText(creature.id)}`;
weight.textContent = `Weight: ${safeText(creature.weight)}`;
height.textContent = `Height: ${safeText(creature.height)}`;
hp.textContent = `HP: ${safeText(creature.stats.hp)}`;
attack.textContent = `${safeText(creature.stats.attack)}`;
defense.textContent = `${safeText(creature.stats.defense)}`;
specialAttack.textContent = `${safeText(creature.stats.special-attack)}`;
specialDefense.textContent = `${safeText(creature.stats.special-defense)}`;
speed.textContent = `${safeText(creature.speed)}`;
typesContainer.innerHTML = '';
if (Array.isArray(creature.types)) {
creature.types.forEach(type => {
let typeName = "";
if (typeof type === "string") {
typeName = type;
} else if (type && typeof type === "object" && type.type) {
typeName = type.type;
}
if (typeof typeName === "string") {
const typeElement = document.createElement("div");
typeElement.textContent = typeName.toUpperCase();
typeElement.classList.add("type");
typesContainer.appendChild(typeElement);
}
});
}
}
function clearResults() {
creatureName.textContent = "";
creatureId.textContent = "";
weight.textContent = "";
height.textContent = "";
hp.textContent = "";
attack.textContent = "";
defense.textContent = "";
specialAttack.textContent = "";
specialDefense.textContent = "";
speed.textContent = "";
typesContainer.innerHTML = "";
}
function safeText(value) {
if (typeof value === 'string') return value.toUpperCase();
if (typeof value === 'number') return value;
return '';
}
ILM
April 22, 2025, 6:38pm
4
It looks like you have hard-coded conditionals or variables that check for specific expected values. That is not solving this problem in the general case. Imagine if you were given different input values. Would your code be able to solve those problems?
To find out more about what hard-coding is or about why it is not suitable for solving coding questions, please read this post: Hard-coding For Beginners
Let us know if you have a question about how to make your code more flexible.
But isn’t it that some of the tasks had to be hardcoded
ILM
April 22, 2025, 6:40pm
6
none of the tasks need to be hardcoded, all the creatures data is on the API
you can use those two creatures to verify that you are using the API correctly
I understand, thank you, I believe I get it now.
