mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-05-09 12:00:37 -04:00
7b461e80bd
* chore: remove existing steps - clean slate * chore: rename step file * feat: start rewrite * feat: progress * feat: continuing rewrite * feat: almost done with new steps (: * feat: complete step rewrite * Step 1 tests without `link` testing * chore: apply sem's review suggestions Co-authored-by: Sem Bauke <46919888+Sembauke@users.noreply.github.com> * chore: missed one Co-authored-by: Sem Bauke <46919888+Sembauke@users.noreply.github.com> * chore: missed one Co-authored-by: Sem Bauke <46919888+Sembauke@users.noreply.github.com> * Step 2 tests and hints * step 3 stats hints and tests * cleared the grammers issues, I added. * removed type="text/css" from the seed code * Tests and hints for step 4 * removed tests from step 4 because they aren't working * feat: starting the tests * feat: add another step * feat: more tests * feat: tests through step 80 * feat: tests through step 117 * feat: to step 148 * feat: finish step tests * feat: apply Jessica's suggestions * chore: apply muhammed's review Co-authored-by: Muhammed Mustafa <muhammed@freecodecamp.org> * chore: fix up tests * chore: thought I got all of them * chore: apply jessica's review suggestions * chore: apply suggestions from code review Co-authored-by: gikf <60067306+gikf@users.noreply.github.com> Co-authored-by: Muhammed Mustafa <MuhammedElruby@gmail.com> * chore: apply yoko's reviews * fix: use text content * chore: apply tom's review * fix: forgot to commit meta * fix: broken tests * feat: apply dario's review Co-authored-by: Muhammed Mustafa <MuhammedElruby@gmail.com> Co-authored-by: Sem Bauke <46919888+Sembauke@users.noreply.github.com> Co-authored-by: Muhammed Mustafa <muhammed@freecodecamp.org> Co-authored-by: gikf <60067306+gikf@users.noreply.github.com> Co-authored-by: Tom <20648924+moT01@users.noreply.github.com>
4.2 KiB
4.2 KiB
id, title, challengeType, dashedName
| id | title | challengeType | dashedName |
|---|---|---|---|
| 62a23c1d505bfa13747c8a9b | Step 4 | 0 | step-4 |
--description--
Wrap the numbers 0, 100, and 50 in span elements, and wrap those new span elements in strong elements. Then give your new span elements id values of xpText, healthText, and goldText, respectively.
--hints--
You should add a strong element in your first .stat element.
const stat = document.querySelectorAll('.stat')[0];
const strong = stat?.querySelector('strong');
assert.exists(strong);
Your first new strong element should have a span element.
const stat = document.querySelectorAll('.stat')[0];
const strong = stat?.querySelector('strong');
const span = strong?.querySelector('span');
assert.exists(span);
Your first nested span element should have the id of xpText.
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.
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.
const stat = document.querySelectorAll('.stat')[0];
assert.equal(stat.innerText, 'XP: 0');
You should add a strong element in your second .stat element.
const stat = document.querySelectorAll('.stat')[1];
const strong = stat?.querySelector('strong');
assert.exists(strong);
Your second new strong element should have a span element.
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.
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.
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.
const stat = document.querySelectorAll('.stat')[1];
assert.equal(stat.innerText, 'Health: 100');
You should add a strong element in your third .stat element.
const stat = document.querySelectorAll('.stat')[2];
const strong = stat?.querySelector('strong');
assert.exists(strong);
Your third new strong element should have a span element.
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.
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.
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.
const stat = document.querySelectorAll('.stat')[2];
assert.equal(stat.innerText, 'Gold: 50');
--seed--
--seed-contents--
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="./styles.css">
<title>RPG - Dragon Repeller</title>
</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>