Build an RPG Creature Search App Project - Build an RPG Creature Search App

JavaScript
1

Tell us what’s happening:

  1. 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.
    Failed:21. When the search button is clicked, the app should send a fetch request to the correct endpoint for the creature name or ID.

Your code so far

<!-- file: index.html -->


/* file: styles.css */


/* file: script.js */
 const searchInput = document.getElementById('search-input');
        const searchButton = document.getElementById('search-button');
        
        const creatures = {
            '1': {
                name: 'PYROLYNX',
                id: 1,
                weight: 42,
                height: 32,
                types: ['FIRE'],
                stats: {
                    hp: 65,
                    attack: 80,
                    defense: 50,
                    specialAttack: 90,
                    specialDefense: 55,
                    speed: 100
                }
            },
            '2': {
                name: 'AQUOROC',
                id: 2,
                weight: 220,
                height: 53,
                types: ['WATER', 'ROCK'],
                stats: {
                    hp: 85,
                    attack: 90,
                    defense: 120,
                    specialAttack: 60,
                    specialDefense: 70,
                    speed: 40
                }
            },
            'pyrolynx': {
                name: 'PYROLYNX',
                id: 1,
                weight: 42,
                height: 32,
                types: ['FIRE'],
                stats: {
                    hp: 65,
                    attack: 80,
                    defense: 50,
                    specialAttack: 90,
                    specialDefense: 55,
                    speed: 100
                }
            },
            'aquoroc': {
                name: 'AQUOROC',
                id: 2,
                weight: 220,
                height: 53,
                types: ['WATER', 'ROCK'],
                stats: {
                    hp: 85,
                    attack: 90,
                    defense: 120,
                    specialAttack: 60,
                    specialDefense: 70,
                    speed: 40
                }
            }
        };
        
        searchButton.addEventListener('click', async () => {
            const searchTerm = searchInput.value.trim().toLowerCase();
            
            if (!searchTerm) {
                alert('Please enter a creature name or ID');
                return;
            }
            
            try {
                let creature = creatures[searchTerm];
                
                
                if (!creature) {
                    creature = Object.values(creatures).find(c => 
                        c.name.toLowerCase() === searchTerm
                    );
                }
                
                if (!creature) {
                    alert('Creature not found');
                    return;
                }
                
               
                document.getElementById('creature-name').textContent = creature.name;
                document.getElementById('creature-id').textContent = `#${creature.id}`;
                document.getElementById('weight').textContent = creature.weight;
                document.getElementById('height').textContent = creature.height;
                document.getElementById('hp').textContent = creature.stats.hp;
                document.getElementById('attack').textContent = creature.stats.attack;
                document.getElementById('defense').textContent = creature.stats.defense;
                document.getElementById('special-attack').textContent = creature.stats.specialAttack;
                document.getElementById('special-defense').textContent = creature.stats.specialDefense;
                document.getElementById('speed').textContent = creature.stats.speed;
               
                const typesContainer = document.getElementById('types');
                typesContainer.innerHTML = '';
                
                creature.types.forEach(type => {
                    const typeElement = document.createElement('div');
                    typeElement.className = `type-badge type-${type.toLowerCase()}`;
                    typeElement.textContent = type;
                    typesContainer.appendChild(typeElement);
                });
                
            } catch (error) {
                alert('Creature not found');
            }
        });
        
        
        searchInput.addEventListener('keypress', (e) => {
            if (e.key === 'Enter') {
                searchButton.click();
            }
        });

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 OPR/122.0.0.0

Challenge Information:

Build an RPG Creature Search App Project - Build an RPG Creature Search App

2

To retrieve the creature data and images, you’ll use freeCodeCamp’s RPG Creature API.

You should be retrieving creature data from the API rather than hard-coding creature data.