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

JavaScript
1

Tell us what’s happening:

I don’t understand the error i’m receiving.

[SyntaxError: Unexpected token ‘<’, "<!DOCTYPE "… is not valid JSON]

Your code so far

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>
      RPG Creature Search App</title>
    <link rel="stylesheet" href="styles.css" />
</head>
  <body>
    <div class="container">
      <p class="input-p">Seacrh for Creature Name or ID:</p>
      <div class="input-button-container">
        <input type="text" id="search-input" required/>
        <button id="search-button">Search</button>
      </div>
      <div class="creature">
        <h3> 
          <span id="creature-name"></span> 
          <span id="creature-id"></span>
        </h3>
        <p>
          <span id="weight"></span>
          <span id="height"></span>
        </p>
        <p id="types"></p>
        <p id="description"></p>
      </div>
      <div class="stats-container">
        <div class="div-design">Base</div>
        <div class="div-design">Stats</div>

        <div class="div-design" id="hp">HP:</div>
        <div class="div-design" id="hp-stat"></div>

        <div class="div-design" id="attack">Attack:</div>
        <div class="div-design" id="attack-stat"></div>

        <div class="div-design" id="defense">Defense:</div>
        <div class="div-design" id="defense-stat"></div>

        <div class="div-design" id="special-attack">Sp. Attack:</div>
        <div class="div-design" id="special-attack-stat"></div>

        <div class="div-design" id="special-defense">Sp. Defense:</div>
        <div class="div-design" id="special-defense-stat"></div>

        <div class="div-design" id="speed">Speed:</div>
        <div class="div-design" id="speed-stat"></div>
      </div>
    </div>
    <script src="script.js"></script>
  </body>
</html><!-- file: index.html -->


const searchInput = document.getElementById('search-input');
const searchBtn = document.getElementById('search-button');
const creatureName = document.getElementById('creature-name');
const creatureId = document.getElementById('creature-id');
const creatureWeight = document.getElementById('weight');
const creatureHeight = document.getElementById('height');
const creatureTypes = document.getElementById('types');
const hp = document.getElementById('hp');
const attack = document.getElementById('attack');
const defense = document.getElementById('defense');
const specialAttack = document.getElementById('special-attack');
const specialDefense = document.getElementById('special-defense');
const speed = document.getElementById('speed');
let creatureDescription = document.querySelector('.creature')


const fetchData = async () => {
  try {
    const creatureNameOrId = searchInput.value;
    const res = await fetch(`https://rpg-creature-api.freecodecamp.rocks/api/creature/${creatureNameOrId}`);
    const data = await res.json();
    getCreatureInfo(data);
  } catch (err) {
    alert("Creature not found");
    console.log(err);
  }
};

fetchData();

const getCreatureInfo = (data) => {
  const { name, id, weight, height , special, stats } = data;

  creatureName.textContent = name;
}

searchBtn.addEventListener('click', (e) => {
  e.preventDefault();
  fetchData();
})/* file: script.js */


/* file: styles.css */

Your browser information:

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

Challenge Information:

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

2

This error suggest some attempt to parse to JSON did not success. Where that might be happening?