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

JavaScript
1

Tell us what’s happening:

Hello everyone!
Tests 14-21 are failing no matter what I try. (They also fail when removing the scroll buttons I’ve added.)

I’ve tried a few things already but nothing seems to help.
I’ve tried out code from other help posts in the forum were people are failing fewer tests but for me 14-21 always fail regardless.

Any inputs are appreciated!
Cheers.

Your code so far

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale = 1.0">
  <link rel="stylesheet" href="./styles.css">
  <title>RPG Creature Search App</title>
</head>

<body>
  <h1>Creature Search</h1>
  <div id="main-container">

    <form id="search-form">
      <label for="search-input">Search by Creature Name or ID</label>
      <input type="text" id="search-input" required>
      <button id="search-button" type="submit">Search</button>
    </form>
    <div id="desc-container">
      <div id="name-div">
        <span id="creature-name"> </span><span id="creature-id"></span>
      </div>
      <div id="weight-div">
        <p class="secondary">Weight</p>
        <p class="secondary-stat" id="weight"></p>
      </div>
      <div id="height-div">
        <p class="secondary">Height</p>
        <p class="secondary-stat" id="height"></p>
      </div>
      <div id="special-div">
        <p class="secondary" id="special-name"></p>
        <p class="secondary-stat" id="special-desc"></p>
      </div>
    </div>
    <div id="types">
    </div>
    <div id="stats-container">
      <p>Base Stats</p>
      <table>
        <tr>
          <th>HP</th>
          <td id="hp"></td>
        </tr>
        <tr>
          <th>Attack</th>
          <td id="attack"></td>
        </tr>
        <tr>
          <th>Defense</th>
          <td id="defense"></td>
        </tr>
        <tr>
          <th>Special-Attack</th>
          <td id="special-attack"></td>
        </tr>
        <tr>
          <th>Special-Defense</th>
          <td id="special-defense"></td>
        </tr>
        <tr>
          <th>Speed</th>
          <td id="speed"></td>
        </tr>
      </table>
    </div>
    <div id="scroll-container">
      <button type="button" class="scroll-btn" id="prev-btn">Previous<span class="scroll-id"></span></button>
      <button type="button" class="scroll-btn" id="next-btn">Next<span class="scroll-id"></span></button>
    </div>
  </div>
  <script src="./script.js"></script>
</body>

</html>

/* file: styles.css */
*,
*:before,
*:after{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
:root{
  font-family: sans-serif;
  font-size: 20px;
  color: black;
  --background-grey: rgb(240, 240, 240);
  --main-color: white;
  --secondary-color: #a4a4a4;
  --desc-blue: #30a7d7;
  --id-grey: rgb(215, 215, 203);

  --grass: #9bcc50;
  --fire: #fd7d24;
  --water: #4592c4;
  --bug: #729f3f;
  --rock: #a38c21;
  --electric: #eed535;
  --dragon: linear-gradient(180deg, #53a4cf 50%, #f16e57 50%);
  --poison: #b97fc9;
  --fairy: #fdb9e9;
  --ice: #51c4e7;
  --ground: linear-gradient(180deg, #f7de3f 50%, #ab9842 50%);
  --flying: linear-gradient(180deg, #3dc7ef 50%, #bdb9b8 50%);
  --psychic: #f366b9;
  --dark: #707070;
  --steel: #9eb7b8;
  --ghost: #7b62a3;
}

body{
  min-height: 100vh;
  background: repeating-linear-gradient(
    310deg,
    var(--background-grey) 1%,
    white 1% 2%,
    var(--background-grey) 4%,
    white 4% 6%,
    var(--background-grey) 10%,
    white 10% 12%,
    var(--background-grey) 17%
  );  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
button{
  border-radius: 5px;
  border: none;
  background-color: var(--secondary-color);
  transition: background-color 0.4s;
  cursor: pointer;
}
button:hover{
  background-color: var(--desc-blue);
}


#main-container{
  width: 450px;
  background-color: var(--main-color);
  border-radius: 30px;
  box-shadow: 5px 5px 10px grey;
}

#search-form{
  text-align: center;
  margin: 1rem 1rem 0.5rem;
}
#search-button{
  width: 100px;
  font-size: 0.8rem;
  padding: 7px;
}
#search-input{
  text-align: center;
  font-size: 0.8rem;
  border-radius: 5px;
  border: 2px solid var(--secondary-color);
  padding: 5px;
  margin-top: 0.5rem;
}
#search-input:focus{
  outline: none;
  border: 2px solid var(--desc-blue);
}

#desc-container{
  background: var(--desc-blue);
  border-radius: 10px;
  padding: 0.5rem 1rem 0.5rem 1rem;
  margin: 0.5rem 1rem;
  display: grid;
  gap: 1rem;
  grid-template-areas: 
  "name name"
  "weight special"
  "height special";
}
#name-div{
  grid-area: name;
  text-align: center;
}
#weight-div{
  grid-area: weight;
}
#height-div{
  grid-area: height;
}
#special-div{
  grid-area: special;
}
.secondary{
  color: white;
  font-size: 0.8rem;
}
.secondary-stat{
  margin-top: 0.3rem;
}
#creature-name{
  font-size: 1.5rem;
  color: white;
}
#creature-id{
  margin-left: 0.5rem;
  font-size: 1.5rem;
  color: var(--id-grey);
}

