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

JavaScript
1

Tell us what’s happening:

I have tried refreshing the page, but still failing on the following. Everything seems working for me though. Could anyone help please?

  1. 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.

  2. When the #search-input element contains the value 2 and the #search-button element is clicked, two el

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">
        <link rel="stylesheet" href="styles.css" />
        <title>Document</title>
        <meta name="description" content="This will be shown in search engines.">
    </head>
    <body>
        <h1>RPG Creature Search App</h1>
        <div>
          <input id="search-input" required/>
          <button id="search-button">Search</button>
        </div>
        <table>
          <tr>
            <td>Creature name:</td>
            <td id="creature-name"></td>
          </tr>
          <tr>
            <td>Creature id:</td>
            <td id="creature-id"></td>
          </tr>
          <tr>
            <td>Weight:</td>
            <td id="weight"></td>
          </tr>
          <tr>
            <td>Height:</td>
            <td id="height"></td>
          </tr>
          <tr>
            <td>Types:</td>
            <td id="types"></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>Special attack:</td>
            <td id="special-attack"></td>
          </tr>
          <tr>
            <td>Special defense:</td>
            <td id="special-defense"></td>
          </tr>
          <tr>
            <td>Speed:</td>
            <td id="speed"></td>
          </tr>
        </table>
        <script src="script.js"></script>
    </body>
</html>

/* file: script.js */
const searchInput = document.getElementById('search-input');
const searchBtn = document.getElementById('search-button');
const crName = document.getElementById('creature-name');
const crID = document.getElementById('creature-id');
const crWt = document.getElementById('weight');
const crHt = document.getElementById('height');
const crTypes = document.getElementById('types');
const crHP = document.getElementById('hp');
const crAtk = document.getElementById('attack');
const crDef = document.getElementById('defense');
const crSpAtk = document.getElementById('special-attack');
const crSpDef = document.getElementById('special-defense');
const crSpd = document.getElementById('speed');

let names = [];
let ids = [];
let creature = {};

fetch('https://rpg-creature-api.freecodecamp.rocks/api/creatures')
  .then((res) => res.json())
  .then((data) => {
    // console.log(data);
    names = data.map(obj=>obj.name);
    ids = data.map(obj=>obj.id);
  })
  .catch((err) => {
    console.log(err);
  });


function isNameExist (name, arr){
  return arr.indexOf(name) > -1;
}

searchBtn.addEventListener('click', () => {

  if(isNameExist(searchInput.value, names) || 
  isNameExist(parseInt(searchInput.value), ids)){

  fetch(`https://rpg-creature-api.freecodecamp.rocks/api/creature/${searchInput.value.toLowerCase()}`)
    .then((res) => res.json())
    .then((data) => {
      creature = data;

    crName.innerText = creature['name'];
    crID.innerText = "#" + creature['id'];
    crWt.innerText = creature['weight'];
    crHt.innerText = creature['height'];
    crTypes.innerText = creature['types'].map(type=>type['name'].toUpperCase()).join(", ");
    crHP.innerText = creature['stats'].filter(stat=>stat.name==='hp')[0]['base_stat'];
    crAtk.innerText = creature['stats'].filter(stat=>stat.name==='attack')[0]['base_stat'];
    crDef.innerText = creature['stats'].filter(stat=>stat.name==='defense')[0]['base_stat'];
    crSpAtk.innerText = creature['stats'].filter(stat=>stat.name==='special-attack')[0]['base_stat'];
    crSpDef.innerText = creature['stats'].filter(stat=>stat.name==='special-defense')[0]['base_stat'];
    crSpd.innerText = creature['stats'].filter(stat=>stat.name==='speed')[0]['base_stat'];
    })
    .catch((err) => {
      console.log(err);
    });

  }else{
    alert("Creature not found")
  }
})

/* file: styles.css */
div{
  margin: 0;
  padding: 0;
}

tr:nth-child(odd){
  background: lightgrey
}

td{
  min-width: 20vw
}

table{
  border: black 1px solid;
  margin: 5px 0
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/141.0.0.0 Safari/537.36

Challenge Information:

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

2

The errors seem to be pointing to your handling of creature type(s). Please review User Stories #16 and #18. It looks like you overlooked an instruction.

3

Thank you. I missed the requirement that it’s asking for the type(s) to be added as individual elements.