Tell us what’s happening:
- When the #search-input element contains the value Red and the #search-button element is clicked, an alert should appear with the text “Creature not found”.
both locally and on the freecodecamp environment when I type in Red and search I get an alert with the message “Creature not found”. So I’m totally at a loss to what’s wrong.
Your code so far
<!-- file: index.html -->
/* file: styles.css */
/* file: script.js */
const searchInput = document.getElementById('search-input');
const searchBtn = document.getElementById('search-button');
const creatureName = document.getElementById('creature-name');
const creatureId = document.getElementById('creature-id');
const creatureWeight = document.getElementById('weight');
const creatureHeight = document.getElementById('height');
const creatureType = document.getElementById('types');
const creatureDescriptionTitle = document.querySelector('.description h2');
const creatureDescription = document.querySelector('.description p');
// const creatureHp = document.getElementById('hp');
// const creatureAttack = document.getElementById('attack');
// const creatureDefence = document.getElementById('defence');
// const creatureSpAttack = document.getElementById('special-attack');
// const creatureSpDefence = document.getElementById('special-defence');
// const creatureSpeed = document.getElementById('speed');
const statsNodeList = document.querySelectorAll('.stats p');
let creatureSearchData = null;
let creatureNameSearchData = null;
let creatureDetails = null;
// search validation object API request on pageload
window.onload = async () => {
try {
const res = await fetch('https://rpg-creature-api.freecodecamp.rocks/api/creatures');
const data = await res.json();
creatureSearchData = new Map(data.map(obj => [obj.id, obj.name.toLowerCase()]));
creatureNameSearchData = [...creatureSearchData.values()];
} catch (error) {
console.error('Error fetching creature search data', error);
} finally {
searchInput.disabled = false;
searchBtn.disabled = false;
console.log("creatureSearchData from Finally block:", creatureSearchData);
}
};
const fetchCreatureData = async (searchParameter) => {
try {
const res = await fetch(`https://rpg-creature-api.freecodecamp.rocks/api/creature/${searchParameter}`);
const data = await res.json();
creatureDetails = data;
} catch (error) {
console.error('Error fetching creature data:', error);
} finally {
updateStatsUI(creatureDetails);
}
}
function updateStatsUI(creatureDetails) {
console.log(creatureDetails);
const {height, id, name, weight} = creatureDetails;
const {description, name:specialName} = creatureDetails.special;
// two arrays containing values needed for UI
const statsTest = creatureDetails.stats.map(stat => stat.base_stat);
const creatureTypes = creatureDetails.types.map(type => type.name);
console.log("statTEST",statsTest);
console.log("creatureTypeTEST:", creatureTypes);
// console.log(height, id, name, weight);
// console.log(description, specialName);
// console.log(creatureStats);
// console.log(creatureTypes);
// update UI
creatureId.textContent = id;
creatureName.textContent = name;
creatureHeight.textContent = height;
creatureWeight.textContent = weight;
creatureDescription.textContent = description;
creatureDescriptionTitle.textContent = specialName;
creatureTypes.forEach (elem => {
creatureType.innerHTML += `<span>${elem.toUpperCase()} </span>`;
});
statsNodeList.forEach((elem, index) => {
elem.textContent = statsTest[index];
});
};
const cleanUserInput = (userInput) => {
userInput = userInput.replace(/\s+/g, '').toLowerCase();
let userInputNumberMatch = userInput.match(/\d+/g);
let userInputCharacterMatch = userInput.match(/([a-zA-Z]+)/g);
let userInputNumber = userInputNumberMatch ? parseInt(userInputNumberMatch.join('')) : null;
let userInputcharacter = userInputCharacterMatch ? userInputCharacterMatch.join('') : null;
console.log("cleanUserInput function (input, int-output, string-output):",userInput, userInputNumber, userInputcharacter);
return {number: userInputNumber, text: userInputcharacter};
};
const validatesearch = (userInput) => {
const {number, text} = cleanUserInput(userInput);
console.log("validateSearch function:","number:",number,"text:", text);
if (number === null && text === null) return alert('Creature not found');
if (number !== null && (number <= 0 || number > creatureSearchData.size)) {
return alert('Creature not found');
}
let searchFlag = creatureSearchData.has(number) || creatureSearchData.has(text);
console.log("search flag", searchFlag);
if (creatureSearchData.has(number)) {
console.log("creature ID exists", creatureSearchData.has(number));
return fetchCreatureData(number);
}
if (creatureNameSearchData.includes(text)) {
console.log("creature name input exists", creatureNameSearchData.includes(text));
return fetchCreatureData(text);
}
if (!creatureSearchData.has(number)) {
console.log('creature ID does NOT exist');
return alert('Creature not found');
}
if (!creatureSearchData.has(text)) {
console.log('creature name does NOT exist');
return alert('Creature not found');
};
}
searchBtn.addEventListener('click', ()=>{
let userInput = searchInput.value;
validatesearch(userInput);
searchInput.value = '';
creatureType.textContent = '';
});
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/138.0.0.0 Safari/537.36
Challenge Information:
Build an RPG Creature Search App Project - Build an RPG Creature Search App
Can you share your html and css code as well? It doesn’t seem to have gotten copied into your post.
You can start by reviews the user stories and just make sure they are implemented correctly. Sometimes there is a detail there that isn’t mentioned in the test output.
Yeah here.
I know the code is bloated and has things it doesn’t need so unless I’m missing something specific it is probably because of that and I’ll just have to reformat the code but I’d like to know if I’ve actually done something incorrect not just bad.
<!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>
<img src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="fCC-Logo" class="cover_logo">
<h1 id="title">RPG Creature Search App</h1>
<section class="container">
<div class="search-bar">
<p>Search for Creature Name or ID:</p>
<div>
<input type="text" id="search-input" disabled required>
<button id="search-button" disabled>Search</button>
</div>
</div>
<div class="main-info">
<div class="name-id">
<h2 id="creature-name">TEST</h2>
<p>#<span id="creature-id">TEST</span></p>
</div>
<div class="weight-height">
<p>Weight: <span id="weight">TEST</span></p>
<p>Height: <span id="height">TEST</span></p>
</div>
<span id="types">TEST</span>
<div class="description">
<h2>TEST</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo cupiditate recusandae mollitia alias placeat aliquam.</p>
</div>
</div>
<div class="base-stats-container">
<div class="base">
<h2>Base</h2>
<p>HP:</p>
<p>Attack:</p>
<p>Defense:</p>
<p>Sp. Attack:</p>
<p>sp. Defense:</p>
<p>Speed:</p>
</div>
<div class="stats">
<h2>Stats</h2>
<p id="hp">88</p>
<p id="attack">12</p>
<p id="defense">134</p>
<p id="special-attack">4</p>
<p id="special-defense">763</p>
<p id="speed">34</p>
</div>
</div>
</section>
<script src="script.js"></script>
</body>
</html>
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
color: aliceblue;
}
:root {
--base-clr: #001a11;
--compliment-clr: #8b8b8b;
--focus-clr: #004b31;
}
input, button, textarea, select {
font: inherit;
}
body {
display: grid;
grid-template-columns: repeat(3, minmax(auto-fit, 200px));
grid-template-rows: repeat(3, minmax(auto-fit, 200px));
grid-template-areas:
'sideLeft header sideRight'
'sideLeft main sideRight'
'sideLeft footer sideRight';
background-color: var(--base-clr);
}
.cover_logo {
grid-area: footer;
width: 500px;
justify-self: center;
}
#title {
margin: .5em 0 .5em 0;
font-size: 2em;
grid-area: header;
justify-self: center;
}
/* main container */
.container {
grid-area: main;
justify-self: center;
display: grid;
grid-template-columns: 2fr 1fr 2fr;
grid-template-rows: 70px 230px 220px;
margin: 15px;
}
/* search bar contents */
.search-bar {
grid-row: 1 / 2;
grid-column: 2 / 3;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
background-color: var(--focus-clr);
border: 3px solid var(--compliment-clr);
border-bottom: none;
border-radius: 15px 15px 0 0;
padding: 0 0 8px 0;
}
.search-bar p:nth-child(1) {
text-align: center;
padding: 5px;
}
#search-input {
height: 1.6em;
border: none;
border-radius: 2px;
padding: 0 5px 0 5px;
color: var(--base-clr);
}
#search-button {
border: 2px solid var(--focus-clr);
border-radius: 6px;
height: 2em;
width: 5em;
padding: 0 5px 0 5px;
font-size: .8em;
background-color: var(--surface-clr);
}
#search-button:hover {
transition: 0.6ms;
background-color: var(--compliment-clr);
transform: scale(1.05);
}
#search-button:active {
transition: 0.6ms;
background-color: var(--base-clr); /* Darker shade */
transform: scale(0.95); /* Slight shrink */
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2); /* Inset shadow */
}
/* creature info contents */
.main-info {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 2px;
grid-row: 2 / 3;
grid-column: 2 / 3;
background-color: var(--base-clr);
border: 3px solid var(--compliment-clr);
border-bottom: none;
border-radius: 0 0 15px 15px;
padding-left: 5px;
}
.name-id {
display: flex;
flex-direction: row;
gap: 5px;
}
.weight-height {
display: flex;
flex-direction: row;
gap: 10px;
}
#types {
background-color: none;
}
.description {
margin: 15px 0 0 0;
}
.base-stats-container {
grid-row: 3 / 3;
grid-column: 2 / 3;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
background-color: var(--base-clr);
border: 3px solid var(--compliment-clr);
border-top: none;
border-radius: 20px 20px 0 0 ;
padding: 10px 0 10px 0;
}
.base-stats-container > * {
text-align: center;
width: 120px;
}
.base > *{
padding: 3px;
background-color: var(--focus-clr);
border-radius: 15px 0 0 15px;
margin: 4px 0 0 0;
}
.stats > * {
padding: 3px;
background-color: var(--focus-clr);
border-radius: 0 15px 15px 0;
margin: 4px 0 0 0;
}
You definitely shouldn’t add anything extra. Just write what the instructions ask and no more or it can interfere with the tests.
I would try simplifying this and throwing out anything not directly related to the functionality described in the tests.
Did you manage to solve it? I’m having the same issue — my code doesn’t pass the tests starting from #14. I don’t understand what the problem is
Please open your own topic for assistance.
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.
I think your post has a useful response. Please take a look at it now.
keep in mind that a button has default behaviour of reloading the form.
So make sure to use the correct type attribute in your button element to prevent that from happening and messing up the tests.
Sorry for the late reply, I did but I refactored my code entirely to remove all the bloat and I ended up failing on test 21 (the last test which requires the correct fetch to be called) which of course I was calling the correct fetch but not in the correct order to satisfy the test.
So if you do come across that issue as well just know you have to make the first fetch request ‘https://rpg-creature-api.freecodecamp.rocks/api/creature/’ not the other one.
And I honestly couldn’t tell you what I did differently to resolve step 14, I rewrote the entire script.
