chore(i18n,learn): processed translations (#45679)
This commit is contained in:
camperbot
GitHub
@ -15,7 +15,7 @@ Puedes encontrar la longitud de un valor de cadena (`String`) escribiendo `.leng
|
||||
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`.
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
```
|
||||
@ -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--
|
||||
|
||||
```
|
||||
@ -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;
|
||||
}
|
||||
|
||||
```
|
||||
@ -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;
|
||||
}
|
||||
```
|
||||
@ -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;
|
||||
}
|
||||
```
|
||||
@ -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;
|
||||
}
|
||||
|
||||
```
|
||||
@ -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;
|
||||
}
|
||||
|
||||
```
|
||||
@ -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;
|
||||
}
|
||||
|
||||
```
|
||||
@ -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;
|
||||
}
|
||||
|
||||
```
|
||||
@ -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;
|
||||
}
|
||||
|
||||
```
|
||||
@ -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;
|
||||
}
|
||||
|
||||
```
|
||||
@ -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;
|
||||
}
|
||||
|
||||
```
|
||||
@ -15,7 +15,7 @@ Você pode encontrar o tamanho de um valor de `String` ao escrever `.length` ap
|
||||
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`.
|
||||
|
||||
|
||||
Reference in New Issue
Block a user