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

JavaScript
1

Tell us what’s happening:

i’ve tried everything i can i dont know how to do this 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.

Your code so far

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


/* file: styles.css */


/* file: script.js */

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

2

Hey there,

Please update the message to include your code. The code was too long to be automatically inserted by the help button.

When you enter a code, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

3 
document.getElementById('search-button').addEventListener('click', function() {
    const searchInput = document.getElementById('search-input').value.trim().toLowerCase();

    const creatures = {
        'pyrolynx': {
            id: 1,
            name: 'PYROLYNX',
            weight: 42,
            height: 32,
            hp: 65,
            attack: 80,
            defense: 50,
            specialAttack: 90,
            specialDefense: 55,
            speed: 100,
            types: ['fire']
        },
        '2': {
            id: 2,
            name: 'AQUOROC',
            weight: 220,
            height: 53,
            hp: 85,
            attack: 90,
            defense: 120,
            specialAttack: 60,
            specialDefense: 70,
            speed: 40,
            types: ['water', 'rock']
        }
    };

    function fetchCreatureFromAPI(searchTerm) {
        fetch(`https://rpg-creature-api.freecodecamp.rocks/api/creature/${searchTerm}`)
            .then(response => {
                if (!response.ok) {
                    throw new Error('Creature not found');
                }
                return response.json();
            })
            .then(creature => {
                updateCreatureUI(creature);
            })
            .catch(error => {
                alert(error.message);
            });
    }

    function updateCreatureUI(creature) {
        document.getElementById('creature-name').textContent = creature.name.toUpperCase();
        document.getElementById('creature-id').textContent = `#${creature.id}`;
        document.getElementById('weight').textContent = `Weight: ${creature.weight}`;
        document.getElementById('height').textContent = `Height: ${creature.height}`;
        document.getElementById('hp').textContent = creature.hp;
        document.getElementById('attack').textContent = creature.attack;
        document.getElementById('defense').textContent = creature.defense;
        document.getElementById('special-attack').textContent = creature.specialAttack;
        document.getElementById('special-defense').textContent = creature.specialDefense;
        document.getElementById('speed').textContent = creature.speed;

        const typesDiv = document.getElementById('types');
        typesDiv.innerHTML = '';
        creature.types.forEach(type => {
            const typeElement = document.createElement('span');
            typeElement.textContent = type.toUpperCase();
            typesDiv.appendChild(typeElement);
        });
    }

    if (creatures[searchInput]) {
        updateCreatureUI(creatures[searchInput]);
    } 
    else {
        fetchCreatureFromAPI(searchInput);
    }
});

this is my code

4

please also share your html

from your javascript I see you are hardcoding creatures, don’t do that, always use the API

5 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RPG Creature Search</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

    <!-- Search Input and Button -->
    <input type="text" id="search-input" placeholder="Enter creature name or ID" required>
    <button id="search-button">Search</button>

    <!-- Creature Data Display -->
    <div id="creature-info">
        <h2 id="creature-name"></h2>
        <p id="creature-id"></p>
        <p id="weight"></p>
        <p id="height"></p>
        <div id="types"></div>
        <p id="hp"></p>
        <p id="attack"></p>
        <p id="defense"></p>
        <p id="special-attack"></p>
        <p id="special-defense"></p>
        <p id="speed"></p>
    </div>

    <script src="script.js"></script>
</body>
</html>
6

when i remove creatures it gives error in steps 15,16,17,18,20
15. When the

#search-input

element contains the value

Pyrolynx

and the

#search-button

element is clicked, the values in the

#creature-name

,

#creature-id

,

#weight

,

#height

,

#hp

,

#attack

,

#defense

,

#special-attack

,

#special-defense

, and

#speed

elements should be

PYROLYNX

,

#1

or

1

,

Weight: 42

or

42

,

Height: 32

or

32

,

65

,

80

,

50

,

90

,

55

, and

100

, respectively. 16. When the

#search-input

element contains the value

Pyrolynx

and the

#search-button

element is clicked, a single element should be added within the

#types

element that contains the text

FIRE

. The

#types

element content should be cleared between searches. 17. When the

#search-input

element contains the value

2

and the

#search-button

element is clicked, the values in the

#creature-name

,

#creature-id

,

#weight

,

#height

,

#hp

,

#attack

,

#defense

,

#special-attack

,

#special-defense

, and

#speed

elements should be

AQUOROC

,

#2

or

2

,

Weight: 220

or

220

,

Height: 53

or

53

,

85

,

90

,

120

,

60

,

70

, and

40

, respectively. 18. When the

#search-input

element contains the value

2

and the

#search-button

element is clicked, two elements should be added within the

#types

element that contain text values

WATER

and

ROCK

, respectively. The

#types

element content should be cleared between searches. 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. // tests completed

7

please share your updated JavaScript

8

here is the updated code

9 
document.getElementById('search-button').addEventListener('click', function() {
    const searchInput = document.getElementById('search-input').value.trim().toLowerCase();
    
    // Always fetch from the API, no hardcoded creatures
    fetchCreatureFromAPI(searchInput);
});

function fetchCreatureFromAPI(searchTerm) {
    fetch(`https://rpg-creature-api.freecodecamp.rocks/api/creature/${searchTerm}`)
        .then(response => {
            if (!response.ok) {
                throw new Error('Creature not found');
            }
            return response.json();
        })
        .then(creature => {
            updateCreatureUI(creature);
        })
        .catch(error => {
            alert(error.message);
        });
}

function updateCreatureUI(creature) {
    document.getElementById('creature-name').textContent = creature.name.toUpperCase();
    document.getElementById('creature-id').textContent = `#${creature.id}`;
    document.getElementById('weight').textContent = `Weight: ${creature.weight}`;
    document.getElementById('height').textContent = `Height: ${creature.height}`;
    document.getElementById('hp').textContent = creature.hp;
    document.getElementById('attack').textContent = creature.attack;
    document.getElementById('defense').textContent = creature.defense;
    document.getElementById('special-attack').textContent = creature.specialAttack;
    document.getElementById('special-defense').textContent = creature.specialDefense;
    document.getElementById('speed').textContent = creature.speed;

    const typesDiv = document.getElementById('types');
    typesDiv.innerHTML = '';
    creature.types.forEach(type => {
        const typeElement = document.createElement('span');
        typeElement.textContent = type.toUpperCase();
        typesDiv.appendChild(typeElement);
    });
}
10

I’ve edited your post to improve the readability of the code. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

1 Like
11

you should test your app in the preview, when I write Pyrolynx and press the button I get this

image
image448×158 4.95 KB