Tell us what’s happening:
I’m currently stuck on this assignment. Don’t mind the CSS, as it’s not fixed yet. I seem to be unable to pass steps 14 to 20 (the 6 last steps). I’ve triple checked the logic and I can’t see any issues! Would greatly accept any help. I’ve also reverted to a saved version with no avail.
Your code so far
<!-- 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" />
<title>RPG Creature Search App</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<main>
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo" />
<h1>RPG Creature Search App</h1>
<form id="search-form">
<label for="search-input">Search for Creature Name or ID:</label>
<input type="text" id="search-input" required />
<button id="search-button">Search</button>
</form>
<section id="output-container">
<div class="output">
<div class="creature-info">
<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 class="special-info">
<div id="special-name"></div>
<div id="special-description"></div>
</div>
<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"></td>
</tr>
</table>
</div>
</section>
<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');
const getCreature = async () => {
try {
const creatureNameOrId = searchInput.value.toLowerCase();
const response = await fetch(
`https://rpg-creature-api.freecodecamp.rocks/api/creature/${creatureNameOrId}`
);
const data = await response.json();
// Set Creature info
creatureName.textContent = data.name.toUpperCase();
creatureID.textContent = `#${data.id}`;
weight.textContent = `Weight: ${data.weight}`;
height.textContent = `Height: ${data.height}`;
specialName.textContent = data.special.name;
specialDescription.textContent = data.special.description;
// Set stats
hp.textContent = data.stats[0].base_stat;
attack.textContent = data.stats[1].base_stat;
defense.textContent = data.stats[2].base_stat;
specialAttack.textContent = data.stats[3].base_stat;
specialDefense.textContent = data.stats[4].base_stat;
speed.textContent = data.stats[5].base_stat;
// Set types (uppercase for test compliance)
types.innerHTML = data.types
.map(obj => `<span class="type ${obj.name}">${obj.name.toUpperCase()}</span>`)
.join(' ')
} catch (err) {
resetDisplay();
alert('Creature not found');
}
};
const resetDisplay = () => {
// reset stats
creatureName.textContent = '';
creatureID.textContent = '';
height.textContent = '';
weight.textContent = '';
types.innerHTML = '';
specialName.innerHTML = '';
specialDescription.innerHTML = '';
hp.textContent = '';
attack.textContent = '';
defense.textContent = '';
specialAttack.textContent = '';
specialDefense.textContent = '';
speed.textContent = '';
};
searchButton.addEventListener('click', getCreature)
searchInput.addEventListener('keydown', (e) => {
if(e.key === 'Enter') getCreature()
})
/* file: styles.css */
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: inherit;
}
html {
font-size: 62.5%;
}
body {
font-family: sans-serif;
background-color: #1b1b32;
color: white;
font-family: Verdana, Geneva, Tahoma, sans-serif;
box-sizing: border-box;
font-size: 1.6rem;
}
button,
input,
select,
textarea {
font-family: inherit;
font-size: 100%;
}
#logo {
width: 25rem;
max-width: 100%;
height: 5rem;
max-height: 100%;
}
main {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#search-form > label {
display: flex;
flex-direction: column;
}
#search-form {
}
#output-container {
background: white;
color: #0a0a23;
padding: 2rem;
width: 60vw;
height: 60vh;
max-width: 100%;
max-height: 100%;
border-radius: 1.5rem;
}
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:143.0) Gecko/20100101 Firefox/143.0
Challenge Information:
Build an RPG Creature Search App Project - Build an RPG Creature Search App
Typical that form submissions is the most tricky part (for me).