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): improve Contact Form lab instructions (#59583)

Browse Source 
Co-authored-by: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com>
This commit is contained in:
Supravisor
2025-04-07 20:14:36 +12:00
committed by GitHub
parent a24c0b2eb0
commit 206293bf92
1 changed files with 10 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
curriculum/challenges/english/25-front-end-development/lab-contact-form/66f26c32ec6f90df01a44f60.md
+10 -10
View File
@@ -14,7 +14,7 @@ demoType: onClick
1. You should have a `div` with a class of `form-container` to hold your form.
2. You should have a `form` element within the `.form-container` `div`.
2. You should have a `form` element within the `.form-container` element.
3. Within the `form` element, you should have the following elements and input fields:
@@ -26,7 +26,7 @@ demoType: onClick
4. Each `input` and `textarea` elements should have their corresponding `label` element with a `for` attribute set to the element's `id`.
5. The `.form-container` `div` should have a background color, and have values for `border-radius`, `padding`, and `width`.
5. The `.form-container` element should have a background color, and have values for `border-radius`, `padding`, and `width`.
6. The `label` elements should have a margin and a font color.
@@ -54,7 +54,7 @@ const el = document.querySelector('div.form-container');
assert.isNotNull(el);
```
You should have a `form` element within the `.form-container` `div`.
You should have a `form` element within the `.form-container` element.
```js
const el = document.querySelector('.form-container form');
@@ -127,7 +127,7 @@ const el = document.querySelector('.form-container form button');
assert.strictEqual(document.querySelector('.form-container form button').textContent, 'Submit');
```
You should have a `label` element for the `#name` `input` with a `for` attribute matching the `id` value on the corresponding `input`.
You should have a `label` element for the `#name` element with a `for` attribute matching the `id` value on the corresponding `input`.
```js
const nameInput = document.querySelector('.form-container form input[type="text"]')?.getAttribute('id');
@@ -150,7 +150,7 @@ for (let label of labels) {
assert.isTrue(found);
```
You should have a `label` element for the `#email` `input` with a `for` attribute matching the `id` value on the corresponding `input`.
You should have a `label` element for the `#email` element with a `for` attribute matching the `id` value on the corresponding `input`.
```js
const emailInput = document.querySelector('.form-container form input[type="email"]')?.getAttribute('id');
@@ -171,7 +171,7 @@ for (let label of labels) {
assert.isTrue(found);
```
You should have a `label` element for the `#message` `textarea` with a `for` attribute matching the `id` value on the `textarea`.
You should have a `label` element for the `#message` element with a `for` attribute matching the `id` value on the `textarea`.
```js
const messageInput = document.querySelector('.form-container form textarea')?.getAttribute('id');
@@ -200,25 +200,25 @@ for (let label of labels) {
```
The `form-container` `div` should have a background color.
The `.form-container` element should have a background color.
```js
assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.form-container')?.backgroundColor);
```
The `form-container` `div` should have a `border-radius`.
The `.form-container` element should have a `border-radius`.
```js
assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.form-container')?.borderRadius);
```
The `form-container` `div` should have padding.
The `.form-container` element should have padding.
```js
assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.form-container')?.padding);
```
The `form-container` `div` should have a width.
The `.form-container` element should have a width.
```js
assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.form-container')?.width);