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

Chinese 中文 JavaScript
1

告诉我们发生了什么：

哪里的问题？有点不明白，为啥一直满足不了第20个条件

#search-input

element contains a valid creature ID and the

#search-button

element is clicked, the UI should be filled with the correct data.

到目前为止你的代码

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>rpg-creature-search-app</title>
    <!-- <link href="https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&display=swap" rel="stylesheet"> -->
    <link rel="stylesheet" href="./styles.css">
</head>

<body>
    <div class="container">
      <header class="top-container">
        <h1>RPG Creature Search App</h1>
        <div class="input-button">
          <label for="search-input">Search for Creature Name or ID:</label>
          <input type="text" id="search-input" required>
          <button id="search-button">search</button>
        </div>
      </header>
      <main class="middle-container">
        <div class="creature-msg">
          <h4 id="creature-name"></h4>
          <p id="creature-id"></p>
          <p id="weight"></p>
          <p id="height"></p>
          <p id="types">
          </p>
        </div>
      </main>
      <section class="bottom-container">
        <table>
          <thead>
            <tr>
              <th>Base</th>
              <th>Stats</th>
            </tr>
          </thead>
          <tbody>
            <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>
          </tbody>
        </table>
      </section>
    </div>
    <script src="./script.js"></script>
</body>

</html>


/* file: styles.css */
:root {
  --primary: #1A1A1A;    /* 炭黑色 */
  --secondary: #8B0000;  /* 血红色 */
  --bg: #2C3E50;        /* 深灰色 */
  --text: #ECF0F1;      /* 灰白色 */
  --accent: #B7410E;    /* 铁锈色 */
}

body {
  font-family: 'Cinzel', serif;
  background-color: var(--bg);
  color: var(--text);
  padding: 20px;
  background-image: url('dungeon-texture.jpg');
}

.container {
  max-width: 800px;
  margin: 0 auto;
  background-color: rgba(26, 26, 26, 0.8);
  padding: 30px;
  border: 8px solid #444;
  border-image: linear-gradient(to bottom, #666, #222) 1;
  box-shadow: 0 0 20px rgba(139, 0, 0, 0.5);
  position: relative;
  overflow: hidden;
}

.container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(to right, transparent, var(--secondary), transparent);
}

h1 {
  color: var(--secondary);
  text-align: center;
  font-size: 2.5rem;
  text-shadow: 0 0 10px rgba(139, 0, 0, 0.7);
  margin-bottom: 30px;
  letter-spacing: 2px;
}

.input-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  margin-bottom: 30px;
}

input[type="text"] {
  padding: 12px;
  width: 70%;
  border: 2px solid var(--secondary);
  border-radius: 0;
  font-family: inherit;
  font-size: 1.1rem;
  background-color: rgba(0,0,0,0.5);
  color: white;
}

button {
  padding: 12px 25px;
  background: linear-gradient(to bottom, #333, #000);
  border: 1px solid var(--secondary);
  color: var(--text);
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s;
  text-transform: uppercase;
  letter-spacing: 1px;
}

button:hover {
  background: linear-gradient(to bottom, #444, #111);
  box-shadow: 0 0 15px rgba(139, 0, 0, 0.7);
}

table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  background: rgba(0,0,0,0.3);
}

th, td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid var(--secondary);
}

th {
  background-color: rgba(139, 0, 0, 0.3);
  color: white;
  font-weight: bold;
}

td {
  font-family: 'Courier New', monospace;
}

.creature-msg {
  background: rgba(0,0,0,0.3);
  padding: 20px;
  margin-bottom: 20px;
  border-left: 3px solid var(--secondary);
  position: relative;
}

.creature-msg::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--secondary), transparent);
}

#creature-name {
  font-size: 1.8rem;
  color: var(--secondary);
  margin-bottom: 10px;
  text-shadow: 0 0 5px rgba(139, 0, 0, 0.7);
}

.creature-msg p {
  margin-left: 10px;
}


/* file: script.js */
// 获取所需元素
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 weight = document.getElementById('weight')
const height = document.getElementById('height')
const types = 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')

// 提供RPG生物的数据
const creatures = [
  {
    name:'PYROLYNX',
    id:'1',
    weight:42,
    height:32,
    hp:65,
    attack:80,
    defense:50,
    specialAttack:90,
    specialDefense:55,
    speed:100,
    types:['FIRE']
  },
  {
    name:'AQUOROC',
    id:'2',
    weight:220,
    height:53,
    hp:85,
    attack:90,
    defense:120,
    specialAttack:60,
    specialDefense:70,
    speed:40,
    types:['WATER','ROCK']
  },
]

// 定义函数
const main = (creature) => {
  // 重置creature-msg内容
  creatureName.innerHTML = ''
  creatureId.innerHTML = ''
  weight.innerHTML = ''
  height.innerHTML = ''
  types.innerHTML = ''

  creatureName.innerHTML = creature.name
  creatureId.innerHTML = `#${creature.id}`
  weight.innerHTML = `Weight: ${creature.weight}`
  height.innerHTML = `Height: ${creature.height}`
  Array.from({ length: creature.types.length }).forEach((_, i) => {
  types.insertAdjacentHTML(
    'beforeend',
    `<div class="type">${creature.types[i]}</div>` 
  )
  })
}
// main(creatures[0])

const table = (creature) => {
  // 重置表格数据
  hp.innerHTML = ''
  attack.innerHTML = ''
  defense.innerHTML = ''
  specialAttack.innerHTML = ''
  specialDefense.innerHTML = ''
  speed.innerHTML = ''
  
  hp.innerHTML = creature.hp
  attack.innerHTML = creature.attack
  defense.innerHTML = creature.defense
  specialAttack.innerHTML = creature.specialAttack
  specialDefense.innerHTML = creature.specialDefense
  speed.innerHTML = creature.speed
}

// table(creatures[0])

// 给searchBtn添加事件监听
searchBtn.addEventListener('click',()=>{
  const nameOrId = searchInput.value.trim()
  if (!nameOrId) {
    alert('Please enter a creature name or ID')
    return
  }

  const creature = creatures.find(item => 
    item.name.toLowerCase() === nameOrId.toLowerCase() || 
    item.id === nameOrId || 
    item.id === nameOrId.replace('#', '') 
  );

  if(creature){
    main(creature)
    table(creature)
  } else {
    alert('Creature not found')
  }
})

你的浏览器信息：

用户代理是： Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/137.0.0.0 Safari/537.36

挑战信息：

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

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

3

The article is a bit abstract, is it the problem of the RPG Biology Array Object I edited?

4

you should always use the API, you should not hardcode the creatures in your code

5

OK, I see. Thank you！