gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

chore(i18n,learn): processed translations (#45679)

Browse Source
This commit is contained in:
camperbot
2022-04-13 20:12:58 +05:30
committed by GitHub
parent 8072041012
commit 67768b057e
14 changed files with 1934 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/find-the-length-of-a-string.md
View File

@ -15,7 +15,7 @@ Puedes encontrar la longitud de un valor de cadena (`String`) escribiendo `.leng
console.log("Alan Peter".length); console.log("Alan Peter".length);
``` ```
El valor `10` se mostrará en la consola. El valor `10` se mostrará en la consola. Toma nota que el carácter espacial entre "Alan" y "Peter" también se cuenta.
Por ejemplo, si creamos una variable `const firstName = "Ada"`, podríamos averiguar la longitud de la cadena `Ada` usando la propiedad `firstName.length`. Por ejemplo, si creamos una variable `const firstName = "Ada"`, podríamos averiguar la longitud de la cadena `Ada` usando la propiedad `firstName.length`.

61
curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61329b210dac0b08047fd6ab.md Normal file
View File

@ -0,0 +1,61 @@
---
id: 61329b210dac0b08047fd6ab
title: Step 3
challengeType: 0
dashedName: step-3
---
# --description--
Continuando con i tag `meta`, una definizione `viewport` dice al browser come renderizzare la pagina. Includerne una migliora l'accessibilità visuale su dispositivi mobile, e migliora la _SEO_ (ottimizzazione per i motori di ricerca).
Aggiungi una definizione `viewport` con un attributo `content` dettagliando la `width` e la `initial-scale` della pagina.
# --hints--
Dovresti creare un altro elemento `meta` in `head`.
```js
assert.equal(document.querySelectorAll('head > meta')?.length, 2);
```
Dovresti dare a `meta` un attributo `name` con valore `viewport`.
```js
assert.equal(document.querySelectorAll('head > meta[name="viewport"]')?.length, 1);
```
Dovresti dare a `meta` un attributo `content` di valore `width=device-width, initial-scale=1`.
```js
assert.equal(document.querySelectorAll('head > meta[content="width=device-width, initial-scale=1.0"]')?.length || document.querySelectorAll('head > meta[content="width=device-width, initial-scale=1"]')?.length, 1);
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
--fcc-editable-region--
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="styles.css" />
</head>
--fcc-editable-region--
<body>
</body>
</html>
```
```css
body {
background: #f5f6f7;
color: #1b1b32;
font-family: Helvetica;
margin: 0;
}
```

93
curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6140827cff96e906bd38fc2b.md Normal file
View File

@ -0,0 +1,93 @@
---
id: 6140827cff96e906bd38fc2b
title: Step 9
challengeType: 0
dashedName: step-9
---
# --description--
Come descritto nella [Guida allo stile di freeCodeCamp](https://design-style-guide.freecodecamp.org/), il logo dovrebbe mantenere un rapporto di aspetto di `35:4` e avere il riempimento intorno al testo.
Innanzitutto, imposta il `background-color` a `#0a0a23` in modo da poter vedere il logo. Poi, usa la proprietà `aspect-ratio` per settare le proporzioni desiderate. Infine, aggiungi un `padding` di `0.4rem` attorno.
# --hints--
Dovresti dare a `#logo` un `background-color` di `#0a0a23`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('#logo')?.backgroundColor, 'rgb(10, 10, 35)');
```
Dovresti usare la proprietà `aspect-ratio`.
```js
assert.notEmpty(new __helpers.CSSHelp(document).getStyle('#logo')?.aspectRatio);
```
Non dovresti usare la proprietà `height`.
```js
assert.isEmpty(new __helpers.CSSHelp(document).getStyle('#logo')?.height);
```
Non dovresti cambiare la proprietà `width`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('#logo')?.width, 'max(100px, 18vw)');
```
Dovresti dare all' `img` un `aspect-ratio` di `35 / 4`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('#logo')?.aspectRatio, '35 / 4');
```
Dovresti dare all'`img` un `padding` di `0.4rem`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('#logo')?.padding, '0.4rem');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
<title>Accessibility Quiz</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
<h1>HTML/CSS Quiz</h1>
<nav></nav>
</header>
<main></main>
</body>
</html>
```
```css
body {
background: #f5f6f7;
color: #1b1b32;
font-family: Helvetica;
margin: 0;
}
--fcc-editable-region--
#logo {
width: max(100px, 18vw);
}
--fcc-editable-region--
```

89
curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6140883f74224508174794c0.md Normal file
View File

