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

JavaScript
1

Tell us what’s happening:

My code passes the first 13 tests, but not the ones after that. I don’t understand what the problem could be — everything looks correct to me.
test #14. 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”.

Your code so far

<!-- file: index.html -->
<!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 App</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <main>
        <h1>RPG Creature Search App</h1>
        <div class="container">
            <form class="search-form">
                <label for="search-input">Search for Creature Name or ID:</label>
                <input type="text" id="search-input" required>
                <button type="submit" id="search-button">Search</button>
            </form>
            <div class="output">
                <div class="top">
                    <div class="name-id">
                        <p id="creature-name"></p>
                        <p  id="creature-id"></p>
                    </div>
                    <div class="size">
                        <p id="weight"></p>
                        <p id="height"></p>
                    </div>
                    <div id="types"></div>
                    <div class="special">
                        <p id="special-name"></p>
                        <p id="special-description"></p>
                    </div>
                </div>
                <div class="bottom">
                    <table>
                        <thead>
                            <tr>
                                <th>Base</th>
                                <th>Stats</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>HP:</td>
                                <td id="hp"></td>
                            </tr>
                            <tr>
                                <td>Attack:</td>
                                <td id="attack"></td>
                            </tr>
                            <tr>
                                <td>Defense:</td>
                                <td id="defense"></td>
                            </tr>
                            <tr>
                                <td>Sp. Attack:</td>
                                <td id="special-attack"></td>
                            </tr>
                            <tr>
                                <td>Sp. Defense:</td>
                                <td id="special-defense"></td>
                            </tr>
                            <tr>
                                <td>Speed:</td>
                                <td id="speed"></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </main>
    <script src="script.js"></script>
</body>
</html>

/* file: script.js */
const creatureID = document.getElementById('creature-id');
const creatureName = document.getElementById('creature-name');
const specialName = document.getElementById('special-name');
const specialDescription = document.getElementById('special-description');
const types = document.getElementById('types');
const height = document.getElementById('height');
const weight = document.getElementById('weight');
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 searchBtn = document.getElementById('search-button');
const searchInput = document.getElementById('search-input');

const getCreature = async () => {
    try {
        const nameOrId = searchInput.value.toLowerCase();
        const res =  await fetch(`https://rpg-creature-api.freecodecamp.rocks/api/creature/${nameOrId}`);
        const data = await res.json();
        insertInfo(data);
    } catch (err) {
        reset();
        alert("Creature not found");
    }
}

const insertInfo = (data) => {
    creatureID.textContent = "#" + data.id;
    creatureName.textContent = data.name.toUpperCase();
    weight.textContent = `Weight: ${data.weight}`;
    height.textContent = `Height: ${data.height}`;
    specialName.textContent = data.special.name;
    specialDescription.textContent = data.special.description;
    types.innerHTML = data.types
      .map(obj => `<span class="type ${obj.name}">${obj.name}</span>`)
      .join('');
    hp.textContent = data.stats[0].base_stat;
    attack.textContent = data.stats[1].base_stat;
    defense.textContent = data.stats[2].base_stat;
    specialAttack.textContent = data.stats[3].base_stat;
    specialDefense.textContent = data.stats[4].base_stat;
    speed.textContent = data.stats[5].base_stat;
}

const reset = () => {
    creatureName.textContent = '';
    creatureID.textContent = '';
    height.textContent = '';
    weight.textContent = '';
    types.innerHTML = '';
    specialName.innerHTML = '';
    specialDescription.innerHTML = '';
    hp.textContent = '';
    attack.textContent = '';
    defense.textContent = '';
    specialAttack.textContent = '';
    specialDefense.textContent = '';
    speed.textContent = '';
}

searchBtn.addEventListener("click", getCreature);

/* file: styles.css */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    font-family: "Montserrat", sans-serif;
}

main {
    padding: 80px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 100vh;
    background:  #415a77;
}

