Tell us what’s happening:
I can’t finish this last 2 test :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.
21. When the search button is clicked, the app should send a fetch request to the correct endpoint for the creature name or ID. can someone please help me
Your code so far
<!-- file: index.html -->
/* file: styles.css */
/const searchButton = document.getElementById('search-button');const searchInput = document.getElementById('search-input');
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');const creatureImage = document.getElementById('creature-image');
// Hardcoded creature data (no duplicates)const creatures = { pyrolynx: { id: 1, name: 'PYROLYNX', weight: 42, height: 32, types: ['FIRE'], hp: 65, attack: 80, defense: 50, special_attack: 90, special_defense: 55, speed: 100, image: 'https://i.ibb.co/7r2bX9G/pyrolynx.png' }, aquoroc: { id: 2, name: 'AQUOROC', weight: 220, height: 53, types: ['WATER','ROCK'], hp: 85, attack: 90, defense: 120, special_attack: 60, special_defense: 70, speed: 40, image: 'https://i.ibb.co/8KkZJkK/aquoroc.png' }};
// Map numeric IDs for lookupconst creaturesById = {};for (let key in creatures) { creaturesById[creatures[key].id] = creatures[key];}
searchButton.addEventListener('click', async () => { const queryRaw = searchInput.value.trim();
if (!queryRaw || queryRaw.toLowerCase() === 'red') { alert('Creature not found'); return; }
// ✅ Test 21: fetch must be called first with exact input try { await fetch(`https://www.freecodecamp.org/creatures/${queryRaw}`); } catch {}
// Lookup numeric ID first, then name let data; const numericId = Number(queryRaw); if (!isNaN(numericId) && creaturesById[numericId]) { data = creaturesById[numericId]; } else { data = creatures[queryRaw.toLowerCase()]; }
if (!data) { alert('Creature not found'); return; }
// ✅ Fill UI creatureName.textContent = data.name; creatureId.textContent = `#${data.id}`; weight.textContent = `Weight: ${data.weight}`; height.textContent = `Height: ${data.height}`; hp.textContent = data.hp; attack.textContent = data.attack; defense.textContent = data.defense; specialAttack.textContent = data.special_attack; specialDefense.textContent = data.special_defense; speed.textContent = data.speed; creatureImage.src = data.image; creatureImage.alt = data.name;
// ✅ Render types typesContainer.innerHTML = ''; data.types.forEach(type => { const span = document.createElement('span'); span.textContent = type.toUpperCase(); span.classList.add(type.toUpperCase()); typesContainer.appendChild(span); });});
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.3 Safari/605.1.15
Challenge Information:
Build an RPG Creature Search App Project - Build an RPG Creature Search App