@ -0,0 +1,89 @@
---
id: 6140883f74224508174794c0
title: Step 10
challengeType: 0
dashedName: step-10
---
# --description--
Fai in modo che l'`header` occupi tutta la larghezza del suo contenitore genitore, imposta la sua `height` a `50px`, e il `background-color` a `#1b1b32`. A questo punto imposta `display` in modo da usare _Flexbox_.
# --hints--
Dovresti usare il selettore di elemento `h1`.
```js
assert.exists(new __helpers.CSSHelp(document).getStyle('header'));
```
Dovresti dare a `header` una `width` del `100%`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.width, '100%');
```
Dovresti dare a `header` un'`height` di `50px`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.height, '50px');
```
Dovresti dare a `header` un `background-color` di `#1b1b32`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.backgroundColor, 'rgb(27, 27, 50)');
```
Dovresti dare a `header` un `display` di `flex`.
```js
assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.display, 'flex');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
<title>Accessibility Quiz</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
<h1>HTML/CSS Quiz</h1>
<nav></nav>
</header>
<main></main>
</body>
</html>
```
```css
body {
background: #f5f6f7;
color: #1b1b32;
font-family: Helvetica;
margin: 0;
}
--fcc-editable-region--
--fcc-editable-region--
#logo {
width: max(100px, 18vw);
background-color: #0a0a23;
aspect-ratio: 35 / 4;
padding: 0.4rem;
}
```

125
curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6141fabd6f75610664e908fd.md Normal file
View File

@ -0,0 +1,125 @@
---
id: 6141fabd6f75610664e908fd
title: Step 14
challengeType: 0
dashedName: step-14
---
# --description--
Poiché questo è un quiz, avrai bisogno di un modulo che gli utenti possano usare per inviare le risposte. Puoi separare semanticamente il contenuto all'interno del modulo utilizzando gli elementi `section`.
All'interno dell'elemento `main`, crea un modulo con tre elementi `section` annidati. Quindi, fai inviare il modulo a `https://freecodecamp.org/practice-project/accessibility-quiz`, utilizzando il metodo corretto.
# --hints--
Dovresti annidare un elemento `form` all'interno del tuo elemento `main`.
```js
assert.exists(document.querySelector('main > form'));
```
Dovresti annidare tre elementi `section` all'interno del tuo elemento `form`.
```js
assert.equal(document.querySelectorAll('main > form > section')?.length, 3);
```
Dovresti dare all'elemento `form` un attributo `action`.
```js
assert.notEmpty(document.querySelector('main > form')?.action);
```
Dovresti dare all'attributo `action` un valore di `https://freecodecamp.org/practice-project/accessibility-quiz`.
```js
assert.equal(document.querySelector('main > form')?.action, 'https://freecodecamp.org/practice-project/accessibility-quiz');
```
Dovresti assegnare all'elemento `form` un attributo `method`.
```js
assert.notEmpty(document.querySelector('main > form')?.method);
```
Dovresti assegnare all'elemento `form` un attributo `method` con un valore di `post`.
```js
assert.equal(document.querySelector('main > form')?.method?.toLowerCase(), 'post');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
<title>Accessibility Quiz</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
<h1>HTML/CSS Quiz</h1>
<nav>
<ul>
<li><a>INFO</a></li>
<li><a>HTML</a></li>
<li><a>CSS</a></li>
</ul>
</nav>
</header>
--fcc-editable-region--
<main>
</main>
--fcc-editable-region--
</body>
</html>
```
```css
body {
background: #f5f6f7;
color: #1b1b32;
font-family: Helvetica;
margin: 0;
}
header {
width: 100%;
height: 50px;
background-color: #1b1b32;
display: flex;
}
#logo {
width: max(100px, 18vw);
background-color: #0a0a23;
aspect-ratio: 35 / 4;
padding: 0.4rem;
}
h1 {
color: #f1be32;
font-size: min(5vw, 1.2em);
}
nav {
width: 50%;
max-width: 300px;
height: 50px;
}
nav > ul {
display: flex;
justify-content: space-evenly;
}
```

111
curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6141fed65b61320743da5894.md Normal file
View File

@ -0,0 +1,111 @@
---
id: 6141fed65b61320743da5894
title: Step 15
challengeType: 0
dashedName: step-15
---
# --description--
Per aumentare l'accessibilità della pagina, l'attributo `role` può essere utilizzato per indicare alle tecnologie di assistenza lo scopo di un elemento nella pagina. L'attributo `role` fa parte della _Iniziativa per l'accessibilità del Web _ (Web Accessible Initiative - WAI) e accetta valori preimpostati.
Dai a ciascuno degli elementi `section` il ruolo `region`.
# --hints--
Dovresti assegnare al primo elemento `section` il ruolo `region`.
```js
assert.equal(document.querySelectorAll('section')?.[0]?.getAttribute('role'), 'region');
```
Dovresti assegnare al secondo elemento `section` il ruolo `region`.
```js
assert.equal(document.querySelectorAll('section')?.[1]?.getAttribute('role'), 'region');
```
Dovresti assegnare al terzo elemento `section` il ruolo `region`.
```js
assert.equal(document.querySelectorAll('section')?.[2]?.getAttribute('role'), 'region');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
<title>Accessibility Quiz</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
<h1>HTML/CSS Quiz</h1>
<nav>
<ul>
<li><a>INFO</a></li>
<li><a>HTML</a></li>
<li><a>CSS</a></li>
</ul>
</nav>
</header>
<main>
--fcc-editable-region--
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
<section></section>
<section></section>
<section></section>
</form>
--fcc-editable-region--
</main>
</body>
</html>
```
```css
body {
background: #f5f6f7;
color: #1b1b32;
font-family: Helvetica;
margin: 0;
}
header {
width: 100%;
height: 50px;
background-color: #1b1b32;
display: flex;
}
#logo {
width: max(100px, 18vw);
background-color: #0a0a23;
aspect-ratio: 35 / 4;
padding: 0.4rem;
}
h1 {
color: #f1be32;
font-size: min(5vw, 1.2em);
}
nav {
width: 50%;
max-width: 300px;
height: 50px;
}
nav > ul {
display: flex;
justify-content: space-evenly;
}
```