#types{
  display: flex;
  justify-content: center;
  gap: 1rem;
}
.type{
  background: darkgrey;
  font-size: 0.8rem;
  width: 130px;
  padding: 5px;
  text-align: center;
  border-radius: 5px;
}
#stats-container{
  border-radius: 10px;
  text-align: center;
  padding: 0.5rem;
  font-size: 0.9rem;
  margin: 0.5rem 1rem;
}
#stats-container table{
  width: 100%;
}
#stats-container th, 
#stats-container td{
  background-color: white;
  border-radius: 5px;
  width: 40%;
  padding: 2px;
  border: 4px solid var(--secondary-color);
}

#scroll-container{
  display: flex;
  justify-content: space-between;
  gap: 4px;
}
.scroll-btn{
  width: calc(50% - 2px);
  height: 3rem;
  font-size: 1rem;
}

#prev-btn{
  border-radius: 0 0 0 20px;
}
#next-btn{
  border-radius: 0 0 20px 0;
}
.scroll-id{
  color: var(--id-grey);
}



/* file: script.js */
const creaturesListUrl = "https://rpg-creature-api.freecodecamp.rocks/api/creatures";
const creaturePrefixUrl = "https://rpg-creature-api.freecodecamp.rocks/api/creature/";

const searchInput = document.getElementById("search-input");
const searchForm = document.getElementById("search-form");
const prevBtn = document.getElementById("prev-btn");
const nextBtn = document.getElementById("next-btn");

const nameEl = document.getElementById("creature-name");
const idEl = document.getElementById("creature-id");
const weightEl = document.getElementById("weight");
const heightEl = document.getElementById("height");
const specialName = document.getElementById("special-name");
const specialDesc = document.getElementById("special-desc");

const typesEl = document.getElementById("types");

const hpEl = document.getElementById("hp");
const attEl = document.getElementById("attack");
const defEl = document.getElementById("defense");
const speAttEl = document.getElementById("special-attack");
const speDefEl = document.getElementById("special-defense");
const speedEl = document.getElementById("speed");

let allMonsters = [];
let currentMonId = 1;

function resetFields() {
  nameEl.textContent = "";
  idEl.textContent = ``;
  weightEl.textContent = "";
  heightEl.textContent = "";
  specialName.textContent = "";
  specialDesc.textContent = "";

  hpEl.textContent = "";
  attEl.textContent = "";
  defEl.textContent = "";
  speAttEl.textContent = "";
  speDefEl.textContent = "";
  speedEl.textContent = "";
  typesEl.innerHTML = ``;
}

function fillDataFields(monsterData){
  //populate monster data elements
    nameEl.textContent = monsterData.name.toUpperCase();
    idEl.textContent = `#${monsterData.id}`;
    weightEl.textContent = monsterData.weight;
    heightEl.textContent = monsterData.height;
    specialName.textContent = monsterData.special.name;
    specialDesc.textContent = monsterData.special.description;

    hpEl.textContent = monsterData.stats[0].base_stat;
    attEl.textContent = monsterData.stats[1].base_stat;
    defEl.textContent = monsterData.stats[2].base_stat;
    speAttEl.textContent = monsterData.stats[3].base_stat;
    speDefEl.textContent = monsterData.stats[4].base_stat;
    speedEl.textContent = monsterData.stats[5].base_stat;

    const monTypes = monsterData.types;
    typesEl.innerHTML = "";
    for (let type of monTypes) {
      typesEl.innerHTML += `<span 
    class="type ${type.name}"
    style="background: var(--${type.name});">${type.name.toUpperCase()}</span>`;
    }
}

async function getMonsterList() {
  try {
    const response = await fetch(creaturesListUrl);
    const creatureListData = await response.json();
    allMonsters = creatureListData;
  }
  catch (error) {
    console.error(error);
  }
}

async function getMonster(monsterId, search) {
  //Scroll Buttons circle to highest/lowest id when "out of bounds"
  if (!search) {
    if (monsterId === 21) {
      monsterId = 1;
    }
    else if (monsterId === 0) {
      monsterId = 20;
    }
  }

  try {
    const response = await fetch(`${creaturePrefixUrl}${monsterId}`);
    if(!response.ok){
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    const monsterObj = await response.json()

    updateScrollButtons(monsterObj.id);
    currentMonId = monsterObj.id;
    fillDataFields(monsterObj);
  }
  catch(error) {
    resetFields();
    console.error(error);
    alert("Creature not found");
  }
}



function updateScrollButtons(currentId) {
  const total = allMonsters.length;

  const prevIndex = (currentId - 2 + total) % total;
  const nextIndex = currentId % total;

  prevBtn.innerHTML = `${allMonsters[prevIndex].name} <span class="scroll-id">#${allMonsters[prevIndex].id}</span>`;
  nextBtn.innerHTML = `${allMonsters[nextIndex].name} <span class="scroll-id">#${allMonsters[nextIndex].id}</span>`;
}

getMonsterList();

searchForm.addEventListener('submit', event => {
  event.preventDefault();
  getMonster(searchInput.value.toLowerCase(),true);
});

prevBtn.addEventListener("click", () => {
  getMonster(currentMonId - 1, false);
})

nextBtn.addEventListener("click", () => {
  getMonster(currentMonId + 1, false);
})

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64; rv:143.0) Gecko/20100101 Firefox/143.0

Challenge Information:

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

2

Hey Guys,
I’ve installed Chromium to retry some tests in the Dice Game that failed when entering seemingly correct code. While I was at it, I went and retried the tests for this Project as well and they worked!
There seems to be an issue with Firefox.

So if your tests finish almost immediately on Firefox and fail for mysteries reasons it might be a good idea to try in a different browser. :man_shrugging: