feat(curriculum): add accessibility-quiz practice project (#43244)
* feat(curriculum): add accessibility-quiz practice project * add parts 002-006 * add parts 7-8, tentative on logo aspect-ratio * add parts 008-013 * add parts 013-016 * add parts 017-026 * add parts 026-027 * add parts 027-029 * add parts 029-044 * add parts 044-067 - all parts done * add tests 001-009 * add tests 010 - 033 * add tests 034 - 039 * update tests 008~033, add tests 040-050 * add all tests * fix some stuff, remove final.md * take reasonable suggestions from Nich, ignore rest Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com> * replace svg link with actual CDN * remove getAttribute in potentially bad places * add method to form * fix silly querySelectors * adjust selectors for 028 * fix selectors, and add color transformations Co-authored-by: Nicholas Carrigan <nhcarrigan@gmail.com> * fix: typos, and make one test lenient Co-authored-by: gikf <60067306+gikf@users.noreply.github.com> Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com> Co-authored-by: gikf <60067306+gikf@users.noreply.github.com>
This commit is contained in:
Shaun Hamilton
GitHub
@ -83,6 +83,10 @@
|
||||
"title": "CSS Variables Skyline",
|
||||
"intro": ["", ""]
|
||||
},
|
||||
"accessibility-quiz": {
|
||||
"title": "Accessibility Quiz",
|
||||
"intro": ["", ""]
|
||||
},
|
||||
"css-picasso-painting": {
|
||||
"title": "CSS Picasso Painting",
|
||||
"intro": [
|
||||
@ -287,10 +291,7 @@
|
||||
"In these projects, you'll need to fetch data and parse a dataset, then use D3 to create different data visualizations. Finish them all to earn your Data Visualization certification."
|
||||
]
|
||||
},
|
||||
"d3-dashboard": {
|
||||
"title": "D3 Dashboard",
|
||||
"intro": ["", ""]
|
||||
}
|
||||
"d3-dashboard": { "title": "D3 Dashboard", "intro": ["", ""] }
|
||||
}
|
||||
},
|
||||
"relational-databases": {
|
||||
|
||||
@ -0,0 +1,9 @@
|
||||
---
|
||||
title: Introduction to the Accessibility Quiz
|
||||
block: accessibility-quiz
|
||||
superBlock: Responsive Web Design
|
||||
isBeta: true
|
||||
---
|
||||
## Introduction to the Accessibility Quiz
|
||||
|
||||
This is a test for the new project-based curriculum.
|
||||
@ -76,5 +76,6 @@
|
||||
"learn-git-by-building-an-sql-reference-object": "Relational Databases",
|
||||
"periodic-table-database": "Relational Databases",
|
||||
"learn-github-by-building-a-list-of-inspirational-quotes": "Relational Databases",
|
||||
"number-guessing-game": "Relational Databases"
|
||||
"number-guessing-game": "Relational Databases",
|
||||
"accessibility-quiz": "HTML-CSS"
|
||||
}
|
||||
|
||||
282
curriculum/challenges/_meta/accessibility-quiz/meta.json
Normal file
282
curriculum/challenges/_meta/accessibility-quiz/meta.json
Normal file
@ -0,0 +1,282 @@
|
||||
{
|
||||
"name": "Accessibility Quiz",
|
||||
"isUpcomingChange": true,
|
||||
"dashedName": "accessibility-quiz",
|
||||
"order": 42,
|
||||
"time": "5 hours",
|
||||
"template": "",
|
||||
"required": [],
|
||||
"superBlock": "responsive-web-design",
|
||||
"superOrder": 1,
|
||||
"isBeta": true,
|
||||
"challengeOrder": [
|
||||
[
|
||||
"614ccc21ea91ef1736b9b578",
|
||||
"Part 1"
|
||||
],
|
||||
[
|
||||
"613297a923965e0703b64796",
|
||||
"Part 2"
|
||||
],
|
||||
[
|
||||
"61329b210dac0b08047fd6ab",
|
||||
"Part 3"
|
||||
],
|
||||
[
|
||||
"61329d52e5010e08d9b9d66b",
|
||||
"Part 4"
|
||||
],
|
||||
[
|
||||
"6133acc353338c0bba9cb553",
|
||||
"Part 5"
|
||||
],
|
||||
[
|
||||
"6133d11ef548f51f876149e3",
|
||||
"Part 6"
|
||||
],
|
||||
[
|
||||
"613e2546d0594208229ada50",
|
||||
"Part 7"
|
||||
],
|
||||
[
|
||||
"613e275749ebd008e74bb62e",
|
||||
"Part 8"
|
||||
],
|
||||
[
|
||||
"6140827cff96e906bd38fc2b",
|
||||
"Part 9"
|
||||
],
|
||||
[
|
||||
"6140883f74224508174794c0",
|
||||
"Part 10"
|
||||
],
|
||||
[
|
||||
"61408e4ae3e35d08feb260eb",
|
||||
"Part 11"
|
||||
],
|
||||
[
|
||||
"61408f155e798909b6908712",
|
||||
"Part 12"
|
||||
],
|
||||
[
|
||||
"614090d5a22b6f0a5a6b464c",
|
||||
"Part 13"
|
||||
],
|
||||
[
|
||||
"6141fabd6f75610664e908fd",
|
||||
"Part 14"
|
||||
],
|
||||
[
|
||||
"6141fed65b61320743da5894",
|
||||
"Part 15"
|
||||
],
|
||||
[
|
||||
"614202874ca576084fca625f",
|
||||
"Part 16"
|
||||
],
|
||||
[
|
||||
"614206033d366c090ca7dd42",
|
||||
"Part 17"
|
||||
],
|
||||
[
|
||||
"61435e3c0679a306c20f1acc",
|
||||
"Part 18"
|
||||
],
|
||||
[
|
||||
"6143610161323a081b249c19",
|
||||
"Part 19"
|
||||
],
|
||||
[
|
||||
"6143639d5eddc7094161648c",
|
||||
"Part 20"
|
||||
],
|
||||
[
|
||||
"6143908b6aafb00a659ca189",
|
||||
"Part 21"
|
||||
],
|
||||
[
|
||||
"6143920c8eafb00b735746ce",
|
||||
"Part 22"
|
||||
],
|
||||
[
|
||||
"6143931a113bb80c45546287",
|
||||
"Part 23"
|
||||
],
|
||||
[
|
||||
"614394fb41985e0d2012a93e",
|
||||
"Part 24"
|
||||
],
|
||||
[
|
||||
"6143956ed76ed60e012faa51",
|
||||
"Part 25"
|
||||
],
|
||||
[
|
||||
"614396f7ae83f20ea6f9f4b3",
|
||||
"Part 26"
|
||||
],
|
||||
[
|
||||
"6143cb26f7edff2dc28f7da5",
|
||||
"Part 27"
|
||||
],
|
||||
[
|
||||
"6144e818fd5ea704fe56081d",
|
||||
"Part 28"
|
||||
],
|
||||
[
|
||||
"6144f8dc6849e405dd8bb829",
|
||||
"Part 29"
|
||||
],
|
||||
[
|
||||
"6145e6eeaa66c605eb087fe9",
|
||||
"Part 30"
|
||||
],
|
||||
[
|
||||
"6145e8b5080a5f06bb0223d0",
|
||||
"Part 31"
|
||||
],
|
||||
[
|
||||
"6145eb5f08a38a0786c7a80c",
|
||||
"Part 32"
|
||||
],
|
||||
[
|
||||
"6145ed1f22caab087630aaad",
|
||||
"Part 33"
|
||||
],
|
||||
[
|
||||
"6145ee65e2e1530938cb594d",
|
||||
"Part 34"
|
||||
],
|
||||
[
|
||||
"6145f02240ff8f09f7ec913c",
|
||||
"Part 35"
|
||||
],
|
||||
[
|
||||
"6145f14f019a4b0adb94b051",
|
||||
"Part 36"
|
||||
],
|
||||
[
|
||||
"6145f3a5cd9be60b9459cdd6",
|
||||
"Part 37"
|
||||
],
|
||||
[
|
||||
"6145f47393fbe70c4d885f9c",
|
||||
"Part 38"
|
||||
],
|
||||
[
|
||||
"6145f59029474c0d3dc1c8b8",
|
||||
"Part 39"
|
||||
],
|
||||
[
|
||||
"6145f685797bd30df9784e8c",
|
||||
"Part 40"
|
||||
],
|
||||
[
|
||||
"6145f829ac6a920ebf5797d7",
|
||||
"Part 41"
|
||||
],
|
||||
[
|
||||
"6145f8f8bcd4370f6509078e",
|
||||
"Part 42"
|
||||
],
|
||||
[
|
||||
"6145fb5018cb5b100cb2a88c",
|
||||
"Part 43"
|
||||
],
|
||||
[
|
||||
"6145fc3707fc3310c277f5c8",
|
||||
"Part 44"
|
||||
],
|
||||
[
|
||||
"614796cb8086be482d60e0ac",
|
||||
"Part 45"
|
||||
],
|
||||
[
|
||||
"6147a14ef5668b5881ef2297",
|
||||
"Part 46"
|
||||
],
|
||||
[
|
||||
"614878f7a412310647873015",
|
||||
"Part 47"
|
||||
],
|
||||
[
|
||||
"61487b77d4a37707073a64e5",
|
||||
"Part 48"
|
||||
],
|
||||
[
|
||||
"61487da611a65307e78d2c20",
|
||||
"Part 49"
|
||||
],
|
||||
[
|
||||
"61487f703571b60899055cf9",
|
||||
"Part 50"
|
||||
],
|
||||
[
|
||||
"614880dc16070e093e29bc56",
|
||||
"Part 51"
|
||||
],
|
||||
[
|
||||
"614883b6fa720e09fb167de9",
|
||||
"Part 52"
|
||||
],
|
||||
[
|
||||
"614884c1f5d6f30ab3d78cde",
|
||||
"Part 53"
|
||||
],
|
||||
[
|
||||
"61488ecfd05e290b5712e6da",
|
||||
"Part 54"
|
||||
],
|
||||
[
|
||||
"6148d99cdc7acd0c519862cb",
|
||||
"Part 55"
|
||||
],
|
||||
[
|
||||
"6148da157cc0bd0d06df5c0a",
|
||||
"Part 56"
|
||||
],
|
||||
[
|
||||
"6148dc095264000dce348bf5",
|
||||
"Part 57"
|
||||
],
|
||||
[
|
||||
"6148dcaaf2e8750e6cb4501a",
|
||||
"Part 58"
|
||||
],
|
||||
[
|
||||
"6148dd31d210990f0fb140f8",
|
||||
"Part 59"
|
||||
],
|
||||
[
|
||||
"6148defa9c01520fb9d178a0",
|
||||
"Part 60"
|
||||
],
|
||||
[
|
||||
"6148dfab9b54c110577de165",
|
||||
"Part 61"
|
||||
],
|
||||
[
|
||||
"6148e0bcc13efd10f7d7a6a9",
|
||||
"Part 62"
|
||||
],
|
||||
[
|
||||
"6148e161ecec9511941f8833",
|
||||
"Part 63"
|
||||
],
|
||||
[
|
||||
"6148e28706b34912340fd042",
|
||||
"Part 64"
|
||||
],
|
||||
[
|
||||
"6148e335c1edd512d00e4691",
|
||||
"Part 65"
|
||||
],
|
||||
[
|
||||
"6148e41c728f65138addf9cc",
|
||||
"Part 66"
|
||||
],
|
||||
[
|
||||
"6148e5aeb102e3142de026a2",
|
||||
"Part 67"
|
||||
]
|
||||
]
|
||||
}
|
||||
@ -0,0 +1,50 @@
|
||||
---
|
||||
id: 614ccc21ea91ef1736b9b578
|
||||
title: Part 1
|
||||
challengeType: 0
|
||||
dashedName: part-1
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Welcome to the first part in the Accessibility Quiz. As you are becoming a seasoned HTML and CSS developer, we have started you off with the basic boilerplate.
|
||||
|
||||
Start this accessibility journey, by providing a `lang` attribute to your `html` element. This will assist screen readers in identifying the language of the page.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should give the `html` element a `lang` attribute. _Hint: You can use the value `en` for English._
|
||||
|
||||
```js
|
||||
assert.match(code, /<html\s+lang=('|")[\w\-]+?\1\s*>/i);
|
||||
// TODO: This should/could be fixed in the builder.js
|
||||
// assert.notThrow(Intl.getCanonicalLocales(document.querySelector('html').lang));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
--fcc-editable-region--
|
||||
<html>
|
||||
<head>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: #f5f6f7;
|
||||
color: #1b1b32;
|
||||
font-family: Helvetica;
|
||||
margin: 0;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,57 @@
|
||||
---
|
||||
id: 613297a923965e0703b64796
|
||||
title: Part 2
|
||||
challengeType: 0
|
||||
dashedName: part-2
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
You may be familiar with the `meta` tag already; it is used to specify information about the page, such as the title, description, keywords, and author.
|
||||
|
||||
Give your page a `meta` tag with an appropriate `charset` value.
|
||||
|
||||
The `charset` attribute specifies the character encoding of the page, and, nowadays, `UTF-8` is the only encoding supported by most browsers.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create a `meta` element within the `head` element.
|
||||
|
||||
```js
|
||||
// TODO: Once builder is fixed so head info is not in body
|
||||
assert.exists(document.querySelector('body > meta'));
|
||||
```
|
||||
|
||||
You should give the `meta` tag a `charset` of `UTF-8`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('body > meta')?.getAttribute('charset'), 'UTF-8');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
--fcc-editable-region--
|
||||
<head>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
--fcc-editable-region--
|
||||
<body>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: #f5f6f7;
|
||||
color: #1b1b32;
|
||||
font-family: Helvetica;
|
||||
margin: 0;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,62 @@
|
||||
---
|
||||
id: 61329b210dac0b08047fd6ab
|
||||
title: Part 3
|
||||
challengeType: 0
|
||||
dashedName: part-3
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Continuing with the `meta` tags, a `viewport` definition tells the browser how to render the page. Including one betters visual accessibility on mobile, and improves _SEO_ (search engine optimisation).
|
||||
|
||||
Add a `viewport` definition with a `content` attribute detailing the `width` and `initial-scale` of the page.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should create another `meta` element in the `head`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('body > meta')?.length, 2);
|
||||
```
|
||||
|
||||
You should give the `meta` a `name` attribute of `viewport`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('body > meta[name="viewport"]')?.length, 1);
|
||||
```
|
||||
|
||||
You should give the `meta` a `content` attribute of `width=device-width, initial-scale=1`.
|
||||
|
||||
```js
|
||||
// TODO: Double-check this is the only correct answer
|
||||
assert.equal(document.querySelectorAll('body > meta[content="width=device-width, initial-scale=1"]')?.length, 1);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
--fcc-editable-region--
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
--fcc-editable-region--
|
||||
<body>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: #f5f6f7;
|
||||
color: #1b1b32;
|
||||
font-family: Helvetica;
|
||||
margin: 0;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,68 @@
|
||||
---
|
||||
id: 61329d52e5010e08d9b9d66b
|
||||
title: Part 4
|
||||
challengeType: 0
|
||||
dashedName: part-4
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Another important `meta` tag for accessibility and SEO is the `description` definition. The value of the `content` attribute is used by search engines to provide a description of your page.
|
||||
|
||||
Add a `meta` tag with the `name` attribute set to `description`, and give it a useful `content` attribute.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add a new `meta` tag to the `head`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('meta').length, 3);
|
||||
```
|
||||
|
||||
You should give the `meta` a `name` attribute of `description`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('meta[name="description"]'));
|
||||
```
|
||||
|
||||
You should give the `meta` a `content` attribute.
|
||||
|
||||
```js
|
||||
assert.notEmpty(document.querySelector('meta[name="description"]')?.content);
|
||||
```
|
||||
|
||||
The `content` attribute value should not be more than 165 characters. _This is Google's maximum description length._
|
||||
|
||||
```js
|
||||
assert.isAtMost(document.querySelector('meta[name="description"]')?.content?.length, 165);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
--fcc-editable-region--
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
--fcc-editable-region--
|
||||
<body>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: #f5f6f7;
|
||||
color: #1b1b32;
|
||||
font-family: Helvetica;
|
||||
margin: 0;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,64 @@
|
||||
---
|
||||
id: 6133acc353338c0bba9cb553
|
||||
title: Part 5
|
||||
challengeType: 0
|
||||
dashedName: part-5
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Lastly in the `head`, the `title` element is useful for screen readers to understand the content of a page. Furthermore, it is an important part of _SEO_.
|
||||
|
||||
Give your page a `title` that is descriptive and concise.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add a `title` element to the `head`.
|
||||
|
||||
```js
|
||||
// TODO: Fix once builder puts head in the right place
|
||||
assert.exists(document.querySelector('body > title'));
|
||||
```
|
||||
|
||||
You should not make the `title` longer than 60 characters.
|
||||
|
||||
```js
|
||||
assert.isAtMost(document.querySelector('body > title')?.textContent?.length, 60);
|
||||
```
|
||||
|
||||
Try being more descriptive with your `title` element. _Hint: At least 20 characters_
|
||||
|
||||
```js
|
||||
assert.isAtLeast(document.querySelector('body > title')?.textContent?.length, 20);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
--fcc-editable-region--
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
--fcc-editable-region--
|
||||
<body>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: #f5f6f7;
|
||||
color: #1b1b32;
|
||||
font-family: Helvetica;
|
||||
margin: 0;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,68 @@
|
||||
---
|
||||
id: 6133d11ef548f51f876149e3
|
||||
title: Part 6
|
||||
challengeType: 0
|
||||
dashedName: part-6
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Navigation is a core part of accessibility, and screen readers rely on you to provide the structure of your page. This is accomplished with semantic HTML elements.
|
||||
|
||||
Add a `header` and a `main` element to your page.
|
||||
|
||||
The `header` element will be used to introduce the page, as well as provide a navigation menu.
|
||||
|
||||
The `main` element will contain the core content of your page.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add a `header` element to the `body`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('body > header'));
|
||||
```
|
||||
|
||||
You should add a `main` element to the `body`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('body > main'));
|
||||
```
|
||||
|
||||
The `header` element should come before the `main` element.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('header + main'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
--fcc-editable-region--
|
||||
<body>
|
||||
|
||||
</body>
|
||||
--fcc-editable-region--
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: #f5f6f7;
|
||||
color: #1b1b32;
|
||||
font-family: Helvetica;
|
||||
margin: 0;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,93 @@
|
||||
---
|
||||
id: 613e2546d0594208229ada50
|
||||
title: Part 7
|
||||
challengeType: 0
|
||||
dashedName: part-7
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Within the `header`, provide context about the page by nesting one `img`, `h1`, and `nav` element.
|
||||
|
||||
The `img` should point to `https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg`, and have an `id` of `logo`.
|
||||
|
||||
The `h1` should contain the text `HTML/CSS Quiz`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add an `img` element to the `header` element.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('header > img'));
|
||||
```
|
||||
|
||||
You should add an `h1` element to the `header` element.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('header > h1'));
|
||||
```
|
||||
|
||||
You should add a `nav` element to the `header` element.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('header > nav'));
|
||||
```
|
||||
|
||||
You should place the `img`, `h1`, and `nav` elements in that order.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('img + h1 + nav'));
|
||||
```
|
||||
|
||||
You should give the `img` element a `src` attribute of `https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('img')?.src, 'https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg');
|
||||
```
|
||||
|
||||
You should give the `img` element an `id` attribute of `logo`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('img')?.id, 'logo');
|
||||
```
|
||||
|
||||
You should give the `h1` element the text `HTML/CSS Quiz`.
|
||||
|
||||
```js
|
||||
assert.include(document.querySelector('h1')?.innerText?.toLowerCase(), 'html/css quiz');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
--fcc-editable-region--
|
||||
<header>
|
||||
|
||||
</header>
|
||||
--fcc-editable-region--
|
||||
<main></main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: #f5f6f7;
|
||||
color: #1b1b32;
|
||||
font-family: Helvetica;
|
||||
margin: 0;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,66 @@
|
||||
---
|
||||
id: 613e275749ebd008e74bb62e
|
||||
title: Part 8
|
||||
challengeType: 0
|
||||
dashedName: part-8
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
A useful property of an _SVG_ (scalable vector graphics) is that is contains a `path` attribute which allows the image to be scaled without affecting the resolution of the resultant image.
|
||||
|
||||
Currently, the `img` is assuming it's default size, which is too large. Correctly, scale the image using it's `id` as a selector, and setting the `width` to `max(100px, 18vw)`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `#logo` selector to target the `img` element.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('#logo'));
|
||||
```
|
||||
|
||||
You should give the `img` a `width` of `max(100px, 18vw)`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('#logo')?.width, 'max(100px, 18vw)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav></nav>
|
||||
</header>
|
||||
<main></main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: #f5f6f7;
|
||||
color: #1b1b32;
|
||||
font-family: Helvetica;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@ -0,0 +1,93 @@
|
||||
---
|
||||
id: 6140827cff96e906bd38fc2b
|
||||
title: Part 9
|
||||
challengeType: 0
|
||||
dashedName: part-9
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
As described in the [freeCodeCamp Style Guide](https://design-style-guide.freecodecamp.org/), the logo should retain an aspect ratio of `35:4`, and have padding around the text.
|
||||
|
||||
First, change the `background-color` to `#0a0a23` so you can see the logo. Then, use the `aspect-ratio` property to set the desired aspect ratio. Finally, add a `padding` of `0.4rem` all around.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should give `#logo` a `background-color` of `#0a0a23`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('#logo')?.backgroundColor, 'rgb(10, 10, 35)');
|
||||
```
|
||||
|
||||
You should use the `aspect-ratio` property.
|
||||
|
||||
```js
|
||||
assert.notEmpty(new __helpers.CSSHelp(document).getStyle('#logo')?.aspectRatio);
|
||||
```
|
||||
|
||||
You should not use the `height` property.
|
||||
|
||||
```js
|
||||
assert.isEmpty(new __helpers.CSSHelp(document).getStyle('#logo')?.height);
|
||||
```
|
||||
|
||||
You should not change the `width` property.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('#logo')?.width, 'max(100px, 18vw)');
|
||||
```
|
||||
|
||||
You should give the `img` an `aspect-ratio` of `35 / 4`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('#logo')?.aspectRatio, '35 / 4');
|
||||
```
|
||||
|
||||
You should give the `img` a `padding` of `0.4rem`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('#logo')?.padding, '0.4rem');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav></nav>
|
||||
</header>
|
||||
<main></main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: #f5f6f7;
|
||||
color: #1b1b32;
|
||||
font-family: Helvetica;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
#logo {
|
||||
width: max(100px, 18vw);
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@ -0,0 +1,89 @@
|
||||
---
|
||||
id: 6140883f74224508174794c0
|
||||
title: Part 10
|
||||
challengeType: 0
|
||||
dashedName: part-10
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Make the `header` take up the full width of its parent container, set it's `height` to `50px`, and set the `background-color` to `#1b1b32`. Then, set the `display` to use _Flexbox_.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `header` element selector.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('header'));
|
||||
```
|
||||
|
||||
You should give the `header` a `width` of `100%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.width, '100%');
|
||||
```
|
||||
|
||||
You should give the `header` a `height` of `50px`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.height, '50px');
|
||||
```
|
||||
|
||||
You should give the `header` a `background-color` of `#1b1b32`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.backgroundColor, 'rgb(27, 27, 50)');
|
||||
```
|
||||
|
||||
You should give the `header` a `display` of `flex`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.display, 'flex');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav></nav>
|
||||
</header>
|
||||
<main></main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: #f5f6f7;
|
||||
color: #1b1b32;
|
||||
font-family: Helvetica;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
#logo {
|
||||
width: max(100px, 18vw);
|
||||
background-color: #0a0a23;
|
||||
aspect-ratio: 35 / 4;
|
||||
padding: 0.4rem;
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,83 @@
|
||||
---
|
||||
id: 61408e4ae3e35d08feb260eb
|
||||
title: Part 11
|
||||
challengeType: 0
|
||||
dashedName: part-11
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Change the `h1` font color to `#f1be32`, and set the font size to `min(5vw, 1.2em)`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `h1` element selector.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('h1'));
|
||||
```
|
||||
|
||||
You should give the `h1` a `color` of `#f1be32`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('h1')?.color, 'rgb(241, 190, 50)');
|
||||
```
|
||||
|
||||
You should give the `h1` a `font-size` of `min(5vw, 1.2em)`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('h1')?.fontSize, 'min(5vw, 1.2em)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav></nav>
|
||||
</header>
|
||||
<main></main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: #f5f6f7;
|
||||
color: #1b1b32;
|
||||
font-family: Helvetica;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: #1b1b32;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width: max(100px, 18vw);
|
||||
background-color: #0a0a23;
|
||||
aspect-ratio: 35 / 4;
|
||||
padding: 0.4rem;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,112 @@
|
||||
---
|
||||
id: 61408f155e798909b6908712
|
||||
title: Part 12
|
||||
challengeType: 0
|
||||
dashedName: part-12
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
To enable navigation on the page, add an unordered list with the following three list items:
|
||||
|
||||
- `INFO`
|
||||
- `HTML`
|
||||
- `CSS`
|
||||
|
||||
The list items text should be wrapped in anchor tags.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should nest one `ul` element inside the `nav`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('nav > ul')?.length, 1);
|
||||
```
|
||||
|
||||
You should nest three `li` elements inside the `ul` element.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('nav > ul > li')?.length, 3);
|
||||
```
|
||||
|
||||
You should nest one `a` element inside each `li` element.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('nav > ul > li > a')?.length, 3);
|
||||
```
|
||||
|
||||
You should give the first `a` element the text `INFO`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('nav > ul > li > a')?.[0]?.textContent, 'INFO');
|
||||
```
|
||||
|
||||
You should give the second `a` element the text `HTML`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('nav > ul > li > a')?.[1]?.textContent, 'HTML');
|
||||
```
|
||||
|
||||
You should give the third `a` element the text `CSS`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('nav > ul > li > a')?.[2]?.textContent, 'CSS');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
--fcc-editable-region--
|
||||
<nav>
|
||||
|
||||
</nav>
|
||||
--fcc-editable-region--
|
||||
</header>
|
||||
<main></main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: #f5f6f7;
|
||||
color: #1b1b32;
|
||||
font-family: Helvetica;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: #1b1b32;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width: max(100px, 18vw);
|
||||
background-color: #0a0a23;
|
||||
aspect-ratio: 35 / 4;
|
||||
padding: 0.4rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #f1be32;
|
||||
font-size: min(5vw, 1.2em);
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,102 @@
|
||||
---
|
||||
id: 614090d5a22b6f0a5a6b464c
|
||||
title: Part 13
|
||||
challengeType: 0
|
||||
dashedName: part-13
|
||||
---
|
||||
|
||||
<!-- TODO: I purposefully added the `nav` styles without Camper input -->
|
||||
|
||||
# --description--
|
||||
|
||||
Target unordered list elements within `nav` elements, and use _Flexbox_ to evenly space the children.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `nav > ul` selector.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('nav > ul'));
|
||||
```
|
||||
|
||||
You should give the `nav > ul` elements a `display` of `flex`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.display, 'flex');
|
||||
```
|
||||
|
||||
You should give the `nav > ul` elements a `justify-content` of `space-evenly`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.justifyContent, 'space-evenly');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a>INFO</a></li>
|
||||
<li><a>HTML</a></li>
|
||||
<li><a>CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main></main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: #f5f6f7;
|
||||
color: #1b1b32;
|
||||
font-family: Helvetica;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: #1b1b32;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width: max(100px, 18vw);
|
||||
background-color: #0a0a23;
|
||||
aspect-ratio: 35 / 4;
|
||||
padding: 0.4rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #f1be32;
|
||||
font-size: min(5vw, 1.2em);
|
||||
}
|
||||
|
||||
nav {
|
||||
width: 50%;
|
||||
max-width: 300px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
```
|
||||
@ -0,0 +1,125 @@
|
||||
---
|
||||
id: 6141fabd6f75610664e908fd
|
||||
title: Part 14
|
||||
challengeType: 0
|
||||
dashedName: part-14
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
As this is a quiz, you will need a form for users to submit answers. You can semantically separate the content within the form using `section` elements.
|
||||
|
||||
Within the `main` element, create a form with three nested `section` elements. Then, make the form submit to `https://freecodecamp.org/practice-project/accessibility-quiz`, using the correct method.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should nest a `form` element within your `main` element.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('main > form'));
|
||||
```
|
||||
|
||||
You should nest three `section` elements within your `form` element.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('main > form > section')?.length, 3);
|
||||
```
|
||||
|
||||
You should give the `form` element an `action` attribute.
|
||||
|
||||
```js
|
||||
assert.notEmpty(document.querySelector('main > form')?.action);
|
||||
```
|
||||
|
||||
You should give the `action` attribute a value of `https://freecodecamp.org/practice-project/accessibility-quiz`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('main > form')?.action, 'https://freecodecamp.org/practice-project/accessibility-quiz');
|
||||
```
|
||||
|
||||
You should give the `form` element a `method` attribute.
|
||||
|
||||
```js
|
||||
assert.notEmpty(document.querySelector('main > form')?.method);
|
||||
```
|
||||
|
||||
You should give the `form` element a `method` attribute with a value of `post`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('main > form')?.method?.toLowerCase(), 'post');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a>INFO</a></li>
|
||||
<li><a>HTML</a></li>
|
||||
<li><a>CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
--fcc-editable-region--
|
||||
<main>
|
||||
|
||||
</main>
|
||||
--fcc-editable-region--
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: #f5f6f7;
|
||||
color: #1b1b32;
|
||||
font-family: Helvetica;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: #1b1b32;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width: max(100px, 18vw);
|
||||
background-color: #0a0a23;
|
||||
aspect-ratio: 35 / 4;
|
||||
padding: 0.4rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #f1be32;
|
||||
font-size: min(5vw, 1.2em);
|
||||
}
|
||||
|
||||
nav {
|
||||
width: 50%;
|
||||
max-width: 300px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
nav > ul {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,111 @@
|
||||
---
|
||||
id: 6141fed65b61320743da5894
|
||||
title: Part 15
|
||||
challengeType: 0
|
||||
dashedName: part-15
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
To increase the page accessibility, the `role` attribute can be used to indicate the purpose behind an element on the page to assistive technologies. The `role` attribute is a part of the _Web Accessibility Initiative_ (WAI), and accepts preset values.
|
||||
|
||||
Give each of the `section` elements the `region` role.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should give the first `section` element the `region` role.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('section')?.[0]?.getAttribute('role'), 'region');
|
||||
```
|
||||
|
||||
You should give the second `section` element the `region` role.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('section')?.[1]?.getAttribute('role'), 'region');
|
||||
```
|
||||
|
||||
You should give the third `section` element the `region` role.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('section')?.[2]?.getAttribute('role'), 'region');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a>INFO</a></li>
|
||||
<li><a>HTML</a></li>
|
||||
<li><a>CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
--fcc-editable-region--
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section></section>
|
||||
<section></section>
|
||||
<section></section>
|
||||
</form>
|
||||
--fcc-editable-region--
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: #f5f6f7;
|
||||
color: #1b1b32;
|
||||
font-family: Helvetica;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: #1b1b32;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width: max(100px, 18vw);
|
||||
background-color: #0a0a23;
|
||||
aspect-ratio: 35 / 4;
|
||||
padding: 0.4rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #f1be32;
|
||||
font-size: min(5vw, 1.2em);
|
||||
}
|
||||
|
||||
nav {
|
||||
width: 50%;
|
||||
max-width: 300px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
nav > ul {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,171 @@
|
||||
---
|
||||
id: 614202874ca576084fca625f
|
||||
title: Part 16
|
||||
challengeType: 0
|
||||
dashedName: part-16
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Every `region` role requires a visible label, which should be referenced by the `aria-labelledby` attribute.
|
||||
|
||||
To the `section` elements, give the following `aria-labelledby` attributes:
|
||||
|
||||
- `student-info`
|
||||
- `html-questions`
|
||||
- `css-questions`
|
||||
|
||||
Then, within each `section` element, nest one `h2` element with an `id` matching the corresponding `aria-labelledby` attribute. Give each `h2` suitable text content.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should give the first `section` element an `aria-labelledby` attribute of `student-info`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('section')?.[0]?.getAttribute('aria-labelledby'), 'student-info');
|
||||
```
|
||||
|
||||
You should give the second `section` element an `aria-labelledby` attribute of `html-questions`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('section')?.[1]?.getAttribute('aria-labelledby'), 'html-questions');
|
||||
```
|
||||
|
||||
You should give the third `section` element an `aria-labelledby` attribute of `css-questions`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('section')?.[2]?.getAttribute('aria-labelledby'), 'css-questions');
|
||||
```
|
||||
|
||||
You should nest one `h2` element within the first `section` element.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('section')?.[0]?.querySelectorAll('h2')?.length, 1);
|
||||
```
|
||||
|
||||
You should nest one `h2` element within the second `section` element.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('section')?.[1]?.querySelectorAll('h2')?.length, 1);
|
||||
```
|
||||
|
||||
You should nest one `h2` element within the third `section` element.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('section')?.[2]?.querySelectorAll('h2')?.length, 1);
|
||||
```
|
||||
|
||||
You should give the first `h2` element an `id` attribute of `student-info`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('h2')?.[0]?.id, 'student-info');
|
||||
```
|
||||
|
||||
You should give the second `h2` element an `id` attribute of `html-questions`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('h2')?.[1]?.id, 'html-questions');
|
||||
```
|
||||
|
||||
You should give the third `h2` element an `id` attribute of `css-questions`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('h2')?.[2]?.id, 'css-questions');
|
||||
```
|
||||
|
||||
You should give the first `h2` element suitable text content. _Hint: I would have chosen `Student Info`_
|
||||
|
||||
```js
|
||||
assert.isAtLeast(document.querySelectorAll('h2')?.[0]?.textContent?.length, 1);
|
||||
```
|
||||
|
||||
You should give the second `h2` element suitable text content. _Hint: I would have chosen `HTML`_
|
||||
|
||||
```js
|
||||
assert.isAtLeast(document.querySelectorAll('h2')?.[1]?.textContent?.length, 1);
|
||||
```
|
||||
|
||||
You should give the third `h2` element suitable text content. _Hint: I would have chosen `CSS`_
|
||||
|
||||
```js
|
||||
assert.isAtLeast(document.querySelectorAll('h2')?.[2]?.textContent?.length, 1);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a>INFO</a></li>
|
||||
<li><a>HTML</a></li>
|
||||
<li><a>CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
--fcc-editable-region--
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region"></section>
|
||||
<section role="region"></section>
|
||||
<section role="region"></section>
|
||||
</form>
|
||||
--fcc-editable-region--
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: #f5f6f7;
|
||||
color: #1b1b32;
|
||||
font-family: Helvetica;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: #1b1b32;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width: max(100px, 18vw);
|
||||
background-color: #0a0a23;
|
||||
aspect-ratio: 35 / 4;
|
||||
padding: 0.4rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #f1be32;
|
||||
font-size: min(5vw, 1.2em);
|
||||
}
|
||||
|
||||
nav {
|
||||
width: 50%;
|
||||
max-width: 300px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
nav > ul {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
```
|
||||
@ -0,0 +1,140 @@
|
||||
---
|
||||
id: 614206033d366c090ca7dd42
|
||||
title: Part 17
|
||||
challengeType: 0
|
||||
dashedName: part-17
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Typeface plays an important role in the accessibility of a page. Some fonts are easier to read than others, and this is especially true on low-resolution screens.
|
||||
|
||||
Change the font for both the `h1` and `h2` elements to `Verdana`, and use another sans-serif _web safe_ font as a fallback.
|
||||
|
||||
Also, add a `border-bottom` of `4px solid #dfdfe2` to `h2` elements, to make the sections distinct.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use a multiple element selector to target the `h1` and `h2` elements.
|
||||
|
||||
```js
|
||||
const gs = (s) => new __helpers.CSSHelp(document).getStyle(s);
|
||||
assert.exists(gs('h1, h2') || gs('h2, h1'));
|
||||
```
|
||||
|
||||
You should set the first value of the `font-family` property to `Verdana`.
|
||||
|
||||
```js
|
||||
const gs = (s) => new __helpers.CSSHelp(document).getStyle(s);
|
||||
const style = gs('h1, h2') || gs('h2, h1');
|
||||
assert.include(style?.fontFamily, 'Verdana');
|
||||
```
|
||||
|
||||
You should set the second value of the `font-family` property to another sans-serif, web safe font. _Hint: I would choose Tahoma_.
|
||||
|
||||
```js
|
||||
// Acceptable fonts: Arial, sans-serif, Helvetica, Tahoma, Trebuchet MS.
|
||||
const gs = (s) => new __helpers.CSSHelp(document).getStyle(s);
|
||||
const style = gs('h1, h2') || gs('h2, h1');
|
||||
assert.match(style?.fontFamily, /(Tahoma)|(Arial)|(sans-serif)|(Helvetica)|(Trebuchet MS)/);
|
||||
```
|
||||
|
||||
You should use an `h2` element selector to target the `h2` elements.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('h2'));
|
||||
```
|
||||
|
||||
You should give `h2` a `border-bottom` property of `4px solid #dfdfe2`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('h2')?.borderBottom, '4px solid rgb(223, 223, 226)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a>INFO</a></li>
|
||||
<li><a>HTML</a></li>
|
||||
<li><a>CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
</section>
|
||||
</form>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: #f5f6f7;
|
||||
color: #1b1b32;
|
||||
font-family: Helvetica;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: #1b1b32;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width: max(100px, 18vw);
|
||||
background-color: #0a0a23;
|
||||
aspect-ratio: 35 / 4;
|
||||
padding: 0.4rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #f1be32;
|
||||
font-size: min(5vw, 1.2em);
|
||||
}
|
||||
|
||||
nav {
|
||||
width: 50%;
|
||||
max-width: 300px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
nav > ul {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@ -0,0 +1,125 @@
|
||||
---
|
||||
id: 61435e3c0679a306c20f1acc
|
||||
title: Part 18
|
||||
challengeType: 0
|
||||
dashedName: part-18
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
To be able to navigate within the page, give each anchor element an `href` corresponding to the `id` of the `h2` elements.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should give the first `a` element an `href` of `#student-info`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('a')?.[0]?.getAttribute('href'), '#student-info');
|
||||
```
|
||||
|
||||
You should give the second `a` element an `href` of `#html-questions`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('a')?.[1]?.getAttribute('href'), '#html-questions');
|
||||
```
|
||||
|
||||
You should give the third `a` element an `href` of `#css-questions`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('a')?.[2]?.getAttribute('href'), '#css-questions');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
--fcc-editable-region--
|
||||
<ul>
|
||||
<li><a>INFO</a></li>
|
||||
<li><a>HTML</a></li>
|
||||
<li><a>CSS</a></li>
|
||||
</ul>
|
||||
--fcc-editable-region--
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
</section>
|
||||
</form>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: #f5f6f7;
|
||||
color: #1b1b32;
|
||||
font-family: Helvetica;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: #1b1b32;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width: max(100px, 18vw);
|
||||
background-color: #0a0a23;
|
||||
aspect-ratio: 35 / 4;
|
||||
padding: 0.4rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #f1be32;
|
||||
font-size: min(5vw, 1.2em);
|
||||
}
|
||||
|
||||
nav {
|
||||
width: 50%;
|
||||
max-width: 300px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
nav > ul {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
font-family: Verdana, Tahoma;
|
||||
}
|
||||
|
||||
h2 {
|
||||
border-bottom: 4px solid #dfdfe2;
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,173 @@
|
||||
---
|
||||
id: 6143610161323a081b249c19
|
||||
title: Part 19
|
||||
challengeType: 0
|
||||
dashedName: part-19
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Filling out the content of the quiz, below the `#student-info`, add three `div` elements with a `class` of `info`.
|
||||
|
||||
Then, within each `div` nest one `label` element, and one `input` element.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should nest three `div` elements below the `h2#student-info` element.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('h2#student-info ~ div')?.length, 3);
|
||||
```
|
||||
|
||||
You should give the first `div` a `class` of `info`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[0]?.className, 'info');
|
||||
```
|
||||
|
||||
You should give the second `div` a `class` of `info`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[1]?.className, 'info');
|
||||
```
|
||||
|
||||
You should give the third `div` a `class` of `info`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[2]?.className, 'info');
|
||||
```
|
||||
|
||||
You should nest one `label` element within the first `div`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[0]?.querySelectorAll('label')?.length, 1);
|
||||
```
|
||||
|
||||
You should nest one `input` element within the first `div`, after the `label`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[0]?.querySelectorAll('input')?.length, 1);
|
||||
assert.exists(document.querySelectorAll('h2#student-info ~ div')?.[0]?.querySelector('label + input'));
|
||||
```
|
||||
|
||||
You should nest one `label` element within the second `div`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[1]?.querySelectorAll('label')?.length, 1);
|
||||
```
|
||||
|
||||
You should nest one `input` element within the second `div`, after the `label`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[1]?.querySelectorAll('input')?.length, 1);
|
||||
assert.exists(document.querySelectorAll('h2#student-info ~ div')?.[1]?.querySelector('label + input'));
|
||||
```
|
||||
|
||||
You should nest one `label` element within the third `div`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[2]?.querySelectorAll('label')?.length, 1);
|
||||
```
|
||||
|
||||
You should nest one `input` element within the third `div`, after the `label`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[2]?.querySelectorAll('input')?.length, 1);
|
||||
assert.exists(document.querySelectorAll('h2#student-info ~ div')?.[2]?.querySelector('label + input'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
--fcc-editable-region--
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
|
||||
</section>
|
||||
--fcc-editable-region--
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
</section>
|
||||
</form>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: #f5f6f7;
|
||||
color: #1b1b32;
|
||||
font-family: Helvetica;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: #1b1b32;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width: max(100px, 18vw);
|
||||
background-color: #0a0a23;
|
||||
aspect-ratio: 35 / 4;
|
||||
padding: 0.4rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #f1be32;
|
||||
font-size: min(5vw, 1.2em);
|
||||
}
|
||||
|
||||
nav {
|
||||
width: 50%;
|
||||
max-width: 300px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
nav > ul {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
font-family: Verdana, Tahoma;
|
||||
}
|
||||
|
||||
h2 {
|
||||
border-bottom: 4px solid #dfdfe2;
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,195 @@
|
||||
---
|
||||
id: 6143639d5eddc7094161648c
|
||||
title: Part 20
|
||||
challengeType: 0
|
||||
dashedName: part-20
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
It is important to link each `input` to the corresponding `label` element. This provides assistive technology users with a visual reference to the input.
|
||||
|
||||
This is done, by giving the `label` a `for` attribute, which contains the `id` of the `input`.
|
||||
|
||||
This section will take a student's name, email address, and date of birth. Give the `label` elements appropriate `for` attributes, as well as text content. Then, link the `input` elements to the corresponding `label` elements.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should give the first `label` element an appropriate `for` attribute.
|
||||
|
||||
```js
|
||||
assert.isAtLeast(document.querySelectorAll('label')?.[0]?.htmlFor?.length, 1);
|
||||
```
|
||||
|
||||
You should give the second `label` element an appropriate `for` attribute.
|
||||
|
||||
```js
|
||||
assert.isAtLeast(document.querySelectorAll('label')?.[1]?.htmlFor?.length, 1);
|
||||
```
|
||||
|
||||
You should give the third `label` element an appropriate `for` attribute.
|
||||
|
||||
```js
|
||||
assert.isAtLeast(document.querySelectorAll('label')?.[2]?.htmlFor?.length, 1);
|
||||
```
|
||||
|
||||
You should give the first `label` element an appropriate text content.
|
||||
|
||||
```js
|
||||
assert.isAtLeast(document.querySelectorAll('label')?.[0]?.textContent?.length, 1);
|
||||
```
|
||||
|
||||
You should give the second `label` element an appropriate text content.
|
||||
|
||||
```js
|
||||
assert.isAtLeast(document.querySelectorAll('label')?.[1]?.textContent?.length, 1);
|
||||
```
|
||||
|
||||
You should give the third `label` element an appropriate text content.
|
||||
|
||||
```js
|
||||
assert.isAtLeast(document.querySelectorAll('label')?.[2]?.textContent?.length, 1);
|
||||
```
|
||||
|
||||
You should give the first `input` element an `id` attribute matching the `for` attribute of the first `label`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('input')?.[0]?.id, document.querySelectorAll('label')?.[0]?.htmlFor);
|
||||
```
|
||||
|
||||
You should give the second `input` element an `id` attribute matching the `for` attribute of the second `label`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('input')?.[1]?.id, document.querySelectorAll('label')?.[1]?.htmlFor);
|
||||
```
|
||||
|
||||
You should give the third `input` element an `id` attribute matching the `for` attribute of the third `label`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('input')?.[2]?.id, document.querySelectorAll('label')?.[2]?.htmlFor);
|
||||
```
|
||||
|
||||
You should not use the same `id` attribute for more than one `input` element.
|
||||
|
||||
```js
|
||||
const id = (n) => document.querySelectorAll('input')?.[n]?.id;
|
||||
assert.notEqual(id(0), id(1));
|
||||
assert.notEqual(id(0), id(2));
|
||||
assert.notEqual(id(1), id(2));
|
||||
```
|
||||
|
||||
You should not use the same `for` attribute for more than one `label` element.
|
||||
|
||||
```js
|
||||
const htmlFor = (n) => document.querySelectorAll('label')?.[n]?.htmlFor;
|
||||
assert.notEqual(htmlFor(0), htmlFor(1));
|
||||
assert.notEqual(htmlFor(0), htmlFor(2));
|
||||
assert.notEqual(htmlFor(1), htmlFor(2));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
--fcc-editable-region--
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
<div class="info">
|
||||
<label></label>
|
||||
<input />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label></label>
|
||||
<input />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label></label>
|
||||
<input />
|
||||
</div>
|
||||
</section>
|
||||
--fcc-editable-region--
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
</section>
|
||||
</form>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: #f5f6f7;
|
||||
color: #1b1b32;
|
||||
font-family: Helvetica;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: #1b1b32;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width: max(100px, 18vw);
|
||||
background-color: #0a0a23;
|
||||
aspect-ratio: 35 / 4;
|
||||
padding: 0.4rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #f1be32;
|
||||
font-size: min(5vw, 1.2em);
|
||||
}
|
||||
|
||||
nav {
|
||||
width: 50%;
|
||||
max-width: 300px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
nav > ul {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
font-family: Verdana, Tahoma;
|
||||
}
|
||||
|
||||
h2 {
|
||||
border-bottom: 4px solid #dfdfe2;
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,161 @@
|
||||
---
|
||||
id: 6143908b6aafb00a659ca189
|
||||
title: Part 21
|
||||
challengeType: 0
|
||||
dashedName: part-21
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Keeping in mind best-practices for form inputs, give each `input` an appropriate `type` and `name` attribute. Then, give the first `input` a `placeholder` attribute.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should give the first `input` a `type` of `text`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('input')?.[0]?.type, 'text');
|
||||
```
|
||||
|
||||
You should give the second `input` a `type` of `email`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('input')?.[1]?.type, 'email');
|
||||
```
|
||||
|
||||
You should give the third `input` a `type` of `date`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('input')?.[2]?.type, 'date');
|
||||
```
|
||||
|
||||
You should give the first `input` an appropriate `name` attribute.
|
||||
|
||||
```js
|
||||
assert.isAtLeast(document.querySelectorAll('input')?.[0]?.name?.length, 1);
|
||||
```
|
||||
|
||||
You should give the second `input` an appropriate `name` attribute.
|
||||
|
||||
```js
|
||||
assert.isAtLeast(document.querySelectorAll('input')?.[1]?.name?.length, 1);
|
||||
```
|
||||
|
||||
You should give the third `input` an appropriate `name` attribute.
|
||||
|
||||
```js
|
||||
assert.isAtLeast(document.querySelectorAll('input')?.[2]?.name?.length, 1);
|
||||
```
|
||||
|
||||
You should give the first `input` a `placeholder` attribute.
|
||||
|
||||
```js
|
||||
assert.notEmpty(document.querySelectorAll('input')?.[0]?.placeholder);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
--fcc-editable-region--
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
<div class="info">
|
||||
<label for="student-name">Name:</label>
|
||||
<input id="student-name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input id="student-email" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.:</label>
|
||||
<input id="birth-date" />
|
||||
</div>
|
||||
</section>
|
||||
--fcc-editable-region--
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
</section>
|
||||
</form>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: #f5f6f7;
|
||||
color: #1b1b32;
|
||||
font-family: Helvetica;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: #1b1b32;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width: max(100px, 18vw);
|
||||
background-color: #0a0a23;
|
||||
aspect-ratio: 35 / 4;
|
||||
padding: 0.4rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #f1be32;
|
||||
font-size: min(5vw, 1.2em);
|
||||
}
|
||||
|
||||
nav {
|
||||
width: 50%;
|
||||
max-width: 300px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
nav > ul {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
font-family: Verdana, Tahoma;
|
||||
}
|
||||
|
||||
h2 {
|
||||
border-bottom: 4px solid #dfdfe2;
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,127 @@
|
||||
---
|
||||
id: 6143920c8eafb00b735746ce
|
||||
title: Part 22
|
||||
challengeType: 0
|
||||
dashedName: part-22
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Even though you added a `placeholder` to the first `input` element in the previous lesson, this is actually not a best-practice for accessibility; too often, users confuse the placeholder text with an actual input value - they think there is already a value in the input.
|
||||
|
||||
Remove the placeholder text from the first `input` element, relying on the `label` being the best-practice.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should remove the `placeholder` attribute from the first `input` element.
|
||||
|
||||
```js
|
||||
assert.isEmpty(document.querySelectorAll('input')?.[0]?.placeholder);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
--fcc-editable-region--
|
||||
<div class="info">
|
||||
<label for="student-name">Name:</label>
|
||||
<input type="text" name="student-name" id="student-name" placeholder="e.g. Quincy Larson" />
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input type="email" name="student-email" id="student-email" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.:</label>
|
||||
<input type="date" name="birth-date" id="birth-date" />
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
</section>
|
||||
</form>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: #f5f6f7;
|
||||
color: #1b1b32;
|
||||
font-family: Helvetica;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: #1b1b32;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width: max(100px, 18vw);
|
||||
background-color: #0a0a23;
|
||||
aspect-ratio: 35 / 4;
|
||||
padding: 0.4rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #f1be32;
|
||||
font-size: min(5vw, 1.2em);
|
||||
}
|
||||
|
||||
nav {
|
||||
width: 50%;
|
||||
max-width: 300px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
nav > ul {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
font-family: Verdana, Tahoma;
|
||||
}
|
||||
|
||||
h2 {
|
||||
border-bottom: 4px solid #dfdfe2;
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,139 @@
|
||||
---
|
||||
id: 6143931a113bb80c45546287
|
||||
title: Part 23
|
||||
challengeType: 0
|
||||
dashedName: part-23
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Arguably, `D.O.B.` is not descriptive enough. This is especially true for visually impaired users. One way to get around such an issue, without having to add visible text to the label, is to add text only a screen reader can read.
|
||||
|
||||
Append a `span` element with a class of `sr-only` to the current text content of the third `label` element.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add a `span` element within the third `label` element.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('.info:nth-of-type(3) > label > span'));
|
||||
```
|
||||
|
||||
You should give the `span` element a class of `sr-only`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('.info:nth-of-type(3) > label > span')?.className, 'sr-only');
|
||||
```
|
||||
|
||||
You should place the `span` after the text content `D.O.B.`.
|
||||
|
||||
```js
|
||||
assert.match(document.querySelector('.info:nth-of-type(3) > label')?.innerHTML, /D\.O\.B\.<span/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
<div class="info">
|
||||
<label for="student-name">Name:</label>
|
||||
<input type="text" name="student-name" id="student-name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input type="email" name="student-email" id="student-email" />
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.</label>
|
||||
<input type="date" name="birth-date" id="birth-date" />
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
</section>
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
</section>
|
||||
</form>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: #f5f6f7;
|
||||
color: #1b1b32;
|
||||
font-family: Helvetica;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: #1b1b32;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width: max(100px, 18vw);
|
||||
background-color: #0a0a23;
|
||||
aspect-ratio: 35 / 4;
|
||||
padding: 0.4rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #f1be32;
|
||||
font-size: min(5vw, 1.2em);
|
||||
}
|
||||
|
||||
nav {
|
||||
width: 50%;
|
||||
max-width: 300px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
nav > ul {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
font-family: Verdana, Tahoma;
|
||||
}
|
||||
|
||||
h2 {
|
||||
border-bottom: 4px solid #dfdfe2;
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,125 @@
|
||||
---
|
||||
id: 614394fb41985e0d2012a93e
|
||||
title: Part 24
|
||||
challengeType: 0
|
||||
dashedName: part-24
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Within the `span` element, add the text `(Date of Birth)`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should give the `span` element the text `(Date of Birth)`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('.info:nth-of-type(3) > label > span')?.textContent, '(Date of Birth)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
<div class="info">
|
||||
<label for="student-name">Name:</label>
|
||||
<input type="text" name="student-name" id="student-name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input type="email" name="student-email" id="student-email" />
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.<span class="sr-only"></span></label>
|
||||
<input type="date" name="birth-date" id="birth-date" />
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
</section>
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
</section>
|
||||
</form>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: #f5f6f7;
|
||||
color: #1b1b32;
|
||||
font-family: Helvetica;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: #1b1b32;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width: max(100px, 18vw);
|
||||
background-color: #0a0a23;
|
||||
aspect-ratio: 35 / 4;
|
||||
padding: 0.4rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #f1be32;
|
||||
font-size: min(5vw, 1.2em);
|
||||
}
|
||||
|
||||
nav {
|
||||
width: 50%;
|
||||
max-width: 300px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
nav > ul {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
font-family: Verdana, Tahoma;
|
||||
}
|
||||
|
||||
h2 {
|
||||
border-bottom: 4px solid #dfdfe2;
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,197 @@
|
||||
---
|
||||
id: 6143956ed76ed60e012faa51
|
||||
title: Part 25
|
||||
challengeType: 0
|
||||
dashedName: part-25
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The `.sr-only` text is still visible. There is a common pattern to visually hide text for only screen readers to read.
|
||||
|
||||
This pattern is to set the following CSS properties:
|
||||
|
||||
```css
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
```
|
||||
|
||||
Use the above to define the `sr-only` class.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `.sr-only` selector.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('.sr-only'));
|
||||
```
|
||||
|
||||
You should give the `.sr-only` a `position` of `absolute`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.position, 'absolute');
|
||||
```
|
||||
|
||||
You should give the `.sr-only` a `width` of `1px`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.width, '1px');
|
||||
```
|
||||
|
||||
You should give the `.sr-only` a `height` of `1px`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.height, '1px');
|
||||
```
|
||||
|
||||
You should give the `.sr-only` a `padding` of `0`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.padding, '0px');
|
||||
```
|
||||
|
||||
You should give the `.sr-only` a `margin` of `-1px`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.margin, '-1px');
|
||||
```
|
||||
|
||||
You should give the `.sr-only` an `overflow` of `hidden`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.overflow, 'hidden');
|
||||
```
|
||||
|
||||
You should give the `.sr-only` a `clip` of `rect(0, 0, 0, 0)`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.clip, 'rect(0px, 0px, 0px, 0px)');
|
||||
```
|
||||
|
||||
You should give the `.sr-only` a `white-space` of `nowrap`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.whiteSpace, 'nowrap');
|
||||
```
|
||||
|
||||
You should give the `.sr-only` a `border` of `0`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.border, '0px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
<div class="info">
|
||||
<label for="student-name">Name:</label>
|
||||
<input type="text" name="student-name" id="student-name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input type="email" name="student-email" id="student-email" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
|
||||
<input type="date" name="birth-date" id="birth-date" />
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
</section>
|
||||
</form>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: #f5f6f7;
|
||||
color: #1b1b32;
|
||||
font-family: Helvetica;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: #1b1b32;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width: max(100px, 18vw);
|
||||
background-color: #0a0a23;
|
||||
aspect-ratio: 35 / 4;
|
||||
padding: 0.4rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #f1be32;
|
||||
font-size: min(5vw, 1.2em);
|
||||
}
|
||||
|
||||
nav {
|
||||
width: 50%;
|
||||
max-width: 300px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
nav > ul {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
font-family: Verdana, Tahoma;
|
||||
}
|
||||
|
||||
h2 {
|
||||
border-bottom: 4px solid #dfdfe2;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
```
|
||||
@ -0,0 +1,200 @@
|
||||
---
|
||||
id: 614396f7ae83f20ea6f9f4b3
|
||||
title: Part 26
|
||||
challengeType: 0
|
||||
dashedName: part-26
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Within the second `section` element, add two `div` elements with a class of `question-block`.
|
||||
|
||||
Then, within each `div.question-block` element, add one `p` element with text of incrementing numbers, starting at `1`, and one `fieldset` element with a class of `question`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should nest two `div` elements within the second `section` element.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('section:nth-of-type(2) > div')?.length, 2);
|
||||
```
|
||||
|
||||
You should give the first new `div` element a class of `question-block`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('section:nth-of-type(2) > div')?.[0]?.className, 'question-block');
|
||||
```
|
||||
|
||||
You should give the second new `div` element a class of `question-block`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('section:nth-of-type(2) > div')?.[1]?.className, 'question-block');
|
||||
```
|
||||
|
||||
You should nest one `p` element within each `div.question-block` element.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > p')?.length, 2);
|
||||
```
|
||||
|
||||
You should give the first `p` element text of `1`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > p')?.[0]?.textContent, '1');
|
||||
```
|
||||
|
||||
You should give the second `p` element text of `2`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > p')?.[1]?.textContent, '2');
|
||||
```
|
||||
|
||||
You should nest one `fieldset` element within each `div.question-block` element.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > fieldset')?.length, 2);
|
||||
```
|
||||
|
||||
You should place the first `fieldset` element after the first `p` element.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('section:nth-of-type(2) > div.question-block > p + fieldset'));
|
||||
```
|
||||
|
||||
You should place the second `fieldset` element after the second `p` element.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('section:nth-of-type(2) > div.question-block:nth-of-type(2) > p + fieldset'));
|
||||
```
|
||||
|
||||
You should give the first `fieldset` element a class of `question`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > fieldset')?.[0]?.className, 'question');
|
||||
```
|
||||
|
||||
You should give the second `fieldset` element a class of `question`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > fieldset')?.[1]?.className, 'question');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
<div class="info">
|
||||
<label for="student-name">Name:</label>
|
||||
<input type="text" name="student-name" id="student-name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input type="email" name="student-email" id="student-email" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
|
||||
<input type="date" name="birth-date" id="birth-date" />
|
||||
</div>
|
||||
</section>
|
||||
--fcc-editable-region--
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
|
||||
</section>
|
||||
--fcc-editable-region--
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
</section>
|
||||
</form>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: #f5f6f7;
|
||||
color: #1b1b32;
|
||||
font-family: Helvetica;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: #1b1b32;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width: max(100px, 18vw);
|
||||
background-color: #0a0a23;
|
||||
aspect-ratio: 35 / 4;
|
||||
padding: 0.4rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #f1be32;
|
||||
font-size: min(5vw, 1.2em);
|
||||
}
|
||||
|
||||
nav {
|
||||
width: 50%;
|
||||
max-width: 300px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
nav > ul {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
font-family: Verdana, Tahoma;
|
||||
}
|
||||
|
||||
h2 {
|
||||
border-bottom: 4px solid #dfdfe2;
|
||||
}
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,177 @@
|
||||
---
|
||||
id: 6143cb26f7edff2dc28f7da5
|
||||
title: Part 27
|
||||
challengeType: 0
|
||||
dashedName: part-27
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Each `fieldset` will contain a true/false question.
|
||||
|
||||
Within each `fieldset`, nest one `legend` element, and one `ul` element with two options.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should nest one `legend` element within the first `fieldset` element.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('.question-block:nth-of-type(1) > fieldset > legend')?.length, 1);
|
||||
```
|
||||
|
||||
You should nest one `ul` element within the first `fieldset` element.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('.question-block:nth-of-type(1) > fieldset > ul')?.length, 1);
|
||||
```
|
||||
|
||||
You should nest two `li` elements within the first `ul` element.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('fieldset > ul')?.[0]?.querySelectorAll('li')?.length, 2);
|
||||
```
|
||||
|
||||
You should nest one `legend` element within the second `fieldset` element.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('.question-block:nth-of-type(2) > fieldset > legend')?.length, 1);
|
||||
```
|
||||
|
||||
You should nest one `ul` element within the second `fieldset` element.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('.question-block:nth-of-type(2) > fieldset > ul')?.length, 1);
|
||||
```
|
||||
|
||||
You should nest two `li` elements within the second `ul` element.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('fieldset > ul')?.[1]?.querySelectorAll('li')?.length, 2);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
<div class="info">
|
||||
<label for="student-name">Name:</label>
|
||||
<input type="text" name="student-name" id="student-name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input type="email" name="student-email" id="student-email" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
|
||||
<input type="date" name="birth-date" id="birth-date" />
|
||||
</div>
|
||||
</section>
|
||||
--fcc-editable-region--
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
<div class="question-block">
|
||||
<p>1</p>
|
||||
<fieldset class="question"></fieldset>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<p>2</p>
|
||||
<fieldset class="question"></fieldset>
|
||||
</div>
|
||||
</section>
|
||||
--fcc-editable-region--
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
</section>
|
||||
</form>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: #f5f6f7;
|
||||
color: #1b1b32;
|
||||
font-family: Helvetica;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: #1b1b32;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width: max(100px, 18vw);
|
||||
background-color: #0a0a23;
|
||||
aspect-ratio: 35 / 4;
|
||||
padding: 0.4rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #f1be32;
|
||||
font-size: min(5vw, 1.2em);
|
||||
}
|
||||
|
||||
nav {
|
||||
width: 50%;
|
||||
max-width: 300px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
nav > ul {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
font-family: Verdana, Tahoma;
|
||||
}
|
||||
|
||||
h2 {
|
||||
border-bottom: 4px solid #dfdfe2;
|
||||
}
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,195 @@
|
||||
---
|
||||
id: 6144e818fd5ea704fe56081d
|
||||
title: Part 28
|
||||
challengeType: 0
|
||||
dashedName: part-28
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Give each `fieldset` an adaquate `name` attribute. Then, give both unordered lists a `class` of `answers-list`.
|
||||
|
||||
Finally, add use the `legend` to caption the content of the `fieldset`, by placing a true/false question as the text content.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should give the first `fieldset` an adaquate `name` attribute. _Hint: I would use `html-question-one`_
|
||||
|
||||
```js
|
||||
assert.notEmpty(document.querySelectorAll('fieldset')?.[0]?.name);
|
||||
```
|
||||
|
||||
You should give the second `fieldset` an adaquate `name` attribute. _Hint: I would use `html-question-two`_
|
||||
|
||||
```js
|
||||
assert.notEmpty(document.querySelectorAll('fieldset')?.[1]?.name);
|
||||
```
|
||||
|
||||
You should give the first `ul` element a `class` of `answers-list`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('fieldset > ul')?.[0]?.className, 'answers-list');
|
||||
```
|
||||
|
||||
You should give the second `ul` element a `class` of `answers-list`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('fieldset > ul')?.[1]?.className, 'answers-list');
|
||||
```
|
||||
|
||||
You should give the first `legend` element text content.
|
||||
|
||||
```js
|
||||
assert.notEmpty(document.querySelectorAll('legend')?.[0]?.textContent);
|
||||
```
|
||||
|
||||
You should give the second `legend` element text content.
|
||||
|
||||
```js
|
||||
assert.notEmpty(document.querySelectorAll('legend')?.[1]?.textContent);
|
||||
```
|
||||
|
||||
You should not use the same text content for both `legend` elements.
|
||||
|
||||
```js
|
||||
assert.notEqual(document.querySelectorAll('legend')?.[0]?.textContent, document.querySelectorAll('legend')?.[1]?.textContent);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
<div class="info">
|
||||
<label for="student-name">Name:</label>
|
||||
<input type="text" name="student-name" id="student-name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input type="email" name="student-email" id="student-email" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
|
||||
<input type="date" name="birth-date" id="birth-date" />
|
||||
</div>
|
||||
</section>
|
||||
--fcc-editable-region--
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
<div class="question-block">
|
||||
<p>1</p>
|
||||
<fieldset class="question">
|
||||
<legend></legend>
|
||||
<ul>
|
||||
<li></li>
|
||||
<li></li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<p>2</p>
|
||||
<fieldset class="question">
|
||||
<legend></legend>
|
||||
<ul>
|
||||
<li></li>
|
||||
<li></li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
</section>
|
||||
--fcc-editable-region--
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
</section>
|
||||
</form>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: #f5f6f7;
|
||||
color: #1b1b32;
|
||||
font-family: Helvetica;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: #1b1b32;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width: max(100px, 18vw);
|
||||
background-color: #0a0a23;
|
||||
aspect-ratio: 35 / 4;
|
||||
padding: 0.4rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #f1be32;
|
||||
font-size: min(5vw, 1.2em);
|
||||
}
|
||||
|
||||
nav {
|
||||
width: 50%;
|
||||
max-width: 300px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
nav > ul {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
font-family: Verdana, Tahoma;
|
||||
}
|
||||
|
||||
h2 {
|
||||
border-bottom: 4px solid #dfdfe2;
|
||||
}
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,231 @@
|
||||
---
|
||||
id: 6144f8dc6849e405dd8bb829
|
||||
title: Part 29
|
||||
challengeType: 0
|
||||
dashedName: part-29
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
To provide the functionality of the true/false questions, we need a set of inputs which do not allow both to be selected at the same time.
|
||||
|
||||
Within each list element, nest one `label` element, and within each `label` element, nest one `input` element with the appropriate `type`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should nest one `label` element within the first `li` element.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelectorAll('ul.answers-list > li')?.[0]?.querySelector('label'));
|
||||
```
|
||||
|
||||
You should nest one `label` element within the second `li` element.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelectorAll('ul.answers-list > li')?.[1]?.querySelector('label'));
|
||||
```
|
||||
|
||||
You should nest one `label` element within the third `li` element.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelectorAll('ul.answers-list > li')?.[2]?.querySelector('label'));
|
||||
```
|
||||
|
||||
You should nest one `label` element within the fourth `li` element.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelectorAll('ul.answers-list > li')?.[3]?.querySelector('label'));
|
||||
```
|
||||
|
||||
You should nest one `input` element within the first `label` element.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelectorAll('ul.answers-list > li')?.[0]?.querySelector('label')?.querySelector('input'));
|
||||
```
|
||||
|
||||
You should nest one `input` element within the second `label` element.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelectorAll('ul.answers-list > li')?.[1]?.querySelector('label')?.querySelector('input'));
|
||||
```
|
||||
|
||||
You should nest one `input` element within the third `label` element.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelectorAll('ul.answers-list > li')?.[2]?.querySelector('label')?.querySelector('input'));
|
||||
```
|
||||
|
||||
You should nest one `input` element within the fourth `label` element.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelectorAll('ul.answers-list > li')?.[3]?.querySelector('label')?.querySelector('input'));
|
||||
```
|
||||
|
||||
You should give the first `input` a `type` of `radio`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('ul.answers-list > li > label > input')?.[0]?.type, 'radio');
|
||||
```
|
||||
|
||||
You should give the second `input` a `type` of `radio`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('ul.answers-list > li > label > input')?.[1]?.type, 'radio');
|
||||
```
|
||||
|
||||
You should give the third `input` a `type` of `radio`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('ul.answers-list > li > label > input')?.[2]?.type, 'radio');
|
||||
```
|
||||
|
||||
You should give the fourth `input` a `type` of `radio`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('ul.answers-list > li > label > input')?.[3]?.type, 'radio');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
<div class="info">
|
||||
<label for="student-name">Name:</label>
|
||||
<input type="text" name="student-name" id="student-name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input type="email" name="student-email" id="student-email" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
|
||||
<input type="date" name="birth-date" id="birth-date" />
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
<div class="question-block">
|
||||
<p>1</p>
|
||||
<fieldset class="question" name="html-question-one">
|
||||
<legend>
|
||||
The legend element represents a caption for the content of its
|
||||
parent fieldset element
|
||||
</legend>
|
||||
--fcc-editable-region--
|
||||
<ul class="answers-list">
|
||||
<li></li>
|
||||
<li></li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<p>2</p>
|
||||
<fieldset class="question" name="html-question-two">
|
||||
<legend>
|
||||
A label element nesting an input element is required to have a
|
||||
for attribute with the same value as the input's id
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li></li>
|
||||
<li></li>
|
||||
</ul>
|
||||
--fcc-editable-region--
|
||||
</fieldset>
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
</section>
|
||||
</form>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: #f5f6f7;
|
||||
color: #1b1b32;
|
||||
font-family: Helvetica;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: #1b1b32;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width: max(100px, 18vw);
|
||||
background-color: #0a0a23;
|
||||
aspect-ratio: 35 / 4;
|
||||
padding: 0.4rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #f1be32;
|
||||
font-size: min(5vw, 1.2em);
|
||||
}
|
||||
|
||||
nav {
|
||||
width: 50%;
|
||||
max-width: 300px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
nav > ul {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
font-family: Verdana, Tahoma;
|
||||
}
|
||||
|
||||
h2 {
|
||||
border-bottom: 4px solid #dfdfe2;
|
||||
}
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,207 @@
|
||||
---
|
||||
id: 6145e6eeaa66c605eb087fe9
|
||||
title: Part 30
|
||||
challengeType: 0
|
||||
dashedName: part-30
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Although not required for `label` elements with a nested `input`, it is still best-practice to explicitly link a `label` with its corresponding `input` element.
|
||||
|
||||
Link the `label` elements with their corresponding `input` elements.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should give the first `label` a `for` attribute matching the `id` of its `input` element.
|
||||
|
||||
```js
|
||||
const htmlFor = document.querySelectorAll('ul.answers-list > li > label')?.[0]?.htmlFor;
|
||||
assert.notEmpty(htmlFor);
|
||||
assert.equal(htmlFor, document.querySelectorAll('ul.answers-list > li > label > input')?.[0]?.id);
|
||||
```
|
||||
|
||||
You should give the second `label` a `for` attribute matching the `id` of its `input` element.
|
||||
|
||||
```js
|
||||
const htmlFor = document.querySelectorAll('ul.answers-list > li > label')?.[1]?.htmlFor;
|
||||
assert.notEmpty(htmlFor);
|
||||
assert.equal(htmlFor, document.querySelectorAll('ul.answers-list > li > label > input')?.[1]?.id);
|
||||
```
|
||||
|
||||
You should give the third `label` a `for` attribute matching the `id` of its `input` element.
|
||||
|
||||
```js
|
||||
const htmlFor = document.querySelectorAll('ul.answers-list > li > label')?.[2]?.htmlFor;
|
||||
assert.notEmpty(htmlFor);
|
||||
assert.equal(htmlFor, document.querySelectorAll('ul.answers-list > li > label > input')?.[2]?.id);
|
||||
```
|
||||
|
||||
You should give the fourth `label` a `for` attribute matching the `id` of its `input` element.
|
||||
|
||||
```js
|
||||
const htmlFor = document.querySelectorAll('ul.answers-list > li > label')?.[3]?.htmlFor;
|
||||
assert.notEmpty(htmlFor);
|
||||
assert.equal(htmlFor, document.querySelectorAll('ul.answers-list > li > label > input')?.[3]?.id);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
<div class="info">
|
||||
<label for="student-name">Name:</label>
|
||||
<input type="text" name="student-name" id="student-name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input type="email" name="student-email" id="student-email" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
|
||||
<input type="date" name="birth-date" id="birth-date" />
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
<div class="question-block">
|
||||
<p>1</p>
|
||||
<fieldset class="question" name="html-question-one">
|
||||
<legend>
|
||||
The legend element represents a caption for the content of its
|
||||
parent fieldset element
|
||||
</legend>
|
||||
--fcc-editable-region--
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label>
|
||||
<input type="radio" />
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label>
|
||||
<input type="radio" />
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<p>2</p>
|
||||
<fieldset class="question" name="html-question-two">
|
||||
<legend>
|
||||
A label element nesting an input element is required to have a
|
||||
for attribute with the same value as the input's id
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label>
|
||||
<input type="radio" />
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label>
|
||||
<input type="radio" />
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
--fcc-editable-region--
|
||||
</fieldset>
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
</section>
|
||||
</form>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: #f5f6f7;
|
||||
color: #1b1b32;
|
||||
font-family: Helvetica;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: #1b1b32;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width: max(100px, 18vw);
|
||||
background-color: #0a0a23;
|
||||
aspect-ratio: 35 / 4;
|
||||
padding: 0.4rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #f1be32;
|
||||
font-size: min(5vw, 1.2em);
|
||||
}
|
||||
|
||||
nav {
|
||||
width: 50%;
|
||||
max-width: 300px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
nav > ul {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
font-family: Verdana, Tahoma;
|
||||
}
|
||||
|
||||
h2 {
|
||||
border-bottom: 4px solid #dfdfe2;
|
||||
}
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,287 @@
|
||||
---
|
||||
id: 6145e8b5080a5f06bb0223d0
|
||||
title: Part 31
|
||||
challengeType: 0
|
||||
dashedName: part-31
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Give the `label` elements text such that the `input` comes before the text. Then, give the `input` elements a `value` matching the text.
|
||||
|
||||
The text should either be `True` or `False`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should give the first `label` element text content.
|
||||
|
||||
```js
|
||||
assert.notEmpty(document.querySelectorAll('ul.answers-list > li > label')?.[0]?.textContent?.trim());
|
||||
```
|
||||
|
||||
You should give the second `label` element text content.
|
||||
|
||||
```js
|
||||
assert.notEmpty(document.querySelectorAll('ul.answers-list > li > label')?.[1]?.textContent?.trim());
|
||||
```
|
||||
|
||||
You should give the third `label` element text content.
|
||||
|
||||
```js
|
||||
assert.notEmpty(document.querySelectorAll('ul.answers-list > li > label')?.[2]?.textContent?.trim());
|
||||
```
|
||||
|
||||
You should give the fourth `label` element text content.
|
||||
|
||||
```js
|
||||
assert.notEmpty(document.querySelectorAll('ul.answers-list > li > label')?.[3]?.textContent?.trim());
|
||||
```
|
||||
|
||||
You should place the first `label` text content after the `input` element.
|
||||
|
||||
```js
|
||||
assert.match(document.querySelectorAll('ul.answers-list > li > label')?.[0]?.innerHTML, />[\s\S]+[a-zA-Z]/);
|
||||
```
|
||||
|
||||
You should place the second `label` text content after the `input` element.
|
||||
|
||||
```js
|
||||
assert.match(document.querySelectorAll('ul.answers-list > li > label')?.[1]?.innerHTML, />[\s\S]+[a-zA-Z]/);
|
||||
```
|
||||
|
||||
You should place the third `label` text content after the `input` element.
|
||||
|
||||
```js
|
||||
assert.match(document.querySelectorAll('ul.answers-list > li > label')?.[2]?.innerHTML, />[\s\S]+[a-zA-Z]/);
|
||||
```
|
||||
|
||||
You should place the fourth `label` text content after the `input` element.
|
||||
|
||||
```js
|
||||
assert.match(document.querySelectorAll('ul.answers-list > li > label')?.[3]?.innerHTML, />[\s\S]+[a-zA-Z]/);
|
||||
```
|
||||
|
||||
You should give the first `label` the text `True` or `False`.
|
||||
|
||||
```js
|
||||
assert.include(['True', 'False'], document.querySelectorAll('ul.answers-list > li > label')?.[0]?.textContent?.trim());
|
||||
```
|
||||
|
||||
You should give the second `label` the text `True`.
|
||||
|
||||
```js
|
||||
const l = (n) => document.querySelectorAll('ul.answers-list > li > label')?.[n]?.textContent?.trim();
|
||||
assert(l(0) === 'False' ? l(1) === 'True' : true);
|
||||
```
|
||||
|
||||
You should give the second `label` the text `False`.
|
||||
|
||||
```js
|
||||
const l = (n) => document.querySelectorAll('ul.answers-list > li > label')?.[n]?.textContent?.trim();
|
||||
assert(l(0) === 'True' ? l(1) === 'False' : true);
|
||||
```
|
||||
|
||||
You should give the third `label` the text `True` or `False`.
|
||||
|
||||
```js
|
||||
assert.include(['True', 'False'], document.querySelectorAll('ul.answers-list > li > label')?.[2]?.textContent?.trim());
|
||||
```
|
||||
|
||||
You should give the fourth `label` the text `True`.
|
||||
|
||||
```js
|
||||
const l = (n) => document.querySelectorAll('ul.answers-list > li > label')?.[n]?.textContent?.trim();
|
||||
assert(l(2) === 'False' ? l(3) === 'True' : true);
|
||||
```
|
||||
|
||||
You should give the fourth `label` the text `False`.
|
||||
|
||||
```js
|
||||
const l = (n) => document.querySelectorAll('ul.answers-list > li > label')?.[n]?.textContent?.trim();
|
||||
assert(l(2) === 'True' ? l(3) === 'False' : true);
|
||||
```
|
||||
|
||||
You should give the first `input` a `value` matching the `label` text content.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('ul.answers-list > li > label')?.[0]?.textContent?.trim()?.toLowerCase(), document.querySelectorAll('ul.answers-list > li > label > input')?.[0]?.value?.toLowerCase());
|
||||
```
|
||||
|
||||
You should give the second `input` a `value` matching the `label` text content.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('ul.answers-list > li > label')?.[1]?.textContent?.trim()?.toLowerCase(), document.querySelectorAll('ul.answers-list > li > label > input')?.[1]?.value?.toLowerCase());
|
||||
```
|
||||
|
||||
You should give the third `input` a `value` matching the `label` text content.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('ul.answers-list > li > label')?.[2]?.textContent?.trim()?.toLowerCase(), document.querySelectorAll('ul.answers-list > li > label > input')?.[2]?.value?.toLowerCase());
|
||||
```
|
||||
|
||||
You should give the fourth `input` a `value` matching the `label` text content.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('ul.answers-list > li > label')?.[3]?.textContent?.trim()?.toLowerCase(), document.querySelectorAll('ul.answers-list > li > label > input')?.[3]?.value?.toLowerCase());
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
<div class="info">
|
||||
<label for="student-name">Name:</label>
|
||||
<input type="text" name="student-name" id="student-name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input type="email" name="student-email" id="student-email" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
|
||||
<input type="date" name="birth-date" id="birth-date" />
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
<div class="question-block">
|
||||
<p>1</p>
|
||||
<fieldset class="question" name="html-question-one">
|
||||
<legend>
|
||||
The legend element represents a caption for the content of its
|
||||
parent fieldset element
|
||||
</legend>
|
||||
--fcc-editable-region--
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q1-a1">
|
||||
<input type="radio" id="q1-a1" />
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q1-a2">
|
||||
<input type="radio" id="q1-a2" />
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<p>2</p>
|
||||
<fieldset class="question" name="html-question-two">
|
||||
<legend>
|
||||
A label element nesting an input element is required to have a
|
||||
for attribute with the same value as the input's id
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q2-a1">
|
||||
<input type="radio" id="q2-a1" />
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q2-a2">
|
||||
<input type="radio" id="q2-a2" />
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
--fcc-editable-region--
|
||||
</fieldset>
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
</section>
|
||||
</form>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: #f5f6f7;
|
||||
color: #1b1b32;
|
||||
font-family: Helvetica;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: #1b1b32;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width: max(100px, 18vw);
|
||||
background-color: #0a0a23;
|
||||
aspect-ratio: 35 / 4;
|
||||
padding: 0.4rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #f1be32;
|
||||
font-size: min(5vw, 1.2em);
|
||||
}
|
||||
|
||||
nav {
|
||||
width: 50%;
|
||||
max-width: 300px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
nav > ul {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
font-family: Verdana, Tahoma;
|
||||
}
|
||||
|
||||
h2 {
|
||||
border-bottom: 4px solid #dfdfe2;
|
||||
}
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,224 @@
|
||||
---
|
||||
id: 6145eb5f08a38a0786c7a80c
|
||||
title: Part 32
|
||||
challengeType: 0
|
||||
dashedName: part-32
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
If you click on the radio inputs, you might notice both inputs within the same true/false fieldset can be selected at the same time.
|
||||
|
||||
Group the relevant inputs together such that only one input from a pair can be selected at a time.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should give the first `input` a `name` attribute.
|
||||
|
||||
```js
|
||||
assert.notEmpty(document.querySelectorAll('ul.answers-list > li > label > input')?.[0]?.name);
|
||||
```
|
||||
|
||||
You should give the second `input` a `name` attribute.
|
||||
|
||||
```js
|
||||
assert.notEmpty(document.querySelectorAll('ul.answers-list > li > label > input')?.[1]?.name);
|
||||
```
|
||||
|
||||
You should give the third `input` a `name` attribute.
|
||||
|
||||
```js
|
||||
assert.notEmpty(document.querySelectorAll('ul.answers-list > li > label > input')?.[2]?.name);
|
||||
```
|
||||
|
||||
You should give the fourth `input` a `name` attribute.
|
||||
|
||||
```js
|
||||
assert.notEmpty(document.querySelectorAll('ul.answers-list > li > label > input')?.[3]?.name);
|
||||
```
|
||||
|
||||
You should give the second `input` a `name` attribute matching the `name` attribute of the first `input`.
|
||||
|
||||
```js
|
||||
const i = (n) => document.querySelectorAll('ul.answers-list > li > label > input')?.[n]?.name;
|
||||
assert.equal(i(1), i(0));
|
||||
```
|
||||
|
||||
You should give the fourth `input` a `name` attribute matching the `name` attribute of the third `input`.
|
||||
|
||||
```js
|
||||
const i = (n) => document.querySelectorAll('ul.answers-list > li > label > input')?.[n]?.name;
|
||||
assert.equal(i(3), i(2));
|
||||
```
|
||||
|
||||
You should give different `name` attributes to the first `input` and the third `input`.
|
||||
|
||||
```js
|
||||
const i = (n) => document.querySelectorAll('ul.answers-list > li > label > input')?.[n]?.name;
|
||||
assert.notEqual(i(0), i(2));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
<div class="info">
|
||||
<label for="student-name">Name:</label>
|
||||
<input type="text" name="student-name" id="student-name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input type="email" name="student-email" id="student-email" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
|
||||
<input type="date" name="birth-date" id="birth-date" />
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
<div class="question-block">
|
||||
<p>1</p>
|
||||
<fieldset class="question" name="html-question-one">
|
||||
<legend>
|
||||
The legend element represents a caption for the content of its
|
||||
parent fieldset element
|
||||
</legend>
|
||||
--fcc-editable-region--
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q1-a1">
|
||||
<input type="radio" id="q1-a1" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q1-a2">
|
||||
<input type="radio" id="q1-a2" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<p>2</p>
|
||||
<fieldset class="question" name="html-question-two">
|
||||
<legend>
|
||||
A label element nesting an input element is required to have a
|
||||
for attribute with the same value as the input's id
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q2-a1">
|
||||
<input type="radio" id="q2-a1" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q2-a2">
|
||||
<input type="radio" id="q2-a2" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
--fcc-editable-region--
|
||||
</fieldset>
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
</section>
|
||||
</form>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: #f5f6f7;
|
||||
color: #1b1b32;
|
||||
font-family: Helvetica;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: #1b1b32;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width: max(100px, 18vw);
|
||||
background-color: #0a0a23;
|
||||
aspect-ratio: 35 / 4;
|
||||
padding: 0.4rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #f1be32;
|
||||
font-size: min(5vw, 1.2em);
|
||||
}
|
||||
|
||||
nav {
|
||||
width: 50%;
|
||||
max-width: 300px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
nav > ul {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
font-family: Verdana, Tahoma;
|
||||
}
|
||||
|
||||
h2 {
|
||||
border-bottom: 4px solid #dfdfe2;
|
||||
}
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,191 @@
|
||||
---
|
||||
id: 6145ed1f22caab087630aaad
|
||||
title: Part 33
|
||||
challengeType: 0
|
||||
dashedName: part-33
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
To prevent unnecessary repetition, target the `before` pseudo-element of the `p` element, and give it a `content` property of `Question #`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `p::before` selector.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('p::before'));
|
||||
```
|
||||
|
||||
You should give the `p::before` pseudo-element a `content` property of `Question #`.
|
||||
|
||||
```js
|
||||
assert.include(new __helpers.CSSHelp(document).getStyle('p::before')?.content, 'Question #');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
<div class="info">
|
||||
<label for="student-name">Name:</label>
|
||||
<input type="text" name="student-name" id="student-name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input type="email" name="student-email" id="student-email" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
|
||||
<input type="date" name="birth-date" id="birth-date" />
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
<div class="question-block">
|
||||
<p>1</p>
|
||||
<fieldset class="question" name="html-question-one">
|
||||
<legend>
|
||||
The legend element represents a caption for the content of its
|
||||
parent fieldset element
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q1-a1">
|
||||
<input type="radio" id="q1-a1" name="q1" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q1-a2">
|
||||
<input type="radio" id="q1-a2" name="q1" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<p>2</p>
|
||||
<fieldset class="question" name="html-question-two">
|
||||
<legend>
|
||||
A label element nesting an input element is required to have a
|
||||
for attribute with the same value as the input's id
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q2-a1">
|
||||
<input type="radio" id="q2-a1" name="q2" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q2-a2">
|
||||
<input type="radio" id="q2-a2" name="q2" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
</section>
|
||||
</form>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: #f5f6f7;
|
||||
color: #1b1b32;
|
||||
font-family: Helvetica;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: #1b1b32;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width: max(100px, 18vw);
|
||||
background-color: #0a0a23;
|
||||
aspect-ratio: 35 / 4;
|
||||
padding: 0.4rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #f1be32;
|
||||
font-size: min(5vw, 1.2em);
|
||||
}
|
||||
|
||||
nav {
|
||||
width: 50%;
|
||||
max-width: 300px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
nav > ul {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
font-family: Verdana, Tahoma;
|
||||
}
|
||||
|
||||
h2 {
|
||||
border-bottom: 4px solid #dfdfe2;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,232 @@
|
||||
---
|
||||
id: 6145ee65e2e1530938cb594d
|
||||
title: Part 34
|
||||
challengeType: 0
|
||||
dashedName: part-34
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The final section of this quiz will contain a dropdown, and a text box.
|
||||
|
||||
Begin by nesting a `div` with a `class` of `formrow`, and nest four `div` elements inside of it, alternating their `class` attributes with `question-block` and `answer`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add one `div` element within the final `section`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('section:nth-of-type(3) > div'));
|
||||
```
|
||||
|
||||
You should give the first `div` a `class` of `formrow`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('section:nth-of-type(3) > div')?.className, 'formrow');
|
||||
```
|
||||
|
||||
You should place `div.formrow` after the `h2` element.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('section:nth-of-type(3) > h2 + div.formrow'));
|
||||
```
|
||||
|
||||
You should nest four `div` elements inside `div.formrow`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('section:nth-of-type(3) > div.formrow > div')?.length, 4);
|
||||
```
|
||||
|
||||
You should give the first nested `div` a `class` of `question-block`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('section:nth-of-type(3) > div.formrow > div:nth-of-type(1)')?.className, 'question-block');
|
||||
```
|
||||
|
||||
You should give the second nested `div` a `class` of `answer`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('section:nth-of-type(3) > div.formrow > div:nth-of-type(2)')?.className, 'answer');
|
||||
```
|
||||
|
||||
You should give the third nested `div` a `class` of `question-block`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('section:nth-of-type(3) > div.formrow > div:nth-of-type(3)')?.className, 'question-block');
|
||||
```
|
||||
|
||||
You should give the fourth nested `div` a `class` of `answer`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('section:nth-of-type(3) > div.formrow > div:nth-of-type(4)')?.className, 'answer');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
<div class="info">
|
||||
<label for="student-name">Name:</label>
|
||||
<input type="text" name="student-name" id="student-name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input type="email" name="student-email" id="student-email" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
|
||||
<input type="date" name="birth-date" id="birth-date" />
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
<div class="question-block">
|
||||
<p>1</p>
|
||||
<fieldset class="question" name="html-question-one">
|
||||
<legend>
|
||||
The legend element represents a caption for the content of its
|
||||
parent fieldset element
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q1-a1">
|
||||
<input type="radio" id="q1-a1" name="q1" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q1-a2">
|
||||
<input type="radio" id="q1-a2" name="q1" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<p>2</p>
|
||||
<fieldset class="question" name="html-question-two">
|
||||
<legend>
|
||||
A label element nesting an input element is required to have a
|
||||
for attribute with the same value as the input's id
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q2-a1">
|
||||
<input type="radio" id="q2-a1" name="q2" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q2-a2">
|
||||
<input type="radio" id="q2-a2" name="q2" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
</section>
|
||||
--fcc-editable-region--
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
|
||||
</section>
|
||||
--fcc-editable-region--
|
||||
</form>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: #f5f6f7;
|
||||
color: #1b1b32;
|
||||
font-family: Helvetica;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: #1b1b32;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width: max(100px, 18vw);
|
||||
background-color: #0a0a23;
|
||||
aspect-ratio: 35 / 4;
|
||||
padding: 0.4rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #f1be32;
|
||||
font-size: min(5vw, 1.2em);
|
||||
}
|
||||
|
||||
nav {
|
||||
width: 50%;
|
||||
max-width: 300px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
nav > ul {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
font-family: Verdana, Tahoma;
|
||||
}
|
||||
|
||||
h2 {
|
||||
border-bottom: 4px solid #dfdfe2;
|
||||
}
|
||||
|
||||
p::before {
|
||||
content: "Question #";
|
||||
}
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,215 @@
|
||||
---
|
||||
id: 6145f02240ff8f09f7ec913c
|
||||
title: Part 35
|
||||
challengeType: 0
|
||||
dashedName: part-35
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Within the `div.question-block` elements, nest one `label` element, and give the `label` elements text content
|
||||
|
||||
# --hints--
|
||||
|
||||
You should nest one `label` element within the first `div.question-block` element.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelectorAll('.formrow > .question-block')?.[0]?.querySelector('label'));
|
||||
```
|
||||
|
||||
You should nest one `label` element within the second `div.question-block` element.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelectorAll('.formrow > .question-block')?.[1]?.querySelector('label'));
|
||||
```
|
||||
|
||||
You should give the first `label` element text content.
|
||||
|
||||
```js
|
||||
assert.isAtLeast(document.querySelectorAll('.formrow > .question-block')?.[0]?.querySelector('label')?.textContent?.length, 1);
|
||||
```
|
||||
|
||||
You should give the second `label` element text content.
|
||||
|
||||
```js
|
||||
assert.isAtLeast(document.querySelectorAll('.formrow > .question-block')?.[1]?.querySelector('label')?.textContent?.length, 1);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
<div class="info">
|
||||
<label for="student-name">Name:</label>
|
||||
<input type="text" name="student-name" id="student-name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input type="email" name="student-email" id="student-email" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
|
||||
<input type="date" name="birth-date" id="birth-date" />
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
<div class="question-block">
|
||||
<p>1</p>
|
||||
<fieldset class="question" name="html-question-one">
|
||||
<legend>
|
||||
The legend element represents a caption for the content of its
|
||||
parent fieldset element
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q1-a1">
|
||||
<input type="radio" id="q1-a1" name="q1" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q1-a2">
|
||||
<input type="radio" id="q1-a2" name="q1" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<p>2</p>
|
||||
<fieldset class="question" name="html-question-two">
|
||||
<legend>
|
||||
A label element nesting an input element is required to have a
|
||||
for attribute with the same value as the input's id
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q2-a1">
|
||||
<input type="radio" id="q2-a1" name="q2" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q2-a2">
|
||||
<input type="radio" id="q2-a2" name="q2" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
</section>
|
||||
--fcc-editable-region--
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
<div class="formrow">
|
||||
<div class="question-block">
|
||||
</div>
|
||||
<div class="answer">
|
||||
</div>
|
||||
<div class="question-block">
|
||||
</div>
|
||||
<div class="answer">
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
--fcc-editable-region--
|
||||
</form>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: #f5f6f7;
|
||||
color: #1b1b32;
|
||||
font-family: Helvetica;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: #1b1b32;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width: max(100px, 18vw);
|
||||
background-color: #0a0a23;
|
||||
aspect-ratio: 35 / 4;
|
||||
padding: 0.4rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #f1be32;
|
||||
font-size: min(5vw, 1.2em);
|
||||
}
|
||||
|
||||
nav {
|
||||
width: 50%;
|
||||
max-width: 300px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
nav > ul {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
font-family: Verdana, Tahoma;
|
||||
}
|
||||
|
||||
h2 {
|
||||
border-bottom: 4px solid #dfdfe2;
|
||||
}
|
||||
|
||||
p::before {
|
||||
content: "Question #";
|
||||
}
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,250 @@
|
||||
---
|
||||
id: 6145f14f019a4b0adb94b051
|
||||
title: Part 36
|
||||
challengeType: 0
|
||||
dashedName: part-36
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Within the first `div.answer` element, nest one required `select` element with three `option` elements.
|
||||
|
||||
Give the first `option` element a `value` of `""`, and the text `Select an option`. Give the second `option` element a `value` of `yes`, and the text `Yes`. Give the third `option` element a `value` of `no`, and the text `No`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should nest one `select` element within the first `div.answer` element.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('div.answer > select'));
|
||||
```
|
||||
|
||||
You should nest three `option` elements within the `select` element.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('div.answer > select > option')?.length, 3);
|
||||
```
|
||||
|
||||
You should give the first `option` element a `value` of `""`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('div.answer > select > option:nth-child(1)')?.value, '');
|
||||
```
|
||||
|
||||
You should give the first `option` element a text content of `Select an option`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('div.answer > select > option:nth-child(1)')?.textContent, 'Select an option');
|
||||
```
|
||||
|
||||
You should give the second `option` element a `value` of `yes`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('div.answer > select > option:nth-child(2)')?.value, 'yes');
|
||||
```
|
||||
|
||||
You should give the second `option` element a text content of `Yes`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('div.answer > select > option:nth-child(2)')?.textContent, 'Yes');
|
||||
```
|
||||
|
||||
You should give the third `option` element a `value` of `no`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('div.answer > select > option:nth-child(3)')?.value, 'no');
|
||||
```
|
||||
|
||||
You should give the third `option` element a text content of `No`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('div.answer > select > option:nth-child(3)')?.textContent, 'No');
|
||||
```
|
||||
|
||||
You should give the `select` an attribute of `required`.
|
||||
|
||||
```js
|
||||
assert.isTrue(document.querySelector('div.answer > select')?.required);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
<div class="info">
|
||||
<label for="student-name">Name:</label>
|
||||
<input type="text" name="student-name" id="student-name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input type="email" name="student-email" id="student-email" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
|
||||
<input type="date" name="birth-date" id="birth-date" />
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
<div class="question-block">
|
||||
<p>1</p>
|
||||
<fieldset class="question" name="html-question-one">
|
||||
<legend>
|
||||
The legend element represents a caption for the content of its
|
||||
parent fieldset element
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q1-a1">
|
||||
<input type="radio" id="q1-a1" name="q1" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q1-a2">
|
||||
<input type="radio" id="q1-a2" name="q1" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<p>2</p>
|
||||
<fieldset class="question" name="html-question-two">
|
||||
<legend>
|
||||
A label element nesting an input element is required to have a
|
||||
for attribute with the same value as the input's id
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q2-a1">
|
||||
<input type="radio" id="q2-a1" name="q2" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q2-a2">
|
||||
<input type="radio" id="q2-a2" name="q2" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
<div class="formrow">
|
||||
<div class="question-block">
|
||||
<label>Are you a frontend developer?</label>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
<div class="answer">
|
||||
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
<div class="question-block">
|
||||
<label>Do you have any questions:</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</form>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: #f5f6f7;
|
||||
color: #1b1b32;
|
||||
font-family: Helvetica;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: #1b1b32;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width: max(100px, 18vw);
|
||||
background-color: #0a0a23;
|
||||
aspect-ratio: 35 / 4;
|
||||
padding: 0.4rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #f1be32;
|
||||
font-size: min(5vw, 1.2em);
|
||||
}
|
||||
|
||||
nav {
|
||||
width: 50%;
|
||||
max-width: 300px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
nav > ul {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
font-family: Verdana, Tahoma;
|
||||
}
|
||||
|
||||
h2 {
|
||||
border-bottom: 4px solid #dfdfe2;
|
||||
}
|
||||
|
||||
p::before {
|
||||
content: "Question #";
|
||||
}
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,222 @@
|
||||
---
|
||||
id: 6145f3a5cd9be60b9459cdd6
|
||||
title: Part 37
|
||||
challengeType: 0
|
||||
dashedName: part-37
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Link the first `label` element to the `select` element, and give the `select` element a `name` attribute.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should give the `label` element a `for` attribute.
|
||||
|
||||
```js
|
||||
assert.notEmpty(document.querySelector('.question-block > label')?.htmlFor);
|
||||
```
|
||||
|
||||
You should give the `select` element an `id` attribute.
|
||||
|
||||
```js
|
||||
assert.notEmpty(document.querySelector('.answer > select')?.id);
|
||||
```
|
||||
|
||||
You should give the `select` element an `id` matching the `for` attribute of the `label` element.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('.answer > select')?.id, document.querySelector('.question-block > label')?.htmlFor);
|
||||
```
|
||||
|
||||
You should give the `select` element a `name` attribute.
|
||||
|
||||
```js
|
||||
assert.notEmpty(document.querySelector('.answer > select')?.name);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
<div class="info">
|
||||
<label for="student-name">Name:</label>
|
||||
<input type="text" name="student-name" id="student-name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input type="email" name="student-email" id="student-email" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
|
||||
<input type="date" name="birth-date" id="birth-date" />
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
<div class="question-block">
|
||||
<p>1</p>
|
||||
<fieldset class="question" name="html-question-one">
|
||||
<legend>
|
||||
The legend element represents a caption for the content of its
|
||||
parent fieldset element
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q1-a1">
|
||||
<input type="radio" id="q1-a1" name="q1" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q1-a2">
|
||||
<input type="radio" id="q1-a2" name="q1" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<p>2</p>
|
||||
<fieldset class="question" name="html-question-two">
|
||||
<legend>
|
||||
A label element nesting an input element is required to have a
|
||||
for attribute with the same value as the input's id
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q2-a1">
|
||||
<input type="radio" id="q2-a1" name="q2" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q2-a2">
|
||||
<input type="radio" id="q2-a2" name="q2" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
<div class="formrow">
|
||||
--fcc-editable-region--
|
||||
<div class="question-block">
|
||||
<label>Are you a frontend developer?</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<select required>
|
||||
<option value="">Select an option</option>
|
||||
<option value="yes">Yes</option>
|
||||
<option value="no">No</option>
|
||||
</select>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
<div class="question-block">
|
||||
<label>Do you have any questions:</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</form>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: #f5f6f7;
|
||||
color: #1b1b32;
|
||||
font-family: Helvetica;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: #1b1b32;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width: max(100px, 18vw);
|
||||
background-color: #0a0a23;
|
||||
aspect-ratio: 35 / 4;
|
||||
padding: 0.4rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #f1be32;
|
||||
font-size: min(5vw, 1.2em);
|
||||
}
|
||||
|
||||
nav {
|
||||
width: 50%;
|
||||
max-width: 300px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
nav > ul {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
font-family: Verdana, Tahoma;
|
||||
}
|
||||
|
||||
h2 {
|
||||
border-bottom: 4px solid #dfdfe2;
|
||||
}
|
||||
|
||||
p::before {
|
||||
content: "Question #";
|
||||
}
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,229 @@
|
||||
---
|
||||
id: 6145f47393fbe70c4d885f9c
|
||||
title: Part 38
|
||||
challengeType: 0
|
||||
dashedName: part-38
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Nest one `textarea` element within the second `div.answer` element, and set the number of rows and columns it has.
|
||||
|
||||
Then, give the `textarea` placeholder text describing an example answer.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should nest one `textarea` element within the second `div.answer` element.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelectorAll('div.answer')?.[1]?.querySelector('textarea'));
|
||||
```
|
||||
|
||||
You should give the `textarea` a `rows` attribute with a number.
|
||||
|
||||
```js
|
||||
const rows = document.querySelectorAll('div.answer')?.[1]?.querySelector('textarea')?.getAttribute('rows');
|
||||
assert.notEmpty(rows);
|
||||
assert.isNotNaN(Number(rows));
|
||||
```
|
||||
|
||||
You should give the `textarea` a `cols` attribute with a number.
|
||||
|
||||
```js
|
||||
const cols = document.querySelectorAll('div.answer')?.[1]?.querySelector('textarea')?.getAttribute('cols');
|
||||
assert.notEmpty(cols);
|
||||
assert.isNotNaN(Number(cols));
|
||||
```
|
||||
|
||||
You should give the `textarea` placeholder text describing an example answer.
|
||||
|
||||
```js
|
||||
assert.notEmpty(document.querySelectorAll('div.answer')?.[1]?.querySelector('textarea')?.textContent);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
<div class="info">
|
||||
<label for="student-name">Name:</label>
|
||||
<input type="text" name="student-name" id="student-name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input type="email" name="student-email" id="student-email" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
|
||||
<input type="date" name="birth-date" id="birth-date" />
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
<div class="question-block">
|
||||
<p>1</p>
|
||||
<fieldset class="question" name="html-question-one">
|
||||
<legend>
|
||||
The legend element represents a caption for the content of its
|
||||
parent fieldset element
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q1-a1">
|
||||
<input type="radio" id="q1-a1" name="q1" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q1-a2">
|
||||
<input type="radio" id="q1-a2" name="q1" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<p>2</p>
|
||||
<fieldset class="question" name="html-question-two">
|
||||
<legend>
|
||||
A label element nesting an input element is required to have a
|
||||
for attribute with the same value as the input's id
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q2-a1">
|
||||
<input type="radio" id="q2-a1" name="q2" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q2-a2">
|
||||
<input type="radio" id="q2-a2" name="q2" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
<div class="formrow">
|
||||
<div class="question-block">
|
||||
<label for="customer">Are you a frontend developer?</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<select name="customer" id="customer" required>
|
||||
<option value="">Select an option</option>
|
||||
<option value="yes">Yes</option>
|
||||
<option value="no">No</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<label>Do you have any questions:</label>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
<div class="answer">
|
||||
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
</section>
|
||||
</form>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: #f5f6f7;
|
||||
color: #1b1b32;
|
||||
font-family: Helvetica;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: #1b1b32;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width: max(100px, 18vw);
|
||||
background-color: #0a0a23;
|
||||
aspect-ratio: 35 / 4;
|
||||
padding: 0.4rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #f1be32;
|
||||
font-size: min(5vw, 1.2em);
|
||||
}
|
||||
|
||||
nav {
|
||||
width: 50%;
|
||||
max-width: 300px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
nav > ul {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
font-family: Verdana, Tahoma;
|
||||
}
|
||||
|
||||
h2 {
|
||||
border-bottom: 4px solid #dfdfe2;
|
||||
}
|
||||
|
||||
p::before {
|
||||
content: "Question #";
|
||||
}
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,219 @@
|
||||
---
|
||||
id: 6145f59029474c0d3dc1c8b8
|
||||
title: Part 39
|
||||
challengeType: 0
|
||||
dashedName: part-39
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
As with the other input elements and `labels`, link the `textarea` to its corresponding `label` element, and give it a `name` attribute.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should give the `label` element a `for` attribute.
|
||||
|
||||
```js
|
||||
assert.notEmpty(document.querySelectorAll('.formrow > .question-block')?.[1]?.querySelector('label')?.htmlFor);
|
||||
```
|
||||
|
||||
You should give the `textarea` element an `id` attribute matching the `for` attribute of the `label` element.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('.formrow > .question-block')?.[1]?.querySelector('label')?.htmlFor, document.querySelectorAll('.answer')?.[1]?.querySelector('textarea')?.id);
|
||||
```
|
||||
|
||||
You should give the `textarea` element a `name` attribute.
|
||||
|
||||
```js
|
||||
assert.notEmpty(document.querySelectorAll('.answer')?.[1]?.querySelector('textarea')?.name);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
<div class="info">
|
||||
<label for="student-name">Name:</label>
|
||||
<input type="text" name="student-name" id="student-name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input type="email" name="student-email" id="student-email" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
|
||||
<input type="date" name="birth-date" id="birth-date" />
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
<div class="question-block">
|
||||
<p>1</p>
|
||||
<fieldset class="question" name="html-question-one">
|
||||
<legend>
|
||||
The legend element represents a caption for the content of its
|
||||
parent fieldset element
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q1-a1">
|
||||
<input type="radio" id="q1-a1" name="q1" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q1-a2">
|
||||
<input type="radio" id="q1-a2" name="q1" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<p>2</p>
|
||||
<fieldset class="question" name="html-question-two">
|
||||
<legend>
|
||||
A label element nesting an input element is required to have a
|
||||
for attribute with the same value as the input's id
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q2-a1">
|
||||
<input type="radio" id="q2-a1" name="q2" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q2-a2">
|
||||
<input type="radio" id="q2-a2" name="q2" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
<div class="formrow">
|
||||
<div class="question-block">
|
||||
<label for="customer">Are you a frontend developer?</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<select name="customer" id="customer" required>
|
||||
<option value="">Select an option</option>
|
||||
<option value="yes">Yes</option>
|
||||
<option value="no">No</option>
|
||||
</select>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
<div class="question-block">
|
||||
<label>Do you have any questions:</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<textarea rows="5" cols="24">
|
||||
Who is flexbox...
|
||||
</textarea>
|
||||
</div>
|
||||
--fcc-editable-region--
|
||||
</div>
|
||||
</section>
|
||||
</form>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: #f5f6f7;
|
||||
color: #1b1b32;
|
||||
font-family: Helvetica;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: #1b1b32;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width: max(100px, 18vw);
|
||||
background-color: #0a0a23;
|
||||
aspect-ratio: 35 / 4;
|
||||
padding: 0.4rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #f1be32;
|
||||
font-size: min(5vw, 1.2em);
|
||||
}
|
||||
|
||||
nav {
|
||||
width: 50%;
|
||||
max-width: 300px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
nav > ul {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
font-family: Verdana, Tahoma;
|
||||
}
|
||||
|
||||
h2 {
|
||||
border-bottom: 4px solid #dfdfe2;
|
||||
}
|
||||
|
||||
p::before {
|
||||
content: "Question #";
|
||||
}
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,232 @@
|
||||
---
|
||||
id: 6145f685797bd30df9784e8c
|
||||
title: Part 40
|
||||
challengeType: 0
|
||||
dashedName: part-40
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Do not forget to give your `form` a submit button.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add either a `button` or `input` element.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('button') || document.querySelector('main > input') || document.querySelector('form > input'));
|
||||
```
|
||||
|
||||
You should place the submit within the `form` element.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('form > button') || document.querySelector('form > input'));
|
||||
```
|
||||
|
||||
You should place the submit after the last `section` element.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('section:last-of-type + button') || document.querySelector('section:last-of-type + input'));
|
||||
```
|
||||
|
||||
You should give the submit a `type` of `submit`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('button[type="submit"]') || document.querySelector('form > input[type="submit"]'));
|
||||
```
|
||||
|
||||
The submit should display the text `Submit`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('button[type="submit"]')?.textContent ?? document.querySelector('input[type="submit"]')?.value, 'Submit');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
--fcc-editable-region--
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
<div class="info">
|
||||
<label for="student-name">Name:</label>
|
||||
<input type="text" name="student-name" id="student-name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input type="email" name="student-email" id="student-email" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
|
||||
<input type="date" name="birth-date" id="birth-date" />
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
<div class="question-block">
|
||||
<p>1</p>
|
||||
<fieldset class="question" name="html-question-one">
|
||||
<legend>
|
||||
The legend element represents a caption for the content of its
|
||||
parent fieldset element
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q1-a1">
|
||||
<input type="radio" id="q1-a1" name="q1" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q1-a2">
|
||||
<input type="radio" id="q1-a2" name="q1" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<p>2</p>
|
||||
<fieldset class="question" name="html-question-two">
|
||||
<legend>
|
||||
A label element nesting an input element is required to have a
|
||||
for attribute with the same value as the input's id
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q2-a1">
|
||||
<input type="radio" id="q2-a1" name="q2" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q2-a2">
|
||||
<input type="radio" id="q2-a2" name="q2" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
<div class="formrow">
|
||||
<div class="question-block">
|
||||
<label for="customer">Are you a frontend developer?</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<select name="customer" id="customer" required>
|
||||
<option value="">Select an option</option>
|
||||
<option value="yes">Yes</option>
|
||||
<option value="no">No</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<label for="css-questions">Do you have any questions:</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<textarea id="css-questions" name="css-questions" rows="5" cols="24">
|
||||
Who is flexbox...
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</form>
|
||||
--fcc-editable-region--
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: #f5f6f7;
|
||||
color: #1b1b32;
|
||||
font-family: Helvetica;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: #1b1b32;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width: max(100px, 18vw);
|
||||
background-color: #0a0a23;
|
||||
aspect-ratio: 35 / 4;
|
||||
padding: 0.4rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #f1be32;
|
||||
font-size: min(5vw, 1.2em);
|
||||
}
|
||||
|
||||
nav {
|
||||
width: 50%;
|
||||
max-width: 300px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
nav > ul {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
font-family: Verdana, Tahoma;
|
||||
}
|
||||
|
||||
h2 {
|
||||
border-bottom: 4px solid #dfdfe2;
|
||||
}
|
||||
|
||||
p::before {
|
||||
content: "Question #";
|
||||
}
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,217 @@
|
||||
---
|
||||
id: 6145f829ac6a920ebf5797d7
|
||||
title: Part 41
|
||||
challengeType: 0
|
||||
dashedName: part-41
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Two final semantic HTML elements for this project are the `footer` and `address` elements. The `footer` element is a container for a collection of content that is related to the page, and the `address` element is a container for contact information for the author of the page.
|
||||
|
||||
After the `main` element, add one `footer` element, and nest one `address` element within it.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add one `footer` element after the `main` element.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('main + footer'));
|
||||
```
|
||||
|
||||
You should nest one `address` element within the `footer` element.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('footer > address'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
<div class="info">
|
||||
<label for="student-name">Name:</label>
|
||||
<input type="text" name="student-name" id="student-name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input type="email" name="student-email" id="student-email" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
|
||||
<input type="date" name="birth-date" id="birth-date" />
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
<div class="question-block">
|
||||
<p>1</p>
|
||||
<fieldset class="question" name="html-question-one">
|
||||
<legend>
|
||||
The legend element represents a caption for the content of its
|
||||
parent fieldset element
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q1-a1">
|
||||
<input type="radio" id="q1-a1" name="q1" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q1-a2">
|
||||
<input type="radio" id="q1-a2" name="q1" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<p>2</p>
|
||||
<fieldset class="question" name="html-question-two">
|
||||
<legend>
|
||||
A label element nesting an input element is required to have a
|
||||
for attribute with the same value as the input's id
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q2-a1">
|
||||
<input type="radio" id="q2-a1" name="q2" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q2-a2">
|
||||
<input type="radio" id="q2-a2" name="q2" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
<div class="formrow">
|
||||
<div class="question-block">
|
||||
<label for="customer">Are you a frontend developer?</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<select name="customer" id="customer" required>
|
||||
<option value="">Select an option</option>
|
||||
<option value="yes">Yes</option>
|
||||
<option value="no">No</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<label for="css-questions">Do you have any questions:</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<textarea id="css-questions" name="css-questions" rows="5" cols="24">
|
||||
Who is flexbox...
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: #f5f6f7;
|
||||
color: #1b1b32;
|
||||
font-family: Helvetica;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: #1b1b32;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width: max(100px, 18vw);
|
||||
background-color: #0a0a23;
|
||||
aspect-ratio: 35 / 4;
|
||||
padding: 0.4rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #f1be32;
|
||||
font-size: min(5vw, 1.2em);
|
||||
}
|
||||
|
||||
nav {
|
||||
width: 50%;
|
||||
max-width: 300px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
nav > ul {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
font-family: Verdana, Tahoma;
|
||||
}
|
||||
|
||||
h2 {
|
||||
border-bottom: 4px solid #dfdfe2;
|
||||
}
|
||||
|
||||
p::before {
|
||||
content: "Question #";
|
||||
}
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,222 @@
|
||||
---
|
||||
id: 6145f8f8bcd4370f6509078e
|
||||
title: Part 42
|
||||
challengeType: 0
|
||||
dashedName: part-42
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Within the `address` element, add the following:
|
||||
|
||||
```html
|
||||
freeCodeCamp<br />
|
||||
San Francisco<br />
|
||||
California<br />
|
||||
USA
|
||||
```
|
||||
|
||||
You can visit, but you might not find anything...
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add the above text including the `<br />` tags to the `address` element.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('address')?.innerText, 'freeCodeCamp\nSan Francisco\nCalifornia\nUSA');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
<div class="info">
|
||||
<label for="student-name">Name:</label>
|
||||
<input type="text" name="student-name" id="student-name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input type="email" name="student-email" id="student-email" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
|
||||
<input type="date" name="birth-date" id="birth-date" />
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
<div class="question-block">
|
||||
<p>1</p>
|
||||
<fieldset class="question" name="html-question-one">
|
||||
<legend>
|
||||
The legend element represents a caption for the content of its
|
||||
parent fieldset element
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q1-a1">
|
||||
<input type="radio" id="q1-a1" name="q1" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q1-a2">
|
||||
<input type="radio" id="q1-a2" name="q1" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<p>2</p>
|
||||
<fieldset class="question" name="html-question-two">
|
||||
<legend>
|
||||
A label element nesting an input element is required to have a
|
||||
for attribute with the same value as the input's id
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q2-a1">
|
||||
<input type="radio" id="q2-a1" name="q2" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q2-a2">
|
||||
<input type="radio" id="q2-a2" name="q2" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
<div class="formrow">
|
||||
<div class="question-block">
|
||||
<label for="customer">Are you a frontend developer?</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<select name="customer" id="customer" required>
|
||||
<option value="">Select an option</option>
|
||||
<option value="yes">Yes</option>
|
||||
<option value="no">No</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<label for="css-questions">Do you have any questions:</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<textarea id="css-questions" name="css-questions" rows="5" cols="24">
|
||||
Who is flexbox...
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
--fcc-editable-region--
|
||||
<footer>
|
||||
<address>
|
||||
|
||||
</address>
|
||||
</footer>
|
||||
--fcc-editable-region--
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: #f5f6f7;
|
||||
color: #1b1b32;
|
||||
font-family: Helvetica;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: #1b1b32;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width: max(100px, 18vw);
|
||||
background-color: #0a0a23;
|
||||
aspect-ratio: 35 / 4;
|
||||
padding: 0.4rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #f1be32;
|
||||
font-size: min(5vw, 1.2em);
|
||||
}
|
||||
|
||||
nav {
|
||||
width: 50%;
|
||||
max-width: 300px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
nav > ul {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
font-family: Verdana, Tahoma;
|
||||
}
|
||||
|
||||
h2 {
|
||||
border-bottom: 4px solid #dfdfe2;
|
||||
}
|
||||
|
||||
p::before {
|
||||
content: "Question #";
|
||||
}
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,231 @@
|
||||
---
|
||||
id: 6145fb5018cb5b100cb2a88c
|
||||
title: Part 43
|
||||
challengeType: 0
|
||||
dashedName: part-43
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
The `address` element does not have to contain a physical geographical location. It can be used to provide a link to the subject.
|
||||
|
||||
Wrap a link around the text `freeCodeCamp`, and set its location to `https://freecodecamp.org`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add an `a` element.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('address > a'));
|
||||
```
|
||||
|
||||
You should give the `a` element a `href` attribute of `https://freecodecamp.org`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('address > a')?.getAttribute('href'), 'https://freecodecamp.org');
|
||||
```
|
||||
|
||||
You should wrap the `a` element around the existing text `freeCodeCamp`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('address > a')?.innerHTML, 'freeCodeCamp');
|
||||
assert.equal(document.querySelector('address')?.innerHTML?.match(/freeCodeCamp/g)?.length, 1);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
<div class="info">
|
||||
<label for="student-name">Name:</label>
|
||||
<input type="text" name="student-name" id="student-name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input type="email" name="student-email" id="student-email" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
|
||||
<input type="date" name="birth-date" id="birth-date" />
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
<div class="question-block">
|
||||
<p>1</p>
|
||||
<fieldset class="question" name="html-question-one">
|
||||
<legend>
|
||||
The legend element represents a caption for the content of its
|
||||
parent fieldset element
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q1-a1">
|
||||
<input type="radio" id="q1-a1" name="q1" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q1-a2">
|
||||
<input type="radio" id="q1-a2" name="q1" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<p>2</p>
|
||||
<fieldset class="question" name="html-question-two">
|
||||
<legend>
|
||||
A label element nesting an input element is required to have a
|
||||
for attribute with the same value as the input's id
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q2-a1">
|
||||
<input type="radio" id="q2-a1" name="q2" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q2-a2">
|
||||
<input type="radio" id="q2-a2" name="q2" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
<div class="formrow">
|
||||
<div class="question-block">
|
||||
<label for="customer">Are you a frontend developer?</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<select name="customer" id="customer" required>
|
||||
<option value="">Select an option</option>
|
||||
<option value="yes">Yes</option>
|
||||
<option value="no">No</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<label for="css-questions">Do you have any questions:</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<textarea id="css-questions" name="css-questions" rows="5" cols="24">
|
||||
Who is flexbox...
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
--fcc-editable-region--
|
||||
<footer>
|
||||
<address>
|
||||
freeCodeCamp<br />
|
||||
San Francisco<br />
|
||||
California<br />
|
||||
USA
|
||||
</address>
|
||||
</footer>
|
||||
--fcc-editable-region--
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: #f5f6f7;
|
||||
color: #1b1b32;
|
||||
font-family: Helvetica;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: #1b1b32;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width: max(100px, 18vw);
|
||||
background-color: #0a0a23;
|
||||
aspect-ratio: 35 / 4;
|
||||
padding: 0.4rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #f1be32;
|
||||
font-size: min(5vw, 1.2em);
|
||||
}
|
||||
|
||||
nav {
|
||||
width: 50%;
|
||||
max-width: 300px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
nav > ul {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
font-family: Verdana, Tahoma;
|
||||
}
|
||||
|
||||
h2 {
|
||||
border-bottom: 4px solid #dfdfe2;
|
||||
}
|
||||
|
||||
p::before {
|
||||
content: "Question #";
|
||||
}
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,258 @@
|
||||
---
|
||||
id: 6145fc3707fc3310c277f5c8
|
||||
title: Part 44
|
||||
challengeType: 0
|
||||
dashedName: part-44
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Back to styling the page. Select the list elements within the navigation bar, and give them the following styles:
|
||||
|
||||
```css
|
||||
color: #dfdfe2;
|
||||
margin: 0 0.2rem;
|
||||
padding: 0.2rem;
|
||||
display: block;
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use either the `nav li` or `nav > ul > li` selector.
|
||||
|
||||
```js
|
||||
const gs = (s) => new __helpers.CSSHelp(document).getStyle(s);
|
||||
assert.exists(gs('nav li') || gs('nav > ul > li'));
|
||||
```
|
||||
|
||||
You should give the `li` elements a `color` of `#dfdfe2`.
|
||||
|
||||
```js
|
||||
const gs = (s) => new __helpers.CSSHelp(document).getStyle(s);
|
||||
const color = gs('nav li')?.color ?? gs('nav > ul > li')?.color;
|
||||
assert.equal(color, 'rgb(223, 223, 226)');
|
||||
```
|
||||
|
||||
You should give the `li` elements a `margin` of `0 0.2rem`.
|
||||
|
||||
```js
|
||||
const gs = (s) => new __helpers.CSSHelp(document).getStyle(s);
|
||||
const margin = gs('nav li')?.margin ?? gs('nav > ul > li')?.margin;
|
||||
assert.equal(margin, '0px 0.2rem');
|
||||
```
|
||||
|
||||
You should give the `li` elements a `padding` of `0.2rem`.
|
||||
|
||||
```js
|
||||
const gs = (s) => new __helpers.CSSHelp(document).getStyle(s);
|
||||
const padding = gs('nav li')?.padding ?? gs('nav > ul > li')?.padding;
|
||||
assert.equal(padding, '0.2rem');
|
||||
```
|
||||
|
||||
You should give the `li` elements a `display` of `block`.
|
||||
|
||||
```js
|
||||
const gs = (s) => new __helpers.CSSHelp(document).getStyle(s);
|
||||
const display = gs('nav li')?.display ?? gs('nav > ul > li')?.display;
|
||||
assert.equal(display, 'block');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
<div class="info">
|
||||
<label for="student-name">Name:</label>
|
||||
<input type="text" name="student-name" id="student-name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input type="email" name="student-email" id="student-email" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
|
||||
<input type="date" name="birth-date" id="birth-date" />
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
<div class="question-block">
|
||||
<p>1</p>
|
||||
<fieldset class="question" name="html-question-one">
|
||||
<legend>
|
||||
The legend element represents a caption for the content of its
|
||||
parent fieldset element
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q1-a1">
|
||||
<input type="radio" id="q1-a1" name="q1" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q1-a2">
|
||||
<input type="radio" id="q1-a2" name="q1" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<p>2</p>
|
||||
<fieldset class="question" name="html-question-two">
|
||||
<legend>
|
||||
A label element nesting an input element is required to have a
|
||||
for attribute with the same value as the input's id
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q2-a1">
|
||||
<input type="radio" id="q2-a1" name="q2" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q2-a2">
|
||||
<input type="radio" id="q2-a2" name="q2" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
<div class="formrow">
|
||||
<div class="question-block">
|
||||
<label for="customer">Are you a frontend developer?</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<select name="customer" id="customer" required>
|
||||
<option value="">Select an option</option>
|
||||
<option value="yes">Yes</option>
|
||||
<option value="no">No</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<label for="css-questions">Do you have any questions:</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<textarea id="css-questions" name="css-questions" rows="5" cols="24">
|
||||
Who is flexbox...
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
<footer>
|
||||
<address>
|
||||
<a href="https://freecodecamp.org">freeCodeCamp</a><br />
|
||||
San Francisco<br />
|
||||
California<br />
|
||||
USA
|
||||
</address>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: #f5f6f7;
|
||||
color: #1b1b32;
|
||||
font-family: Helvetica;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: #1b1b32;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width: max(100px, 18vw);
|
||||
background-color: #0a0a23;
|
||||
aspect-ratio: 35 / 4;
|
||||
padding: 0.4rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #f1be32;
|
||||
font-size: min(5vw, 1.2em);
|
||||
}
|
||||
|
||||
nav {
|
||||
width: 50%;
|
||||
max-width: 300px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
nav > ul {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
font-family: Verdana, Tahoma;
|
||||
}
|
||||
|
||||
h2 {
|
||||
border-bottom: 4px solid #dfdfe2;
|
||||
}
|
||||
|
||||
p::before {
|
||||
content: "Question #";
|
||||
}
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,262 @@
|
||||
---
|
||||
id: 614796cb8086be482d60e0ac
|
||||
title: Part 45
|
||||
challengeType: 0
|
||||
dashedName: part-45
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
On the topic of visual accessibility, contrast between elements is a key factor. For example, the contrast between the text and the background of a heading should be at least 4.5:1.
|
||||
|
||||
Change the font color of all the anchor elements within list elements to something with a contrast ratio of at least 7:1.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `li > a` selector.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('li > a'));
|
||||
```
|
||||
|
||||
You should give the `a` element a `color` property.
|
||||
|
||||
```js
|
||||
assert.notEmpty(new __helpers.CSSHelp(document).getStyle('li > a')?.color);
|
||||
```
|
||||
|
||||
You should give the `color` property a contrast with the background of at least 7:1. _Hint: I would use `#dfdfe2`_
|
||||
|
||||
```js
|
||||
function luminance(r, g, b) {
|
||||
const a = [r, g, b].map((v) => {
|
||||
v /= 255;
|
||||
return v <= 0.03928 ? v / 12.92 : Math.pow( (v + 0.055) / 1.055, 2.4 );
|
||||
});
|
||||
return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
|
||||
}
|
||||
function contrast(rgb1, rgb2) {
|
||||
const lum1 = luminance(rgb1[0], rgb1[1], rgb1[2]);
|
||||
const lum2 = luminance(rgb2[0], rgb2[1], rgb2[2]);
|
||||
const brightest = Math.max(lum1, lum2);
|
||||
const darkest = Math.min(lum1, lum2);
|
||||
return (brightest + 0.05)
|
||||
/ (darkest + 0.05);
|
||||
}
|
||||
const backgroundColour = [27, 27, 50];
|
||||
|
||||
for (let elem of document.querySelectorAll('li > a')) {
|
||||
const a = getComputedStyle(elem)?.color;
|
||||
const rgbA = a?.match(/(\d+),\s(\d+),\s(\d+)/);
|
||||
const aColour = [rgbA[1], rgbA[2], rgbA[3]];
|
||||
assert.isAtLeast(contrast(backgroundColour, aColour), 7);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
<div class="info">
|
||||
<label for="student-name">Name:</label>
|
||||
<input type="text" name="student-name" id="student-name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input type="email" name="student-email" id="student-email" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
|
||||
<input type="date" name="birth-date" id="birth-date" />
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
<div class="question-block">
|
||||
<p>1</p>
|
||||
<fieldset class="question" name="html-question-one">
|
||||
<legend>
|
||||
The legend element represents a caption for the content of its
|
||||
parent fieldset element
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q1-a1">
|
||||
<input type="radio" id="q1-a1" name="q1" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q1-a2">
|
||||
<input type="radio" id="q1-a2" name="q1" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<p>2</p>
|
||||
<fieldset class="question" name="html-question-two">
|
||||
<legend>
|
||||
A label element nesting an input element is required to have a
|
||||
for attribute with the same value as the input's id
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q2-a1">
|
||||
<input type="radio" id="q2-a1" name="q2" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q2-a2">
|
||||
<input type="radio" id="q2-a2" name="q2" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
<div class="formrow">
|
||||
<div class="question-block">
|
||||
<label for="customer">Are you a frontend developer?</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<select name="customer" id="customer" required>
|
||||
<option value="">Select an option</option>
|
||||
<option value="yes">Yes</option>
|
||||
<option value="no">No</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<label for="css-questions">Do you have any questions:</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<textarea id="css-questions" name="css-questions" rows="5" cols="24">
|
||||
Who is flexbox...
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
<footer>
|
||||
<address>
|
||||
<a href="https://freecodecamp.org">freeCodeCamp</a><br />
|
||||
San Francisco<br />
|
||||
California<br />
|
||||
USA
|
||||
</address>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: #f5f6f7;
|
||||
color: #1b1b32;
|
||||
font-family: Helvetica;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: #1b1b32;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width: max(100px, 18vw);
|
||||
background-color: #0a0a23;
|
||||
aspect-ratio: 35 / 4;
|
||||
padding: 0.4rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #f1be32;
|
||||
font-size: min(5vw, 1.2em);
|
||||
}
|
||||
|
||||
nav {
|
||||
width: 50%;
|
||||
max-width: 300px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
nav > ul {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
nav > ul > li {
|
||||
color: #dfdfe2;
|
||||
margin: 0 0.2rem;
|
||||
padding: 0.2rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
font-family: Verdana, Tahoma;
|
||||
}
|
||||
|
||||
h2 {
|
||||
border-bottom: 4px solid #dfdfe2;
|
||||
}
|
||||
|
||||
p::before {
|
||||
content: "Question #";
|
||||
}
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,262 @@
|
||||
---
|
||||
id: 6147a14ef5668b5881ef2297
|
||||
title: Part 46
|
||||
challengeType: 0
|
||||
dashedName: part-46
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
To make the navigation buttons look more like typical buttons, remove the underline from the anchor tags.
|
||||
|
||||
Then, create a new selector targetting the navigation list elements so that when the cursor hovers over them, the background color and text color are switched, and the cursor becomes a pointer.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the existing `li > a` selector to set the `text-decoration` to `none`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('li > a')?.textDecoration, 'none');
|
||||
```
|
||||
|
||||
You should use either the `nav > ul > li:hover` or `nav li:hover` selector to style the elements on hover.
|
||||
|
||||
```js
|
||||
const gs = (s) => new __helpers.CSSHelp(document).getStyle(s);
|
||||
assert.exists(gs('nav > ul > li:hover') || gs('nav li:hover'));
|
||||
```
|
||||
|
||||
You should give hovered `li` elements a `background-color` of `#dfdfe2`.
|
||||
|
||||
```js
|
||||
const gs = (s) => new __helpers.CSSHelp(document).getStyle(s);
|
||||
const bgColor = gs('nav > ul > li:hover')?.backgroundColor ?? gs('nav li:hover')?.backgroundColor;
|
||||
assert.equal(bgColor, 'rgb(223, 223, 226)');
|
||||
```
|
||||
|
||||
You should give hovered `li` elements a `color` of `#1b1b32`.
|
||||
|
||||
```js
|
||||
const gs = (s) => new __helpers.CSSHelp(document).getStyle(s);
|
||||
const color = gs('nav > ul > li:hover')?.color ?? gs('nav li:hover')?.color;
|
||||
assert.equal(color, 'rgb(27, 27, 50)');
|
||||
```
|
||||
|
||||
You should give hovered `li` elements a `cursor` of `pointer`.
|
||||
|
||||
```js
|
||||
const gs = (s) => new __helpers.CSSHelp(document).getStyle(s);
|
||||
const cursor = gs('nav > ul > li:hover')?.cursor ?? gs('nav li:hover')?.cursor;
|
||||
assert.equal(cursor, 'pointer');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
<div class="info">
|
||||
<label for="student-name">Name:</label>
|
||||
<input type="text" name="student-name" id="student-name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input type="email" name="student-email" id="student-email" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
|
||||
<input type="date" name="birth-date" id="birth-date" />
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
<div class="question-block">
|
||||
<p>1</p>
|
||||
<fieldset class="question" name="html-question-one">
|
||||
<legend>
|
||||
The legend element represents a caption for the content of its
|
||||
parent fieldset element
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q1-a1">
|
||||
<input type="radio" id="q1-a1" name="q1" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q1-a2">
|
||||
<input type="radio" id="q1-a2" name="q1" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<p>2</p>
|
||||
<fieldset class="question" name="html-question-two">
|
||||
<legend>
|
||||
A label element nesting an input element is required to have a
|
||||
for attribute with the same value as the input's id
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q2-a1">
|
||||
<input type="radio" id="q2-a1" name="q2" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q2-a2">
|
||||
<input type="radio" id="q2-a2" name="q2" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
<div class="formrow">
|
||||
<div class="question-block">
|
||||
<label for="customer">Are you a frontend developer?</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<select name="customer" id="customer" required>
|
||||
<option value="">Select an option</option>
|
||||
<option value="yes">Yes</option>
|
||||
<option value="no">No</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<label for="css-questions">Do you have any questions:</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<textarea id="css-questions" name="css-questions" rows="5" cols="24">
|
||||
Who is flexbox...
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
<footer>
|
||||
<address>
|
||||
<a href="https://freecodecamp.org">freeCodeCamp</a><br />
|
||||
San Francisco<br />
|
||||
California<br />
|
||||
USA
|
||||
</address>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: #f5f6f7;
|
||||
color: #1b1b32;
|
||||
font-family: Helvetica;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: #1b1b32;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width: max(100px, 18vw);
|
||||
background-color: #0a0a23;
|
||||
aspect-ratio: 35 / 4;
|
||||
padding: 0.4rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #f1be32;
|
||||
font-size: min(5vw, 1.2em);
|
||||
}
|
||||
|
||||
nav {
|
||||
width: 50%;
|
||||
max-width: 300px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
nav > ul {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
nav > ul > li {
|
||||
color: #dfdfe2;
|
||||
margin: 0 0.2rem;
|
||||
padding: 0.2rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
|
||||
li > a {
|
||||
color: inherit;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
font-family: Verdana, Tahoma;
|
||||
}
|
||||
|
||||
h2 {
|
||||
border-bottom: 4px solid #dfdfe2;
|
||||
}
|
||||
|
||||
p::before {
|
||||
content: "Question #";
|
||||
}
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,255 @@
|
||||
---
|
||||
id: 614878f7a412310647873015
|
||||
title: Part 47
|
||||
challengeType: 0
|
||||
dashedName: part-47
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Tidy up the `header`, by using _Flexbox_ to put space between the children, and vertically center them.
|
||||
|
||||
Then, fix the `header` to the top of the viewport.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should give the `header` a `justify-content` of `space-between`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.justifyContent, 'space-between');
|
||||
```
|
||||
|
||||
You should give the `header` an `align-items` of `center`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.alignItems, 'center');
|
||||
```
|
||||
|
||||
You should give the `header` a `position` of `fixed`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.position, 'fixed');
|
||||
```
|
||||
|
||||
You should give the `header` a `top` of `0`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.top, '0px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
<div class="info">
|
||||
<label for="student-name">Name:</label>
|
||||
<input type="text" name="student-name" id="student-name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input type="email" name="student-email" id="student-email" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
|
||||
<input type="date" name="birth-date" id="birth-date" />
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
<div class="question-block">
|
||||
<p>1</p>
|
||||
<fieldset class="question" name="html-question-one">
|
||||
<legend>
|
||||
The legend element represents a caption for the content of its
|
||||
parent fieldset element
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q1-a1">
|
||||
<input type="radio" id="q1-a1" name="q1" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q1-a2">
|
||||
<input type="radio" id="q1-a2" name="q1" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<p>2</p>
|
||||
<fieldset class="question" name="html-question-two">
|
||||
<legend>
|
||||
A label element nesting an input element is required to have a
|
||||
for attribute with the same value as the input's id
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q2-a1">
|
||||
<input type="radio" id="q2-a1" name="q2" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q2-a2">
|
||||
<input type="radio" id="q2-a2" name="q2" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
<div class="formrow">
|
||||
<div class="question-block">
|
||||
<label for="customer">Are you a frontend developer?</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<select name="customer" id="customer" required>
|
||||
<option value="">Select an option</option>
|
||||
<option value="yes">Yes</option>
|
||||
<option value="no">No</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<label for="css-questions">Do you have any questions:</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<textarea id="css-questions" name="css-questions" rows="5" cols="24">
|
||||
Who is flexbox...
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
<footer>
|
||||
<address>
|
||||
<a href="https://freecodecamp.org">freeCodeCamp</a><br />
|
||||
San Francisco<br />
|
||||
California<br />
|
||||
USA
|
||||
</address>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: #f5f6f7;
|
||||
color: #1b1b32;
|
||||
font-family: Helvetica;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
header {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: #1b1b32;
|
||||
display: flex;
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
#logo {
|
||||
width: max(100px, 18vw);
|
||||
background-color: #0a0a23;
|
||||
aspect-ratio: 35 / 4;
|
||||
padding: 0.4rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #f1be32;
|
||||
font-size: min(5vw, 1.2em);
|
||||
}
|
||||
|
||||
nav {
|
||||
width: 50%;
|
||||
max-width: 300px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
nav > ul {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
nav > ul > li {
|
||||
color: #dfdfe2;
|
||||
margin: 0 0.2rem;
|
||||
padding: 0.2rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
nav > ul > li:hover {
|
||||
background-color: #dfdfe2;
|
||||
color: #1b1b32;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
li > a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
font-family: Verdana, Tahoma;
|
||||
}
|
||||
|
||||
h2 {
|
||||
border-bottom: 4px solid #dfdfe2;
|
||||
}
|
||||
|
||||
p::before {
|
||||
content: "Question #";
|
||||
}
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,263 @@
|
||||
---
|
||||
id: 61487b77d4a37707073a64e5
|
||||
title: Part 48
|
||||
challengeType: 0
|
||||
dashedName: part-48
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
When the screen width is small, the `h1` does not wrap its text content how it should. Center align the text for the `h1`.
|
||||
|
||||
Then, give the `main` padding such that the `Student Info` section header can be fully seen.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should give the `h1` a `text-align` of `center`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('h1')?.textAlign, 'center');
|
||||
```
|
||||
|
||||
You should add a `main` selector to target the `main` element.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('main'));
|
||||
```
|
||||
|
||||
You should give the `main` a `padding-top` of at least `25px`.
|
||||
|
||||
```js
|
||||
assert.isAtLeast(Number(new __helpers.CSSHelp(document).getStyle('main')?.paddingTop?.replace(/\D+/, '')), 25);
|
||||
```
|
||||
|
||||
You should only change the `padding-top` value.
|
||||
|
||||
```js
|
||||
assert.isEmpty(new __helpers.CSSHelp(document).getStyle('main')?.paddingBottom);
|
||||
assert.isEmpty(new __helpers.CSSHelp(document).getStyle('main')?.paddingLeft);
|
||||
assert.isEmpty(new __helpers.CSSHelp(document).getStyle('main')?.paddingRight);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
<div class="info">
|
||||
<label for="student-name">Name:</label>
|
||||
<input type="text" name="student-name" id="student-name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input type="email" name="student-email" id="student-email" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
|
||||
<input type="date" name="birth-date" id="birth-date" />
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
<div class="question-block">
|
||||
<p>1</p>
|
||||
<fieldset class="question" name="html-question-one">
|
||||
<legend>
|
||||
The legend element represents a caption for the content of its
|
||||
parent fieldset element
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q1-a1">
|
||||
<input type="radio" id="q1-a1" name="q1" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q1-a2">
|
||||
<input type="radio" id="q1-a2" name="q1" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<p>2</p>
|
||||
<fieldset class="question" name="html-question-two">
|
||||
<legend>
|
||||
A label element nesting an input element is required to have a
|
||||
for attribute with the same value as the input's id
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q2-a1">
|
||||
<input type="radio" id="q2-a1" name="q2" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q2-a2">
|
||||
<input type="radio" id="q2-a2" name="q2" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
<div class="formrow">
|
||||
<div class="question-block">
|
||||
<label for="customer">Are you a frontend developer?</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<select name="customer" id="customer" required>
|
||||
<option value="">Select an option</option>
|
||||
<option value="yes">Yes</option>
|
||||
<option value="no">No</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<label for="css-questions">Do you have any questions:</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<textarea id="css-questions" name="css-questions" rows="5" cols="24">
|
||||
Who is flexbox...
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
<footer>
|
||||
<address>
|
||||
<a href="https://freecodecamp.org">freeCodeCamp</a><br />
|
||||
San Francisco<br />
|
||||
California<br />
|
||||
USA
|
||||
</address>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: #f5f6f7;
|
||||
color: #1b1b32;
|
||||
font-family: Helvetica;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: #1b1b32;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width: max(100px, 18vw);
|
||||
background-color: #0a0a23;
|
||||
aspect-ratio: 35 / 4;
|
||||
padding: 0.4rem;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
h1 {
|
||||
color: #f1be32;
|
||||
font-size: min(5vw, 1.2em);
|
||||
|
||||
}
|
||||
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
nav {
|
||||
width: 50%;
|
||||
max-width: 300px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
nav > ul {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
|
||||
nav > ul > li {
|
||||
color: #dfdfe2;
|
||||
margin: 0 0.2rem;
|
||||
padding: 0.2rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
nav > ul > li:hover {
|
||||
background-color: #dfdfe2;
|
||||
color: #1b1b32;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
li > a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
font-family: Verdana, Tahoma;
|
||||
}
|
||||
|
||||
h2 {
|
||||
border-bottom: 4px solid #dfdfe2;
|
||||
}
|
||||
|
||||
p::before {
|
||||
content: "Question #";
|
||||
}
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,277 @@
|
||||
---
|
||||
id: 61487da611a65307e78d2c20
|
||||
title: Part 49
|
||||
challengeType: 0
|
||||
dashedName: part-49
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
On small screens, the unordered list in the navigation bar overflows the right side of the screen.
|
||||
|
||||
Fix this by using _Flexbox_ to wrap the `ul` content. Then, set the following CSS properties to correctly align the text:
|
||||
|
||||
```css
|
||||
align-items: center;
|
||||
padding-inline-start: 0;
|
||||
margin-block: 0;
|
||||
height: 100%;
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
You should give the `ul` a `flex-wrap` of `wrap`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.flexWrap, 'wrap');
|
||||
```
|
||||
|
||||
You should give the `ul` an `align-items` of `center`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.alignItems, 'center');
|
||||
```
|
||||
|
||||
You should give the `ul` a `padding-inline-start` of `0`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.paddingInlineStart, '0px');
|
||||
```
|
||||
|
||||
You should give the `ul` a `margin-block` of `0`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.marginBlock, '0px');
|
||||
```
|
||||
|
||||
You should give the `ul` a `height` of `100%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.height, '100%');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
<div class="info">
|
||||
<label for="student-name">Name:</label>
|
||||
<input type="text" name="student-name" id="student-name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input type="email" name="student-email" id="student-email" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
|
||||
<input type="date" name="birth-date" id="birth-date" />
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
<div class="question-block">
|
||||
<p>1</p>
|
||||
<fieldset class="question" name="html-question-one">
|
||||
<legend>
|
||||
The legend element represents a caption for the content of its
|
||||
parent fieldset element
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q1-a1">
|
||||
<input type="radio" id="q1-a1" name="q1" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q1-a2">
|
||||
<input type="radio" id="q1-a2" name="q1" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<p>2</p>
|
||||
<fieldset class="question" name="html-question-two">
|
||||
<legend>
|
||||
A label element nesting an input element is required to have a
|
||||
for attribute with the same value as the input's id
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q2-a1">
|
||||
<input type="radio" id="q2-a1" name="q2" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q2-a2">
|
||||
<input type="radio" id="q2-a2" name="q2" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
<div class="formrow">
|
||||
<div class="question-block">
|
||||
<label for="customer">Are you a frontend developer?</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<select name="customer" id="customer" required>
|
||||
<option value="">Select an option</option>
|
||||
<option value="yes">Yes</option>
|
||||
<option value="no">No</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<label for="css-questions">Do you have any questions:</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<textarea id="css-questions" name="css-questions" rows="5" cols="24">
|
||||
Who is flexbox...
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
<footer>
|
||||
<address>
|
||||
<a href="https://freecodecamp.org">freeCodeCamp</a><br />
|
||||
San Francisco<br />
|
||||
California<br />
|
||||
USA
|
||||
</address>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: #f5f6f7;
|
||||
color: #1b1b32;
|
||||
font-family: Helvetica;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: #1b1b32;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width: max(100px, 18vw);
|
||||
background-color: #0a0a23;
|
||||
aspect-ratio: 35 / 4;
|
||||
padding: 0.4rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #f1be32;
|
||||
font-size: min(5vw, 1.2em);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
nav {
|
||||
width: 50%;
|
||||
max-width: 300px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
nav > ul {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
nav > ul > li {
|
||||
color: #dfdfe2;
|
||||
margin: 0 0.2rem;
|
||||
padding: 0.2rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
nav > ul > li:hover {
|
||||
background-color: #dfdfe2;
|
||||
color: #1b1b32;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
li > a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
main {
|
||||
padding-top: 50px;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
font-family: Verdana, Tahoma;
|
||||
}
|
||||
|
||||
h2 {
|
||||
border-bottom: 4px solid #dfdfe2;
|
||||
}
|
||||
|
||||
p::before {
|
||||
content: "Question #";
|
||||
}
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,289 @@
|
||||
---
|
||||
id: 61487f703571b60899055cf9
|
||||
title: Part 50
|
||||
challengeType: 0
|
||||
dashedName: part-50
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Set the width of the `section` elements to `80%` of their parent container. Then, use margins to center the `section` elements, adding `10px` to the bottom margin.
|
||||
|
||||
Also, ensure the `section` elements cannot be larger than `600px` in width.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use a `section` selector.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('section'));
|
||||
```
|
||||
|
||||
You should give the `section` a `width` of `80%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('section')?.width, '80%');
|
||||
```
|
||||
|
||||
You should give the `section` a `margin-top` of `0`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('section')?.marginTop, '0px');
|
||||
```
|
||||
|
||||
You should give the `section` a `margin-right` of `auto`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('section')?.marginRight, 'auto');
|
||||
```
|
||||
|
||||
You should give the `section` a `margin-bottom` of `10px`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('section')?.marginBottom, '10px');
|
||||
```
|
||||
|
||||
You should give the `section` a `margin-left` of `auto`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('section')?.marginLeft, 'auto');
|
||||
```
|
||||
|
||||
You should give the `section` a `max-width` of `600px`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('section')?.maxWidth, '600px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
<div class="info">
|
||||
<label for="student-name">Name:</label>
|
||||
<input type="text" name="student-name" id="student-name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input type="email" name="student-email" id="student-email" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
|
||||
<input type="date" name="birth-date" id="birth-date" />
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
<div class="question-block">
|
||||
<p>1</p>
|
||||
<fieldset class="question" name="html-question-one">
|
||||
<legend>
|
||||
The legend element represents a caption for the content of its
|
||||
parent fieldset element
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q1-a1">
|
||||
<input type="radio" id="q1-a1" name="q1" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q1-a2">
|
||||
<input type="radio" id="q1-a2" name="q1" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<p>2</p>
|
||||
<fieldset class="question" name="html-question-two">
|
||||
<legend>
|
||||
A label element nesting an input element is required to have a
|
||||
for attribute with the same value as the input's id
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q2-a1">
|
||||
<input type="radio" id="q2-a1" name="q2" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q2-a2">
|
||||
<input type="radio" id="q2-a2" name="q2" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
<div class="formrow">
|
||||
<div class="question-block">
|
||||
<label for="customer">Are you a frontend developer?</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<select name="customer" id="customer" required>
|
||||
<option value="">Select an option</option>
|
||||
<option value="yes">Yes</option>
|
||||
<option value="no">No</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<label for="css-questions">Do you have any questions:</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<textarea id="css-questions" name="css-questions" rows="5" cols="24">
|
||||
Who is flexbox...
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
<footer>
|
||||
<address>
|
||||
<a href="https://freecodecamp.org">freeCodeCamp</a><br />
|
||||
San Francisco<br />
|
||||
California<br />
|
||||
USA
|
||||
</address>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: #f5f6f7;
|
||||
color: #1b1b32;
|
||||
font-family: Helvetica;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: #1b1b32;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width: max(100px, 18vw);
|
||||
background-color: #0a0a23;
|
||||
aspect-ratio: 35 / 4;
|
||||
padding: 0.4rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #f1be32;
|
||||
font-size: min(5vw, 1.2em);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
nav {
|
||||
width: 50%;
|
||||
max-width: 300px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
nav > ul {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
padding-inline-start: 0;
|
||||
margin-block: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
nav > ul > li {
|
||||
color: #dfdfe2;
|
||||
margin: 0 0.2rem;
|
||||
padding: 0.2rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
nav > ul > li:hover {
|
||||
background-color: #dfdfe2;
|
||||
color: #1b1b32;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
li > a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
main {
|
||||
padding-top: 50px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
font-family: Verdana, Tahoma;
|
||||
}
|
||||
|
||||
h2 {
|
||||
border-bottom: 4px solid #dfdfe2;
|
||||
}
|
||||
|
||||
p::before {
|
||||
content: "Question #";
|
||||
}
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,261 @@
|
||||
---
|
||||
id: 614880dc16070e093e29bc56
|
||||
title: Part 51
|
||||
challengeType: 0
|
||||
dashedName: part-51
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Replace the top margin of the `h2` elements with `60px` of top padding.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should give the `h2` a `margin-top` of `0`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('h2')?.marginTop, '0px');
|
||||
```
|
||||
|
||||
You should give the `h2` a `padding-top` of `60px`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('h2')?.paddingTop, '60px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
<div class="info">
|
||||
<label for="student-name">Name:</label>
|
||||
<input type="text" name="student-name" id="student-name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input type="email" name="student-email" id="student-email" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
|
||||
<input type="date" name="birth-date" id="birth-date" />
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
<div class="question-block">
|
||||
<p>1</p>
|
||||
<fieldset class="question" name="html-question-one">
|
||||
<legend>
|
||||
The legend element represents a caption for the content of its
|
||||
parent fieldset element
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q1-a1">
|
||||
<input type="radio" id="q1-a1" name="q1" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q1-a2">
|
||||
<input type="radio" id="q1-a2" name="q1" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<p>2</p>
|
||||
<fieldset class="question" name="html-question-two">
|
||||
<legend>
|
||||
A label element nesting an input element is required to have a
|
||||
for attribute with the same value as the input's id
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q2-a1">
|
||||
<input type="radio" id="q2-a1" name="q2" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q2-a2">
|
||||
<input type="radio" id="q2-a2" name="q2" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
<div class="formrow">
|
||||
<div class="question-block">
|
||||
<label for="customer">Are you a frontend developer?</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<select name="customer" id="customer" required>
|
||||
<option value="">Select an option</option>
|
||||
<option value="yes">Yes</option>
|
||||
<option value="no">No</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<label for="css-questions">Do you have any questions:</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<textarea id="css-questions" name="css-questions" rows="5" cols="24">
|
||||
Who is flexbox...
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
<footer>
|
||||
<address>
|
||||
<a href="https://freecodecamp.org">freeCodeCamp</a><br />
|
||||
San Francisco<br />
|
||||
California<br />
|
||||
USA
|
||||
</address>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: #f5f6f7;
|
||||
color: #1b1b32;
|
||||
font-family: Helvetica;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: #1b1b32;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width: max(100px, 18vw);
|
||||
background-color: #0a0a23;
|
||||
aspect-ratio: 35 / 4;
|
||||
padding: 0.4rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #f1be32;
|
||||
font-size: min(5vw, 1.2em);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
nav {
|
||||
width: 50%;
|
||||
max-width: 300px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
nav > ul {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
padding-inline-start: 0;
|
||||
margin-block: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
nav > ul > li {
|
||||
color: #dfdfe2;
|
||||
margin: 0 0.2rem;
|
||||
padding: 0.2rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
nav > ul > li:hover {
|
||||
background-color: #dfdfe2;
|
||||
color: #1b1b32;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
li > a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
main {
|
||||
padding-top: 50px;
|
||||
}
|
||||
|
||||
section {
|
||||
width: 80%;
|
||||
margin: 0 auto 10px auto;
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
font-family: Verdana, Tahoma;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
h2 {
|
||||
border-bottom: 4px solid #dfdfe2;
|
||||
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
p::before {
|
||||
content: "Question #";
|
||||
}
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,282 @@
|
||||
---
|
||||
id: 614883b6fa720e09fb167de9
|
||||
title: Part 52
|
||||
challengeType: 0
|
||||
dashedName: part-52
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Add padding to the top and left of the `.info` elements, and set the other values to `0`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `.info` selector.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('.info'));
|
||||
```
|
||||
|
||||
You should give `.info` a `padding-top` of at least `1px`.
|
||||
|
||||
```js
|
||||
assert.isAtLeast(Number(new __helpers.CSSHelp(document).getStyle('.info')?.paddingTop?.replace(/\D+/, '')), 1);
|
||||
```
|
||||
|
||||
You should give `.info` a `padding-right` of `0`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.info')?.paddingRight, '0px');
|
||||
```
|
||||
|
||||
You should give `.info` a `padding-bottom` of `0`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.info')?.paddingBottom, '0px');
|
||||
```
|
||||
|
||||
You should give `.info` a `padding-left` of at least `1px`.
|
||||
|
||||
```js
|
||||
assert.isAtLeast(Number(new __helpers.CSSHelp(document).getStyle('.info')?.paddingLeft?.replace(/\D+/, '')), 1);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
<div class="info">
|
||||
<label for="student-name">Name:</label>
|
||||
<input type="text" name="student-name" id="student-name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input type="email" name="student-email" id="student-email" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
|
||||
<input type="date" name="birth-date" id="birth-date" />
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
<div class="question-block">
|
||||
<p>1</p>
|
||||
<fieldset class="question" name="html-question-one">
|
||||
<legend>
|
||||
The legend element represents a caption for the content of its
|
||||
parent fieldset element
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q1-a1">
|
||||
<input type="radio" id="q1-a1" name="q1" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q1-a2">
|
||||
<input type="radio" id="q1-a2" name="q1" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<p>2</p>
|
||||
<fieldset class="question" name="html-question-two">
|
||||
<legend>
|
||||
A label element nesting an input element is required to have a
|
||||
for attribute with the same value as the input's id
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q2-a1">
|
||||
<input type="radio" id="q2-a1" name="q2" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q2-a2">
|
||||
<input type="radio" id="q2-a2" name="q2" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
<div class="formrow">
|
||||
<div class="question-block">
|
||||
<label for="customer">Are you a frontend developer?</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<select name="customer" id="customer" required>
|
||||
<option value="">Select an option</option>
|
||||
<option value="yes">Yes</option>
|
||||
<option value="no">No</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<label for="css-questions">Do you have any questions:</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<textarea id="css-questions" name="css-questions" rows="5" cols="24">
|
||||
Who is flexbox...
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
<footer>
|
||||
<address>
|
||||
<a href="https://freecodecamp.org">freeCodeCamp</a><br />
|
||||
San Francisco<br />
|
||||
California<br />
|
||||
USA
|
||||
</address>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: #f5f6f7;
|
||||
color: #1b1b32;
|
||||
font-family: Helvetica;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: #1b1b32;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width: max(100px, 18vw);
|
||||
background-color: #0a0a23;
|
||||
aspect-ratio: 35 / 4;
|
||||
padding: 0.4rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #f1be32;
|
||||
font-size: min(5vw, 1.2em);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
nav {
|
||||
width: 50%;
|
||||
max-width: 300px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
nav > ul {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
padding-inline-start: 0;
|
||||
margin-block: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
nav > ul > li {
|
||||
color: #dfdfe2;
|
||||
margin: 0 0.2rem;
|
||||
padding: 0.2rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
nav > ul > li:hover {
|
||||
background-color: #dfdfe2;
|
||||
color: #1b1b32;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
li > a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
main {
|
||||
padding-top: 50px;
|
||||
}
|
||||
|
||||
section {
|
||||
width: 80%;
|
||||
margin: 0 auto 10px auto;
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
font-family: Verdana, Tahoma;
|
||||
}
|
||||
|
||||
h2 {
|
||||
border-bottom: 4px solid #dfdfe2;
|
||||
margin-top: 0px;
|
||||
padding-top: 60px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
p::before {
|
||||
content: "Question #";
|
||||
}
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,366 @@
|
||||
---
|
||||
id: 614884c1f5d6f30ab3d78cde
|
||||
title: Part 53
|
||||
challengeType: 0
|
||||
dashedName: part-53
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Give the `.formrow` elements top margin, and left and right padding. The other padding values should be `0`.
|
||||
|
||||
Then, increase the font size for all `input` elements.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use a `.formrow` selector to target the `.formrow` elements.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('.formrow'));
|
||||
```
|
||||
|
||||
You should give the `.formrow` a `margin-top` of at least `1px`.
|
||||
|
||||
```js
|
||||
const val = new __helpers.CSSHelp(document).getStyle('.formrow')?.marginTop;
|
||||
let valInPx = 0;
|
||||
if (/^\d+rem$/.test(val)) {
|
||||
valInPx = remToPx(Number(val.replace('rem', '')));
|
||||
} else if (/^\d+em$/.test(val)) {
|
||||
valInPx = emToPx(Number(val.replace('em', '')));
|
||||
} else {
|
||||
valInPx = Number(val?.replace('px', ''));
|
||||
}
|
||||
function emToPx(em) {
|
||||
return em * parseFloat(getComputedStyle(document.querySelector('.formrow'))?.fontSize);
|
||||
}
|
||||
function remToPx(rem) {
|
||||
return rem * parseFloat(getComputedStyle(document.documentElement)?.fontSize);
|
||||
}
|
||||
assert.isAtLeast(valInPx, 1);
|
||||
```
|
||||
|
||||
You should give the `.formrow` a `padding-top` of `0`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.formrow')?.paddingTop, '0px');
|
||||
```
|
||||
|
||||
You should give the `.formrow` a `padding-right` of at least `1px`.
|
||||
|
||||
```js
|
||||
const val = new __helpers.CSSHelp(document).getStyle('.formrow')?.paddingRight;
|
||||
let valInPx = 0;
|
||||
if (/^\d+rem$/.test(val)) {
|
||||
valInPx = remToPx(Number(val.replace('rem', '')));
|
||||
} else if (/^\d+em$/.test(val)) {
|
||||
valInPx = emToPx(Number(val.replace('em', '')));
|
||||
} else {
|
||||
valInPx = Number(val?.replace('px', ''));
|
||||
}
|
||||
function emToPx(em) {
|
||||
return em * parseFloat(getComputedStyle(document.querySelector('.formrow'))?.fontSize);
|
||||
}
|
||||
function remToPx(rem) {
|
||||
return rem * parseFloat(getComputedStyle(document.documentElement)?.fontSize);
|
||||
}
|
||||
assert.isAtLeast(valInPx, 1);
|
||||
```
|
||||
|
||||
You should give the `.formrow` a `padding-bottom` of `0`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.formrow')?.paddingBottom, '0px');
|
||||
```
|
||||
|
||||
You should give the `.formrow` a `padding-left` of at least `1px`.
|
||||
|
||||
```js
|
||||
const val = new __helpers.CSSHelp(document).getStyle('.formrow')?.paddingLeft;
|
||||
let valInPx = 0;
|
||||
if (/^\d+rem$/.test(val)) {
|
||||
valInPx = remToPx(Number(val.replace('rem', '')));
|
||||
} else if (/^\d+em$/.test(val)) {
|
||||
valInPx = emToPx(Number(val.replace('em', '')));
|
||||
} else {
|
||||
valInPx = Number(val?.replace('px', ''));
|
||||
}
|
||||
function emToPx(em) {
|
||||
return em * parseFloat(getComputedStyle(document.querySelector('.formrow'))?.fontSize);
|
||||
}
|
||||
function remToPx(rem) {
|
||||
return rem * parseFloat(getComputedStyle(document.documentElement)?.fontSize);
|
||||
}
|
||||
assert.isAtLeast(valInPx, 1);
|
||||
```
|
||||
|
||||
You should use an `input` selector to target the `input` elements.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('input'));
|
||||
```
|
||||
|
||||
You should give the `input` a `font-size` greater than `13px`.
|
||||
|
||||
```js
|
||||
const val = new __helpers.CSSHelp(document).getStyle('input')?.fontSize;
|
||||
let valInPx = 0;
|
||||
if (/^\d+rem$/.test(val)) {
|
||||
valInPx = remToPx(Number(val.replace('rem', '')));
|
||||
} else if (/^\d+em$/.test(val)) {
|
||||
valInPx = emToPx(Number(val.replace('em', '')));
|
||||
} else {
|
||||
valInPx = Number(val?.replace('px', ''));
|
||||
}
|
||||
function emToPx(em) {
|
||||
return em * parseFloat(getComputedStyle(document.querySelector('.formrow'))?.fontSize);
|
||||
}
|
||||
function remToPx(rem) {
|
||||
return rem * parseFloat(getComputedStyle(document.documentElement)?.fontSize);
|
||||
}
|
||||
assert.isAtLeast(valInPx, 13);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
<div class="info">
|
||||
<label for="student-name">Name:</label>
|
||||
<input type="text" name="student-name" id="student-name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input type="email" name="student-email" id="student-email" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
|
||||
<input type="date" name="birth-date" id="birth-date" />
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
<div class="question-block">
|
||||
<p>1</p>
|
||||
<fieldset class="question" name="html-question-one">
|
||||
<legend>
|
||||
The legend element represents a caption for the content of its
|
||||
parent fieldset element
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q1-a1">
|
||||
<input type="radio" id="q1-a1" name="q1" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q1-a2">
|
||||
<input type="radio" id="q1-a2" name="q1" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<p>2</p>
|
||||
<fieldset class="question" name="html-question-two">
|
||||
<legend>
|
||||
A label element nesting an input element is required to have a
|
||||
for attribute with the same value as the input's id
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q2-a1">
|
||||
<input type="radio" id="q2-a1" name="q2" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q2-a2">
|
||||
<input type="radio" id="q2-a2" name="q2" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
<div class="formrow">
|
||||
<div class="question-block">
|
||||
<label for="customer">Are you a frontend developer?</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<select name="customer" id="customer" required>
|
||||
<option value="">Select an option</option>
|
||||
<option value="yes">Yes</option>
|
||||
<option value="no">No</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<label for="css-questions">Do you have any questions:</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<textarea id="css-questions" name="css-questions" rows="5" cols="24">
|
||||
Who is flexbox...
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
<footer>
|
||||
<address>
|
||||
<a href="https://freecodecamp.org">freeCodeCamp</a><br />
|
||||
San Francisco<br />
|
||||
California<br />
|
||||
USA
|
||||
</address>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: #f5f6f7;
|
||||
color: #1b1b32;
|
||||
font-family: Helvetica;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: #1b1b32;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width: max(100px, 18vw);
|
||||
background-color: #0a0a23;
|
||||
aspect-ratio: 35 / 4;
|
||||
padding: 0.4rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #f1be32;
|
||||
font-size: min(5vw, 1.2em);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
nav {
|
||||
width: 50%;
|
||||
max-width: 300px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
nav > ul {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
padding-inline-start: 0;
|
||||
margin-block: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
nav > ul > li {
|
||||
color: #dfdfe2;
|
||||
margin: 0 0.2rem;
|
||||
padding: 0.2rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
nav > ul > li:hover {
|
||||
background-color: #dfdfe2;
|
||||
color: #1b1b32;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
li > a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
main {
|
||||
padding-top: 50px;
|
||||
}
|
||||
|
||||
section {
|
||||
width: 80%;
|
||||
margin: 0 auto 10px auto;
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
font-family: Verdana, Tahoma;
|
||||
}
|
||||
|
||||
h2 {
|
||||
border-bottom: 4px solid #dfdfe2;
|
||||
margin-top: 0px;
|
||||
padding-top: 60px;
|
||||
}
|
||||
|
||||
.info {
|
||||
padding: 10px 0 0 5px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
p::before {
|
||||
content: "Question #";
|
||||
}
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,288 @@
|
||||
---
|
||||
id: 61488ecfd05e290b5712e6da
|
||||
title: Part 54
|
||||
challengeType: 0
|
||||
dashedName: part-54
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
To make the first section look more inline, target only the `input` elements within `.info` elements, and set their `width` to `50%`, and left-align their text.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use either the `.info input` or `.info > input` selector.
|
||||
|
||||
```js
|
||||
const gs = (s) => new __helpers.CSSHelp(document).getStyle(s);
|
||||
assert.exists(gs('.info input') || gs('.info > input'));
|
||||
```
|
||||
|
||||
You should give the `input` elements a `width` of `50%`.
|
||||
|
||||
```js
|
||||
const gs = (s) => new __helpers.CSSHelp(document).getStyle(s)?.width;
|
||||
const width = gs('.info input') ?? gs('.info > input');
|
||||
assert.equal(width, '50%');
|
||||
```
|
||||
|
||||
You should give the `input` elements a `text-align` of `left`.
|
||||
|
||||
```js
|
||||
const gs = (s) => new __helpers.CSSHelp(document).getStyle(s)?.textAlign;
|
||||
const textAlign = gs('.info input') ?? gs('.info > input');
|
||||
assert.equal(textAlign, 'left');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
<div class="info">
|
||||
<label for="student-name">Name:</label>
|
||||
<input type="text" name="student-name" id="student-name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input type="email" name="student-email" id="student-email" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
|
||||
<input type="date" name="birth-date" id="birth-date" />
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
<div class="question-block">
|
||||
<p>1</p>
|
||||
<fieldset class="question" name="html-question-one">
|
||||
<legend>
|
||||
The legend element represents a caption for the content of its
|
||||
parent fieldset element
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q1-a1">
|
||||
<input type="radio" id="q1-a1" name="q1" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q1-a2">
|
||||
<input type="radio" id="q1-a2" name="q1" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<p>2</p>
|
||||
<fieldset class="question" name="html-question-two">
|
||||
<legend>
|
||||
A label element nesting an input element is required to have a
|
||||
for attribute with the same value as the input's id
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q2-a1">
|
||||
<input type="radio" id="q2-a1" name="q2" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q2-a2">
|
||||
<input type="radio" id="q2-a2" name="q2" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
<div class="formrow">
|
||||
<div class="question-block">
|
||||
<label for="customer">Are you a frontend developer?</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<select name="customer" id="customer" required>
|
||||
<option value="">Select an option</option>
|
||||
<option value="yes">Yes</option>
|
||||
<option value="no">No</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<label for="css-questions">Do you have any questions:</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<textarea id="css-questions" name="css-questions" rows="5" cols="24">
|
||||
Who is flexbox...
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
<footer>
|
||||
<address>
|
||||
<a href="https://freecodecamp.org">freeCodeCamp</a><br />
|
||||
San Francisco<br />
|
||||
California<br />
|
||||
USA
|
||||
</address>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: #f5f6f7;
|
||||
color: #1b1b32;
|
||||
font-family: Helvetica;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: #1b1b32;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width: max(100px, 18vw);
|
||||
background-color: #0a0a23;
|
||||
aspect-ratio: 35 / 4;
|
||||
padding: 0.4rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #f1be32;
|
||||
font-size: min(5vw, 1.2em);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
nav {
|
||||
width: 50%;
|
||||
max-width: 300px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
nav > ul {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
padding-inline-start: 0;
|
||||
margin-block: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
nav > ul > li {
|
||||
color: #dfdfe2;
|
||||
margin: 0 0.2rem;
|
||||
padding: 0.2rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
nav > ul > li:hover {
|
||||
background-color: #dfdfe2;
|
||||
color: #1b1b32;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
li > a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
main {
|
||||
padding-top: 50px;
|
||||
}
|
||||
|
||||
section {
|
||||
width: 80%;
|
||||
margin: 0 auto 10px auto;
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
font-family: Verdana, Tahoma;
|
||||
}
|
||||
|
||||
h2 {
|
||||
border-bottom: 4px solid #dfdfe2;
|
||||
margin-top: 0px;
|
||||
padding-top: 60px;
|
||||
}
|
||||
|
||||
.info {
|
||||
padding: 10px 0 0 5px;
|
||||
}
|
||||
|
||||
.formrow {
|
||||
margin-top: 30px;
|
||||
padding: 0px 15px;
|
||||
}
|
||||
|
||||
input {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
p::before {
|
||||
content: "Question #";
|
||||
}
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,293 @@
|
||||
---
|
||||
id: 6148d99cdc7acd0c519862cb
|
||||
title: Part 55
|
||||
challengeType: 0
|
||||
dashedName: part-55
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Target all `label` elements within `.info` elements, and set their `width` to `10%`, and make it so they do not take up less than `55px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use either the `.info label` or `.info > label` selector.
|
||||
|
||||
```js
|
||||
const gs = (s) => new __helpers.CSSHelp(document).getStyle(s);
|
||||
assert.exists(gs('.info label') || gs('.info > label'));
|
||||
```
|
||||
|
||||
You should give the `label` elements a `width` of `10%`.
|
||||
|
||||
```js
|
||||
const gs = (s) => new __helpers.CSSHelp(document).getStyle(s)?.width;
|
||||
const width = gs('.info label') || gs('.info > label');
|
||||
assert.equal(width, '10%');
|
||||
```
|
||||
|
||||
You should give the `label` elements a `min-width` of `55px`.
|
||||
|
||||
```js
|
||||
const gs = (s) => new __helpers.CSSHelp(document).getStyle(s)?.minWidth;
|
||||
const minWidth = gs('.info label') || gs('.info > label');
|
||||
assert.equal(minWidth, '55px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
<div class="info">
|
||||
<label for="student-name">Name:</label>
|
||||
<input type="text" name="student-name" id="student-name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input type="email" name="student-email" id="student-email" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
|
||||
<input type="date" name="birth-date" id="birth-date" />
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
<div class="question-block">
|
||||
<p>1</p>
|
||||
<fieldset class="question" name="html-question-one">
|
||||
<legend>
|
||||
The legend element represents a caption for the content of its
|
||||
parent fieldset element
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q1-a1">
|
||||
<input type="radio" id="q1-a1" name="q1" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q1-a2">
|
||||
<input type="radio" id="q1-a2" name="q1" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<p>2</p>
|
||||
<fieldset class="question" name="html-question-two">
|
||||
<legend>
|
||||
A label element nesting an input element is required to have a
|
||||
for attribute with the same value as the input's id
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q2-a1">
|
||||
<input type="radio" id="q2-a1" name="q2" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q2-a2">
|
||||
<input type="radio" id="q2-a2" name="q2" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
<div class="formrow">
|
||||
<div class="question-block">
|
||||
<label for="customer">Are you a frontend developer?</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<select name="customer" id="customer" required>
|
||||
<option value="">Select an option</option>
|
||||
<option value="yes">Yes</option>
|
||||
<option value="no">No</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<label for="css-questions">Do you have any questions:</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<textarea id="css-questions" name="css-questions" rows="5" cols="24">
|
||||
Who is flexbox...
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
<footer>
|
||||
<address>
|
||||
<a href="https://freecodecamp.org">freeCodeCamp</a><br />
|
||||
San Francisco<br />
|
||||
California<br />
|
||||
USA
|
||||
</address>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: #f5f6f7;
|
||||
color: #1b1b32;
|
||||
font-family: Helvetica;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: #1b1b32;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width: max(100px, 18vw);
|
||||
background-color: #0a0a23;
|
||||
aspect-ratio: 35 / 4;
|
||||
padding: 0.4rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #f1be32;
|
||||
font-size: min(5vw, 1.2em);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
nav {
|
||||
width: 50%;
|
||||
max-width: 300px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
nav > ul {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
padding-inline-start: 0;
|
||||
margin-block: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
nav > ul > li {
|
||||
color: #dfdfe2;
|
||||
margin: 0 0.2rem;
|
||||
padding: 0.2rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
nav > ul > li:hover {
|
||||
background-color: #dfdfe2;
|
||||
color: #1b1b32;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
li > a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
main {
|
||||
padding-top: 50px;
|
||||
}
|
||||
|
||||
section {
|
||||
width: 80%;
|
||||
margin: 0 auto 10px auto;
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
font-family: Verdana, Tahoma;
|
||||
}
|
||||
|
||||
h2 {
|
||||
border-bottom: 4px solid #dfdfe2;
|
||||
margin-top: 0px;
|
||||
padding-top: 60px;
|
||||
}
|
||||
|
||||
.info {
|
||||
padding: 10px 0 0 5px;
|
||||
}
|
||||
|
||||
.formrow {
|
||||
margin-top: 30px;
|
||||
padding: 0px 15px;
|
||||
}
|
||||
|
||||
input {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
.info input {
|
||||
width: 50%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
p::before {
|
||||
content: "Question #";
|
||||
}
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,308 @@
|
||||
---
|
||||
id: 6148da157cc0bd0d06df5c0a
|
||||
title: Part 56
|
||||
challengeType: 0
|
||||
dashedName: part-56
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
To align the `input` boxes with each other, set the `display` property to `inline-block` for all `input` and `label` elements within `.info` elements.
|
||||
|
||||
Also, align the text to the right.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use either a `.info > label, .info > input` or `.info label, .info input` selector.
|
||||
|
||||
```js
|
||||
const gs = (s) => new __helpers.CSSHelp(document).getStyle(s);
|
||||
assert.exists(gs('.info > label, .info > input') || gs('.info label, .info input') || gs('.info > input, .info > label') || gs('.info input, .info label'));
|
||||
```
|
||||
|
||||
You should give the `input` and `label` elements a `display` of `inline-block`.
|
||||
|
||||
```js
|
||||
const gs = (s) => new __helpers.CSSHelp(document).getStyle(s)?.display;
|
||||
const display = gs('.info > label, .info > input') ?? gs('.info label, .info input') ?? gs('.info > input, .info > label') ?? gs('.info input, .info label');
|
||||
assert.equal(display, 'inline-block');
|
||||
```
|
||||
|
||||
You should give the `input` and `label` elements a `text-align` of `right`.
|
||||
|
||||
```js
|
||||
const gs = (s) => new __helpers.CSSHelp(document).getStyle(s)?.textAlign;
|
||||
const textAlign = gs('.info > label, .info > input') ?? gs('.info label, .info input') ?? gs('.info > input, .info > label') ?? gs('.info input, .info label');
|
||||
assert.equal(textAlign, 'right');
|
||||
```
|
||||
|
||||
You should set the `text-align: right` property before the `.info input` rule.
|
||||
|
||||
```js
|
||||
const gs = (s) => new __helpers.CSSHelp(document).getStyleRule(s);
|
||||
assert(gs('.info input').isDeclaredAfter('.info label, .info input') || gs('.info input').isDeclaredAfter('.info > label, .info > input') || gs('.info input').isDeclaredAfter('.info > input, .info > label') || gs('.info input').isDeclaredAfter('.info input, .info label'));
|
||||
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
<div class="info">
|
||||
<label for="student-name">Name:</label>
|
||||
<input type="text" name="student-name" id="student-name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input type="email" name="student-email" id="student-email" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
|
||||
<input type="date" name="birth-date" id="birth-date" />
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
<div class="question-block">
|
||||
<p>1</p>
|
||||
<fieldset class="question" name="html-question-one">
|
||||
<legend>
|
||||
The legend element represents a caption for the content of its
|
||||
parent fieldset element
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q1-a1">
|
||||
<input type="radio" id="q1-a1" name="q1" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q1-a2">
|
||||
<input type="radio" id="q1-a2" name="q1" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<p>2</p>
|
||||
<fieldset class="question" name="html-question-two">
|
||||
<legend>
|
||||
A label element nesting an input element is required to have a
|
||||
for attribute with the same value as the input's id
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q2-a1">
|
||||
<input type="radio" id="q2-a1" name="q2" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q2-a2">
|
||||
<input type="radio" id="q2-a2" name="q2" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
<div class="formrow">
|
||||
<div class="question-block">
|
||||
<label for="customer">Are you a frontend developer?</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<select name="customer" id="customer" required>
|
||||
<option value="">Select an option</option>
|
||||
<option value="yes">Yes</option>
|
||||
<option value="no">No</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<label for="css-questions">Do you have any questions:</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<textarea id="css-questions" name="css-questions" rows="5" cols="24">
|
||||
Who is flexbox...
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
<footer>
|
||||
<address>
|
||||
<a href="https://freecodecamp.org">freeCodeCamp</a><br />
|
||||
San Francisco<br />
|
||||
California<br />
|
||||
USA
|
||||
</address>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: #f5f6f7;
|
||||
color: #1b1b32;
|
||||
font-family: Helvetica;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: #1b1b32;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width: max(100px, 18vw);
|
||||
background-color: #0a0a23;
|
||||
aspect-ratio: 35 / 4;
|
||||
padding: 0.4rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #f1be32;
|
||||
font-size: min(5vw, 1.2em);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
nav {
|
||||
width: 50%;
|
||||
max-width: 300px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
nav > ul {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
padding-inline-start: 0;
|
||||
margin-block: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
nav > ul > li {
|
||||
color: #dfdfe2;
|
||||
margin: 0 0.2rem;
|
||||
padding: 0.2rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
nav > ul > li:hover {
|
||||
background-color: #dfdfe2;
|
||||
color: #1b1b32;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
li > a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
main {
|
||||
padding-top: 50px;
|
||||
}
|
||||
|
||||
section {
|
||||
width: 80%;
|
||||
margin: 0 auto 10px auto;
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
font-family: Verdana, Tahoma;
|
||||
}
|
||||
|
||||
h2 {
|
||||
border-bottom: 4px solid #dfdfe2;
|
||||
margin-top: 0px;
|
||||
padding-top: 60px;
|
||||
}
|
||||
|
||||
.info {
|
||||
padding: 10px 0 0 5px;
|
||||
}
|
||||
|
||||
.formrow {
|
||||
margin-top: 30px;
|
||||
padding: 0px 15px;
|
||||
}
|
||||
|
||||
input {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
|
||||
.info input {
|
||||
width: 50%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.info label {
|
||||
width: 10%;
|
||||
min-width: 55px;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
p::before {
|
||||
content: "Question #";
|
||||
}
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,325 @@
|
||||
---
|
||||
id: 6148dc095264000dce348bf5
|
||||
title: Part 57
|
||||
challengeType: 0
|
||||
dashedName: part-57
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
To neaten the `.question-block` elements, set the following CSS properties:
|
||||
|
||||
```css
|
||||
text-align: left;
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
padding-top: 5px;
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `.question-block` selector.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('.question-block'));
|
||||
```
|
||||
|
||||
You should give the `.question-block` element a `display` of `block`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.question-block')?.display, 'block');
|
||||
```
|
||||
|
||||
You should give the `.question-block` element a `width` of `100%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.question-block')?.width, '100%');
|
||||
```
|
||||
|
||||
You should give the `.question-block` element a `margin-top` of `20px`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.question-block')?.marginTop, '20px');
|
||||
```
|
||||
|
||||
You should give the `.question-block` element a `padding-top` of `5px`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.question-block')?.paddingTop, '5px');
|
||||
```
|
||||
|
||||
You should give the `.question-block` element a `text-align` of `left`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.question-block')?.textAlign, 'left');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
<div class="info">
|
||||
<label for="student-name">Name:</label>
|
||||
<input type="text" name="student-name" id="student-name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input type="email" name="student-email" id="student-email" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
|
||||
<input type="date" name="birth-date" id="birth-date" />
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
<div class="question-block">
|
||||
<p>1</p>
|
||||
<fieldset class="question" name="html-question-one">
|
||||
<legend>
|
||||
The legend element represents a caption for the content of its
|
||||
parent fieldset element
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q1-a1">
|
||||
<input type="radio" id="q1-a1" name="q1" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q1-a2">
|
||||
<input type="radio" id="q1-a2" name="q1" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<p>2</p>
|
||||
<fieldset class="question" name="html-question-two">
|
||||
<legend>
|
||||
A label element nesting an input element is required to have a
|
||||
for attribute with the same value as the input's id
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q2-a1">
|
||||
<input type="radio" id="q2-a1" name="q2" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q2-a2">
|
||||
<input type="radio" id="q2-a2" name="q2" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
<div class="formrow">
|
||||
<div class="question-block">
|
||||
<label for="customer">Are you a frontend developer?</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<select name="customer" id="customer" required>
|
||||
<option value="">Select an option</option>
|
||||
<option value="yes">Yes</option>
|
||||
<option value="no">No</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<label for="css-questions">Do you have any questions:</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<textarea id="css-questions" name="css-questions" rows="5" cols="24">
|
||||
Who is flexbox...
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
<footer>
|
||||
<address>
|
||||
<a href="https://freecodecamp.org">freeCodeCamp</a><br />
|
||||
San Francisco<br />
|
||||
California<br />
|
||||
USA
|
||||
</address>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: #f5f6f7;
|
||||
color: #1b1b32;
|
||||
font-family: Helvetica;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: #1b1b32;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width: max(100px, 18vw);
|
||||
background-color: #0a0a23;
|
||||
aspect-ratio: 35 / 4;
|
||||
padding: 0.4rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #f1be32;
|
||||
font-size: min(5vw, 1.2em);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
nav {
|
||||
width: 50%;
|
||||
max-width: 300px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
nav > ul {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
padding-inline-start: 0;
|
||||
margin-block: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
nav > ul > li {
|
||||
color: #dfdfe2;
|
||||
margin: 0 0.2rem;
|
||||
padding: 0.2rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
nav > ul > li:hover {
|
||||
background-color: #dfdfe2;
|
||||
color: #1b1b32;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
li > a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
main {
|
||||
padding-top: 50px;
|
||||
}
|
||||
|
||||
section {
|
||||
width: 80%;
|
||||
margin: 0 auto 10px auto;
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
font-family: Verdana, Tahoma;
|
||||
}
|
||||
|
||||
h2 {
|
||||
border-bottom: 4px solid #dfdfe2;
|
||||
margin-top: 0px;
|
||||
padding-top: 60px;
|
||||
}
|
||||
|
||||
.info {
|
||||
padding: 10px 0 0 5px;
|
||||
}
|
||||
|
||||
.formrow {
|
||||
margin-top: 30px;
|
||||
padding: 0px 15px;
|
||||
}
|
||||
|
||||
input {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.info label, .info input {
|
||||
display: inline-block;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.info input {
|
||||
width: 50%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.info label {
|
||||
width: 10%;
|
||||
min-width: 55px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
|
||||
p::before {
|
||||
content: "Question #";
|
||||
}
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,318 @@
|
||||
---
|
||||
id: 6148dcaaf2e8750e6cb4501a
|
||||
title: Part 58
|
||||
challengeType: 0
|
||||
dashedName: part-58
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Make the paragraph elements appear as a higher priority, with the following CSS properties:
|
||||
|
||||
```css
|
||||
margin-top: 5px;
|
||||
padding-left: 15px;
|
||||
font-size: 20px;
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `p` element selector.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('p'));
|
||||
```
|
||||
|
||||
You should give the `p` element a `margin-top` of `5px`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('p')?.marginTop, '5px');
|
||||
```
|
||||
|
||||
You should give the `p` element a `padding-left` of `15px`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('p')?.paddingLeft, '15px');
|
||||
```
|
||||
|
||||
You should give the `p` element a `font-size` of `20px`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('p')?.fontSize, '20px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
<div class="info">
|
||||
<label for="student-name">Name:</label>
|
||||
<input type="text" name="student-name" id="student-name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input type="email" name="student-email" id="student-email" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
|
||||
<input type="date" name="birth-date" id="birth-date" />
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
<div class="question-block">
|
||||
<p>1</p>
|
||||
<fieldset class="question" name="html-question-one">
|
||||
<legend>
|
||||
The legend element represents a caption for the content of its
|
||||
parent fieldset element
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q1-a1">
|
||||
<input type="radio" id="q1-a1" name="q1" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q1-a2">
|
||||
<input type="radio" id="q1-a2" name="q1" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<p>2</p>
|
||||
<fieldset class="question" name="html-question-two">
|
||||
<legend>
|
||||
A label element nesting an input element is required to have a
|
||||
for attribute with the same value as the input's id
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q2-a1">
|
||||
<input type="radio" id="q2-a1" name="q2" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q2-a2">
|
||||
<input type="radio" id="q2-a2" name="q2" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
<div class="formrow">
|
||||
<div class="question-block">
|
||||
<label for="customer">Are you a frontend developer?</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<select name="customer" id="customer" required>
|
||||
<option value="">Select an option</option>
|
||||
<option value="yes">Yes</option>
|
||||
<option value="no">No</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<label for="css-questions">Do you have any questions:</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<textarea id="css-questions" name="css-questions" rows="5" cols="24">
|
||||
Who is flexbox...
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
<footer>
|
||||
<address>
|
||||
<a href="https://freecodecamp.org">freeCodeCamp</a><br />
|
||||
San Francisco<br />
|
||||
California<br />
|
||||
USA
|
||||
</address>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: #f5f6f7;
|
||||
color: #1b1b32;
|
||||
font-family: Helvetica;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: #1b1b32;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width: max(100px, 18vw);
|
||||
background-color: #0a0a23;
|
||||
aspect-ratio: 35 / 4;
|
||||
padding: 0.4rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #f1be32;
|
||||
font-size: min(5vw, 1.2em);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
nav {
|
||||
width: 50%;
|
||||
max-width: 300px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
nav > ul {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
padding-inline-start: 0;
|
||||
margin-block: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
nav > ul > li {
|
||||
color: #dfdfe2;
|
||||
margin: 0 0.2rem;
|
||||
padding: 0.2rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
nav > ul > li:hover {
|
||||
background-color: #dfdfe2;
|
||||
color: #1b1b32;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
li > a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
main {
|
||||
padding-top: 50px;
|
||||
}
|
||||
|
||||
section {
|
||||
width: 80%;
|
||||
margin: 0 auto 10px auto;
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
font-family: Verdana, Tahoma;
|
||||
}
|
||||
|
||||
h2 {
|
||||
border-bottom: 4px solid #dfdfe2;
|
||||
margin-top: 0px;
|
||||
padding-top: 60px;
|
||||
}
|
||||
|
||||
.info {
|
||||
padding: 10px 0 0 5px;
|
||||
}
|
||||
|
||||
.formrow {
|
||||
margin-top: 30px;
|
||||
padding: 0px 15px;
|
||||
}
|
||||
|
||||
input {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.info label, .info input {
|
||||
display: inline-block;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.info input {
|
||||
width: 50%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.info label {
|
||||
width: 10%;
|
||||
min-width: 55px;
|
||||
}
|
||||
|
||||
.question-block {
|
||||
text-align: left;
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
p::before {
|
||||
content: "Question #";
|
||||
}
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,314 @@
|
||||
---
|
||||
id: 6148dd31d210990f0fb140f8
|
||||
title: Part 59
|
||||
challengeType: 0
|
||||
dashedName: part-59
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
It is useful to see the default border around the `fieldset` elements, during development. However, it might not be the style you want.
|
||||
|
||||
Remove the border and bottom padding on the `.question` elements.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `.question` selector.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('.question'));
|
||||
```
|
||||
|
||||
You should give the `.question` a `border` of `none`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.question')?.border, 'none');
|
||||
```
|
||||
|
||||
You should give the `.question` a `padding-bottom` of `0`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.question')?.paddingBottom, '0px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
<div class="info">
|
||||
<label for="student-name">Name:</label>
|
||||
<input type="text" name="student-name" id="student-name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input type="email" name="student-email" id="student-email" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
|
||||
<input type="date" name="birth-date" id="birth-date" />
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
<div class="question-block">
|
||||
<p>1</p>
|
||||
<fieldset class="question" name="html-question-one">
|
||||
<legend>
|
||||
The legend element represents a caption for the content of its
|
||||
parent fieldset element
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q1-a1">
|
||||
<input type="radio" id="q1-a1" name="q1" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q1-a2">
|
||||
<input type="radio" id="q1-a2" name="q1" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<p>2</p>
|
||||
<fieldset class="question" name="html-question-two">
|
||||
<legend>
|
||||
A label element nesting an input element is required to have a
|
||||
for attribute with the same value as the input's id
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q2-a1">
|
||||
<input type="radio" id="q2-a1" name="q2" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q2-a2">
|
||||
<input type="radio" id="q2-a2" name="q2" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
<div class="formrow">
|
||||
<div class="question-block">
|
||||
<label for="customer">Are you a frontend developer?</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<select name="customer" id="customer" required>
|
||||
<option value="">Select an option</option>
|
||||
<option value="yes">Yes</option>
|
||||
<option value="no">No</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<label for="css-questions">Do you have any questions:</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<textarea id="css-questions" name="css-questions" rows="5" cols="24">
|
||||
Who is flexbox...
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
<footer>
|
||||
<address>
|
||||
<a href="https://freecodecamp.org">freeCodeCamp</a><br />
|
||||
San Francisco<br />
|
||||
California<br />
|
||||
USA
|
||||
</address>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: #f5f6f7;
|
||||
color: #1b1b32;
|
||||
font-family: Helvetica;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: #1b1b32;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width: max(100px, 18vw);
|
||||
background-color: #0a0a23;
|
||||
aspect-ratio: 35 / 4;
|
||||
padding: 0.4rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #f1be32;
|
||||
font-size: min(5vw, 1.2em);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
nav {
|
||||
width: 50%;
|
||||
max-width: 300px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
nav > ul {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
padding-inline-start: 0;
|
||||
margin-block: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
nav > ul > li {
|
||||
color: #dfdfe2;
|
||||
margin: 0 0.2rem;
|
||||
padding: 0.2rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
nav > ul > li:hover {
|
||||
background-color: #dfdfe2;
|
||||
color: #1b1b32;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
li > a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
main {
|
||||
padding-top: 50px;
|
||||
}
|
||||
|
||||
section {
|
||||
width: 80%;
|
||||
margin: 0 auto 10px auto;
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
font-family: Verdana, Tahoma;
|
||||
}
|
||||
|
||||
h2 {
|
||||
border-bottom: 4px solid #dfdfe2;
|
||||
margin-top: 0px;
|
||||
padding-top: 60px;
|
||||
}
|
||||
|
||||
.info {
|
||||
padding: 10px 0 0 5px;
|
||||
}
|
||||
|
||||
.formrow {
|
||||
margin-top: 30px;
|
||||
padding: 0px 15px;
|
||||
}
|
||||
|
||||
input {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.info label, .info input {
|
||||
display: inline-block;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.info input {
|
||||
width: 50%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.info label {
|
||||
width: 10%;
|
||||
min-width: 55px;
|
||||
}
|
||||
|
||||
.question-block {
|
||||
text-align: left;
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 5px;
|
||||
padding-left: 15px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
p::before {
|
||||
content: "Question #";
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,317 @@
|
||||
---
|
||||
id: 6148defa9c01520fb9d178a0
|
||||
title: Part 60
|
||||
challengeType: 0
|
||||
dashedName: part-60
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Remove the default styling for the list items of `.answers-list`, and remove the unordered list padding.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `.answers-list` selector.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('.answers-list'));
|
||||
```
|
||||
|
||||
You should give `.answers-list` a `list-style` of `none`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.answers-list')?.listStyle, 'none');
|
||||
```
|
||||
|
||||
You should give `.answers-list` a `padding` of `0`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.answers-list')?.padding, '0px');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
<div class="info">
|
||||
<label for="student-name">Name:</label>
|
||||
<input type="text" name="student-name" id="student-name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input type="email" name="student-email" id="student-email" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
|
||||
<input type="date" name="birth-date" id="birth-date" />
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
<div class="question-block">
|
||||
<p>1</p>
|
||||
<fieldset class="question" name="html-question-one">
|
||||
<legend>
|
||||
The legend element represents a caption for the content of its
|
||||
parent fieldset element
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q1-a1">
|
||||
<input type="radio" id="q1-a1" name="q1" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q1-a2">
|
||||
<input type="radio" id="q1-a2" name="q1" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<p>2</p>
|
||||
<fieldset class="question" name="html-question-two">
|
||||
<legend>
|
||||
A label element nesting an input element is required to have a
|
||||
for attribute with the same value as the input's id
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q2-a1">
|
||||
<input type="radio" id="q2-a1" name="q2" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q2-a2">
|
||||
<input type="radio" id="q2-a2" name="q2" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
<div class="formrow">
|
||||
<div class="question-block">
|
||||
<label for="customer">Are you a frontend developer?</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<select name="customer" id="customer" required>
|
||||
<option value="">Select an option</option>
|
||||
<option value="yes">Yes</option>
|
||||
<option value="no">No</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<label for="css-questions">Do you have any questions:</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<textarea id="css-questions" name="css-questions" rows="5" cols="24">
|
||||
Who is flexbox...
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
<footer>
|
||||
<address>
|
||||
<a href="https://freecodecamp.org">freeCodeCamp</a><br />
|
||||
San Francisco<br />
|
||||
California<br />
|
||||
USA
|
||||
</address>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: #f5f6f7;
|
||||
color: #1b1b32;
|
||||
font-family: Helvetica;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: #1b1b32;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width: max(100px, 18vw);
|
||||
background-color: #0a0a23;
|
||||
aspect-ratio: 35 / 4;
|
||||
padding: 0.4rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #f1be32;
|
||||
font-size: min(5vw, 1.2em);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
nav {
|
||||
width: 50%;
|
||||
max-width: 300px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
nav > ul {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
padding-inline-start: 0;
|
||||
margin-block: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
nav > ul > li {
|
||||
color: #dfdfe2;
|
||||
margin: 0 0.2rem;
|
||||
padding: 0.2rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
nav > ul > li:hover {
|
||||
background-color: #dfdfe2;
|
||||
color: #1b1b32;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
li > a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
main {
|
||||
padding-top: 50px;
|
||||
}
|
||||
|
||||
section {
|
||||
width: 80%;
|
||||
margin: 0 auto 10px auto;
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
font-family: Verdana, Tahoma;
|
||||
}
|
||||
|
||||
h2 {
|
||||
border-bottom: 4px solid #dfdfe2;
|
||||
margin-top: 0px;
|
||||
padding-top: 60px;
|
||||
}
|
||||
|
||||
.info {
|
||||
padding: 10px 0 0 5px;
|
||||
}
|
||||
|
||||
.formrow {
|
||||
margin-top: 30px;
|
||||
padding: 0px 15px;
|
||||
}
|
||||
|
||||
input {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.info label, .info input {
|
||||
display: inline-block;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.info input {
|
||||
width: 50%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.info label {
|
||||
width: 10%;
|
||||
min-width: 55px;
|
||||
}
|
||||
|
||||
.question-block {
|
||||
text-align: left;
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 5px;
|
||||
padding-left: 15px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
p::before {
|
||||
content: "Question #";
|
||||
}
|
||||
|
||||
.question {
|
||||
border: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,362 @@
|
||||
---
|
||||
id: 6148dfab9b54c110577de165
|
||||
title: Part 61
|
||||
challengeType: 0
|
||||
dashedName: part-61
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Give the submit button a freeCodeCamp-style design, with the following CSS properties:
|
||||
|
||||
```css
|
||||
display: block;
|
||||
margin: 40px auto;
|
||||
width: 40%;
|
||||
padding: 15px;
|
||||
font-size: 23px;
|
||||
background: #d0d0d5;
|
||||
border: 3px solid #3b3b4f;
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `button` element selector.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('button'));
|
||||
```
|
||||
|
||||
You should give `button` a `display` of `block`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.display, 'block');
|
||||
```
|
||||
|
||||
You should give `button` a `margin` of `40px auto`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.margin, '40px auto');
|
||||
```
|
||||
|
||||
You should give `button` a `width` of `40%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.width, '40%');
|
||||
```
|
||||
|
||||
You should give `button` a `padding` of `15px`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.padding, '15px');
|
||||
```
|
||||
|
||||
You should give `button` a `font-size` of `23px`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.fontSize, '23px');
|
||||
```
|
||||
|
||||
You should give `button` a `background` of `#d0d0d5`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.background, 'rgb(208, 208, 213)');
|
||||
```
|
||||
|
||||
You should give `button` a `border` of `3px solid #3b3b4f`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.border, '3px solid rgb(59, 59, 79)');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
<div class="info">
|
||||
<label for="student-name">Name:</label>
|
||||
<input type="text" name="student-name" id="student-name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input type="email" name="student-email" id="student-email" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
|
||||
<input type="date" name="birth-date" id="birth-date" />
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
<div class="question-block">
|
||||
<p>1</p>
|
||||
<fieldset class="question" name="html-question-one">
|
||||
<legend>
|
||||
The legend element represents a caption for the content of its
|
||||
parent fieldset element
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q1-a1">
|
||||
<input type="radio" id="q1-a1" name="q1" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q1-a2">
|
||||
<input type="radio" id="q1-a2" name="q1" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<p>2</p>
|
||||
<fieldset class="question" name="html-question-two">
|
||||
<legend>
|
||||
A label element nesting an input element is required to have a
|
||||
for attribute with the same value as the input's id
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q2-a1">
|
||||
<input type="radio" id="q2-a1" name="q2" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q2-a2">
|
||||
<input type="radio" id="q2-a2" name="q2" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
<div class="formrow">
|
||||
<div class="question-block">
|
||||
<label for="customer">Are you a frontend developer?</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<select name="customer" id="customer" required>
|
||||
<option value="">Select an option</option>
|
||||
<option value="yes">Yes</option>
|
||||
<option value="no">No</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<label for="css-questions">Do you have any questions:</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<textarea id="css-questions" name="css-questions" rows="5" cols="24">
|
||||
Who is flexbox...
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
<footer>
|
||||
<address>
|
||||
<a href="https://freecodecamp.org">freeCodeCamp</a><br />
|
||||
San Francisco<br />
|
||||
California<br />
|
||||
USA
|
||||
</address>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: #f5f6f7;
|
||||
color: #1b1b32;
|
||||
font-family: Helvetica;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: #1b1b32;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width: max(100px, 18vw);
|
||||
background-color: #0a0a23;
|
||||
aspect-ratio: 35 / 4;
|
||||
padding: 0.4rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #f1be32;
|
||||
font-size: min(5vw, 1.2em);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
nav {
|
||||
width: 50%;
|
||||
max-width: 300px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
nav > ul {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
padding-inline-start: 0;
|
||||
margin-block: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
nav > ul > li {
|
||||
color: #dfdfe2;
|
||||
margin: 0 0.2rem;
|
||||
padding: 0.2rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
nav > ul > li:hover {
|
||||
background-color: #dfdfe2;
|
||||
color: #1b1b32;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
li > a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
main {
|
||||
padding-top: 50px;
|
||||
}
|
||||
|
||||
section {
|
||||
width: 80%;
|
||||
margin: 0 auto 10px auto;
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
font-family: Verdana, Tahoma;
|
||||
}
|
||||
|
||||
h2 {
|
||||
border-bottom: 4px solid #dfdfe2;
|
||||
margin-top: 0px;
|
||||
padding-top: 60px;
|
||||
}
|
||||
|
||||
.info {
|
||||
padding: 10px 0 0 5px;
|
||||
}
|
||||
|
||||
.formrow {
|
||||
margin-top: 30px;
|
||||
padding: 0px 15px;
|
||||
}
|
||||
|
||||
input {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.info label, .info input {
|
||||
display: inline-block;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.info input {
|
||||
width: 50%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.info label {
|
||||
width: 10%;
|
||||
min-width: 55px;
|
||||
}
|
||||
|
||||
.question-block {
|
||||
text-align: left;
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 5px;
|
||||
padding-left: 15px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
p::before {
|
||||
content: "Question #";
|
||||
}
|
||||
|
||||
.question {
|
||||
border: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.answers-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,338 @@
|
||||
---
|
||||
id: 6148e0bcc13efd10f7d7a6a9
|
||||
title: Part 62
|
||||
challengeType: 0
|
||||
dashedName: part-62
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Set the `footer` background color to `#2a2a40`, and use _Flexbox_ to horizontally center the text.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `footer` element selector.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('footer'));
|
||||
```
|
||||
|
||||
You should give `footer` a `background-color` of `#2a2a40`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('footer')?.backgroundColor, 'rgb(42, 42, 64)');
|
||||
```
|
||||
|
||||
You should give `footer` a `display` of `flex`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('footer')?.display, 'flex');
|
||||
```
|
||||
|
||||
You should give `footer` a `justify-content` of `center`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('footer')?.justifyContent, 'center');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
<div class="info">
|
||||
<label for="student-name">Name:</label>
|
||||
<input type="text" name="student-name" id="student-name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input type="email" name="student-email" id="student-email" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
|
||||
<input type="date" name="birth-date" id="birth-date" />
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
<div class="question-block">
|
||||
<p>1</p>
|
||||
<fieldset class="question" name="html-question-one">
|
||||
<legend>
|
||||
The legend element represents a caption for the content of its
|
||||
parent fieldset element
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q1-a1">
|
||||
<input type="radio" id="q1-a1" name="q1" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q1-a2">
|
||||
<input type="radio" id="q1-a2" name="q1" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<p>2</p>
|
||||
<fieldset class="question" name="html-question-two">
|
||||
<legend>
|
||||
A label element nesting an input element is required to have a
|
||||
for attribute with the same value as the input's id
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q2-a1">
|
||||
<input type="radio" id="q2-a1" name="q2" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q2-a2">
|
||||
<input type="radio" id="q2-a2" name="q2" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
<div class="formrow">
|
||||
<div class="question-block">
|
||||
<label for="customer">Are you a frontend developer?</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<select name="customer" id="customer" required>
|
||||
<option value="">Select an option</option>
|
||||
<option value="yes">Yes</option>
|
||||
<option value="no">No</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<label for="css-questions">Do you have any questions:</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<textarea id="css-questions" name="css-questions" rows="5" cols="24">
|
||||
Who is flexbox...
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
<footer>
|
||||
<address>
|
||||
<a href="https://freecodecamp.org">freeCodeCamp</a><br />
|
||||
San Francisco<br />
|
||||
California<br />
|
||||
USA
|
||||
</address>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: #f5f6f7;
|
||||
color: #1b1b32;
|
||||
font-family: Helvetica;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: #1b1b32;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width: max(100px, 18vw);
|
||||
background-color: #0a0a23;
|
||||
aspect-ratio: 35 / 4;
|
||||
padding: 0.4rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #f1be32;
|
||||
font-size: min(5vw, 1.2em);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
nav {
|
||||
width: 50%;
|
||||
max-width: 300px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
nav > ul {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
padding-inline-start: 0;
|
||||
margin-block: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
nav > ul > li {
|
||||
color: #dfdfe2;
|
||||
margin: 0 0.2rem;
|
||||
padding: 0.2rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
nav > ul > li:hover {
|
||||
background-color: #dfdfe2;
|
||||
color: #1b1b32;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
li > a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
main {
|
||||
padding-top: 50px;
|
||||
}
|
||||
|
||||
section {
|
||||
width: 80%;
|
||||
margin: 0 auto 10px auto;
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
font-family: Verdana, Tahoma;
|
||||
}
|
||||
|
||||
h2 {
|
||||
border-bottom: 4px solid #dfdfe2;
|
||||
margin-top: 0px;
|
||||
padding-top: 60px;
|
||||
}
|
||||
|
||||
.info {
|
||||
padding: 10px 0 0 5px;
|
||||
}
|
||||
|
||||
.formrow {
|
||||
margin-top: 30px;
|
||||
padding: 0px 15px;
|
||||
}
|
||||
|
||||
input {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.info label, .info input {
|
||||
display: inline-block;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.info input {
|
||||
width: 50%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.info label {
|
||||
width: 10%;
|
||||
min-width: 55px;
|
||||
}
|
||||
|
||||
.question-block {
|
||||
text-align: left;
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 5px;
|
||||
padding-left: 15px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
p::before {
|
||||
content: "Question #";
|
||||
}
|
||||
|
||||
.question {
|
||||
border: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.answers-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
button {
|
||||
display: block;
|
||||
margin: 40px auto;
|
||||
width: 40%;
|
||||
padding: 15px;
|
||||
font-size: 23px;
|
||||
background: #d0d0d5;
|
||||
border: 3px solid #3b3b4f;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,358 @@
|
||||
---
|
||||
id: 6148e161ecec9511941f8833
|
||||
title: Part 63
|
||||
challengeType: 0
|
||||
dashedName: part-63
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now, we cannot read the text. Target the `footer` and the anchor element within to set the font color to a color of adequate contrast ratio.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `footer, footer a` selector.
|
||||
|
||||
```js
|
||||
const gs = (s) => new __helpers.CSSHelp(document).getStyle(s);
|
||||
assert.exists(gs('footer, footer a') || gs('footer a, footer'));
|
||||
```
|
||||
|
||||
You should set the `color` to a value with a contrast ratio of at least `7:1`. _Hint: I suggest `#dfdfe2`_
|
||||
|
||||
```js
|
||||
function luminance(r, g, b) {
|
||||
const a = [r, g, b].map((v) => {
|
||||
v /= 255;
|
||||
return v <= 0.03928 ? v / 12.92 : Math.pow( (v + 0.055) / 1.055, 2.4 );
|
||||
});
|
||||
return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
|
||||
}
|
||||
function contrast(rgb1, rgb2) {
|
||||
const lum1 = luminance(rgb1[0], rgb1[1], rgb1[2]);
|
||||
const lum2 = luminance(rgb2[0], rgb2[1], rgb2[2]);
|
||||
const brightest = Math.max(lum1, lum2);
|
||||
const darkest = Math.min(lum1, lum2);
|
||||
return (brightest + 0.05)
|
||||
/ (darkest + 0.05);
|
||||
}
|
||||
const backgroundColour = [42, 42, 64];
|
||||
|
||||
const foot = getComputedStyle(document.querySelector('footer'))?.color;
|
||||
const a = getComputedStyle(document.querySelector('footer a'))?.color;
|
||||
|
||||
const rgbFoot = foot?.match(/(\d+),\s(\d+),\s(\d+)/);
|
||||
const rgbA = a?.match(/(\d+),\s(\d+),\s(\d+)/);
|
||||
const footColour = [rgbFoot[1], rgbFoot[2], rgbFoot[3]];
|
||||
const aColour = [rgbA[1], rgbA[2], rgbA[3]];
|
||||
assert.isAtLeast(contrast(backgroundColour, footColour), 7);
|
||||
assert.isAtLeast(contrast(backgroundColour, aColour), 7);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
<div class="info">
|
||||
<label for="student-name">Name:</label>
|
||||
<input type="text" name="student-name" id="student-name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input type="email" name="student-email" id="student-email" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
|
||||
<input type="date" name="birth-date" id="birth-date" />
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
<div class="question-block">
|
||||
<p>1</p>
|
||||
<fieldset class="question" name="html-question-one">
|
||||
<legend>
|
||||
The legend element represents a caption for the content of its
|
||||
parent fieldset element
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q1-a1">
|
||||
<input type="radio" id="q1-a1" name="q1" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q1-a2">
|
||||
<input type="radio" id="q1-a2" name="q1" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<p>2</p>
|
||||
<fieldset class="question" name="html-question-two">
|
||||
<legend>
|
||||
A label element nesting an input element is required to have a
|
||||
for attribute with the same value as the input's id
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q2-a1">
|
||||
<input type="radio" id="q2-a1" name="q2" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q2-a2">
|
||||
<input type="radio" id="q2-a2" name="q2" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
<div class="formrow">
|
||||
<div class="question-block">
|
||||
<label for="customer">Are you a frontend developer?</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<select name="customer" id="customer" required>
|
||||
<option value="">Select an option</option>
|
||||
<option value="yes">Yes</option>
|
||||
<option value="no">No</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<label for="css-questions">Do you have any questions:</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<textarea id="css-questions" name="css-questions" rows="5" cols="24">
|
||||
Who is flexbox...
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
<footer>
|
||||
<address>
|
||||
<a href="https://freecodecamp.org">freeCodeCamp</a><br />
|
||||
San Francisco<br />
|
||||
California<br />
|
||||
USA
|
||||
</address>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: #f5f6f7;
|
||||
color: #1b1b32;
|
||||
font-family: Helvetica;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: #1b1b32;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width: max(100px, 18vw);
|
||||
background-color: #0a0a23;
|
||||
aspect-ratio: 35 / 4;
|
||||
padding: 0.4rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #f1be32;
|
||||
font-size: min(5vw, 1.2em);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
nav {
|
||||
width: 50%;
|
||||
max-width: 300px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
nav > ul {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
padding-inline-start: 0;
|
||||
margin-block: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
nav > ul > li {
|
||||
color: #dfdfe2;
|
||||
margin: 0 0.2rem;
|
||||
padding: 0.2rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
nav > ul > li:hover {
|
||||
background-color: #dfdfe2;
|
||||
color: #1b1b32;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
li > a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
main {
|
||||
padding-top: 50px;
|
||||
}
|
||||
|
||||
section {
|
||||
width: 80%;
|
||||
margin: 0 auto 10px auto;
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
font-family: Verdana, Tahoma;
|
||||
}
|
||||
|
||||
h2 {
|
||||
border-bottom: 4px solid #dfdfe2;
|
||||
margin-top: 0px;
|
||||
padding-top: 60px;
|
||||
}
|
||||
|
||||
.info {
|
||||
padding: 10px 0 0 5px;
|
||||
}
|
||||
|
||||
.formrow {
|
||||
margin-top: 30px;
|
||||
padding: 0px 15px;
|
||||
}
|
||||
|
||||
input {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.info label, .info input {
|
||||
display: inline-block;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.info input {
|
||||
width: 50%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.info label {
|
||||
width: 10%;
|
||||
min-width: 55px;
|
||||
}
|
||||
|
||||
.question-block {
|
||||
text-align: left;
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 5px;
|
||||
padding-left: 15px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
p::before {
|
||||
content: "Question #";
|
||||
}
|
||||
|
||||
.question {
|
||||
border: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.answers-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
button {
|
||||
display: block;
|
||||
margin: 40px auto;
|
||||
width: 40%;
|
||||
padding: 15px;
|
||||
font-size: 23px;
|
||||
background: #d0d0d5;
|
||||
border: 3px solid #3b3b4f;
|
||||
}
|
||||
|
||||
footer {
|
||||
background-color: #2a2a40;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,361 @@
|
||||
---
|
||||
id: 6148e28706b34912340fd042
|
||||
title: Part 64
|
||||
challengeType: 0
|
||||
dashedName: part-64
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Horizontally center all the text within the `address` element, and add some padding.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `address` element selector.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('address'));
|
||||
```
|
||||
|
||||
You should give `address` a `text-align` of `center`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('address')?.textAlign, 'center');
|
||||
```
|
||||
|
||||
You should give `address` a `padding-top` of at least `1px`.
|
||||
|
||||
```js
|
||||
assert.isAtLeast(Number(new __helpers.CSSHelp(document).getStyle('address')?.paddingTop?.replace(/\D+/, '')), 1);
|
||||
```
|
||||
|
||||
You should give `address` a `padding-right` of at least `1px`.
|
||||
|
||||
```js
|
||||
assert.isAtLeast(Number(new __helpers.CSSHelp(document).getStyle('address')?.paddingRight?.replace(/\D+/, '')), 1);
|
||||
```
|
||||
|
||||
You should give `address` a `padding-bottom` of at least `1px`.
|
||||
|
||||
```js
|
||||
assert.isAtLeast(Number(new __helpers.CSSHelp(document).getStyle('address')?.paddingBottom?.replace(/\D+/, '')), 1);
|
||||
```
|
||||
|
||||
You should give `address` a `padding-left` of at least `1px`.
|
||||
|
||||
```js
|
||||
assert.isAtLeast(Number(new __helpers.CSSHelp(document).getStyle('address')?.paddingLeft?.replace(/\D+/, '')), 1);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
<div class="info">
|
||||
<label for="student-name">Name:</label>
|
||||
<input type="text" name="student-name" id="student-name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input type="email" name="student-email" id="student-email" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
|
||||
<input type="date" name="birth-date" id="birth-date" />
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
<div class="question-block">
|
||||
<p>1</p>
|
||||
<fieldset class="question" name="html-question-one">
|
||||
<legend>
|
||||
The legend element represents a caption for the content of its
|
||||
parent fieldset element
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q1-a1">
|
||||
<input type="radio" id="q1-a1" name="q1" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q1-a2">
|
||||
<input type="radio" id="q1-a2" name="q1" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<p>2</p>
|
||||
<fieldset class="question" name="html-question-two">
|
||||
<legend>
|
||||
A label element nesting an input element is required to have a
|
||||
for attribute with the same value as the input's id
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q2-a1">
|
||||
<input type="radio" id="q2-a1" name="q2" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q2-a2">
|
||||
<input type="radio" id="q2-a2" name="q2" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
<div class="formrow">
|
||||
<div class="question-block">
|
||||
<label for="customer">Are you a frontend developer?</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<select name="customer" id="customer" required>
|
||||
<option value="">Select an option</option>
|
||||
<option value="yes">Yes</option>
|
||||
<option value="no">No</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<label for="css-questions">Do you have any questions:</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<textarea id="css-questions" name="css-questions" rows="5" cols="24">
|
||||
Who is flexbox...
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
<footer>
|
||||
<address>
|
||||
<a href="https://freecodecamp.org">freeCodeCamp</a><br />
|
||||
San Francisco<br />
|
||||
California<br />
|
||||
USA
|
||||
</address>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
body {
|
||||
background: #f5f6f7;
|
||||
color: #1b1b32;
|
||||
font-family: Helvetica;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: #1b1b32;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width: max(100px, 18vw);
|
||||
background-color: #0a0a23;
|
||||
aspect-ratio: 35 / 4;
|
||||
padding: 0.4rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #f1be32;
|
||||
font-size: min(5vw, 1.2em);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
nav {
|
||||
width: 50%;
|
||||
max-width: 300px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
nav > ul {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
padding-inline-start: 0;
|
||||
margin-block: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
nav > ul > li {
|
||||
color: #dfdfe2;
|
||||
margin: 0 0.2rem;
|
||||
padding: 0.2rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
nav > ul > li:hover {
|
||||
background-color: #dfdfe2;
|
||||
color: #1b1b32;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
li > a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
main {
|
||||
padding-top: 50px;
|
||||
}
|
||||
|
||||
section {
|
||||
width: 80%;
|
||||
margin: 0 auto 10px auto;
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
font-family: Verdana, Tahoma;
|
||||
}
|
||||
|
||||
h2 {
|
||||
border-bottom: 4px solid #dfdfe2;
|
||||
margin-top: 0px;
|
||||
padding-top: 60px;
|
||||
}
|
||||
|
||||
.info {
|
||||
padding: 10px 0 0 5px;
|
||||
}
|
||||
|
||||
.formrow {
|
||||
margin-top: 30px;
|
||||
padding: 0px 15px;
|
||||
}
|
||||
|
||||
input {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.info label, .info input {
|
||||
display: inline-block;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.info input {
|
||||
width: 50%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.info label {
|
||||
width: 10%;
|
||||
min-width: 55px;
|
||||
}
|
||||
|
||||
.question-block {
|
||||
text-align: left;
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 5px;
|
||||
padding-left: 15px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
p::before {
|
||||
content: "Question #";
|
||||
}
|
||||
|
||||
.question {
|
||||
border: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.answers-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
button {
|
||||
display: block;
|
||||
margin: 40px auto;
|
||||
width: 40%;
|
||||
padding: 15px;
|
||||
font-size: 23px;
|
||||
background: #d0d0d5;
|
||||
border: 3px solid #3b3b4f;
|
||||
}
|
||||
|
||||
footer {
|
||||
background-color: #2a2a40;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
footer,
|
||||
footer a {
|
||||
color: #dfdfe2;
|
||||
}
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,344 @@
|
||||
---
|
||||
id: 6148e335c1edd512d00e4691
|
||||
title: Part 65
|
||||
challengeType: 0
|
||||
dashedName: part-65
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Clicking on the navigation links should jump the viewport to the relevant section. However, this jumping can be disorienting for some users.
|
||||
|
||||
Select all elements, and set the `scroll-behavior` to `smooth`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the `*` selector.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('*'));
|
||||
```
|
||||
|
||||
You should give `*` a `scroll-behavior` of `smooth`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('*')?.scrollBehavior, 'smooth');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
<div class="info">
|
||||
<label for="student-name">Name:</label>
|
||||
<input type="text" name="student-name" id="student-name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input type="email" name="student-email" id="student-email" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
|
||||
<input type="date" name="birth-date" id="birth-date" />
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
<div class="question-block">
|
||||
<p>1</p>
|
||||
<fieldset class="question" name="html-question-one">
|
||||
<legend>
|
||||
The legend element represents a caption for the content of its
|
||||
parent fieldset element
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q1-a1">
|
||||
<input type="radio" id="q1-a1" name="q1" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q1-a2">
|
||||
<input type="radio" id="q1-a2" name="q1" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<p>2</p>
|
||||
<fieldset class="question" name="html-question-two">
|
||||
<legend>
|
||||
A label element nesting an input element is required to have a
|
||||
for attribute with the same value as the input's id
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q2-a1">
|
||||
<input type="radio" id="q2-a1" name="q2" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q2-a2">
|
||||
<input type="radio" id="q2-a2" name="q2" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
<div class="formrow">
|
||||
<div class="question-block">
|
||||
<label for="customer">Are you a frontend developer?</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<select name="customer" id="customer" required>
|
||||
<option value="">Select an option</option>
|
||||
<option value="yes">Yes</option>
|
||||
<option value="no">No</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<label for="css-questions">Do you have any questions:</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<textarea id="css-questions" name="css-questions" rows="5" cols="24">
|
||||
Who is flexbox...
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
<footer>
|
||||
<address>
|
||||
<a href="https://freecodecamp.org">freeCodeCamp</a><br />
|
||||
San Francisco<br />
|
||||
California<br />
|
||||
USA
|
||||
</address>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
--fcc-editable-region--
|
||||
|
||||
--fcc-editable-region--
|
||||
|
||||
body {
|
||||
background: #f5f6f7;
|
||||
color: #1b1b32;
|
||||
font-family: Helvetica;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: #1b1b32;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width: max(100px, 18vw);
|
||||
background-color: #0a0a23;
|
||||
aspect-ratio: 35 / 4;
|
||||
padding: 0.4rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #f1be32;
|
||||
font-size: min(5vw, 1.2em);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
nav {
|
||||
width: 50%;
|
||||
max-width: 300px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
nav > ul {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
padding-inline-start: 0;
|
||||
margin-block: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
nav > ul > li {
|
||||
color: #dfdfe2;
|
||||
margin: 0 0.2rem;
|
||||
padding: 0.2rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
nav > ul > li:hover {
|
||||
background-color: #dfdfe2;
|
||||
color: #1b1b32;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
li > a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
main {
|
||||
padding-top: 50px;
|
||||
}
|
||||
|
||||
section {
|
||||
width: 80%;
|
||||
margin: 0 auto 10px auto;
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
font-family: Verdana, Tahoma;
|
||||
}
|
||||
|
||||
h2 {
|
||||
border-bottom: 4px solid #dfdfe2;
|
||||
margin-top: 0px;
|
||||
padding-top: 60px;
|
||||
}
|
||||
|
||||
.info {
|
||||
padding: 10px 0 0 5px;
|
||||
}
|
||||
|
||||
.formrow {
|
||||
margin-top: 30px;
|
||||
padding: 0px 15px;
|
||||
}
|
||||
|
||||
input {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.info label, .info input {
|
||||
display: inline-block;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.info input {
|
||||
width: 50%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.info label {
|
||||
width: 10%;
|
||||
min-width: 55px;
|
||||
}
|
||||
|
||||
.question-block {
|
||||
text-align: left;
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 5px;
|
||||
padding-left: 15px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
p::before {
|
||||
content: "Question #";
|
||||
}
|
||||
|
||||
.question {
|
||||
border: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.answers-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
button {
|
||||
display: block;
|
||||
margin: 40px auto;
|
||||
width: 40%;
|
||||
padding: 15px;
|
||||
font-size: 23px;
|
||||
background: #d0d0d5;
|
||||
border: 3px solid #3b3b4f;
|
||||
}
|
||||
|
||||
footer {
|
||||
background-color: #2a2a40;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
footer,
|
||||
footer a {
|
||||
color: #dfdfe2;
|
||||
}
|
||||
|
||||
address {
|
||||
text-align: center;
|
||||
padding: 0.3em;
|
||||
}
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,352 @@
|
||||
---
|
||||
id: 6148e41c728f65138addf9cc
|
||||
title: Part 66
|
||||
challengeType: 0
|
||||
dashedName: part-66
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Setting the `scroll-behaviour` to `smooth` is preferred by most users. However, some users find this to be too slow, and prefer to have the scrolling happen instantaneously.
|
||||
|
||||
There exists a media rule to set CSS based on the user's browser settings. This media rule is called `prefers-reduced-motion`, and expects one of the following values:
|
||||
|
||||
- `reduce`
|
||||
- `no-preference`
|
||||
|
||||
Wrap the appropriate rule within a `prefers-reduced-motion` media rule such that a `scroll-behavior` of `smooth` is only set if the user's browser setting is `no-preference`.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should have a `@media (prefers-reduced-motion: no-preference)` rule.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getRuleListsWithinMedia('(prefers-reduced-motion: no-preference)'));
|
||||
```
|
||||
|
||||
You should wrap the existing `*` rule within the `@media` rule.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia('(prefers-reduced-motion: no-preference)')?.find(x => x.selectorText === '*')?.style?.scrollBehavior, 'smooth');
|
||||
assert.notExists(new __helpers.CSSHelp(document).getStyle('*'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
<div class="info">
|
||||
<label for="student-name">Name:</label>
|
||||
<input type="text" name="student-name" id="student-name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input type="email" name="student-email" id="student-email" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
|
||||
<input type="date" name="birth-date" id="birth-date" />
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
<div class="question-block">
|
||||
<p>1</p>
|
||||
<fieldset class="question" name="html-question-one">
|
||||
<legend>
|
||||
The legend element represents a caption for the content of its
|
||||
parent fieldset element
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q1-a1">
|
||||
<input type="radio" id="q1-a1" name="q1" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q1-a2">
|
||||
<input type="radio" id="q1-a2" name="q1" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<p>2</p>
|
||||
<fieldset class="question" name="html-question-two">
|
||||
<legend>
|
||||
A label element nesting an input element is required to have a
|
||||
for attribute with the same value as the input's id
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q2-a1">
|
||||
<input type="radio" id="q2-a1" name="q2" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q2-a2">
|
||||
<input type="radio" id="q2-a2" name="q2" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
<div class="formrow">
|
||||
<div class="question-block">
|
||||
<label for="customer">Are you a frontend developer?</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<select name="customer" id="customer" required>
|
||||
<option value="">Select an option</option>
|
||||
<option value="yes">Yes</option>
|
||||
<option value="no">No</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<label for="css-questions">Do you have any questions:</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<textarea id="css-questions" name="css-questions" rows="5" cols="24">
|
||||
Who is flexbox...
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
<footer>
|
||||
<address>
|
||||
<a href="https://freecodecamp.org">freeCodeCamp</a><br />
|
||||
San Francisco<br />
|
||||
California<br />
|
||||
USA
|
||||
</address>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
--fcc-editable-region--
|
||||
* {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
--fcc-editable-region--
|
||||
|
||||
body {
|
||||
background: #f5f6f7;
|
||||
color: #1b1b32;
|
||||
font-family: Helvetica;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: #1b1b32;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width: max(100px, 18vw);
|
||||
background-color: #0a0a23;
|
||||
aspect-ratio: 35 / 4;
|
||||
padding: 0.4rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #f1be32;
|
||||
font-size: min(5vw, 1.2em);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
nav {
|
||||
width: 50%;
|
||||
max-width: 300px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
nav > ul {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
padding-inline-start: 0;
|
||||
margin-block: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
nav > ul > li {
|
||||
color: #dfdfe2;
|
||||
margin: 0 0.2rem;
|
||||
padding: 0.2rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
nav > ul > li:hover {
|
||||
background-color: #dfdfe2;
|
||||
color: #1b1b32;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
li > a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
main {
|
||||
padding-top: 50px;
|
||||
}
|
||||
|
||||
section {
|
||||
width: 80%;
|
||||
margin: 0 auto 10px auto;
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
font-family: Verdana, Tahoma;
|
||||
}
|
||||
|
||||
h2 {
|
||||
border-bottom: 4px solid #dfdfe2;
|
||||
margin-top: 0px;
|
||||
padding-top: 60px;
|
||||
}
|
||||
|
||||
.info {
|
||||
padding: 10px 0 0 5px;
|
||||
}
|
||||
|
||||
.formrow {
|
||||
margin-top: 30px;
|
||||
padding: 0px 15px;
|
||||
}
|
||||
|
||||
input {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.info label, .info input {
|
||||
display: inline-block;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.info input {
|
||||
width: 50%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.info label {
|
||||
width: 10%;
|
||||
min-width: 55px;
|
||||
}
|
||||
|
||||
.question-block {
|
||||
text-align: left;
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 5px;
|
||||
padding-left: 15px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
p::before {
|
||||
content: "Question #";
|
||||
}
|
||||
|
||||
.question {
|
||||
border: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.answers-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
button {
|
||||
display: block;
|
||||
margin: 40px auto;
|
||||
width: 40%;
|
||||
padding: 15px;
|
||||
font-size: 23px;
|
||||
background: #d0d0d5;
|
||||
border: 3px solid #3b3b4f;
|
||||
}
|
||||
|
||||
footer {
|
||||
background-color: #2a2a40;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
footer,
|
||||
footer a {
|
||||
color: #dfdfe2;
|
||||
}
|
||||
|
||||
address {
|
||||
text-align: center;
|
||||
padding: 0.3em;
|
||||
}
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
```
|
||||
@ -0,0 +1,689 @@
|
||||
---
|
||||
id: 6148e5aeb102e3142de026a2
|
||||
title: Part 67
|
||||
challengeType: 0
|
||||
dashedName: part-67
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Finally, the navigation accessibility can be improved with providing keyboard shortcuts.
|
||||
|
||||
The `accesskey` attribute accepts a space-separated list of access keys. For example:
|
||||
|
||||
```html
|
||||
<button type="submit" accesskey="s">Submit</button>
|
||||
```
|
||||
|
||||
Give each of the navigation links a single-letter access key.
|
||||
|
||||
_Note: It is not always advised to use access keys, but they can be useful_
|
||||
|
||||
Well done. You have completed the _Accessibility Quiz_ practice project.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should give the first `a` element a single-letter `accesskey`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('a')?.[0]?.getAttribute('accesskey')?.length, 1);
|
||||
```
|
||||
|
||||
You should give the second `a` element a single-letter `accesskey`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('a')?.[1]?.getAttribute('accesskey')?.length, 1);
|
||||
```
|
||||
|
||||
You should give the third `a` element a single-letter `accesskey`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('a')?.[2]?.getAttribute('accesskey')?.length, 1);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
--fcc-editable-region--
|
||||
<ul>
|
||||
<li><a href="#student-info">INFO</a></li>
|
||||
<li><a href="#html-questions">HTML</a></li>
|
||||
<li><a href="#css-questions">CSS</a></li>
|
||||
</ul>
|
||||
--fcc-editable-region--
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
<div class="info">
|
||||
<label for="student-name">Name:</label>
|
||||
<input type="text" name="student-name" id="student-name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input type="email" name="student-email" id="student-email" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
|
||||
<input type="date" name="birth-date" id="birth-date" />
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
<div class="question-block">
|
||||
<p>1</p>
|
||||
<fieldset class="question" name="html-question-one">
|
||||
<legend>
|
||||
The legend element represents a caption for the content of its
|
||||
parent fieldset element
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q1-a1">
|
||||
<input type="radio" id="q1-a1" name="q1" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q1-a2">
|
||||
<input type="radio" id="q1-a2" name="q1" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<p>2</p>
|
||||
<fieldset class="question" name="html-question-two">
|
||||
<legend>
|
||||
A label element nesting an input element is required to have a
|
||||
for attribute with the same value as the input's id
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q2-a1">
|
||||
<input type="radio" id="q2-a1" name="q2" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q2-a2">
|
||||
<input type="radio" id="q2-a2" name="q2" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
<div class="formrow">
|
||||
<div class="question-block">
|
||||
<label for="customer">Are you a frontend developer?</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<select name="customer" id="customer" required>
|
||||
<option value="">Select an option</option>
|
||||
<option value="yes">Yes</option>
|
||||
<option value="no">No</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<label for="css-questions">Do you have any questions:</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<textarea id="css-questions" name="css-questions" rows="5" cols="24">
|
||||
Who is flexbox...
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
<footer>
|
||||
<address>
|
||||
<a href="https://freecodecamp.org">freeCodeCamp</a><br />
|
||||
San Francisco<br />
|
||||
California<br />
|
||||
USA
|
||||
</address>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
```css
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
* {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background: #f5f6f7;
|
||||
color: #1b1b32;
|
||||
font-family: Helvetica;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
background-color: #1b1b32;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width: max(100px, 18vw);
|
||||
background-color: #0a0a23;
|
||||
aspect-ratio: 35 / 4;
|
||||
padding: 0.4rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #f1be32;
|
||||
font-size: min(5vw, 1.2em);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
nav {
|
||||
width: 50%;
|
||||
max-width: 300px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
nav > ul {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
padding-inline-start: 0;
|
||||
margin-block: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
nav > ul > li {
|
||||
color: #dfdfe2;
|
||||
margin: 0 0.2rem;
|
||||
padding: 0.2rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
nav > ul > li:hover {
|
||||
background-color: #dfdfe2;
|
||||
color: #1b1b32;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
li > a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
main {
|
||||
padding-top: 50px;
|
||||
}
|
||||
|
||||
section {
|
||||
width: 80%;
|
||||
margin: 0 auto 10px auto;
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
font-family: Verdana, Tahoma;
|
||||
}
|
||||
|
||||
h2 {
|
||||
border-bottom: 4px solid #dfdfe2;
|
||||
margin-top: 0px;
|
||||
padding-top: 60px;
|
||||
}
|
||||
|
||||
.info {
|
||||
padding: 10px 0 0 5px;
|
||||
}
|
||||
|
||||
.formrow {
|
||||
margin-top: 30px;
|
||||
padding: 0px 15px;
|
||||
}
|
||||
|
||||
input {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.info label, .info input {
|
||||
display: inline-block;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.info input {
|
||||
width: 50%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.info label {
|
||||
width: 10%;
|
||||
min-width: 55px;
|
||||
}
|
||||
|
||||
.question-block {
|
||||
text-align: left;
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 5px;
|
||||
padding-left: 15px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
p::before {
|
||||
content: "Question #";
|
||||
}
|
||||
|
||||
.question {
|
||||
border: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.answers-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
button {
|
||||
display: block;
|
||||
margin: 40px auto;
|
||||
width: 40%;
|
||||
padding: 15px;
|
||||
font-size: 23px;
|
||||
background: #d0d0d5;
|
||||
border: 3px solid #3b3b4f;
|
||||
}
|
||||
|
||||
footer {
|
||||
background-color: #2a2a40;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
footer,
|
||||
footer a {
|
||||
color: #dfdfe2;
|
||||
}
|
||||
|
||||
address {
|
||||
text-align: center;
|
||||
padding: 0.3em;
|
||||
}
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
## --solutions--
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
|
||||
<title>freeCodeCamp: Accessibility Quiz</title>
|
||||
<link rel="stylesheet" href="styles.css" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<header>
|
||||
<img src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" id="logo" alt="freeCodeCamp logo" />
|
||||
<h1>HTML/CSS Quiz</h1>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href="#student-info" accesskey="i">INFO</a></li>
|
||||
<li><a href="#html-questions" accesskey="h">HTML</a></li>
|
||||
<li><a href="#css-questions" accesskey="c">CSS</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
|
||||
<section role="region" aria-labelledby="student-info">
|
||||
<h2 id="student-info">Student Info</h2>
|
||||
|
||||
<div class="info">
|
||||
<label for="student-name">Name:</label>
|
||||
<input type="text" name="student-name" id="student-name" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="student-email">Email:</label>
|
||||
<input type="email" name="student-email" id="student-email" />
|
||||
</div>
|
||||
<div class="info">
|
||||
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span>:</label>
|
||||
<input type="date" id="birth-date" name="birth-date" />
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="html-questions">
|
||||
<h2 id="html-questions">HTML</h2>
|
||||
<div class="question-block">
|
||||
<p>1</p>
|
||||
<fieldset class="question" name="html-question-one">
|
||||
<legend>
|
||||
The legend element represents a caption for the content of its
|
||||
parent fieldset element
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q1-a1">
|
||||
<input type="radio" id="q1-a1" name="q1" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q1-a2">
|
||||
<input type="radio" id="q1-a2" name="q1" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<p>2</p>
|
||||
<fieldset class="question" name="html-question-two">
|
||||
<legend>
|
||||
A label element nesting an input element is required to have a
|
||||
for attribute with the same value as the input's id
|
||||
</legend>
|
||||
<ul class="answers-list">
|
||||
<li>
|
||||
<label for="q2-a1">
|
||||
<input type="radio" id="q2-a1" name="q2" value="true" />
|
||||
True
|
||||
</label>
|
||||
</li>
|
||||
<li>
|
||||
<label for="q2-a2">
|
||||
<input type="radio" id="q2-a2" name="q2" value="false" />
|
||||
False
|
||||
</label>
|
||||
</li>
|
||||
</ul>
|
||||
</fieldset>
|
||||
</div>
|
||||
</section>
|
||||
<section role="region" aria-labelledby="css-questions">
|
||||
<h2 id="css-questions">CSS</h2>
|
||||
<div class="formrow">
|
||||
<div class="question-block">
|
||||
<label for="customer">Are you an frontend developer?</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<select name="customer" id="customer" required>
|
||||
<option value="">Select an option</option>
|
||||
<option value="yes">Yes</option>
|
||||
<option value="no">No</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="question-block">
|
||||
<label for="css-question">Do you have any questions:</label>
|
||||
</div>
|
||||
<div class="answer">
|
||||
<textarea id="css-question" name="css-question" rows="5" cols="24">
|
||||
Who is flexbox...
|
||||
</textarea>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</main>
|
||||
<footer>
|
||||
<address>
|
||||
<a href="https://www.freecodecamp.org">freeCodeCamp</a><br />
|
||||
San Francisco<br />
|
||||
California<br />
|
||||
USA
|
||||
</address>
|
||||
</footer>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
```
|
||||
|
||||
```css
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
* {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
background: #f5f6f7;
|
||||
color: #1b1b32;
|
||||
font-family: Helvetica;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
header {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
position: fixed;
|
||||
background-color: #1b1b32;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
#logo {
|
||||
width: max(100px, 18vw);
|
||||
aspect-ratio: 35 / 4;
|
||||
max-height: 100%;
|
||||
background-color: #0a0a23;
|
||||
padding: 0.4rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
font-size: min(5vw, 1.2em);
|
||||
color: #f1be32;
|
||||
}
|
||||
|
||||
nav {
|
||||
width: 50%;
|
||||
max-width: 300px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
nav > ul {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
padding-inline-start: 0;
|
||||
margin-block: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
nav > ul > li {
|
||||
display: block;
|
||||
margin: 0 0.2rem;
|
||||
color: #dfdfe2;
|
||||
padding: 0.2rem;
|
||||
}
|
||||
|
||||
nav > ul > li:hover {
|
||||
background-color: #dfdfe2;
|
||||
color: #1b1b32;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
li > a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
main {
|
||||
padding-top: 50px;
|
||||
}
|
||||
|
||||
section {
|
||||
width: 80%;
|
||||
margin: 0px auto 10px auto;
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2 {
|
||||
font-family: Verdana, Tahoma;
|
||||
}
|
||||
|
||||
h2 {
|
||||
border-bottom: 4px solid #dfdfe2;
|
||||
margin-top: 0px;
|
||||
padding-top: 60px;
|
||||
}
|
||||
|
||||
|
||||
.info {
|
||||
margin: 0 auto;
|
||||
padding: 10px 0 0 5px;
|
||||
}
|
||||
.formrow {
|
||||
margin-top: 30px;
|
||||
padding: 0px 15px;
|
||||
}
|
||||
|
||||
input {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.info label,
|
||||
.info input {
|
||||
display: inline-block;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.info label {
|
||||
width: 10%;
|
||||
min-width: 55px;
|
||||
}
|
||||
|
||||
.info input {
|
||||
width: 50%;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.question-block {
|
||||
text-align: left;
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 5px;
|
||||
padding-left: 15px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
p::before {
|
||||
content: "Question #";
|
||||
}
|
||||
|
||||
.question {
|
||||
border: none;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.answers-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
button {
|
||||
display: block;
|
||||
margin: 40px auto;
|
||||
width: 40%;
|
||||
padding: 15px;
|
||||
font-size: 23px;
|
||||
background: #d0d0d5;
|
||||
border: 3px solid #3b3b4f;
|
||||
}
|
||||
|
||||
footer {
|
||||
background-color: #2a2a40;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
footer,
|
||||
footer a {
|
||||
color: #dfdfe2;
|
||||
}
|
||||
|
||||
address {
|
||||
text-align: center;
|
||||
padding: 0.3em;
|
||||
}
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
```
|
||||
Reference in New Issue
Block a user