gitadmin/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-05-28 18:26:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(curriculum): update tests to better catch common errors (#55605)

Browse Source 
Co-authored-by: Naomi the Technomancer <accounts+github@nhcarrigan.com>
This commit is contained in:
Lasse Jørgensen
2024-07-31 17:18:20 +02:00
committed by GitHub
parent 099a98a421
commit 149d6b52fa
1 changed files with 42 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc4f528d6a74d05e68af74.md
+42 -27
View File
@@ -9,73 +9,88 @@ dashedName: step-56
There's another way to associate an `input` element's text with the element itself. You can nest the text within a `label` element and add a `for` attribute with the same value as the `input` element's `id` attribute.
Here is an example of using the `for` attribute to associate a `label` with an `input` element:
Given an `input` element as below:
```html
<label for="breakfast"> Breakfast </label>
<input id="breakfast" type="radio" name="meal" value="breakfast">
```
An example of a `label` element that is associated to this `input` element is:
```html
<label for="breakfast">Breakfast</label>
```
Associate the text `Loving` with the checkbox by nesting only the text `Loving` in a `label` element and giving it an appropriate `for` attribute.
# --hints--
You should make sure the checkbox is still present.
You should make sure the checkbox element is still present, and you did not make any changes to it. It should stay as it was in the starting code.
```js
assert($('input[type="checkbox"]')[0]);
const checkboxElementRegex = /\s*<input\s+id\s*=\s*"loving"\s*type\s*=\s*"checkbox"\s*>/;
assert.match(code, checkboxElementRegex);
```
Your checkbox should still have an `id` attribute with the value `loving`. Expected `--fcc-expected--`, but found `--fcc-actual--`.
```js
assert.equal($('input[type="checkbox"]')[0].id, 'loving');
const checkboxElementId = document.querySelector('input[type="checkbox"]')?.getAttribute('id');
assert.strictEqual(checkboxElementId, 'loving');
```
The text `Loving` should be wrapped in a `label` element.
You should add a new `label` element after the checkbox element. Make sure it has both an opening and closing tag.
```js
const checkboxInputElem = $('input[type="checkbox"]')[0];
assert(
/Loving/i.test(checkboxInputElem.nextElementSibling.innerText.replace(/\s+/g, ' '))
);
assert.lengthOf(document.querySelectorAll('label'), 3);
assert.lengthOf(code.match(/<\/label\>/g), 3);
```
You will need to add a new `label` element in which to nest the text `Loving`. Make sure it has both an opening and closing tag.
Your `label` element should be located after your checkbox.
```js
assert(
document.querySelectorAll('label').length === 3 &&
code.match(/<\/label\>/g).length === 3
);
const checkboxElement = document.querySelector('input[type="checkbox"]');
const checkboxSiblingElement = checkboxElement?.nextElementSibling?.nodeName;
assert.strictEqual(checkboxSiblingElement, 'LABEL');
```
The new `label` element should be located directly to the right of your checkbox. Make sure there is a space between the two elements.
Your `label` element should have the text `Loving`.
```js
const checkboxInputElem = $('input[type="checkbox"]')[0];
assert(checkboxInputElem.nextElementSibling.nodeName === 'LABEL');
const checkboxElement = document.querySelector('input[type="checkbox"]');
const checkboxSiblingElementText = checkboxElement?.nextElementSibling?.innerText;
assert.strictEqual(checkboxSiblingElementText, 'Loving');
```
The new `label` element does not have a `for` attribute. Check that there is a space after the opening tag's name.
The label text `Loving` should only be inside your new `label` element. Make sure you did not duplicate the text outside the `label` element.
```js
const labelElem = $('input[type="checkbox"]')[0].nextElementSibling;
assert(labelElem.hasAttribute('for'));
const checkboxElement = document.querySelector('input[type="checkbox"]');
const checkboxSiblingNode = checkboxElement?.nextSibling?.nodeValue ?? '';
const labelElement = checkboxElement?.nextElementSibling;
const labelSiblingNode = labelElement?.nextSibling?.nodeValue ?? '';
assert.notInclude(checkboxSiblingNode, 'Loving');
assert.notInclude(labelSiblingNode, 'Loving');
```
The new `label` element should have a `for` attribute with the value `loving`. Expected `--fcc-expected--`, but found `--fcc-actual--`.
Your `label` element does not have a `for` attribute. Make sure there is a space between the opening `label` tag name and the `for` attribute.
```js
const labelElem = $('input[type="checkbox"]')[0].nextElementSibling;
assert.equal(labelElem.getAttribute('for'), 'loving');
const checkboxElement = document.querySelector('input[type="checkbox"]');
const checkboxSiblingElementAttr = checkboxElement?.nextElementSibling?.getAttribute('for');
assert.isNotNull(checkboxSiblingElementAttr);
```
The text `Loving` should be nested within the new `label` element. You have either omitted the text or have a typo.
Your `label` element should have a `for` attribute with the value `loving`. Expected `--fcc-expected--`, but found `--fcc-actual--`.
```js
const labelElem = document.querySelector('label[for="loving"]');
assert(labelElem.textContent.replace(/\s/g, '').match(/Loving/i));
const checkboxElement = document.querySelector('input[type="checkbox"]');
const checkboxSiblingElementAttr = checkboxElement?.nextElementSibling?.getAttribute('for');
assert.strictEqual(checkboxSiblingElementAttr, 'loving');
```
There should be a space between your checkbox and your new `label` element.