195
curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143639d5eddc7094161648c.md Normal file
View File

@ -0,0 +1,195 @@
---
id: 6143639d5eddc7094161648c
title: Step 20
challengeType: 0
dashedName: step-20
---
# --description--
È importante collegare ogni `input` al corrispondente elemento `label`. Questo fornisce agli utenti di tecnologie assistive un riferimento visivo all'input.
Questo viene fatto assegnando alla `label` un attributo `for`, che contiene l'`id` dell'`input`.
Questa sezione prenderà il nome, l'indirizzo e-mail e la data di nascita di uno studente. Assegna agli elementi `label` gli attributi `for` appropriati, oltre al contenuto del testo. Quindi, collega gli elementi `input` agli elementi `label` corrispondenti.
# --hints--
Dovresti assegnare al primo elemento `label` un attributo `for` appropriato.
```js
assert.isAtLeast(document.querySelectorAll('label')?.[0]?.htmlFor?.length, 1);
```
Dovresti assegnare al secondo elemento `label` un attributo `for` appropriato.
```js
assert.isAtLeast(document.querySelectorAll('label')?.[1]?.htmlFor?.length, 1);
```
Dovresti assegnare al terzo elemento `label` un attributo `for` appropriato.
```js
assert.isAtLeast(document.querySelectorAll('label')?.[2]?.htmlFor?.length, 1);
```
Dovresti assegnare al primo elemento `label` un contenuto di testo appropriato.
```js
assert.isAtLeast(document.querySelectorAll('label')?.[0]?.textContent?.length, 1);
```
Dovresti assegnare al secondo elemento `label` un contenuto di testo appropriato.
```js
assert.isAtLeast(document.querySelectorAll('label')?.[1]?.textContent?.length, 1);
```
Dovresti assegnare al terzo elemento `label` un contenuto di testo appropriato.
```js
assert.isAtLeast(document.querySelectorAll('label')?.[2]?.textContent?.length, 1);
```
Dovresti assegnare al primo elemento `input` un attributo `id` che corrisponda all'attributo `for` della prima `label`.
```js
assert.equal(document.querySelectorAll('input')?.[0]?.id, document.querySelectorAll('label')?.[0]?.htmlFor);
```
Dovresti assegnare al secondo elemento `input` un attributo `id` che corrisponda all'attributo `for` della seconda `label`.
```js
assert.equal(document.querySelectorAll('input')?.[1]?.id, document.querySelectorAll('label')?.[1]?.htmlFor);
```
Dovresti assegnare al terzo elemento `input` un attributo `id` che corrisponda all'attributo `for` della terza `label`.
```js
assert.equal(document.querySelectorAll('input')?.[2]?.id, document.querySelectorAll('label')?.[2]?.htmlFor);
```
Non dovresti usare lo stesso attributo `id` per più di un elemento `input`.
```js
const id = (n) => document.querySelectorAll('input')?.[n]?.id;
assert.notEqual(id(0), id(1));
assert.notEqual(id(0), id(2));
assert.notEqual(id(1), id(2));
```
Non dovresti usare lo stesso attributo `for` per più di un elemento `label`.
```js
const htmlFor = (n) => document.querySelectorAll('label')?.[n]?.htmlFor;
assert.notEqual(htmlFor(0), htmlFor(1));
assert.notEqual(htmlFor(0), htmlFor(2));
assert.notEqual(htmlFor(1), htmlFor(2));
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
<title>Accessibility Quiz</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
<h1>HTML/CSS Quiz</h1>
<nav>
<ul>
<li><a href="#student-info">INFO</a></li>
<li><a href="#html-questions">HTML</a></li>
<li><a href="#css-questions">CSS</a></li>
</ul>
</nav>
</header>
<main>
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
--fcc-editable-region--
<section role="region" aria-labelledby="student-info">
<h2 id="student-info">Student Info</h2>
<div class="info">
<label></label>
<input />
</div>
<div class="info">
<label></label>
<input />
</div>
<div class="info">
<label></label>
<input />
</div>
</section>
--fcc-editable-region--
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
</section>
<section role="region" aria-labelledby="css-questions">
<h2 id="css-questions">CSS</h2>
</section>
</form>
</main>
</body>
</html>
```
```css
body {
background: #f5f6f7;
color: #1b1b32;
font-family: Helvetica;
margin: 0;
}
header {
width: 100%;
height: 50px;
background-color: #1b1b32;
display: flex;
}
#logo {
width: max(100px, 18vw);
background-color: #0a0a23;
aspect-ratio: 35 / 4;
padding: 0.4rem;
}
h1 {
color: #f1be32;
font-size: min(5vw, 1.2em);
}
nav {
width: 50%;
max-width: 300px;
height: 50px;
}
nav > ul {
display: flex;
justify-content: space-evenly;
}
h1,
h2 {
font-family: Verdana, Tahoma;
}
h2 {
border-bottom: 4px solid #dfdfe2;
}
```

