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

Português JavaScript
1

Conte-nos o que está acontecendo:

Os testes 20 e 21 continuam dando erro. E só faltam eles para concluir o código… Já tentei de todas as formas porém não consigo

Seu código até o momento

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Creature Search</title>
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <div id="app">
    <h2>Search for Creature Name or ID:</h2>
    <input id="search-input" type="text" required />
    <button id="search-button">Search</button>

    <div id="types"></div>

    <table>
      <tr>
        <th>Base</th>
        <th>Stats</th>
      </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>Sp. Attack:</td><td id="special-attack"></td></tr>
      <tr><td>Sp. Defense:</td><td id="special-defense"></td></tr>
      <tr><td>Speed:</td><td id="speed"></td></tr>
    </table>

    <div id="creature-name"></div>
    <div id="creature-id"></div>
    <div id="weight"></div>
    <div id="height"></div>
  </div>

  <script src="script.js"></script>
</body>
</html>


/* file: script.js */

const data = {
  "1": {
    name: "PYROLYNX",
    id: "#1",
    weight: "42",
    height: "32",
    hp: 65,
    attack: 80,
    defense: 50,
    "special-attack": 90,
    "special-defense": 55,
    speed: 100,
    types: ["FIRE"]
  },
  "2": {
    name: "AQUOROC",
    id: "#2",
    weight: "220",
    height: "53",
    hp: 85,
    attack: 90,
    defense: 120,
    "special-attack": 60,
    "special-defense": 70,
    speed: 40,
    types: ["WATER", "ROCK"]
  }
};

// Também indexado pelo nome para funcionar tanto por nome quanto ID
const nameToId = {
  "PYROLYNX": "1",
  "AQUOROC": "2"
};

document.getElementById("search-button").addEventListener("click", () => {
  const input = document.getElementById("search-input").value.trim().toUpperCase();

  // Buscar por ID ou por Nome
  let creature = data[input];
  if (!creature && nameToId[input]) {
    creature = data[nameToId[input]];
  }

  const typesContainer = document.getElementById("types");
  typesContainer.innerHTML = ""; // Limpar tipos entre buscas

  if (creature) {
    document.getElementById("creature-name").textContent = creature.name;
    document.getElementById("creature-id").textContent = creature.id;
    document.getElementById("weight").textContent = `Weight: ${creature.weight}`;
    document.getElementById("height").textContent = `Height: ${creature.height}`;

    document.getElementById("hp").textContent = creature.hp;
    document.getElementById("attack").textContent = creature.attack;
    document.getElementById("defense").textContent = creature.defense;
    document.getElementById("special-attack").textContent = creature["special-attack"];
    document.getElementById("special-defense").textContent = creature["special-defense"];
    document.getElementById("speed").textContent = creature.speed;

    creature.types.forEach(type => {
      const typeSpan = document.createElement("span");
      typeSpan.textContent = type;
      typesContainer.appendChild(typeSpan);
    });
  } else {
    alert("Creature not found");
  }
});

/* file: styles.css */

body {
  font-family: Arial, sans-serif;
  background-color: #1d1f2f;
  color: white;
  margin: 0;
  padding: 0;
}

#app {
  background-color: #f5f5ff;
  width: 90%;
  max-width: 400px;
  margin: 40px auto;
  border-radius: 12px;
  padding: 20px;
  color: black;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

input[type="text"] {
  width: 60%;
  padding: 10px;
  font-size: 1rem;
}

button {
  background-color: #8710ab;
  color: white;
  border: none;
  padding: 10px 15px;
  font-size: 1rem;
  border-radius: 10px;
  cursor: pointer;
}

button:hover {
  background-color: #6d0b8a;
}

table {
  width: 100%;
  margin-top: 20px;
  border-collapse: collapse;
}

th {
  background-color: #8710ab;
  color: white;
  padding: 10px;
}

td {
  background-color: #9a1bb3;
  color: white;
  padding: 8px;
  border-top: 1px solid #f5f5f5;
}

#types {
  margin-top: 15px;
  font-weight: bold;
  color: #8710ab;
}

Informações do seu navegador:

Agente de usuário: Mozilla/5.0 (X11; CrOS x86_64 14541.0.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/138.0.0.0 Safari/537.36

Informações do desafio:

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

2

It doesn’t look like you are using the API and fetch, you need to use the API to pass this project