Tell us what’s happening:
I’m stuck in step 15. exhausted my brain so much i couldn’t think anymore. send help. lol. is it possible that maybe the API is not working? I’ve been stuck in step 15 for a while now, going back and forth.
Your code so far
<!--<!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 app</title>
</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>
<tbody><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>
</tbody></table>
</div>
</div>
</div>
</main>
<script src="script.js"></script>
</body>
</html> -->
/* window.addEventListener('DOMContentLoaded', () => {
const searchInput = document.getElementById('search-input');
const searchBtn = document.getElementById('search-button');
const searchForm = document.getElementById('search-form');
const handleSearch = async (event) => {
event.preventDefault();
const query = searchInput.value.trim();
if (!query) return;
try {
const response = await fetch(`https://rpg-creature-api.freecodecamp.rocks/api/creatures/${query.toLowerCase()}`);
if (!response.ok) {
alert('Creature not found');
clearCreatureInfo();
return;
}
const creature = await response.json();
updateCreatureInfo(creature);
} catch (error) {
alert('Creature not found');
clearCreatureInfo();
}
};
searchForm.addEventListener('submit', handleSearch);
searchBtn.addEventListener('click', handleSearch);
const clearCreatureInfo = () => {
document.getElementById('creature-name').textContent = '';
document.getElementById('creature-id').textContent = '';
document.getElementById('weight').textContent = '';
document.getElementById('height').textContent = '';
document.getElementById('hp').textContent = '';
document.getElementById('attack').textContent = '';
document.getElementById('defense').textContent = '';
document.getElementById('special-attack').textContent = '';
document.getElementById('special-defense').textContent = '';
document.getElementById('speed').textContent = '';
document.getElementById('types').innerHTML = '';
}
const updateCreatureInfo = (creature) => {
console.log('Creature', creature);
if (!creature) {
clearCreatureInfo();
return;
}
const data = Array.isArray(creature) ? creature[0] : creature;
document.getElementById('creature-name').textContent = data.name.toUpperCase();
document.getElementById('creature-id').textContent = data.id;
document.getElementById('weight').textContent = data.weight;
document.getElementById('height').textContent = data.height;
document.getElementById('hp').textContent = data.hp;
document.getElementById('attack').textContent = data.attack;
document.getElementById('defense').textContent = data.defense;
document.getElementById('special-attack').textContent = data.special_attack;
document.getElementById('special-defense').textContent = data.special_defense;
document.getElementById('speed').textContent = data.speed;
const typesContainer = document.getElementById('types');
typesContainer.innerHTML = '';
data.types.forEach(type => {
const typeEl = document.createElement('div');
typeEl.textContent = type.toUpperCase();
typesContainer.appendChild(typeEl);
});
};
}); */
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
Challenge Information:
Build an RPG Creature Search App Project - Build an RPG Creature Search App