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

JavaScript
1

Tell us what’s happening:

i have tried everything and i have cleared all the tests but i am not able to clear the last 20th test , help me correct my code.

Your code so far

<!-- file: index.html -->
<!-- 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: styles.css */


/* file: script.js */
/* 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;

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/137.0.0.0 Safari/537.36

Challenge Information:

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

2

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

specifically you are using this function call, you should get the data from there

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