161
curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143908b6aafb00a659ca189.md Normal file
View File

@ -0,0 +1,161 @@
---
id: 6143908b6aafb00a659ca189
title: Step 21
challengeType: 0
dashedName: step-21
---
# --description--
Tenendo a mente le raccomandazioni per gli input dei moduli, dai ad ogni `input` degli attributi `type` e `name` appropriati. Quindi, dai al primo `input` un attributo `placeholder`.
# --hints--
Dovresti dare al primo `input` un `type` di `text`.
```js
assert.equal(document.querySelectorAll('input')?.[0]?.type, 'text');
```
Dovresti dare al secondo `input` un `type` di `email`.
```js
assert.equal(document.querySelectorAll('input')?.[1]?.type, 'email');
```
Dovresti dare al terzo `input` un `type` di `date`.
```js
assert.equal(document.querySelectorAll('input')?.[2]?.type, 'date');
```
Dovresti dare al primo attributo `input` un `name` appropriato.
```js
assert.isAtLeast(document.querySelectorAll('input')?.[0]?.name?.length, 1);
```
Dovresti dare al secondo attributo `input` un `name` appropriato.
```js
assert.isAtLeast(document.querySelectorAll('input')?.[1]?.name?.length, 1);
```
Dovresti dare al terzo attributo `input` un `name` appropriato.
```js
assert.isAtLeast(document.querySelectorAll('input')?.[2]?.name?.length, 1);
```
Dovresti dare al primo attributo `input` un attributo `placeholder`.
```js
assert.notEmpty(document.querySelectorAll('input')?.[0]?.placeholder);
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
<title>Accessibility Quiz</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
<h1>HTML/CSS Quiz</h1>
<nav>
<ul>
<li><a href="#student-info">INFO</a></li>
<li><a href="#html-questions">HTML</a></li>
<li><a href="#css-questions">CSS</a></li>
</ul>
</nav>
</header>
<main>
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
--fcc-editable-region--
<section role="region" aria-labelledby="student-info">
<h2 id="student-info">Student Info</h2>
<div class="info">
<label for="student-name">Name:</label>
<input id="student-name" />
</div>
<div class="info">
<label for="student-email">Email:</label>
<input id="student-email" />
</div>
<div class="info">
<label for="birth-date">D.O.B.:</label>
<input id="birth-date" />
</div>
</section>
--fcc-editable-region--
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
</section>
<section role="region" aria-labelledby="css-questions">
<h2 id="css-questions">CSS</h2>
</section>
</form>
</main>
</body>
</html>
```
```css
body {
background: #f5f6f7;
color: #1b1b32;
font-family: Helvetica;
margin: 0;
}
header {
width: 100%;
height: 50px;
background-color: #1b1b32;
display: flex;
}
#logo {
width: max(100px, 18vw);
background-color: #0a0a23;
aspect-ratio: 35 / 4;
padding: 0.4rem;
}
h1 {
color: #f1be32;
font-size: min(5vw, 1.2em);
}
nav {
width: 50%;
max-width: 300px;
height: 50px;
}
nav > ul {
display: flex;
justify-content: space-evenly;
}
h1,
h2 {
font-family: Verdana, Tahoma;
}
h2 {
border-bottom: 4px solid #dfdfe2;
}
```

177
curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143cb26f7edff2dc28f7da5.md Normal file
View File

