From 67768b057e0176738fdaf537debd8376ebd8fc69 Mon Sep 17 00:00:00 2001 From: camperbot Date: Wed, 13 Apr 2022 20:12:58 +0530 Subject: [PATCH] chore(i18n,learn): processed translations (#45679) --- .../find-the-length-of-a-string.md | 2 +- .../61329b210dac0b08047fd6ab.md | 61 ++++ .../6140827cff96e906bd38fc2b.md | 93 ++++++ .../6140883f74224508174794c0.md | 89 ++++++ .../6141fabd6f75610664e908fd.md | 125 ++++++++ .../6141fed65b61320743da5894.md | 111 +++++++ .../6143639d5eddc7094161648c.md | 195 ++++++++++++ .../6143908b6aafb00a659ca189.md | 161 ++++++++++ .../6143cb26f7edff2dc28f7da5.md | 177 +++++++++++ .../6144e818fd5ea704fe56081d.md | 195 ++++++++++++ .../6144f8dc6849e405dd8bb829.md | 231 ++++++++++++++ .../6145e6eeaa66c605eb087fe9.md | 207 +++++++++++++ .../6145e8b5080a5f06bb0223d0.md | 287 ++++++++++++++++++ .../find-the-length-of-a-string.md | 2 +- 14 files changed, 1934 insertions(+), 2 deletions(-) create mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61329b210dac0b08047fd6ab.md create mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6140827cff96e906bd38fc2b.md create mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6140883f74224508174794c0.md create mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6141fabd6f75610664e908fd.md create mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6141fed65b61320743da5894.md create mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143639d5eddc7094161648c.md create mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143908b6aafb00a659ca189.md create mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143cb26f7edff2dc28f7da5.md create mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144e818fd5ea704fe56081d.md create mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144f8dc6849e405dd8bb829.md create mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e6eeaa66c605eb087fe9.md create mode 100644 curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e8b5080a5f06bb0223d0.md diff --git a/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/find-the-length-of-a-string.md b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/find-the-length-of-a-string.md index a1b318057a..d04f252d9c 100644 --- a/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/find-the-length-of-a-string.md +++ b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/find-the-length-of-a-string.md @@ -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`. diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61329b210dac0b08047fd6ab.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61329b210dac0b08047fd6ab.md new file mode 100644 index 0000000000..d625be2872 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61329b210dac0b08047fd6ab.md @@ -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 + + +--fcc-editable-region-- + + + + +--fcc-editable-region-- + + + + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6140827cff96e906bd38fc2b.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6140827cff96e906bd38fc2b.md new file mode 100644 index 0000000000..2cb043eaf2 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6140827cff96e906bd38fc2b.md @@ -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 + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+ + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} + +--fcc-editable-region-- +#logo { + width: max(100px, 18vw); + +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6140883f74224508174794c0.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6140883f74224508174794c0.md new file mode 100644 index 0000000000..aa928681b4 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6140883f74224508174794c0.md @@ -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 + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+ + + +``` + +```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; +} + +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6141fabd6f75610664e908fd.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6141fabd6f75610664e908fd.md new file mode 100644 index 0000000000..36d846bcd5 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6141fabd6f75610664e908fd.md @@ -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 + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+--fcc-editable-region-- +
+ +
+--fcc-editable-region-- + + + +``` + +```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; +} +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6141fed65b61320743da5894.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6141fed65b61320743da5894.md new file mode 100644 index 0000000000..ced4ad8bd1 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6141fed65b61320743da5894.md @@ -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 + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+--fcc-editable-region-- +
+
+
+
+
+--fcc-editable-region-- +
+ + + +``` + +```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; +} +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143639d5eddc7094161648c.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143639d5eddc7094161648c.md new file mode 100644 index 0000000000..47b20679b3 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143639d5eddc7094161648c.md @@ -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 + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+--fcc-editable-region-- +
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+--fcc-editable-region-- +
+

HTML

+
+
+

CSS

+
+
+
+ + + +``` + +```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; +} + +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143908b6aafb00a659ca189.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143908b6aafb00a659ca189.md new file mode 100644 index 0000000000..229bdff2a7 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143908b6aafb00a659ca189.md @@ -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 + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+--fcc-editable-region-- +
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+--fcc-editable-region-- +
+

HTML

+
+
+

CSS

+
+
+
+ + + +``` + +```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; +} + +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143cb26f7edff2dc28f7da5.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143cb26f7edff2dc28f7da5.md new file mode 100644 index 0000000000..abc6c202a4 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143cb26f7edff2dc28f7da5.md @@ -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 + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+--fcc-editable-region-- +
+

HTML

+
+

1

+
+
+
+

2

+
+
+
+--fcc-editable-region-- +
+

CSS

+
+
+
+ + + +``` + +```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; +} + +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144e818fd5ea704fe56081d.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144e818fd5ea704fe56081d.md new file mode 100644 index 0000000000..76cbee0bef --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144e818fd5ea704fe56081d.md @@ -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 + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+--fcc-editable-region-- +
+

HTML

+
+

1

+
+ +
    +
  • +
  • +
+
+
+
+

2

+
+ +
    +
  • +
  • +
+
+
+
+--fcc-editable-region-- +
+

CSS

+
+
+
+ + + +``` + +```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; +} + +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144f8dc6849e405dd8bb829.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144f8dc6849e405dd8bb829.md new file mode 100644 index 0000000000..4825c9107c --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144f8dc6849e405dd8bb829.md @@ -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 + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+
+

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +--fcc-editable-region-- +
    +
  • +
  • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • +
  • +
+--fcc-editable-region-- +
+
+
+
+

CSS

+
+
+
+ + + +``` + +```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; +} + +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e6eeaa66c605eb087fe9.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e6eeaa66c605eb087fe9.md new file mode 100644 index 0000000000..b6e3a98cbb --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e6eeaa66c605eb087fe9.md @@ -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 + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+
+

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +--fcc-editable-region-- +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+--fcc-editable-region-- +
+
+
+
+

CSS

+
+
+
+ + + +``` + +```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; +} + +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e8b5080a5f06bb0223d0.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e8b5080a5f06bb0223d0.md new file mode 100644 index 0000000000..3c37cc1054 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e8b5080a5f06bb0223d0.md @@ -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 + + + + + + + Accessibility Quiz + + + +
+ +

HTML/CSS Quiz

+ +
+
+
+
+

Student Info

+
+ + +
+
+ + +
+
+ + +
+
+
+

HTML

+
+

1

+
+ + The legend element represents a caption for the content of its + parent fieldset element + +--fcc-editable-region-- +
    +
  • + +
    • +
  • + +
    • +
+
+
+
+

2

+
+ + A label element nesting an input element is required to have a + for attribute with the same value as the input's id + +
    +
  • + +
    • +
  • + +
    • +
+--fcc-editable-region-- +
+
+
+
+

CSS

+
+
+
+ + + +``` + +```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; +} + +``` diff --git a/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/basic-javascript/find-the-length-of-a-string.md b/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/basic-javascript/find-the-length-of-a-string.md index 056f5fef4b..9f4b1803d8 100644 --- a/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/basic-javascript/find-the-length-of-a-string.md +++ b/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/basic-javascript/find-the-length-of-a-string.md @@ -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`.