mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-05-13 06:04:13 -04:00
179 lines
4.4 KiB
Markdown
179 lines
4.4 KiB
Markdown
---
|
|
id: 62a23c1d505bfa13747c8a9b
|
|
title: Schritt 17
|
|
challengeType: 0
|
|
dashedName: step-17
|
|
---
|
|
|
|
# --description--
|
|
|
|
Wrap the numbers `0`, `100`, and `50` in `span` elements, and wrap those new `span` elements in `strong` elements. Gib dann deinen neuen `span`-Elementen `id`-Werte von `xpText`, `healthText` bzw. `goldText`.
|
|
|
|
# --hints--
|
|
|
|
Du solltest ein `strong`-Element in dein erstes `.stat`-Element hinzufügen.
|
|
|
|
```js
|
|
const stat = document.querySelectorAll('.stat')[0];
|
|
const strong = stat?.querySelector('strong');
|
|
assert.exists(strong);
|
|
```
|
|
|
|
Dein erstes neues `strong`-Element sollte ein `span`-Element haben.
|
|
|
|
```js
|
|
const stat = document.querySelectorAll('.stat')[0];
|
|
const strong = stat?.querySelector('strong');
|
|
const span = strong?.querySelector('span');
|
|
assert.exists(span);
|
|
```
|
|
|
|
Dein erstes eingebettetes `span`-Element sollte die `id` von `xpText` haben.
|
|
|
|
```js
|
|
const stat = document.querySelectorAll('.stat')[0];
|
|
const strong = stat?.querySelector('strong');
|
|
const span = strong?.querySelector('span');
|
|
assert.equal(span?.id, 'xpText');
|
|
```
|
|
|
|
Your first `span` element should be wrapped around the text `0`.
|
|
|
|
```js
|
|
const stat = document.querySelectorAll('.stat')[0];
|
|
const strong = stat?.querySelector('strong');
|
|
const span = strong?.querySelector('span');
|
|
assert.equal(span.innerText, '0');
|
|
```
|
|
|
|
The text of your first `.stat` element should still be `XP: 0`.
|
|
|
|
```js
|
|
const stat = document.querySelectorAll('.stat')[0];
|
|
assert.equal(stat.innerText.trimEnd(), 'XP: 0');
|
|
```
|
|
|
|
Du solltest ein `strong`-Element in deinem zweiten `.stat`-Element hinzufügen.
|
|
|
|
```js
|
|
const stat = document.querySelectorAll('.stat')[1];
|
|
const strong = stat?.querySelector('strong');
|
|
assert.exists(strong);
|
|
```
|
|
|
|
Dein zweites neues `strong`-Element sollte ein `span`-Element haben.
|
|
|
|
```js
|
|
const stat = document.querySelectorAll('.stat')[1];
|
|
const strong = stat?.querySelector('strong');
|
|
const span = strong?.querySelector('span');
|
|
assert.exists(span);
|
|
```
|
|
|
|
Your second nested `span` element should have the `id` of `healthText`.
|
|
|
|
```js
|
|
const stat = document.querySelectorAll('.stat')[1];
|
|
const strong = stat?.querySelector('strong');
|
|
const span = strong?.querySelector('span');
|
|
assert.equal(span?.id, 'healthText');
|
|
```
|
|
|
|
Your second `span` element should be wrapped around the text `100`.
|
|
|
|
```js
|
|
const stat = document.querySelectorAll('.stat')[1];
|
|
const strong = stat?.querySelector('strong');
|
|
const span = strong?.querySelector('span');
|
|
assert.equal(span.innerText, '100');
|
|
```
|
|
|
|
The text of your second `.stat` element should still be `Health: 100`.
|
|
|
|
```js
|
|
const stat = document.querySelectorAll('.stat')[1];
|
|
assert.equal(stat.innerText.trimEnd(), 'Health: 100');
|
|
```
|
|
|
|
You should add a `strong` element in your third `.stat` element.
|
|
|
|
```js
|
|
const stat = document.querySelectorAll('.stat')[2];
|
|
const strong = stat?.querySelector('strong');
|
|
assert.exists(strong);
|
|
```
|
|
|
|
Dein neues drittes `strong`-Element sollte ein `span`-Element haben.
|
|
|
|
```js
|
|
const stat = document.querySelectorAll('.stat')[2];
|
|
const strong = stat?.querySelector('strong');
|
|
const span = strong?.querySelector('span');
|
|
assert.exists(span);
|
|
```
|
|
|
|
Your third nested `span` element should have the `id` of `goldText`.
|
|
|
|
```js
|
|
const stat = document.querySelectorAll('.stat')[2];
|
|
const strong = stat?.querySelector('strong');
|
|
const span = strong?.querySelector('span');
|
|
assert.equal(span?.id, 'goldText');
|
|
```
|
|
|
|
Your third `span` element should be wrapped around the text `50`.
|
|
|
|
```js
|
|
const stat = document.querySelectorAll('.stat')[2];
|
|
const strong = stat?.querySelector('strong');
|
|
const span = strong?.querySelector('span');
|
|
assert.equal(span.innerText, '50');
|
|
```
|
|
|
|
The text of your third `.stat` element should still be `Gold: 50`.
|
|
|
|
```js
|
|
const stat = document.querySelectorAll('.stat')[2];
|
|
assert.equal(stat.innerText.trimEnd(), 'Gold: 50');
|
|
```
|
|
|
|
# --seed--
|
|
|
|
## --seed-contents--
|
|
|
|
```html
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<link rel="stylesheet" href="./styles.css">
|
|
<title>RPG - Dragon Repeller</title>
|
|
<script src="./script.js"></script>
|
|
</head>
|
|
<body>
|
|
<div id="game">
|
|
<div id="stats">
|
|
--fcc-editable-region--
|
|
<span class="stat">XP: 0</span>
|
|
<span class="stat">Health: 100</span>
|
|
<span class="stat">Gold: 50</span>
|
|
--fcc-editable-region--
|
|
</div>
|
|
<div id="controls"></div>
|
|
<div id="monsterStats"></div>
|
|
<div id="text"></div>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
```
|
|
|
|
```js
|
|
let xp = 0;
|
|
let health = 100;
|
|
let gold = 50;
|
|
let currentWeapon = 0;
|
|
let fighting;
|
|
let monsterHealth;
|
|
let inventory = ["stick"];
|
|
```
|