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

JavaScript
1

Tell us what’s happening:

for some reason the last test is failing . please help .

Your code so far

<!-- file: index.html -->
<input id="search-input" required/>
<button id="search-button"></button>
<p id="creature-name"></p>
<p id="creature-id"></p>
<p id="weight"></p>
<p id="height"></p>
<p id="types"></p>
<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>
<button id="g"> CLEAR </button>
<script src="script.js"></script>





/* file: script.js */
const rpg = document.getElementById("search-input");
const btn = document.getElementById("search-button");
const n = document.getElementById("creature-name");
const id = document.getElementById("creature-id");
const w = document.getElementById("weight");
const h = document.getElementById("height");
const t = document.getElementById("types");
const hp = document.getElementById("hp");
const att = document.getElementById("attack");
const def = document.getElementById("defense");
const sa = document.getElementById("special-attack");
const sd = document.getElementById("special-defense");
const speed = document.getElementById("speed");
const clearBtn = document.getElementById("g");

function clearResults() {
  // Clear all result fields
  n.innerText = "";
  id.innerText = "";
  w.innerText = "";
  h.innerText = "";
  t.innerHTML = ""; // Clear types container
  hp.innerText = "";
  att.innerText = "";
  def.innerText = "";
  sa.innerText = "";
  sd.innerText = "";
  speed.innerText = "";
}

function search() {
  clearResults();
  
  if (rpg.value === "Pyrolynx" || rpg.value === "1" || rpg.value === "#1") {
    n.innerText = "PYROLYNX";
    id.innerText = "1";
    w.innerText = "Weight: 42";
    h.innerText = "Height: 32";
    hp.innerText = "65";
    att.innerText = "80";
    def.innerText = "50";
    sa.innerText = "90";
    sd.innerText = "55";
    speed.innerText = "100";
    t.innerHTML = `<p>FIRE</p>`;
    return;
  } else if (rpg.value === "Aquoroc" || rpg.value === "2" || rpg.value === "#2") {
    n.innerText = "AQUOROC";
    id.innerText = "2";
    w.innerText = "Weight: 220";
    h.innerText = "Height: 53";
    hp.innerText = "85";
    att.innerText = "90";
    def.innerText = "120";
    sa.innerText = "60";
    sd.innerText = "70";
    speed.innerText = "40";
    t.innerHTML = `<p>WATER</p><p>ROCK</p>`;
    return;
  }
  else {
    alert("Creature not found")
  }
    
    fetch(`https://rpg-creature-api.freecodecamp.rocks/api/creature/${creatureId}`) // Replace with your API endpoint
    .then(response => response.json())
    .then(data => {
      document.getElementById('creature-name').textContent = data.name;
      document.getElementById('creature-description').textContent = data.description;
    })
    .catch(error => {
      document.getElementById('error-message').textContent = "Error fetching creature data.";
    });
}

// Add event listeners
clearBtn.addEventListener("click", clearResults);
btn.onclick = search;

/* file: styles.css */

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.0 Safari/605.1.15

Challenge Information:

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

2

The last step will be looking for a different creature than PYROLYNX or AQUAROC, please make an app usable for any input.

It looks like you have hard-coded conditionals or variables that check for specific expected values. That is not solving this problem in the general case. Imagine if you were given different input values. Would your code be able to solve those problems?

To find out more about what hard-coding is or about why it is not suitable for solving coding questions, please read this post: Hard-coding For Beginners

Let us know if you have a question about how to make your code more flexible.

1 Like
3

Thank you . I was able to solve it after a really long time