How do I complete this final step of this rpg app?
<!-- file: index.html -->
/* file: styles.css */
/* file: script.js */
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/140.0.0.0 Safari/537.36
Build an RPG Creature Search App Project - Build an RPG Creature Search App
Please post your code so far and talk about how you are stuck debugging
I’m missing some things here can you spot the mitakes?
<!-- file: index.html -->
/* file: styles.css */
/* file: script.js */
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/140.0.0.0 Safari/537.36
Build an RPG Creature Search App Project - Build an RPG Creature Search Apphttps://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures-v8/build-an-rpg-creature-search-app-project/build-an-rpg-creature-search-app
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 (').
This is my code that I am debugging I’m almost there however I’m experiencing some difficulties.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>RPG Creature Search</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<main id="app">
<h1>RPG Creature Search</h1>
<section id="search-area">
<label for="search-input">Search by name or ID</label>
<input id="search-input" type="text" required placeholder="e.g. Pyrolynx or 2" />
<button id="search-button" type="button">Search</button>
</section>
<section id="result-area">
<h2 id="creature-name">—</h2>
<p id="creature-id">#—</p>
<p id="weight">Weight: —</p>
<p id="height">Height: —</p>
<div id="types" aria-live="polite"></div>
<div id="stats-list">
<p>HP: <span id="hp">—</span></p>
<p>Attack: <span id="attack">—</span></p>
<p>Defense: <span id="defense">—</span></p>
<p>Special Attack: <span id="special-attack">—</span></p>
<p>Special Defense: <span id="special-defense">—</span></p>
<p>Speed: <span id="speed">—</span></p>
</div>
</section>
</main>
<script src="script.js"></script>
</body>
</html>
:root {
--bg: #0a0a23;
--card: #111;
--accent: #ffac33;
--text: #ffffff;
}
html,body {
height: 100%;
margin: 0;
font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
background: linear-gradient(180deg, var(--bg), #07102b);
color: var(--text);
}
#app {
max-width: 700px;
margin: 28px auto;
background: #0f1724;
padding: 20px;
border-radius: 8px;
box-shadow: 0 6px 24px rgba(0,0,0,0.6);
}
h1 { margin: 0 0 12px 0; font-size: 1.4rem; }
#search-area { display:flex; gap:8px; align-items:center; margin-bottom:16px; }
#search-input { flex:1; padding:8px 10px; border-radius:6px; border:1px solid #26314b; background:#0a1220; color:var(--text); }
#search-button { padding:8px 14px; border-radius:6px; border: none; background:var(--accent); color: #08121a; cursor:pointer; font-weight:600; }
#result-area { background:#071428; padding:12px; border-radius:6px; }
#types { display:flex; gap:6px; flex-wrap:wrap; margin:8px 0 12px 0; }
.type-pill {
background:#223a4a;
color:var(--text);
padding:6px 10px;
border-radius:999px;
font-weight:700;
font-size:0.85rem;
border:1px solid rgba(255,255,255,0.06);
}
#stats-list { display:grid; grid-template-columns: repeat(3, 1fr); gap:8px; margin-top:8px; }
#stats-list p { margin:0; font-size:0.95rem; }
// script.js - FreeCodeCamp RPG Creature Search
// API base
const API_BASE = 'https://rpg-creature-api.freecodecamp.rocks/api';
const CREATURE_ENDPOINT = `${API_BASE}/creature`;
// DOM references
const input = document.getElementById('search-input');
const button = document.getElementById('search-button');
const elName = document.getElementById('creature-name');
const elId = document.getElementById('creature-id');
const elWeight = document.getElementById('weight');
const elHeight = document.getElementById('height');
const elTypes = document.getElementById('types');
const elHP = document.getElementById('hp');
const elAttack = document.getElementById('attack');
const elDefense = document.getElementById('defense');
const elSpAtk = document.getElementById('special-attack');
const elSpDef = document.getElementById('special-defense');
const elSpeed = document.getElementById('speed');
// Reset UI between searches
function clearUI() {
elName.textContent = '—';
elId.textContent = '#—';
elWeight.textContent = 'Weight: —';
elHeight.textContent = 'Height: —';
elTypes.innerHTML = '';
elHP.textContent = '—';
elAttack.textContent = '—';
elDefense.textContent = '—';
elSpAtk.textContent = '—';
elSpDef.textContent = '—';
elSpeed.textContent = '—';
}
// Populate UI with data from API
function populateUI(creature) {
// Uppercase name
elName.textContent = (creature.name || '').toUpperCase();
// ID (# prefix)
elId.textContent = `#${creature.id}`;
// Weight & height
elWeight.textContent = `Weight: ${creature.weight}`;
elHeight.textContent = `Height: ${creature.height}`;
// Types
elTypes.innerHTML = '';
if (Array.isArray(creature.types)) {
creature.types.forEach(type => {
const pill = document.createElement('div');
pill.textContent = type.toUpperCase();
elTypes.appendChild(pill);
});
}
// Stats (nested in creature.stats with dash-case keys)
const stats = creature.stats || {};
elHP.textContent = stats['hp'] ?? '—';
elAttack.textContent = stats['attack'] ?? '—';
elDefense.textContent = stats['defense'] ?? '—';
elSpAtk.textContent = stats['special-attack'] ?? '—';
elSpDef.textContent = stats['special-defense'] ?? '—';
elSpeed.textContent = stats['speed'] ?? '—';
}
// Show "Creature not found"
function showNotFound() {
clearUI();
alert('Creature not found');
}
// Fetch creature by name or ID
async function fetchCreature(term) {
if (!term) {
showNotFound();
return;
}
const url = `${CREATURE_ENDPOINT}/${encodeURIComponent(term.trim())}`;
try {
const res = await fetch(url);
if (!res.ok) {
showNotFound();
return;
}
const data = await res.json();
let creature = data.creature ?? data;
if (!creature || !creature.name) {
showNotFound();
return;
}
populateUI(creature);
} catch (err) {
console.error('Fetch error:', err);
showNotFound();
}
}
// Event listeners
button.addEventListener('click', () => {
fetchCreature(input.value);
});
input.addEventListener('keydown', (e) => {
if (e.key === 'Enter') {
e.preventDefault();
button.click();
}
});
// Initialize
clearUI();
here are the tasks I’m stuck on
// running tests
15. When the #search-input element contains the value Pyrolynx and the #search-button element is clicked, the values in the #creature-name, #creature-id, #weight, #height, #hp, #attack, #defense, #special-attack, #special-defense, and #speed elements should be PYROLYNX, #1 or 1, Weight: 42 or 42, Height: 32 or 32, 65, 80, 50, 90, 55, and 100, respectively.
16. When the #search-input element contains the value Pyrolynx and the #search-button element is clicked, a single element should be added within the #types element that contains the text FIRE. The #types element content should be cleared between searches.
17. When the #search-input element contains the value 2 and the #search-button element is clicked, the values in the #creature-name, #creature-id, #weight, #height, #hp, #attack, #defense, #special-attack, #special-defense, and #speed elements should be AQUOROC, #2 or 2, Weight: 220 or 220, Height: 53 or 53, 85, 90, 120, 60, 70, and 40, respectively.
18. When the #search-input element contains the value 2 and the #search-button element is clicked, two elements should be added within the #types element that contain text values WATER and ROCK, respectively. The #types element content should be cleared between searches.
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
Yes I did apparently there’s something wrong with my scripts
Can you fill in the gaps? I need examples not solutions to finish this task. I managed to finish the last step but I need to activate the fetch function.
what gaps do you need filled? also this is a final project, we can’t help you that much
I need you to help me fill in the missing gaps to activate the buttons. Anything will do.
the button is activated, the issue is what happens when it is activated
debug your code, use console.log to check that things to what you want, and find where they don’t
I’m on the last step 21 whats needed to link the button with fetching?
I’ve kinda got this in mind except to say that’s wrong any help on this?
const result = await response.json();
console.log(result);
} catch (error) {
console.error(error.message);
}
}
Please stop putting triple backticks on every line. You put three backticks on the first line before your code and three backticks on a new line after the last line of your code.
Ok help me with this last step
did you remove this line? it’s fetching
your insistence that it is not fetching makes me think you did not write this code
Yes I did Im still in the processing of debugging my code
Looks like I’m not progressing please provide a solution for steps 20 and 21 for my javascript.
{// — Get references to all necessary HTML elements —
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 typesContainer = 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’);
// — Local Data Source —
const creatureDatabase = {
“1”: { id: 1, name: “Pyrolynx”, weight: 42, height: 32, types: [“FIRE”], stats: { hp: 65, attack: 80, defense: 50, “special-attack”: 90, “special-defense”: 55, speed: 100 }},
“2”: { id: 2, name: “Aquoroc”, weight: 220, height: 53, types: [“WATER”, “ROCK”], stats: { hp: 85, attack: 90, defense: 120, “special-attack”: 60, “special-defense”: 70, speed: 40 }},
};
// — Main function to search for and display data —
const searchForCreature = () => {
const query = searchInput.value.toLowerCase().trim();
if (!query) {
alert(“Please enter a creature name or ID.”);
return;
}
// Find the creature by checking its name OR its ID
const creature = Object.values(creatureDatabase).find(
(c) => c.name.toLowerCase() === query || c.id.toString() === query
);
// Check if a creature was found and update the UI accordingly
if (creature) {
updateUI(creature);
} else {
alert(“Creature not found”);
}
};
// — Function to update all UI elements —
const updateUI = (data) => {
creatureName.textContent = data.name.toUpperCase();
creatureId.textContent = `#${data.id}`;
weight.textContent = `Weight: ${data.weight}`;
height.textContent = `Height: ${data.height}`;
// Update stats
hp.textContent = data.stats.hp;
attack.textContent = data.stats.attack;
defense.textContent = data.stats.defense;
specialAttack.textContent = data.stats[‘special-attack’];
specialDefense.textContent = data.stats[‘special-defense’];
speed.textContent = data.stats.speed;
// Clear previous types and add new ones
typesContainer.innerHTML = ‘’;
data.types.forEach(type => {
typesContainer.innerHTML += `${type}`;
});
};
// — Event Listeners —
searchButton.addEventListener(‘click’, searchForCreature);
searchInput.addEventListener(‘keydown’, (e) => {
if (e.key === ‘Enter’) {
searchForCreature();
}
});A}
Please use the backticks as I described above.
we can’t provide a solution, it is not allowed, also this is a certification project, you must write the code by yourself or it would be cheating
please explain what debugging you are doing, what changes you made, and why you made those changes