@ -0,0 +1,177 @@
---
id: 6143cb26f7edff2dc28f7da5
title: Step 27
challengeType: 0
dashedName: step-27
---
# --description--
Ogni `fieldset` conterrà una domanda vera/falsa.
All'interno di ogni `fieldset`, annida un elemento `legend` e un elemento `ul` con due opzioni.
# --hints--
Devi annidare un elemento `legend` all'interno del primo elemento `fieldset`.
```js
assert.equal(document.querySelectorAll('.question-block:nth-of-type(1) > fieldset > legend')?.length, 1);
```
Dovresti annidare un elemento `ul` all'interno del primo elemento `fieldset`.
```js
assert.equal(document.querySelectorAll('.question-block:nth-of-type(1) > fieldset > ul')?.length, 1);
```
Dovresti annidare due elementi `li` all'interno del primo elemento `ul`.
```js
assert.equal(document.querySelectorAll('fieldset > ul')?.[0]?.querySelectorAll('li')?.length, 2);
```
Dovresti annidare un elemento `legend` all'interno del secondo elemento `fieldset`.
```js
assert.equal(document.querySelectorAll('.question-block:nth-of-type(2) > fieldset > legend')?.length, 1);
```
Dovresti annidare un elemento `ul` all'interno del secondo elemento `fieldset`.
```js
assert.equal(document.querySelectorAll('.question-block:nth-of-type(2) > fieldset > ul')?.length, 1);
```
Dovresti annidare due elementi `li` all'interno del secondo elemento `ul`.
```js
assert.equal(document.querySelectorAll('fieldset > ul')?.[1]?.querySelectorAll('li')?.length, 2);
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
<title>Accessibility Quiz</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
<h1>HTML/CSS Quiz</h1>
<nav>
<ul>
<li><a href="#student-info">INFO</a></li>
<li><a href="#html-questions">HTML</a></li>
<li><a href="#css-questions">CSS</a></li>
</ul>
</nav>
</header>
<main>
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
<section role="region" aria-labelledby="student-info">
<h2 id="student-info">Student Info</h2>
<div class="info">
<label for="student-name">Name:</label>
<input type="text" name="student-name" id="student-name" />
</div>
<div class="info">
<label for="student-email">Email:</label>
<input type="email" name="student-email" id="student-email" />
</div>
<div class="info">
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
<input type="date" name="birth-date" id="birth-date" />
</div>
</section>
--fcc-editable-region--
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<fieldset class="question"></fieldset>
</div>
<div class="question-block">
<p>2</p>
<fieldset class="question"></fieldset>
</div>
</section>
--fcc-editable-region--
<section role="region" aria-labelledby="css-questions">
<h2 id="css-questions">CSS</h2>
</section>
</form>
</main>
</body>
</html>
```
```css
body {
background: #f5f6f7;
color: #1b1b32;
font-family: Helvetica;
margin: 0;
}
header {
width: 100%;
height: 50px;
background-color: #1b1b32;
display: flex;
}
#logo {
width: max(100px, 18vw);
background-color: #0a0a23;
aspect-ratio: 35 / 4;
padding: 0.4rem;
}
h1 {
color: #f1be32;
font-size: min(5vw, 1.2em);
}
nav {
width: 50%;
max-width: 300px;
height: 50px;
}
nav > ul {
display: flex;
justify-content: space-evenly;
}
h1,
h2 {
font-family: Verdana, Tahoma;
}
h2 {
border-bottom: 4px solid #dfdfe2;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
```

195
curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144e818fd5ea704fe56081d.md Normal file
View File

@ -0,0 +1,195 @@
---
id: 6144e818fd5ea704fe56081d
title: Step 28
challengeType: 0
dashedName: step-28
---
# --description--
Assegna a ogni `fieldset` un attributo `name` adeguato. Quindi, dai a entrambi gli elenchi non ordinati un attributo `class` di `answers-list`.
Infine, usa l'elemento `legend` per sottotitolare il contenuto del `fieldset` inserendo una domanda vero/falso come contenuto testuale.
# --hints--
Dovresti assegnare al primo `fieldset` un attributo `name` adeguato. _Suggerimento: userei `html-question-one`_
```js
assert.notEmpty(document.querySelectorAll('fieldset')?.[0]?.name);
```
Dovresti assegnare al secondo `fieldset` un attributo `name` adeguato. _Suggerimento: userei `html-question-two`_
```js
assert.notEmpty(document.querySelectorAll('fieldset')?.[1]?.name);
```
Dovresti assegnare al primo elemento `ul` un attributo `class` di `answers-list`.
```js
assert.equal(document.querySelectorAll('fieldset > ul')?.[0]?.className, 'answers-list');
```
Dovresti assegnare al secondo elemento `ul` un attributo `class` di `answers-list`.
```js
assert.equal(document.querySelectorAll('fieldset > ul')?.[1]?.className, 'answers-list');
```
Il primo elemento `legend` dovrebbe contenere del testo.
```js
assert.notEmpty(document.querySelectorAll('legend')?.[0]?.textContent);
```
Il secondo elemento `legend` dovrebbe contenere del testo.
```js
assert.notEmpty(document.querySelectorAll('legend')?.[1]?.textContent);
```
I due elemento `legend` non dovrebbero contenere lo stesso testo.
```js
assert.notEqual(document.querySelectorAll('legend')?.[0]?.textContent, document.querySelectorAll('legend')?.[1]?.textContent);
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
<title>Accessibility Quiz</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
<h1>HTML/CSS Quiz</h1>
<nav>
<ul>
<li><a href="#student-info">INFO</a></li>
<li><a href="#html-questions">HTML</a></li>
<li><a href="#css-questions">CSS</a></li>
</ul>
</nav>
</header>
<main>
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
<section role="region" aria-labelledby="student-info">
<h2 id="student-info">Student Info</h2>
<div class="info">
<label for="student-name">Name:</label>
<input type="text" name="student-name" id="student-name" />
</div>
<div class="info">
<label for="student-email">Email:</label>
<input type="email" name="student-email" id="student-email" />
</div>
<div class="info">
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
<input type="date" name="birth-date" id="birth-date" />
</div>
</section>
--fcc-editable-region--
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<fieldset class="question">
<legend></legend>
<ul>
<li></li>
<li></li>
</ul>
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<fieldset class="question">
<legend></legend>
<ul>
<li></li>
<li></li>
</ul>
</fieldset>
</div>
</section>
--fcc-editable-region--
<section role="region" aria-labelledby="css-questions">
<h2 id="css-questions">CSS</h2>
</section>
</form>
</main>
</body>
</html>
```
```css
body {
background: #f5f6f7;
color: #1b1b32;
font-family: Helvetica;
margin: 0;
}
header {
width: 100%;
height: 50px;
background-color: #1b1b32;
display: flex;
}
#logo {
width: max(100px, 18vw);
background-color: #0a0a23;
aspect-ratio: 35 / 4;
padding: 0.4rem;
}
h1 {
color: #f1be32;
font-size: min(5vw, 1.2em);
}
nav {
width: 50%;
max-width: 300px;
height: 50px;
}
nav > ul {
display: flex;
justify-content: space-evenly;
}
h1,
h2 {
font-family: Verdana, Tahoma;
}
h2 {
border-bottom: 4px solid #dfdfe2;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
```

