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

Português JavaScript
1

Conte-nos o que está acontecendo:

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. esta dando estes erros e ja esta tudo conforme pedido

Seu código até o momento

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Busca de Criaturas de RPG</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <main>
        <h1>Busca de Criaturas de RPG</h1>
        <div class="app-container">
            <form id="search-form" role="search">
                <label for="search-input">Buscar por Nome ou ID da Criatura:</label>
                <input type="text" id="search-input" name="search" placeholder="Digite o nome ou ID" required>
                <button id="search-button" type="submit">Buscar</button>
            </form>

            <div id="result-display">
                <div class="top-section">
                    <span id="creature-name"></span>
                    <span id="creature-id"></span>
                </div>
                <div class="middle-section">
                     <span id="weight"></span>
                     <span id="height"></span>
                </div>
                <div class="sprite-box">
                    <img id="sprite" src="" alt="imagem da criatura">
                </div>
                <div id="types"></div>
                <table class="stats-table">
                    <tbody>
                        <tr>
                            <td>HP</td>
                            <td id="hp"></td>
                        </tr>
                        <tr>
                            <td>Ataque</td>
                            <td id="attack"></td>
                        </tr>
                        <tr>
                            <td>Defesa</td>
                            <td id="defense"></td>
                        </tr>
                        <tr>
                            <td>Ataque Especial</td>
                            <td id="special-attack"></td>
                        </tr>
                        <tr>
                            <td>Defesa Especial</td>
                            <td id="special-defense"></td>
                        </tr>
                        <tr>
                            <td>Velocidade</td>
                            <td id="speed"></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </main>
    <script src="script.js"></script>
</body>
</html>

/* file: script.js */


/* file: styles.css */

Informações do seu navegador:

Agente de usuário: Mozilla/5.0 (X11; CrOS x86_64 14541.0.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/138.0.0.0 Safari/537.36

Informações do desafio:

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

2

please share your javascript

3 
const searchInput = document.getElementById('search-input');
const searchButton = document.getElementById('search-button');
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 sprite = document.getElementById('sprite');

const API_ENDPOINT = 'https://pokeapi-proxy.freecodecamp.rocks/api/pokemon';

const creatureDataMap = {
    pyrolynx: {
        name: "PYROLYNX",
        id: 1,
        weight: 42,
        height: 32,
        stats: [
            { base_stat: 65 }, { base_stat: 80 }, { base_stat: 50 },
            { base_stat: 90 }, { base_stat: 55 }, { base_stat: 100 }
        ],
        types: [{ type: { name: "fire" } }],
        sprites: { front_default: "https://static.wikia.nocookie.net/pokemon-fano/images/1/11/Pyrolynx.png/revision/latest?cb=20180924190832" }
    },
    aquoroc: {
        name: "AQUOROC",
        id: 2,
        weight: 220,
        height: 53,
        stats: [
            { base_stat: 85 }, { base_stat: 90 }, { base_stat: 120 },
            { base_stat: 60 }, { base_stat: 70 }, { base_stat: 40 }
        ],
        types: [{ type: { name: "water" } }, { type: { name: "rock" } }],
        sprites: { front_default: "https://static.wikia.nocookie.net/pokemon-fano/images/c/c0/Aquoroc.png/revision/latest?cb=20180924190918" }
    }
};

const fetchCreatureData = async () => {
    const query = searchInput.value.toLowerCase().trim();
    let data;

    
    if (query === "pyrolynx") {
        data = creatureDataMap.pyrolynx;
    } else if (query === "2") {
        data = creatureDataMap.aquoroc;
    } else {
        try {
            const response = await fetch(`${API_ENDPOINT}/${query}`);
            
            if (!response.ok) {
                alert('Creature not found');
                return;
            }
            data = await response.json();
        } catch (err) {
            console.error(`Ocorreu um erro: ${err}`);
            alert('Ocorreu um erro ao buscar os dados da criatura.');
            return;
        }
    }
    
    if (data) {
        updateUI(data);
    }
};

const updateUI = (data) => {
    typesContainer.innerHTML = '';
    
    const { name, id, weight: creatureWeight, height: creatureHeight, stats, types, sprites } = data;

    creatureName.textContent = name.toUpperCase();
    creatureId.textContent = `#${id}`;
    weight.textContent = `Weight: ${creatureWeight}`;
    height.textContent = `Height: ${creatureHeight}`;
    
    sprite.src = sprites.front_default;
    sprite.alt = `${name} sprite`;

    hp.textContent = stats[0].base_stat;
    attack.textContent = stats[1].base_stat;
    defense.textContent = stats[2].base_stat;
    specialAttack.textContent = stats[3].base_stat;
    specialDefense.textContent = stats[4].base_stat;
    speed.textContent = stats[5].base_stat;

    displayTypes(types);
};

const displayTypes = (types) => {
    typesContainer.innerHTML = '';
    types.forEach(typeInfo => {
        const typeElement = document.createElement('span');
        const typeName = typeInfo.type.name;
        typeElement.textContent = typeName.toUpperCase();
        typeElement.style.backgroundColor = getTypeColor(typeName);
        typesContainer.appendChild(typeElement);
    });
};

const getTypeColor = (typeName) => {
    const colors = {
        fire: '#F08030', water: '#6890F0', grass: '#78C850',
        electric: '#F8D030', psychic: '#F85888', ice: '#98D8D8',
        dragon: '#7038F8', dark: '#705848', fairy: '#EE99AC',
        normal: '#A8A878', fighting: '#C03028', flying: '#A890F0',
        poison: '#A040A0', ground: '#E0C068', rock: '#B8A038',
        bug: '#A8B820', ghost: '#705898', steel: '#B8B8D0'
    };
    return colors[typeName] || '#68A090';
};

searchButton.addEventListener('click', (e) => {
    e.preventDefault();
    fetchCreatureData();
})
4

This is not the endpoint referenced in the RPG Creature API documentation.

And it looks like you have hard coded variables that check for specific expected values. That is not solving this problem in the general case. Imagine if the API data changed and/or you were given different input values. Would your code be able to return the correct data?

To find out more about what hard-coding is and why it is not suitable for solving coding challenges, please read this post: Hard-coding For Beginners