h1 {
    margin-bottom: 40px;
    font-size: 36px;
    color: #f0f0f0;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}

.container {
    background-color: #f0f0f0;
    border-radius: 20px;
    padding: 15px;
    
    max-width: 450px;
    width: 95%;
}

.search-form {
    text-align: center;
    margin-bottom: 20px;
}

label {
    display: block;
    font-size: 16px;
    color: #333;
    font-weight: 500;
    margin-bottom: 12px;
}

input {
    height: 40px;
    width: 200px;
    border: 2px solid #aaa;
    border-radius: 10px;
    padding: 5px 10px;
    text-align: center;
    margin: 0 auto;
    font-size: 16px;
    transition: border-color 0.3s, box-shadow 0.3s;
}

input:focus {
    border-color: #2c7be5;
    outline: none;
    box-shadow: 0 0 8px rgba(44, 123, 229, 0.4);
}

button {
    padding: 11px 15px;
    margin-left: 4px;
    border-radius: 25px;
    font-size: 15px;
    font-weight: 600;
    background-color: #a808c4;
    color: white;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s;
}

.output {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.top {
    min-height: 200px;
    width: 95%;
    background-color: #eee9ee;
    margin-bottom: 20px;
}

.name-and-id {
  height: 28px;
  font-size: 18px;
  text-transform: capitalize;
  margin-bottom: 5px;
}

#creature-name,
#special-name {
  font-weight: bold;
}

.size,
#special-description {
  font-size: 14px;
}

#types {
  min-height: 30px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 5px;
}

.type {
  width: 66px;
  padding: 5px;
  font-size: 11px;
  text-align: center;
  border-radius: 5px;
  background-color: red;
  text-transform: uppercase;
}

.bottom {
    width: 95%;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
    color: #f0f0f0;
    background-color: #a808c4;
}

tr {
    border-bottom: 5px solid #f0f0f0;
}

td, th {
    text-align: center;
    padding: 8px;
}

th:nth-child(even), td:nth-child(even) {
    border-left: 5px solid #f0f0f0;
}

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

alerting when an error is caught is not what the test is expecting I think. I think they want you to check if the result status is 200 (OK) or not and if it is not, then alert.

3

Unfortunately still doesn’t work

4

post your updated code please

5

I changed only this function

const getCreature = async () => {
    try {
        const nameOrId = searchInput.value.toLowerCase();
        const res =  await fetch(`https://rpg-creature-api.freecodecamp.rocks/api/creature/${nameOrId}`);
        if (!res.ok) {
            reset();
            alert("Creature not found");
            return;
        }
        const data = await res.json();
        insertInfo(data);
    } catch (err) {
        reset();
        alert("Error: " + err);
    }
}
6

You didn’t need to do that. The issue with your code is right here:

What does that button do when it’s clicked?

7

It does that:

I don’t understand what the problem is

8

Google the default behavior of a button element inside a form with the type attribute set to submit.

9

It doesn’t pass the tests either with type="submit" or without it

10

What is the default “click” behavior of a button inside a form either with type=“submit” or with no type attribute? What happens?

11

What’s the difference? That’s not the problem. My other certification projects have the same structure — a form and a button with type="submit" — and they all passed all the tests

12

Are you absolutely sure that’s not the problem?? Did look up what that button is doing when it’s clicked? You did not answer my question.

13

It seems like you’re just trying to annoy people. Anyway, I’m confident that’s not the issue — my other certification projects use the same structure and logic, and they passed all the tests. This code doesn’t pass the tests either without the form or with it and with the submit listener

1 Like
15

it turns out that @fcc4b6d10c4-b540-4e2 is correct about your button.

The type of the button is the issue here.
When you use a submit type, the form reloads.
I think that is what he was trying to jog your memory about.

ps. I tested and your code works once the button type is fixed

16

Usually, when someone on the forum is asking a question like that, they are asking for a good reason, not just for their own information. They are leading you to the problem.