231
curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144f8dc6849e405dd8bb829.md Normal file
View File

@ -0,0 +1,231 @@
---
id: 6144f8dc6849e405dd8bb829
title: Step 29
challengeType: 0
dashedName: step-29
---
# --description--
Per fornire la funzionalità delle domande vero/falso, abbiamo bisogno di un insieme di input che non consentano di selezionare entrambi contemporaneamente.
All'interno di ogni elemento dell'elenco, annida un elemento `label` e all'interno di ogni elemento `label` annida un elemento `input` con il `type` appropriato.
# --hints--
Dovresti annidare un elemento `label` all'interno del primo elemento `li`.
```js
assert.exists(document.querySelectorAll('ul.answers-list > li')?.[0]?.querySelector('label'));
```
Dovresti annidare un elemento `label` all'interno del secondo elemento `li`.
```js
assert.exists(document.querySelectorAll('ul.answers-list > li')?.[1]?.querySelector('label'));
```
Dovresti annidare un elemento `label` all'interno del terzo elemento `li`.
```js
assert.exists(document.querySelectorAll('ul.answers-list > li')?.[2]?.querySelector('label'));
```
Dovresti annidare un elemento `label` all'interno del quarto elemento `li`.
```js
assert.exists(document.querySelectorAll('ul.answers-list > li')?.[3]?.querySelector('label'));
```
Dovresti annidare un elemento `input` all'interno del primo elemento `label`.
```js
assert.exists(document.querySelectorAll('ul.answers-list > li')?.[0]?.querySelector('label')?.querySelector('input'));
```
Dovresti annidare un elemento `input` all'interno del secondo elemento `label`.
```js
assert.exists(document.querySelectorAll('ul.answers-list > li')?.[1]?.querySelector('label')?.querySelector('input'));
```
Dovresti annidare un elemento `input` all'interno del terzo elemento `label`.
```js
assert.exists(document.querySelectorAll('ul.answers-list > li')?.[2]?.querySelector('label')?.querySelector('input'));
```
Dovresti annidare un elemento `input` all'interno del quarto elemento `label`.
```js
assert.exists(document.querySelectorAll('ul.answers-list > li')?.[3]?.querySelector('label')?.querySelector('input'));
```
Dovresti dare al primo `input` un `type` di `radio`.
```js
assert.equal(document.querySelectorAll('ul.answers-list > li > label > input')?.[0]?.type, 'radio');
```
Dovresti dare al secondo `input` un `type` di `radio`.
```js
assert.equal(document.querySelectorAll('ul.answers-list > li > label > input')?.[1]?.type, 'radio');
```
Dovresti dare al terzo `input` un `type` di `radio`.
```js
assert.equal(document.querySelectorAll('ul.answers-list > li > label > input')?.[2]?.type, 'radio');
```
Dovresti dare al quarto `input` un `type` di `radio`.
```js
assert.equal(document.querySelectorAll('ul.answers-list > li > label > input')?.[3]?.type, 'radio');
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
<title>Accessibility Quiz</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
<h1>HTML/CSS Quiz</h1>
<nav>
<ul>
<li><a href="#student-info">INFO</a></li>
<li><a href="#html-questions">HTML</a></li>
<li><a href="#css-questions">CSS</a></li>
</ul>
</nav>
</header>
<main>
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
<section role="region" aria-labelledby="student-info">
<h2 id="student-info">Student Info</h2>
<div class="info">
<label for="student-name">Name:</label>
<input type="text" name="student-name" id="student-name" />
</div>
<div class="info">
<label for="student-email">Email:</label>
<input type="email" name="student-email" id="student-email" />
</div>
<div class="info">
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
<input type="date" name="birth-date" id="birth-date" />
</div>
</section>
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
parent fieldset element
</legend>
--fcc-editable-region--
<ul class="answers-list">
<li></li>
<li></li>
</ul>
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a
for attribute with the same value as the input's id
</legend>
<ul class="answers-list">
<li></li>
<li></li>
</ul>
--fcc-editable-region--
</fieldset>
</div>
</section>
<section role="region" aria-labelledby="css-questions">
<h2 id="css-questions">CSS</h2>
</section>
</form>
</main>
</body>
</html>
```
```css
body {
background: #f5f6f7;
color: #1b1b32;
font-family: Helvetica;
margin: 0;
}
header {
width: 100%;
height: 50px;
background-color: #1b1b32;
display: flex;
}
#logo {
width: max(100px, 18vw);
background-color: #0a0a23;
aspect-ratio: 35 / 4;
padding: 0.4rem;
}
h1 {
color: #f1be32;
font-size: min(5vw, 1.2em);
}
nav {
width: 50%;
max-width: 300px;
height: 50px;
}
nav > ul {
display: flex;
justify-content: space-evenly;
}
h1,
h2 {
font-family: Verdana, Tahoma;
}
h2 {
border-bottom: 4px solid #dfdfe2;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
```

