hi there, can you post the code in the other files as well so we can try?
still blocking on step 14, the alert shows up , i tried various ways
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="icon"
type="image/png"
href="https://cdn.freecodecamp.org/universal/favicons/favicon.ico"
/>
<title>RPG .Creature Search App</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<main>
<img
class="freecodecamp-logo"
src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg"
alt="freeCodeCamp Logo"
/>
<h1>RPG Creature Search App</h1>
<div class="container">
<form role="search" id="search-form">
<label for="search-input">Search for Creature Name or ID:</label>
<input type="text" name="creature" id="search-input" required />
<button id="search-button">Search</button>
</form>
<div class="output">
<div class="top-container">
<div class="name-and-id">
<span id="creature-name"></span>
<span id="creature-id"></span>
<div class="size">
<span id="weight"></span>
<span id="height"></span>
</div>
</div>
<div id="types"></div>
<div>
<div id="special-name"></div>
<div id="special-description"></div>
</div>
</div>
<div class="bottom-container">
<table>
<tr>
<th>Base</th>
<th>Stats</th>
</tr>
<tr>
<td>HP:</td>
<td id="hp"></td>
</tr>
<tr>
<td>Attack:</td>
<td id="attack"></td>
</tr>
<tr>
<td>Defense:</td>
<td id="defense"></td>
</tr>
<tr>
<td>Sp. Attack:</td>
<td id="special-attack"></td>
</tr>
<tr>
<td>Sp. Defense:</td>
<td id="special-defense"></td>
</tr>
<tr>
<td>Speed:</td>
<td id="speed" class="speed"></td>
</tr>
</table>
</div>
</div>
</div>
<script src="./script.js"></script>
</main>
</body>
</html>
/* file: script.js */
const creatureID = document.getElementById('creature-id');
const creatureName = document.getElementById('creature-name');
const specialName = document.getElementById('special-name');
const specialDescription = document.getElementById('special-description');
const types = document.getElementById('types');
const height = document.getElementById('height');
const weight = document.getElementById('weight');
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 searchForm = document.getElementById('search-form');
const searchInput = document.getElementById('search-input');
const searchButton = document.getElementById('search-button');
///////// LINKS
const creaturesUrlList="https://rpg-creature-api.freecodecamp.rocks/api/creatures"
const creatureXticsLink=id=>`https://rpg-creature-api.freecodecamp.rocks/api/creature/${id}`
//////// endOfLinks
const creatureList =async()=>{
try{
const response = await fetch(creaturesUrlList);
const list = await response.json();
searchButton.addEventListener("click",()=>{
const match = list.some(obj =>
searchInput.value === obj.name || searchInput.value === String(obj.id)
);
if(match){
}
else if(!match){
alert("Creature not found")
}
})
}catch(err){
console.log(err)
}
}
const creatureXtics = async(id)=>{
const response = await fetch(creatureXticsLink(id));
const xtics = await response.json();
}
creatureList()
I don’t see anything in your script which fires an alert.
pasted wrong code , i’ll correct that
i have updated the code now
const creatureID = document.getElementById('creature-id');
const creatureName = document.getElementById('creature-name');
const specialName = document.getElementById('special-name');
const specialDescription = document.getElementById('special-description');
const types = document.getElementById('types');
const height = document.getElementById('height');
const weight = document.getElementById('weight');
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 searchInput = document.getElementById('search-input');
const searchButton = document.getElementById('search-button');
// ==== API Links ====
const creaturesUrlList = "https://rpg-creature-api.freecodecamp.rocks/api/creatures";
const creatureXticsLink = id => `https://rpg-creature-api.freecodecamp.rocks/api/creature/${id}`;
// ==== Helper Functions ====
const creatureXtics = async (id) => {
const response = await fetch(creatureXticsLink(id));
const xtics = await response.json();
return xtics;
};
const resetDisplay = () => {
creatureID.textContent = "";
creatureName.textContent = "";
specialName.textContent = "";
specialDescription.textContent = "";
types.innerHTML = "";
height.textContent = "";
weight.textContent = "";
hp.textContent = "";
attack.textContent = "";
defense.textContent = "";
specialAttack.textContent = "";
specialDefense.textContent = "";
speed.textContent = "";
};
// ==== Main Search Event Listener ====
searchButton.addEventListener("click", async () => {
const input = searchInput.value.trim().toLowerCase();
if (input === "Red") {
alert("Creature not found");
return;
}
if (input === "") {
alert("Enter creature name");
return;
}
try {
const response = await fetch(creaturesUrlList);
const list = await response.json();
const match = list.find(obj => input === obj.name.toLowerCase() || input === String(obj.id));
if (!match || input === "Red") {
alert("Creature not found");
return;
}
const xtics = await creatureXtics(match.id);
resetDisplay(); // Clear any previous data
// Display new creature details
xtics.types.forEach(obj => {
types.innerHTML += `<p class="type ${obj.name}">${obj.name.toUpperCase()}</p>`;
});
creatureID.textContent = xtics.id;
creatureName.textContent = xtics.name.toUpperCase();
specialName.textContent = xtics.special.name;
specialDescription.textContent = xtics.special.description;
height.textContent = `Height: ${xtics.height}`;
weight.textContent = `Weight: ${xtics.weight}`;
hp.textContent = xtics.stats[0].base_stat;
attack.textContent = xtics.stats[1].base_stat;
defense.textContent = xtics.stats[2].base_stat;
specialAttack.textContent = xtics.stats[3].base_stat;
specialDefense.textContent = xtics.stats[4].base_stat;
speed.textContent = xtics.stats[5].base_stat;
} catch (err) {
console.error("Error fetching data:", err);
alert("Oops! Something went wrong.");
}
});
ILM
July 30, 2025, 1:21pm
8
I’ve edited your post to improve the readability of the code. When you enter a code block into a forum post, 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 (').
ILM
July 30, 2025, 1:23pm
9
it looks like you are working on this project: https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures-v8/build-an-rpg-creature-search-app-project/build-an-rpg-creature-search-app
is that correct?
you can’t use a form without some precautions, as a form when submitted reloads the page
i dont really understand the problem please
thanks for the hint , i prevented the defeault submission of the form , but step 14 and 21 continues rejecting
ILM
July 30, 2025, 2:35pm
12
please share your updated code
// ==== Element references ====
const creatureID = document.getElementById('creature-id');
const creatureName = document.getElementById('creature-name');
const specialName = document.getElementById('special-name');
const specialDescription = document.getElementById('special-description');
const types = document.getElementById('types');
const height = document.getElementById('height');
const weight = document.getElementById('weight');
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 searchForm = document.getElementById('search-form');
const searchInput = document.getElementById('search-input');
const searchButton = document.getElementById('search-button');
// ==== API Links ====
const creaturesUrlList = "https://rpg-creature-api.freecodecamp.rocks/api/creatures";
const creatureXticsLink = input => `https://rpg-creature-api.freecodecamp.rocks/api/creature/${input}`;
// ==== Helper Functions ====
const creatureXtics = async (input) => {
const response = await fetch(creatureXticsLink(input));
const xtics = await response.json();
return xtics;
};
const resetDisplay = () => {
creatureID.textContent = "";
creatureName.textContent = "";
specialName.textContent = "";
specialDescription.textContent = "";
types.innerHTML = "";
height.textContent = "";
weight.textContent = "";
hp.textContent = "";
attack.textContent = "";
defense.textContent = "";
specialAttack.textContent = "";
specialDefense.textContent = "";
speed.textContent = "";
};
// ==== Main Search Event Listener ====
searchButton.addEventListener("click", async () => {
const input = searchInput.value.toLowerCase().trim();
if (input === "") {
alert("Enter creature name");
return;
}
try {
const response = await fetch(creaturesUrlList);
const list = await response.json();
const match = list.find(obj =>
input === obj.name.toLowerCase() || input === String(obj.id)
);
if (!match) {
alert("Creature not found");
return;
}
const xtics = await creatureXtics(input);
resetDisplay();
xtics.types.forEach(obj => {
types.innerHTML += `<p class="type ${obj.name}">${obj.name.toUpperCase()}</p>`;
});
creatureID.textContent = xtics.id;
creatureName.textContent = xtics.name.toUpperCase();
specialName.textContent = xtics.special.name;
specialDescription.textContent = xtics.special.description;
height.textContent = xtics.height;
weight.textContent = xtics.weight;
hp.textContent = xtics.stats[0].base_stat;
attack.textContent = xtics.stats[1].base_stat;
defense.textContent = xtics.stats[2].base_stat;
specialAttack.textContent = xtics.stats[3].base_stat;
specialDefense.textContent = xtics.stats[4].base_stat;
speed.textContent = xtics.stats[5].base_stat;
} catch (err) {
console.error("Error fetching data:", err);
alert("Oops! Something went wrong.");
}
});
searchForm.addEventListener('submit', e => {
e.preventDefault();
});
ILM
July 30, 2025, 8:50pm
14
When the search button is clicked, the app should send a fetch request to the correct endpoint for the creature name or ID.
are you doing this? what url are you fetching?
tanks a lot , ive corrected the issue , and it works fine
Hey bro! I’m also failing the same tests. Could you help me? It’s so frustrating.
ILM
August 15, 2025, 8:05am
17
hi @brian.chempos123 , please create your own topic, we are unable to help you in someone else’s topic
If you have a question about a specific challenge as it relates to your written code for that challenge and need some help, click the Get Help > Ask for Help button located on the challenge.
The Ask for Help button will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.
Thank you.
