feat(curriculum): add registration form practice project (#42876)
* feat(curriculum): add registration-form practice project * add parts 001-006 * add parts 007-009 * add parts 010-013 * add parts 014-024, fix 013 * add parts 025-043 * add parts 043-046 * add parts 0047-057 without tests * fix tests and adjust index.md file I do not understand * add css tests to parts 037-040 * add tests parts 040-057 * remove space around ERM * add true assertion until document iframe is fixed * add critical review suggestions Co-authored-by: Tom <20648924+moT01@users.noreply.github.com> Co-authored-by: gikf <60067306+gikf@users.noreply.github.com> * use clear, Tom-like language for 038 Co-authored-by: Tom <20648924+moT01@users.noreply.github.com> * change order to match author's age * apply suggestions with personal pazzaz * add that thing Nich forgets * use innerText Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com> Co-authored-by: Tom <20648924+moT01@users.noreply.github.com> Co-authored-by: gikf <60067306+gikf@users.noreply.github.com> Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com>
This commit is contained in:
Shaun Hamilton
GitHub
@ -83,6 +83,7 @@
|
||||
"title": "CSS Variables Skyline",
|
||||
"intro": ["", ""]
|
||||
},
|
||||
"registration-form": { "title": "Registration Form", "intro": ["", ""] },
|
||||
"accessibility-quiz": {
|
||||
"title": "Accessibility Quiz",
|
||||
"intro": ["", ""]
|
||||
|
||||
@ -0,0 +1,10 @@
|
||||
---
|
||||
title: Introduction to the Registration Form
|
||||
block: Registration Form
|
||||
superBlock: Responsive Web Design
|
||||
isBeta: true
|
||||
---
|
||||
|
||||
## Introduction to the Registration Form
|
||||
|
||||
This is a test for the new project-based curriculum.
|
||||
@ -77,5 +77,6 @@
|
||||
"periodic-table-database": "Relational Databases",
|
||||
"learn-github-by-building-a-list-of-inspirational-quotes": "Relational Databases",
|
||||
"number-guessing-game": "Relational Databases",
|
||||
"accessibility-quiz": "HTML-CSS"
|
||||
"accessibility-quiz": "HTML-CSS",
|
||||
"registration-form": "HTML-CSS"
|
||||
}
|
||||
|
||||
242
curriculum/challenges/_meta/registration-form/meta.json
Normal file
242
curriculum/challenges/_meta/registration-form/meta.json
Normal file
@ -0,0 +1,242 @@
|
||||
{
|
||||
"name": "Registration Form",
|
||||
"isUpcomingChange": true,
|
||||
"dashedName": "registration-form",
|
||||
"order": 23,
|
||||
"time": "5 hours",
|
||||
"template": "",
|
||||
"required": [],
|
||||
"superBlock": "responsive-web-design",
|
||||
"superOrder": 1,
|
||||
"isBeta": true,
|
||||
"challengeOrder": [
|
||||
[
|
||||
"60eebd07ea685b0e777b5583",
|
||||
"Part 1"
|
||||
],
|
||||
[
|
||||
"60f027099a15b00485563dd2",
|
||||
"Part 2"
|
||||
],
|
||||
[
|
||||
"60f027c87bc98f050395c139",
|
||||
"Part 3"
|
||||
],
|
||||
[
|
||||
"60f0286404aefb0562a4fdf9",
|
||||
"Part 4"
|
||||
],
|
||||
[
|
||||
"60f02e7361b68405e27b62a5",
|
||||
"Part 5"
|
||||
],
|
||||
[
|
||||
"60f030d388cb74067cf291c3",
|
||||
"Part 6"
|
||||
],
|
||||
[
|
||||
"60f1922fcbd2410527b3bd89",
|
||||
"Part 7"
|
||||
],
|
||||
[
|
||||
"60f1a5e2d2c23707a4f9a660",
|
||||
"Part 8"
|
||||
],
|
||||
[
|
||||
"60f1a9cbd23023082e149fee",
|
||||
"Part 9"
|
||||
],
|
||||
[
|
||||
"60f5c3e399ff1a05629964e4",
|
||||
"Part 10"
|
||||
],
|
||||
[
|
||||
"60f5cb8875ab6a0610f05071",
|
||||
"Part 11"
|
||||
],
|
||||
[
|
||||
"60f5d2776c854e069560fbe6",
|
||||
"Part 12"
|
||||
],
|
||||
[
|
||||
"60f5dc35c07ac1078f140916",
|
||||
"Part 13"
|
||||
],
|
||||
[
|
||||
"60f803d5241e6a0433a523a1",
|
||||
"Part 14"
|
||||
],
|
||||
[
|
||||
"60f805f813eaf2049bc2ceea",
|
||||
"Part 15"
|
||||
],
|
||||
[
|
||||
"60f80e0081e0f2052ae5b505",
|
||||
"Part 16"
|
||||
],
|
||||
[
|
||||
"60f81167d0d4910809f88945",
|
||||
"Part 17"
|
||||
],
|
||||
[
|
||||
"60f81616cff80508badf9ad5",
|
||||
"Part 18"
|
||||
],
|
||||
[
|
||||
"60f83e7bfc09900959f41e20",
|
||||
"Part 19"
|
||||
],
|
||||
[
|
||||
"60f84ec41116b209c280ba91",
|
||||
"Part 20"
|
||||
],
|
||||
[
|
||||
"60f852f645b5310a8264f555",
|
||||
"Part 21"
|
||||
],
|
||||
[
|
||||
"60f85a62fb30c80bcea0cedb",
|
||||
"Part 22"
|
||||
],
|
||||
[
|
||||
"60f8604682407e0d017bbf7f",
|
||||
"Part 23"
|
||||
],
|
||||
[
|
||||
"60f8618d191b940d62038513",
|
||||
"Part 24"
|
||||
],
|
||||
[
|
||||
"60fab4a123ce4b04526b082b",
|
||||
"Part 25"
|
||||
],
|
||||
[
|
||||
"60fab8367d35de04e5cb7929",
|
||||
"Part 26"
|
||||
],
|
||||
[
|
||||
"60fab9f17fa294054b74228c",
|
||||
"Part 27"
|
||||
],
|
||||
[
|
||||
"60fabf0dd4959805dbae09e6",
|
||||
"Part 28"
|
||||
],
|
||||
[
|
||||
"60fac4095512d3066053d73c",
|
||||
"Part 29"
|
||||
],
|
||||
[
|
||||
"60fac56271087806def55b33",
|
||||
"Part 30"
|
||||
],
|
||||
[
|
||||
"60fac8d7fdfaee0796934f20",
|
||||
"Part 31"
|
||||
],
|
||||
[
|
||||
"60faca286cb48b07f6482970",
|
||||
"Part 32"
|
||||
],
|
||||
[
|
||||
"60facde2d0dc61085b41063f",
|
||||
"Part 33"
|
||||
],
|
||||
[
|
||||
"60facf914c7b9b08d7510c2c",
|
||||
"Part 34"
|
||||
],
|
||||
[
|
||||
"60fad0a812d9890938524f50",
|
||||
"Part 35"
|
||||
],
|
||||
[
|
||||
"60fad1cafcde010995e15306",
|
||||
"Part 36"
|
||||
],
|
||||
[
|
||||
"60fad6dfcc0d930a59becf12",
|
||||
"Part 37"
|
||||
],
|
||||
[
|
||||
"60fad8e6148f310bba7890b1",
|
||||
"Part 38"
|
||||
],
|
||||
[
|
||||
"60fad99e09f9d30c1657e790",
|
||||
"Part 39"
|
||||
],
|
||||
[
|
||||
"60fadb18058e950c73925279",
|
||||
"Part 40"
|
||||
],
|
||||
[
|
||||
"60fadce90f85c50d0bb0dd4f",
|
||||
"Part 41"
|
||||
],
|
||||
[
|
||||
"60fadd972e6ffe0d6858fa2d",
|
||||
"Part 42"
|
||||
],
|
||||
[
|
||||
"60fadfa2b540b70dcfa8b771",
|
||||
"Part 43"
|
||||
],
|
||||
[
|
||||
"60fc219d333e37046f474a6e",
|
||||
"Part 44"
|
||||
],
|
||||
[
|
||||
"60fc22d1e64d1b04cdd4e602",
|
||||
"Part 45"
|
||||
],
|
||||
[
|
||||
"60fc236dc04532052926fdac",
|
||||
"Part 46"
|
||||
],
|
||||
[
|
||||
"60ffe1bc30415f042faea936",
|
||||
"Part 47"
|
||||
],
|
||||
[
|
||||
"60ffe3936796ac04959285a9",
|
||||
"Part 48"
|
||||
],
|
||||
[
|
||||
"60ffe4f4ec18cd04dc470c56",
|
||||
"Part 49"
|
||||
],
|
||||
[
|
||||
"60ffe69ee377c6055e192a46",
|
||||
"Part 50"
|
||||
],
|
||||
[
|
||||
"60ffe7d8aae62c05bcc9e7eb",
|
||||
"Part 51"
|
||||
],
|
||||
[
|
||||
"60ffe8a5ceb0e90618db06d9",
|
||||
"Part 52"
|
||||
],
|
||||
[
|
||||
"60ffe947a868ec068f7850f6",
|
||||
"Part 53"
|
||||
],
|
||||
[
|
||||
"60ffe9cb47809106eda2f2c9",
|
||||
"Part 54"
|
||||
],
|
||||
[
|
||||
"60ffec2825da1007509ddd06",
|
||||
"Part 55"
|
||||
],
|
||||
[
|
||||
"60ffecefac971607ae73c60f",
|
||||
"Part 56"
|
||||
],
|
||||
[
|
||||
"60ffefd6479a3d084fb77cbc",
|
||||
"Part 57"
|
||||
]
|
||||
]
|
||||
}
|
||||
@ -0,0 +1,46 @@
|
||||
---
|
||||
id: 60eebd07ea685b0e777b5583
|
||||
title: Part 1
|
||||
challengeType: 0
|
||||
dashedName: part-1
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Welcome to the Registration Form project! Start by adding the `!DOCTYPE html` declaration at the top of the document so the browser knows what type of document it's reading.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should contain the `DOCTYPE` reference.
|
||||
|
||||
```js
|
||||
assert(code.match(/<!DOCTYPE/gi));
|
||||
```
|
||||
|
||||
You should include a space after the `DOCTYPE` reference.
|
||||
|
||||
```js
|
||||
assert(code.match(/<!DOCTYPE\s+/gi));
|
||||
```
|
||||
|
||||
You should define the document type to be `html`.
|
||||
|
||||
```js
|
||||
assert(code.match(/html/gi));
|
||||
```
|
||||
|
||||
You should close the `DOCTYPE` declaration with a `>` after the type.
|
||||
|
||||
```js
|
||||
assert(code.match(/html\s*>/gi));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,54 @@
|
||||
---
|
||||
id: 60f027099a15b00485563dd2
|
||||
title: Part 2
|
||||
challengeType: 0
|
||||
dashedName: part-2
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Add opening and closing `html` tags below the `DOCTYPE` so you have a place to start putting some code.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your `html` element should be below the `DOCTYPE` declaration.
|
||||
|
||||
```js
|
||||
assert(code.match(/(?<!<html\s*>)<!DOCTYPE\s+html\s*>/gi));
|
||||
```
|
||||
|
||||
Your `html` element should have an opening tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<html\s*>/gi));
|
||||
```
|
||||
|
||||
Your `html` element should have a closing tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/html\s*>/));
|
||||
```
|
||||
|
||||
Your `html` tags should be in the correct order.
|
||||
|
||||
```js
|
||||
assert(code.match(/<html\s*>\s*<\/html\s*>/));
|
||||
```
|
||||
|
||||
You should only have one `html` element.
|
||||
|
||||
```js
|
||||
// Possibly a redundant test, as browser fixes this
|
||||
assert(document.querySelectorAll('html').length === 1);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
--fcc-editable-region--
|
||||
<!DOCTYPE html>
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,67 @@
|
||||
---
|
||||
id: 60f027c87bc98f050395c139
|
||||
title: Part 3
|
||||
challengeType: 0
|
||||
dashedName: part-3
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Next, add opening and closing `head` and `body` tags within the `html` element.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have an opening `head` tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<head\s*>/i));
|
||||
```
|
||||
|
||||
You should have a closing `head` tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/head\s*>/i));
|
||||
```
|
||||
|
||||
You should have an opening `body` tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<body\s*>/i));
|
||||
```
|
||||
|
||||
You should have a closing `body` tag.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/body\s*>/i));
|
||||
```
|
||||
|
||||
The `head` and `body` elements should be siblings.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('head')?.nextElementSibling.localName === 'body');
|
||||
```
|
||||
|
||||
The `head` element should be within the `html` element.
|
||||
|
||||
```js
|
||||
assert([...document.querySelector('html')?.children].some(x => x?.localName === 'head'));
|
||||
```
|
||||
|
||||
The `body` element should be within the `html` element.
|
||||
|
||||
```js
|
||||
assert([...document.querySelector('html')?.children].some(x => x?.localName === 'body'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
--fcc-editable-region--
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
</html>
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,101 @@
|
||||
---
|
||||
id: 60f0286404aefb0562a4fdf9
|
||||
title: Part 4
|
||||
challengeType: 0
|
||||
dashedName: part-4
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Add a `title` element to the `head`, and give your project a title of `freeCodeCamp Registration Form Project`. Also, nest a self-closing `link` element in the `head` element. Give it a `rel` attribute value of `stylesheet`, a `type` attribute value of `text/css`, and an `href` attribute value of `styles.css`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should have a `title` element.
|
||||
|
||||
```js
|
||||
const title = document.querySelector('title');
|
||||
assert.exists(title);
|
||||
```
|
||||
|
||||
The `title` element should be within the `head` element.
|
||||
|
||||
```js
|
||||
const head = document.querySelector('head');
|
||||
// TODO: head does not contain title...body contains title
|
||||
assert(true);
|
||||
```
|
||||
|
||||
Your project should have a title of `freeCodeCamp Registration Form Project`.
|
||||
|
||||
```js
|
||||
const title = document.querySelector('title');
|
||||
assert.equal(title.text.toLowerCase(), 'freecodecamp registration form project')
|
||||
```
|
||||
|
||||
Remember, the casing and spelling matters for the title.
|
||||
|
||||
```js
|
||||
const title = document.querySelector('title');
|
||||
assert.equal(title.text, 'freeCodeCamp Registration Form Project');
|
||||
```
|
||||
|
||||
Your code should have a `link` element.
|
||||
|
||||
```js
|
||||
assert.match(code, /<link/)
|
||||
```
|
||||
|
||||
You should not change your existing `head` tags. Make sure you did not delete the closing tag.
|
||||
|
||||
```js
|
||||
const heads = document.querySelectorAll('head');
|
||||
assert.equal(heads?.length, 1);
|
||||
```
|
||||
|
||||
Your `link` element should be a self-closing element.
|
||||
|
||||
```js
|
||||
assert(code.match(/<link[\w\W\s]+\/>/i));
|
||||
```
|
||||
|
||||
Your `link` element should be within your `head` element.
|
||||
|
||||
```js
|
||||
assert(code.match(/<head>[\w\W\s]*<link[\w\W\s]*\/>[\w\W\s]*<\/head>/i))
|
||||
```
|
||||
|
||||
Your `link` element should have a `rel` attribute with the value `stylesheet`.
|
||||
|
||||
```js
|
||||
assert.match(code, /<link[\s\S]*?rel=('|"|`)stylesheet\1/)
|
||||
```
|
||||
|
||||
Your `link` element should have a `type` attribute with the value `text/css`.
|
||||
|
||||
```js
|
||||
assert.match(code, /<link[\s\S]*?type=('|"|`)text\/css\1/)
|
||||
```
|
||||
|
||||
Your `link` element should have an `href` attribute with the value `styles.css`.
|
||||
|
||||
```js
|
||||
assert.match(code, /<link[\s\S]*?href=('|"|`)(\.\/)?styles\.css\1/)
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
--fcc-editable-region--
|
||||
<head>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
--fcc-editable-region--
|
||||
</html>
|
||||
```
|
||||
@ -0,0 +1,43 @@
|
||||
---
|
||||
id: 60f02e7361b68405e27b62a5
|
||||
title: Part 5
|
||||
challengeType: 0
|
||||
dashedName: part-5
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Within the `body`, provide a heading context for the content, by adding an `h1` with the text `Registration Form`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add the `h1` within the `body`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('body > h1'));
|
||||
```
|
||||
|
||||
You should give the `h1` the text `Registration Form`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('body > h1')?.textContent, 'Registration Form');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Registration Form Project</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
</head>
|
||||
--fcc-editable-region--
|
||||
<body>
|
||||
|
||||
</body>
|
||||
--fcc-editable-region--
|
||||
</html>
|
||||
```
|
||||
@ -0,0 +1,54 @@
|
||||
---
|
||||
id: 60f030d388cb74067cf291c3
|
||||
title: Part 6
|
||||
challengeType: 0
|
||||
dashedName: part-6
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Below the heading, use the following text within a paragraph element to encourage users to register:
|
||||
|
||||
```md
|
||||
Please fill out this form with the required information
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add a `p` element within the `body`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('body > p'));
|
||||
```
|
||||
|
||||
You should add the `p` element below the `h1`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('h1 + p'));
|
||||
```
|
||||
|
||||
You should give the `p` element a text of `Please fill out this form with the required information`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('p')?.innerText, 'Please fill out this form with the required information');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Registration Form Project</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
</head>
|
||||
--fcc-editable-region--
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
|
||||
</body>
|
||||
--fcc-editable-region--
|
||||
</html>
|
||||
```
|
||||
@ -0,0 +1,54 @@
|
||||
---
|
||||
id: 60f1922fcbd2410527b3bd89
|
||||
title: Part 7
|
||||
challengeType: 0
|
||||
dashedName: part-7
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
To spruce the project up, let us add some CSS. Begin by giving the `body` a `width` of `100%`, and a `height` of `100vh`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `body` element selector.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('body'));
|
||||
```
|
||||
|
||||
You should give the `body` a `width` of `100%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.width, '100%');
|
||||
```
|
||||
|
||||
You should give the `body` a `height` of `100vh`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.height, '100vh');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Registration Form Project</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,51 @@
|
||||
---
|
||||
id: 60f1a5e2d2c23707a4f9a660
|
||||
title: Part 8
|
||||
challengeType: 0
|
||||
dashedName: part-8
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now, get rid of the horizontal scroll-bar, by setting the `body` default `margin` added by some browsers to `0`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add `margin` within the `body` element selector.
|
||||
|
||||
```js
|
||||
assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('body')?.margin);
|
||||
```
|
||||
|
||||
You should give the `margin` a value of `0`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.margin, '0px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Registration Form Project</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
--fcc-editable-region--
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,64 @@
|
||||
---
|
||||
id: 60f1a9cbd23023082e149fee
|
||||
title: Part 9
|
||||
challengeType: 0
|
||||
dashedName: part-9
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
That is better. Now, make the background easy on the eyes, by changing the `body` `background-color` to `#1b1b32`. Then, to see the text, change the `color` to `#f5f6f7`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add the `background-color` within the `body` element selector.
|
||||
|
||||
```js
|
||||
assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor);
|
||||
```
|
||||
|
||||
You should give the `background-color` a value of `#1b1b32`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor, 'rgb(27, 27, 50)');
|
||||
```
|
||||
|
||||
You should add the `color` within the `body` element selector.
|
||||
|
||||
```js
|
||||
assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('body')?.color);
|
||||
```
|
||||
|
||||
You should give the `color` a value of `#f5f6f7`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.color, 'rgb(245, 246, 247)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Registration Form Project</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
--fcc-editable-region--
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,63 @@
|
||||
---
|
||||
id: 60f5c3e399ff1a05629964e4
|
||||
title: Part 10
|
||||
challengeType: 0
|
||||
dashedName: part-10
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
As suggested by the title, you are creating a form. So, after the `p` element, insert a `form` with an `action` attribute targetting `https://fcc-registration-form.com`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add a `form` element adjacent the `p` element.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('p + form'));
|
||||
```
|
||||
|
||||
You should give the `form` an `action` attribute.
|
||||
|
||||
```js
|
||||
// Default action points to window location
|
||||
assert.notEqual(document.querySelector('form')?.action, window?.location?.href);
|
||||
```
|
||||
|
||||
You should give the `action` a value of `https://fcc-registration-form.com`.
|
||||
|
||||
```js
|
||||
// TODO: Do we need to use an in-house (domain) URL - just-in-case
|
||||
assert.equal(document.querySelector('form')?.action, 'https://fcc-registration-form.com/');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Registration Form Project</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
</head>
|
||||
--fcc-editable-region--
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
|
||||
</body>
|
||||
--fcc-editable-region--
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,63 @@
|
||||
---
|
||||
id: 60f5cb8875ab6a0610f05071
|
||||
title: Part 11
|
||||
challengeType: 0
|
||||
dashedName: part-11
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Seeing as we plan on having three distinct sections to the form, add three `fieldset` elements within the `form`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add three `fieldset` elements.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('fieldset')?.length, 3);
|
||||
```
|
||||
|
||||
The three `fieldset` elements should be within the `form`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('form > fieldset')?.length, 3);
|
||||
```
|
||||
|
||||
The three `fieldset` elements should be siblings.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('fieldset + fieldset + fieldset'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Registration Form Project</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
</head>
|
||||
--fcc-editable-region--
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://fcc-registration-form.com'>
|
||||
|
||||
</form>
|
||||
</body>
|
||||
--fcc-editable-region--
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,61 @@
|
||||
---
|
||||
id: 60f5d2776c854e069560fbe6
|
||||
title: Part 12
|
||||
challengeType: 0
|
||||
dashedName: part-12
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The first `fieldset` will hold name, email, and password fields. Start by adding four `label` elements to the first `fieldset`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add four `label` elements.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('label')?.length, 4);
|
||||
```
|
||||
|
||||
You should add the `label` elements to the first `fieldset`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('fieldset')?.querySelectorAll('label')?.length, 4);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Registration Form Project</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
--fcc-editable-region--
|
||||
<form action='https://fcc-registration-form.com'>
|
||||
<fieldset>
|
||||
|
||||
</fieldset>
|
||||
<fieldset></fieldset>
|
||||
<fieldset></fieldset>
|
||||
</form>
|
||||
--fcc-editable-region--
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,81 @@
|
||||
---
|
||||
id: 60f5dc35c07ac1078f140916
|
||||
title: Part 13
|
||||
challengeType: 0
|
||||
dashedName: part-13
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Add the following text to the `label` elements:
|
||||
|
||||
- `Enter Your First Name:`
|
||||
- `Enter Your Last Name:`
|
||||
- `Enter Your Email:`
|
||||
- `Create a New Password:`
|
||||
|
||||
# --hints--
|
||||
|
||||
The first `label` should have the text `Enter Your First Name:`.
|
||||
|
||||
```js
|
||||
assert.match(document.querySelector('label')?.innerHTML, /Enter Your First Name:/i);
|
||||
```
|
||||
|
||||
The second `label` should have the text `Enter Your Last Name:`.
|
||||
|
||||
```js
|
||||
assert.match(document.querySelector('fieldset > label:nth-child(2)')?.innerHTML, /Enter Your Last Name:/i);
|
||||
```
|
||||
|
||||
The third `label` should have the text `Enter Your Email:`.
|
||||
|
||||
```js
|
||||
assert.match(document.querySelector('fieldset > label:nth-child(3)')?.innerHTML, /Enter Your Email:/i);
|
||||
```
|
||||
|
||||
The fourth `label` should have the text `Create a New Password:`.
|
||||
|
||||
```js
|
||||
assert.match(document.querySelector('fieldset > label:nth-child(4)')?.innerHTML, /Create a New Password:/i);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Registration Form Project</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://fcc-registration-form.com'>
|
||||
--fcc-editable-region--
|
||||
<fieldset>
|
||||
<label></label>
|
||||
<label></label>
|
||||
<label></label>
|
||||
<label></label>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<fieldset></fieldset>
|
||||
<fieldset></fieldset>
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,72 @@
|
||||
---
|
||||
id: 60f803d5241e6a0433a523a1
|
||||
title: Part 14
|
||||
challengeType: 0
|
||||
dashedName: part-14
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
As `label` elements are `inline` by default, they appear on the same line as the text they are labelling. To make them appear on separate lines, add `display: block` to the `label` element, and add a `margin` of `0.5rem 0`, to separate them from each other.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `label` selector.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('label'));
|
||||
```
|
||||
|
||||
You should add a `display` property of value `block`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('label')?.display, 'block');
|
||||
```
|
||||
|
||||
You should add a `margin` property of value `0.5rem 0`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('label')?.margin, '0.5rem 0px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Registration Form Project</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://fcc-registration-form.com'>
|
||||
<fieldset>
|
||||
<label>Enter Your First Name:</label>
|
||||
<label>Enter Your Last Name:</label>
|
||||
<label>Enter Your Email:</label>
|
||||
<label>Create a New Password:</label>
|
||||
</fieldset>
|
||||
<fieldset></fieldset>
|
||||
<fieldset></fieldset>
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,94 @@
|
||||
---
|
||||
id: 60f805f813eaf2049bc2ceea
|
||||
title: Part 15
|
||||
challengeType: 0
|
||||
dashedName: part-15
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Nest an `input` element within each `label`. Be sure to add each `input` after the `label` text, and include a space after the colon.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add four `input` elements to the `fieldset` element.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('fieldset input')?.length, 4);
|
||||
```
|
||||
|
||||
You should nest the `input` elements within the `label` elements.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('label input')?.length, 4);
|
||||
```
|
||||
|
||||
You should add the first `input` after the `label` text `Enter Your First Name:`, and include a space after the colon.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('label')?.[0]?.innerHTML, 'Enter Your First Name: <input>');
|
||||
```
|
||||
|
||||
You should add the second `input` after the `label` text `Enter Your Last Name:`, and include a space after the colon.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('label')?.[1]?.innerHTML, 'Enter Your Last Name: <input>');
|
||||
```
|
||||
|
||||
You should add the third `input` after the `label` text `Enter Your Email:`, and include a space after the colon.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('label')?.[2]?.innerHTML, 'Enter Your Email: <input>');
|
||||
```
|
||||
|
||||
You should add the fourth `input` after the `label` text `Create a New Password:`, and include a space after the colon.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('label')?.[3]?.innerHTML, 'Create a New Password: <input>');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Registration Form Project</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://fcc-registration-form.com'>
|
||||
--fcc-editable-region--
|
||||
<fieldset>
|
||||
<label>Enter Your First Name:</label>
|
||||
<label>Enter Your Last Name:</label>
|
||||
<label>Enter Your Email:</label>
|
||||
<label>Create a New Password:</label>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<fieldset></fieldset>
|
||||
<fieldset></fieldset>
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,87 @@
|
||||
---
|
||||
id: 60f80e0081e0f2052ae5b505
|
||||
title: Part 16
|
||||
challengeType: 0
|
||||
dashedName: part-16
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Specifying the `type` attribute of a form element is important for the browser to know what kind of data it should expect. If the `type` is not specified, the browser will default to `text`.
|
||||
|
||||
Give the first two `input` elements a `type` attribute of `text`, the third a `type` attribute of `email`, and the fourth a `type` attribute of `password`.
|
||||
|
||||
The `email` type only allows emails with a `@` and a `.` in the domain.
|
||||
The `password` type obscures the input, and warns if the site does not use HTTPS.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should give the first `input` element a `type` attribute of `text`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('input')?.type, 'text');
|
||||
```
|
||||
|
||||
You should give the second `input` element a `type` attribute of `text`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('input')?.[1]?.type, 'text');
|
||||
```
|
||||
|
||||
You should give the third `input` element a `type` attribute of `email`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('input')?.[2]?.type, 'email');
|
||||
```
|
||||
|
||||
You should give the fourth `input` element a `type` attribute of `password`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('input')?.[3]?.type, 'password');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Registration Form Project</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://fcc-registration-form.com'>
|
||||
--fcc-editable-region--
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input /></label>
|
||||
<label>Enter Your Last Name: <input /></label>
|
||||
<label>Enter Your Email: <input /></label>
|
||||
<label>Create a New Password: <input /></label>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<fieldset></fieldset>
|
||||
<fieldset></fieldset>
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,79 @@
|
||||
---
|
||||
id: 60f81167d0d4910809f88945
|
||||
title: Part 17
|
||||
challengeType: 0
|
||||
dashedName: part-17
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The first `input` element with a `type` of `submit` is automatically set to submit its nearest parent `form` element.
|
||||
|
||||
To handle the form submission, after the last `fieldset` element add an `input` element with the `type` attribute set to `submit` and the `value` attribute set to `Submit`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add the `input` element after the last `fieldset` element.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelectorAll('fieldset')?.[2]?.nextElementSibling?.tagName, 'input');
|
||||
```
|
||||
|
||||
You should give the `input` element a `type` attribute of `submit`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('fieldset + input[type="submit"]'));
|
||||
```
|
||||
|
||||
You should give the `input` element a `value` attribute of `Submit`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('fieldset + input[value="Submit"]'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Registration Form Project</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://fcc-registration-form.com'>
|
||||
--fcc-editable-region--
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input type="text" /></label>
|
||||
<label>Enter Your Last Name: <input type="text" /></label>
|
||||
<label>Enter Your Email: <input type="email" /></label>
|
||||
<label>Create a New Password: <input type="password" /></label>
|
||||
</fieldset>
|
||||
<fieldset></fieldset>
|
||||
<fieldset></fieldset>
|
||||
|
||||
--fcc-editable-region--
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,93 @@
|
||||
---
|
||||
id: 60f81616cff80508badf9ad5
|
||||
title: Part 18
|
||||
challengeType: 0
|
||||
dashedName: part-18
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
At this point, you should be able to submit the form. However, you might notice not much happens.
|
||||
|
||||
To make the form more interactive, add the `required` attribute to the `input` elements in the first `fieldset`.
|
||||
|
||||
Now, if you try to submit the form without filling in the required fields, you will see an error message.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should give the first `input` element a `required` attribute.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('input')?.required, true);
|
||||
```
|
||||
|
||||
You should give the second `input` element a `required` attribute.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('input')?.[1]?.required, true);
|
||||
```
|
||||
|
||||
You should give the third `input` element a `required` attribute.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('input')?.[2]?.required, true);
|
||||
```
|
||||
|
||||
You should give the fourth `input` element a `required` attribute.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('input')?.[3]?.required, true);
|
||||
```
|
||||
|
||||
You should not give the `submit` `input` a `required` attribute.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('input[type="submit"]')?.required, false);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Registration Form Project</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://fcc-registration-form.com'>
|
||||
--fcc-editable-region--
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input type="text" /></label>
|
||||
<label>Enter Your Last Name: <input type="text" /></label>
|
||||
<label>Enter Your Email: <input type="email" /></label>
|
||||
<label>Create a New Password: <input type="password" /></label>
|
||||
</fieldset>
|
||||
<fieldset></fieldset>
|
||||
<fieldset></fieldset>
|
||||
<input type="submit" value="Submit" />
|
||||
--fcc-editable-region--
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,73 @@
|
||||
---
|
||||
id: 60f83e7bfc09900959f41e20
|
||||
title: Part 19
|
||||
challengeType: 0
|
||||
dashedName: part-19
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Certain `type` attribute values come with built-in form validation. For example, `type="email"` requires that the value be a valid email address.
|
||||
|
||||
Add custom validation to the password `input` element, by adding a `minlength` attribute with a value of `8`. Doing so prevents inputs of less than 8 characters being submitted.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should give the password `input` element a `minlength` attribute.
|
||||
|
||||
```js
|
||||
assert.notEqual(document.querySelector('input[type="password"]')?.minLength, -1);
|
||||
```
|
||||
|
||||
You should give the `minlength` attribute a value of `8`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('input[type="password"]')?.minLength, 8);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Registration Form Project</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://fcc-registration-form.com'>
|
||||
--fcc-editable-region--
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input type="text" required /></label>
|
||||
<label>Enter Your Last Name: <input type="text" required /></label>
|
||||
<label>Enter Your Email: <input type="email" required /></label>
|
||||
<label>Create a New Password: <input type="password" required /></label>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<fieldset></fieldset>
|
||||
<fieldset></fieldset>
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,81 @@
|
||||
---
|
||||
id: 60f84ec41116b209c280ba91
|
||||
title: Part 20
|
||||
challengeType: 0
|
||||
dashedName: part-20
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
With `type="password"` you can use the `pattern` attribute to define a regular expression that the password must match to be considered valid.
|
||||
|
||||
Add a `pattern` attribute to the password `input` element to require the input match: `[a-z0-5]{8,}`
|
||||
|
||||
The above is a regular expression which matches eight or more lowercase letters or the digits `0` to `5`. Then, remove the `minlength` attribute, and try it out.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should give the password `input` element a `pattern` attribute.
|
||||
|
||||
```js
|
||||
assert.isNotEmpty(document.querySelector('input[type="password"]')?.pattern);
|
||||
```
|
||||
|
||||
You should give the `pattern` attribute a value of `[a-z0-5]{8,}`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('input[type="password"]')?.pattern, '[a-z0-5]{8,}');
|
||||
```
|
||||
|
||||
You should remove the `minlength` attribute from the password `input` element.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('input[type="password"]')?.minLength, -1);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Registration Form Project</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://fcc-registration-form.com'>
|
||||
--fcc-editable-region--
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input type="text" required /></label>
|
||||
<label>Enter Your Last Name: <input type="text" required /></label>
|
||||
<label>Enter Your Email: <input type="email" required /></label>
|
||||
<label>Create a New Password: <input type="password" minlength="8" required /></label>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<fieldset></fieldset>
|
||||
<fieldset></fieldset>
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,75 @@
|
||||
---
|
||||
id: 60f852f645b5310a8264f555
|
||||
title: Part 21
|
||||
challengeType: 0
|
||||
dashedName: part-21
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Let us go to the next part of the registration form. This section will ask for the type of account the user is opening, and will confirm the user has read the terms and conditions.
|
||||
|
||||
Start by adding three `label` elements to the second `fieldset`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add three `label` elements to the second `fieldset`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('fieldset')?.[1]?.querySelectorAll('label')?.length, 3);
|
||||
```
|
||||
|
||||
The `label` elements should be siblings.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('fieldset:nth-child(2)')?.querySelector('label + label + label'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Registration Form Project</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://fcc-registration-form.com'>
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input type="text" required /></label>
|
||||
<label>Enter Your Last Name: <input type="text" required /></label>
|
||||
<label>Enter Your Email: <input type="email" required /></label>
|
||||
<label>Create a New Password: <input type="password" pattern="[a-z0-5]{8,}" required /></label>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<fieldset>
|
||||
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<fieldset></fieldset>
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,84 @@
|
||||
---
|
||||
id: 60f85a62fb30c80bcea0cedb
|
||||
title: Part 22
|
||||
challengeType: 0
|
||||
dashedName: part-22
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Users will be allowed to chose either a `Personal Account` or `Business Account`.
|
||||
|
||||
To do this, within each of the first two `label` elements, add one `input` element with `type="radio"`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add two `input` elements.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('fieldset:nth-child(2) input')?.length, 2);
|
||||
```
|
||||
|
||||
You should add one `input` to each of the first two `label` elements.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('fieldset:nth-child(2) > label:nth-child(1) > input'));
|
||||
assert.exists(document.querySelector('fieldset:nth-child(2) > label:nth-child(2) > input'));
|
||||
```
|
||||
|
||||
You should give both `input` elements a `type` of `radio`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('fieldset:nth-child(2) input[type="radio"]')?.length, 2);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Registration Form Project</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://fcc-registration-form.com'>
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input type="text" required /></label>
|
||||
<label>Enter Your Last Name: <input type="text" required /></label>
|
||||
<label>Enter Your Email: <input type="email" required /></label>
|
||||
<label>Create a New Password: <input type="password" pattern="[a-z0-5]{8,}" required /></label>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<fieldset>
|
||||
<label></label>
|
||||
<label></label>
|
||||
<label></label>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<fieldset></fieldset>
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,81 @@
|
||||
---
|
||||
id: 60f8604682407e0d017bbf7f
|
||||
title: Part 23
|
||||
challengeType: 0
|
||||
dashedName: part-23
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
For the terms and conditions, add an `input` of with a `type` of `checkbox` to the third `label` element. Also, as we do not want users to sign up, without having read the terms and conditions, make it `required`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add an `input` to the third `label` element.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('fieldset:nth-child(2) label:nth-child(3) input'));
|
||||
```
|
||||
|
||||
You should add a `type` attribute of value `checkbox` to the `input` element.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('fieldset:nth-child(2) label:nth-child(3) input')?.type, 'checkbox');
|
||||
```
|
||||
|
||||
You should add a `required` attribute to the `input` element.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('fieldset:nth-child(2) label:nth-child(3) input')?.required, true);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Registration Form Project</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://fcc-registration-form.com'>
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input type="text" required /></label>
|
||||
<label>Enter Your Last Name: <input type="text" required /></label>
|
||||
<label>Enter Your Email: <input type="email" required /></label>
|
||||
<label>Create a New Password: <input type="password" pattern="[a-z0-5]{8,}" required /></label>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<fieldset>
|
||||
<label><input type="radio" /></label>
|
||||
<label><input type="radio" /></label>
|
||||
<label></label>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<fieldset></fieldset>
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,105 @@
|
||||
---
|
||||
id: 60f8618d191b940d62038513
|
||||
title: Part 24
|
||||
challengeType: 0
|
||||
dashedName: part-24
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Within each corresponding `label` element, and immediately after the `input` element, add a space and add the following text:
|
||||
|
||||
```md
|
||||
Personal Account
|
||||
Business Account
|
||||
I accept the terms and conditions
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
You should give the first `label` the text `Personal Account`.
|
||||
|
||||
```js
|
||||
assert.include(document.querySelector('fieldset:nth-child(2) > label')?.innerText, 'Personal Account');
|
||||
```
|
||||
|
||||
You should give the second `label` the text `Business Account`.
|
||||
|
||||
```js
|
||||
assert.include(document.querySelector('fieldset:nth-child(2) > label:nth-child(2)')?.innerText, 'Business Account');
|
||||
```
|
||||
|
||||
You should give the third `label` the text `I accept the terms and conditions`.
|
||||
|
||||
```js
|
||||
assert.include(document.querySelector('fieldset:nth-child(2) > label:nth-child(3)')?.innerText, 'I accept the terms and conditions');
|
||||
```
|
||||
|
||||
You should give the first `label` text one space at the front.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('fieldset:nth-child(2) > label')?.innerText?.[0], ' ');
|
||||
```
|
||||
|
||||
You should give the second `label` text one space at the front.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('fieldset:nth-child(2) > label:nth-child(2)')?.innerText?.[0], ' ');
|
||||
```
|
||||
|
||||
You should give the third `label` text one space at the front.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('fieldset:nth-child(2) > label:nth-child(3)')?.innerText?.[0], ' ');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Registration Form Project</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://fcc-registration-form.com'>
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input type="text" required /></label>
|
||||
<label>Enter Your Last Name: <input type="text" required /></label>
|
||||
<label>Enter Your Email: <input type="email" required /></label>
|
||||
<label>Create a New Password: <input type="password" pattern="[a-z0-5]{8,}" required /></label>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<fieldset>
|
||||
<label><input type="radio" /></label>
|
||||
<label><input type="radio" /></label>
|
||||
<label><input type="checkbox" required /></label>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<fieldset></fieldset>
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,83 @@
|
||||
---
|
||||
id: 60fab4a123ce4b04526b082b
|
||||
title: Part 25
|
||||
challengeType: 0
|
||||
dashedName: part-25
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
You only want one radio input to be selectable at a time. However, the form does not know the radio inputs are related.
|
||||
|
||||
To relate the radio inputs, give them the same `name` attribute with a value of `account-type`. Now, it is not possible to select both radio inputs at the same time.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should give the first radio input the `name` attribute with a value of `account-type`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('fieldset:nth-child(2) label:nth-child(1) input[type="radio"]')?.name, 'account-type');
|
||||
```
|
||||
|
||||
You should give the second radio input the `name` attribute with a value of `account-type`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('fieldset:nth-child(2) label:nth-child(2) input[type="radio"]')?.name, 'account-type');
|
||||
```
|
||||
|
||||
You should not give the `checkbox` the `name` attribute.
|
||||
|
||||
```js
|
||||
assert.isEmpty(document.querySelector('fieldset:nth-child(2) label:nth-child(3) input[type="checkbox"]')?.name);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Registration Form Project</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://fcc-registration-form.com'>
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input type="text" required /></label>
|
||||
<label>Enter Your Last Name: <input type="text" required /></label>
|
||||
<label>Enter Your Email: <input type="email" required /></label>
|
||||
<label>Create a New Password: <input type="password" pattern="[a-z0-5]{8,}" required /></label>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<fieldset>
|
||||
<label><input type="radio" /> Personal Account</label>
|
||||
<label><input type="radio" /> Business Account</label>
|
||||
<label><input type="checkbox" required /> I accept the terms and conditions</label>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<fieldset></fieldset>
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,85 @@
|
||||
---
|
||||
id: 60fab8367d35de04e5cb7929
|
||||
title: Part 26
|
||||
challengeType: 0
|
||||
dashedName: part-26
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
To finish this `fieldset` off, link the text `terms and conditions` to the following location:
|
||||
|
||||
```md
|
||||
https://www.freecodecamp.org/news/terms-of-service/
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use an `a` element to link to the terms and conditions.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('fieldset:nth-child(2) > label:nth-child(3) > input + a'));
|
||||
```
|
||||
|
||||
You should give the `a` element an `href` of `https://www.freecodecamp.org/news/terms-of-service/`.
|
||||
|
||||
```js
|
||||
assert.match(document.querySelector('fieldset:nth-child(2) > label:nth-child(3) > input + a')?.href, /https:\/\/www\.freecodecamp\.org\/news\/terms-of-service\/?/);
|
||||
```
|
||||
|
||||
You should only wrap the `a` element around the text `terms and conditions`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('fieldset:nth-child(2) > label:nth-child(3) > input + a')?.textContent, 'terms and conditions');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Registration Form Project</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://fcc-registration-form.com'>
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input type="text" required /></label>
|
||||
<label>Enter Your Last Name: <input type="text" required /></label>
|
||||
<label>Enter Your Email: <input type="email" required /></label>
|
||||
<label>Create a New Password: <input type="password" pattern="[a-z0-5]{8,}" required /></label>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<fieldset>
|
||||
<label><input type="radio" name="account-type" /> Personal Account</label>
|
||||
<label><input type="radio" name="account-type" /> Business Account</label>
|
||||
<label><input type="checkbox" required /> I accept the terms and conditions</label>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<fieldset></fieldset>
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,88 @@
|
||||
---
|
||||
id: 60fab9f17fa294054b74228c
|
||||
title: Part 27
|
||||
challengeType: 0
|
||||
dashedName: part-27
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Moving on to the final `fieldset`. What if you wanted to allow a user to upload a profile picture?
|
||||
|
||||
Well, the `input` type `file` allows just that. Add a `label` with the text `Upload a profile picture: `, and add an `input` accepting a file upload.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add a `label` with the text `Upload a profile picture: `.
|
||||
|
||||
```js
|
||||
assert.match(document.querySelector('fieldset:nth-child(3) > label')?.innerText, /Upload a profile picture:/i);
|
||||
```
|
||||
|
||||
You should nest an `input` element inside the `label` element.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('fieldset:nth-child(3) > label > input'));
|
||||
```
|
||||
|
||||
You should give the `input` element a `type` of `file`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('fieldset:nth-child(3) > label > input')?.type, 'file');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Registration Form Project</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://fcc-registration-form.com'>
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input type="text" required /></label>
|
||||
<label>Enter Your Last Name: <input type="text" required /></label>
|
||||
<label>Enter Your Email: <input type="email" required /></label>
|
||||
<label>Create a New Password: <input type="password" pattern="[a-z0-5]{8,}" required /></label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label><input type="radio" name="account-type" /> Personal Account</label>
|
||||
<label><input type="radio" name="account-type" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" required /> I accept the
|
||||
<a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<fieldset>
|
||||
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,102 @@
|
||||
---
|
||||
id: 60fabf0dd4959805dbae09e6
|
||||
title: Part 28
|
||||
challengeType: 0
|
||||
dashedName: part-28
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Add another `label` after the first, with the text `Input your age (years): `. Then, nest an `input` with the `type` of `number`.
|
||||
|
||||
As we do not want users under the age of 13 to register, add a `min` attribute to the `input` with a value of `13`. Also, we can probably assume users over the age of 120 will not register; add a `max` attribute with a value of `120`.
|
||||
|
||||
Now, if someone tries to submit the form with values outside of the range, a warning will appear, and the form will not submit. Give it a try.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add a `label` to the third `fieldset`, after the existing `label`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('fieldset:nth-child(3) > label + label'));
|
||||
```
|
||||
|
||||
You should give the `label` the text `Input your age (years): `.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('fieldset:nth-child(3) > label:nth-child(2)')?.textContent, 'Input your age (years): ');
|
||||
```
|
||||
|
||||
You should give the `label` an `input` with `type` of `number`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('fieldset:nth-child(3) > label:nth-child(2) > input[type="number"]'));
|
||||
```
|
||||
|
||||
You should give the `input` a `min` attribute with a value of `13`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('fieldset:nth-child(3) > label:nth-child(2) > input[type="number"]')?.min, '13');
|
||||
```
|
||||
|
||||
You should give the `input` a `max` attribute with a value of `120`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('fieldset:nth-child(3) > label:nth-child(2) > input[type="number"]')?.max, '120');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Registration Form Project</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://fcc-registration-form.com'>
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input type="text" required /></label>
|
||||
<label>Enter Your Last Name: <input type="text" required /></label>
|
||||
<label>Enter Your Email: <input type="email" required /></label>
|
||||
<label>Create a New Password: <input type="password" pattern="[a-z0-5]{8,}" required /></label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label><input type="radio" name="account-type" /> Personal Account</label>
|
||||
<label><input type="radio" name="account-type" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<fieldset>
|
||||
<label>Upload a profile picture: <input type="file" /></label>
|
||||
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,84 @@
|
||||
---
|
||||
id: 60fac4095512d3066053d73c
|
||||
title: Part 29
|
||||
challengeType: 0
|
||||
dashedName: part-29
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Adding a dropdown to the form is easy with the `select` element. The `select` element is a container for a group of `option` elements, and the `option` element acts as a label for each dropdown option. Both elements require closing tags.
|
||||
|
||||
Start, by adding a `select` element below the two `input` elements. Then, nest 5 `option` elements within the `select` element.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add a `select` element to the third `fieldset`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('fieldset:nth-child(3) > select'));
|
||||
```
|
||||
|
||||
You should nest 5 `option` elements inside the `select` element.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('fieldset:nth-child(3) > select > option')?.length, 5);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Registration Form Project</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://fcc-registration-form.com'>
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input type="text" required /></label>
|
||||
<label>Enter Your Last Name: <input type="text" required /></label>
|
||||
<label>Enter Your Email: <input type="email" required /></label>
|
||||
<label>Create a New Password: <input type="password" pattern="[a-z0-5]{8,}" required /></label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label><input type="radio" name="account-type" /> Personal Account</label>
|
||||
<label><input type="radio" name="account-type" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<fieldset>
|
||||
<label>Upload a profile picture: <input type="file" /></label>
|
||||
<label>Input your age (years): <input type="number" min="13" max="120" />
|
||||
</label>
|
||||
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,94 @@
|
||||
---
|
||||
id: 60fac56271087806def55b33
|
||||
title: Part 30
|
||||
challengeType: 0
|
||||
dashedName: part-30
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Nest the `select` element within a `label` element with the text `How did you hear about us?`. The text should come before the `select` element.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should nest only the `select` element within a `label` element.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('fieldset:nth-child(3) > label:nth-child(3) > select'));
|
||||
```
|
||||
|
||||
You should give the `label` element the text `How did you hear about us?`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('fieldset:nth-child(3) > label:nth-child(3)')?.innerText?.trim(), 'How did you hear about us?');
|
||||
```
|
||||
|
||||
You should place the text before the `select` element.
|
||||
|
||||
```js
|
||||
assert.match(document.querySelector('fieldset:nth-child(3) > label:nth-child(3)')?.innerHTML?.replace(/[\t\n]+/g, ''), /^How did you hear about us\?/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Registration Form Project</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://fcc-registration-form.com'>
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input type="text" required /></label>
|
||||
<label>Enter Your Last Name: <input type="text" required /></label>
|
||||
<label>Enter Your Email: <input type="email" required /></label>
|
||||
<label>Create a New Password: <input type="password" pattern="[a-z0-5]{8,}" required /></label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label><input type="radio" name="account-type" /> Personal Account</label>
|
||||
<label><input type="radio" name="account-type" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<fieldset>
|
||||
<label>Upload a profile picture: <input type="file" /></label>
|
||||
<label>Input your age (years): <input type="number" min="13" max="120" />
|
||||
</label>
|
||||
<select>
|
||||
<option></option>
|
||||
<option></option>
|
||||
<option></option>
|
||||
<option></option>
|
||||
<option></option>
|
||||
</select>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,116 @@
|
||||
---
|
||||
id: 60fac8d7fdfaee0796934f20
|
||||
title: Part 31
|
||||
challengeType: 0
|
||||
dashedName: part-31
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The dropdown options are currently empty. To give them content, add the following text to each subsequent `option` element:
|
||||
|
||||
```md
|
||||
(select one)
|
||||
freeCodeCamp News
|
||||
freeCodeCamp YouTube
|
||||
freeCodeCamp Forum
|
||||
Other
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
You should give the first `option` element the text `(select one)`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(3) option')?.[0]?.textContent, '(select one)');
|
||||
```
|
||||
|
||||
You should give the second `option` element the text `freeCodeCamp News`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(3) option')?.[1]?.textContent, 'freeCodeCamp News');
|
||||
```
|
||||
|
||||
You should give the third `option` element the text `freeCodeCamp YouTube`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(3) option')?.[2]?.textContent, 'freeCodeCamp YouTube');
|
||||
```
|
||||
|
||||
You should give the fourth `option` element the text `freeCodeCamp Forum`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(3) option')?.[3]?.textContent, 'freeCodeCamp Forum');
|
||||
```
|
||||
|
||||
You should give the fifth `option` element the text `Other`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(3) option')?.[4]?.textContent, 'Other');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Registration Form Project</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://fcc-registration-form.com'>
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input type="text" required /></label>
|
||||
<label>Enter Your Last Name: <input type="text" required /></label>
|
||||
<label>Enter Your Email: <input type="email" required /></label>
|
||||
<label>Create a New Password: <input type="password" pattern="[a-z0-5]{8,}" required /></label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label><input type="radio" name="account-type" /> Personal Account</label>
|
||||
<label><input type="radio" name="account-type" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<fieldset>
|
||||
<label>Upload a profile picture: <input type="file" /></label>
|
||||
<label>Input your age (years): <input type="number" min="13" max="120" />
|
||||
</label>
|
||||
<label>How did you hear about us?
|
||||
<select>
|
||||
<option></option>
|
||||
<option></option>
|
||||
<option></option>
|
||||
<option></option>
|
||||
<option></option>
|
||||
</select>
|
||||
</label>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,110 @@
|
||||
---
|
||||
id: 60faca286cb48b07f6482970
|
||||
title: Part 32
|
||||
challengeType: 0
|
||||
dashedName: part-32
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Submitting the form with an option selected would not send a useful value to the server. As such, each `option` needs to be given a `value` attribute. Without which, the text content of the `option` will be submitted to the server.
|
||||
|
||||
Give the first `option` a `value` of `""`, and the subsequent `option` elements `value` attributes from `1` to `4`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should give the first `option` a `value` of `""`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(3) option')?.[0]?.value, '');
|
||||
```
|
||||
|
||||
You should give the second `option` a `value` of `1`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(3) option')?.[1]?.value, '1');
|
||||
```
|
||||
|
||||
You should give the third `option` a `value` of `2`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(3) option')?.[2]?.value, '2');
|
||||
```
|
||||
|
||||
You should give the fourth `option` a `value` of `3`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(3) option')?.[3]?.value, '3');
|
||||
```
|
||||
|
||||
You should give the fifth `option` a `value` of `4`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(3) option')?.[4]?.value, '4');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Registration Form Project</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://fcc-registration-form.com'>
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input type="text" required /></label>
|
||||
<label>Enter Your Last Name: <input type="text" required /></label>
|
||||
<label>Enter Your Email: <input type="email" required /></label>
|
||||
<label>Create a New Password: <input type="password" pattern="[a-z0-5]{8,}" required /></label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label><input type="radio" name="account-type" /> Personal Account</label>
|
||||
<label><input type="radio" name="account-type" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<fieldset>
|
||||
<label>Upload a profile picture: <input type="file" /></label>
|
||||
<label>Input your age (years): <input type="number" min="13" max="120" />
|
||||
</label>
|
||||
<label>How did you hear about us?
|
||||
<select>
|
||||
<option>(select one)</option>
|
||||
<option>freeCodeCamp News</option>
|
||||
<option>freeCodeCamp YouTube Channel</option>
|
||||
<option>freeCodeCamp Forum</option>
|
||||
<option>Other</option>
|
||||
</select>
|
||||
</label>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,105 @@
|
||||
---
|
||||
id: 60facde2d0dc61085b41063f
|
||||
title: Part 33
|
||||
challengeType: 0
|
||||
dashedName: part-33
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The `textarea` element acts like an `input` element of type `text`, but comes with the added benefit of being able to receive multi-line text, and an initial number of text rows and columns.
|
||||
|
||||
To allow users to register with a bio, add a `label` with the text `Provide a bio:` followed by a `textarea` element.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add a `label` element within the third `fieldset`, after the existing `label` elements.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('fieldset:nth-child(3) > label:nth-child(4)'));
|
||||
```
|
||||
|
||||
You should give the `label` a text of `Provide a bio:`.
|
||||
|
||||
```js
|
||||
assert.match(document.querySelector('fieldset:nth-child(3) > label:nth-child(4)')?.innerText, /Provide a bio/);
|
||||
```
|
||||
|
||||
You should nest a `textarea` element within the `label`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('fieldset:nth-child(3) > label:nth-child(4) > textarea'));
|
||||
```
|
||||
|
||||
You should give the `textarea` element opening and closing tags.
|
||||
|
||||
```js
|
||||
assert.match(code, /<textarea\s*>[\s\S]*<\/textarea\s*>/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Registration Form Project</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://fcc-registration-form.com'>
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input type="text" required /></label>
|
||||
<label>Enter Your Last Name: <input type="text" required /></label>
|
||||
<label>Enter Your Email: <input type="email" required /></label>
|
||||
<label>Create a New Password: <input type="password" pattern="[a-z0-5]{8,}" required /></label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label><input type="radio" name="account-type" /> Personal Account</label>
|
||||
<label><input type="radio" name="account-type" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<fieldset>
|
||||
<label>Upload a profile picture: <input type="file" /></label>
|
||||
<label>Input your age (years): <input type="number" min="13" max="120" />
|
||||
</label>
|
||||
<label>How did you hear about us?
|
||||
<select>
|
||||
<option value="">(select one)</option>
|
||||
<option value="1">freeCodeCamp News</option>
|
||||
<option value="2">freeCodeCamp YouTube Channel</option>
|
||||
<option value="3">freeCodeCamp Forum</option>
|
||||
<option value="4">Other</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,95 @@
|
||||
---
|
||||
id: 60facf914c7b9b08d7510c2c
|
||||
title: Part 34
|
||||
challengeType: 0
|
||||
dashedName: part-34
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The `textarea` appears too small. To give it an initial size, you can add the `rows` and `cols` attributes.
|
||||
|
||||
Add an initial size of `3` rows and `30` columns.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should give the `textarea` a `rows` attribute with value `3`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('fieldset:nth-child(3) > label:nth-child(4) > textarea')?.rows, 3);
|
||||
```
|
||||
|
||||
You should give the textarea a `cols` attribute with value `30`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('fieldset:nth-child(3) > label:nth-child(4) > textarea')?.cols, 30);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Registration Form Project</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://fcc-registration-form.com'>
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input type="text" required /></label>
|
||||
<label>Enter Your Last Name: <input type="text" required /></label>
|
||||
<label>Enter Your Email: <input type="email" required /></label>
|
||||
<label>Create a New Password: <input type="password" pattern="[a-z0-5]{8,}" required /></label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label><input type="radio" name="account-type" /> Personal Account</label>
|
||||
<label><input type="radio" name="account-type" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<fieldset>
|
||||
<label>Upload a profile picture: <input type="file" /></label>
|
||||
<label>Input your age (years): <input type="number" min="13" max="120" />
|
||||
</label>
|
||||
<label>How did you hear about us?
|
||||
<select>
|
||||
<option value="">(select one)</option>
|
||||
<option value="1">freeCodeCamp News</option>
|
||||
<option value="2">freeCodeCamp YouTube Channel</option>
|
||||
<option value="3">freeCodeCamp Forum</option>
|
||||
<option value="4">Other</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>Provide a bio:
|
||||
<textarea></textarea>
|
||||
</label>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,95 @@
|
||||
---
|
||||
id: 60fad0a812d9890938524f50
|
||||
title: Part 35
|
||||
challengeType: 0
|
||||
dashedName: part-35
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
To give Campers an idea of what to put in their bio, the `placeholder` attribute is used. The `placeholder` accepts a text value, which is displayed until the user starts typing.
|
||||
|
||||
Give the `textarea` a `placeholder` of `I like coding on the beach...`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should give the `textarea` a `placeholder` attribute.
|
||||
|
||||
```js
|
||||
assert.isNotEmpty(document.querySelector('fieldset:nth-child(3) > label:nth-child(4) > textarea')?.placeholder);
|
||||
```
|
||||
|
||||
You should give the `placeholder` a value of `I like coding on the beach...`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('fieldset:nth-child(3) > label:nth-child(4) > textarea')?.placeholder, 'I like coding on the beach...');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Registration Form Project</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://fcc-registration-form.com'>
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input type="text" required /></label>
|
||||
<label>Enter Your Last Name: <input type="text" required /></label>
|
||||
<label>Enter Your Email: <input type="email" required /></label>
|
||||
<label>Create a New Password: <input type="password" pattern="[a-z0-5]{8,}" required /></label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label><input type="radio" name="account-type" /> Personal Account</label>
|
||||
<label><input type="radio" name="account-type" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<fieldset>
|
||||
<label>Upload a profile picture: <input type="file" /></label>
|
||||
<label>Input your age (years): <input type="number" min="13" max="120" />
|
||||
</label>
|
||||
<label>How did you hear about us?
|
||||
<select>
|
||||
<option value="">(select one)</option>
|
||||
<option value="1">freeCodeCamp News</option>
|
||||
<option value="2">freeCodeCamp YouTube Channel</option>
|
||||
<option value="3">freeCodeCamp Forum</option>
|
||||
<option value="4">Other</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>Provide a bio:
|
||||
<textarea rows="3" cols="30"></textarea>
|
||||
</label>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,155 @@
|
||||
---
|
||||
id: 60fad1cafcde010995e15306
|
||||
title: Part 36
|
||||
challengeType: 0
|
||||
dashedName: part-36
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
With form submissions, it is useful, and good practice, to provide each submittable element with a `name` attribute. This attribute is used to identify the element in the form submission.
|
||||
|
||||
Go ahead, and give each submittable element a unique `name` attribute of your choosing. _Except for the two `radio` inputs._
|
||||
|
||||
# --hints--
|
||||
|
||||
You should give the `input` expecting a first name a `name` attribtute. _P.S. I would have chosen `first-name`_
|
||||
|
||||
```js
|
||||
assert.isNotEmpty(document.querySelector('fieldset:nth-child(1) > label:nth-child(1) > input')?.name);
|
||||
```
|
||||
|
||||
You should give the `input` expecting a last name a `name` attribute. _P.S. I would have chosen `last-name`_
|
||||
|
||||
```js
|
||||
assert.isNotEmpty(document.querySelector('fieldset:nth-child(1) > label:nth-child(2) > input')?.name);
|
||||
```
|
||||
|
||||
You should give the `email` a `name` attribute. _P.S. I would have chosen `email`_
|
||||
|
||||
```js
|
||||
assert.isNotEmpty(document.querySelector('input[type="email"]')?.name);
|
||||
```
|
||||
|
||||
You should give the `password` a `name` attribute. _P.S. I would have chosen `password`_
|
||||
|
||||
```js
|
||||
assert.isNotEmpty(document.querySelector('input[type="password"]')?.name);
|
||||
```
|
||||
|
||||
You should give the `checkbox` a `name` attribute. _P.S. I would have chosen `terms`_
|
||||
|
||||
```js
|
||||
assert.isNotEmpty(document.querySelector('input[type="checkbox"]')?.name);
|
||||
```
|
||||
|
||||
You should give the `file` a `name` attribute. _P.S. I would have chosen `file`_
|
||||
|
||||
```js
|
||||
assert.isNotEmpty(document.querySelector('input[type="file"]')?.name);
|
||||
```
|
||||
|
||||
You should give the `number` a `name` attribute. _P.S. I would have chosen `age`_
|
||||
|
||||
```js
|
||||
assert.isNotEmpty(document.querySelector('input[type="number"]')?.name);
|
||||
```
|
||||
|
||||
You should give the `select` element a `name` attribute. _P.S. I would have chosen `referrer`_
|
||||
|
||||
```js
|
||||
assert.isNotEmpty(document.querySelector('select')?.name);
|
||||
```
|
||||
|
||||
You should give the `textarea` element a `name` attribute. _P.S. I would have chosen `bio`_
|
||||
|
||||
```js
|
||||
assert.isNotEmpty(document.querySelector('textarea')?.name);
|
||||
```
|
||||
|
||||
You should not give any of the `option` elements a `name` attribute.
|
||||
|
||||
```js
|
||||
[...document.querySelectorAll('option')]?.forEach(option => assert.isUndefined(option?.name));
|
||||
```
|
||||
|
||||
You should not give any of the `label` elements a `name` attribute.
|
||||
|
||||
```js
|
||||
[...document.querySelectorAll('label')]?.forEach(label => assert.isUndefined(label?.name));
|
||||
```
|
||||
|
||||
You should not give any of the `fieldset` elements a `name` attribute.
|
||||
|
||||
```js
|
||||
[...document.querySelectorAll('fieldset')]?.forEach(fieldset => assert.isEmpty(fieldset?.name));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Registration Form Project</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://fcc-registration-form.com'>
|
||||
--fcc-editable-region--
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input type="text" required /></label>
|
||||
<label>Enter Your Last Name: <input type="text" required /></label>
|
||||
<label>Enter Your Email: <input type="email" required /></label>
|
||||
<label>Create a New Password: <input type="password" pattern="[a-z0-5]{8,}" required /></label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label><input type="radio" name="account-type" /> Personal Account</label>
|
||||
<label><input type="radio" name="account-type" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label>Upload a profile picture: <input type="file" /></label>
|
||||
<label>Input your age (years): <input type="number" min="13" max="120" />
|
||||
</label>
|
||||
<label>How did you hear about us?
|
||||
<select>
|
||||
<option value="">(select one)</option>
|
||||
<option value="1">freeCodeCamp News</option>
|
||||
<option value="2">freeCodeCamp YouTube Channel</option>
|
||||
<option value="3">freeCodeCamp Forum</option>
|
||||
<option value="4">Other</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>Provide a bio:
|
||||
<textarea rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
|
||||
</label>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,102 @@
|
||||
---
|
||||
id: 60fad6dfcc0d930a59becf12
|
||||
title: Part 37
|
||||
challengeType: 0
|
||||
dashedName: part-37
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The HTML for the registration form is finished. Now, you can spruce it up a bit.
|
||||
|
||||
Start by changing the font to `Tahoma`, and the font size to `16px` in the `body`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `font-family` property to change the font.
|
||||
|
||||
```js
|
||||
assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('body')?.fontFamily);
|
||||
```
|
||||
|
||||
You should set the `font-family` property to `Tahoma`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.fontFamily, 'Tahoma');
|
||||
```
|
||||
|
||||
You should set the `font-size` property to `16px`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.fontSize, '16px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Registration Form Project</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://fcc-registration-form.com'>
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input type="text" name="first-name" required /></label>
|
||||
<label>Enter Your Last Name: <input type="text" name="last-name" required /></label>
|
||||
<label>Enter Your Email: <input type="email" name="email" required /></label>
|
||||
<label>Create a New Password: <input type="password" name="password" pattern="[a-z0-5]{8,}" required /></label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label><input type="radio" name="account-type" /> Personal Account</label>
|
||||
<label><input type="radio" name="account-type" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" name="terms" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label>Upload a profile picture: <input type="file" name="file" /></label>
|
||||
<label>Input your age (years): <input type="number" name="age" min="13" max="120" />
|
||||
</label>
|
||||
<label>How did you hear about us?
|
||||
<select name="referrer">
|
||||
<option value="">(select one)</option>
|
||||
<option value="1">freeCodeCamp News</option>
|
||||
<option value="2">freeCodeCamp YouTube Channel</option>
|
||||
<option value="3">freeCodeCamp Forum</option>
|
||||
<option value="4">Other</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>Provide a bio:
|
||||
<textarea name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
|
||||
</label>
|
||||
</fieldset>
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
--fcc-editable-region--
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,103 @@
|
||||
---
|
||||
id: 60fad8e6148f310bba7890b1
|
||||
title: Part 38
|
||||
challengeType: 0
|
||||
dashedName: part-38
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Center the `h1` and `p` elements by giving them a `margin` of `1em auto`. Then, center align the text as well.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use a comma-separated element selector to style the `h1` and `p` elements.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('h1, p'));
|
||||
```
|
||||
|
||||
You should use a `margin` of `1em auto` to center the `h1` and `p` elements.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('h1, p')?.margin, '1em auto');
|
||||
```
|
||||
|
||||
You should use a `text-align` of `center` to center the `h1` and `p` text.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('h1, p')?.textAlign, 'center');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Registration Form Project</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://fcc-registration-form.com'>
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input type="text" name="first-name" required /></label>
|
||||
<label>Enter Your Last Name: <input type="text" name="last-name" required /></label>
|
||||
<label>Enter Your Email: <input type="email" name="email" required /></label>
|
||||
<label>Create a New Password: <input type="password" name="password" pattern="[a-z0-5]{8,}" required /></label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label><input type="radio" name="account-type" /> Personal Account</label>
|
||||
<label><input type="radio" name="account-type" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" name="terms" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label>Upload a profile picture: <input type="file" name="file" /></label>
|
||||
<label>Input your age (years): <input type="number" name="age" min="13" max="120" />
|
||||
</label>
|
||||
<label>How did you hear about us?
|
||||
<select name="referrer">
|
||||
<option value="">(select one)</option>
|
||||
<option value="1">freeCodeCamp News</option>
|
||||
<option value="2">freeCodeCamp YouTube Channel</option>
|
||||
<option value="3">freeCodeCamp Forum</option>
|
||||
<option value="4">Other</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>Provide a bio:
|
||||
<textarea name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
|
||||
</label>
|
||||
</fieldset>
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
font-family: Tahoma;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,120 @@
|
||||
---
|
||||
id: 60fad99e09f9d30c1657e790
|
||||
title: Part 39
|
||||
challengeType: 0
|
||||
dashedName: part-39
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Center the `form` element, by giving it a `margin` of `0 auto`. Then, fix its size to a maximum `width` of `500px`, and a minimum width of `300px`. In between that range, allow it to have a `width` of `60vw`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use a `form` selector to style the `form` element.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('form'));
|
||||
```
|
||||
|
||||
You should give the `form` a `margin` of `0 auto`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('form')?.margin, '0px auto');
|
||||
```
|
||||
|
||||
You should give the `form` a `max-width` of `500px`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('form')?.maxWidth, '500px');
|
||||
```
|
||||
|
||||
You should give the `form` a `min-width` of `300px`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('form')?.minWidth, '300px');
|
||||
```
|
||||
|
||||
You should give the `form` a `width` of `60vw`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('form')?.width, '60vw');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Registration Form Project</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://fcc-registration-form.com'>
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input type="text" name="first-name" required /></label>
|
||||
<label>Enter Your Last Name: <input type="text" name="last-name" required /></label>
|
||||
<label>Enter Your Email: <input type="email" name="email" required /></label>
|
||||
<label>Create a New Password: <input type="password" name="password" pattern="[a-z0-5]{8,}" required /></label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label><input type="radio" name="account-type" /> Personal Account</label>
|
||||
<label><input type="radio" name="account-type" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" name="terms" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label>Upload a profile picture: <input type="file" name="file" /></label>
|
||||
<label>Input your age (years): <input type="number" name="age" min="13" max="120" />
|
||||
</label>
|
||||
<label>How did you hear about us?
|
||||
<select name="referrer">
|
||||
<option value="">(select one)</option>
|
||||
<option value="1">freeCodeCamp News</option>
|
||||
<option value="2">freeCodeCamp YouTube Channel</option>
|
||||
<option value="3">freeCodeCamp Forum</option>
|
||||
<option value="4">Other</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>Provide a bio:
|
||||
<textarea name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
|
||||
</label>
|
||||
</fieldset>
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
font-family: Tahoma;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h1, p {
|
||||
margin: 1em auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,121 @@
|
||||
---
|
||||
id: 60fadb18058e950c73925279
|
||||
title: Part 40
|
||||
challengeType: 0
|
||||
dashedName: part-40
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
During development, it is useful to see the `fieldset` default borders. However, they make the content appear too separated.
|
||||
|
||||
Remove the `border`, and add `2rem` of padding only to the top and bottom of each `fieldset`. Be sure to remove the `padding` from the left and right.
|
||||
|
||||
# --hints--
|
||||
|
||||
You can use either a value of `none` or `0` to remove the `border`.
|
||||
|
||||
```js
|
||||
assert.match(new __helpers.CSSHelp(document).getStyle('fieldset')?.border, /(none)|(0px)/);
|
||||
```
|
||||
|
||||
You should add `padding` of `2rem` to the top and bottom of each `fieldset`.
|
||||
|
||||
```js
|
||||
const fieldset = new __helpers.CSSHelp(document).getStyle('fieldset')
|
||||
assert.equal(fieldset?.paddingTop, '2rem');
|
||||
assert.equal(fieldset?.paddingBottom, '2rem');
|
||||
```
|
||||
|
||||
You should remove the `padding` from the left and right of each `fieldset`.
|
||||
|
||||
```js
|
||||
const fieldset = new __helpers.CSSHelp(document).getStyle('fieldset')
|
||||
assert.equal(fieldset?.paddingLeft, '0px');
|
||||
assert.equal(fieldset?.paddingRight, '0px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Registration Form Project</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://fcc-registration-form.com'>
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input type="text" name="first-name" required /></label>
|
||||
<label>Enter Your Last Name: <input type="text" name="last-name" required /></label>
|
||||
<label>Enter Your Email: <input type="email" name="email" required /></label>
|
||||
<label>Create a New Password: <input type="password" name="password" pattern="[a-z0-5]{8,}" required /></label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label><input type="radio" name="account-type" /> Personal Account</label>
|
||||
<label><input type="radio" name="account-type" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" name="terms" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label>Upload a profile picture: <input type="file" name="file" /></label>
|
||||
<label>Input your age (years): <input type="number" name="age" min="13" max="120" />
|
||||
</label>
|
||||
<label>How did you hear about us?
|
||||
<select name="referrer">
|
||||
<option value="">(select one)</option>
|
||||
<option value="1">freeCodeCamp News</option>
|
||||
<option value="2">freeCodeCamp YouTube Channel</option>
|
||||
<option value="3">freeCodeCamp Forum</option>
|
||||
<option value="4">Other</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>Provide a bio:
|
||||
<textarea name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
|
||||
</label>
|
||||
</fieldset>
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
font-family: Tahoma;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h1, p {
|
||||
margin: 1em auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 60vw;
|
||||
max-width: 500px;
|
||||
min-width: 300px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,114 @@
|
||||
---
|
||||
id: 60fadce90f85c50d0bb0dd4f
|
||||
title: Part 41
|
||||
challengeType: 0
|
||||
dashedName: part-41
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
To give the `fieldset` elements a bit of separation, select all but the last `fieldset` element, and give them a `border-bottom` of `3px solid #3b3b4f`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You can use the `:not(:last-of-type)` pseudo-class to select all but the last element.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('fieldset:not(:last-of-type)'));
|
||||
```
|
||||
|
||||
You should give the `fieldset` elements a `border-bottom` of `3px solid #3b3b4f`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('fieldset:not(:last-of-type)')?.borderBottom, '3px solid rgb(59, 59, 79)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Registration Form Project</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://fcc-registration-form.com'>
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input type="text" name="first-name" required /></label>
|
||||
<label>Enter Your Last Name: <input type="text" name="last-name" required /></label>
|
||||
<label>Enter Your Email: <input type="email" name="email" required /></label>
|
||||
<label>Create a New Password: <input type="password" name="password" pattern="[a-z0-5]{8,}" required /></label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label><input type="radio" name="account-type" /> Personal Account</label>
|
||||
<label><input type="radio" name="account-type" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" name="terms" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label>Upload a profile picture: <input type="file" name="file" /></label>
|
||||
<label>Input your age (years): <input type="number" name="age" min="13" max="120" />
|
||||
</label>
|
||||
<label>How did you hear about us?
|
||||
<select name="referrer">
|
||||
<option value="">(select one)</option>
|
||||
<option value="1">freeCodeCamp News</option>
|
||||
<option value="2">freeCodeCamp YouTube Channel</option>
|
||||
<option value="3">freeCodeCamp Forum</option>
|
||||
<option value="4">Other</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>Provide a bio:
|
||||
<textarea name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
|
||||
</label>
|
||||
</fieldset>
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
font-family: Tahoma;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h1, p {
|
||||
margin: 1em auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 60vw;
|
||||
max-width: 500px;
|
||||
min-width: 300px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: none;
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,151 @@
|
||||
---
|
||||
id: 60fadd972e6ffe0d6858fa2d
|
||||
title: Part 42
|
||||
challengeType: 0
|
||||
dashedName: part-42
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
It would be nicer to have the `label` text appear above the form elements.
|
||||
|
||||
Select all `input`, `textarea`, and `select` elements, and make them take up the full width of their parent elements.
|
||||
|
||||
Also, add `10px` of `margin` to the top of the selected elements. Set the other margins to `0`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use a comma separated element selector to select the `input`, `textarea`, and `select` elements.
|
||||
|
||||
```js
|
||||
assert.isTrue(['input, textarea, select', 'input, select, textarea', 'select, input, textarea', 'select, textarea, input', 'textarea, input, select', 'textarea, select, input'].some(selector => new __helpers.CSSHelp(document).getStyle(selector)));
|
||||
```
|
||||
|
||||
You should set the `width` property to `100%`.
|
||||
|
||||
```js
|
||||
const selFunc = (selector) => new __helpers.CSSHelp(document).getStyle(selector);
|
||||
assert.equal(selFunc(['input, textarea, select', 'input, select, textarea', 'select, input, textarea', 'select, textarea, input', 'textarea, input, select', 'textarea, select, input'].find(selFunc))?.width, '100%');
|
||||
```
|
||||
|
||||
You should set the `margin-top` property to `10px`.
|
||||
|
||||
```js
|
||||
const selFunc = (selector) => new __helpers.CSSHelp(document).getStyle(selector);
|
||||
assert.equal(selFunc(['input, textarea, select', 'input, select, textarea', 'select, input, textarea', 'select, textarea, input', 'textarea, input, select', 'textarea, select, input'].find(selFunc))?.marginTop, '10px');
|
||||
```
|
||||
|
||||
You should set the `margin-bottom` property to `0`.
|
||||
|
||||
```js
|
||||
const selFunc = (selector) => new __helpers.CSSHelp(document).getStyle(selector);
|
||||
assert.equal(selFunc(['input, textarea, select', 'input, select, textarea', 'select, input, textarea', 'select, textarea, input', 'textarea, input, select', 'textarea, select, input'].find(selFunc))?.marginBottom, '0px');
|
||||
```
|
||||
|
||||
You should set the `margin-left` property to `0`.
|
||||
|
||||
```js
|
||||
const selFunc = (selector) => new __helpers.CSSHelp(document).getStyle(selector);
|
||||
assert.equal(selFunc(['input, textarea, select', 'input, select, textarea', 'select, input, textarea', 'select, textarea, input', 'textarea, input, select', 'textarea, select, input'].find(selFunc))?.marginLeft, '0px');
|
||||
```
|
||||
|
||||
You should set the `margin-right` property to `0`.
|
||||
|
||||
```js
|
||||
const selFunc = (selector) => new __helpers.CSSHelp(document).getStyle(selector);
|
||||
assert.equal(selFunc(['input, textarea, select', 'input, select, textarea', 'select, input, textarea', 'select, textarea, input', 'textarea, input, select', 'textarea, select, input'].find(selFunc))?.marginRight, '0px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Registration Form Project</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://fcc-registration-form.com'>
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input type="text" name="first-name" required /></label>
|
||||
<label>Enter Your Last Name: <input type="text" name="last-name" required /></label>
|
||||
<label>Enter Your Email: <input type="email" name="email" required /></label>
|
||||
<label>Create a New Password: <input type="password" name="password" pattern="[a-z0-5]{8,}" required /></label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label><input type="radio" name="account-type" /> Personal Account</label>
|
||||
<label><input type="radio" name="account-type" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" name="terms" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label>Upload a profile picture: <input type="file" name="file" /></label>
|
||||
<label>Input your age (years): <input type="number" name="age" min="13" max="120" />
|
||||
</label>
|
||||
<label>How did you hear about us?
|
||||
<select name="referrer">
|
||||
<option value="">(select one)</option>
|
||||
<option value="1">freeCodeCamp News</option>
|
||||
<option value="2">freeCodeCamp YouTube Channel</option>
|
||||
<option value="3">freeCodeCamp Forum</option>
|
||||
<option value="4">Other</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>Provide a bio:
|
||||
<textarea name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
|
||||
</label>
|
||||
</fieldset>
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
font-family: Tahoma;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h1, p {
|
||||
margin: 1em auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 60vw;
|
||||
max-width: 500px;
|
||||
min-width: 300px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: none;
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
fieldset:not(:last-of-type) {
|
||||
border-bottom: 3px solid #3b3b4f;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@ -0,0 +1,131 @@
|
||||
---
|
||||
id: 60fadfa2b540b70dcfa8b771
|
||||
title: Part 43
|
||||
challengeType: 0
|
||||
dashedName: part-43
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
For the second `fieldset`, you want the `input` and `label` text to appear on the same line.
|
||||
|
||||
Start, by giving the `input` elements in the second `fieldset` a class of `inline`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should give the first `input` a class of `inline`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('fieldset:nth-child(2) input')?.[0]?.classList?.contains('inline'));
|
||||
```
|
||||
|
||||
You should give the second `input` a class of `inline`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('fieldset:nth-child(2) input')?.[1]?.classList?.contains('inline'));
|
||||
```
|
||||
|
||||
You should give the third `input` a class of `inline`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('fieldset:nth-child(2) input')?.[2]?.classList?.contains('inline'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Registration Form Project</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://fcc-registration-form.com'>
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input type="text" name="first-name" required /></label>
|
||||
<label>Enter Your Last Name: <input type="text" name="last-name" required /></label>
|
||||
<label>Enter Your Email: <input type="email" name="email" required /></label>
|
||||
<label>Create a New Password: <input type="password" name="password" pattern="[a-z0-5]{8,}" required /></label>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<fieldset>
|
||||
<label><input type="radio" name="account-type" /> Personal Account</label>
|
||||
<label><input type="radio" name="account-type" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" name="terms" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<fieldset>
|
||||
<label>Upload a profile picture: <input type="file" name="file" /></label>
|
||||
<label>Input your age (years): <input type="number" name="age" min="13" max="120" />
|
||||
</label>
|
||||
<label>How did you hear about us?
|
||||
<select name="referrer">
|
||||
<option value="">(select one)</option>
|
||||
<option value="1">freeCodeCamp News</option>
|
||||
<option value="2">freeCodeCamp YouTube Channel</option>
|
||||
<option value="3">freeCodeCamp Forum</option>
|
||||
<option value="4">Other</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>Provide a bio:
|
||||
<textarea name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
|
||||
</label>
|
||||
</fieldset>
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
font-family: Tahoma;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h1, p {
|
||||
margin: 1em auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 60vw;
|
||||
max-width: 500px;
|
||||
min-width: 300px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: none;
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
fieldset:not(:last-of-type) {
|
||||
border-bottom: 3px solid #3b3b4f;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
margin: 10px 0 0 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,125 @@
|
||||
---
|
||||
id: 60fc219d333e37046f474a6e
|
||||
title: Part 44
|
||||
challengeType: 0
|
||||
dashedName: part-44
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Select only the `.inline` elements, and give them `width` of `unset`. This will remove the earlier rule which set all the `input` elements to `width: 100%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `.inline` selector.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('.inline'));
|
||||
```
|
||||
|
||||
You should give the `.inline` elements a `width` of `unset`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.inline')?.width, 'unset');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Registration Form Project</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://fcc-registration-form.com'>
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input type="text" name="first-name" required /></label>
|
||||
<label>Enter Your Last Name: <input type="text" name="last-name" required /></label>
|
||||
<label>Enter Your Email: <input type="email" name="email" required /></label>
|
||||
<label>Create a New Password: <input type="password" name="password" pattern="[a-z0-5]{8,}" required /></label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label><input type="radio" name="account-type" class="inline" /> Personal Account</label>
|
||||
<label><input type="radio" name="account-type" class="inline" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" name="terms" class="inline" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label>Upload a profile picture: <input type="file" name="file" /></label>
|
||||
<label>Input your age (years): <input type="number" name="age" min="13" max="120" />
|
||||
</label>
|
||||
<label>How did you hear about us?
|
||||
<select name="referrer">
|
||||
<option value="">(select one)</option>
|
||||
<option value="1">freeCodeCamp News</option>
|
||||
<option value="2">freeCodeCamp YouTube Channel</option>
|
||||
<option value="3">freeCodeCamp Forum</option>
|
||||
<option value="4">Other</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>Provide a bio:
|
||||
<textarea name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
|
||||
</label>
|
||||
</fieldset>
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
font-family: Tahoma;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h1, p {
|
||||
margin: 1em auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 60vw;
|
||||
max-width: 500px;
|
||||
min-width: 300px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: none;
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
fieldset:not(:last-of-type) {
|
||||
border-bottom: 3px solid #3b3b4f;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
margin: 10px 0 0 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@ -0,0 +1,140 @@
|
||||
---
|
||||
id: 60fc22d1e64d1b04cdd4e602
|
||||
title: Part 45
|
||||
challengeType: 0
|
||||
dashedName: part-45
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Add some space between the `.inline` elements and the `label` text, by giving a right `margin` of `0.5em`. Also, set all the other margin to `0`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should give the `.inline` elements a `margin-right` of `0.5em`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.inline')?.marginRight, '0.5em');
|
||||
```
|
||||
|
||||
You should give the `.inline` elements a `margin-bottom` of `0`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.inline')?.marginBottom, '0px');
|
||||
```
|
||||
|
||||
You should give the `.inline` elements a `margin-top` of `0`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.inline')?.marginTop, '0px');
|
||||
```
|
||||
|
||||
You should give the `.inline` elements a `margin-left` of `0`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.inline')?.marginLeft, '0px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Registration Form Project</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://fcc-registration-form.com'>
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input type="text" name="first-name" required /></label>
|
||||
<label>Enter Your Last Name: <input type="text" name="last-name" required /></label>
|
||||
<label>Enter Your Email: <input type="email" name="email" required /></label>
|
||||
<label>Create a New Password: <input type="password" name="password" pattern="[a-z0-5]{8,}" required /></label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label><input type="radio" name="account-type" class="inline" /> Personal Account</label>
|
||||
<label><input type="radio" name="account-type" class="inline" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" name="terms" class="inline" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label>Upload a profile picture: <input type="file" name="file" /></label>
|
||||
<label>Input your age (years): <input type="number" name="age" min="13" max="120" />
|
||||
</label>
|
||||
<label>How did you hear about us?
|
||||
<select name="referrer">
|
||||
<option value="">(select one)</option>
|
||||
<option value="1">freeCodeCamp News</option>
|
||||
<option value="2">freeCodeCamp YouTube Channel</option>
|
||||
<option value="3">freeCodeCamp Forum</option>
|
||||
<option value="4">Other</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>Provide a bio:
|
||||
<textarea name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
|
||||
</label>
|
||||
</fieldset>
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
font-family: Tahoma;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h1, p {
|
||||
margin: 1em auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 60vw;
|
||||
max-width: 500px;
|
||||
min-width: 300px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: none;
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
fieldset:not(:last-of-type) {
|
||||
border-bottom: 3px solid #3b3b4f;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
margin: 10px 0 0 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.inline {
|
||||
width: unset;
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@ -0,0 +1,125 @@
|
||||
---
|
||||
id: 60fc236dc04532052926fdac
|
||||
title: Part 46
|
||||
challengeType: 0
|
||||
dashedName: part-46
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
If you look close enough, you will notice the `.inline` elements are too high on the line.
|
||||
|
||||
To combat this, set the `vertical-align` property to `middle`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should set the `vertical-align` property to `middle` for all `.inline` elements.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.inline')?.verticalAlign, 'middle');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Registration Form Project</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://fcc-registration-form.com'>
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input type="text" name="first-name" required /></label>
|
||||
<label>Enter Your Last Name: <input type="text" name="last-name" required /></label>
|
||||
<label>Enter Your Email: <input type="email" name="email" required /></label>
|
||||
<label>Create a New Password: <input type="password" name="password" pattern="[a-z0-5]{8,}" required /></label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label><input type="radio" name="account-type" class="inline" /> Personal Account</label>
|
||||
<label><input type="radio" name="account-type" class="inline" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" name="terms" class="inline" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label>Upload a profile picture: <input type="file" name="file" /></label>
|
||||
<label>Input your age (years): <input type="number" name="age" min="13" max="120" />
|
||||
</label>
|
||||
<label>How did you hear about us?
|
||||
<select name="referrer">
|
||||
<option value="">(select one)</option>
|
||||
<option value="1">freeCodeCamp News</option>
|
||||
<option value="2">freeCodeCamp YouTube Channel</option>
|
||||
<option value="3">freeCodeCamp Forum</option>
|
||||
<option value="4">Other</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>Provide a bio:
|
||||
<textarea name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
|
||||
</label>
|
||||
</fieldset>
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
font-family: Tahoma;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h1, p {
|
||||
margin: 1em auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 60vw;
|
||||
max-width: 500px;
|
||||
min-width: 300px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: none;
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
fieldset:not(:last-of-type) {
|
||||
border-bottom: 3px solid #3b3b4f;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
margin: 10px 0 0 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.inline {
|
||||
width: unset;
|
||||
margin: 0 0.5em 0 0;
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@ -0,0 +1,142 @@
|
||||
---
|
||||
id: 60ffe1bc30415f042faea936
|
||||
title: Part 47
|
||||
challengeType: 0
|
||||
dashedName: part-47
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
To make the `input` and `textarea` elements blend in with the background theme, set their `background-color` to `#0a0a23`. Then, give them a `1px`, `solid` border with a color of `#0a0a23`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use a comma separated element selector to select the `input` and `textarea` elements.
|
||||
|
||||
```js
|
||||
const selFunc = selector => new __helpers.CSSHelp(document).getStyle(selector);
|
||||
assert.isTrue(['input, textarea', 'textarea, input'].some(selFunc));
|
||||
```
|
||||
|
||||
You should give the `input` and `textarea` elements a `background-color` of `#0a0a23`.
|
||||
|
||||
```js
|
||||
const selFunc = selector => new __helpers.CSSHelp(document).getStyle(selector);
|
||||
assert.equal(selFunc(['input, textarea', 'textarea, input'].find(selFunc))?.backgroundColor, 'rgb(10, 10, 35)');
|
||||
```
|
||||
|
||||
You should give the `input` and `textarea` elements a `1px`, `solid` border with a color of `#0a0a23`.
|
||||
|
||||
```js
|
||||
const selFunc = selector => new __helpers.CSSHelp(document).getStyle(selector);
|
||||
assert.equal(selFunc(['input, textarea', 'textarea, input'].find(selFunc))?.borderWidth, '1px');
|
||||
assert.equal(selFunc(['input, textarea', 'textarea, input'].find(selFunc))?.borderStyle, 'solid');
|
||||
assert.equal(selFunc(['input, textarea', 'textarea, input'].find(selFunc))?.borderColor, 'rgb(10, 10, 35)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Registration Form Project</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://fcc-registration-form.com'>
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input type="text" name="first-name" required /></label>
|
||||
<label>Enter Your Last Name: <input type="text" name="last-name" required /></label>
|
||||
<label>Enter Your Email: <input type="email" name="email" required /></label>
|
||||
<label>Create a New Password: <input type="password" name="password" pattern="[a-z0-5]{8,}" required /></label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label><input type="radio" name="account-type" class="inline" /> Personal Account</label>
|
||||
<label><input type="radio" name="account-type" class="inline" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" name="terms" class="inline" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label>Upload a profile picture: <input type="file" name="file" /></label>
|
||||
<label>Input your age (years): <input type="number" name="age" min="13" max="120" />
|
||||
</label>
|
||||
<label>How did you hear about us?
|
||||
<select name="referrer">
|
||||
<option value="">(select one)</option>
|
||||
<option value="1">freeCodeCamp News</option>
|
||||
<option value="2">freeCodeCamp YouTube Channel</option>
|
||||
<option value="3">freeCodeCamp Forum</option>
|
||||
<option value="4">Other</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>Provide a bio:
|
||||
<textarea name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
|
||||
</label>
|
||||
</fieldset>
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
font-family: Tahoma;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h1, p {
|
||||
margin: 1em auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 60vw;
|
||||
max-width: 500px;
|
||||
min-width: 300px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: none;
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
fieldset:not(:last-of-type) {
|
||||
border-bottom: 3px solid #3b3b4f;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
margin: 10px 0 0 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
.inline {
|
||||
width: unset;
|
||||
margin: 0 0.5em 0 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,139 @@
|
||||
---
|
||||
id: 60ffe3936796ac04959285a9
|
||||
title: Part 48
|
||||
challengeType: 0
|
||||
dashedName: part-48
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Currently, if you type in the `input` or `textarea` elements, you will not be able to see the text. Also, their height is too small to be easy to use.
|
||||
|
||||
Fix this, by setting the `color` to `#ffffff`, and setting their `min-height` to `2em`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should set the `color` to `#ffffff`.
|
||||
|
||||
```js
|
||||
const selFunc = selector => new __helpers.CSSHelp(document).getStyle(selector);
|
||||
assert.equal(selFunc(['input, textarea', 'textarea, input'].find(selFunc))?.color, 'rgb(255, 255, 255)');
|
||||
```
|
||||
|
||||
You should set the `min-height` to `2em`.
|
||||
|
||||
```js
|
||||
const selFunc = selector => new __helpers.CSSHelp(document).getStyle(selector);
|
||||
assert.equal(selFunc(['input, textarea', 'textarea, input'].find(selFunc))?.minHeight, '2em');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Registration Form Project</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://fcc-registration-form.com'>
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input type="text" name="first-name" required /></label>
|
||||
<label>Enter Your Last Name: <input type="text" name="last-name" required /></label>
|
||||
<label>Enter Your Email: <input type="email" name="email" required /></label>
|
||||
<label>Create a New Password: <input type="password" name="password" pattern="[a-z0-5]{8,}" required /></label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label><input type="radio" name="account-type" class="inline" /> Personal Account</label>
|
||||
<label><input type="radio" name="account-type" class="inline" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" name="terms" class="inline" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label>Upload a profile picture: <input type="file" name="file" /></label>
|
||||
<label>Input your age (years): <input type="number" name="age" min="13" max="120" />
|
||||
</label>
|
||||
<label>How did you hear about us?
|
||||
<select name="referrer">
|
||||
<option value="">(select one)</option>
|
||||
<option value="1">freeCodeCamp News</option>
|
||||
<option value="2">freeCodeCamp YouTube Channel</option>
|
||||
<option value="3">freeCodeCamp Forum</option>
|
||||
<option value="4">Other</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>Provide a bio:
|
||||
<textarea name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
|
||||
</label>
|
||||
</fieldset>
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
font-family: Tahoma;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h1, p {
|
||||
margin: 1em auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 60vw;
|
||||
max-width: 500px;
|
||||
min-width: 300px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: none;
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
fieldset:not(:last-of-type) {
|
||||
border-bottom: 3px solid #3b3b4f;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
margin: 10px 0 0 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
input, textarea {
|
||||
background-color: #0a0a23;
|
||||
border: 1px solid #0a0a23;
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
.inline {
|
||||
width: unset;
|
||||
margin: 0 0.5em 0 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,144 @@
|
||||
---
|
||||
id: 60ffe4f4ec18cd04dc470c56
|
||||
title: Part 49
|
||||
challengeType: 0
|
||||
dashedName: part-49
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
You want the `select` element to remain with a white background, but now it is not getting the same `min-height` as the `input` and `textarea` elements.
|
||||
|
||||
Move the `min-height` property and value so that all three element types have the same `min-height` value, and the `select` element still has a white background.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should move the `min-height` property and value to the `input, textarea, select` selector.
|
||||
|
||||
```js
|
||||
assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('input, textarea, select')?.minHeight);
|
||||
```
|
||||
|
||||
You should give the `input, textarea, select` selector a `min-height` of `2em`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('input, textarea, select')?.minHeight, '2em');
|
||||
```
|
||||
|
||||
You should remove the `min-height` declaration from the `input, textarea` selector.
|
||||
|
||||
```js
|
||||
assert.isEmpty(new __helpers.CSSHelp(document).getStyle('input, textarea')?.minHeight);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Registration Form Project</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://fcc-registration-form.com'>
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input type="text" name="first-name" required /></label>
|
||||
<label>Enter Your Last Name: <input type="text" name="last-name" required /></label>
|
||||
<label>Enter Your Email: <input type="email" name="email" required /></label>
|
||||
<label>Create a New Password: <input type="password" name="password" pattern="[a-z0-5]{8,}" required /></label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label><input type="radio" name="account-type" class="inline" /> Personal Account</label>
|
||||
<label><input type="radio" name="account-type" class="inline" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" name="terms" class="inline" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label>Upload a profile picture: <input type="file" name="file" /></label>
|
||||
<label>Input your age (years): <input type="number" name="age" min="13" max="120" />
|
||||
</label>
|
||||
<label>How did you hear about us?
|
||||
<select name="referrer">
|
||||
<option value="">(select one)</option>
|
||||
<option value="1">freeCodeCamp News</option>
|
||||
<option value="2">freeCodeCamp YouTube Channel</option>
|
||||
<option value="3">freeCodeCamp Forum</option>
|
||||
<option value="4">Other</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>Provide a bio:
|
||||
<textarea name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
|
||||
</label>
|
||||
</fieldset>
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
--fcc-editable-region--
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
font-family: Tahoma;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h1, p {
|
||||
margin: 1em auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 60vw;
|
||||
max-width: 500px;
|
||||
min-width: 300px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: none;
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
fieldset:not(:last-of-type) {
|
||||
border-bottom: 3px solid #3b3b4f;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
margin: 10px 0 0 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
input, textarea {
|
||||
background-color: #0a0a23;
|
||||
border: 1px solid #0a0a23;
|
||||
color: #ffffff;
|
||||
min-height: 2em;
|
||||
}
|
||||
|
||||
.inline {
|
||||
width: unset;
|
||||
margin: 0 0.5em 0 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@ -0,0 +1,152 @@
|
||||
---
|
||||
id: 60ffe69ee377c6055e192a46
|
||||
title: Part 50
|
||||
challengeType: 0
|
||||
dashedName: part-50
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
To style the submit button, you can use an _attribute_ selector, which selects an element based on the given attribute value. Here is an example:
|
||||
|
||||
```css
|
||||
input[name="password"]
|
||||
```
|
||||
|
||||
The above selects `input` elements with a `name` attribute value of `password`.
|
||||
|
||||
Now, use the attribute selector to style the submit button with a `display` of `block`, and a `width` of `60%`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use an attribute selector of `input[type="submit"]` to style the submit button.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('input[type="submit"]'));
|
||||
```
|
||||
|
||||
You should give the submit button a `display` of `block`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.display, 'block');
|
||||
```
|
||||
|
||||
You should give the submit button a `width` of `60%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.width, '60%');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Registration Form Project</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://fcc-registration-form.com'>
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input type="text" name="first-name" required /></label>
|
||||
<label>Enter Your Last Name: <input type="text" name="last-name" required /></label>
|
||||
<label>Enter Your Email: <input type="email" name="email" required /></label>
|
||||
<label>Create a New Password: <input type="password" name="password" pattern="[a-z0-5]{8,}" required /></label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label><input type="radio" name="account-type" class="inline" /> Personal Account</label>
|
||||
<label><input type="radio" name="account-type" class="inline" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" name="terms" class="inline" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label>Upload a profile picture: <input type="file" name="file" /></label>
|
||||
<label>Input your age (years): <input type="number" name="age" min="13" max="120" />
|
||||
</label>
|
||||
<label>How did you hear about us?
|
||||
<select name="referrer">
|
||||
<option value="">(select one)</option>
|
||||
<option value="1">freeCodeCamp News</option>
|
||||
<option value="2">freeCodeCamp YouTube Channel</option>
|
||||
<option value="3">freeCodeCamp Forum</option>
|
||||
<option value="4">Other</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>Provide a bio:
|
||||
<textarea name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
|
||||
</label>
|
||||
</fieldset>
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
font-family: Tahoma;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h1, p {
|
||||
margin: 1em auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 60vw;
|
||||
max-width: 500px;
|
||||
min-width: 300px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: none;
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
fieldset:not(:last-of-type) {
|
||||
border-bottom: 3px solid #3b3b4f;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
margin: 10px 0 0 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
input, textarea {
|
||||
background-color: #0a0a23;
|
||||
border: 1px solid #0a0a23;
|
||||
color: #ffffff;
|
||||
min-height: 2em;
|
||||
}
|
||||
|
||||
.inline {
|
||||
width: unset;
|
||||
margin: 0 0.5em 0 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@ -0,0 +1,145 @@
|
||||
---
|
||||
id: 60ffe7d8aae62c05bcc9e7eb
|
||||
title: Part 51
|
||||
challengeType: 0
|
||||
dashedName: part-51
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
With a `display` of `block` the submit button sits flush against the left edge of its parent.
|
||||
|
||||
Use the same technique used to center the `form` to center the submit button.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should give the submit button a `margin` of `0 auto`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.margin, '0px auto');
|
||||
```
|
||||
|
||||
You should not give the submit button a `min-width` or `max-width`.
|
||||
|
||||
```js
|
||||
assert.isEmpty(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.minWidth);
|
||||
assert.isEmpty(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.maxWidth);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Registration Form Project</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://fcc-registration-form.com'>
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input type="text" name="first-name" required /></label>
|
||||
<label>Enter Your Last Name: <input type="text" name="last-name" required /></label>
|
||||
<label>Enter Your Email: <input type="email" name="email" required /></label>
|
||||
<label>Create a New Password: <input type="password" name="password" pattern="[a-z0-5]{8,}" required /></label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label><input type="radio" name="account-type" class="inline" /> Personal Account</label>
|
||||
<label><input type="radio" name="account-type" class="inline" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" name="terms" class="inline" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label>Upload a profile picture: <input type="file" name="file" /></label>
|
||||
<label>Input your age (years): <input type="number" name="age" min="13" max="120" />
|
||||
</label>
|
||||
<label>How did you hear about us?
|
||||
<select name="referrer">
|
||||
<option value="">(select one)</option>
|
||||
<option value="1">freeCodeCamp News</option>
|
||||
<option value="2">freeCodeCamp YouTube Channel</option>
|
||||
<option value="3">freeCodeCamp Forum</option>
|
||||
<option value="4">Other</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>Provide a bio:
|
||||
<textarea name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
|
||||
</label>
|
||||
</fieldset>
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
font-family: Tahoma;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h1, p {
|
||||
margin: 1em auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 60vw;
|
||||
max-width: 500px;
|
||||
min-width: 300px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: none;
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
fieldset:not(:last-of-type) {
|
||||
border-bottom: 3px solid #3b3b4f;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
margin: 10px 0 0 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
input, textarea {
|
||||
background-color: #0a0a23;
|
||||
border: 1px solid #0a0a23;
|
||||
color: #ffffff;
|
||||
min-height: 2em;
|
||||
}
|
||||
|
||||
.inline {
|
||||
width: unset;
|
||||
margin: 0 0.5em 0 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
input[type="submit"] {
|
||||
display: block;
|
||||
width: 60%;
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@ -0,0 +1,143 @@
|
||||
---
|
||||
id: 60ffe8a5ceb0e90618db06d9
|
||||
title: Part 52
|
||||
challengeType: 0
|
||||
dashedName: part-52
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
To make the submit button look more in line with the rest of the form, give it the same `height` as the other fields (`2em`). Also, increase the `font-size` to `1.1rem`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should give the submit button a `height` of `2em`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.height, '2em');
|
||||
```
|
||||
|
||||
You should give the submit button a `font-size` of `1.1rem`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.fontSize, '1.1rem');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Registration Form Project</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://fcc-registration-form.com'>
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input type="text" name="first-name" required /></label>
|
||||
<label>Enter Your Last Name: <input type="text" name="last-name" required /></label>
|
||||
<label>Enter Your Email: <input type="email" name="email" required /></label>
|
||||
<label>Create a New Password: <input type="password" name="password" pattern="[a-z0-5]{8,}" required /></label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label><input type="radio" name="account-type" class="inline" /> Personal Account</label>
|
||||
<label><input type="radio" name="account-type" class="inline" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" name="terms" class="inline" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label>Upload a profile picture: <input type="file" name="file" /></label>
|
||||
<label>Input your age (years): <input type="number" name="age" min="13" max="120" />
|
||||
</label>
|
||||
<label>How did you hear about us?
|
||||
<select name="referrer">
|
||||
<option value="">(select one)</option>
|
||||
<option value="1">freeCodeCamp News</option>
|
||||
<option value="2">freeCodeCamp YouTube Channel</option>
|
||||
<option value="3">freeCodeCamp Forum</option>
|
||||
<option value="4">Other</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>Provide a bio:
|
||||
<textarea name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
|
||||
</label>
|
||||
</fieldset>
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
font-family: Tahoma;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h1, p {
|
||||
margin: 1em auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 60vw;
|
||||
max-width: 500px;
|
||||
min-width: 300px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: none;
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
fieldset:not(:last-of-type) {
|
||||
border-bottom: 3px solid #3b3b4f;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
margin: 10px 0 0 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
input, textarea {
|
||||
background-color: #0a0a23;
|
||||
border: 1px solid #0a0a23;
|
||||
color: #ffffff;
|
||||
min-height: 2em;
|
||||
}
|
||||
|
||||
.inline {
|
||||
width: unset;
|
||||
margin: 0 0.5em 0 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
input[type="submit"] {
|
||||
display: block;
|
||||
width: 60%;
|
||||
margin: 0 auto;
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@ -0,0 +1,145 @@
|
||||
---
|
||||
id: 60ffe947a868ec068f7850f6
|
||||
title: Part 53
|
||||
challengeType: 0
|
||||
dashedName: part-53
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
To make the submit button appear more distinct, give it a `background-color` of `#3b3b4f`, and a `border-color` of `white`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should give the submit button a `background-color` of `#3b3b4f`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.backgroundColor, 'rgb(59, 59, 79)');
|
||||
```
|
||||
|
||||
You should give the submit button a `border-color` of `white`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.borderColor, 'white');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Registration Form Project</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://fcc-registration-form.com'>
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input type="text" name="first-name" required /></label>
|
||||
<label>Enter Your Last Name: <input type="text" name="last-name" required /></label>
|
||||
<label>Enter Your Email: <input type="email" name="email" required /></label>
|
||||
<label>Create a New Password: <input type="password" name="password" pattern="[a-z0-5]{8,}" required /></label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label><input type="radio" name="account-type" class="inline" /> Personal Account</label>
|
||||
<label><input type="radio" name="account-type" class="inline" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" name="terms" class="inline" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label>Upload a profile picture: <input type="file" name="file" /></label>
|
||||
<label>Input your age (years): <input type="number" name="age" min="13" max="120" />
|
||||
</label>
|
||||
<label>How did you hear about us?
|
||||
<select name="referrer">
|
||||
<option value="">(select one)</option>
|
||||
<option value="1">freeCodeCamp News</option>
|
||||
<option value="2">freeCodeCamp YouTube Channel</option>
|
||||
<option value="3">freeCodeCamp Forum</option>
|
||||
<option value="4">Other</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>Provide a bio:
|
||||
<textarea name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
|
||||
</label>
|
||||
</fieldset>
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
font-family: Tahoma;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h1, p {
|
||||
margin: 1em auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 60vw;
|
||||
max-width: 500px;
|
||||
min-width: 300px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: none;
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
fieldset:not(:last-of-type) {
|
||||
border-bottom: 3px solid #3b3b4f;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
margin: 10px 0 0 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
input, textarea {
|
||||
background-color: #0a0a23;
|
||||
border: 1px solid #0a0a23;
|
||||
color: #ffffff;
|
||||
min-height: 2em;
|
||||
}
|
||||
|
||||
.inline {
|
||||
width: unset;
|
||||
margin: 0 0.5em 0 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
input[type="submit"] {
|
||||
display: block;
|
||||
width: 60%;
|
||||
margin: 0 auto;
|
||||
height: 2em;
|
||||
font-size: 1.1em;
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@ -0,0 +1,150 @@
|
||||
---
|
||||
id: 60ffe9cb47809106eda2f2c9
|
||||
title: Part 54
|
||||
challengeType: 0
|
||||
dashedName: part-54
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Lastly, for the submit button, you want to separate it from the `fieldset` above, and adjust its width to never be below `300px`.
|
||||
|
||||
Change the `margin` property to include `1em` on the top and bottom, and set the width as described above.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should not change the `width` property. Use the `min-width` property.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.width, '60%');
|
||||
assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.minWidth);
|
||||
```
|
||||
|
||||
You should use the existing `margin` property to include `1em` on the top and bottom.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.margin, '1em auto');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Registration Form Project</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://fcc-registration-form.com'>
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input type="text" name="first-name" required /></label>
|
||||
<label>Enter Your Last Name: <input type="text" name="last-name" required /></label>
|
||||
<label>Enter Your Email: <input type="email" name="email" required /></label>
|
||||
<label>Create a New Password: <input type="password" name="password" pattern="[a-z0-5]{8,}" required /></label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label><input type="radio" name="account-type" class="inline" /> Personal Account</label>
|
||||
<label><input type="radio" name="account-type" class="inline" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" name="terms" class="inline" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label>Upload a profile picture: <input type="file" name="file" /></label>
|
||||
<label>Input your age (years): <input type="number" name="age" min="13" max="120" />
|
||||
</label>
|
||||
<label>How did you hear about us?
|
||||
<select name="referrer">
|
||||
<option value="">(select one)</option>
|
||||
<option value="1">freeCodeCamp News</option>
|
||||
<option value="2">freeCodeCamp YouTube Channel</option>
|
||||
<option value="3">freeCodeCamp Forum</option>
|
||||
<option value="4">Other</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>Provide a bio:
|
||||
<textarea name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
|
||||
</label>
|
||||
</fieldset>
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
font-family: Tahoma;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h1, p {
|
||||
margin: 1em auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 60vw;
|
||||
max-width: 500px;
|
||||
min-width: 300px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: none;
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
fieldset:not(:last-of-type) {
|
||||
border-bottom: 3px solid #3b3b4f;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
margin: 10px 0 0 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
input, textarea {
|
||||
background-color: #0a0a23;
|
||||
border: 1px solid #0a0a23;
|
||||
color: #ffffff;
|
||||
min-height: 2em;
|
||||
}
|
||||
|
||||
.inline {
|
||||
width: unset;
|
||||
margin: 0 0.5em 0 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
input[type="submit"] {
|
||||
display: block;
|
||||
width: 60%;
|
||||
margin: 0 auto;
|
||||
height: 2em;
|
||||
font-size: 1.1em;
|
||||
background-color: #3b3b4f;
|
||||
border-color: white;
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@ -0,0 +1,151 @@
|
||||
---
|
||||
id: 60ffec2825da1007509ddd06
|
||||
title: Part 55
|
||||
challengeType: 0
|
||||
dashedName: part-55
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Most browsers inject their own default CSS properties and values for different elements. If you look closely, you might be able to notice the file `input` is smaller than the other text `input` elements. By default, a `padding` of `1px 2px` is given to `input` elements you can type in.
|
||||
|
||||
Using another attribute selector, style the `input` with a `type` of `file` to be the same padding as the other `input` elements.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use an attribute selector to style the `input` element.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('input[type="file"]'));
|
||||
```
|
||||
|
||||
You should give the `input[type="file"]` a `padding` of `1px 2px`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="file"]')?.padding, '1px 2px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Registration Form Project</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://fcc-registration-form.com'>
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input type="text" name="first-name" required /></label>
|
||||
<label>Enter Your Last Name: <input type="text" name="last-name" required /></label>
|
||||
<label>Enter Your Email: <input type="email" name="email" required /></label>
|
||||
<label>Create a New Password: <input type="password" name="password" pattern="[a-z0-5]{8,}" required /></label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label><input type="radio" name="account-type" class="inline" /> Personal Account</label>
|
||||
<label><input type="radio" name="account-type" class="inline" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" name="terms" class="inline" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label>Upload a profile picture: <input type="file" name="file" /></label>
|
||||
<label>Input your age (years): <input type="number" name="age" min="13" max="120" />
|
||||
</label>
|
||||
<label>How did you hear about us?
|
||||
<select name="referrer">
|
||||
<option value="">(select one)</option>
|
||||
<option value="1">freeCodeCamp News</option>
|
||||
<option value="2">freeCodeCamp YouTube Channel</option>
|
||||
<option value="3">freeCodeCamp Forum</option>
|
||||
<option value="4">Other</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>Provide a bio:
|
||||
<textarea name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
|
||||
</label>
|
||||
</fieldset>
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
font-family: Tahoma;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h1, p {
|
||||
margin: 1em auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 60vw;
|
||||
max-width: 500px;
|
||||
min-width: 300px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: none;
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
fieldset:not(:last-of-type) {
|
||||
border-bottom: 3px solid #3b3b4f;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
margin: 10px 0 0 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
input, textarea {
|
||||
background-color: #0a0a23;
|
||||
border: 1px solid #0a0a23;
|
||||
color: #ffffff;
|
||||
min-height: 2em;
|
||||
}
|
||||
|
||||
.inline {
|
||||
width: unset;
|
||||
margin: 0 0.5em 0 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
input[type="submit"] {
|
||||
display: block;
|
||||
width: 60%;
|
||||
margin: 1em auto;
|
||||
height: 2em;
|
||||
font-size: 1.1em;
|
||||
background-color: #3b3b4f;
|
||||
border-color: white;
|
||||
min-width: 300px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@ -0,0 +1,152 @@
|
||||
---
|
||||
id: 60ffecefac971607ae73c60f
|
||||
title: Part 56
|
||||
challengeType: 0
|
||||
dashedName: part-56
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Speaking of `padding`, the submit button is sitting at the bottom of the `form` element. Add `2em` of `padding` only to the bottom of the `form`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `padding-bottom` property.
|
||||
|
||||
```js
|
||||
assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('form')?.paddingBottom);
|
||||
```
|
||||
|
||||
You should give the `padding-bottom` a value of `2em`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('form')?.paddingBottom, '2em');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Registration Form Project</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://fcc-registration-form.com'>
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input type="text" name="first-name" required /></label>
|
||||
<label>Enter Your Last Name: <input type="text" name="last-name" required /></label>
|
||||
<label>Enter Your Email: <input type="email" name="email" required /></label>
|
||||
<label>Create a New Password: <input type="password" name="password" pattern="[a-z0-5]{8,}" required /></label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label><input type="radio" name="account-type" class="inline" /> Personal Account</label>
|
||||
<label><input type="radio" name="account-type" class="inline" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" name="terms" class="inline" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label>Upload a profile picture: <input type="file" name="file" /></label>
|
||||
<label>Input your age (years): <input type="number" name="age" min="13" max="120" />
|
||||
</label>
|
||||
<label>How did you hear about us?
|
||||
<select name="referrer">
|
||||
<option value="">(select one)</option>
|
||||
<option value="1">freeCodeCamp News</option>
|
||||
<option value="2">freeCodeCamp YouTube Channel</option>
|
||||
<option value="3">freeCodeCamp Forum</option>
|
||||
<option value="4">Other</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>Provide a bio:
|
||||
<textarea name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
|
||||
</label>
|
||||
</fieldset>
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
font-family: Tahoma;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h1, p {
|
||||
margin: 1em auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
form {
|
||||
width: 60vw;
|
||||
max-width: 500px;
|
||||
min-width: 300px;
|
||||
margin: 0 auto;
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
fieldset {
|
||||
border: none;
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
fieldset:not(:last-of-type) {
|
||||
border-bottom: 3px solid #3b3b4f;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
margin: 10px 0 0 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
input, textarea {
|
||||
background-color: #0a0a23;
|
||||
border: 1px solid #0a0a23;
|
||||
color: #ffffff;
|
||||
min-height: 2em;
|
||||
}
|
||||
|
||||
.inline {
|
||||
width: unset;
|
||||
margin: 0 0.5em 0 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
input[type="submit"] {
|
||||
display: block;
|
||||
width: 60%;
|
||||
margin: 1em auto;
|
||||
height: 2em;
|
||||
font-size: 1.1em;
|
||||
background-color: #3b3b4f;
|
||||
border-color: white;
|
||||
min-width: 300px;
|
||||
}
|
||||
|
||||
input[type="file"] {
|
||||
padding: 1px 2px;
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,156 @@
|
||||
---
|
||||
id: 60ffefd6479a3d084fb77cbc
|
||||
title: Part 57
|
||||
challengeType: 0
|
||||
dashedName: part-57
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Last, but not least, change the text color of the `terms and conditions` link to `#dfdfe2`.
|
||||
|
||||
Well done! You have completed the final part of the _Registration Form_ practice project.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use an `a` element selector.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('a'));
|
||||
```
|
||||
|
||||
You should give the `a` element a `color` of `#dfdfe2`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('a')?.color, 'rgb(223, 223, 226)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>freeCodeCamp Registration Form Project</title>
|
||||
<link rel="stylesheet" type="text/css" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<h1>Registration Form</h1>
|
||||
<p>Please fill out this form with the required information</p>
|
||||
<form action='https://fcc-registration-form.com'>
|
||||
<fieldset>
|
||||
<label>Enter Your First Name: <input type="text" name="first-name" required /></label>
|
||||
<label>Enter Your Last Name: <input type="text" name="last-name" required /></label>
|
||||
<label>Enter Your Email: <input type="email" name="email" required /></label>
|
||||
<label>Create a New Password: <input type="password" name="password" pattern="[a-z0-5]{8,}" required /></label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label><input type="radio" name="account-type" class="inline" /> Personal Account</label>
|
||||
<label><input type="radio" name="account-type" class="inline" /> Business Account</label>
|
||||
<label>
|
||||
<input type="checkbox" name="terms" class="inline" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<label>Upload a profile picture: <input type="file" name="file" /></label>
|
||||
<label>Input your age (years): <input type="number" name="age" min="13" max="120" />
|
||||
</label>
|
||||
<label>How did you hear about us?
|
||||
<select name="referrer">
|
||||
<option value="">(select one)</option>
|
||||
<option value="1">freeCodeCamp News</option>
|
||||
<option value="2">freeCodeCamp YouTube Channel</option>
|
||||
<option value="3">freeCodeCamp Forum</option>
|
||||
<option value="4">Other</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>Provide a bio:
|
||||
<textarea name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
|
||||
</label>
|
||||
</fieldset>
|
||||
<input type="submit" value="Submit" />
|
||||
</form>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
background-color: #1b1b32;
|
||||
color: #f5f6f7;
|
||||
font-family: Tahoma;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
h1, p {
|
||||
margin: 1em auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 60vw;
|
||||
max-width: 500px;
|
||||
min-width: 300px;
|
||||
margin: 0 auto;
|
||||
padding-bottom: 2em;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
border: none;
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
fieldset:not(:last-of-type) {
|
||||
border-bottom: 3px solid #3b3b4f;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
margin: 10px 0 0 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
input, textarea {
|
||||
background-color: #0a0a23;
|
||||
border: 1px solid #0a0a23;
|
||||
color: #ffffff;
|
||||
min-height: 2em;
|
||||
}
|
||||
|
||||
.inline {
|
||||
width: unset;
|
||||
margin: 0 0.5em 0 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
input[type="submit"] {
|
||||
display: block;
|
||||
width: 60%;
|
||||
margin: 1em auto;
|
||||
height: 2em;
|
||||
font-size: 1.1em;
|
||||
background-color: #3b3b4f;
|
||||
border-color: white;
|
||||
min-width: 300px;
|
||||
}
|
||||
|
||||
input[type="file"] {
|
||||
padding: 1px 2px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@ -26,5 +26,6 @@
|
||||
"css-picasso-painting": "CSS Picasso Painting",
|
||||
"javascript-spreadsheet": "JavaScript Spreadsheet",
|
||||
"intermediate-javascript-calorie-counter": "Intermediate JavaScript Calorie Counter",
|
||||
"d3-dashboard": "D3 Dashboard"
|
||||
"d3-dashboard": "D3 Dashboard",
|
||||
"registration-form": "Registration Form"
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user