207
curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e6eeaa66c605eb087fe9.md Normal file
View File

@ -0,0 +1,207 @@
---
id: 6145e6eeaa66c605eb087fe9
title: Step 30
challengeType: 0
dashedName: step-30
---
# --description--
Sebbene non sia richiesto per elementi `label` con un `input` nidificato, è comunque consigliabile collegare esplicitamente un elemento `label` con il suo elemento `input`.
Collega gli elementi `label` ai loro elementi `input` corrispondenti.
# --hints--
Dovresti assegnare al primo elemento `label` un attributo `for` che corrisponde all'`id` del suo elemento `input`.
```js
const htmlFor = document.querySelectorAll('ul.answers-list > li > label')?.[0]?.htmlFor;
assert.notEmpty(htmlFor);
assert.equal(htmlFor, document.querySelectorAll('ul.answers-list > li > label > input')?.[0]?.id);
```
Dovresti assegnare al secondo elemento `label` un attributo `for` che corrisponde all'`id` del suo elemento `input`.
```js
const htmlFor = document.querySelectorAll('ul.answers-list > li > label')?.[1]?.htmlFor;
assert.notEmpty(htmlFor);
assert.equal(htmlFor, document.querySelectorAll('ul.answers-list > li > label > input')?.[1]?.id);
```
Dovresti assegnare al terzo elemento `label` un attributo `for` che corrisponde all'`id` del suo elemento `input`.
```js
const htmlFor = document.querySelectorAll('ul.answers-list > li > label')?.[2]?.htmlFor;
assert.notEmpty(htmlFor);
assert.equal(htmlFor, document.querySelectorAll('ul.answers-list > li > label > input')?.[2]?.id);
```
Dovresti assegnare al quarto elemento `label` un attributo `for` che corrisponde all'`id` del suo elemento `input`.
```js
const htmlFor = document.querySelectorAll('ul.answers-list > li > label')?.[3]?.htmlFor;
assert.notEmpty(htmlFor);
assert.equal(htmlFor, document.querySelectorAll('ul.answers-list > li > label > input')?.[3]?.id);
```
# --seed--
## --seed-contents--
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
<title>Accessibility Quiz</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>
<img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
<h1>HTML/CSS Quiz</h1>
<nav>
<ul>
<li><a href="#student-info">INFO</a></li>
<li><a href="#html-questions">HTML</a></li>
<li><a href="#css-questions">CSS</a></li>
</ul>
</nav>
</header>
<main>
<form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
<section role="region" aria-labelledby="student-info">
<h2 id="student-info">Student Info</h2>
<div class="info">
<label for="student-name">Name:</label>
<input type="text" name="student-name" id="student-name" />
</div>
<div class="info">
<label for="student-email">Email:</label>
<input type="email" name="student-email" id="student-email" />
</div>
<div class="info">
<label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
<input type="date" name="birth-date" id="birth-date" />
</div>
</section>
<section role="region" aria-labelledby="html-questions">
<h2 id="html-questions">HTML</h2>
<div class="question-block">
<p>1</p>
<fieldset class="question" name="html-question-one">
<legend>
The legend element represents a caption for the content of its
parent fieldset element
</legend>
--fcc-editable-region--
<ul class="answers-list">
<li>
<label>
<input type="radio" />
</label>
</li>
<li>
<label>
<input type="radio" />
</label>
</li>
</ul>
</fieldset>
</div>
<div class="question-block">
<p>2</p>
<fieldset class="question" name="html-question-two">
<legend>
A label element nesting an input element is required to have a
for attribute with the same value as the input's id
</legend>
<ul class="answers-list">
<li>
<label>
<input type="radio" />
</label>
</li>
<li>
<label>
<input type="radio" />
</label>
</li>
</ul>
--fcc-editable-region--
</fieldset>
</div>
</section>
<section role="region" aria-labelledby="css-questions">
<h2 id="css-questions">CSS</h2>
</section>
</form>
</main>
</body>
</html>
```
```css
body {
background: #f5f6f7;
color: #1b1b32;
font-family: Helvetica;
margin: 0;
}
header {
width: 100%;
height: 50px;
background-color: #1b1b32;
display: flex;
}
#logo {
width: max(100px, 18vw);
background-color: #0a0a23;
aspect-ratio: 35 / 4;
padding: 0.4rem;
}
h1 {
color: #f1be32;
font-size: min(5vw, 1.2em);
}
nav {
width: 50%;
max-width: 300px;
height: 50px;
}
nav > ul {
display: flex;
justify-content: space-evenly;
}
h1,
h2 {
font-family: Verdana, Tahoma;
}
h2 {
border-bottom: 4px solid #dfdfe2;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
```

287
curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e8b5080a5f06bb0223d0.md Normal file
View File

@ -0,0 +1,287 @@
---
id: 6145e8b5080a5f06bb0223d0
title: Step 31
challengeType: 0
dashedName: step-31
---
# --description--
Inserisci del testo negli elementi `label` in modo tale che l'elemento `input` sia prima del testo. Quindi, dai agli elementi `input` un attributo `value` corrispondente al testo.
Il testo dovrebbe essere `True` o `False`.
# --hints--
Il primo elemento `label` dovrebbe contenere del testo.
```js
assert.notEmpty(document.querySelectorAll('ul.answers-list > li > label')?.[0]?.textContent?.trim());
```
Il secondo elemento `label` dovrebbe contenere del testo.
```js
assert.notEmpty(document.querySelectorAll('ul.answers-list > li > label')?.[1]?.textContent?.trim());
```
Il terzo elemento `label` dovrebbe contenere del testo.
```js
assert.notEmpty(document.querySelectorAll('ul.answers-list > li > label')?.[2]?.textContent?.trim());
```
Il quarto elemento `label` dovrebbe contenere del testo.
```js
assert.notEmpty(document.querySelectorAll('ul.answers-list > li > label')?.[3]?.textContent?.trim());
```
Dovresti mettere il testo nel primo elemento `label` dopo l'elemento `input`.
```js
assert.match(document.querySelectorAll('ul.answers-list > li > label')?.[0]?.innerHTML, />[\s\S]+[a-zA-Z]/);
```
Dovresti mettere il testo nel secondo elemento `label` dopo l'elemento `input`.
```js
assert.match(document.querySelectorAll('ul.answers-list > li > label')?.[1]?.innerHTML, />[\s\S]+[a-zA-Z]/);
```
Dovresti mettere il testo nel terzo elemento `label` dopo l'elemento `input`.
```js
assert.match(document.querySelectorAll('ul.answers-list > li > label')?.[2]?.innerHTML, />[\s\S]+[a-zA-Z]/);
```
Dovresti mettere il testo nel quarto elemento `label` dopo l'elemento `input`.
```js
assert.match(document.querySelectorAll('ul.answers-list > li > label')?.[3]?.innerHTML, />[\s\S]+[a-zA-Z]/);
```
Dovresti dare al primo `label` un testo di `True` o `False`.
```js
assert.include(['True', 'False'], document.querySelectorAll('ul.answers-list > li > label')?.[0]?.textContent?.trim());
```
Dovresti dare al tuo secondo elemento `label` il testo `True`.
```js
const l = (n) => document.querySelectorAll('ul.answers-list > li > label')?.[n]?.textContent?.trim();
assert(l(0) === 'False' ? l(1) === 'True' : true);
```
Dovresti dare al tuo secondo elemento `label` il testo `False`.
```js
const l = (n) => document.querySelectorAll('ul.answers-list > li > label')?.[n]?.textContent?.trim();
assert(l(0) === 'True' ? l(1) === 'False' : true);
```
Dovresti dare al terzo `label` un testo di `True` o `False`.
```js
assert.include(['True', 'False'], document.querySelectorAll('ul.answers-list > li > label')?.[2]?.textContent?.trim());
```
Dovresti dare al tuo quarto elemento `label` il testo `True`.
```js
const l = (n) => document.querySelectorAll('ul.answers-list > li > label')?.[n]?.textContent?.trim();
assert(l(2) === 'False' ? l(3) === 'True' : true);
```
Dovresti dare al tuo quarto elemento `label` il testo `False`.
```js
const l = (n) => document.querySelectorAll('ul.answers-list > li > label')?.[n]?.textContent?.trim();
assert(l(2) === 'True' ? l(3) === 'False' : true);
```
Dovresti dare al primo `input` un `value` corrispondente al testo contenuto in `label`.
```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());
```
Dovresti dare al secondo `input` un `value` corrispondente al testo contenuto in `label`.
```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());
```
Dovresti dare al terzo `input` un `value` corrispondente al testo contenuto in `label`.
```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());
```
Dovresti dare al quarto`input` un `value` corrispondente al testo contenuto in `label`.
```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;
}
```

2
curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/basic-javascript/find-the-length-of-a-string.md
View File

@ -15,7 +15,7 @@ Você pode encontrar o tamanho de um valor de `String` ao escrever `.length` ap
console.log("Alan Peter".length); console.log("Alan Peter".length);
``` ```
O valor `10` seria exibido no console. O valor `10` seria exibido no console. Observe que o caractere de espaço entre "Alan" e "Peter" também é contado.
Por exemplo, se nós criássemos uma variável `const firstName = "Ada"`, poderíamos descobrir qual o tamanho da string `Ada` usando a propriedade `firstName.length`. Por exemplo, se nós criássemos uma variável `const firstName = "Ada"`, poderíamos descobrir qual o tamanho da string `Ada` usando a propriedade `firstName.length`.