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

JavaScript
1

Tell us what’s happening:

my code work fine, but test no 14 just don’t pass, the alert appear correctly

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>Build an RPG Creature Search App</title>
    <link href="https://unpkg.com/nes.css@2.3.0/css/nes.min.css" rel="stylesheet" />
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
</head>
<style>
    * {
        font-family: "Press Start 2P", system-ui;
        font-weight: 400;
        font-style: normal;
    }
    body {
        min-height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 20px;
    }
    .type {
        margin-inline:10px;
    }
</style>
<body>
    <div class="nes-container">
        <h1 class="nes-text is-primary">RPG Creature Search App</h1>
        <div class="nes-field is-inline">
            <input type="text" id="search-input" class="nes-input" required>
            <button id="search-button" type="button" class="nes-btn">Search</button>
        </div>
        <h2 id="creature-name">Creature Name</h2>
        <div href="#" class="nes-badge is-splited">
            <span class="is-dark">ID : </span>
            <span class="is-warning" id="creature-id">#</span>
        </div>
        <h2>type</h2>
        <div id="types"></div>
        <div  class="nes-table-responsive">
            <h2 class="nes-text">Creature Data</h2>
            <table class="nes-table is-bordered is-centered">
            <thead>
                <tr>
                    <th>Base</th>
                    <th>Stat</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Weight</td>
                    <td id="weight"></td>
                </tr>
                <tr>
                    <td>Height</td>
                    <td id="height"></td>
                </tr>
                <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. Defend</td>
                    <td id="special-defense"></td>
                </tr>
                <tr>
                    <td>Speed</td>
                    <td id="speed"></td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
<script src="script.js"></script>
</body>
</html>

/* file: styles.css */


/* file: script.js */
const input = document.getElementById("search-input") //done
const button = document.getElementById("search-button") //done
const creatureNameText = document.getElementById("creature-name") //done
const creatureIdText = document.getElementById("creature-id") //done
const weightText = document.getElementById("weight") //done
const heightText = document.getElementById("height") //done
const hpText = document.getElementById("hp") //done
const typeDiv = document.getElementById("types")
const attackText = document.getElementById("attack") //done
const defenseText = document.getElementById("defense") //done
const specialAttackText = document.getElementById("special-attack") //done
const specialDefenceText = document.getElementById("special-defense") //done
const speedText = document.getElementById("speed") //done

let database = {};
let creatureData = {};

const getDatabase = async () => {
    try {
        const response = await fetch('https://rpg-creature-api.freecodecamp.rocks/api/creatures')
        database = await response.json()

        
        
        console.log(database)
    } catch(err) {
        console.log(err)
    }
}

const getCreature = async (nameOrId) => {
    try {
        let link = `https://rpg-creature-api.freecodecamp.rocks/api/creature/${nameOrId}`
        const response = await fetch(link)
        creatureData = await response.json()
        weightText.textContent = creatureData.weight;
        heightText.textContent = creatureData.height;
        hpText.textContent = creatureData.stats[0].base_stat;
        attackText.textContent = creatureData.stats[1].base_stat;
        defenseText.textContent = creatureData.stats[2].base_stat;
        specialAttackText.textContent = creatureData.stats[3].base_stat;
        specialDefenceText.textContent = creatureData.stats[4].base_stat;
        speedText.textContent = creatureData.stats[5].base_stat;
        typeDiv.innerHTML = ''
        creatureData.types.map((type) => {
            let newSpan = document.createElement("span")
            newSpan.textContent = type.name;
            newSpan.classList.add("nes-btn")
            newSpan.classList.add("is-success")
            newSpan.classList.add("type")
            typeDiv.appendChild(newSpan)
        })
        
        
        console.log(creatureData)
    } catch(err) {
        console.log(err)
    }
}

getDatabase();

button.addEventListener('click', () => {
    
    const dicari = input.value.toLowerCase().trim();
    let nemu = false;
    if(/^\d+$/.test(dicari) ){
        for(const creature of database){
            if(creature.id.toString() === dicari){
                creatureNameText.textContent = creature.name;
                creatureIdText.textContent = `#${creature.id}`;
                nemu = true;
                getCreature(dicari)
            }
        }
        if(nemu === false){
            alert("Creature not found")
            creatureNameText.textContent = "";
            creatureIdText.textContent = "";
            weightText.textContent = "";
            heightText.textContent = "";
            hpText.textContent = "";
            typeDiv.textContent = "";
            attackText.textContent = "";
            defenseText.textContent = "";
            specialAttackText.textContent = "";
            specialDefenceText.textContent = "";
            speedText.textContent = "";
        }
    } else{
        for(const creature of database){
            if(creature.name.toLowerCase() === dicari){
                creatureNameText.textContent = creature.name;
                creatureIdText.textContent = `#${creature.id}`;
                nemu = true;
                getCreature(dicari)
            }
        }
        if(nemu === false){
            alert("Creature not found")
            creatureNameText.textContent = "";
            creatureIdText.textContent = "";
            weightText.textContent = "";
            heightText.textContent = "";
            hpText.textContent = "";
            typeDiv.textContent = "";
            attackText.textContent = "";
            defenseText.textContent = "";
            specialAttackText.textContent = "";
            specialDefenceText.textContent = "";
            speedText.textContent = "";
        }
    }
})

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64) 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

You’re showing the alert based on checking the database first, then calling getCreature if it’s found, which performs the fetch().

However, the test relies on the result of the fetch() itself.
If the fetch fails, it expects the alert to be triggered at that point.

To fix this, you should call alert when the fetch fails.
Think about checking !response.ok or by using the catch block in your getCreature function.

3

i don’t know why but remove all console.log make it pass. thank you for answering my question

4

I have the same problem, test 14 doesn’t pass, how do I delete console.log?

5

If you have a question about a specific challenge as it relates to your written code for that challenge and need some help, click the Get Help > Ask for Help button located on the challenge.

image
image493×196 5.09 KB

The Ask for Help button will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.

Thank you.