mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-03-06 06:39:18 -05:00
chore(i18n,learn): processed translations (#45711)
This commit is contained in:
camperbot
@@ -21,7 +21,7 @@ Por ejemplo, si creamos una variable `const firstName = "Ada"`, podríamos averi
|
||||
|
||||
# --instructions--
|
||||
|
||||
Usa la propiedad `.length` para contar el número de caracteres en la variable `lastName` y asignarla a `lastNameLength`.
|
||||
Utilice la propiedad `.length` para establecer `lastNameLength` al número de caracteres en `lastName`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 5e44412c903586ffb414c94c
|
||||
title: Arithmetic Formatter
|
||||
title: Formateador aritmético
|
||||
challengeType: 10
|
||||
forumTopicId: 462359
|
||||
dashedName: arithmetic-formatter
|
||||
@@ -8,25 +8,82 @@ dashedName: arithmetic-formatter
|
||||
|
||||
# --description--
|
||||
|
||||
Create a function that receives a list of strings that are arithmetic problems and returns the problems arranged vertically and side-by-side.
|
||||
Estarás [trabajando en este proyecto con nuestro código inicial de Replit](https://replit.com/github/freeCodeCamp/boilerplate-arithmetic-formatter).
|
||||
|
||||
You can access [the full project description and starter code on Replit](https://replit.com/github/freeCodeCamp/boilerplate-arithmetic-formatter).
|
||||
# --instructions--
|
||||
|
||||
After going to that link, fork the project. Once you complete the project based on the instructions in 'README.md', submit your project link below.
|
||||
Los estudiantes de primaria suelen colocar los problemas aritméticos en vertical para facilitar su resolución. Por ejemplo, "235 + 52" se convierte a:
|
||||
|
||||
We are still developing the interactive instructional part of the Python curriculum. For now, here are some videos on the freeCodeCamp.org YouTube channel that will teach you everything you need to know to complete this project:
|
||||
```py
|
||||
235
|
||||
+ 52
|
||||
-----
|
||||
```
|
||||
|
||||
<ul> <li>
|
||||
<a href='https://www.freecodecamp.org/news/python-for-everybody/'>Python for Everybody Video Course</a> (14 hours)
|
||||
</li>
|
||||
<li>
|
||||
<a href='https://www.freecodecamp.org/news/learn-python-basics-in-depth-video-course/'>Learn Python Video Course</a> (2 hours)
|
||||
</li>
|
||||
<ul>
|
||||
Crea una función que reciba una lista de cadenas que sean problemas aritméticos y devuelva los problemas ordenados verticalmente y uno al lado del otro. La función debe tomar opcionalmente un segundo argumento. Cuando el segundo argumento se establezca como `True`, se deberán mostrar las respuestas.
|
||||
|
||||
## Ejemplo
|
||||
|
||||
Llamando a la función:
|
||||
|
||||
```py
|
||||
arithmetic_arranger(["32 + 698", "3801 - 2", "45 + 43", "123 + 49"])
|
||||
```
|
||||
|
||||
Resultado:
|
||||
|
||||
```py
|
||||
32 3801 45 123
|
||||
+ 698 - 2 + 43 + 49
|
||||
----- ------ ---- -----
|
||||
```
|
||||
|
||||
Llamando a la función:
|
||||
|
||||
```py
|
||||
arithmetic_arranger(["32 + 8", "1 - 3801", "9999 + 9999", "523 - 49"], True)
|
||||
```
|
||||
|
||||
Resultado:
|
||||
|
||||
```py
|
||||
32 1 9999 523
|
||||
+ 8 - 3801 + 9999 - 49
|
||||
---- ------ ------ -----
|
||||
40 -3800 19998 474
|
||||
```
|
||||
|
||||
## Reglas
|
||||
|
||||
La función devolverá la conversión correcta si los problemas suministrados están correctamente formateados, de lo contrario, **devolverá** una **cadena** que describe un error significativo para el usuario.
|
||||
|
||||
|
||||
- Situaciones que devolverán un error:
|
||||
- Si hay **demasiados problemas** suministrados a la función. El límite es **cinco**, cualquier cosa más regresará: `Error: Too many problems.`
|
||||
- Los operadores apropiados que la función aceptará son **suma** y **resta**. La multiplicación y la división devolverán un error. Otros operadores que no se mencionan en este punto no tendrán que ser probados. El error devuelto será: `Error: Operator must be '+' or '-'.`
|
||||
- Cada número (operando) debe contener sólo dígitos. De lo contrario, la función devolverá: `Error: Numbers must only contain digits.`
|
||||
- Cada operando (también conocido como número en cada lado del operador) tiene un máximo de cuatro dígitos de ancho. De lo contrario, la cadena de error devuelta será: `Error: Numbers cannot be more than four digits.`
|
||||
- Si el usuario proporcionó el formato correcto de los problemas, la conversión que devuelva seguirá estas reglas:
|
||||
- Debe haber un solo espacio entre el operador y el más largo de los dos operandos, el operador estará en la misma línea que el segundo operando, ambos operandos estarán en el mismo orden proporcionado (el primero será el superior y el segundo el inferior.
|
||||
- Los números deben estar alineados a la derecha.
|
||||
- Debe haber cuatro espacios entre cada problema.
|
||||
- Debe haber guiones en la parte inferior de cada problema. Los guiones deben recorrer toda la longitud de cada problema individualmente. (El ejemplo anterior muestra el aspecto que debe tener.)
|
||||
|
||||
## Desarrollo
|
||||
|
||||
Escribe tu código en `arithmetic_arranger.py`. Durante el desarrollo de tu programa puedes utilizar `main.py` para probar el funcionamiento de tu función `arithmetic_arranger()`. Haz clic en el botón "run" y se ejecutará `main.py`.
|
||||
|
||||
## Pruebas
|
||||
|
||||
Las pruebas unitarias para este proyecto están en `test_module.py`. Ejecutamos las pruebas de `test_module.py` a `main.py` para tu conveniencia. Las pruebas se ejecutarán automáticamente cada vez que pulses el botón "run". También puedes ejecutar las pruebas introduciendo `pytest` en la consola.
|
||||
|
||||
## Envío
|
||||
|
||||
Copia el enlace de tu proyecto y envíalo a freeCodeCamp.
|
||||
|
||||
# --hints--
|
||||
|
||||
It should correctly format an arithmetic problem and pass all tests.
|
||||
Debe formatear correctamente un problema aritmético y pasar todas las pruebas.
|
||||
|
||||
```js
|
||||
|
||||
|
||||
@@ -0,0 +1,102 @@
|
||||
---
|
||||
id: 614090d5a22b6f0a5a6b464c
|
||||
title: Step 13
|
||||
challengeType: 0
|
||||
dashedName: step-13
|
||||
---
|
||||
|
||||
<!-- TODO: I purposefully added the `nav` styles without Camper input -->
|
||||
|
||||
# --description--
|
||||
|
||||
Seleziona gli elementi lista non ordinata dentro gli elementi `nav`, e usa _Flexbox_ per distanziare uniformemente gli elementi figli.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresi usare il selettore `nav > ul`.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('nav > ul'));
|
||||
```
|
||||
|
||||
Dovresti dare agli elementi `nav > ul` una proprietà `display` con valore `flex`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.display, 'flex');
|
||||
```
|
||||
|
||||
Dovresti dare agli elementi `nav > ul` una proprietà `justify-content` con un valore di `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>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: 614394fb41985e0d2012a93e
|
||||
title: Step 24
|
||||
challengeType: 0
|
||||
dashedName: step-24
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Dentro l'elemento `span`, aggiungi il testo `(Date of Birth)`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti dare all'elemento `span` il testo `(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>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,200 @@
|
||||
---
|
||||
id: 614396f7ae83f20ea6f9f4b3
|
||||
title: Step 26
|
||||
challengeType: 0
|
||||
dashedName: step-26
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Dentro il secondo elemento `section`, aggiungi due elementi `div` con una classe di `question-block`.
|
||||
|
||||
Poi, dentro ogni elemento `div.question-block`, aggiungi un elemento `p` con un testo di numeri crescenti, iniziando a `1`, e un elemento `fieldset` con una classe di `question`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti annidare due elementi `div` dentro il secondo elemento `section`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('section:nth-of-type(2) > div')?.length, 2);
|
||||
```
|
||||
|
||||
Dovresti dare al primo elemento `div` una classe di `question-block`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('section:nth-of-type(2) > div')?.[0]?.className, 'question-block');
|
||||
```
|
||||
|
||||
Dovresti dare al secondo elemento `div` una classe di `question-block`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('section:nth-of-type(2) > div')?.[1]?.className, 'question-block');
|
||||
```
|
||||
|
||||
Dovresti annidare un elemento `p` dentro ogni elemento `div.question-block`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > p')?.length, 2);
|
||||
```
|
||||
|
||||
Dovresti dare al primo elemento `p` un testo di `1`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > p')?.[0]?.textContent, '1');
|
||||
```
|
||||
|
||||
Dovresti dare al secondo elemento `p` un testo di `2`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > p')?.[1]?.textContent, '2');
|
||||
```
|
||||
|
||||
Dovresti annidare un elemento `fieldset` dentro ogni elemento `div.question-block`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > fieldset')?.length, 2);
|
||||
```
|
||||
|
||||
Dovresti inserire il primo elemento `fieldset` dopo il primo elemento `p`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('section:nth-of-type(2) > div.question-block > p + fieldset'));
|
||||
```
|
||||
|
||||
Dovresti inserire il secondo elemento `fieldset` dopo il secondo elemento `p`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('section:nth-of-type(2) > div.question-block:nth-of-type(2) > p + fieldset'));
|
||||
```
|
||||
|
||||
Dovresti dare al primo elemento `fieldset` una classe di `question`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > fieldset')?.[0]?.className, 'question');
|
||||
```
|
||||
|
||||
Dovresti dare al secondo elemento `fieldset` una classe di `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>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,224 @@
|
||||
---
|
||||
id: 6145eb5f08a38a0786c7a80c
|
||||
title: Step 32
|
||||
challengeType: 0
|
||||
dashedName: step-32
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Se clicchi sugli input radio, potresti notare che entrambi gli input dentro uno stesso fieldset true/false possono essere selezionati contemporaneamente.
|
||||
|
||||
Raggruppa gli input pertinenti assieme in maniera tale che un solo input di ogni coppia possa essere selezionato in ogni momento.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti dare al primo `input` un attributo `name`.
|
||||
|
||||
```js
|
||||
assert.notEmpty(document.querySelectorAll('ul.answers-list > li > label > input')?.[0]?.name);
|
||||
```
|
||||
|
||||
Dovresti dare al secondo `input` un attributo `name`.
|
||||
|
||||
```js
|
||||
assert.notEmpty(document.querySelectorAll('ul.answers-list > li > label > input')?.[1]?.name);
|
||||
```
|
||||
|
||||
Dovresti dare al terzo `input` un attributo `name`.
|
||||
|
||||
```js
|
||||
assert.notEmpty(document.querySelectorAll('ul.answers-list > li > label > input')?.[2]?.name);
|
||||
```
|
||||
|
||||
Dovresti dare al quarto `input` un attributo `nome`.
|
||||
|
||||
```js
|
||||
assert.notEmpty(document.querySelectorAll('ul.answers-list > li > label > input')?.[3]?.name);
|
||||
```
|
||||
|
||||
Dovresti dare al secondo `input` un attributo `name` corrispondente all'attributo `name` del primo `input`.
|
||||
|
||||
```js
|
||||
const i = (n) => document.querySelectorAll('ul.answers-list > li > label > input')?.[n]?.name;
|
||||
assert.equal(i(1), i(0));
|
||||
```
|
||||
|
||||
Dovresti dare al quarto `input` un attributo `name` corrispondente all'attributo `name` del terzo `input`.
|
||||
|
||||
```js
|
||||
const i = (n) => document.querySelectorAll('ul.answers-list > li > label > input')?.[n]?.name;
|
||||
assert.equal(i(3), i(2));
|
||||
```
|
||||
|
||||
Dovresti dare diversi attributi `name` al primo e al terzo `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>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: Step 33
|
||||
challengeType: 0
|
||||
dashedName: step-33
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Per evitare inutili ripetizioni, seleziona lo pseudo-elemento `before` dell'elemento `p`, e dagli una proprietà `content` di `Question #`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti usare il selettore `p::before`.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('p::before'));
|
||||
```
|
||||
|
||||
Dovresti dare allo pseudo-element`p::before` una proprietà `content` di `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>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: Step 34
|
||||
challengeType: 0
|
||||
dashedName: step-34
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
La sezione finale di questo quiz conterrà un menu a discesa e una casella di testo.
|
||||
|
||||
Inizia annidando un `div` con un `class` di `formrow`, e annida quattro elementi `div` all'interno di esso, alternando i loro attributi `class` con `question-block` e `answer`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti aggiungere un elemento `div` all'interno dell'ultimo elemento `section`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('section:nth-of-type(3) > div'));
|
||||
```
|
||||
|
||||
Dovresti dare al primo `div` una `class` di `formrow`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('section:nth-of-type(3) > div')?.className, 'formrow');
|
||||
```
|
||||
|
||||
Dovresti posizionare `div.formrow` dopo l'elemento `h2`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('section:nth-of-type(3) > h2 + div.formrow'));
|
||||
```
|
||||
|
||||
Dovresti annidare quattro elementi `div` all'interno di `div.formrow`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('section:nth-of-type(3) > div.formrow > div')?.length, 4);
|
||||
```
|
||||
|
||||
Dovresti dare al primo `div` annidato una `class` di `question-block`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('section:nth-of-type(3) > div.formrow > div:nth-of-type(1)')?.className, 'question-block');
|
||||
```
|
||||
|
||||
Dovresti dare al secondo `div` annidato una `class` di `answer`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('section:nth-of-type(3) > div.formrow > div:nth-of-type(2)')?.className, 'answer');
|
||||
```
|
||||
|
||||
Dovresti dare al terzo `div` annidato una `class` di `question-block`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('section:nth-of-type(3) > div.formrow > div:nth-of-type(3)')?.className, 'question-block');
|
||||
```
|
||||
|
||||
Dovresti dare al quarto `div ` annidato una `class` di `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>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: Step 35
|
||||
challengeType: 0
|
||||
dashedName: step-35
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
All'interno degli elementi `div.question-block`, annida un elemento `label`, e dai agli elementi `label` del contenuto di testo
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti annidare un elemento `label` all'interno del primo elemento `div.question-block`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelectorAll('.formrow > .question-block')?.[0]?.querySelector('label'));
|
||||
```
|
||||
|
||||
Dovresti annidare un elemento `label` all'interno del secondo elemento `div.question-block`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelectorAll('.formrow > .question-block')?.[1]?.querySelector('label'));
|
||||
```
|
||||
|
||||
Dovresti dare al primo elemento `label` del testo come contenuto.
|
||||
|
||||
```js
|
||||
assert.isAtLeast(document.querySelectorAll('.formrow > .question-block')?.[0]?.querySelector('label')?.textContent?.length, 1);
|
||||
```
|
||||
|
||||
Dovresti dare al secondo elemento `label` del testo come contenuto.
|
||||
|
||||
```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>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: Step 36
|
||||
challengeType: 0
|
||||
dashedName: step-36
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
All'interno del primo elemento `div.answer`, annida un elemento `select` obbligatorio con tre elementi `option`.
|
||||
|
||||
Dai al primo elemento `option` un attributo `value` di `""` e il testo `Select an option`. Dai al secondo elemento `option` un `value` di `Yes`, e il testo `Yes`. Dai al terzo elemento `option` un `value` di `no`, e il testo `No`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti annidare un elemento `select` all'interno del primo elemento `div.answer`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('div.answer > select'));
|
||||
```
|
||||
|
||||
Dovresti nidare tre elementi `option` all'interno dell'elemento `select`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('div.answer > select > option')?.length, 3);
|
||||
```
|
||||
|
||||
Dovresti dare al primo elemento `option` un `value` di `""`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('div.answer > select > option:nth-child(1)')?.value, '');
|
||||
```
|
||||
|
||||
Dovresti dare al primo elemento `option` un contenuto di testo di `Select an option`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('div.answer > select > option:nth-child(1)')?.textContent, 'Select an option');
|
||||
```
|
||||
|
||||
Dovresti dare al secondo elemento `option` un `value` di `yes`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('div.answer > select > option:nth-child(2)')?.value, 'yes');
|
||||
```
|
||||
|
||||
Dovresti dare al secondo elemento `option` un contenuto di testo di `Yes`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('div.answer > select > option:nth-child(2)')?.textContent, 'Yes');
|
||||
```
|
||||
|
||||
Dovresti dare al terzo elemento `option` un `value` di `no`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('div.answer > select > option:nth-child(3)')?.value, 'no');
|
||||
```
|
||||
|
||||
Dovresti dare al terzo elemento `option` un contenuto di testo di `No`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('div.answer > select > option:nth-child(3)')?.textContent, 'No');
|
||||
```
|
||||
|
||||
Dovresti dare `select` un attributo di `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>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: Step 37
|
||||
challengeType: 0
|
||||
dashedName: step-37
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Collega il primo elemento `label` all'elemento `select` e dai all'elelemento `select` un attributo `name`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti dare all' elemento `label` un attributo `for`.
|
||||
|
||||
```js
|
||||
assert.notEmpty(document.querySelector('.question-block > label')?.htmlFor);
|
||||
```
|
||||
|
||||
Dovresti dare all' elemento `select` un attributo `id`.
|
||||
|
||||
```js
|
||||
assert.notEmpty(document.querySelector('.answer > select')?.id);
|
||||
```
|
||||
|
||||
Dovresti dare all'elemento `select` un `id` corrispondente all'attributo `for` dell'elemento `label`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('.answer > select')?.id, document.querySelector('.question-block > label')?.htmlFor);
|
||||
```
|
||||
|
||||
Dovresti dare all'elemento `select` un attributo `name`.
|
||||
|
||||
```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>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: Step 38
|
||||
challengeType: 0
|
||||
dashedName: step-38
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Annida un elemento `textarea` dentro il secondo elemento `div.answer`, e imposta il suo numero di righe e colonne.
|
||||
|
||||
Quindi, dai all'elemento `textarea` del testo segnaposto che descrive una risposta di esempio.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti annidare un elemento `textarea` all'interno del primo elemento `div.answer`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelectorAll('div.answer')?.[1]?.querySelector('textarea'));
|
||||
```
|
||||
|
||||
Dovresti dare a `textarea` un attributo `rows`.
|
||||
|
||||
```js
|
||||
const rows = document.querySelectorAll('div.answer')?.[1]?.querySelector('textarea')?.getAttribute('rows');
|
||||
assert.notEmpty(rows);
|
||||
assert.isNotNaN(Number(rows));
|
||||
```
|
||||
|
||||
Dovresti dare a `textarea` un attributo `cols`.
|
||||
|
||||
```js
|
||||
const cols = document.querySelectorAll('div.answer')?.[1]?.querySelector('textarea')?.getAttribute('cols');
|
||||
assert.notEmpty(cols);
|
||||
assert.isNotNaN(Number(cols));
|
||||
```
|
||||
|
||||
Dovresti dare all'elemento `textarea` un attributo `placeholder` con testo che descrive una risposta di esempio.
|
||||
|
||||
```js
|
||||
assert.notEmpty(document.querySelectorAll('div.answer')?.[1]?.querySelector('textarea')?.getAttribute('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>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,230 @@
|
||||
---
|
||||
id: 6145f685797bd30df9784e8c
|
||||
title: Step 40
|
||||
challengeType: 0
|
||||
dashedName: step-40
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Non dimenticare di dare al tuo `form` un pulsante di invio.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti aggiungere un elemento `button` o `input`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('button') || document.querySelector('main > input') || document.querySelector('form > input'));
|
||||
```
|
||||
|
||||
Dovresti inserire il pulsante di invio all'interno dell'elemento `form`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('form > button') || document.querySelector('form > input'));
|
||||
```
|
||||
|
||||
Dovresti inserire il pulsante di invio dopo l'ultimo elemento `section`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('section:last-of-type + button') || document.querySelector('section:last-of-type + input'));
|
||||
```
|
||||
|
||||
Dovresti dare al pulsante di invio un `type` di `submit`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('button[type="submit"]') || document.querySelector('form > input[type="submit"]'));
|
||||
```
|
||||
|
||||
Il tuo pulsante di invio dovrebbe avere solo il testo `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>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" placeholder="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,215 @@
|
||||
---
|
||||
id: 6145f829ac6a920ebf5797d7
|
||||
title: Step 41
|
||||
challengeType: 0
|
||||
dashedName: step-41
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
I due elementi HTML semantici finali per questo progetto sono gli elementi `footer` e `address`. L'elemento `footer` è un container per una raccolta di contenuti che è correlata alla pagina, e l'elemento `address` è un container per informazioni di contatto per l'autore della pagina.
|
||||
|
||||
Dopo l'elemento `main`, aggiungi un elemento `footer` e annida un elemento `address` all'interno di esso.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti aggiungere un elemento `footer` dopo l'elemento `main`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('main + footer'));
|
||||
```
|
||||
|
||||
Dovresti annidare un elemento `address` all'interno dell'elemento `footer`.
|
||||
|
||||
```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>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" placeholder="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,220 @@
|
||||
---
|
||||
id: 6145f8f8bcd4370f6509078e
|
||||
title: Step 42
|
||||
challengeType: 0
|
||||
dashedName: step-42
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
All'interno dell'elemento `address`, aggiungi quanto segue:
|
||||
|
||||
```html
|
||||
freeCodeCamp<br />
|
||||
San Francisco<br />
|
||||
California<br />
|
||||
USA
|
||||
```
|
||||
|
||||
Puoi visitare, ma potresti non trovare nulla...
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti aggiungere il testo sopra inclusi i tag `<br />` all'elemento `address`.
|
||||
|
||||
```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>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" placeholder="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,229 @@
|
||||
---
|
||||
id: 6145fb5018cb5b100cb2a88c
|
||||
title: Step 43
|
||||
challengeType: 0
|
||||
dashedName: step-43
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
L'elemento `address` non deve contenere una posizione geografica fisica. Può essere utilizzato per fornire un link al soggetto.
|
||||
|
||||
Avvolgi un link attorno al testo `freeCodeCamp` e imposta la sua posizione su `https://freecodecamp.org`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti aggiungere un nuovo elemento `a`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('address > a'));
|
||||
```
|
||||
|
||||
Dovresti dare all'elemento `a` un attributo `href` di `https://freecodecamp.org`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('address > a')?.getAttribute('href'), 'https://freecodecamp.org');
|
||||
```
|
||||
|
||||
Dovresti avvolgere l'elemento `a` intorno al testo esistente `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>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" placeholder="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,256 @@
|
||||
---
|
||||
id: 6145fc3707fc3310c277f5c8
|
||||
title: Step 44
|
||||
challengeType: 0
|
||||
dashedName: step-44
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Torniamo allo styling della pagina. Seleziona gli elementi della lista all'interno della barra di navigazione e dai loro i seguenti stili:
|
||||
|
||||
```css
|
||||
color: #dfdfe2;
|
||||
margin: 0 0.2rem;
|
||||
padding: 0.2rem;
|
||||
display: block;
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti usare il selettore `nav li` o `nav > ul > li`.
|
||||
|
||||
```js
|
||||
const gs = (s) => new __helpers.CSSHelp(document).getStyle(s);
|
||||
assert.exists(gs('nav li') || gs('nav > ul > li'));
|
||||
```
|
||||
|
||||
Dovresti dare agli elementi `li` un `color` di `#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)');
|
||||
```
|
||||
|
||||
Dovresti dare agli elementi dell'etichetta `li` un `margin` di `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');
|
||||
```
|
||||
|
||||
Dovresti dare agli elementi `li` un `padding` di `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');
|
||||
```
|
||||
|
||||
Dovresti dare agli elementi `li` un `display` di `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>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" placeholder="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,260 @@
|
||||
---
|
||||
id: 614796cb8086be482d60e0ac
|
||||
title: Step 45
|
||||
challengeType: 0
|
||||
dashedName: step-45
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Sul tema dell'accessibilità visiva, il contrasto tra gli elementi è un fattore chiave. Ad esempio, il contrasto tra il testo e lo sfondo di un titolo dovrebbe essere almeno 4.5:1.
|
||||
|
||||
Cambia il colore del testo di tutti gli elementi di ancoraggio dentro gli elementi della lista in qualcosa con un rapporto di contrasto di almeno 7:1.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresi usare il selettore `li > a`.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('li > a'));
|
||||
```
|
||||
|
||||
Dovresti dare all' elemento `a` un attributo `color`.
|
||||
|
||||
```js
|
||||
assert.notEmpty(new __helpers.CSSHelp(document).getStyle('li > a')?.color);
|
||||
```
|
||||
|
||||
Dovresti dare alla proprietà `color` un contrasto con lo sfondo di almeno 7:1. _Suggerimento: userei `#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>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" placeholder="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,260 @@
|
||||
---
|
||||
id: 6147a14ef5668b5881ef2297
|
||||
title: Step 46
|
||||
challengeType: 0
|
||||
dashedName: step-46
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Per rendere i pulsanti di navigazione più simili a pulsanti tipici, rimuovi la sottolineatura dai tag di ancoraggio.
|
||||
|
||||
Quindi, crea un nuovo selettore mirato agli elementi dell'elenco di navigazione in modo che quando il cursore si posiziona su di essi, il colore di sfondo e il colore del testo vengano scambiati e il cursore diventi un puntatore.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti usare il selettore `li > a` per impostare `text-decoration` su `none`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('li > a')?.textDecoration, 'none');
|
||||
```
|
||||
|
||||
Dovresti usare il selettore `nav > ul > li:hover` o `nav li:hover` per definire lo stile degli elementi al passaggio del mouse.
|
||||
|
||||
```js
|
||||
const gs = (s) => new __helpers.CSSHelp(document).getStyle(s);
|
||||
assert.exists(gs('nav > ul > li:hover') || gs('nav li:hover'));
|
||||
```
|
||||
|
||||
Dovresti dare agli elementi `li` un `background-color` di `#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)');
|
||||
```
|
||||
|
||||
Dovresti dare agli elementi `li` un `color` di `#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)');
|
||||
```
|
||||
|
||||
Dovresti dare agli elementi `li` un `cursor` di `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>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" placeholder="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,253 @@
|
||||
---
|
||||
id: 614878f7a412310647873015
|
||||
title: Step 47
|
||||
challengeType: 0
|
||||
dashedName: step-47
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Metti in ordine l'elemento `header`, utilizzando _Flexbox_ per mettere spazio tra gli elementi figli e centrarli verticalmente.
|
||||
|
||||
Quindi, fissa l'intestazione `header` in cima al viewport.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti dare agli elementi `header` una proprietà `justify-content` con un valore di `space-between`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.justifyContent, 'space-between');
|
||||
```
|
||||
|
||||
Dovresti dare a `header` un `align-items` di `center`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.alignItems, 'center');
|
||||
```
|
||||
|
||||
Dovresti dare a `header` un `position` di `fixed`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.position, 'fixed');
|
||||
```
|
||||
|
||||
Dovresti dare a `header` un `top` di `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>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" placeholder="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,259 @@
|
||||
---
|
||||
id: 614880dc16070e093e29bc56
|
||||
title: Step 51
|
||||
challengeType: 0
|
||||
dashedName: step-51
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Sostituisci il margine superiore degli elementi `h2` con `60px` di padding superiore.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti dare a `h2` un `margin-top` di `0`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('h2')?.marginTop, '0px');
|
||||
```
|
||||
|
||||
Dovresti dare all'`h2` un `padding-top` di `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>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" placeholder="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,280 @@
|
||||
---
|
||||
id: 614883b6fa720e09fb167de9
|
||||
title: Step 52
|
||||
challengeType: 0
|
||||
dashedName: step-52
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Aggiungi padding in alto e a sinistra degli elementi `.info` e imposta gli altri valori a `0`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti usare il selettore `.info`.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('.info'));
|
||||
```
|
||||
|
||||
Dovresti dare a `.info` un `padding-top` di almeno `1px`.
|
||||
|
||||
```js
|
||||
assert.isAtLeast(Number(new __helpers.CSSHelp(document).getStyle('.info')?.paddingTop?.replace(/\D+/, '')), 1);
|
||||
```
|
||||
|
||||
Dovresti dare a `.info` un `padding-right` di `0`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.info')?.paddingRight, '0px');
|
||||
```
|
||||
|
||||
Dovresti dare a `.info` un `padding-bottom` di `0`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.info')?.paddingBottom, '0px');
|
||||
```
|
||||
|
||||
Dovresti dare a `.info` un `padding-left` di almeno `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>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" placeholder="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,364 @@
|
||||
---
|
||||
id: 614884c1f5d6f30ab3d78cde
|
||||
title: Step 53
|
||||
challengeType: 0
|
||||
dashedName: step-53
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Di il margine superiore agli elementi `.formrow` e padding a sinistra e a destra. Gli altri valori di padding dovrebbero essere `0`.
|
||||
|
||||
Quindi, aumenta la dimensione del carattere per tutti gli elementi `input`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti usare il selettore `.formrow` per selezionare l'elemento `.formrow`.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('.formrow'));
|
||||
```
|
||||
|
||||
Dovresti dare a `.formrow` un `margin-top` di almeno `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);
|
||||
```
|
||||
|
||||
Dovresti dare a `.formrow` un `padding-top` di `0`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.formrow')?.paddingTop, '0px');
|
||||
```
|
||||
|
||||
Dovresti assegnare a `.formrow` un `padding-right` di almeno `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);
|
||||
```
|
||||
|
||||
Dovresti dare a `.formrow` un `padding-bottom` di `0`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.formrow')?.paddingBottom, '0px');
|
||||
```
|
||||
|
||||
Dovresti dare a `.formrow` un `padding-left` di almeno `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);
|
||||
```
|
||||
|
||||
Dovresti usare un selettore `input` per selezionare gli elementi `input`.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('input'));
|
||||
```
|
||||
|
||||
Dovresti dare all'`input` un `font-size` maggiore di `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>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" placeholder="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,291 @@
|
||||
---
|
||||
id: 6148d99cdc7acd0c519862cb
|
||||
title: Step 55
|
||||
challengeType: 0
|
||||
dashedName: step-55
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Scegli come target tutti gli elementi `label` all'interno di elementi `.info` e imposta la loro `width` su `10%` e fallo in modo che non occupino meno di `55px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti usare il selettore `.info` o `.info > label`.
|
||||
|
||||
```js
|
||||
const gs = (s) => new __helpers.CSSHelp(document).getStyle(s);
|
||||
assert.exists(gs('.info label') || gs('.info > label'));
|
||||
```
|
||||
|
||||
Dovresti dare agli elementi `label` una `larghezza` di `10%`.
|
||||
|
||||
```js
|
||||
const gs = (s) => new __helpers.CSSHelp(document).getStyle(s)?.width;
|
||||
const width = gs('.info label') || gs('.info > label');
|
||||
assert.equal(width, '10%');
|
||||
```
|
||||
|
||||
Dovresti dare agli elementi `label` una `min-width` di `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>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" placeholder="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,306 @@
|
||||
---
|
||||
id: 6148da157cc0bd0d06df5c0a
|
||||
title: Step 56
|
||||
challengeType: 0
|
||||
dashedName: step-56
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Per allineare le caselle di `input` tra loro, imposta la proprietà `display` a `inline-block` per tutti gli elementi `input` e `label` all'interno degli elementi `.info`.
|
||||
|
||||
In più, allinea il testo a destra.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti usare un selettore `.info > label, .info > input` o `.info label, .info input`.
|
||||
|
||||
```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'));
|
||||
```
|
||||
|
||||
Dovresti dare agli elementi `input` e `label` una proprietà `display` di `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');
|
||||
```
|
||||
|
||||
Dovresti dare agli elementi `input` e `label` una proprietà `text-align` di `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');
|
||||
```
|
||||
|
||||
Dovresti impostare la prorpietà `text-align: right` prima della regola `.info input`.
|
||||
|
||||
```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>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" placeholder="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,323 @@
|
||||
---
|
||||
id: 6148dc095264000dce348bf5
|
||||
title: Step 57
|
||||
challengeType: 0
|
||||
dashedName: step-57
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Per rendere più puliti gli elementi `.question-block`, dagli le seguenti proprietà CSS:
|
||||
|
||||
```css
|
||||
text-align: left;
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-top: 20px;
|
||||
padding-top: 5px;
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti usare un selettore`.question-block`.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('.question-block'));
|
||||
```
|
||||
|
||||
Dovresti dare agli elementi `.question-block` una `display` di `block`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.question-block')?.display, 'block');
|
||||
```
|
||||
|
||||
Dovresti dare agli elementi `.question-block` una `width` di `100%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.question-block')?.width, '100%');
|
||||
```
|
||||
|
||||
Dovresti dare agli elementi `.question-block` una `margin-top` di `20px`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.question-block')?.marginTop, '20px');
|
||||
```
|
||||
|
||||
Dovresti dare agli elementi `.question-block` una `padding-top` di `5px`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.question-block')?.paddingTop, '5px');
|
||||
```
|
||||
|
||||
Dovresti dare agli elementi `.question-block` una `text-align` di `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>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" placeholder="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,316 @@
|
||||
---
|
||||
id: 6148dcaaf2e8750e6cb4501a
|
||||
title: Step 58
|
||||
challengeType: 0
|
||||
dashedName: step-58
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Fai apparire gli elementi del paragrafo come una priorità più elevata, con le seguenti proprietà CSS:
|
||||
|
||||
```css
|
||||
margin-top: 5px;
|
||||
padding-left: 15px;
|
||||
font-size: 20px;
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti usare il selettore di elemento `p`.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('p'));
|
||||
```
|
||||
|
||||
Dovresti dare all'elemento `p` un `margin-top` di `5px`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('p')?.marginTop, '5px');
|
||||
```
|
||||
|
||||
Dovresti dare all'elemento `p` un `padding-left` di `15px`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('p')?.paddingLeft, '15px');
|
||||
```
|
||||
|
||||
Dovresti dare all'elemento `p` un `font-size` di `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>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" placeholder="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,312 @@
|
||||
---
|
||||
id: 6148dd31d210990f0fb140f8
|
||||
title: Step 59
|
||||
challengeType: 0
|
||||
dashedName: step-59
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
È utile vedere il bordo predefinito intorno agli elementi `fieldset`, durante lo sviluppo. Tuttavia, potrebbe non essere lo stile che vuoi.
|
||||
|
||||
Rimuovi il bordo e il padding inferiore dagli elementi `.question`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti usare un selettore`.question`.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('.question'));
|
||||
```
|
||||
|
||||
Dovresti dare a `.question` un `border` di `none`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.question')?.borderStyle, 'none');
|
||||
```
|
||||
|
||||
Dovresti dare a `.question` un `padding-bottom` di `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>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" placeholder="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,315 @@
|
||||
---
|
||||
id: 6148defa9c01520fb9d178a0
|
||||
title: Step 60
|
||||
challengeType: 0
|
||||
dashedName: step-60
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Rimuovi lo stile predefinito per gli elementi della lista di `.answers-list`e rimuovi il padding della lista non ordinata.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresi usare il selettore `.answers-list`.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('.answers-list'));
|
||||
```
|
||||
|
||||
Dovresti dare ad `.answers-list` un `list-style` di `none`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.answers-list')?.listStyle, 'none');
|
||||
```
|
||||
|
||||
Dovresti dare a `.answers-list` un `padding` di `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>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" placeholder="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,360 @@
|
||||
---
|
||||
id: 6148dfab9b54c110577de165
|
||||
title: Step 61
|
||||
challengeType: 0
|
||||
dashedName: step-61
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Dai al pulsante di invio un design in stile freeCodeCamp, con le seguenti proprietà CSS:
|
||||
|
||||
```css
|
||||
display: block;
|
||||
margin: 40px auto;
|
||||
width: 40%;
|
||||
padding: 15px;
|
||||
font-size: 23px;
|
||||
background: #d0d0d5;
|
||||
border: 3px solid #3b3b4f;
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti usare il selettore di elemento `button`.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('button'));
|
||||
```
|
||||
|
||||
Dovresti dare a `button` un `display` di `block`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.display, 'block');
|
||||
```
|
||||
|
||||
Dovresti dare al `button` un `margin` di `40px auto`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.margin, '40px auto');
|
||||
```
|
||||
|
||||
Dovresti dare a `button` un `width` di `40%`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.width, '40%');
|
||||
```
|
||||
|
||||
Dovresti dare a `button` un `padding` di `15px`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.padding, '15px');
|
||||
```
|
||||
|
||||
Dovresti dare a `button` un `font-size` di `23px`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.fontSize, '23px');
|
||||
```
|
||||
|
||||
Dovresti dare a `button` un `background` di `#d0d0d5`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.backgroundColor, 'rgb(208, 208, 213)');
|
||||
```
|
||||
|
||||
Dovresti dare a `button` un `border` di `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>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" placeholder="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,336 @@
|
||||
---
|
||||
id: 6148e0bcc13efd10f7d7a6a9
|
||||
title: Step 62
|
||||
challengeType: 0
|
||||
dashedName: step-62
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Imposta il colore di sfondo del `footer` su `#2a2a40` e usa _Flexbox_ per centrare orizzontalmente il testo.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti usare il selettore `footer`.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('footer'));
|
||||
```
|
||||
|
||||
Dovresti dare a `footer` un `background-color` di `#2a2a40`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('footer')?.backgroundColor, 'rgb(42, 42, 64)');
|
||||
```
|
||||
|
||||
Dovresti dare a `footer` una `display` di `flex`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('footer')?.display, 'flex');
|
||||
```
|
||||
|
||||
Dovresti fornire a `footer` un `justify-content` di `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>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" placeholder="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,685 @@
|
||||
---
|
||||
id: 6148e5aeb102e3142de026a2
|
||||
title: Step 67
|
||||
challengeType: 0
|
||||
dashedName: step-67
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Infine, l'accessibilità della navigazione può essere migliorata fornendo scorciatoie da tastiera.
|
||||
|
||||
L'attributo `accesskey` accetta una lista separata da spazi di chiavi di accesso. Ad esempio:
|
||||
|
||||
```html
|
||||
<button type="submit" accesskey="s">Submit</button>
|
||||
```
|
||||
|
||||
Dai a ciascuno dei link di navigazione una chiave di accesso a una sola lettera.
|
||||
|
||||
_Nota: Non è sempre consigliato utilizzare i tasti di accesso, ma possono essere utili_
|
||||
|
||||
Ben fatto. Hai completato il progetto di pratica _Quiz di Accessibilità_.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti dare al primo elemento `a` una `accesskey` a una sola lettera.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('a')?.[0]?.getAttribute('accesskey')?.length, 1);
|
||||
```
|
||||
|
||||
Dovresti dare al secondo elemento `a` una `accesskey` a una sola lettera.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('a')?.[1]?.getAttribute('accesskey')?.length, 1);
|
||||
```
|
||||
|
||||
Dovresti dare al terzo elemento `a` una `accesskey` a una sola lettera.
|
||||
|
||||
```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>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" placeholder="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>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" placeholder="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;
|
||||
}
|
||||
|
||||
```
|
||||
@@ -128,7 +128,7 @@ html {
|
||||
--fcc-editable-region--
|
||||
@media (max-width: 768px) {
|
||||
#piano {
|
||||
width: 335px;
|
||||
width: 358px;
|
||||
}
|
||||
|
||||
.keys {
|
||||
|
||||
@@ -21,7 +21,7 @@ Por exemplo, se nós criássemos uma variável `const firstName = "Ada"`, poder
|
||||
|
||||
# --instructions--
|
||||
|
||||
Use a propriedade `.length` para contar o número de caracteres na variável `lastName` e atribui-la a `lastNameLength`.
|
||||
Use a propriedade `.length` para definir `lastNameLength` como o número de caracteres em `lastName`.
|
||||
|
||||
# --hints--
|
||||
|
||||
|
||||
@@ -0,0 +1,102 @@
|
||||
---
|
||||
id: 614090d5a22b6f0a5a6b464c
|
||||
title: Passo 13
|
||||
challengeType: 0
|
||||
dashedName: step-13
|
||||
---
|
||||
|
||||
<!-- TODO: I purposefully added the `nav` styles without Camper input -->
|
||||
|
||||
# --description--
|
||||
|
||||
Marque os elementos da lista não ordenados dentro dos elementos `nav` e use _Flexbox_ para espaçar igualmente os elementos filhos.
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve usar o seletor `nav > ul`.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('nav > ul'));
|
||||
```
|
||||
|
||||
Você deve dar aos elementos `nav > ul` um `display` de `flex`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.display, 'flex');
|
||||
```
|
||||
|
||||
Você deve dar aos elementos `nav > ul` um `justify-content` de `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>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: 614394fb41985e0d2012a93e
|
||||
title: Passo 24
|
||||
challengeType: 0
|
||||
dashedName: step-24
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Dentro do elemento `span`, adicione o texto `(Date of Birth)`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dê ao elemento `span` o texto `(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>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,200 @@
|
||||
---
|
||||
id: 614396f7ae83f20ea6f9f4b3
|
||||
title: Passo 26
|
||||
challengeType: 0
|
||||
dashedName: step-26
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Dentro do segundo elemento `section`, adicione dois elementos `div` com uma classe `question-block`.
|
||||
|
||||
Agora, dentro de cada `div.question-block`, adicione um elemento `p` com texto de números sendo incrementados, começando em `1`, e um elemento `fieldset` com uma classe de `question`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve aninhar dois elementos `div` dentro do segundo elemento `section`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('section:nth-of-type(2) > div')?.length, 2);
|
||||
```
|
||||
|
||||
Você deve dar ao primeiro elemento `div` uma classe de `question-block`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('section:nth-of-type(2) > div')?.[0]?.className, 'question-block');
|
||||
```
|
||||
|
||||
Você deve dar ao segundo novo elemento `div` uma classe de `question-block`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('section:nth-of-type(2) > div')?.[1]?.className, 'question-block');
|
||||
```
|
||||
|
||||
Você deve colocar um elemento `p` dentro de cada elemento `div.question-block`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > p')?.length, 2);
|
||||
```
|
||||
|
||||
Você deve dar ao primeiro elemento `p` o texto `1`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > p')?.[0]?.textContent, '1');
|
||||
```
|
||||
|
||||
Você deve dar ao segundo elemento `p` o texto `2`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > p')?.[1]?.textContent, '2');
|
||||
```
|
||||
|
||||
Você deve colocar um elemento `fieldset` dentro de cada elemento `div.question-block`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > fieldset')?.length, 2);
|
||||
```
|
||||
|
||||
Você deve posicionar o primeiro elemento `fieldset` depois do primeiro elemento `p`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('section:nth-of-type(2) > div.question-block > p + fieldset'));
|
||||
```
|
||||
|
||||
Você deve posicionar o segundo elemento `fieldset` depois do segundo elemento `p`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('section:nth-of-type(2) > div.question-block:nth-of-type(2) > p + fieldset'));
|
||||
```
|
||||
|
||||
Você deve dar ao primeiro elemento `fieldset` uma classe de `question`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > fieldset')?.[0]?.className, 'question');
|
||||
```
|
||||
|
||||
Você deve dar ao segundo elemento `fieldset` uma classe de `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>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,287 @@
|
||||
---
|
||||
id: 6145e8b5080a5f06bb0223d0
|
||||
title: Passo 31
|
||||
challengeType: 0
|
||||
dashedName: step-31
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Insira um texto nos elementos `label`, de modo que o `input` aninhado em cada um deles venha antes do texto. Em seguida, dê aos elementos `input` um `value` correspondente ao texto.
|
||||
|
||||
O texto deve ser `True` ou `False`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve dar ao primeiro elemento `label` conteúdo de texto.
|
||||
|
||||
```js
|
||||
assert.notEmpty(document.querySelectorAll('ul.answers-list > li > label')?.[0]?.textContent?.trim());
|
||||
```
|
||||
|
||||
Você deve dar ao segundo elemento `label` conteúdo de texto.
|
||||
|
||||
```js
|
||||
assert.notEmpty(document.querySelectorAll('ul.answers-list > li > label')?.[1]?.textContent?.trim());
|
||||
```
|
||||
|
||||
Você deve dar ao terceiro elemento `label` conteúdo de texto.
|
||||
|
||||
```js
|
||||
assert.notEmpty(document.querySelectorAll('ul.answers-list > li > label')?.[2]?.textContent?.trim());
|
||||
```
|
||||
|
||||
Você deve dar ao quarto elemento `label` conteúdo de texto.
|
||||
|
||||
```js
|
||||
assert.notEmpty(document.querySelectorAll('ul.answers-list > li > label')?.[3]?.textContent?.trim());
|
||||
```
|
||||
|
||||
Posicione o primeiro conteúdo de texto nos elementos `label`, de modo que o `input` aninhado em cada um deles venha antes do texto.
|
||||
|
||||
```js
|
||||
assert.match(document.querySelectorAll('ul.answers-list > li > label')?.[0]?.innerHTML, />[\s\S]+[a-zA-Z]/);
|
||||
```
|
||||
|
||||
Posicione o segundo conteúdo de texto nos elementos `label`, de modo que o `input` aninhado em cada um deles venha antes do texto.
|
||||
|
||||
```js
|
||||
assert.match(document.querySelectorAll('ul.answers-list > li > label')?.[1]?.innerHTML, />[\s\S]+[a-zA-Z]/);
|
||||
```
|
||||
|
||||
Posicione o terceiro conteúdo de texto nos elementos `label`, de modo que o `input` aninhado em cada um deles venha antes do texto.
|
||||
|
||||
```js
|
||||
assert.match(document.querySelectorAll('ul.answers-list > li > label')?.[2]?.innerHTML, />[\s\S]+[a-zA-Z]/);
|
||||
```
|
||||
|
||||
Posicione o quarto conteúdo de texto nos elementos `label`, de modo que o `input` aninhado em cada um deles venha antes do texto.
|
||||
|
||||
```js
|
||||
assert.match(document.querySelectorAll('ul.answers-list > li > label')?.[3]?.innerHTML, />[\s\S]+[a-zA-Z]/);
|
||||
```
|
||||
|
||||
Você deve dar ao primeiro `label` o texto `True` ou `False`.
|
||||
|
||||
```js
|
||||
assert.include(['True', 'False'], document.querySelectorAll('ul.answers-list > li > label')?.[0]?.textContent?.trim());
|
||||
```
|
||||
|
||||
Você deve dar ao segundo elemento `label` o texto `True`.
|
||||
|
||||
```js
|
||||
const l = (n) => document.querySelectorAll('ul.answers-list > li > label')?.[n]?.textContent?.trim();
|
||||
assert(l(0) === 'False' ? l(1) === 'True' : true);
|
||||
```
|
||||
|
||||
Você deve dar ao segundo elemento `label` o texto `False`.
|
||||
|
||||
```js
|
||||
const l = (n) => document.querySelectorAll('ul.answers-list > li > label')?.[n]?.textContent?.trim();
|
||||
assert(l(0) === 'True' ? l(1) === 'False' : true);
|
||||
```
|
||||
|
||||
Você deve dar ao terceiro `label` o texto `True` ou `False`.
|
||||
|
||||
```js
|
||||
assert.include(['True', 'False'], document.querySelectorAll('ul.answers-list > li > label')?.[2]?.textContent?.trim());
|
||||
```
|
||||
|
||||
Você deve dar ao quarto elemento `label` o texto `True`.
|
||||
|
||||
```js
|
||||
const l = (n) => document.querySelectorAll('ul.answers-list > li > label')?.[n]?.textContent?.trim();
|
||||
assert(l(2) === 'False' ? l(3) === 'True' : true);
|
||||
```
|
||||
|
||||
Você deve dar ao quarto elemento `label` o texto `False`.
|
||||
|
||||
```js
|
||||
const l = (n) => document.querySelectorAll('ul.answers-list > li > label')?.[n]?.textContent?.trim();
|
||||
assert(l(2) === 'True' ? l(3) === 'False' : true);
|
||||
```
|
||||
|
||||
Você deve dar ao primeiro `input` um `value` correspondente ao `label` do conteúdo de texto.
|
||||
|
||||
```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());
|
||||
```
|
||||
|
||||
Você deve dar ao segundo `input` um `value` correspondente ao `label` do conteúdo de texto.
|
||||
|
||||
```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());
|
||||
```
|
||||
|
||||
Você deve dar ao terceiro `input` um `value` correspondente ao `label` do conteúdo de texto.
|
||||
|
||||
```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());
|
||||
```
|
||||
|
||||
Você deve dar ao quarto `input` um `value` correspondente ao `label` do conteúdo de texto.
|
||||
|
||||
```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>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: Passo 32
|
||||
challengeType: 0
|
||||
dashedName: step-32
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Se você clicar nos botões de opção, poderá notar que ambos dentro do mesmo campo verdadeiro/falso podem ser selecionados ao mesmo tempo.
|
||||
|
||||
Agrupe os inputs relevantes juntos, de modo que apenas um de cada par possa ser selecionado por vez.
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve dar ao primeiro `input` um atributo `name`.
|
||||
|
||||
```js
|
||||
assert.notEmpty(document.querySelectorAll('ul.answers-list > li > label > input')?.[0]?.name);
|
||||
```
|
||||
|
||||
Você deve dar ao segundo `input` um atributo `name`.
|
||||
|
||||
```js
|
||||
assert.notEmpty(document.querySelectorAll('ul.answers-list > li > label > input')?.[1]?.name);
|
||||
```
|
||||
|
||||
Você deve dar ao terceiro `input` um atributo `name`.
|
||||
|
||||
```js
|
||||
assert.notEmpty(document.querySelectorAll('ul.answers-list > li > label > input')?.[2]?.name);
|
||||
```
|
||||
|
||||
Você deve dar ao quarto `input` um atributo `name`.
|
||||
|
||||
```js
|
||||
assert.notEmpty(document.querySelectorAll('ul.answers-list > li > label > input')?.[3]?.name);
|
||||
```
|
||||
|
||||
Você deve dar ao segundo `input` um atributo `name` que corresponda ao atributo `name` do primeiro `input`.
|
||||
|
||||
```js
|
||||
const i = (n) => document.querySelectorAll('ul.answers-list > li > label > input')?.[n]?.name;
|
||||
assert.equal(i(1), i(0));
|
||||
```
|
||||
|
||||
Você deve dar ao quarto `input` um atributo `name` que corresponda ao atributo `name` do terceiro `input`.
|
||||
|
||||
```js
|
||||
const i = (n) => document.querySelectorAll('ul.answers-list > li > label > input')?.[n]?.name;
|
||||
assert.equal(i(3), i(2));
|
||||
```
|
||||
|
||||
Você deve dar atributos diferentes `name` para o primeiro `input` e o terceiro `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>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: Passo 33
|
||||
challengeType: 0
|
||||
dashedName: step-33
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Para prevenir repetição desnecessária, marque o pseudoelemento `before` do elemento `p` e dê a ele uma propriedade `content` de `Question #`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve usar o seletor `p::before`.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('p::before'));
|
||||
```
|
||||
|
||||
Você deve dar ao pseudoelemento `p::before` uma propriedade `content` de `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>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: Passo 34
|
||||
challengeType: 0
|
||||
dashedName: step-34
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
A seção final deste quiz conterá uma lista suspensa e uma caixa de texto.
|
||||
|
||||
Comece aninhando uma `div` com uma `class` de `formrow` e aninhe quatro elementos `div` dentro dela, alternando os atributos `class` delas com `question-block` e `answer`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve adicionar um elemento `div` dentro da `section` final.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('section:nth-of-type(3) > div'));
|
||||
```
|
||||
|
||||
Você deve dar à primeira `div` uma `class` de `formrow`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('section:nth-of-type(3) > div')?.className, 'formrow');
|
||||
```
|
||||
|
||||
Você deve colocar `div.formrow` após o elemento `h2`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('section:nth-of-type(3) > h2 + div.formrow'));
|
||||
```
|
||||
|
||||
Você deve aninhar os elementos `div` dentro da `div.formrow`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('section:nth-of-type(3) > div.formrow > div')?.length, 4);
|
||||
```
|
||||
|
||||
Você deve dar à primeira `div` aninhada uma `class` de `question-block`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('section:nth-of-type(3) > div.formrow > div:nth-of-type(1)')?.className, 'question-block');
|
||||
```
|
||||
|
||||
Você deve dar à segunda `div` aninhada uma `class` de `answer`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('section:nth-of-type(3) > div.formrow > div:nth-of-type(2)')?.className, 'answer');
|
||||
```
|
||||
|
||||
Você deve dar à terceira `div` aninhada uma `class` de `question-block`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('section:nth-of-type(3) > div.formrow > div:nth-of-type(3)')?.className, 'question-block');
|
||||
```
|
||||
|
||||
Você deve dar à quarta `div` aninhada uma `class` de `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>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: Passo 35
|
||||
challengeType: 0
|
||||
dashedName: step-35
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Dentro dos elementos `div.question-block`, aninhe um elemento `label` e dê ao elemento `label` conteúdo de texto
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve aninhar um elemento `label` dentro do primeiro elemento `div.question-block`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelectorAll('.formrow > .question-block')?.[0]?.querySelector('label'));
|
||||
```
|
||||
|
||||
Você deve aninhar um elemento `label` dentro do segundo elemento `div.question-block`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelectorAll('.formrow > .question-block')?.[1]?.querySelector('label'));
|
||||
```
|
||||
|
||||
Você deve dar ao primeiro elemento `label` conteúdo de texto.
|
||||
|
||||
```js
|
||||
assert.isAtLeast(document.querySelectorAll('.formrow > .question-block')?.[0]?.querySelector('label')?.textContent?.length, 1);
|
||||
```
|
||||
|
||||
Você deve dar ao segundo elemento `label` conteúdo de texto.
|
||||
|
||||
```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>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: Passo 36
|
||||
challengeType: 0
|
||||
dashedName: step-36
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Dentro do primeiro elemento `div.answer`, aninhe um elemento `select` requerido com três elementos `option`.
|
||||
|
||||
Dê ao primeiro elemento `option` um `value` de `""` e o texto `Select an option`. Dê ao segundo elemento `option` um `value` de `yes` e o texto `Yes`. Dê ao terceiro elemento `option` um `value` de `no` e o texto `No`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve aninhar um elemento `select` dentro do primeiro elemento `div.answer`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('div.answer > select'));
|
||||
```
|
||||
|
||||
Você deve aninhar três elementos `option` dentro do elemento `select`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelectorAll('div.answer > select > option')?.length, 3);
|
||||
```
|
||||
|
||||
Você deve dar ao primeiro elemento `option` um `value` de `""`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('div.answer > select > option:nth-child(1)')?.value, '');
|
||||
```
|
||||
|
||||
Você deve dar ao primeiro elemento `option` um texto contendo `Select an option`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('div.answer > select > option:nth-child(1)')?.textContent, 'Select an option');
|
||||
```
|
||||
|
||||
Você deve dar ao segundo elemento `option` um `value` de `yes`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('div.answer > select > option:nth-child(2)')?.value, 'yes');
|
||||
```
|
||||
|
||||
Você deve dar ao segundo elemento `option` um texto contendo `Yes`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('div.answer > select > option:nth-child(2)')?.textContent, 'Yes');
|
||||
```
|
||||
|
||||
Você deve dar ao terceiro elemento `option` um `value` de `no`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('div.answer > select > option:nth-child(3)')?.value, 'no');
|
||||
```
|
||||
|
||||
Você deve dar ao terceiro elemento `option` um texto contendo `No`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('div.answer > select > option:nth-child(3)')?.textContent, 'No');
|
||||
```
|
||||
|
||||
Você deve dar ao `select` um atributo `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>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: Passo 37
|
||||
challengeType: 0
|
||||
dashedName: step-37
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Vincule o primeiro elemento `label` ao elemento `select` e dê ao elemento `select` um atributo `name`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve dar ao elemento `label` um atributo `for`.
|
||||
|
||||
```js
|
||||
assert.notEmpty(document.querySelector('.question-block > label')?.htmlFor);
|
||||
```
|
||||
|
||||
Você deve dar ao elemento `select` um atributo `id`.
|
||||
|
||||
```js
|
||||
assert.notEmpty(document.querySelector('.answer > select')?.id);
|
||||
```
|
||||
|
||||
Você deve dar ao elemento `select` um `id` que corresponda ao atributo `for` do elemento `label`.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('.answer > select')?.id, document.querySelector('.question-block > label')?.htmlFor);
|
||||
```
|
||||
|
||||
Você deve dar ao elemento `select` um atributo `name`.
|
||||
|
||||
```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>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,260 @@
|
||||
---
|
||||
id: 614796cb8086be482d60e0ac
|
||||
title: Passo 45
|
||||
challengeType: 0
|
||||
dashedName: step-45
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
No que se refere à acessibilidade visual, o contraste entre elementos é um fator fundamental. Por exemplo, o contraste entre o texto e o plano de fundo de um título deve ser pelo menos 4,5:1.
|
||||
|
||||
Altere a cor da fonte de todos os elementos "âncora" dentro dos elementos da lista para algo com uma proporção de contraste de pelo menos 7:1.
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve usar o seletor `li > a`.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('li > a'));
|
||||
```
|
||||
|
||||
Você deve dar ao elemento `a` uma propriedade `color`.
|
||||
|
||||
```js
|
||||
assert.notEmpty(new __helpers.CSSHelp(document).getStyle('li > a')?.color);
|
||||
```
|
||||
|
||||
Você deve dar à propriedade `color` um contraste com o plano de fundo de pelo menos 7:1. _Dica: Eu usaria `#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>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" placeholder="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,253 @@
|
||||
---
|
||||
id: 614878f7a412310647873015
|
||||
title: Passo 47
|
||||
challengeType: 0
|
||||
dashedName: step-47
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Arrume o `header`, usando _Flexbox_ para acrescentar espaço entre os elementos filhos e centralizá-los verticalmente.
|
||||
|
||||
Em seguida, deixe o `header` fixo na parte superior do viewport.
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve dar ao elemento `header` um `justify-content` de `space-between`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.justifyContent, 'space-between');
|
||||
```
|
||||
|
||||
Você deve dar ao `header` um `align-items` de `center`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.alignItems, 'center');
|
||||
```
|
||||
|
||||
Você deve dar ao `header` uma `position` de `fixed`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.position, 'fixed');
|
||||
```
|
||||
|
||||
Você deve dar ao `header` um `top` de `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>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" placeholder="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,259 @@
|
||||
---
|
||||
id: 614880dc16070e093e29bc56
|
||||
title: Passo 51
|
||||
challengeType: 0
|
||||
dashedName: step-51
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Substitua a margem superior dos elementos `h2` por um padding superior de `60px`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve dar ao `h2` um `margin-top` de `0`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('h2')?.marginTop, '0px');
|
||||
```
|
||||
|
||||
Você deve dar ao `h2` um `padding-top` de `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>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" placeholder="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,280 @@
|
||||
---
|
||||
id: 614883b6fa720e09fb167de9
|
||||
title: Passo 52
|
||||
challengeType: 0
|
||||
dashedName: step-52
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Adicione o espaçamento ao canto superior e esquerdo dos elementos `.info` e defina os outros valores para `0`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve usar o seletor `.info`.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('.info'));
|
||||
```
|
||||
|
||||
Você deve dar ao `.info` um `padding-top` de pelo menos `1px`.
|
||||
|
||||
```js
|
||||
assert.isAtLeast(Number(new __helpers.CSSHelp(document).getStyle('.info')?.paddingTop?.replace(/\D+/, '')), 1);
|
||||
```
|
||||
|
||||
Você deve dar ao `.info` um `padding-right` de `0`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.info')?.paddingRight, '0px');
|
||||
```
|
||||
|
||||
Você deve dar ao `.info` um `padding-bottom` de `0`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.info')?.paddingBottom, '0px');
|
||||
```
|
||||
|
||||
Você deve dar ao `.info` um `padding-left` de pelo menos `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>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" placeholder="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,364 @@
|
||||
---
|
||||
id: 614884c1f5d6f30ab3d78cde
|
||||
title: Passo 53
|
||||
challengeType: 0
|
||||
dashedName: step-53
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Aplique padding à margem superior e aos blocos esquerdo e direito do elemento `.formrow`. Os outros valores de padding devem ser `0`.
|
||||
|
||||
Em seguida, aumente o tamanho da fonte para todos os elementos `input`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve usar o seletor `.formrow` para direcionar o elemento `.formrow`.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('.formrow'));
|
||||
```
|
||||
|
||||
Você deve dar ao `.formrow` um `margin-top` de pelo menos `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);
|
||||
```
|
||||
|
||||
Você deve dar ao `.formrow` um `padding-top` de `0`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.formrow')?.paddingTop, '0px');
|
||||
```
|
||||
|
||||
Você deve dar ao `.formrow` um `padding-right` de pelo menos `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);
|
||||
```
|
||||
|
||||
Você deve dar ao `.formrow` um `padding-bottom` de `0`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.formrow')?.paddingBottom, '0px');
|
||||
```
|
||||
|
||||
Você deve dar ao `.formrow` um `padding-left` de pelo menos `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);
|
||||
```
|
||||
|
||||
Você deve usar o seletor `input` para direcionar o elemento `input`.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('input'));
|
||||
```
|
||||
|
||||
Você deve dar ao `input` um `font-size` superior a `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>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" placeholder="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,315 @@
|
||||
---
|
||||
id: 6148defa9c01520fb9d178a0
|
||||
title: Passo 60
|
||||
challengeType: 0
|
||||
dashedName: step-60
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Remova o estilo padrão para os itens da lista de `.answers-list` e remova o preenchimento da lista não ordenada.
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve usar o seletor `.answers-list`.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('.answers-list'));
|
||||
```
|
||||
|
||||
Você deve dar ao `.answers-list` uma `list-style` de `none`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('.answers-list')?.listStyle, 'none');
|
||||
```
|
||||
|
||||
Você deve dar ao `.answers-list` uma `padding` de `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>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" placeholder="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,336 @@
|
||||
---
|
||||
id: 6148e0bcc13efd10f7d7a6a9
|
||||
title: Passo 62
|
||||
challengeType: 0
|
||||
dashedName: step-62
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Defina a cor de fundo do `footer` para `#2a2a40` e use _Flexbox_ para centralizar o texto horizontalmente.
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve usar o seletor de elemento `footer`.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('footer'));
|
||||
```
|
||||
|
||||
Você deve dar ao `footer` um `background-color` de `#2a2a40`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('footer')?.backgroundColor, 'rgb(42, 42, 64)');
|
||||
```
|
||||
|
||||
Você deve dar ao `footer` um `display` de `flex`.
|
||||
|
||||
```js
|
||||
assert.equal(new __helpers.CSSHelp(document).getStyle('footer')?.display, 'flex');
|
||||
```
|
||||
|
||||
Você deve dar ao `footer` uma `justify-content` de `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>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" placeholder="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,342 @@
|
||||
---
|
||||
id: 6148e335c1edd512d00e4691
|
||||
title: Passo 65
|
||||
challengeType: 0
|
||||
dashedName: step-65
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Ao clicar nos links de navegação, você deverá levar o viewport para a seção relevante. No entanto, essa passagem pode desorientar alguns usuários.
|
||||
|
||||
Selecione todos os elementos e defina o `scroll-behavior` para `smooth`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Você deve usar o seletor `*`.
|
||||
|
||||
```js
|
||||
assert.exists(new __helpers.CSSHelp(document).getStyle('*'));
|
||||
```
|
||||
|
||||
Você deve dar ao `*` um `scroll-behavior` de `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>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" placeholder="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,60 @@
|
||||
---
|
||||
id: 5dc17d3bf86c76b9248c6eb4
|
||||
title: Passo 3
|
||||
challengeType: 0
|
||||
dashedName: step-3
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Os elementos do parágrafo (`p`) são usados para criar um parágrafo de texto nos sites.
|
||||
|
||||
Crie um elemento de parágrafo `p` abaixo de seu elemento `h2` e dê a ele o texto `Click here to view more cat photos.`
|
||||
|
||||
# --hints--
|
||||
|
||||
O elemento `p` deve ter uma tag de abertura. As tags de abertura têm a seguinte sintaxe: `<elementName>`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('p'));
|
||||
```
|
||||
|
||||
Seu elemento `p` deve ter uma tag de fechamento. As tags de fechamento têm um caractere `/` logo após o caractere `<`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/p\>/));
|
||||
```
|
||||
|
||||
O texto do seu elemento `p` deve ser `Click here to view more cat photos.` Você omitiu o texto ou tem um erro de digitação.
|
||||
|
||||
```js
|
||||
const extraSpacesRemoved = document
|
||||
.querySelector('p')
|
||||
.innerText.replace(/\s+/g, ' ');
|
||||
assert(extraSpacesRemoved.match(/click here to view more cat photos\.?$/i));
|
||||
```
|
||||
|
||||
O elemento `p` deve estar abaixo do elemento `h2`. Eles estão na ordem errada.
|
||||
|
||||
```js
|
||||
const collection = [...document.querySelectorAll('h2,p')].map(
|
||||
(node) => node.nodeName
|
||||
);
|
||||
assert(collection.indexOf('H2') < collection.indexOf('P'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
<h1>CatPhotoApp</h1>
|
||||
--fcc-editable-region--
|
||||
<h2>Cat Photos</h2>
|
||||
--fcc-editable-region--
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
Reference in New Issue
Block a user