diff --git a/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/basic-javascript/multiple-identical-options-in-switch-statements.md b/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/basic-javascript/multiple-identical-options-in-switch-statements.md index b94f5c079de..634cd2f46b3 100644 --- a/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/basic-javascript/multiple-identical-options-in-switch-statements.md +++ b/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/basic-javascript/multiple-identical-options-in-switch-statements.md @@ -13,7 +13,7 @@ dashedName: multiple-identical-options-in-switch-statements ```js let result = ""; -switch(val) { +switch (val) { case 1: case 2: case 3: @@ -127,7 +127,7 @@ sequentialSizes(1); function sequentialSizes(val) { let answer = ""; - switch(val) { + switch (val) { case 1: case 2: case 3: diff --git a/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/basic-javascript/replacing-if-else-chains-with-switch.md b/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/basic-javascript/replacing-if-else-chains-with-switch.md index 8ebaddff5bb..a1de91ea11c 100644 --- a/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/basic-javascript/replacing-if-else-chains-with-switch.md +++ b/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/basic-javascript/replacing-if-else-chains-with-switch.md @@ -24,7 +24,7 @@ if (val === 1) { 可以被下面替代： ```js -switch(val) { +switch (val) { case 1: answer = "a"; break; @@ -136,7 +136,7 @@ chainToSwitch(7); function chainToSwitch(val) { let answer = ""; - switch(val) { + switch (val) { case "bob": answer = "Marley"; break; diff --git a/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/basic-javascript/selecting-from-many-options-with-switch-statements.md b/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/basic-javascript/selecting-from-many-options-with-switch-statements.md index e1058894151..9709f84e64c 100644 --- a/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/basic-javascript/selecting-from-many-options-with-switch-statements.md +++ b/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/basic-javascript/selecting-from-many-options-with-switch-statements.md @@ -14,7 +14,7 @@ dashedName: selecting-from-many-options-with-switch-statements 這是 `switch` 語句的示例： ```js -switch(lowercaseLetter) { +switch (lowercaseLetter) { case "a": console.log("A"); break; @@ -96,7 +96,7 @@ caseInSwitch(1); function caseInSwitch(val) { let answer = ""; - switch(val) { + switch (val) { case 1: answer = "alpha"; break; diff --git a/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/basic-javascript/multiple-identical-options-in-switch-statements.md b/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/basic-javascript/multiple-identical-options-in-switch-statements.md index dfe62e3d652..8ee79a51507 100644 --- a/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/basic-javascript/multiple-identical-options-in-switch-statements.md +++ b/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/basic-javascript/multiple-identical-options-in-switch-statements.md @@ -13,7 +13,7 @@ dashedName: multiple-identical-options-in-switch-statements ```js let result = ""; -switch(val) { +switch (val) { case 1: case 2: case 3: @@ -127,7 +127,7 @@ sequentialSizes(1); function sequentialSizes(val) { let answer = ""; - switch(val) { + switch (val) { case 1: case 2: case 3: diff --git a/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/basic-javascript/replacing-if-else-chains-with-switch.md b/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/basic-javascript/replacing-if-else-chains-with-switch.md index 0416c6010be..4289d4fcaf6 100644 --- a/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/basic-javascript/replacing-if-else-chains-with-switch.md +++ b/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/basic-javascript/replacing-if-else-chains-with-switch.md @@ -24,7 +24,7 @@ if (val === 1) { 可以被下面替代： ```js -switch(val) { +switch (val) { case 1: answer = "a"; break; @@ -136,7 +136,7 @@ chainToSwitch(7); function chainToSwitch(val) { let answer = ""; - switch(val) { + switch (val) { case "bob": answer = "Marley"; break; diff --git a/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/basic-javascript/selecting-from-many-options-with-switch-statements.md b/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/basic-javascript/selecting-from-many-options-with-switch-statements.md index 8d191929e48..cfabbefda72 100644 --- a/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/basic-javascript/selecting-from-many-options-with-switch-statements.md +++ b/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/basic-javascript/selecting-from-many-options-with-switch-statements.md @@ -14,7 +14,7 @@ dashedName: selecting-from-many-options-with-switch-statements 这是 `switch` 语句的示例： ```js -switch(lowercaseLetter) { +switch (lowercaseLetter) { case "a": console.log("A"); break; @@ -96,7 +96,7 @@ caseInSwitch(1); function caseInSwitch(val) { let answer = ""; - switch(val) { + switch (val) { case 1: answer = "alpha"; break; diff --git a/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/multiple-identical-options-in-switch-statements.md b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/multiple-identical-options-in-switch-statements.md index 6c95d8050f3..0f002d81832 100644 --- a/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/multiple-identical-options-in-switch-statements.md +++ b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/multiple-identical-options-in-switch-statements.md @@ -13,7 +13,7 @@ Si la sentencia `break` es omitida en un caso (`case`) de una sentencia `switch` ```js let result = ""; -switch(val) { +switch (val) { case 1: case 2: case 3: @@ -127,7 +127,7 @@ sequentialSizes(1); function sequentialSizes(val) { let answer = ""; - switch(val) { + switch (val) { case 1: case 2: case 3: diff --git a/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/replacing-if-else-chains-with-switch.md b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/replacing-if-else-chains-with-switch.md index 93d1594bc9c..af1290a3358 100644 --- a/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/replacing-if-else-chains-with-switch.md +++ b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/replacing-if-else-chains-with-switch.md @@ -24,7 +24,7 @@ if (val === 1) { puede reemplazarse por: ```js -switch(val) { +switch (val) { case 1: answer = "a"; break; @@ -136,7 +136,7 @@ chainToSwitch(7); function chainToSwitch(val) { let answer = ""; - switch(val) { + switch (val) { case "bob": answer = "Marley"; break; diff --git a/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/selecting-from-many-options-with-switch-statements.md b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/selecting-from-many-options-with-switch-statements.md index 50dbad3f081..3e5ccac0b65 100644 --- a/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/selecting-from-many-options-with-switch-statements.md +++ b/curriculum/challenges/espanol/02-javascript-algorithms-and-data-structures/basic-javascript/selecting-from-many-options-with-switch-statements.md @@ -14,7 +14,7 @@ Si tienes muchas opciones para elegir, usa una declaración switch. U Aquí hay un ejemplo de una declaración `switch`: ```js -switch(lowercaseLetter) { +switch (lowercaseLetter) { case "a": console.log("A"); break; @@ -96,7 +96,7 @@ caseInSwitch(1); function caseInSwitch(val) { let answer = ""; - switch(val) { + switch (val) { case 1: answer = "alpha"; break; diff --git a/curriculum/challenges/italian/02-javascript-algorithms-and-data-structures/basic-javascript/multiple-identical-options-in-switch-statements.md b/curriculum/challenges/italian/02-javascript-algorithms-and-data-structures/basic-javascript/multiple-identical-options-in-switch-statements.md index 75ac5877718..360bb423834 100644 --- a/curriculum/challenges/italian/02-javascript-algorithms-and-data-structures/basic-javascript/multiple-identical-options-in-switch-statements.md +++ b/curriculum/challenges/italian/02-javascript-algorithms-and-data-structures/basic-javascript/multiple-identical-options-in-switch-statements.md @@ -13,7 +13,7 @@ Se l'istruzione `break` viene omessa da un'istruzione `switch` e in particolare ```js let result = ""; -switch(val) { +switch (val) { case 1: case 2: case 3: @@ -127,7 +127,7 @@ sequentialSizes(1); function sequentialSizes(val) { let answer = ""; - switch(val) { + switch (val) { case 1: case 2: case 3: diff --git a/curriculum/challenges/italian/02-javascript-algorithms-and-data-structures/basic-javascript/replacing-if-else-chains-with-switch.md b/curriculum/challenges/italian/02-javascript-algorithms-and-data-structures/basic-javascript/replacing-if-else-chains-with-switch.md index 0495ccbb344..78f4e0690c4 100644 --- a/curriculum/challenges/italian/02-javascript-algorithms-and-data-structures/basic-javascript/replacing-if-else-chains-with-switch.md +++ b/curriculum/challenges/italian/02-javascript-algorithms-and-data-structures/basic-javascript/replacing-if-else-chains-with-switch.md @@ -24,7 +24,7 @@ if (val === 1) { può essere sostituito con: ```js -switch(val) { +switch (val) { case 1: answer = "a"; break; @@ -136,7 +136,7 @@ chainToSwitch(7); function chainToSwitch(val) { let answer = ""; - switch(val) { + switch (val) { case "bob": answer = "Marley"; break; diff --git a/curriculum/challenges/italian/02-javascript-algorithms-and-data-structures/basic-javascript/selecting-from-many-options-with-switch-statements.md b/curriculum/challenges/italian/02-javascript-algorithms-and-data-structures/basic-javascript/selecting-from-many-options-with-switch-statements.md index 155d38ab423..02e87033709 100644 --- a/curriculum/challenges/italian/02-javascript-algorithms-and-data-structures/basic-javascript/selecting-from-many-options-with-switch-statements.md +++ b/curriculum/challenges/italian/02-javascript-algorithms-and-data-structures/basic-javascript/selecting-from-many-options-with-switch-statements.md @@ -14,7 +14,7 @@ Se hai molte opzioni tra cui scegliere, usa un'istruzione switch. Un' Ecco un esempio di un'istruzione `switch`: ```js -switch(lowercaseLetter) { +switch (lowercaseLetter) { case "a": console.log("A"); break; @@ -96,7 +96,7 @@ caseInSwitch(1); function caseInSwitch(val) { let answer = ""; - switch(val) { + switch (val) { case 1: answer = "alpha"; break; diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537485c4f2a624f18d7794.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537485c4f2a624f18d7794.md new file mode 100644 index 00000000000..a777b662e71 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537485c4f2a624f18d7794.md @@ -0,0 +1,110 @@ +--- +id: 61537485c4f2a624f18d7794 +title: Step 1 +challengeType: 0 +dashedName: step-1 +--- + +# --description-- + +Inizia con il testo HTML standard. Aggiungi la dichiarazione `DOCTYPE` e gli elementi `html`, `head` e `body`. + +# --hints-- + +Il codice dovrebbe contenere il riferimento `DOCTYPE`. + +```js +assert(code.match(/`. + +```js +assert(code.match(//gi)); +``` + +L'elemento `html` dovrebbe avere un tag di apertura. + +```js +assert(code.match(//gi)); +``` + +L'elemento `html` dovrebbe avere un tag di chiusura. + +```js +assert(code.match(/<\/html\s*>/)); +``` + +La dichiarazione `DOCTYPE` dovrebbe essere all'inizio del tuo HTML. + +```js +assert(__helpers.removeHtmlComments(code).match(/^\s*/i)); +``` + +Dovresti avere un tag `head` di apertura. + +```js +assert(code.match(//i)); +``` + +Dovresti avere un tag `head` di chiusura. + +```js +assert(code.match(/<\/head\s*>/i)); +``` + +Dovresti avere un tag `body` di apertura. + +```js +assert(code.match(//i)); +``` + +Dovresti avere un tag `body` di chiusura. + +```js +assert(code.match(/<\/body\s*>/i)); +``` + +Gli elementi `head` e `body` dovrebbero essere fratelli. + +```js +assert(document.querySelector('head')?.nextElementSibling?.localName === 'body'); +``` + +L'elemento `head` dovrebbe essere all'interno dell'elemento `html`. + +```js +assert([...document.querySelector('html')?.children].some(x => x?.localName === 'head')); +``` + +L' elemento `body` dovrebbe essere all'interno dell'elemento `html`. + +```js +assert([...document.querySelector('html')?.children].some(x => x?.localName === 'body')); +``` + +# --seed-- + +## --seed-contents-- + +```html +--fcc-editable-region-- + +--fcc-editable-region-- +``` + +```css + +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537a8054753e2f1f2a1574.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537a8054753e2f1f2a1574.md new file mode 100644 index 00000000000..82b78dcee6c --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537a8054753e2f1f2a1574.md @@ -0,0 +1,58 @@ +--- +id: 61537a8054753e2f1f2a1574 +title: Step 2 +challengeType: 0 +dashedName: step-2 +--- + +# --description-- + +All'interno dell'elemento `head`, aggiungi un tag `meta` con l'attributo `name` impostato su `viewport` e l'attributo `content` con il valore `width=device-width, initial-scale=1`. + +Aggiungi anche un tag `meta` con l'attributo `charset` impostato su `UTF-8`. + +# --hints-- + +Dovresti avere due elementi `meta`. + +```js +const meta = document.querySelectorAll('meta'); +assert(meta?.length === 2); +``` + +Un elemento `meta` dovrebbe avere un attributo `name` con il valore `viewport` e un attributo `content` con il valore `width=device-width, initial-scale=1.0`. + +```js +const meta = [...document.querySelectorAll('meta')]; +const target = meta?.find(m => m?.getAttribute('name') === 'viewport' && m?.getAttribute('content').match(/width=device-width,\s?initial-scale=1(.0)?/) && !m?.getAttribute('charset')); +assert.exists(target); +``` + +L'altro elemento `meta` dovrebbe avere l'attributo `charset` con il valore `UTF-8`. + +```js +const meta = [...document.querySelectorAll('meta')]; +const target = meta?.find(m => !m?.getAttribute('name') && !m?.getAttribute('content') && m?.getAttribute('charset')?.toLowerCase() === 'utf-8'); +assert.exists(target); +``` + +# --seed-- + +## --seed-contents-- + +```html +--fcc-editable-region-- + + + + + + + + +--fcc-editable-region-- +``` + +```css + +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537bb9b1a29430ac15ad38.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537bb9b1a29430ac15ad38.md new file mode 100644 index 00000000000..b9d669c7e76 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537bb9b1a29430ac15ad38.md @@ -0,0 +1,62 @@ +--- +id: 61537bb9b1a29430ac15ad38 +title: Step 3 +challengeType: 0 +dashedName: step-3 +--- + +# --description-- + +All'interno dell'elemento `head`, aggiungi un elemento `title` con il testo `Photo Gallery` e un elemento `link` per collegare il file `styles.css` alla pagina. + +# --hints-- + +L'elemento `link` dovrebbe avere un attributo `href` con il valore `styles.css`. + +```js +assert.match(code, / + + + + + + + + + +--fcc-editable-region-- +``` + +```css + +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537c5f81f0cf325b4a854c.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537c5f81f0cf325b4a854c.md new file mode 100644 index 00000000000..8b949603254 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537c5f81f0cf325b4a854c.md @@ -0,0 +1,62 @@ +--- +id: 61537c5f81f0cf325b4a854c +title: Step 4 +challengeType: 0 +dashedName: step-4 +--- + +# --description-- + +All'interno dell'elemento `body`, crea un `div` con l'attributo `class` impostato su `header`. + +All'interno dell'elemento `.header` annida un elemento `h1` con il testo `CSS FLEXBOX PHOTO GALLERY`. + +# --hints-- + +Dovresti avere un elemento `div` all'interno dell'elemento `body`. + +```js +assert.exists(document.querySelector('body')?.querySelector('div')) +``` + +L'elemento `div` dovrebbe avere l'attributo `class` con il valore `header`. + +```js +assert(document?.querySelector('body')?.querySelector('div')?.classList?.contains('header')) +``` + +L'elemento `.header` dovrebbe avere un elemento `h1`. + +```js +assert.exists(document.querySelector('.header')?.querySelector('h1')); +``` + +L'elemento `h1` dovrebbe contenere il testo `CSS FLEXBOX PHOTO GALLERY`. Ricorda che le maiuscole contano. + +```js +assert(document?.querySelector('.header')?.querySelector('h1')?.innerText === 'CSS FLEXBOX PHOTO GALLERY') +``` + +# --seed-- + +## --seed-contents-- + +```html +--fcc-editable-region-- + + + + + + Photo Gallery + + + + + +--fcc-editable-region-- +``` + +```css + +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537c9eecea6a335db6da79.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537c9eecea6a335db6da79.md new file mode 100644 index 00000000000..9b06fb03699 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537c9eecea6a335db6da79.md @@ -0,0 +1,65 @@ +--- +id: 61537c9eecea6a335db6da79 +title: Step 5 +challengeType: 0 +dashedName: step-5 +--- + +# --description-- + +Al di sotto dell'elemento `.header`, crea un nuovo elemento `div` con un attributo `id` del valore `gallery`. + +In quest'elemento `#gallery`, crea dieci elementi `img`. + +# --hints-- + +Dovresti creare un secondo elemento `div` nell'elemento `body`. + +```js +assert(document.querySelector('body')?.querySelectorAll('div')?.length === 2); +``` + +Il nuovo elemento `div` dovrebbe trovarsi dopo l'elemento `.header`. + +```js +assert(document.querySelector('body')?.querySelectorAll('div')?.[0]?.classList?.contains('header')); +``` + +Il nuovo elemento `div` dovrebbe avere un `id` con il valore `gallery`. + +```js +assert(document.querySelector('body')?.querySelectorAll('div')?.[1]?.id === 'gallery'); +``` + +L'elemento `#gallery` dovrebbe contenere dieci elementi `img`. + +```js +assert(document.querySelector('#gallery')?.querySelectorAll('img')?.length === 10); +``` + +# --seed-- + +## --seed-contents-- + +```html +--fcc-editable-region-- + + + + + + Photo Gallery + + + +
+

CSS FLEXBOX PHOTO GALLERY

+
+ + +--fcc-editable-region-- +``` + +```css + +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537d86bdc3dd343688fceb.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537d86bdc3dd343688fceb.md new file mode 100644 index 00000000000..871f5da3a45 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537d86bdc3dd343688fceb.md @@ -0,0 +1,120 @@ +--- +id: 61537d86bdc3dd343688fceb +title: Step 6 +challengeType: 0 +dashedName: step-6 +--- + +# --description-- + +Adesso, dovresti assegnare a ogni elemento `img` un attributo `src`. Stai per utilizzare il formato `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/#.jpg`, sostituendo `#` con l'ordine dell'elemento `img`. + +Quindi il primo elemento `img` avrà `1.jpg`, il secondo `2.jpg` e così via. + +# --hints-- + +Tutti gli elementi `img` dovrebbero avere un attributo `src`. + +```js +const images = [...document.querySelectorAll('img')]; +assert(images.every(image => image.getAttribute('src'))); +``` + +Il primo elemento `img` dovrebbe avere un attributo `src` con il valore `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg`. + +```js +assert(document.querySelectorAll('img')?.[0]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg'); +``` + +Il secondo elemento `img` dovrebbe avere un attributo `src` con il valore `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg`. + +```js +assert(document.querySelectorAll('img')?.[1]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg'); +``` + +Il terzo elemento `img` dovrebbe avere un attributo `src` con il valore `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg`. + +```js +assert(document.querySelectorAll('img')?.[2]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg'); +``` + +Il quarto elemento `img` dovrebbe avere un attributo `src` con il valore `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg`. + +```js +assert(document.querySelectorAll('img')?.[3]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg'); +``` + +Il quinto elemento `img` dovrebbe avere un attributo `src` con il valore `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg`. + +```js +assert(document.querySelectorAll('img')?.[4]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg'); +``` + +Il sesto elemento `img` dovrebbe avere un attributo `src` con il valore `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg`. + +```js +assert(document.querySelectorAll('img')?.[5]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg'); +``` + +Il settimo elemento `img` dovrebbe avere un attributo `src` con il valore `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg`. + +```js +assert(document.querySelectorAll('img')?.[6]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg'); +``` + +L'ottavo elemento `img` dovrebbe avere un attributo `src` con il valore `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg`. + +```js +assert(document.querySelectorAll('img')?.[7]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg'); +``` + +Il nono elemento `img` dovrebbe avere un attributo `src` con il valore `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg`. + +```js +assert(document.querySelectorAll('img')?.[8]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg'); +``` + +Il decimo elemento `img` dovrebbe avere un attributo `src` con il valore `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/10.jpg`. + +```js +assert(document.querySelectorAll('img')?.[9]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/10.jpg'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Photo Gallery + + + +
+

CSS FLEXBOX PHOTO GALLERY

+
+--fcc-editable-region-- + +--fcc-editable-region-- + + +``` + +```css + +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615380dff67172357fcf0425.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615380dff67172357fcf0425.md new file mode 100644 index 00000000000..6bff417feb2 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615380dff67172357fcf0425.md @@ -0,0 +1,63 @@ +--- +id: 615380dff67172357fcf0425 +title: Step 7 +challengeType: 0 +dashedName: step-7 +--- + +# --description-- + +Normalizza il box model creando un selettore `*` e impostando la proprietà `box-sizing` su `border-box`. + +# --hints-- + +Dovresti avere un selettore `*`. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('*')); +``` + +Il selettore `*` dovrebbe avere una proprietà `box-sizing` con il valore `border-box`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('*')?.boxSizing === 'border-box'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Photo Gallery + + + +
+

CSS FLEXBOX PHOTO GALLERY

+
+ + + +``` + +```css +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153893900438b4643590367.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153893900438b4643590367.md new file mode 100644 index 00000000000..5f77c73cdb8 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153893900438b4643590367.md @@ -0,0 +1,78 @@ +--- +id: 6153893900438b4643590367 +title: Step 9 +challengeType: 0 +dashedName: step-9 +--- + +# --description-- + +Rimuovi il margine dall'elemento `body`, imposta il carattere su `Arial` e il colore di sfondo su `#EBE7E7`. + +# --hints-- + +Dovresti avere un selettore `body`. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('body')) +``` + +Il selettore `body` dovrebbe avere una proprietà `font-family` con il valore `Arial`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('body')?.fontFamily === 'Arial'); +``` + +Il selettore `body` dovrebbe avere una proprietà `background-color` con il valore `#EBE7E7`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor === 'rgb(235, 231, 231)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Photo Gallery + + + +
+

CSS FLEXBOX PHOTO GALLERY

+
+ + + +``` + +```css +* { + box-sizing: border-box; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +#gallery img { + width: 25%; + height: 300px; +} +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153897c27f6334716ee5abe.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153897c27f6334716ee5abe.md new file mode 100644 index 00000000000..e87631c783d --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153897c27f6334716ee5abe.md @@ -0,0 +1,90 @@ +--- +id: 6153897c27f6334716ee5abe +title: Step 10 +challengeType: 0 +dashedName: step-10 +--- + +# --description-- + +Allinea il testo dell'elemento `.header` al centro, assegnagli un padding di `32px` su tutti i lati e imposta lo sfondo su `#E0DDDD`. + +# --hints-- + +Dovresti avere un selettore `.header`. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.header')); +``` + +Il selettore `.header` dovrebbe avere una proprietà `text-align` con il valore `center`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.header')?.textAlign === 'center'); +``` + +Il selettore `.header` dovrebbe avere una proprietà `padding` con il valore `32px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.header')?.padding === '32px'); +``` + +Il selettore `.header` dovrebbe avere una proprietà `background-color` con il valore `#E0DDDD`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.header')?.backgroundColor === 'rgb(224, 221, 221)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Photo Gallery + + + +
+

CSS FLEXBOX PHOTO GALLERY

+
+ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + margin: 0; + font-family: Arial; + background: #EBE7E7; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +#gallery img { + width: 25%; + height: 300px; +} +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615389bd81347947ea7ba896.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615389bd81347947ea7ba896.md new file mode 100644 index 00000000000..6da5b1c7810 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615389bd81347947ea7ba896.md @@ -0,0 +1,86 @@ +--- +id: 615389bd81347947ea7ba896 +title: Step 11 +challengeType: 0 +dashedName: step-11 +--- + +# --description-- + +Flexbox è un approccio monodimensionale per il layout CSS che si concentra sul flusso dei contenuti. Offre la possibilità di controllare il modo in cui gli oggetti sono distanziati e allineati all'interno di un contenitore. + +Per utilizzare Flexbox su un elemento, gli si assegna una proprietà `display` con il valore `flex`. Crea un selettore `#gallery` e assegnagli questa proprietà. + +# --hints-- + +Dovresti avere un selettore `#gallery`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#gallery')); +``` + +Il selettore `#gallery` dovrebbe avere una proprietà `display` con il valore `flex`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#gallery')?.display === 'flex'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Photo Gallery + + + +
+

CSS FLEXBOX PHOTO GALLERY

+
+ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + margin: 0; + font-family: Arial; + background: #EBE7E7; +} + +.header { + text-align: center; + padding: 32px; + background: #E0DDDD; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +#gallery img { + width: 25%; + height: 300px; +} +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153908a366afb4d57185c8d.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153908a366afb4d57185c8d.md new file mode 100644 index 00000000000..9c036ffa0f4 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153908a366afb4d57185c8d.md @@ -0,0 +1,82 @@ +--- +id: 6153908a366afb4d57185c8d +title: Step 12 +challengeType: 0 +dashedName: step-12 +--- + +# --description-- + +Puoi pensare a Flexbox come se avessi due assi, l'asse principale e l'asse trasversale. L'asse principale è determinato dalla proprietà `flex-direction`. Se `flex-direction` è impostata su `row` o `row-reverse`, l'asse principale è orizzontale. Se `flex-direction` è impostata su `column` o `column-reverse`, l'asse principale è verticale. + +Assegna al tuo selettore `#gallery` una proprietà `flex-direction` con il valore `row`. + +# --hints-- + +Il selettore `#gallery` dovrebbe avere una proprietà `flex-direction` con il valore `row`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#gallery')?.flexDirection === 'row'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Photo Gallery + + + +
+

CSS FLEXBOX PHOTO GALLERY

+
+ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + margin: 0; + font-family: Arial; + background: #EBE7E7; +} + +.header { + text-align: center; + padding: 32px; + background: #E0DDDD; +} + +--fcc-editable-region-- +#gallery { + display: flex; +} +--fcc-editable-region-- + +#gallery img { + width: 25%; + height: 300px; +} +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153938dce8b294ff8f5a4e9.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153938dce8b294ff8f5a4e9.md new file mode 100644 index 00000000000..431886f6610 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153938dce8b294ff8f5a4e9.md @@ -0,0 +1,84 @@ +--- +id: 6153938dce8b294ff8f5a4e9 +title: Step 14 +challengeType: 0 +dashedName: step-14 +--- + +# --description-- + +La proprietà `justify-content` determina come sono posizionati gli oggetti all'interno di un contenitore flex lungo l'asse principale, influenzando la loro posizione e lo spazio intorno a loro. + +Assegna al selettore `#gallery` una proprietà `justify-content` con il valore `center`. + +# --hints-- + +Il selettore `#gallery` dovrebbe avere una proprietà `justify-content` con il valore `center`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#gallery')?.justifyContent === 'center'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Photo Gallery + + + +
+

CSS FLEXBOX PHOTO GALLERY

+
+ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + margin: 0; + font-family: Arial; + background: #EBE7E7; +} + +.header { + text-align: center; + padding: 32px; + background: #E0DDDD; +} + +--fcc-editable-region-- +#gallery { + display: flex; + flex-direction: row; + flex-wrap: wrap; +} +--fcc-editable-region-- + +#gallery img { + width: 25%; + height: 300px; +} +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153947986535e5117e60615.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153947986535e5117e60615.md new file mode 100644 index 00000000000..7c1a171dca1 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153947986535e5117e60615.md @@ -0,0 +1,85 @@ +--- +id: 6153947986535e5117e60615 +title: Step 15 +challengeType: 0 +dashedName: step-15 +--- + +# --description-- + +La proprietà `align-items` posiziona il contenuto flex lungo l'asse trasversale. In questo caso, con la proprietà `flex-direction` impostata su `row`, l'asse trasversale sarebbe quello verticale. + +Per centrare verticalmente le immagini, assegna al selettore `#gallery` una proprietà `align-items` con il valore `center`. + +# --hints-- + +Il selettore `#gallery` dovrebbe avere una proprietà `align-items` con il valore `center`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#gallery')?.alignItems === 'center'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Photo Gallery + + + +
+

CSS FLEXBOX PHOTO GALLERY

+
+ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + margin: 0; + font-family: Arial; + background: #EBE7E7; +} + +.header { + text-align: center; + padding: 32px; + background: #E0DDDD; +} + +--fcc-editable-region-- +#gallery { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; +} +--fcc-editable-region-- + +#gallery img { + width: 25%; + height: 300px; +} +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539e07e7430b528fbffe21.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539e07e7430b528fbffe21.md new file mode 100644 index 00000000000..8633300481e --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539e07e7430b528fbffe21.md @@ -0,0 +1,87 @@ +--- +id: 61539e07e7430b528fbffe21 +title: Step 16 +challengeType: 0 +dashedName: step-16 +--- + +# --description-- + +Assegna al selettore `#gallery` una proprietà `padding` con il valore `0 4px`. + +# --hints-- + +Il selettore `#gallery` dovrebbe avere una proprietà `padding` con il valore `0 4px`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('#gallery')?.paddingTop, '0px'); +assert.equal(new __helpers.CSSHelp(document).getStyle('#gallery')?.paddingBottom, '0px'); +assert.equal(new __helpers.CSSHelp(document).getStyle('#gallery')?.paddingLeft, '4px'); +assert.equal(new __helpers.CSSHelp(document).getStyle('#gallery')?.paddingRight, '4px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Photo Gallery + + + +
+

CSS FLEXBOX PHOTO GALLERY

+
+ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + margin: 0; + font-family: Arial; + background: #EBE7E7; +} + +.header { + text-align: center; + padding: 32px; + background: #E0DDDD; +} + +--fcc-editable-region-- +#gallery { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + align-items: center; +} +--fcc-editable-region-- + +#gallery img { + width: 25%; + height: 300px; +} +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539f32a206bd53ec116465.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539f32a206bd53ec116465.md new file mode 100644 index 00000000000..b72526f006c --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539f32a206bd53ec116465.md @@ -0,0 +1,87 @@ +--- +id: 61539f32a206bd53ec116465 +title: Step 17 +challengeType: 0 +dashedName: step-17 +--- + +# --description-- + +Nota come alcune delle immagini sono diventate distorte. Questo perché le immagini hanno diverse proporzioni. Piuttosto che impostare individualmente le proporzioni delle immagini, puoi utilizzare la proprietà `object-fit` per determinare come dovrebbero comportarsi. + +Assegna al selettore `#gallery img` la proprietà `object-fit` con il valore `cover`. Questo dirà all'immagine di riempire il contenitore `img` mantenendo le proporzioni. + +# --hints-- + +Il selettore `#gallery img` dovrebbe avere una proprietà `object-fit` con il valore `cover`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#gallery img')?.objectFit === 'cover'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Photo Gallery + + + +
+

CSS FLEXBOX PHOTO GALLERY

+
+ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + margin: 0; + font-family: Arial; + background: #EBE7E7; +} + +.header { + text-align: center; + padding: 32px; + background: #E0DDDD; +} + +#gallery { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + align-items: center; + padding: 0 4px; +} + +--fcc-editable-region-- +#gallery img { + width: 25%; + height: 300px; +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a04847abee57a3a406ac.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a04847abee57a3a406ac.md new file mode 100644 index 00000000000..6e0d85f34d3 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a04847abee57a3a406ac.md @@ -0,0 +1,94 @@ +--- +id: 6153a04847abee57a3a406ac +title: Step 18 +challengeType: 0 +dashedName: step-18 +--- + +# --description-- + +Le immagini hanno bisogno di uno spazio tra di loro. + +Assegna al selettore `#gallery img` una proprietà `margin-top` di `8px` e una proprietà `padding` di `0 4px`. + +# --hints-- + +Il selettore `#gallery img` dovrebbe avere una proprietà `margin-top` con il valore `8px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#gallery img')?.marginTop === '8px'); +``` + +Il selettore `#gallery img` dovrebbe avere una proprietà `padding` con il valore `0 4px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#gallery img')?.padding === '0px 4px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Photo Gallery + + + +
+

CSS FLEXBOX PHOTO GALLERY

+
+ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + margin: 0; + font-family: Arial; + background: #EBE7E7; +} + +.header { + text-align: center; + padding: 32px; + background: #E0DDDD; +} + +#gallery { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + align-items: center; + padding: 0 4px; +} + +--fcc-editable-region-- +#gallery img { + width: 25%; + height: 300px; + object-fit: cover; +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3485f0b20591d26d2a1.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3485f0b20591d26d2a1.md new file mode 100644 index 00000000000..88fad02b554 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3485f0b20591d26d2a1.md @@ -0,0 +1,88 @@ +--- +id: 6153a3485f0b20591d26d2a1 +title: Step 19 +challengeType: 0 +dashedName: step-19 +--- + +# --description-- + +Smussa leggermente le immagini dando al selettore `#gallery img` una proprietà `border-radius` di `10px`. + +# --hints-- + +Il selettore `#gallery img` dovrebbe avere una proprietà `border-radius` con il valore `10px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#gallery img')?.borderRadius === '10px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Photo Gallery + + + +
+

CSS FLEXBOX PHOTO GALLERY

+
+ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + margin: 0; + font-family: Arial; + background: #EBE7E7; +} + +.header { + text-align: center; + padding: 32px; + background: #E0DDDD; +} + +#gallery { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + align-items: center; + padding: 0 4px; +} + +--fcc-editable-region-- +#gallery img { + width: 25%; + height: 300px; + object-fit: cover; + margin-top: 8px; + padding: 0 4px; +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3952facd25a83fe8083.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3952facd25a83fe8083.md new file mode 100644 index 00000000000..bef671cd07f --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3952facd25a83fe8083.md @@ -0,0 +1,112 @@ +--- +id: 6153a3952facd25a83fe8083 +title: Step 20 +challengeType: 0 +dashedName: step-20 +--- + +# --description-- + +Crea una media query per schermi di larghezza inferiore a `800px`. Al suo interno, crea una regola `#gallery img` e imposta la proprietà `width` sul `50%`. In questo modo, convertirai la tua galleria in un layout a due colonne. + +# --hints-- + +Dovresti aggiungere una nuova `@media` query. + +```js +assert(new __helpers.CSSHelp(document).getCSSRules('media')?.length === 1); +``` + +La nuova `@media` query dovrebbe avere una proprietà `max-width` con il valore `800px`. + +```js +assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[0]?.media?.mediaText === '(max-width: 800px)'); +``` + +La `@media` query dovrebbe avere una regola `#gallery img`. + +```js +const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 800px)'); +assert(rules?.find(rule => rule.selectorText === '#gallery img')); +``` + +La regola `#gallery img` dovrebbe avere una proprietà `width` con il valore `50%`. + +```js +const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 800px)'); +const imgRule = rules?.find(rule => rule.selectorText === '#gallery img'); +assert(imgRule?.style.width === '50%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Photo Gallery + + + +
+

CSS FLEXBOX PHOTO GALLERY

+
+ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + margin: 0; + font-family: Arial; + background: #EBE7E7; +} + +.header { + text-align: center; + padding: 32px; + background: #E0DDDD; +} + +#gallery { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + align-items: center; + padding: 0 4px; +} + +#gallery img { + width: 25%; + height: 300px; + object-fit: cover; + margin-top: 8px; + padding: 0 4px; + border-radius: 10px; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3ebb4f7f05b8401b716.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3ebb4f7f05b8401b716.md new file mode 100644 index 00000000000..72d7346bf6a --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3ebb4f7f05b8401b716.md @@ -0,0 +1,207 @@ +--- +id: 6153a3ebb4f7f05b8401b716 +title: Step 21 +challengeType: 0 +dashedName: step-21 +--- + +# --description-- + +Ridimensiona l'anteprima per vedere il cambiamento di layout dalla tua media query. + +Infine, crea un'altra media query per schermi con una larghezza inferiore a `600px`. In questa media query, crea una regola `#gallery img` e imposta la proprietà `width` sul `100%`. Così darai alla tua galleria un layout a colonna singola. + +La tua CSS Flexbox Photo Gallery è ora completa. + +# --hints-- + +Dovresti avere una seconda `@media` query. + +```js +assert(new __helpers.CSSHelp(document).getCSSRules('media')?.length === 2); +``` + +La nuova `@media` query dovrebbe trovarsi dopo quella esistente. + +```js +assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[0]?.media?.mediaText === '(max-width: 800px)'); +``` + +La nuova `@media` query dovrebbe avere una proprietà `max-width` con il valore `600px`. + +```js +assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[1]?.media?.mediaText === '(max-width: 600px)'); +``` + +La nuova `@media` query dovrebbe avere un selettore `#gallery img`. + +```js +const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 600px)'); +assert(rules?.find(rule => rule?.selectorText === '#gallery img')); +``` + +La regola `#gallery img` dovrebbe avere una proprietà `width` con il valore `100%`. + +```js +const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 600px)'); +const imgRule = rules?.find(rule => rule?.selectorText === '#gallery img'); +assert(imgRule?.style?.width === '100%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Photo Gallery + + + +
+

CSS FLEXBOX PHOTO GALLERY

+
+ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + margin: 0; + font-family: Arial; + background: #EBE7E7; +} + +.header { + text-align: center; + padding: 32px; + background: #E0DDDD; +} + +#gallery { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + align-items: center; + padding: 0 4px; +} + +#gallery img { + width: 25%; + height: 300px; + object-fit: cover; + margin-top: 8px; + padding: 0 4px; + border-radius: 10px; +} + +@media (max-width: 800px) { + #gallery img { + width: 50%; + } +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` + +# --solutions-- + +```html + + + + + + Photo Gallery + + + +
+

CSS FLEXBOX PHOTO GALLERY

+
+ + + +``` + +```css +* { + box-sizing: border-box; +} + +body { + margin: 0; + font-family: Arial; + background: #EBE7E7; +} + +.header { + text-align: center; + padding: 32px; + background: #E0DDDD; +} + +#gallery { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: center; + align-items: center; + padding: 0; +} + +#gallery img { + width: 25%; + height: 300px; + object-fit: cover; + margin-top: 8px; + padding: 0 4px; + border-radius: 10px; +} + +@media (max-width: 800px) { + #gallery img { + width: 50%; + } +} + +@media (max-width: 600px) { + #gallery img { + width: 100%; + } +} +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615f171d05def3218035dc85.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615f171d05def3218035dc85.md new file mode 100644 index 00000000000..49e190bf7f1 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615f171d05def3218035dc85.md @@ -0,0 +1,77 @@ +--- +id: 615f171d05def3218035dc85 +title: Step 8 +challengeType: 0 +dashedName: step-8 +--- + +# --description-- + +Al momento, le immagini sono troppo grandi e non sarai in grado di vedere i cambiamenti CSS. + +Crea un selettore `#gallery img` per selezionare le immagini. Assegnagli una proprietà `width` con il valore `25%`. + +Imposta anche la proprietà `height` su `300px` per mantenere uniforme la dimensione delle immagini. + +# --hints-- + +Dovresti avere un selettore `#gallery img`. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('#gallery img')) +``` + +La regola `#gallery img` dovrebbe avere una proprietà `width` con il valore `25%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#gallery img')?.width === '25%') +``` + +Il selettore `#gallery img` dovrebbe avere una proprietà `height` con il valore `300px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#gallery img')?.height === '300px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Photo Gallery + + + +
+

CSS FLEXBOX PHOTO GALLERY

+
+ + + +``` + +```css +* { + box-sizing: border-box; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f2abbe7d18d49a1e0e1c8.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f2abbe7d18d49a1e0e1c8.md index eb278ec74c5..a15f1e8dbb2 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f2abbe7d18d49a1e0e1c8.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f2abbe7d18d49a1e0e1c8.md @@ -7,9 +7,9 @@ dashedName: step-1 # --description-- -Abbiamo fornito un boilerplate HTML di base per te. +Ti abbiamo fornito il testo stardard HTML di base. -Crea un elemento `h1` all'interno del tuo elemento `body` e dagli il testo `Nutrition Facts`. +Crea un elemento `h1` all'interno dell'elemento `body` e assegnagli il testo `Nutrition Facts`. # --hints-- @@ -19,13 +19,13 @@ Dovresti aggiungere un nuovo elemento `h1`. assert.exists(document.querySelector('h1')); ``` -Il tuo elemento `h1` dovrebbe essere all'interno del tuo elemento `body`. +L'elemento `h1` dovrebbe essere all'interno dell'elemento `body`. ```js assert(document.querySelector('h1')?.parentElement?.localName === 'body'); ``` -Il tuo elemento `h1` dovrebbe avere il testo `Nutrition Facts`. +L'elemento `h1` dovrebbe avere il testo `Nutrition Facts`. ```js assert(document.querySelector('h1')?.innerText === 'Nutrition Facts'); diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f2d4150fe0d4cbd0f2628.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f2d4150fe0d4cbd0f2628.md index a2ba3608422..035789083cc 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f2d4150fe0d4cbd0f2628.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f2d4150fe0d4cbd0f2628.md @@ -7,7 +7,7 @@ dashedName: step-2 # --description-- -Sotto il tuo elemento `h1`, aggiungi un elemento `p` con il testo `8 servings per container`. +Sotto L'elemento `h1`, aggiungi un elemento `p` con il testo `8 servings per container`. # --hints-- @@ -17,19 +17,19 @@ Dovresti aggiungere un nuovo elemento `p`. assert.exists(document.querySelector('p')); ``` -Il tuo elemento `p` dovrebbe essere all'interno del tuo elemento `body`. +L'elemento `p` dovrebbe essere all'interno dell'elemento `body`. ```js assert(document.querySelector('p')?.parentElement?.localName === 'body'); ``` -Il tuo elemento `p` dovrebbe venire dopo il tuo elemento `h1`. +L'elemento `p` dovrebbe trovarsi dopo l'elemento `h1`. ```js assert(document.querySelector('p')?.previousElementSibling?.localName === 'h1'); ``` -Il tuo elemento `p` dovrebbe avere il testo `8 servings per container`. +L'elemento `p` dovrebbe avere il testo `8 servings per container`. ```js assert(document.querySelector('p')?.innerText === '8 servings per container'); diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f34948891834dd77655a6.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f34948891834dd77655a6.md index 89a189b04ba..2b9129c897f 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f34948891834dd77655a6.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f34948891834dd77655a6.md @@ -11,7 +11,7 @@ Aggiungi un secondo elemento `p` con il testo `Serving size 2/3 cup (55g)`. # --hints-- -Dovresti avere un secondo elemento `p` valido. +Dovresti avere un secondo elemento `p`. ```js assert(document.querySelectorAll('p')?.length === 2); @@ -29,7 +29,7 @@ Il secondo elemento `p` dovrebbe essere all'interno dell'elemento `p`. assert(document.querySelectorAll('p')?.[1]?.previousElementSibling?.localName === 'p'); ``` -Aggiungi un secondo elemento `p` con il testo `Serving size 2/3 cup (55g)`. +Il secondo elemento `p` dovrebbe avere il testo `Serving size 2/3 cup (55g)`. ```js assert(document.querySelectorAll('p')?.[1]?.innerText === 'Serving size 2/3 cup (55g)'); diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f34ecc1091b4fd5a8a484.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f34ecc1091b4fd5a8a484.md index 59ea300f87e..5b527a07814 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f34ecc1091b4fd5a8a484.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f34ecc1091b4fd5a8a484.md @@ -7,11 +7,11 @@ dashedName: step-4 # --description-- -All'interno del tuo elemento `head`, aggiungi un elemento `link` con l'attributo `rel` impostato a `stylesheet` e l'attributo `href` impostato a `https://fonts.googleapis.com/css?family=Open+Sans:400,700,800`. +All'interno dell'elemento `head`, aggiungi un elemento `link` con l'attributo `rel` impostato su `stylesheet` e l'attributo `href` con il valore `https://fonts.googleapis.com/css?family=Open+Sans:400,700,800`. -Questo importerà la famiglia di caratteri `Open Sans`, con spessori di `400`, `700`, e `800`. +In questo modo, importerai la famiglia di caratteri `Open Sans`, con spessori di `400`, `700`, e `800`. -Aggiungi anche un elemento `link` per collegare il tuo file `styles.css`. +Aggiungi anche un elemento `link` per collegare il file `styles.css`. # --hints-- @@ -21,19 +21,19 @@ Dovresti avere due elementi `link`. assert(code.match(/ div')?.length === 3) ``` -Il nuovo elemento `div` dovrebbe avere l'attributo `class` impostato a `divider md`. Questo div dovrebbe essere l'ultimo elemento nell'elemento `.label`. +Il nuovo elemento `div` dovrebbe avere l'attributo `class` con il valore `divider md`. Questo div dovrebbe essere l'ultimo elemento nell'elemento `.label`. ```js const div = document.querySelector('.label')?.lastElementChild; diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f666ac5edea782feb7e75.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f666ac5edea782feb7e75.md index ac29a6066ff..5a364cdd3a6 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f666ac5edea782feb7e75.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f666ac5edea782feb7e75.md @@ -7,7 +7,7 @@ dashedName: step-38 # --description-- -Creare un selettore `.md` e dargli una proprietà `height` di `5px`. +Crea un selettore `.md` e assegnagli una proprietà `height` di `5px`. # --hints-- @@ -17,7 +17,7 @@ Dovresti creare un selettore `.md`. assert(new __helpers.CSSHelp(document).getStyle('.md')); ``` -Il selettore `.md` dovrebbe avere una proprietà `height` impostata a `5px`. +Il selettore `.md` dovrebbe avere una proprietà `height` con il valore `5px`. ```js assert(new __helpers.CSSHelp(document).getStyle('.md')?.height === '5px'); diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f671b6d1919792745aa5d.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f671b6d1919792745aa5d.md index e8d2bd32cf8..a2911e82c9e 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f671b6d1919792745aa5d.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f671b6d1919792745aa5d.md @@ -7,11 +7,11 @@ dashedName: step-39 # --description-- -Crea un nuovo elemento `div` sotto il tuo elemento `.md`. Dagli un attributo `class` impostato su `daily-value sm-text`. All'interno di questo nuovo `div`, crea un elemento `p` con il testo `% Daily Value *`, e imposta l'attributo `class` su `right bold`. +Crea un nuovo elemento `div` sotto l'elemento `.md`. Assegnagli un attributo `class` impostato su `daily-value sm-text`. All'interno di questo nuovo `div`, crea un elemento `p` con il testo `% Daily Value *` e imposta l'attributo `class` con il valore `right bold`. # --hints-- -Dovresti creare un nuovo elemento `div` dopo il tuo elemento `.md`. +Dovresti creare un nuovo elemento `div` dopo l'elemento `.md`. ```js assert(document.querySelector('.label')?.lastElementChild?.localName === 'div'); @@ -19,26 +19,26 @@ assert(document.querySelector('.label')?.lastElementChild?.previousElementSiblin assert(document.querySelector('.label')?.lastElementChild?.previousElementSibling?.classList?.contains('md')); ``` -Il tuo nuovo `div` dovrebbe avere un attributo`class` impostato a `daily-value sm-text`. +Il nuovo `div` dovrebbe avere un attributo `class` con il valore `daily-value sm-text`. ```js assert(document.querySelector('.label')?.lastElementChild?.classList?.contains('daily-value')); assert(document.querySelector('.label')?.lastElementChild?.classList?.contains('sm-text')); ``` -Il tuo nuovo elemento `div` dovrebbe avere un elemento `p`. +Il nuovo elemento `div` dovrebbe avere un elemento `p`. ```js assert(document.querySelector('.label')?.lastElementChild?.firstElementChild?.localName === 'p'); ``` -Il tuo nuovo elemento `p` dovrebbe avere il testo `% Daily Value *`. +Il nuovo elemento `p` dovrebbe avere il testo `% Daily Value *`. ```js assert(document.querySelector('.label')?.lastElementChild?.firstElementChild?.textContent === '% Daily Value *'); ``` -Il tuo nuovo elemento `p` dovrebbe avere un attributo`class` impostato su `right bold`. +Il nuovo elemento `p` dovrebbe avere un attributo `class` con il valore `right bold`. ```js assert(document.querySelector('.label')?.lastElementChild?.firstElementChild?.classList?.contains('right')); diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6823d0815b7a991f2a75.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6823d0815b7a991f2a75.md index 4b5c0af0b03..54c7004059b 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6823d0815b7a991f2a75.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6823d0815b7a991f2a75.md @@ -7,23 +7,23 @@ dashedName: step-40 # --description-- -Lo stile `float` ha fatto sì che il nuovo elemento `p` sia al di fuori del bordo dell'etichetta. Usa l'elemento esistente `.divider` come esempio per aggiungere un nuovo divisore dopo l'elemento `p`. +L'utilizzo di `float` ha fatto sì che il nuovo elemento `p` sia al di fuori del bordo del label. Usa l'elemento `.divider` esistente come esempio per aggiungere un nuovo divider dopo l'elemento `p`. # --hints-- -Dovresti creare un nuovo `div` all'interno del tuo elemento`.daily-value.sm-text`. +Dovresti creare un nuovo `div` all'interno dell'elemento`.daily-value.sm-text`. ```js assert(document.querySelectorAll('.daily-value.sm-text > div')?.length === 1) ``` -Il nuovo elemento `div` dovrebbe avere l'attributo `class` impostato a `divider`. +Il nuovo elemento `div` dovrebbe avere l'attributo `class` con il valore `divider`. ```js assert(document.querySelector('.daily-value.sm-text > div')?.classList?.contains('divider')) ``` -Il nuovo elemento `div` dovrebbe venire dopo l'elemento `p`. +Il nuovo elemento `div` dovrebbe trovarsi dopo l'elemento `p`. ```js assert(document.querySelector('.daily-value.sm-text > div')?.previousElementSibling?.localName === 'p'); diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6a7d4ba8037bc086c2c7.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6a7d4ba8037bc086c2c7.md index 83ae3ddbc74..2606745495a 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6a7d4ba8037bc086c2c7.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6a7d4ba8037bc086c2c7.md @@ -7,11 +7,11 @@ dashedName: step-41 # --description-- -Dai al selettore `.divider` una proprietà `clear` con valore di `right`. Questo cancellerà la proprietà `float`, spingendo il divisore e qualsiasi contenuto seguente sotto il testo `float`. +Assegna al selettore `.divider` una proprietà `clear` con il valore `right`. Questo cancellerà la proprietà `float`, spingendo il divider e qualsiasi contenuto seguente sotto il testo di `float`. # --hints-- -Il selettore `.divider` dovrebbe avere una proprietà `clear` con valore di `right`. +Il selettore `.divider` dovrebbe avere una proprietà `clear` con il valore `right`. ```js assert(new __helpers.CSSHelp(document).getStyle('.divider')?.clear === 'right'); diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6b2d164f81809efd9bdc.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6b2d164f81809efd9bdc.md index c82a158d412..50d5070990d 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6b2d164f81809efd9bdc.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6b2d164f81809efd9bdc.md @@ -7,47 +7,47 @@ dashedName: step-42 # --description-- -Dopo il tuo ultimo elemento `.divider`, crea un elemento `p` e dagli il testo `Total Fat 8g 10%`. Avvolgi `Total Fat` in un elemento `span` con l'attributo `class` con valore di `bold`. Avvolgi `10%` in un altro elemento `span` con la `class` impostata a `bold right`. +Dopo l'ultimo elemento `.divider`, crea un elemento `p` e assegnagli il testo `Total Fat 8g 10%`. Avvolgi `Total Fat` in un elemento `span` con l'attributo `class` con il valore `bold`. Avvolgi `10%` in un altro elemento `span` con la `class` impostata su `bold right`. # --hints-- -Dovresti creare due nuovi elementi `p` alla fine del tuo elemento `.daily-value`. +Dovresti creare due nuovi elementi `p` alla fine dell'elemento `.daily-value`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'p'); ``` -Il tuo nuovo elemento `p` dovrebbe avere il testo `Total Fat 8g 10%`. +Il nuovo elemento `p` dovrebbe avere il testo `Total Fat 8g 10%`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.innerText?.match(/Total Fat 8g[\s|\n]+10%/)); ``` -Il tuo nuovo elemento `p` dovrebbe avere due elementi `span`. +L'elemento `p` dovrebbe avere due elementi `span`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelectorAll('span')?.length === 2); ``` -Il tuo primo elemento `span` dovrebbe avvolgere il testo `Total Fat`. +Il primo elemento `span` dovrebbe avvolgere il testo `Total Fat`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelector('span')?.innerText === 'Total Fat'); ``` -Il tuo primo elemento `span` dovrebbe avere l'attributo `class` impostato a `bold`. +Il primo elemento `span` dovrebbe avere l'attributo `class` con il valore `bold`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelector('span')?.className === 'bold'); ``` -Il tuo primo elemento `span` dovrebbe avvolgere il testo `10%`. +Il secondo elemento `span` dovrebbe avvolgere il testo `10%`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelectorAll('span')?.[1]?.innerText === '10%'); ``` -Il tuo primo elemento `span` dovrebbe avere l'attributo `class` impostato a `bold right`. +Il secondo elemento `span` dovrebbe avere l'attributo `class` con il valore `bold right`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelectorAll('span')?.[1]?.className === 'bold right'); diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6cc778f7698258467596.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6cc778f7698258467596.md index 9a86dc30c58..58b01b8159f 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6cc778f7698258467596.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6cc778f7698258467596.md @@ -7,37 +7,37 @@ dashedName: step-43 # --description-- -Sotto il tuo elemento con il testo `Total Fat`, crea un nuovo elemento `p` con il testo `Saturated Fat 1g 5%`. Avvolgi `5%` in un altro elemento `span` con la `class` impostata a `bold right`. +Sotto L'elemento con il testo `Total Fat`, crea un nuovo elemento `p` con il testo `Saturated Fat 1g 5%`. Includi `5%` in un altro elemento `span` con l'attributo `class` impostato su `bold right`. # --hints-- -Dovresti creare un nuovo elemento `p` sotto il tuo elemento con il testo `Total Fat`. +Dovresti creare un nuovo elemento `p` sotto l'elemento con il testo `Total Fat`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'p'); assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.previousElementSibling?.innerText.match(/Total Fat 8g\s*10%/)); ``` -Il tuo secondo nuovo elemento `p` dovrebbe avere il testo `Saturated Fat 1g 5%`. +Il nuovo elemento `p` dovrebbe avere il testo `Saturated Fat 1g 5%`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.innerText.match(/Saturated Fat 1g\s*5%/)); ``` -Il tuo nuovo elemento `p` dovrebbe avere un elemento `span`. +Il nuovo elemento `p` dovrebbe avere un elemento `span`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.localName === 'span'); ``` -Il tuo nuovo elemento `span` dovrebbe avere l'attributo `class` impostato a `bold right`. +L'elemento `span` dovrebbe avere l'attributo `class` con il valore `bold right`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.classList?.contains('bold')); assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.classList?.contains('right')); ``` -Il tuo elemento `span` dovrebbe avvolgere il testo `5%`. +L'elemento `span` dovrebbe racchiudere il testo `5%`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.innerText === "5%"); diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6fddaac1e083502d3e6a.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6fddaac1e083502d3e6a.md index 3dda2c62733..aa188f49d23 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6fddaac1e083502d3e6a.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6fddaac1e083502d3e6a.md @@ -7,11 +7,11 @@ dashedName: step-44 # --description-- -Questo nuovo elemento `p` dovrà essere indentato. Dagli un attributo `class` impostata a `indent`. +Questo nuovo elemento `p` dovrà essere indentato. Dagli un attributo `class` impostato su `indent`. # --hints-- -Il tuo elemento `p` con il testo `Saturated Fat 1g 5%` dovrebbe avere un attributo `class` impostato a `indent`. +L'elemento `p` con il testo `Saturated Fat 1g 5%` dovrebbe avere un attributo `class` con il valore `indent`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.classList?.contains('indent')); diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f70077a4ff98424236c1e.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f70077a4ff98424236c1e.md index e819090b152..bab5b450545 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f70077a4ff98424236c1e.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f70077a4ff98424236c1e.md @@ -17,7 +17,7 @@ Dovresti avere un nuovo selettore `.indent`. assert(new __helpers.CSSHelp(document).getStyle('.indent')); ``` -Il nuovo selettore `.indent` dovrebbe avere una proprietà `margin-left` impostata a `1em`. +Il nuovo selettore `.indent` dovrebbe avere una proprietà `margin-left` con il valore `1em`. ```js assert(new __helpers.CSSHelp(document).getStyle('.indent')?.marginLeft === '1em'); diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f72a872354a850d4f533e.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f72a872354a850d4f533e.md index b2b5e99325e..65403dba213 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f72a872354a850d4f533e.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f72a872354a850d4f533e.md @@ -7,7 +7,7 @@ dashedName: step-46 # --description-- -Crea un selettore `.daily-value p` per selezionare tutti i tuoi elementi `p` nella sezione `daily-value`. Dai a questo nuovo selettore un `border-bottom` impostato su `1px solid #888989`. +Crea un selettore `.daily-value p` per selezionare tutti gli elementi `p` nella sezione `daily-value`. Dai a questo nuovo selettore una proprietà `border-bottom` con il valore `1px solid #888989`. # --hints-- @@ -17,7 +17,7 @@ Dovresti avere un nuovo selettore `.daily-value p`. assert(new __helpers.CSSHelp(document).getStyle('.daily-value p')); ``` -Il tuo selettore `.daily-value p` dovrebbe avere una proprietà `border-bottom` impostata a `1px solid #888989`. +Il tuo selettore `.daily-value p` dovrebbe avere una proprietà `border-bottom` con il valore `1px solid #888989`. ```js assert(new __helpers.CSSHelp(document).getStyle('.daily-value p')?.borderBottom === '1px solid rgb(136, 137, 137)'); diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f74a71f1e498619e38ee8.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f74a71f1e498619e38ee8.md index 77da5e5ee9c..77181dffb1c 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f74a71f1e498619e38ee8.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f74a71f1e498619e38ee8.md @@ -7,11 +7,11 @@ dashedName: step-47 # --description-- -I bordi inferiori sotto i tuoi elementi `% Daily Value *` e `Saturated Fat 1g 5%` non estendono l'intera larghezza dell'etichetta. Aggiungi `no-divider` all'attributo `class` per questi due elementi. +I bordi inferiori sotto gli elementi `% Daily Value *` e `Saturated Fat 1g 5%` non occupano l'intera larghezza dell'etichetta. Aggiungi `no-divider` all'attributo `class` per questi due elementi. # --hints-- -Il tuo elemento `p` con il testo `% Daily Value *` dovrebbe avere `no-divider` aggiunto all'attributo `class`. Non rimuovere le classi esistenti. +L'elemento `p` con il testo `% Daily Value *` dovrebbe avere `no-divider` aggiunto all'attributo `class`. Non rimuovere le classi esistenti. ```js const p = document.querySelector('.daily-value.sm-text')?.firstElementChild; @@ -20,7 +20,7 @@ assert(p?.classList?.contains('bold')); assert(p?.classList?.contains('right')); ``` -Il tuo elemento `p` con il testo `Saturated Fat 1g 5%` dovrebbe avere `no-divider` aggiunto all'attributo `class`. Non rimuovere le classi esistenti. +L'elemento `p` con il testo `Saturated Fat 1g 5%` dovrebbe avere `no-divider` aggiunto all'attributo `class`. Non rimuovere le classi esistenti. ```js const p = document.querySelector('.daily-value.sm-text')?.lastElementChild; diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7ad94380408d971d14f6.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7ad94380408d971d14f6.md index 94776405b30..4c336f91468 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7ad94380408d971d14f6.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7ad94380408d971d14f6.md @@ -15,19 +15,19 @@ div:not(#example) { } ``` -Quanto sopra seleziona tutti gli elementi `div` senza un `id` di `example`. +Quello qui sopra seleziona tutti gli elementi `div` senza un `id` con il valore `example`. Modifica il selettore `.daily-value p` per escludere gli elementi `.no-divider`. # --hints-- -Dovresti avere un nuovo selettore `.daily-value p:not(.no-divider)`. +Dovresti avere un selettore `.daily-value p:not(.no-divider)`. ```js assert(new __helpers.CSSHelp(document).getStyle('.daily-value p:not(.no-divider)')); ``` -Non dovresti avere un `.daily-value p` selector. +Non dovresti avere un selettore `.daily-value p`. ```js assert(!new __helpers.CSSHelp(document).getStyle('.daily-value p')); diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7bc680f7168ea01ebf99.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7bc680f7168ea01ebf99.md index 6157f411e48..34ade7dc979 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7bc680f7168ea01ebf99.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7bc680f7168ea01ebf99.md @@ -7,19 +7,19 @@ dashedName: step-49 # --description-- -Ora dovrai aggiungere divisori separati sotto i tuoi elementi `.no-divider`. +Ora dovrai aggiungere dei divider separati sotto gli elementi `.no-divider`. -Il tuo primo elemento `.no-divider` ha un `.divider` dopo di esso. Crea un altro `.divider` dopo il tuo secondo elemento `.no-divider`. +Il primo elemento `.no-divider` ha un `.divider` dopo di esso. Crea un altro `.divider` dopo il secondo elemento `.no-divider`. # --hints-- -Dovresti creare un nuovo `div` alla fine del tuo elemento `.daily-value.sm-text`. +Dovresti creare un nuovo `div` alla fine dell'elemento `.daily-value.sm-text`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'div'); ``` -Il tuo nuovo `div` dovrebbe avere l'attributo `class` impostato su `divider`. +Il nuovo `div` dovrebbe avere l'attributo `class` con il valore `divider`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.classList?.contains('divider')); diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7c71eab8218f846e4503.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7c71eab8218f846e4503.md index 75bbe3c94db..1a178465011 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7c71eab8218f846e4503.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7c71eab8218f846e4503.md @@ -7,23 +7,23 @@ dashedName: step-50 # --description-- -Dopo il tuo ultimo `.divider`, crea un altro elemento `p` con il testo `Trans Fat 0g`. Metti in corsivo la parola `Trans` annidandola in un elemento `i`. Dai al nuovo elemento `p` l'attributo `class` impostato a `indent no-divider`. +Dopo l'ultimo `.divider`, crea un altro elemento `p` con il testo `Trans Fat 0g`. Metti in corsivo la parola `Trans` annidandola in un elemento `i`. Dai al nuovo elemento `p` l'attributo `class` con il valore `indent no-divider`. # --hints-- -Dovresti creare un nuovo elemento `p` alla fine del tuo elemento `.daily-value.sm-text`. +Dovresti creare un nuovo elemento `p` alla fine dell'elemento `.daily-value.sm-text`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'p'); ``` -Il tuo nuovo elemento `p` dovrebbe avere il testo `Trans Fat 0g`. +Il nuovo elemento `p` dovrebbe avere il testo `Trans Fat 0g`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.innerText === 'Trans Fat 0g'); ``` -Il tuo nuovo elemento `p` dovrebbe avere l'attributo `class` con valore di `indent no-divider`. +Il nuovo elemento `p` dovrebbe avere l'attributo `class` con il valore `indent no-divider`. ```js const p = document.querySelector('.daily-value.sm-text')?.lastElementChild; @@ -31,13 +31,13 @@ assert(p?.classList?.contains('indent')); assert(p?.classList?.contains('no-divider')); ``` -Il tuo nuovo elemento `p` dovrebbe avere un elemento `i`. +Il nuovo elemento `p` dovrebbe avere un elemento `i`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.firstElementChild?.localName === 'i'); ``` -Il tuo elemento `i` dovrebbe avvolgere il testo `Trans`. +L'elemento `i` dovrebbe racchiudere il testo `Trans`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.firstElementChild?.innerText === 'Trans'); diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7d489a581590d1350288.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7d489a581590d1350288.md index 64092cdf1e0..e0565dcb99e 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7d489a581590d1350288.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7d489a581590d1350288.md @@ -7,17 +7,17 @@ dashedName: step-51 # --description-- -Crea un altro `.divider` dopo il tuo ultimo elemento `p`. +Crea un altro `.divider` dopo l'ultimo elemento `p`. # --hints-- -Dovresti anche creare un nuovo elemento `div` alla fine del tuo elemento `.daily-value.sm-text`. +Dovresti anche creare un nuovo elemento `div` alla fine dell'elemento `.daily-value.sm-text`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'div'); ``` -Il nuovo elemento `div` dovrebbe avere l'attributo `class` impostato a `divider`. +Il nuovo elemento `div` dovrebbe avere l'attributo `class` con il valore `divider`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.classList?.contains('divider')); diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7de4487b64919bb4aa5e.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7de4487b64919bb4aa5e.md new file mode 100644 index 00000000000..d233577f9fe --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7de4487b64919bb4aa5e.md @@ -0,0 +1,178 @@ +--- +id: 615f7de4487b64919bb4aa5e +title: Step 52 +challengeType: 0 +dashedName: step-52 +--- + +# --description-- + +Dopo l'ultimo elemento `.divider`, crea un elemento `p` e dagli il testo `Cholesterol 0mg 0%`. Inserisci il testo `Cholesterol` in un elemento `span` e assegna a quest'elemento `span` un attributo `class` con il valore `bold`. Annida il testo `0%` in un altro elemento `span` con l'attributo `class` impostato su `bold right`. + +# --hints-- + +Dovresti creare un nuovo elemento `p` alla fine dell'elemento `.daily-value.sm-text`. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'p'); +``` + +Il nuovo elemento `p` dovrebbe avere il testo `Cholesterol 0mg 0%`. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.innerText?.match(/Cholesterol 0mg[\s|\n]+0%/)); +``` + +Il nuovo elemento `p` dovrebbe avere due elementi `span`. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelectorAll('span')?.length === 2); +``` + +Il primo elemento `span` dovrebbe avere l'attributo `class` con il valore `bold`. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.firstElementChild?.classList?.contains('bold')); +``` + +Il primo elemento `span` dovrebbe racchiudere il testo `Cholesterol`. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.firstElementChild?.innerText === 'Cholesterol'); +``` + +Il secondo elemento `span` dovrebbe avere l'attributo `class` con il valore `bold right`. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.classList?.contains('bold')); +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.classList?.contains('right')); +``` + +Il secondo elemento `span` dovrebbe racchiudere il testo `0%`. + +```js +assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.innerText === '0%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Nutrition Label + + + + +
+
+

Nutrition Facts

+
+

8 servings per container

+

Serving size 2/3 cup (55g)

+
+
+
+

Amount per serving

+

Calories 230

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

% Daily Value *

+
+

Total Fat 8g10%

+

Saturated Fat 1g 5%

+
+

Trans Fat 0g

+
+--fcc-editable-region-- +
+
+ + +``` + +```css +* { + box-sizing: border-box; +} + +html { + font-size: 16px; +} + +body { + font-family: 'Open Sans', sans-serif; +} + +.label { + border: 2px solid black; + width: 270px; + margin: 20px auto; + padding: 0 7px; +} + +header h1 { + text-align: center; + margin: -4px 0; + letter-spacing: 0.15px +} + +p { + margin: 0; +} + +.divider { + border-bottom: 1px solid #888989; + margin: 2px 0; + clear: right; +} + +.bold { + font-weight: 800; +} + +.right { + float: right; +} + +.lg { + height: 10px; +} + +.lg, .md { + background-color: black; + border: 0; +} + +.md { + height: 5px; +} + +.sm-text { + font-size: 0.85rem; +} + +.calories-info h1 { + margin: -5px -2px; + overflow: hidden; +} + +.calories-info span { + font-size: 1.2em; + margin-top: -7px; +} + +.indent { + margin-left: 1em; +} + +.daily-value p:not(.no-divider) { + border-bottom: 1px solid #888989; +} +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7e7281626a92bbd62da8.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7e7281626a92bbd62da8.md index e8b39f9e6d3..292a13f4d38 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7e7281626a92bbd62da8.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7e7281626a92bbd62da8.md @@ -7,48 +7,48 @@ dashedName: step-53 # --description-- -Sotto l' ultimo elemento `p`, crea un altro elemento `p` con il testo `Sodium 160mg 7%`. Atorrno al testo `Sodium` crea un elemento `span` con un attributo `class` impostato a `bold`. Annida il testo `7%` in un altro elemento `span` con l'attributo `class` impostato a `bold right`. +Sotto l'ultimo elemento `p`, crea un altro elemento `p` con il testo `Sodium 160mg 7%`. Atorrno al testo `Sodium`, crea un elemento `span` con un attributo `class` impostato su `bold`. Annida il testo `7%` in un altro elemento `span` con l'attributo `class` impostato su `bold right`. # --hints-- -Dovresti creare un nuovo elemento `p` alla fine del tuo elemento `.daily-value.sm-text`. +Dovresti creare un nuovo elemento `p` alla fine dell'elemento `.daily-value.sm-text`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'p'); ``` -Il tuo nuovo elemento `p` dovrebbe avere il testo `Sodium 160mg 7%`. +Il nuovo elemento `p` dovrebbe avere il testo `Sodium 160mg 7%`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.innerText?.match(/Sodium 160mg[\s|\n]+7%/)); ``` -Il tuo nuovo elemento `p` dovrebbe avere due elementi `span`. +Il nuovo elemento `p` dovrebbe avere due elementi `span`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelectorAll('span')?.length === 2); ``` -Il tuo primo elemento `span` dovrebbe avere l'attributo `class` impostato su `bold`. +Il primo elemento `span` dovrebbe avere l'attributo `class` con il valore `bold`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.firstElementChild?.classList?.contains('bold')); ``` -Il tuo primo elemento `span` dovrebbe avvolgere il testo `Sodium`. +Il primo elemento `span` dovrebbe racchiudere il testo `Sodium`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.firstElementChild?.innerText === 'Sodium'); ``` -Il tuo secondo elemento `span` dovrebbe avere l'attributo `class` impostato su `bold right`. +Il secondo elemento `span` dovrebbe avere l'attributo `class` con il valore `bold right`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.classList?.contains('bold')); assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.classList?.contains('right')); ``` -Il tuo secondo elemento `span` dovrebbe avvolgere il testo `7%`. +Il secondo elemento `span` dovrebbe racchiudere il testo `7%`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.innerText === '7%'); diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7ecb09de9a938ef94756.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7ecb09de9a938ef94756.md index 17107c260db..43df081c8dd 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7ecb09de9a938ef94756.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7ecb09de9a938ef94756.md @@ -7,48 +7,48 @@ dashedName: step-54 # --description-- -Aggiungi un altro elemento `p` con il testo `Total Carbohydrate 37g 13%`. Come prima, usa gli elementi `span` per rendere il testo `Total Carbohydrate` in grassetto, e il testo `13%` grassetto e allineato a destra. +Aggiungi un altro elemento `p` con il testo `Total Carbohydrate 37g 13%`. Come prima, usa gli elementi `span` per rendere il testo `Total Carbohydrate` in grassetto, e il testo `13%` in grassetto e allineato a destra. # --hints-- -Dovresti creare un nuovo elemento `p` alla fine del tuo elemento `.daily-value.sm-text`. +Dovresti creare un nuovo elemento `p` alla fine dell'elemento `.daily-value.sm-text`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'p'); ``` -Il tuo nuovo elemento `p` dovrebbe avere il testo `Total Carbohydrate 37g 13%`. +Il nuovo elemento `p` dovrebbe avere il testo `Total Carbohydrate 37g 13%`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.innerText?.match(/Total Carbohydrate 37g[\s|\n]+13%/)); ``` -Il tuo nuovo elemento `p` dovrebbe avere due elementi `span`. +Il nuovo elemento `p` dovrebbe avere due elementi `span`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelectorAll('span')?.length === 2); ``` -Il tuo primo elemento `span` dovrebbe avere l'attributo `class` impostato su `bold`. +Il primo elemento `span` dovrebbe avere l'attributo `class` con il valore `bold`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.firstElementChild?.classList?.contains('bold')); ``` -Il tuo primo elemento `span` dovrebbe avvolgere il testo `Total Carbohydrate`. +Il primo elemento `span` dovrebbe racchiudere il testo `Total Carbohydrate`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.firstElementChild?.innerText === 'Total Carbohydrate'); ``` -Il tuo secondo elemento `span` dovrebbe avere l'attributo `class` impostato su `bold right`. +Il secondo elemento `span` dovrebbe avere l'attributo `class` con il valore `bold right`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.classList?.contains('bold')); assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.classList?.contains('right')); ``` -Il tuo secondo elemento `span` dovrebbe avvolgere il testo `13%`. +Il secondo elemento `span` dovrebbe racchiudere il testo `13%`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.innerText === '13%'); diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7fa959ab75948f96a0d6.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7fa959ab75948f96a0d6.md index ec065ee9a79..83075f0a4d3 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7fa959ab75948f96a0d6.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7fa959ab75948f96a0d6.md @@ -7,11 +7,11 @@ dashedName: step-55 # --description-- -Sotto il tuo ultimo elemento `p`, aggiungi un altro elemento `p` con il testo `Dietary Fiber 4g`. Dai all'elemento `p` l'elemento `class` necessario per indentarlo e rimuovere il bordo di divisione. Quindi crea un divisore sotto quell'elemento `p`. +Sotto l'ultimo elemento `p`, aggiungi un altro elemento `p` con il testo `Dietary Fiber 4g`. Dai all'elemento `p` l'attributo `class` necessario per indentarlo e rimuovere il bordo di divisione. Quindi crea un divider sotto quest'elemento `p`. # --hints-- -Dovresti creare un nuovo elemento `p` e `div` alla fine del tuo elemento `.daily-value.sm-text`. +Dovresti creare un nuovo elemento `p` e `div` alla fine dell'elemento `.daily-value.sm-text`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.previousElementSibling?.localName === 'p'); @@ -24,14 +24,14 @@ Il nuovo elemento `p` dovrebbe avere il testo `Dietary Fiber 4g`. assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.innerText.match(/Dietary Fiber[\s|\n]+4g/)); ``` -Il tuo nuovo elemento `p` dovrebbe avere l'attributo `class` impostato a `indent no-divider`. +Il nuovo elemento `p` dovrebbe avere l'attributo `class` con il valore `indent no-divider`. ```js assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.classList?.contains('indent')); assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.classList?.contains('no-divider')); ``` -Il nuovo `div` dovrebbe avere l'attributo `class` impostato su `divider`. +Il nuovo `div` dovrebbe avere l'attributo `class` con il valore `divider`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.classList?.contains('divider')); diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f808d85793195b0f53be9.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f808d85793195b0f53be9.md index d6a406ad81d..6b2f1c2a16f 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f808d85793195b0f53be9.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f808d85793195b0f53be9.md @@ -7,31 +7,31 @@ dashedName: step-56 # --description-- -Crea un altro elemento `p` dopo il tuo ultimo `.divider`, e dagli il testo `Total Sugars 12g`. Assegna a quell'elemento `p` i valori `class` necessari per indentarlo e rimuovere il bordo inferiore. Quindi crea un altro `.divider` sotto il tuo nuovo elemento `p`. +Crea un altro elemento `p` dopo l'ultimo `.divider` e dagli il testo `Total Sugars 12g`. Assegna a quest'elemento `p` i valori `class` necessari per indentarlo e rimuovere il bordo inferiore. Quindi crea un altro `.divider` sotto il nuovo elemento `p`. # --hints-- -Dovresti anche creare un nuovi elementi `p` e `div` alla fine del tuo elemento `.daily-value.sm-text`. +Dovresti anche creare dei nuovi elementi `p` e `div` alla fine dell'elemento `.daily-value.sm-text`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.previousElementSibling?.localName === 'p'); assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'div'); ``` -Il tuo nuovo elemento `p` dovrebbe avere il testo `Total Sugars 12g`. +Il nuovo elemento `p` dovrebbe avere il testo `Total Sugars 12g`. ```js assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.innerText.match(/Total Sugars[\s|\n]+12g/)); ``` -Il tuo nuovo elemento `p` dovrebbe avere l'attributo `class` impostato a `indent no-divider`. +Il nuovo elemento `p` dovrebbe avere l'attributo `class` con il valore `indent no-divider`. ```js assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.classList?.contains('indent')); assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.classList?.contains('no-divider')); ``` -Il tuo nuovo elemento `div` dovrebbe avere l'attributo `class` impostato a `divider`. +Il nuovo elemento `div` dovrebbe avere l'attributo `class` con il valore `divider`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.classList?.contains('divider')); diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f829d07b18f96f6f6684b.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f829d07b18f96f6f6684b.md index 0c96eba6c34..4ca58ca2edc 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f829d07b18f96f6f6684b.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f829d07b18f96f6f6684b.md @@ -7,11 +7,11 @@ dashedName: step-57 # --description-- -Il vantaggio di creare questi divisori è che è possibile applicare classi specifiche per dargli uno stile individualmente. Aggiungi `dbl-indent` all'attributo `class` per il tuo ultimo `.divider`. +Il vantaggio di creare dei divider è che è possibile applicare classi specifiche per dargli uno stile individualmente. Aggiungi `dbl-indent` all'attributo `class` per l'ultimo `.divider`. # --hints-- -Il tuo ultimo elemento `.divider` dovrebbe avere `dbl-indent` aggiunto all'attributo `class`. Non rimuovere il valore esistente. +L'ultimo elemento `.divider` dovrebbe avere `dbl-indent` aggiunto all'attributo `class`. Non rimuovere il valore esistente. ```js const last = document.querySelector('.daily-value.sm-text')?.lastElementChild; diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f83ef928ec9982b785b6a.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f83ef928ec9982b785b6a.md index 27c93b8dcf1..c74d6008508 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f83ef928ec9982b785b6a.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f83ef928ec9982b785b6a.md @@ -17,7 +17,7 @@ Dovresti avere un nuovo selettore `.dbl-indent`. assert(new __helpers.CSSHelp(document).getStyle('.dbl-indent')); ``` -Il selettore `.dbl-indent` dovrebbe avere una proprietà `margin-left` impostata a `2em`. +Il selettore `.dbl-indent` dovrebbe avere una proprietà `margin-left` con il valore `2em`. ```js assert(new __helpers.CSSHelp(document).getStyle('.dbl-indent')?.marginLeft === '2em'); diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f84f246e8ba98e3cd97be.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f84f246e8ba98e3cd97be.md index 0644b3c80d4..8a27aef91f5 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f84f246e8ba98e3cd97be.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f84f246e8ba98e3cd97be.md @@ -7,52 +7,52 @@ dashedName: step-59 # --description-- -Sotto il tuo elemento `.dbl-indent`, aggiungi un nuovo elemento `p` con il testo `Includes 10g Added Sugars 20%`. Il tuo nuovo elemento `p` dovrebbe essere anche doppiamente indentato, e non avere bordi inferiori. Usa un elemento `span` per rendere il `20%` in grassetto e allineato a destra. +Sotto l'elemento `.dbl-indent`, aggiungi un nuovo elemento `p` con il testo `Includes 10g Added Sugars 20%`. Il nuovo elemento `p` dovrebbe essere anche doppiamente indentato e non avere il bordo inferiore. Usa un elemento `span` per rendere il `20%` in grassetto e allineato a destra. -Poi crea un altro divisore dopo quell'elemento `p`. +Poi crea un altro divider dopo l'elemento `p`. # --hints-- -Dovresti creare un nuovo elemento `p` e un nuovo `div` alla fine del tuo elemento `.daily-value.sm-text`. +Dovresti creare un nuovo elemento `p` e un nuovo `div` alla fine dell'elemento `.daily-value.sm-text`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.previousElementSibling?.localName === 'p'); assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'div'); ``` -Il tuo nuovo elemento `p` dovrebbe avere il testo `Includes 10g Added Sugars 20%`. +Il nuovo elemento `p` dovrebbe avere il testo `Includes 10g Added Sugars 20%`. ```js assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.innerText.match(/Includes 10g Added Sugars[\s|\n]+20%/)); ``` -Il tuo nuovo elemento `p` dovrebbe avere l'attributo `class` impostato a `dbl-indent no-divider`. +Il nuovo elemento `p` dovrebbe avere l'attributo `class` con il valore `dbl-indent no-divider`. ```js assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.classList?.contains('dbl-indent')); assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.classList?.contains('no-divider')); ``` -Il tuo nuovo elemento `p` dovrebbe avere un elemento `span`. +Il nuovo elemento `p` dovrebbe avere un elemento `span`. ```js assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.firstElementChild?.localName === 'span'); ``` -Il tuo elemento `span` dovrebbe avere l'attributo `class` impostato a `bold right`. +L'elemento `span` dovrebbe avere l'attributo `class` con il valore `bold right`. ```js assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.firstElementChild?.classList?.contains('bold')); assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.firstElementChild?.classList?.contains('right')); ``` -Il tuo elemento `span` dovrebbe avvolgere il testo `20%`. +L'elemento `span` dovrebbe racchiudere il testo `20%`. ```js assert(document.querySelector('.daily-value.sm-text p:last-of-type span')?.innerText === '20%'); ``` -Il tuo nuovo elemento `div` dovrebbe avere l'attributo `class` impostato a `divider`. +Il nuovo elemento `div` dovrebbe avere l'attributo `class` con il valore `divider`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.classList?.contains('divider')); diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f887466db4ba14b5342cc.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f887466db4ba14b5342cc.md index aa01d01c218..bbf550cdb39 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f887466db4ba14b5342cc.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f887466db4ba14b5342cc.md @@ -7,13 +7,13 @@ dashedName: step-60 # --description-- -Dopo il tuo ultimo divisore, crea un altro elemento `p` con il testo `Protein 3g`. Usa le classi necessarie per rimuovere il bordo inferiore e un elemento `span` per rendere grassetto il testo `Protein`. +Dopo l'ultimo divider, crea un altro elemento `p` con il testo `Protein 3g`. Usa le classi necessarie per rimuovere il bordo inferiore e un elemento `span` per rendere in grassetto il testo `Protein`. -Dopo questo elemento, creare un grande divisore. +Dopo questo elemento, crea un divider grande. # --hints-- -Dovresti creare un nuovo elemento `p` e `div` alla fine del tuo elemento `.daily-value.sm-text`. +Dovresti creare un nuovo elemento `p` e un nuovo `div` alla fine dell'elemento `.daily-value.sm-text`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.previousElementSibling?.localName === 'p'); @@ -26,13 +26,13 @@ Il nuovo elemento `p` dovrebbe avere il testo `Protein 3g`. assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.innerText.match(/Protein[\s|\n]+3g/)); ``` -Il nuovo elemento `p` dovrebbe avere l'attributo `class` impostato a `no-divider`. +Il nuovo elemento `p` dovrebbe avere l'attributo `class` con il valore `no-divider`. ```js assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.classList?.contains('no-divider')); ``` -Il nuovo elemento `div` dovrebbe avere l'attributo `class` impostato a `divider lg`. +Il nuovo elemento `div` dovrebbe avere l'attributo `class` con il valore `divider lg`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.classList?.contains('divider')); diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f89e055040ba294719d2f.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f89e055040ba294719d2f.md index cfe9fb2f2e9..b68646e7687 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f89e055040ba294719d2f.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f89e055040ba294719d2f.md @@ -7,29 +7,29 @@ dashedName: step-61 # --description-- -Crea un altro elemento `p` sotto il tuo grande divisore. Dai all'elemento `p` il testo `Vitamin D 2mcg 10%`. Usa un elemento `span` per allineare il `10%` a destra, ma non renderlo in grassetto. +Crea un altro elemento `p` sotto il divider grande. Dai all'elemento `p` il testo `Vitamin D 2mcg 10%`. Usa un elemento `span` per allineare il `10%` a destra, ma non metterlo in grassetto. # --hints-- -Dovresti creare un nuovo elemento `p` alla fine del tuo elemento `.daily-value.sm-text`. +Dovresti creare un nuovo elemento `p` alla fine dell'elemento `.daily-value.sm-text`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'p'); ``` -Il tuo nuovo elemento `p` dovrebbe avere il testo `Vitamin D 2mcg 10%`. +Il nuovo elemento `p` dovrebbe avere il testo `Vitamin D 2mcg 10%`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.innerText?.match(/Vitamin D 2mcg[\s|\n]+10%/)); ``` -Il tuo nuovo elemento `p` dovrebbe avere un elemento `span`. +Il nuovo elemento `p` dovrebbe avere un elemento `span`. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelectorAll('span')?.length === 1); ``` -Il tuo elemento `span` dovrebbe avere l'attributo `class` impostato a `right`. Ricorda che non dovresti farlo in grassetto. +L'elemento `span` dovrebbe avere l'attributo `class` con il valore `right`. Ricorda di non metterlo in grassetto. ```js assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelector('span')?.classList?.contains('right')); diff --git a/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-javascript/multiple-identical-options-in-switch-statements.md b/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-javascript/multiple-identical-options-in-switch-statements.md index 97c4ffe410f..06dfe59f421 100644 --- a/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-javascript/multiple-identical-options-in-switch-statements.md +++ b/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-javascript/multiple-identical-options-in-switch-statements.md @@ -13,7 +13,7 @@ dashedName: multiple-identical-options-in-switch-statements ```js let result = ""; -switch(val) { +switch (val) { case 1: case 2: case 3: @@ -127,7 +127,7 @@ sequentialSizes(1); function sequentialSizes(val) { let answer = ""; - switch(val) { + switch (val) { case 1: case 2: case 3: diff --git a/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-javascript/replacing-if-else-chains-with-switch.md b/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-javascript/replacing-if-else-chains-with-switch.md index cbdef99d520..2559731f205 100644 --- a/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-javascript/replacing-if-else-chains-with-switch.md +++ b/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-javascript/replacing-if-else-chains-with-switch.md @@ -24,7 +24,7 @@ if (val === 1) { これは次のように置き換えることができます。 ```js -switch(val) { +switch (val) { case 1: answer = "a"; break; @@ -136,7 +136,7 @@ chainToSwitch(7); function chainToSwitch(val) { let answer = ""; - switch(val) { + switch (val) { case "bob": answer = "Marley"; break; diff --git a/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-javascript/selecting-from-many-options-with-switch-statements.md b/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-javascript/selecting-from-many-options-with-switch-statements.md index 63e1696c109..a5aeffb6a48 100644 --- a/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-javascript/selecting-from-many-options-with-switch-statements.md +++ b/curriculum/challenges/japanese/02-javascript-algorithms-and-data-structures/basic-javascript/selecting-from-many-options-with-switch-statements.md @@ -14,7 +14,7 @@ dashedName: selecting-from-many-options-with-switch-statements 次は `switch` ステートメントの例です。 ```js -switch(lowercaseLetter) { +switch (lowercaseLetter) { case "a": console.log("A"); break; @@ -96,7 +96,7 @@ caseInSwitch(1); function caseInSwitch(val) { let answer = ""; - switch(val) { + switch (val) { case 1: answer = "alpha"; break; diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6133d11ef548f51f876149e3.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6133d11ef548f51f876149e3.md new file mode 100644 index 00000000000..a9015bfb006 --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6133d11ef548f51f876149e3.md @@ -0,0 +1,68 @@ +--- +id: 6133d11ef548f51f876149e3 +title: ステップ 6 +challengeType: 0 +dashedName: step-6 +--- + +# --description-- + +ナビゲーションはアクセシビリティの中核をなす部分であり、スクリーンリーダーは、あなたが提供するページの構造情報を頼りにしています。 これはセマンティックな HTML 要素を用いて実現します。 + +ページに `header` 要素と `main` 要素を 1 つずつ追加してください。 + +`header` 要素はナビゲーションメニューの提供と、ページの紹介に使用されます。 + +`main` 要素にはページの中心的な内容を含めます。 + +# --hints-- + +`header` 要素を `body` 要素に追加する必要があります。 + +```js +assert.exists(document.querySelector('body > header')); +``` + +`main` 要素を `body` 要素に追加する必要があります。 + +```js +assert.exists(document.querySelector('body > main')); +``` + +`header` 要素は `main` 要素の前に来る必要があります。 + +```js +assert.exists(document.querySelector('header + main')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + +--fcc-editable-region-- + + + +--fcc-editable-region-- + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e2546d0594208229ada50.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e2546d0594208229ada50.md new file mode 100644 index 00000000000..55bb3d5dfdd --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e2546d0594208229ada50.md @@ -0,0 +1,93 @@ +--- +id: 613e2546d0594208229ada50 +title: ステップ 7 +challengeType: 0 +dashedName: step-7 +--- + +# --description-- + +`header` 要素内に、`img`、`h1`、`nav` の各要素を 1 つずつ入れ子にし、このページの文脈を提供しましょう。 + +`img` 要素は `https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg` を指し、また、`logo` という `id` を持つようにしてください。 + +`h1` 要素は `HTML/CSS Quiz` というテキストを含むようにしましょう。 + +# --hints-- + +`img` 要素を `header` 要素に 1 つ追加する必要があります。 + +```js +assert.exists(document.querySelector('header > img')); +``` + +`h1` 要素を `header` 要素に 1 つ追加する必要があります。 + +```js +assert.exists(document.querySelector('header > h1')); +``` + +`nav` 要素を `header` 要素に 1 つ追加する必要があります。 + +```js +assert.exists(document.querySelector('header > nav')); +``` + +`img`、`h1`、`nav` の各要素をこの順番で配置する必要があります。 + +```js +assert.exists(document.querySelector('img + h1 + nav')); +``` + +`img` 要素に、値が `https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg` に設定されている `src` 属性を加える必要があります。 + +```js +assert.equal(document.querySelector('img')?.src, 'https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg'); +``` + +`img` 要素に、値が `logo` に設定されている `id` 属性を加える必要があります。 + +```js +assert.equal(document.querySelector('img')?.id, 'logo'); +``` + +`h1` 要素に `HTML/CSS Quiz` というテキストを加える必要があります。 + +```js +assert.include(document.querySelector('h1')?.innerText?.toLowerCase(), 'html/css quiz'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Accessibility Quiz + + + +--fcc-editable-region-- +
+ +
+--fcc-editable-region-- +
+ + + +``` + +```css +body { + background: #f5f6f7; + color: #1b1b32; + font-family: Helvetica; + margin: 0; +} +``` diff --git a/curriculum/challenges/japanese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e275749ebd008e74bb62e.md b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e275749ebd008e74bb62e.md new file mode 100644 index 00000000000..f2e1a5f8071 --- /dev/null +++ b/curriculum/challenges/japanese/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e275749ebd008e74bb62e.md @@ -0,0 +1,66 @@ +--- +id: 613e275749ebd008e74bb62e +title: ステップ 8 +challengeType: 0 +dashedName: step-8 +--- + +# --description-- + +_SVG_ (scalable vector graphics) の便利な特徴として、SVG は、画像の解像度に影響を与えずに拡大縮小することを可能にする `path` 属性を含みます。 + +今、`img` 要素はデフォルトのサイズを想定していますが、大きすぎるようです。 正しく表示するため、`id` をセレクターとして使用し、`width` の値を `max(100px, 18vw)` に設定して画像を縮小してください。 + +# --hints-- + +`#logo` セレクターを使用して `img` 要素を選択する必要があります。 + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('#logo')); +``` + +`img` 要素の `width` を `max(100px, 18vw)` に設定する必要があります。 + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('#logo')?.width, 'max(100px, 18vw)'); +``` + +# --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-- + +``` diff --git a/curriculum/challenges/portuguese/01-responsive-web-design/css-flexbox/align-elements-using-the-justify-content-property.md b/curriculum/challenges/portuguese/01-responsive-web-design/css-flexbox/align-elements-using-the-justify-content-property.md index fe39e1cec39..37bb9e0928a 100644 --- a/curriculum/challenges/portuguese/01-responsive-web-design/css-flexbox/align-elements-using-the-justify-content-property.md +++ b/curriculum/challenges/portuguese/01-responsive-web-design/css-flexbox/align-elements-using-the-justify-content-property.md @@ -11,7 +11,7 @@ dashedName: align-elements-using-the-justify-content-property Às vezes, os flex items dentro de um flex container não preenchem todo o espaço no disponível no contêiner. É comum querer dizer ao CSS como alinhar e espaçar os flex items de uma certa maneira. Felizmente, a propriedade `justify-content` tem várias opções para fazer isso. Antes, no entanto, há uma terminologia importante para entender antes de aprender essas opções. -[Aqui temos uma imagem útil do W3C, que ilustra os conceitos abaixo para um contêiner flex do tipo 'row' (linha).](https://www.w3.org/TR/css-flexbox-1/images/flex-direction-terms.svg) +[Para mais informações sobre as propriedades do flex-box](https://www.freecodecamp.org/news/flexbox-the-ultimate-css-flex-cheatsheet/) Lembre-se de que definir um flex container como uma linha coloca os flex items lado a lado da esquerda para a direita. Já um flex container como uma coluna coloca os flex items em uma pilha vertical de cima para baixo. Seja qual for a direção do flex container, a direção em que os flex items são posicionados é chamada de **eixo principal**. Para uma linha, o eixo principal é uma linha horizontal que passa através de cada item. E para uma coluna, o eixo principal é uma linha vertical que passa através de cada item. diff --git a/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/basic-javascript/multiple-identical-options-in-switch-statements.md b/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/basic-javascript/multiple-identical-options-in-switch-statements.md index b36c8a09da4..03b92f71309 100644 --- a/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/basic-javascript/multiple-identical-options-in-switch-statements.md +++ b/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/basic-javascript/multiple-identical-options-in-switch-statements.md @@ -13,7 +13,7 @@ Se a instrução `break` for omitida de uma instrução `case` de um `switch`, a ```js let result = ""; -switch(val) { +switch (val) { case 1: case 2: case 3: @@ -127,7 +127,7 @@ sequentialSizes(1); function sequentialSizes(val) { let answer = ""; - switch(val) { + switch (val) { case 1: case 2: case 3: diff --git a/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/basic-javascript/replacing-if-else-chains-with-switch.md b/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/basic-javascript/replacing-if-else-chains-with-switch.md index c08b94c7c65..ea6de9e0177 100644 --- a/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/basic-javascript/replacing-if-else-chains-with-switch.md +++ b/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/basic-javascript/replacing-if-else-chains-with-switch.md @@ -24,7 +24,7 @@ if (val === 1) { pode ser substituído por: ```js -switch(val) { +switch (val) { case 1: answer = "a"; break; @@ -136,7 +136,7 @@ chainToSwitch(7); function chainToSwitch(val) { let answer = ""; - switch(val) { + switch (val) { case "bob": answer = "Marley"; break; diff --git a/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/basic-javascript/selecting-from-many-options-with-switch-statements.md b/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/basic-javascript/selecting-from-many-options-with-switch-statements.md index 82c837dbda5..13606b0b6b0 100644 --- a/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/basic-javascript/selecting-from-many-options-with-switch-statements.md +++ b/curriculum/challenges/portuguese/02-javascript-algorithms-and-data-structures/basic-javascript/selecting-from-many-options-with-switch-statements.md @@ -14,7 +14,7 @@ Se você possui muitas opções pra escolher, use uma instrução switch div')?.length, 3); +``` + +Você deve dar à `div` uma `class` de `left-mountain`. + +```js +assert.include(document.querySelector('body > div:not(.ground, .penguin)')?.className, 'left-mountain'); +``` + +Você deve colocar o `.left-mountain` antes de `.penguin`. + +```js +assert.strictEqual(document.querySelector('.penguin')?.previousElementSibling, document.querySelector('.left-mountain')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Penguin + + + +--fcc-editable-region-- + + +
+
+ +--fcc-editable-region-- + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; +} +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61969c487ced6f12db8fef94.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61969c487ced6f12db8fef94.md new file mode 100644 index 00000000000..44342ab275e --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61969c487ced6f12db8fef94.md @@ -0,0 +1,89 @@ +--- +id: 61969c487ced6f12db8fef94 +title: Passo 14 +challengeType: 0 +dashedName: step-14 +--- + +# --description-- + +Coloque em foco o elemento `.left-mountain` e defina `width` e `height` como `300px`. Então, defina o `background` como um gradiente linear começando em `rgb(203, 241, 228)` e terminando em `rgb(80, 183, 255)`. + +# --hints-- + +Você deve usar o seletor `.left-mountain`. + +```js +assert.match(code, /\.left-mountain\s*\{/); +``` + +Você deve dar a `.left-mountain` uma `width` de `300px`. Encontrado `--fcc-actual--` ao invés de `--fcc-expected--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.width, '300px'); +``` + +Você deve dar a `.left-mountain` uma `height` de `300px`. Encontrado `--fcc-actual--` ao invés de `--fcc-expected--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.height, '300px'); +``` + +Você deve dar a `.left-mountain` um `background` de `linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255))`. + +```js +assert.include(['linear-gradient(rgb(203,241,228),rgb(80,183,255))', 'rgba(0,0,0,0)linear-gradient(rgb(203,241,228),rgb(80,183,255))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.left-mountain')?.getPropVal('background', true)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Penguin + + + + +
+
+
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; +} +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61969d66cfcdba137d021558.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61969d66cfcdba137d021558.md new file mode 100644 index 00000000000..0bcf4fb973b --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61969d66cfcdba137d021558.md @@ -0,0 +1,76 @@ +--- +id: 61969d66cfcdba137d021558 +title: Passo 15 +challengeType: 0 +dashedName: step-15 +--- + +# --description-- + +Para evitar que a montanha empurre o elemento `.ground`, ajuste a `position` para evitar que ocupe espaço no layout da página. + +# --hints-- + +Você deve dar a `.left-mountain` uma `position` de `absolute`. Encontrado `--fcc-actual--` ao invés de `--fcc-expected--`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.position, 'absolute'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + + Penguin + + + + +
+
+
+ + +``` + +```css +body { + background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222)); + margin: 0; + padding: 0; + width: 100%; + height: 100vh; + overflow: clip; +} + +--fcc-editable-region-- +.left-mountain { + width: 300px; + height: 300px; + background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255)); + +} +--fcc-editable-region-- + +.penguin { + width: 300px; + height: 300px; + margin: auto; + margin-top: 75px; +} + +.ground { + width: 100vw; + height: 400px; + background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255)); + z-index: 3; + position: absolute; +} +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f027099a15b00485563dd2.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f027099a15b00485563dd2.md new file mode 100644 index 00000000000..9424507de46 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f027099a15b00485563dd2.md @@ -0,0 +1,54 @@ +--- +id: 60f027099a15b00485563dd2 +title: Passo 2 +challengeType: 0 +dashedName: step-2 +--- + +# --description-- + +Adicione as tags de abertura e fechamento de `html` abaixo do `DOCTYPE` para que você tenha um lugar para começar a colocar algum código. + +# --hints-- + +A declaração `DOCTYPE` deve estar no ínicio do HTML. + +```js +assert(__helpers.removeHtmlComments(code).match(/^\s*/i)); +``` + +O elemento `html` deve ter uma tag de abertura. + +```js +assert(code.match(//gi)); +``` + +O elemento `html` deve ter uma tag de fechamento. + +```js +assert(code.match(/<\/html\s*>/)); +``` + +As tags `html` devem estar na ordem correta. + +```js +assert(code.match(/\s*<\/html\s*>/)); +``` + +Você deve ter apenas um elemento `html`. + +```js +// Possibly a redundant test, as browser fixes this +assert(document.querySelectorAll('html').length === 1); +``` + +# --seed-- + +## --seed-contents-- + +```html +--fcc-editable-region-- + + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f0286404aefb0562a4fdf9.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f0286404aefb0562a4fdf9.md new file mode 100644 index 00000000000..58e7b3a4aae --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f0286404aefb0562a4fdf9.md @@ -0,0 +1,99 @@ +--- +id: 60f0286404aefb0562a4fdf9 +title: Passo 4 +challengeType: 0 +dashedName: step-4 +--- + +# --description-- + +Adicione um elemento `title` ao `head`e dê ao projeto um título de `Registration Form`. Da mesma forma, aninhe um elemento `link` de fechamento automático ao elemento `head`. Dê a ele um atributo `rel` com o valor `stylesheet`, um atributo `type` com o valor `text/css` e um atributo `href` com o valor `styles.css`. + +# --hints-- + +O código deve ter um elemento `title`. + +```js +const title = document.querySelector('title'); +assert.exists(title); +``` + +O elemento `title` deve estar dentro do elemento `head`. + +```js +assert.exists(document.querySelector('head > title')); +``` + +O projeto deve ter o título `Registration Form`. + +```js +const title = document.querySelector('title'); +assert.equal(title.text.toLowerCase(), 'registration form') +``` + +Lembre-se, maiúsculas, minúsculas e a ortografia são importantes para o título. + +```js +const title = document.querySelector('title'); +assert.equal(title.text, 'Registration Form'); +``` + +O código deve ter um elemento `link`. + +```js +assert.match(code, //i)); +``` + +O elemento `link` deve estar dentro do elemento `head`. + +```js +assert(code.match(/[\w\W\s]*[\w\W\s]*<\/head>/i)) +``` + +O elemento `link` deve ter um atributo `rel` com o valor `stylesheet`. + +```js +assert.match(code, / + + --fcc-editable-region-- + + + + + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f1922fcbd2410527b3bd89.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f1922fcbd2410527b3bd89.md new file mode 100644 index 00000000000..80c63410aa1 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f1922fcbd2410527b3bd89.md @@ -0,0 +1,54 @@ +--- +id: 60f1922fcbd2410527b3bd89 +title: Passo 7 +challengeType: 0 +dashedName: step-7 +--- + +# --description-- + +Para dar uma arrumada no projeto, vamos adicionar um pouco de CSS. Comece fornecendo ao `body` uma `width` de `100%`, e uma `height` de `100vh`. + +# --hints-- + +Você deve usar o elemento `body`. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('body')); +``` + +Você deve dar ao `body` uma `width` de `100%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.width, '100%'); +``` + +Você deve dar ao `body` uma `height` de `100vh`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.height, '100vh'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+ + +``` + +```css +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f805f813eaf2049bc2ceea.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f805f813eaf2049bc2ceea.md new file mode 100644 index 00000000000..91f18ce1024 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f805f813eaf2049bc2ceea.md @@ -0,0 +1,94 @@ +--- +id: 60f805f813eaf2049bc2ceea +title: Passo 15 +challengeType: 0 +dashedName: step-15 +--- + +# --description-- + +Adicione um elemento `input` dentro do elemento `label`. Não se esqueça de adicionar os elementos `input` após o texto `label` e de incluir um espaço após a vírgula. + +# --hints-- + +Você deve adicionar um elemento `input` ao elemento `fieldset`. + +```js +assert.equal(document.querySelectorAll('fieldset input')?.length, 4); +``` + +Você deve aninhar os elementos `input` dentro dos elementos `label`. + +```js +assert.equal(document.querySelectorAll('label input')?.length, 4); +``` + +Você deve adicionar o primeiro `input` após o texto `Enter Your First Name:` do elemento `label` e incluir um espaço depois dos dois-pontos. + +```js +assert.equal(document.querySelectorAll('label')?.[0]?.innerHTML, 'Enter Your First Name: '); +``` + +Você deve adicionar o segundo `input` após o texto `Enter Your Last Name:` do elemento `label` e incluir um espaço depois dos dois-pontos. + +```js +assert.equal(document.querySelectorAll('label')?.[1]?.innerHTML, 'Enter Your Last Name: '); +``` + +Você deve adicionar o terceiro `input` após o texto `Enter Your Email:` do elemento `label` e incluir um espaço depois dos dois-pontos. + +```js +assert.equal(document.querySelectorAll('label')?.[2]?.innerHTML, 'Enter Your Email: '); +``` + +Você deve adicionar o quarto `input` após o texto `Create a New Password:` do elemento `label` e incluir um espaço depois dos dois-pontos. + +```js +assert.equal(document.querySelectorAll('label')?.[3]?.innerHTML, 'Create a New Password: '); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+ --fcc-editable-region-- +
+ + + + +
+--fcc-editable-region-- +
+
+
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f81167d0d4910809f88945.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f81167d0d4910809f88945.md new file mode 100644 index 00000000000..8ea2c1a5600 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f81167d0d4910809f88945.md @@ -0,0 +1,79 @@ +--- +id: 60f81167d0d4910809f88945 +title: Passo 17 +challengeType: 0 +dashedName: step-17 +--- + +# --description-- + +O primeiro elemento `input` com o `type` com valor de `submit` é definido automaticamente para que envie o elemento `form` pai mais próximo. + +Para lidar com o envio do formulário, depois do último elemento `fieldset`, adicione um elemento `input` com o atributo `type` definido como `submit` e o atributo `value` definido como `Submit`. + +# --hints-- + +Você deve adicionar um elemento `input` após o último elemento `fieldset`. + +```js +assert.exists(document.querySelectorAll('fieldset')?.[2]?.nextElementSibling?.tagName, 'input'); +``` + +Você deve dar ao elemento `input` um atributo `type` de `submit`. + +```js +assert.exists(document.querySelector('fieldset + input[type="submit"]')); +``` + +Você deve dar ao elemento `input` um atributo `value` de `Submit`. + +```js +assert.exists(document.querySelector('fieldset + input[value="Submit"]')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+--fcc-editable-region-- +
+ + + + +
+
+
+ +--fcc-editable-region-- +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f81616cff80508badf9ad5.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f81616cff80508badf9ad5.md new file mode 100644 index 00000000000..b8152ae25b4 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f81616cff80508badf9ad5.md @@ -0,0 +1,93 @@ +--- +id: 60f81616cff80508badf9ad5 +title: Passo 18 +challengeType: 0 +dashedName: step-18 +--- + +# --description-- + +Neste ponto, você deve conseguir enviar o formulário. No entanto, você vai notar que não acontece muita coisa. + +Para deixar o formulário mais interativo, adicione o atributo `required` aos elementos `input` no primeiro `fieldset`. + +Agora, se você tentar enviar o formulário sem preencher os campos obrigatórios, você verá uma mensagem de erro. + +# --hints-- + +Você deve dar ao primeiro elemento `input` um atributo `required`. + +```js +assert.equal(document.querySelector('input')?.required, true); +``` + +Você deve dar ao segundo elemento `input` um atributo `required`. + +```js +assert.equal(document.querySelectorAll('input')?.[1]?.required, true); +``` + +Você deve dar ao terceiro elemento `input` um atributo `required`. + +```js +assert.equal(document.querySelectorAll('input')?.[2]?.required, true); +``` + +Você deve dar ao quarto elemento `input` um atributo `required`. + +```js +assert.equal(document.querySelectorAll('input')?.[3]?.required, true); +``` + +Remova o atributo `required` do `input` com valor `submit`. + +```js +assert.equal(document.querySelector('input[type="submit"]')?.required, false); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+--fcc-editable-region-- +
+ + + + +
+
+
+ +--fcc-editable-region-- +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f852f645b5310a8264f555.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f852f645b5310a8264f555.md new file mode 100644 index 00000000000..363783cb9b8 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f852f645b5310a8264f555.md @@ -0,0 +1,75 @@ +--- +id: 60f852f645b5310a8264f555 +title: Passo 21 +challengeType: 0 +dashedName: step-21 +--- + +# --description-- + +Vamos para a próxima parte do formulário de registo. Esta seção pedirá o tipo de conta que o usuário está abrindo e confirmará que o usuário leu os termos e condições. + +Comece adicionando três elementos `label` ao segundo `fieldset`. + +# --hints-- + +Você deve adicionar três elementos `label` ao segundo `fieldset`. + +```js +assert.equal(document.querySelectorAll('fieldset')?.[1]?.querySelectorAll('label')?.length, 3); +``` + +Os elementos `label` devem ser irmãos. + +```js +assert.exists(document.querySelector('fieldset:nth-child(2)')?.querySelector('label + label + label')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+--fcc-editable-region-- +
+ +
+--fcc-editable-region-- +
+ +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f8618d191b940d62038513.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f8618d191b940d62038513.md new file mode 100644 index 00000000000..d0f3f7672cc --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f8618d191b940d62038513.md @@ -0,0 +1,105 @@ +--- +id: 60f8618d191b940d62038513 +title: Passo 24 +challengeType: 0 +dashedName: step-24 +--- + +# --description-- + +Dentro de cada elemento `label` e imediatamente após o elemento `input`, adicione um espaço e adicione respectivamente o seguinte texto: + +```md +Personal Account +Business Account +I accept the terms and conditions +``` + +# --hints-- + +Você deve dar ao primeiro elemento `label` o texto `Personal Account`. + +```js +assert.include(document.querySelector('fieldset:nth-child(2) > label')?.innerText, 'Personal Account'); +``` + +Você deve dar ao segundo elemento `label` o texto `Business Account`. + +```js +assert.include(document.querySelector('fieldset:nth-child(2) > label:nth-child(2)')?.innerText, 'Business Account'); +``` + +Você deve dar ao terceiro `label` o texto `I accept the terms and conditions`. + +```js +assert.include(document.querySelector('fieldset:nth-child(2) > label:nth-child(3)')?.innerText, 'I accept the terms and conditions'); +``` + +Você deve dar ao primeiro elemento `label` espaço no início. + +```js +assert.equal(document.querySelector('fieldset:nth-child(2) > label')?.innerText?.[0], ' '); +``` + +Você deve dar ao segundo elemento `label` espaço no início. + +```js +assert.equal(document.querySelector('fieldset:nth-child(2) > label:nth-child(2)')?.innerText?.[0], ' '); +``` + +Você deve dar ao terceiro elemento `label` espaço no início. + +```js +assert.equal(document.querySelector('fieldset:nth-child(2) > label:nth-child(3)')?.innerText?.[0], ' '); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+--fcc-editable-region-- +
+ + + +
+--fcc-editable-region-- +
+ +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab4a123ce4b04526b082b.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab4a123ce4b04526b082b.md new file mode 100644 index 00000000000..b4edad8dcaf --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab4a123ce4b04526b082b.md @@ -0,0 +1,83 @@ +--- +id: 60fab4a123ce4b04526b082b +title: Passo 25 +challengeType: 0 +dashedName: step-25 +--- + +# --description-- + +Apenas uma entrada com botão de opção deve ser selecionável por vez. No entanto, o formulário não sabe se as entradas de botão de opção estão relacionadas. + +Para relacionar as entradas com botão de opção, dê a elas o mesmo atributo `name` atributo com um valor de `account-type`. Agora, não é possível selecionar ambas as entradas de botão de opção ao mesmo tempo. + +# --hints-- + +Você deve dar à primeira entrada de botão de opção o atributo `name` com um valor de `account-type`. + +```js +assert.equal(document.querySelector('fieldset:nth-child(2) label:nth-child(1) input[type="radio"]')?.name, 'account-type'); +``` + +Você deve dar à segunda entrada de botão de opção o atributo `name` com um valor de `account-type`. + +```js +assert.equal(document.querySelector('fieldset:nth-child(2) label:nth-child(2) input[type="radio"]')?.name, 'account-type'); +``` + +O elemento `checkbox` não deve ter o atributo `name`. + +```js +assert.isEmpty(document.querySelector('fieldset:nth-child(2) label:nth-child(3) input[type="checkbox"]')?.name); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+--fcc-editable-region-- +
+ + + +
+--fcc-editable-region-- +
+ +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab8367d35de04e5cb7929.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab8367d35de04e5cb7929.md new file mode 100644 index 00000000000..e0b3d5b812d --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab8367d35de04e5cb7929.md @@ -0,0 +1,85 @@ +--- +id: 60fab8367d35de04e5cb7929 +title: Passo 26 +challengeType: 0 +dashedName: step-26 +--- + +# --description-- + +Para terminar este `fieldset`, vincule o texto `terms and conditions` para a seguinte localização: + +```md +https://www.freecodecamp.org/news/terms-of-service/ +``` + +# --hints-- + +Você deve usar um elemento `a` para vincular aos termos e condições. + +```js +assert.exists(document.querySelector('fieldset:nth-child(2) > label:nth-child(3) > input + a')); +``` + +Você deve dar ao elemento `a` o atributo `href` de `https://www.freecodecamp.org/news/terms-of-service/`. + +```js +assert.match(document.querySelector('fieldset:nth-child(2) > label:nth-child(3) > input + a')?.href, /https:\/\/www\.freecodecamp\.org\/news\/terms-of-service\/?/); +``` + +Você deve encapsular o elemento `a` em torno apenas do texto `terms and conditions`. + +```js +assert.equal(document.querySelector('fieldset:nth-child(2) > label:nth-child(3) > input + a')?.textContent, 'terms and conditions'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+--fcc-editable-region-- +
+ + + +
+--fcc-editable-region-- +
+ +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab9f17fa294054b74228c.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab9f17fa294054b74228c.md new file mode 100644 index 00000000000..6b992c75cd3 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab9f17fa294054b74228c.md @@ -0,0 +1,88 @@ +--- +id: 60fab9f17fa294054b74228c +title: Passo 27 +challengeType: 0 +dashedName: step-27 +--- + +# --description-- + +Agora vamos fazer o último `fieldset`. E se você quiser permitir que um usuário faça o upload de uma foto de perfil? + +Bom, o `input` de tipo `file` permite isso. Adicione um `label` com o texto `Upload a profile picture:` e adicione um `input` que aceita o upload de arquivos. + +# --hints-- + +Você deve adicionar um `label` com o texto `Upload a profile picture:`. + +```js +assert.match(document.querySelector('fieldset:nth-child(3) > label')?.innerText, /Upload a profile picture:/i); +``` + +Você deve aninhar um elemento `input` dentro do elemento `label`. + +```js +assert.exists(document.querySelector('fieldset:nth-child(3) > label > input')); +``` + +Você deve dar ao elemento `input` um `type` de `file`. + +```js +assert.equal(document.querySelector('fieldset:nth-child(3) > label > input')?.type, 'file'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+--fcc-editable-region-- +
+ +
+--fcc-editable-region-- + +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fabf0dd4959805dbae09e6.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fabf0dd4959805dbae09e6.md new file mode 100644 index 00000000000..14a7128a9c8 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fabf0dd4959805dbae09e6.md @@ -0,0 +1,102 @@ +--- +id: 60fabf0dd4959805dbae09e6 +title: Passo 28 +challengeType: 0 +dashedName: step-28 +--- + +# --description-- + +Adicione outro `label` após o primeiro, com o texto `Input your age (years):`. Depois, aninhe um `input` com o `type` de `number`. + +Como não queremos que os usuários com menos de 13 anos se registrem, adicione um atributo `min` ao `input` com o valor de `13`. Além disso, podemos presumir que os usuários com mais de 120 anos não se registrarão; adicione um atributo `max` com um valor de `120`. + +Agora, se alguém tentar enviar o formulário com valores fora do intervalo, um aviso aparecerá, e o formulário não será enviado. Faça uma tentativa. + +# --hints-- + +Você deve adicionar um `label` ao terceiro `fieldset`, depois da `label` pré-existente. + +```js +assert.exists(document.querySelector('fieldset:nth-child(3) > label + label')); +``` + +Você deve atribuir ao elemento `label` o texto `Input your age (years):`. + +```js +assert.equal(document.querySelector('fieldset:nth-child(3) > label:nth-child(2)')?.textContent?.trim(), 'Input your age (years):'); +``` + +Você deve dar ao `label` um `input` com o `type` de `number`. + +```js +assert.exists(document.querySelector('fieldset:nth-child(3) > label:nth-child(2) > input[type="number"]')); +``` + +Você deve dar ao elemento `input` um atributo `min` com o valor de `13`. + +```js +assert.equal(document.querySelector('fieldset:nth-child(3) > label:nth-child(2) > input[type="number"]')?.min, '13'); +``` + +Você deve dar ao elemento `input` um atributo `max` com o valor de `120`. + +```js +assert.equal(document.querySelector('fieldset:nth-child(3) > label:nth-child(2) > input[type="number"]')?.max, '120'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+--fcc-editable-region-- +
+ + +
+--fcc-editable-region-- + +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fac4095512d3066053d73c.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fac4095512d3066053d73c.md new file mode 100644 index 00000000000..eeda0aa6dc5 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fac4095512d3066053d73c.md @@ -0,0 +1,84 @@ +--- +id: 60fac4095512d3066053d73c +title: Passo 29 +challengeType: 0 +dashedName: step-29 +--- + +# --description-- + +Adicionar uma lista suspensa ao formulário é fácil com o elemento `select`. O elemento `select` é um repositório para um grupo de elementos `option` e o elemento `option` funciona como um rótulo para cada opção de seleção. Os dois elementos requerem tags de fechamento. + +Comece adicionando um elemento `select` abaixo dos dois elementos `label`. Você deve aninhar 5 elementos `option` dentro do elemento `select`. + +# --hints-- + +Você deve adicionar um elemento `select` ao terceiro `fieldset`. + +```js +assert.exists(document.querySelector('fieldset:nth-child(3) > select')); +``` + +Você deve aninhar cinco elementos `option` dentro do elemento `select`. + +```js +assert.equal(document.querySelectorAll('fieldset:nth-child(3) > select > option')?.length, 5); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+--fcc-editable-region-- +
+ + + +
+--fcc-editable-region-- + +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fac56271087806def55b33.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fac56271087806def55b33.md new file mode 100644 index 00000000000..067ffcf2adc --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fac56271087806def55b33.md @@ -0,0 +1,94 @@ +--- +id: 60fac56271087806def55b33 +title: Passo 30 +challengeType: 0 +dashedName: step-30 +--- + +# --description-- + +Aninhe o elemento `select` dentro de um elemento `label` com o texto `How did you hear about us?`. O texto deve vir antes do elemento `select`. + +# --hints-- + +Você deve aninhar apenas o elemento `select` dentro do elemento `label`. + +```js +assert.exists(document.querySelector('fieldset:nth-child(3) > label:nth-child(3) > select')); +``` + +Você deve dar ao elemento `label` o texto `How did you hear about us?`. + +```js +assert.equal(document.querySelector('fieldset:nth-child(3) > label:nth-child(3)')?.innerText?.trim(), 'How did you hear about us?'); +``` + +Você deve colocar o texto antes do elemento `select`. + +```js +assert.match(document.querySelector('fieldset:nth-child(3) > label:nth-child(3)')?.innerHTML?.replace(/[\t\n]+/g, ''), /^How did you hear about us\?/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+--fcc-editable-region-- +
+ + + +
+--fcc-editable-region-- + +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fac8d7fdfaee0796934f20.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fac8d7fdfaee0796934f20.md new file mode 100644 index 00000000000..349c0b23a2e --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fac8d7fdfaee0796934f20.md @@ -0,0 +1,116 @@ +--- +id: 60fac8d7fdfaee0796934f20 +title: Passo 31 +challengeType: 0 +dashedName: step-31 +--- + +# --description-- + +As opções de lista suspensa estão atualmente vazias. Para dar conteúdo a elas, adicione o seguinte texto para cada elemento `option` abaixo: + +```md +(select one) +freeCodeCamp News +freeCodeCamp YouTube Channel +freeCodeCamp Forum +Other +``` + +# --hints-- + +Você deve dar ao primeiro elemento `option` o texto `(select one)`. + +```js +assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(3) option')?.[0]?.textContent, '(select one)'); +``` + +Você deve dar ao segundo elemento `option` o texto `freeCodeCamp News`. + +```js +assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(3) option')?.[1]?.textContent, 'freeCodeCamp News'); +``` + +Você deve dar ao terceiro elemento `option` o texto `freeCodeCamp YouTube Channel`. + +```js +assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(3) option')?.[2]?.textContent, 'freeCodeCamp YouTube Channel'); +``` + +Você deve dar ao quarto elemento `option` o texto `freeCodeCamp Forum`. + +```js +assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(3) option')?.[3]?.textContent, 'freeCodeCamp Forum'); +``` + +Você deve dar ao quinto elemento `option` o texto `Other`. + +```js +assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(3) option')?.[4]?.textContent, 'Other'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+--fcc-editable-region-- +
+ + + +
+--fcc-editable-region-- + +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60faca286cb48b07f6482970.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60faca286cb48b07f6482970.md new file mode 100644 index 00000000000..0a96cf5ccb9 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60faca286cb48b07f6482970.md @@ -0,0 +1,110 @@ +--- +id: 60faca286cb48b07f6482970 +title: Passo 32 +challengeType: 0 +dashedName: step-32 +--- + +# --description-- + +Submeter um formulário com uma opção selecionada não enviaria um valor útil para o servidor. Dessa forma, cada `option` precisa receber um atributo `value`. Sem isso, o conteúdo de texto da `option` será enviado ao servidor. + +Dê ao primeiro `option` um `value` de `""` e aos elementos `option` subsequentes atributos `value` de `1` a `4`. + +# --hints-- + +Você deve dar ao primeiro elemento `option` um `value` de `""`. + +```js +assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(3) option')?.[0]?.value, ''); +``` + +Você deve dar ao segundo elemento `option` um `value` de `1`. + +```js +assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(3) option')?.[1]?.value, '1'); +``` + +Você deve dar ao terceiro elemento `option` um `value` de `2`. + +```js +assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(3) option')?.[2]?.value, '2'); +``` + +Você deve dar ao quarto elemento `option` um `value` de `3`. + +```js +assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(3) option')?.[3]?.value, '3'); +``` + +Você deve dar ao quinto elemento `option` um `value` de `4`. + +```js +assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(3) option')?.[4]?.value, '4'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+--fcc-editable-region-- +
+ + + +
+--fcc-editable-region-- + +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60facde2d0dc61085b41063f.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60facde2d0dc61085b41063f.md new file mode 100644 index 00000000000..ede4418967f --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60facde2d0dc61085b41063f.md @@ -0,0 +1,105 @@ +--- +id: 60facde2d0dc61085b41063f +title: Passo 33 +challengeType: 0 +dashedName: step-33 +--- + +# --description-- + +O elemento `textarea` age como um elemento `input` do tipo `text`, mas vem com o benefício adicional de poder receber texto em várias linhas e um número inicial de linhas e colunas. + +Para permitir que os usuários se registrem com uma biografia, adicione um `label` com o texto `Provide a bio:` seguido de um elemento `textarea`, que requer uma tag de fechamento. + +# --hints-- + +Você deve adicionar um `label` ao terceiro `fieldset`, depois da `label` pré-existente. + +```js +assert.exists(document.querySelector('fieldset:nth-child(3) > label:nth-child(4)')); +``` + +Você deve atribuir ao elemento `label` o texto `Provide a bio:`. + +```js +assert.match(document.querySelector('fieldset:nth-child(3) > label:nth-child(4)')?.innerText, /Provide a bio/); +``` + +Você deve adicionar um elemento `textarea` ao `label`. + +```js +assert.exists(document.querySelector('fieldset:nth-child(3) > label:nth-child(4) > textarea')); +``` + +Você deve dar ao elemento `textarea` tags de abertura e fechamento. + +```js +assert.match(code, /[\s\S]*<\/textarea\s*>/); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+--fcc-editable-region-- +
+ + + + +
+--fcc-editable-region-- + +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60facf914c7b9b08d7510c2c.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60facf914c7b9b08d7510c2c.md new file mode 100644 index 00000000000..b7e01ac2722 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60facf914c7b9b08d7510c2c.md @@ -0,0 +1,95 @@ +--- +id: 60facf914c7b9b08d7510c2c +title: Passo 34 +challengeType: 0 +dashedName: step-34 +--- + +# --description-- + +A `textarea` está muito pequena. Para dar a ela um tamanho inicial, você pode adicionar os atributos `rows` e `cols`. + +Adicione um tamanho inicial de `3` linhas e `30` colunas. + +# --hints-- + +Você deve dar ao elemento `textarea` um atributo `rows` com o valor de `3`. + +```js +assert.equal(document.querySelector('fieldset:nth-child(3) > label:nth-child(4) > textarea')?.rows, 3); +``` + +Você deve dar ao elemento `textarea` um atributo `cols` com o valor de `30`. + +```js +assert.equal(document.querySelector('fieldset:nth-child(3) > label:nth-child(4) > textarea')?.cols, 30); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+--fcc-editable-region-- +
+ + + + +
+--fcc-editable-region-- + +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad0a812d9890938524f50.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad0a812d9890938524f50.md new file mode 100644 index 00000000000..4daf05d6280 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad0a812d9890938524f50.md @@ -0,0 +1,95 @@ +--- +id: 60fad0a812d9890938524f50 +title: Passo 35 +challengeType: 0 +dashedName: step-35 +--- + +# --description-- + +Para dar aos Campers uma ideia do que colocar na bio, o atributo `placeholder` é usado. O `placeholder` aceita um valor de texto, que é exibido até que o usuário comece a digitar. + +Dê ao `textarea` um `placeholder` de `I like coding on the beach...`. + +# --hints-- + +Você deve dar ao `textarea` um atributo `placeholder`. + +```js +assert.isNotEmpty(document.querySelector('fieldset:nth-child(3) > label:nth-child(4) > textarea')?.placeholder); +``` + +Você deve dar ao `placeholder` um valor de `I like coding on the beach...`. + +```js +assert.equal(document.querySelector('fieldset:nth-child(3) > label:nth-child(4) > textarea')?.placeholder, 'I like coding on the beach...'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+--fcc-editable-region-- +
+ + + + +
+--fcc-editable-region-- + +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad1cafcde010995e15306.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad1cafcde010995e15306.md new file mode 100644 index 00000000000..cafaa97dcdc --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad1cafcde010995e15306.md @@ -0,0 +1,155 @@ +--- +id: 60fad1cafcde010995e15306 +title: Passo 36 +challengeType: 0 +dashedName: step-36 +--- + +# --description-- + +Com envios de formulário, é útil e boa prática fornecer a cada elemento enviado um atributo `name`. Este atributo é usado para identificar o elemento no envio do formulário. + +Vá em frente e dê a cada elemento que possa ser enviado um atributo `name` único de sua escolha. _Exceto para as duas entradas `radio`._ + +# --hints-- + +Você deve dar ao elemento `input` que pede pelo primeiro nome um atributo `name`. _Dica: eu teria escolhido `first-name`_ + +```js +assert.isNotEmpty(document.querySelector('fieldset:nth-child(1) > label:nth-child(1) > input')?.name); +``` + +Você deve dar ao elemento `input` que pede pelo sobrenome um atributo `name`. _Dica: eu teria escolhido `last-name`_ + +```js +assert.isNotEmpty(document.querySelector('fieldset:nth-child(1) > label:nth-child(2) > input')?.name); +``` + +Você deve dar ao elemento `email` um atributo `name`. _Dica: eu teria escolhido `email`_ + +```js +assert.isNotEmpty(document.querySelector('input[type="email"]')?.name); +``` + +Você deve dar ao elemento `password` um atributo `name`. _Dica: eu teria escolhido `password`_ + +```js +assert.isNotEmpty(document.querySelector('input[type="password"]')?.name); +``` + +Você deve dar ao elemento `checkbox` um atributo `name`. _Dica: eu teria escolhido `terms`_ + +```js +assert.isNotEmpty(document.querySelector('input[type="checkbox"]')?.name); +``` + +Você deve dar ao elemento `file` um atributo `name`. _Dica: eu teria escolhido `file`_ + +```js +assert.isNotEmpty(document.querySelector('input[type="file"]')?.name); +``` + +Você deve dar ao elemento `number` um atributo `name`. _Dica: eu teria escolhido `age`_ + +```js +assert.isNotEmpty(document.querySelector('input[type="number"]')?.name); +``` + +Você deve dar ao elemento `select` um atributo `name`. _Dica: eu teria escolhido `referrer`_ + +```js +assert.isNotEmpty(document.querySelector('select')?.name); +``` + +Você deve dar ao elemento `textarea` um atributo `name`. _Dica: eu teria escolhido `bio`_ + +```js +assert.isNotEmpty(document.querySelector('textarea')?.name); +``` + +Você deve não dar atributos `name` para nenhum elemento `option`. + +```js +[...document.querySelectorAll('option')]?.forEach(option => assert.isUndefined(option?.name)); +``` + +Você deve não dar atributos `name` para nenhum elemento `label`. + +```js +[...document.querySelectorAll('label')]?.forEach(label => assert.isUndefined(label?.name)); +``` + +Você deve não dar atributos `name` para nenhum elemento `fieldset`. + +```js +[...document.querySelectorAll('fieldset')]?.forEach(fieldset => assert.isEmpty(fieldset?.name)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+--fcc-editable-region-- +
+ + + + +
+
+ + + +
+
+ + + + +
+--fcc-editable-region-- + +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; +} + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad6dfcc0d930a59becf12.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad6dfcc0d930a59becf12.md new file mode 100644 index 00000000000..1ccacb8d10a --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad6dfcc0d930a59becf12.md @@ -0,0 +1,102 @@ +--- +id: 60fad6dfcc0d930a59becf12 +title: Passo 37 +challengeType: 0 +dashedName: step-37 +--- + +# --description-- + +O HTML para o formulário de registro foi finalizado. Agora, você pode arrumá-lo um pouco. + +Comece mudando a fonte para `Tahoma` e o tamanho da fonte para `16px` no `body`. + +# --hints-- + +Você deve definir a propriedade `font-family` para alterar a fonte. + +```js +assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('body')?.fontFamily); +``` + +Você deve definir a propriedade `font-family` como `Tahoma`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.fontFamily, 'Tahoma'); +``` + +Você deve definir a propriedade `font-size` como `16px`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.fontSize, '16px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+
+ + + + +
+ +
+ + +``` + +```css +--fcc-editable-region-- +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; + +} +--fcc-editable-region-- + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad8e6148f310bba7890b1.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad8e6148f310bba7890b1.md new file mode 100644 index 00000000000..cf06e870b1b --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad8e6148f310bba7890b1.md @@ -0,0 +1,103 @@ +--- +id: 60fad8e6148f310bba7890b1 +title: Passo 38 +challengeType: 0 +dashedName: step-38 +--- + +# --description-- + +Centralize os elementos `h1` e `p` dê a eles uma `margin` de `1em auto`. Então, centralize o texto também. + +# --hints-- + +Você deve usar um seletor de elementos separado por vírgulas para estilizar `h1` e `p`. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('h1, p')); +``` + +Você deve usar uma `margin` de `1em auto` para centralizar os elementos `h1` e `p`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('h1, p')?.margin, '1em auto'); +``` + +Você deve usar um `text-align` definido como `center` para centralizar o texto `h1` e `p`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('h1, p')?.textAlign, 'center'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+
+ + + + +
+ +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; + font-family: Tahoma; + font-size: 16px; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad99e09f9d30c1657e790.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad99e09f9d30c1657e790.md new file mode 100644 index 00000000000..68db49a3548 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad99e09f9d30c1657e790.md @@ -0,0 +1,120 @@ +--- +id: 60fad99e09f9d30c1657e790 +title: Passo 39 +challengeType: 0 +dashedName: step-39 +--- + +# --description-- + +Centralize o elemento `form` definindo a `margin` como `0 auto`. Agora, corrija o tamanho para que o máximo de `width` seja `500px`, e o mínimo `300px`. Dentro desse intervalo, faça com que ele tenha uma `width` de `60vw`. + +# --hints-- + +Você deve usar o seletor `form` para estilizar o elemento `form`. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('form')); +``` + +Você deve dar uma `margin` de `0 auto` ao `form`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('form')?.margin, '0px auto'); +``` + +Você deve dar ao `form` uma `max-width` de `500px`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('form')?.maxWidth, '500px'); +``` + +Você deve dar ao `form` uma `min-width` de `300px`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('form')?.minWidth, '300px'); +``` + +Você deve dar ao `form` uma `width` de `60vw`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('form')?.width, '60vw'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+
+ + + + +
+ +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; + font-family: Tahoma; + font-size: 16px; +} + +h1, p { + margin: 1em auto; + text-align: center; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fadb18058e950c73925279.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fadb18058e950c73925279.md new file mode 100644 index 00000000000..49b703b8844 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fadb18058e950c73925279.md @@ -0,0 +1,121 @@ +--- +id: 60fadb18058e950c73925279 +title: Passo 40 +challengeType: 0 +dashedName: step-40 +--- + +# --description-- + +Durante o desenvolvimento, é útil ver as bordas padrão do `fieldset`. Contudo, elas fazem com que o conteúdo pareça muito separado um do outro. + +Remova a `border` e adicione `2rem` de espaçamento apenas nas partes superior e inferior de cada `fieldset`. Certifique-se de remover o `padding` da esquerda e da direita. + +# --hints-- + +Você pode usar um valor de `none` ou `0` para remover o elemento `border`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle('fieldset')?.border, /(none)|(0px)/); +``` + +Você deve adicionar um `padding` de `2rem` nas partes superior e inferior de cada `fieldset`. + +```js +const fieldset = new __helpers.CSSHelp(document).getStyle('fieldset') +assert.equal(fieldset?.paddingTop, '2rem'); +assert.equal(fieldset?.paddingBottom, '2rem'); +``` + +Você deve remover o `padding` da esquerda e da direita de cada `fieldset`. + +```js +const fieldset = new __helpers.CSSHelp(document).getStyle('fieldset') +assert.equal(fieldset?.paddingLeft, '0px'); +assert.equal(fieldset?.paddingRight, '0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+
+ + + + +
+ +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; + font-family: Tahoma; + font-size: 16px; +} + +h1, p { + margin: 1em auto; + text-align: center; +} + +form { + width: 60vw; + max-width: 500px; + min-width: 300px; + margin: 0 auto; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fadce90f85c50d0bb0dd4f.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fadce90f85c50d0bb0dd4f.md new file mode 100644 index 00000000000..dc8514b6534 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fadce90f85c50d0bb0dd4f.md @@ -0,0 +1,114 @@ +--- +id: 60fadce90f85c50d0bb0dd4f +title: Passo 41 +challengeType: 0 +dashedName: step-41 +--- + +# --description-- + +Para dar aos elementos `fieldset` um pouco de separação, selecione todos exceto o último elemento `fieldset`, e dê a eles uma `border-bottom` inferior de `3px solid #3b3b4f`. + +# --hints-- + +Você pode usar a pseudoclasse `:not(:last-of-type)` para selecionar tudo menos o último elemento. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('fieldset:not(:last-of-type)')); +``` + +Você deve dar ao `fieldset` uma `border-bottom` de `3px solid #3b3b4f`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('fieldset:not(:last-of-type)')?.borderBottom, '3px solid rgb(59, 59, 79)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+
+ + + + +
+ +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; + font-family: Tahoma; + font-size: 16px; +} + +h1, p { + margin: 1em auto; + text-align: center; +} + +form { + width: 60vw; + max-width: 500px; + min-width: 300px; + margin: 0 auto; +} + +fieldset { + border: none; + padding: 2rem 0; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +label { + display: block; + margin: 0.5rem 0; +} + +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fadd972e6ffe0d6858fa2d.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fadd972e6ffe0d6858fa2d.md new file mode 100644 index 00000000000..b0ad26ee3f1 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fadd972e6ffe0d6858fa2d.md @@ -0,0 +1,151 @@ +--- +id: 60fadd972e6ffe0d6858fa2d +title: Passo 42 +challengeType: 0 +dashedName: step-42 +--- + +# --description-- + +Seria mais agradável se o texto do `label` fosse exibido acima dos elementos de formulário. + +Selecione todos os elementos `input`, `textarea` e `select`, e faça-os tomar toda a largura dos elementos pais. + +Além disso, adicione `10px` de `margin` ao topo dos elementos selecionados. Defina as outras margens como `0`. + +# --hints-- + +Você deve usar um seletor de elementos separados por vírgula para selecionar os elementos `input`, `textarea` e `select`. + +```js +assert.isTrue(['input, textarea, select', 'input, select, textarea', 'select, input, textarea', 'select, textarea, input', 'textarea, input, select', 'textarea, select, input'].some(selector => new __helpers.CSSHelp(document).getStyle(selector))); +``` + +Você deve definir a propriedade `width` como `100%`. + +```js +const selFunc = (selector) => new __helpers.CSSHelp(document).getStyle(selector); +assert.equal(selFunc(['input, textarea, select', 'input, select, textarea', 'select, input, textarea', 'select, textarea, input', 'textarea, input, select', 'textarea, select, input'].find(selFunc))?.width, '100%'); +``` + +Você deve definir o valor da propriedade `margin-top` como `10px`. + +```js +const selFunc = (selector) => new __helpers.CSSHelp(document).getStyle(selector); +assert.equal(selFunc(['input, textarea, select', 'input, select, textarea', 'select, input, textarea', 'select, textarea, input', 'textarea, input, select', 'textarea, select, input'].find(selFunc))?.marginTop, '10px'); +``` + +Você deve definir o valor da propriedade `margin-bottom` como `0`. + +```js +const selFunc = (selector) => new __helpers.CSSHelp(document).getStyle(selector); +assert.equal(selFunc(['input, textarea, select', 'input, select, textarea', 'select, input, textarea', 'select, textarea, input', 'textarea, input, select', 'textarea, select, input'].find(selFunc))?.marginBottom, '0px'); +``` + +Você deve definir a propriedade `margin-left` como `0`. + +```js +const selFunc = (selector) => new __helpers.CSSHelp(document).getStyle(selector); +assert.equal(selFunc(['input, textarea, select', 'input, select, textarea', 'select, input, textarea', 'select, textarea, input', 'textarea, input, select', 'textarea, select, input'].find(selFunc))?.marginLeft, '0px'); +``` + +Você deve definir a propriedade `margin-right` como `0`. + +```js +const selFunc = (selector) => new __helpers.CSSHelp(document).getStyle(selector); +assert.equal(selFunc(['input, textarea, select', 'input, select, textarea', 'select, input, textarea', 'select, textarea, input', 'textarea, input, select', 'textarea, select, input'].find(selFunc))?.marginRight, '0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+
+ + + + +
+ +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; + font-family: Tahoma; + font-size: 16px; +} + +h1, p { + margin: 1em auto; + text-align: center; +} + +form { + width: 60vw; + max-width: 500px; + min-width: 300px; + margin: 0 auto; +} + +fieldset { + border: none; + padding: 2rem 0; +} + +fieldset:not(:last-of-type) { + border-bottom: 3px solid #3b3b4f; +} + +label { + display: block; + margin: 0.5rem 0; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fadfa2b540b70dcfa8b771.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fadfa2b540b70dcfa8b771.md new file mode 100644 index 00000000000..168867bcb77 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fadfa2b540b70dcfa8b771.md @@ -0,0 +1,131 @@ +--- +id: 60fadfa2b540b70dcfa8b771 +title: Passo 43 +challengeType: 0 +dashedName: step-43 +--- + +# --description-- + +Para o segundo `fieldset`, você quer que o `input` e o `label` apareçam na mesma linha. + +Comece fornecendo aos elementos `input` no segundo `fieldset` uma classe de `inline`. + +# --hints-- + +Você deve dar ao primeiro elemento `input` uma classe de `inline`. + +```js +assert(document.querySelectorAll('fieldset:nth-child(2) input')?.[0]?.classList?.contains('inline')); +``` + +Você deve dar ao segundo elemento `input` uma classe de `inline`. + +```js +assert(document.querySelectorAll('fieldset:nth-child(2) input')?.[1]?.classList?.contains('inline')); +``` + +Você deve dar ao terceiro elemento `input` uma classe de `inline`. + +```js +assert(document.querySelectorAll('fieldset:nth-child(2) input')?.[2]?.classList?.contains('inline')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+--fcc-editable-region-- +
+ + + +
+--fcc-editable-region-- +
+ + + + +
+ +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; + font-family: Tahoma; + font-size: 16px; +} + +h1, p { + margin: 1em auto; + text-align: center; +} + +form { + width: 60vw; + max-width: 500px; + min-width: 300px; + margin: 0 auto; +} + +fieldset { + border: none; + padding: 2rem 0; +} + +fieldset:not(:last-of-type) { + border-bottom: 3px solid #3b3b4f; +} + +label { + display: block; + margin: 0.5rem 0; +} + +input, +textarea, +select { + margin: 10px 0 0 0; + width: 100%; +} + +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fc219d333e37046f474a6e.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fc219d333e37046f474a6e.md new file mode 100644 index 00000000000..e23b9204df6 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fc219d333e37046f474a6e.md @@ -0,0 +1,125 @@ +--- +id: 60fc219d333e37046f474a6e +title: Passo 44 +challengeType: 0 +dashedName: step-44 +--- + +# --description-- + +Selecione apenas os elementos `.inline` e dê a eles uma `width` de `unset`. Isso removerá a regra anterior que define todos os elementos `input` para `width: 100%`. + +# --hints-- + +Você deve usar o seletor `.inline`. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.inline')); +``` + +Você deve dar aos elementos `.inline` uma `width` de `unset`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.inline')?.width, 'unset'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+
+ + + + +
+ +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; + font-family: Tahoma; + font-size: 16px; +} + +h1, p { + margin: 1em auto; + text-align: center; +} + +form { + width: 60vw; + max-width: 500px; + min-width: 300px; + margin: 0 auto; +} + +fieldset { + border: none; + padding: 2rem 0; +} + +fieldset:not(:last-of-type) { + border-bottom: 3px solid #3b3b4f; +} + +label { + display: block; + margin: 0.5rem 0; +} + +input, +textarea, +select { + margin: 10px 0 0 0; + width: 100%; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fc22d1e64d1b04cdd4e602.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fc22d1e64d1b04cdd4e602.md new file mode 100644 index 00000000000..5a20789797f --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fc22d1e64d1b04cdd4e602.md @@ -0,0 +1,140 @@ +--- +id: 60fc22d1e64d1b04cdd4e602 +title: Passo 45 +challengeType: 0 +dashedName: step-45 +--- + +# --description-- + +Adicione um pouco de espaço entre os elementos `.inline` e o texto do `label`, dando uma `margin` à direita de `0.5em`. Defina as outras margens como `0`. + +# --hints-- + +Você deve dar aos elementos `.inline` uma `margin-right` de `0.5em`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.inline')?.marginRight, '0.5em'); +``` + +Você deve dar aos elementos `.inline` uma `margin-bottom` de `0`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.inline')?.marginBottom, '0px'); +``` + +Você deve dar aos elementos `.inline` uma `margin-top` de `0`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.inline')?.marginTop, '0px'); +``` + +Você deve dar aos elementos `.inline` uma `margin-left` de `0`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.inline')?.marginLeft, '0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+
+ + + + +
+ +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; + font-family: Tahoma; + font-size: 16px; +} + +h1, p { + margin: 1em auto; + text-align: center; +} + +form { + width: 60vw; + max-width: 500px; + min-width: 300px; + margin: 0 auto; +} + +fieldset { + border: none; + padding: 2rem 0; +} + +fieldset:not(:last-of-type) { + border-bottom: 3px solid #3b3b4f; +} + +label { + display: block; + margin: 0.5rem 0; +} + +input, +textarea, +select { + margin: 10px 0 0 0; + width: 100%; +} + +--fcc-editable-region-- +.inline { + width: unset; + +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fc236dc04532052926fdac.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fc236dc04532052926fdac.md new file mode 100644 index 00000000000..c2aa882e89e --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fc236dc04532052926fdac.md @@ -0,0 +1,125 @@ +--- +id: 60fc236dc04532052926fdac +title: Passo 46 +challengeType: 0 +dashedName: step-46 +--- + +# --description-- + +Se você olhar de perto, notará que os elementos `.inline` estão altos demais na linha. + +Para evitar isso, defina a propriedade `vertical-align` como `middle`. + +# --hints-- + +Você deve definir a propriedade `vertical-align` como `middle` para todos os elementos `.inline`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.inline')?.verticalAlign, 'middle'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+
+ + + + +
+ +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; + font-family: Tahoma; + font-size: 16px; +} + +h1, p { + margin: 1em auto; + text-align: center; +} + +form { + width: 60vw; + max-width: 500px; + min-width: 300px; + margin: 0 auto; +} + +fieldset { + border: none; + padding: 2rem 0; +} + +fieldset:not(:last-of-type) { + border-bottom: 3px solid #3b3b4f; +} + +label { + display: block; + margin: 0.5rem 0; +} + +input, +textarea, +select { + margin: 10px 0 0 0; + width: 100%; +} + +--fcc-editable-region-- +.inline { + width: unset; + margin: 0 0.5em 0 0; + +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe1bc30415f042faea936.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe1bc30415f042faea936.md new file mode 100644 index 00000000000..d4109d529ce --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe1bc30415f042faea936.md @@ -0,0 +1,142 @@ +--- +id: 60ffe1bc30415f042faea936 +title: Passo 47 +challengeType: 0 +dashedName: step-47 +--- + +# --description-- + +Para fazer os elementos `input` e `textarea` se misturarem com o fundo, defina a `background-color` deles como `#0a0a23`. Então, dê a eles uma borda `1px`, `solid` com uma cor de `#0a0a23`. + +# --hints-- + +Você deve usar um seletor de elementos separado por vírgulas para estilizar `input` e `textarea`. + +```js +const selFunc = selector => new __helpers.CSSHelp(document).getStyle(selector); +assert.isTrue(['input, textarea', 'textarea, input'].some(selFunc)); +``` + +Você deve dar aos elementos `input` e `textarea` um `background-color` de `#0a0a23`. + +```js +const selFunc = selector => new __helpers.CSSHelp(document).getStyle(selector); +assert.equal(selFunc(['input, textarea', 'textarea, input'].find(selFunc))?.backgroundColor, 'rgb(10, 10, 35)'); +``` + +Você deve dar aos elementos `input` e `textarea` uma borda com `1px`, `solid` e com a cor `#0a0a23`. + +```js +const selFunc = selector => new __helpers.CSSHelp(document).getStyle(selector); +assert.equal(selFunc(['input, textarea', 'textarea, input'].find(selFunc))?.borderWidth, '1px'); +assert.equal(selFunc(['input, textarea', 'textarea, input'].find(selFunc))?.borderStyle, 'solid'); +assert.equal(selFunc(['input, textarea', 'textarea, input'].find(selFunc))?.borderColor, 'rgb(10, 10, 35)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+
+ + + + +
+ +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; + font-family: Tahoma; + font-size: 16px; +} + +h1, p { + margin: 1em auto; + text-align: center; +} + +form { + width: 60vw; + max-width: 500px; + min-width: 300px; + margin: 0 auto; +} + +fieldset { + border: none; + padding: 2rem 0; +} + +fieldset:not(:last-of-type) { + border-bottom: 3px solid #3b3b4f; +} + +label { + display: block; + margin: 0.5rem 0; +} + +input, +textarea, +select { + margin: 10px 0 0 0; + width: 100%; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +.inline { + width: unset; + margin: 0 0.5em 0 0; + vertical-align: middle; +} + +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe3936796ac04959285a9.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe3936796ac04959285a9.md new file mode 100644 index 00000000000..5a85ff8ec27 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe3936796ac04959285a9.md @@ -0,0 +1,139 @@ +--- +id: 60ffe3936796ac04959285a9 +title: Passo 48 +challengeType: 0 +dashedName: step-48 +--- + +# --description-- + +Atualmente, se você digitar nos elementos `input` ou `textarea`, não será possível ver o texto. Além disso, a altura deles é muito pequena para que eles sejam fáceis de usar. + +Corrija isso definindo `color` como `#ffffff` e definindo `min-height` como `2em`. + +# --hints-- + +Você deve definir `color` como `#ffffff`. + +```js +const selFunc = selector => new __helpers.CSSHelp(document).getStyle(selector); +assert.equal(selFunc(['input, textarea', 'textarea, input'].find(selFunc))?.color, 'rgb(255, 255, 255)'); +``` + +Você deve definir `min-height` como `2em`. + +```js +const selFunc = selector => new __helpers.CSSHelp(document).getStyle(selector); +assert.equal(selFunc(['input, textarea', 'textarea, input'].find(selFunc))?.minHeight, '2em'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+
+ + + + +
+ +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; + font-family: Tahoma; + font-size: 16px; +} + +h1, p { + margin: 1em auto; + text-align: center; +} + +form { + width: 60vw; + max-width: 500px; + min-width: 300px; + margin: 0 auto; +} + +fieldset { + border: none; + padding: 2rem 0; +} + +fieldset:not(:last-of-type) { + border-bottom: 3px solid #3b3b4f; +} + +label { + display: block; + margin: 0.5rem 0; +} + +input, +textarea, +select { + margin: 10px 0 0 0; + width: 100%; +} + +--fcc-editable-region-- +input, textarea { + background-color: #0a0a23; + border: 1px solid #0a0a23; + +} +--fcc-editable-region-- + +.inline { + width: unset; + margin: 0 0.5em 0 0; + vertical-align: middle; +} + +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe4f4ec18cd04dc470c56.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe4f4ec18cd04dc470c56.md new file mode 100644 index 00000000000..f54e35f057f --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe4f4ec18cd04dc470c56.md @@ -0,0 +1,144 @@ +--- +id: 60ffe4f4ec18cd04dc470c56 +title: Passo 49 +challengeType: 0 +dashedName: step-49 +--- + +# --description-- + +Você quer que o elemento `select` permaneça com um fundo branco, mas agora não está conseguindo a mesma `min-height` que os elementos `input` e `textarea`. + +Mova a propriedade e o valor de `min-height` para que todos os três tipos de elementos tenham o mesmo valor de `min-height` e o elemento `select` ainda tenha um fundo branco. + +# --hints-- + +Você deve mover a propriedade e valor do `min-height` para o seletor `input, textarea, select`. + +```js +assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('input, textarea, select')?.minHeight); +``` + +Você deve dar ao seletor `input, textarea, select` uma `min-height` de `2em`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('input, textarea, select')?.minHeight, '2em'); +``` + +Você deve remover a declaração `min-height` do seletor `input, textarea`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle('input, textarea')?.minHeight); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+
+ + + + +
+ +
+ + +``` + +```css +--fcc-editable-region-- +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; + font-family: Tahoma; + font-size: 16px; +} + +h1, p { + margin: 1em auto; + text-align: center; +} + +form { + width: 60vw; + max-width: 500px; + min-width: 300px; + margin: 0 auto; +} + +fieldset { + border: none; + padding: 2rem 0; +} + +fieldset:not(:last-of-type) { + border-bottom: 3px solid #3b3b4f; +} + +label { + display: block; + margin: 0.5rem 0; +} + +input, +textarea, +select { + margin: 10px 0 0 0; + width: 100%; +} + +input, textarea { + background-color: #0a0a23; + border: 1px solid #0a0a23; + color: #ffffff; + min-height: 2em; +} + +.inline { + width: unset; + margin: 0 0.5em 0 0; + vertical-align: middle; +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe69ee377c6055e192a46.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe69ee377c6055e192a46.md new file mode 100644 index 00000000000..7d08ad5d023 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe69ee377c6055e192a46.md @@ -0,0 +1,152 @@ +--- +id: 60ffe69ee377c6055e192a46 +title: Passo 50 +challengeType: 0 +dashedName: step-50 +--- + +# --description-- + +Para estilizar o botão enviar, você pode usar um seletor de _atributo_, que seleciona um elemento com base no valor dado. Exemplo: + +```css +input[name="password"] +``` + +O código acima seleciona elementos `input` com um atributo `name` com o valor `password`. + +Agora, use o seletor de atributo para estilizar o botão de enviar com um `display` de `block` e `width` de `60%`. + +# --hints-- + +Você deve usar um seletor de atributo `input[type="submit"]` para estilizar o botão de enviar. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')); +``` + +Você deve dar ao botão de enviar o `display` de `block`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.display, 'block'); +``` + +Você deve dar ao botão de enviar o `width` de `60%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.width, '60%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+
+ + + + +
+ +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; + font-family: Tahoma; + font-size: 16px; +} + +h1, p { + margin: 1em auto; + text-align: center; +} + +form { + width: 60vw; + max-width: 500px; + min-width: 300px; + margin: 0 auto; +} + +fieldset { + border: none; + padding: 2rem 0; +} + +fieldset:not(:last-of-type) { + border-bottom: 3px solid #3b3b4f; +} + +label { + display: block; + margin: 0.5rem 0; +} + +input, +textarea, +select { + margin: 10px 0 0 0; + width: 100%; + min-height: 2em; +} + +input, textarea { + background-color: #0a0a23; + border: 1px solid #0a0a23; + color: #ffffff; +} + +.inline { + width: unset; + margin: 0 0.5em 0 0; + vertical-align: middle; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe7d8aae62c05bcc9e7eb.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe7d8aae62c05bcc9e7eb.md new file mode 100644 index 00000000000..ecd89304410 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe7d8aae62c05bcc9e7eb.md @@ -0,0 +1,145 @@ +--- +id: 60ffe7d8aae62c05bcc9e7eb +title: Passo 51 +challengeType: 0 +dashedName: step-51 +--- + +# --description-- + +Com um `display` de `block` o botão de enviar fica na borda esquerda do elemento pai. + +Use a mesma técnica usada para centralizar o `form` para centralizar o botão de enviar. + +# --hints-- + +Você deve dar ao botão de enviar uma `margin` de `0 auto`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.margin, '0px auto'); +``` + +Você não deve dar ao botão enviar uma `min-width` ou uma `max-width`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.minWidth); +assert.isEmpty(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.maxWidth); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+
+ + + + +
+ +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; + font-family: Tahoma; + font-size: 16px; +} + +h1, p { + margin: 1em auto; + text-align: center; +} + +form { + width: 60vw; + max-width: 500px; + min-width: 300px; + margin: 0 auto; +} + +fieldset { + border: none; + padding: 2rem 0; +} + +fieldset:not(:last-of-type) { + border-bottom: 3px solid #3b3b4f; +} + +label { + display: block; + margin: 0.5rem 0; +} + +input, +textarea, +select { + margin: 10px 0 0 0; + width: 100%; + min-height: 2em; +} + +input, textarea { + background-color: #0a0a23; + border: 1px solid #0a0a23; + color: #ffffff; +} + +.inline { + width: unset; + margin: 0 0.5em 0 0; + vertical-align: middle; +} + +--fcc-editable-region-- +input[type="submit"] { + display: block; + width: 60%; + +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe8a5ceb0e90618db06d9.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe8a5ceb0e90618db06d9.md new file mode 100644 index 00000000000..a8fa387bce2 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe8a5ceb0e90618db06d9.md @@ -0,0 +1,143 @@ +--- +id: 60ffe8a5ceb0e90618db06d9 +title: Passo 52 +challengeType: 0 +dashedName: step-52 +--- + +# --description-- + +Para fazer o botão de enviar parecer mais de acordo com o resto do formulário, dê a ele a mesma `height` que a dos outros campos (`2em`). Além disso, aumente o `font-size` para `1.1rem`. + +# --hints-- + +Você deve dar ao botão de enviar uma `height` de `2em`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.height, '2em'); +``` + +Você deve dar ao botão de enviar um `font-size` de `1.1rem`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.fontSize, '1.1rem'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+
+ + + + +
+ +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; + font-family: Tahoma; + font-size: 16px; +} + +h1, p { + margin: 1em auto; + text-align: center; +} + +form { + width: 60vw; + max-width: 500px; + min-width: 300px; + margin: 0 auto; +} + +fieldset { + border: none; + padding: 2rem 0; +} + +fieldset:not(:last-of-type) { + border-bottom: 3px solid #3b3b4f; +} + +label { + display: block; + margin: 0.5rem 0; +} + +input, +textarea, +select { + margin: 10px 0 0 0; + width: 100%; + min-height: 2em; +} + +input, textarea { + background-color: #0a0a23; + border: 1px solid #0a0a23; + color: #ffffff; +} + +.inline { + width: unset; + margin: 0 0.5em 0 0; + vertical-align: middle; +} + +--fcc-editable-region-- +input[type="submit"] { + display: block; + width: 60%; + margin: 0 auto; + +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe947a868ec068f7850f6.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe947a868ec068f7850f6.md new file mode 100644 index 00000000000..babbe8e753c --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe947a868ec068f7850f6.md @@ -0,0 +1,145 @@ +--- +id: 60ffe947a868ec068f7850f6 +title: Passo 53 +challengeType: 0 +dashedName: step-53 +--- + +# --description-- + +Para fazer com que o botão de envio apareça mais distinto, dê a ele uma `background-color` de `#3b3b4f` e uma `border-color` de `white`. + +# --hints-- + +Você deve dar ao botão enviar um `background-color` de `#3b3b4f`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.backgroundColor, 'rgb(59, 59, 79)'); +``` + +Você deve dar ao botão de enviar um `border-color` de `white`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.borderColor, 'white'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+
+ + + + +
+ +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; + font-family: Tahoma; + font-size: 16px; +} + +h1, p { + margin: 1em auto; + text-align: center; +} + +form { + width: 60vw; + max-width: 500px; + min-width: 300px; + margin: 0 auto; +} + +fieldset { + border: none; + padding: 2rem 0; +} + +fieldset:not(:last-of-type) { + border-bottom: 3px solid #3b3b4f; +} + +label { + display: block; + margin: 0.5rem 0; +} + +input, +textarea, +select { + margin: 10px 0 0 0; + width: 100%; + min-height: 2em; +} + +input, textarea { + background-color: #0a0a23; + border: 1px solid #0a0a23; + color: #ffffff; +} + +.inline { + width: unset; + margin: 0 0.5em 0 0; + vertical-align: middle; +} + +--fcc-editable-region-- +input[type="submit"] { + display: block; + width: 60%; + margin: 0 auto; + height: 2em; + font-size: 1.1rem; + +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe9cb47809106eda2f2c9.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe9cb47809106eda2f2c9.md new file mode 100644 index 00000000000..f4ebb90eb37 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe9cb47809106eda2f2c9.md @@ -0,0 +1,150 @@ +--- +id: 60ffe9cb47809106eda2f2c9 +title: Passo 54 +challengeType: 0 +dashedName: step-54 +--- + +# --description-- + +Por último, para o botão de envio, você quer separá-lo do `fieldset` acima e ajustar sua largura para nunca ficar abaixo de `300px`. + +Altere a propriedade `margin` para que inclua `1em` nas partes superior e inferior e defina a largura conforme descrito acima. + +# --hints-- + +Você não deve alterar a propriedade `width`. Use a propriedade `min-width`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.width, '60%'); +assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.minWidth); +``` + +Você deve usar a propriedade existente `margin` para incluir `1em` nas partes superior e inferior. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.margin, '1em auto'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+
+ + + + +
+ +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; + font-family: Tahoma; + font-size: 16px; +} + +h1, p { + margin: 1em auto; + text-align: center; +} + +form { + width: 60vw; + max-width: 500px; + min-width: 300px; + margin: 0 auto; +} + +fieldset { + border: none; + padding: 2rem 0; +} + +fieldset:not(:last-of-type) { + border-bottom: 3px solid #3b3b4f; +} + +label { + display: block; + margin: 0.5rem 0; +} + +input, +textarea, +select { + margin: 10px 0 0 0; + width: 100%; + min-height: 2em; +} + +input, textarea { + background-color: #0a0a23; + border: 1px solid #0a0a23; + color: #ffffff; +} + +.inline { + width: unset; + margin: 0 0.5em 0 0; + vertical-align: middle; +} + +--fcc-editable-region-- +input[type="submit"] { + display: block; + width: 60%; + margin: 0 auto; + height: 2em; + font-size: 1.1rem; + background-color: #3b3b4f; + border-color: white; + +} +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffec2825da1007509ddd06.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffec2825da1007509ddd06.md new file mode 100644 index 00000000000..36afc907924 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffec2825da1007509ddd06.md @@ -0,0 +1,151 @@ +--- +id: 60ffec2825da1007509ddd06 +title: Passo 55 +challengeType: 0 +dashedName: step-55 +--- + +# --description-- + +A maioria dos navegadores injeta suas próprias propriedades e valores padrão de CSS para diferentes elementos. Se você olhar de perto, pode ser possível notar que o `input` de arquivos é menor que os outros elementos `input` de texto. Por padrão, um `padding` de `1px 2px` é dado aos elementos `input` em que você pode digitar. + +Usando outro seletor de atributo, estilize o `input` com o `type` de `file` para que tenha o mesmo preenchimento (padding) que os outros elementos `input`. + +# --hints-- + +Você deve usar um seletor de atributo para estilizar o elemento `input`. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('input[type="file"]')); +``` + +Você deve dar ao `input[type="file"]` um `padding` de `1px 2px`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="file"]')?.padding, '1px 2px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+
+ + + + +
+ +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; + font-family: Tahoma; + font-size: 16px; +} + +h1, p { + margin: 1em auto; + text-align: center; +} + +form { + width: 60vw; + max-width: 500px; + min-width: 300px; + margin: 0 auto; +} + +fieldset { + border: none; + padding: 2rem 0; +} + +fieldset:not(:last-of-type) { + border-bottom: 3px solid #3b3b4f; +} + +label { + display: block; + margin: 0.5rem 0; +} + +input, +textarea, +select { + margin: 10px 0 0 0; + width: 100%; + min-height: 2em; +} + +input, textarea { + background-color: #0a0a23; + border: 1px solid #0a0a23; + color: #ffffff; +} + +.inline { + width: unset; + margin: 0 0.5em 0 0; + vertical-align: middle; +} + +input[type="submit"] { + display: block; + width: 60%; + margin: 1em auto; + height: 2em; + font-size: 1.1rem; + background-color: #3b3b4f; + border-color: white; + min-width: 300px; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffecefac971607ae73c60f.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffecefac971607ae73c60f.md new file mode 100644 index 00000000000..386b19129c6 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffecefac971607ae73c60f.md @@ -0,0 +1,152 @@ +--- +id: 60ffecefac971607ae73c60f +title: Passo 56 +challengeType: 0 +dashedName: step-56 +--- + +# --description-- + +Por falar em `padding`, o botão de envio fica na parte inferior do elemento `form`. Adicione `2em` de `padding` apenas na parte inferior de `form`. + +# --hints-- + +Você deve usar a propriedade `padding-bottom`. + +```js +assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('form')?.paddingBottom); +``` + +Você deve dar ao `padding-bottom` um valor de `2em`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('form')?.paddingBottom, '2em'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+
+ + + + +
+ +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; + font-family: Tahoma; + font-size: 16px; +} + +h1, p { + margin: 1em auto; + text-align: center; +} + +--fcc-editable-region-- +form { + width: 60vw; + max-width: 500px; + min-width: 300px; + margin: 0 auto; + +} +--fcc-editable-region-- + +fieldset { + border: none; + padding: 2rem 0; +} + +fieldset:not(:last-of-type) { + border-bottom: 3px solid #3b3b4f; +} + +label { + display: block; + margin: 0.5rem 0; +} + +input, +textarea, +select { + margin: 10px 0 0 0; + width: 100%; + min-height: 2em; +} + +input, textarea { + background-color: #0a0a23; + border: 1px solid #0a0a23; + color: #ffffff; +} + +.inline { + width: unset; + margin: 0 0.5em 0 0; + vertical-align: middle; +} + +input[type="submit"] { + display: block; + width: 60%; + margin: 1em auto; + height: 2em; + font-size: 1.1rem; + background-color: #3b3b4f; + border-color: white; + min-width: 300px; +} + +input[type="file"] { + padding: 1px 2px; +} + +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffefd6479a3d084fb77cbc.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffefd6479a3d084fb77cbc.md new file mode 100644 index 00000000000..3800196028d --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffefd6479a3d084fb77cbc.md @@ -0,0 +1,284 @@ +--- +id: 60ffefd6479a3d084fb77cbc +title: Passo 57 +challengeType: 0 +dashedName: step-57 +--- + +# --description-- + +Por último, mas não menos importante, altere a cor do texto do link `terms and conditions` para `#dfdfe2`. + +Bom trabalho! Você completou a parte final do projeto prático de _Formulário de Registro_. + +# --hints-- + +Você deve usar o seletor `a`. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('a')); +``` + +Você deve dar ao elemento `a` uma `color` com o valor de `#dfdfe2`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('a')?.color, 'rgb(223, 223, 226)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+
+ + + + +
+ +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; + font-family: Tahoma; + font-size: 16px; +} + +h1, p { + margin: 1em auto; + text-align: center; +} + +form { + width: 60vw; + max-width: 500px; + min-width: 300px; + margin: 0 auto; + padding-bottom: 2em; +} + +fieldset { + border: none; + padding: 2rem 0; +} + +fieldset:not(:last-of-type) { + border-bottom: 3px solid #3b3b4f; +} + +label { + display: block; + margin: 0.5rem 0; +} + +input, +textarea, +select { + margin: 10px 0 0 0; + width: 100%; + min-height: 2em; +} + +input, textarea { + background-color: #0a0a23; + border: 1px solid #0a0a23; + color: #ffffff; +} + +.inline { + width: unset; + margin: 0 0.5em 0 0; + vertical-align: middle; +} + +input[type="submit"] { + display: block; + width: 60%; + margin: 1em auto; + height: 2em; + font-size: 1.1rem; + background-color: #3b3b4f; + border-color: white; + min-width: 300px; +} + +input[type="file"] { + padding: 1px 2px; +} + +--fcc-editable-region-- + +--fcc-editable-region-- + +``` + +# --solutions-- + +```html + + + + Registration Form + + + +

Registration Form

+

Please fill out this form with the required information

+
+
+ + + + +
+
+ + + +
+
+ + + + +
+ +
+ + +``` + +```css +body { + width: 100%; + height: 100vh; + margin: 0; + background-color: #1b1b32; + color: #f5f6f7; + font-family: Tahoma; + font-size: 16px; +} + +h1, p { + margin: 1em auto; + text-align: center; +} + +form { + width: 60vw; + max-width: 500px; + min-width: 300px; + margin: 0 auto; + padding-bottom: 2em; +} + +fieldset { + border: none; + padding: 2rem 0; +} + +fieldset:not(:last-of-type) { + border-bottom: 3px solid #3b3b4f; +} + +label { + display: block; + margin: 0.5rem 0; +} + +input, +textarea, +select { + margin: 10px 0 0 0; + width: 100%; + min-height: 2em; +} + +input, textarea { + background-color: #0a0a23; + border: 1px solid #0a0a23; + color: #ffffff; +} + +.inline { + width: unset; + margin: 0 0.5em 0 0; + vertical-align: middle; +} + +input[type="submit"] { + display: block; + width: 60%; + margin: 1em auto; + height: 2em; + font-size: 1.1rem; + background-color: #3b3b4f; + border-color: white; + min-width: 300px; +} + +input[type="file"] { + padding: 1px 2px; +} + +a { + color: #dfdfe2; +} + +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a5.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a5.md new file mode 100644 index 00000000000..e83fd003624 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a5.md @@ -0,0 +1,190 @@ +--- +id: 60b69a66b6ddb80858c515a5 +title: Passo 48 +challengeType: 0 +dashedName: step-48 +--- + +# --description-- + +Defina o `z-index` de `white-paper` como `1`. + +# --hints-- + +O seletor `#white-paper` deve ter a propriedade `z-index` definida como `1`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.zIndex === '1'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Picasso Painting + + + + +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + + +
+
+
+ + +``` + +```css +body { + background-color: rgb(184, 132, 46); +} + +#back-wall { + background-color: #8B4513; + width: 100%; + height: 60%; + position: absolute; + top: 0; + left: 0; + z-index: -1; +} + +#offwhite-character { + width: 300px; + height: 550px; + background-color: GhostWhite; + position: absolute; + top: 20%; + left: 17.5%; +} + +#white-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 0 120px 140px 180px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: GhostWhite; + border-left-color: transparent; + position: absolute; + top: -140px; + left: 0; +} + +#black-mask { + width: 100%; + height: 50px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 0; + left: 0; + z-index: 1; +} + +#gray-instrument { + width: 15%; + height: 40%; + background-color: rgb(167, 162, 117); + position: absolute; + top: 50px; + left: 125px; + z-index: 1; +} + +.black-dot { + width: 10px; + height: 10px; + background-color: rgb(45, 31, 19); + border-radius: 50%; + display: block; + margin: auto; + margin-top: 65%; +} + +#tan-table { + width: 450px; + height: 140px; + background-color: #D2691E; + position: absolute; + top: 275px; + left: 15px; + z-index: 1; +} + +#black-character { + width: 300px; + height: 500px; + background-color: rgb(45, 31, 19); + position: absolute; + top: 30%; + left: 59%; +} + +#black-hat { + width: 0; + height: 0; + border-style: solid; + border-width: 150px 0 0 300px; + border-top-color: transparent; + border-right-color: transparent; + border-bottom-color: transparent; + border-left-color: rgb(45, 31, 19); + position: absolute; + top: -150px; + left: 0; +} + +#gray-mask { + width: 150px; + height: 150px; + background-color: rgb(167, 162, 117); + position: absolute; + top: -10px; + left: 70px; +} + +#white-paper { + width: 400px; + height: 100px; + background-color: GhostWhite; + position: absolute; + top: 250px; + left: -150px; + --fcc-editable-region-- + + --fcc-editable-region-- +} +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd5a93fd62bb35968adeab.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd5a93fd62bb35968adeab.md new file mode 100644 index 00000000000..546fd66ab19 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd5a93fd62bb35968adeab.md @@ -0,0 +1,123 @@ +--- +id: 61fd5a93fd62bb35968adeab +title: Passo 1 +challengeType: 0 +dashedName: step-1 +--- + +# --description-- + +Defina o HTML com uma declaração `DOCTYPE` e com os elementos `html`, `head` e `body`. Dê ao elemento `head` os elementos `meta` apropriados para o `charset` e a `viewport`, um elemento `title` com o título apropriado e um elemento `link` para a sua folha de estilo. + +# --hints-- + +O código deve ter uma declaração ``. + +```js +assert(code.match(//i)); +``` + +O código deve ter um elemento `html`. + +```js +assert.equal(document.querySelectorAll('html')?.length, 1); +``` + +O código deve ter um elemento `head` dentro do elemento `html`. + +```js +assert.equal(document.querySelectorAll('head')?.length, 1); +``` + +O código deve ter um elemento `body` dentro do elemento `html`. + +```js +assert.equal(document.querySelectorAll('body')?.length, 1); +``` + +O elemento `head` deve vir antes do elemento `body`. + +```js +assert.equal(document.querySelector('body')?.previousElementSibling?.tagName, 'HEAD'); +``` + +Você deve ter dois elementos `meta`. + +```js +const meta = document.querySelectorAll('meta'); +assert.equal(meta?.length, 2); +``` + +Um elemento `meta` deve ter o atributo `name` definido como `viewport` e o atributo `content` definido como `width=device-width, initial-scale=1.0`. + +```js +const meta = [...document.querySelectorAll('meta')]; +const target = meta?.find(m => m?.getAttribute('name') === 'viewport' && m?.getAttribute('content') === 'width=device-width, initial-scale=1.0' && !m?.getAttribute('charset')); +assert.exists(target); +``` + +O outro elemento `meta` deve ter o atributo `charset` com o valor `UTF-8`. + +```js +const meta = [...document.querySelectorAll('meta')]; +const target = meta?.find(m => !m?.getAttribute('name') && !m?.getAttribute('content') && m?.getAttribute('charset')?.toLowerCase() === 'utf-8'); +assert.exists(target); +``` + +O código deve ter um elemento `title`. + +```js +const title = document.querySelector('title'); +assert.exists(title); +``` + +O elemento `title` precisa ter algum texto. + +```js +const title = document.querySelector('title'); +assert.isAtLeast(title?.textContent?.length, 1); +``` + +O código deve ter um elemento `link`. + +```js +assert(/[\w\W\s]*[\w\W\s]*<\/head>/i)) +``` + +O elemento `link` deve ter o atributo `rel` com o valor `stylesheet`. + +```js +assert.match(code, / + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+--fcc-editable-region-- + +
+--fcc-editable-region-- + +
+ +
+
+
+
+ + +``` + +```css + +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd933ba685de776a94997e.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd933ba685de776a94997e.md new file mode 100644 index 00000000000..e3f26ebb18e --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd933ba685de776a94997e.md @@ -0,0 +1,169 @@ +--- +id: 61fd933ba685de776a94997e +title: Passo 21 +challengeType: 0 +dashedName: step-21 +--- + +# --description-- + +Dentro do primeiro `tr`, adicione um elemento `th` com o texto `Loans The outstanding balance on our startup loan.`. Encapsule esse texto, exceto `Loans`, em um elemento `span` com a `class` definida como `description`. + +Adicione três elementos `td` abaixo disso, e dê a eles o seguinte texto, em ordem: `$500`, `$250` e `$0`. Dê ao terceiro elemento `td` a `class` com o valor de `current`. + +# --hints-- + +O primeiro `tr` deve ter um elemento `th`. + +```js +assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th')); +``` + +O elemento `th` deve ter o texto `Loans The outstanding balance on our startup loan.`. + +```js +assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th')?.innerText === 'Loans The outstanding balance on our startup loan.'); +``` + +Você deve envolver o texto `The outstanding balance on our startup loan.` dentro de um elemento `span`. + +```js +assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th > span')?.textContent === 'The outstanding balance on our startup loan.'); +``` + +O elemento `span` deve ter o atributo `class` definido como `description`. + +```js +assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th > span')?.classList?.contains('description')); +``` + +Você deve ter três elementos `td`. + +```js +assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td').length === 3); +``` + +O primeiro elemento `td` deve ter o texto `$500`. + +```js +assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[0]?.textContent === '$500'); +``` + +O segundo elemento `td` deve ter o texto `$250`. + +```js +assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[1]?.textContent === '$250'); +``` + +O terceiro elemento `td` deve ter o texto `$0`. + +```js +assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[2]?.textContent === '$0'); +``` + +O terceiro elemento `td` deve ter a `class` definida como `current`. + +```js +assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[2]?.classList?.contains('current')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
+ + + + + + + + + + + +--fcc-editable-region-- + + + + + + + + +--fcc-editable-region-- + +
Liabilities
201920202021
+ +
+
+
+
+ + +``` + +```css + +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd94056e0355785fbba4d3.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd94056e0355785fbba4d3.md new file mode 100644 index 00000000000..b38db20e4c2 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd94056e0355785fbba4d3.md @@ -0,0 +1,173 @@ +--- +id: 61fd94056e0355785fbba4d3 +title: Passo 22 +challengeType: 0 +dashedName: step-22 +--- + +# --description-- + +Dentro do segundo `tr`, adicione o elemento `th` com o texto `Expenses Annual anticipated expenses, such as payroll.`. Coloque esse texto, com exceção da palavra `Expenses`, envolto em um elemento `span` com uma `class` definida como `description`. + +Adicione três elementos `td` abaixo disso e insira neles os seguintes textos, respectivamente: `$200`, `$300` e `$400`. No terceiro elemento `td`, adicione uma `class` com o valor `current`. + +# --hints-- + +O segundo elemento `tr` deve ter um elemento `th`. + +```js +assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th')); +``` + +O elemento `th` deve possuir o texto `Expenses Annual anticipated expenses, such as payroll.`. + +```js +assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th')?.innerText === 'Expenses Annual anticipated expenses, such as payroll.'); +``` + +O texto `Annual anticipated expenses, such as payroll.` deve estar envolto em um elemento `span`. + +```js +assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th > span')?.textContent === 'Annual anticipated expenses, such as payroll.'); +``` + +O elemento `span` deve ter o atributo `class` com o valor `description`. + +```js +assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th > span')?.classList?.contains('description')); +``` + +Você deve ter três elementos `td`. + +```js +assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td').length === 3); +``` + +O primeiro elemento `td` deve ter o texto `$200`. + +```js +assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td')?.[0]?.textContent === '$200'); +``` + +O segundo elemento `td` deve ter o texto `$300`. + +```js +assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td')?.[1]?.textContent === '$300'); +``` + +O terceiro elemento `td` deve ter o texto `$400`. + +```js +assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td')?.[2]?.textContent === '$400'); +``` + +O terceiro elemento `td` deve ter o atributo `class` com o valor `current`. + +```js +assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td')?.[2]?.classList?.contains('current')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
+ + + + + + + + + + + +--fcc-editable-region-- + + + + + + + + + + + + +--fcc-editable-region-- + +
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
+ +
+
+
+
+ + +``` + +```css + +``` diff --git a/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620191707bc65579ddd3ce15.md b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620191707bc65579ddd3ce15.md new file mode 100644 index 00000000000..35ff1de8950 --- /dev/null +++ b/curriculum/challenges/portuguese/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620191707bc65579ddd3ce15.md @@ -0,0 +1,271 @@ +--- +id: 620191707bc65579ddd3ce15 +title: Passo 55 +challengeType: 0 +dashedName: step-55 +--- + +# --description-- + +Usando a mesma sintaxe de seletor, tenha como alvo os elementos `th` dentro das linhas da tabela onde a `class` é `total`. Alinha o texto à esquerda e dê-lhes um espaçamento de `0.5rem 0 0.25rem 0.5rem`. + +# --hints-- + +Você deve ter um seletor `tr[class="total"] th`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('tr[class="total"] th')); +``` + +O seletor `tr[class="total"] th` deve ter a propriedade `text-align` definida como `left`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('tr[class="total"] th')?.getPropertyValue('text-align') === 'left'); +``` + +O seletor `tr[class="total"] th` deve ter a propriedade `padding` definida como `0.5rem 0 0.25rem 0.5rem`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('tr[class="total"] th')?.getPropertyValue('padding') === '0.5rem 0px 0.25rem 0.5rem'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + + Balance Sheet + + + +
+
+

+ + AcmeWidgetCorp + Balance Sheet + +

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Assets
201920202021
Cash This is the cash we currently have on hand.$25$30$28
Checking Our primary transactional account.$54$56$53
Savings Funds set aside for emergencies.$500$650$728
Total Assets$579$736$809
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Liabilities
201920202021
Loans The outstanding balance on our startup loan.$500$250$0
Expenses Annual anticipated expenses, such as payroll.$200$300$400
Credit The outstanding balance on our credit card.$50$50$75
Total Liabilities$750$600$475
+ + + + + + + + + + + + + + + + + + +
Net Worth
201920202021
Total Net Worth$-171$136$334
+
+
+
+ + +``` + +```css +span[class~="sr-only"] { + border: 0 !important; + clip: rect(1px, 1px, 1px, 1px) !important; + clip-path: inset(50%) !important; + -webkit-clip-path: inset(50%) !important; + height: 1px !important; + width: 1px !important; + position: absolute !important; + overflow: hidden !important; + white-space: nowrap !important; + padding: 0 !important; + margin: -1px !important; +} + +html { + box-sizing: border-box; +} + +body { + font-family: sans-serif; + color: #0a0a23; +} + +h1 { + max-width: 37.25rem; + margin: 0 auto; + padding: 1.5rem 1.25rem; +} + +h1 .flex { + display: flex; + flex-direction: column-reverse; + gap: 1rem; +} + +h1 .flex span:first-of-type { + font-size: 0.7em; +} + +h1 .flex span:last-of-type { + font-size: 1.2em; +} + +section { + max-width: 40rem; + margin: 0 auto; + border: 2px solid #d0d0d5; +} + +#years { + display: flex; + justify-content: flex-end; + position: sticky; + top: 0; + background: #0a0a23; + color: #fff; + z-index: 999; + padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0; + margin: 0 -2px; +} + +#years span[class] { + font-weight: bold; + width: 4.5rem; + text-align: right; +} + +.table-wrap { + padding: 0 0.75rem 1.5rem 0.75rem; +} + +span { + font-weight: normal; +} + +table { + border-collapse: collapse; + border: 0; + width: 100%; + position: relative; + margin-top: 3rem; +} + +table caption { + color: #356eaf; + font-size: 1.3em; + font-weight: normal; + position: absolute; + top: -2.25rem; + left: 0.5rem; +} + +tbody td { + width: 100vw; + min-width: 4rem; + max-width: 4rem; +} + +tbody th { + width: calc(100% - 12rem); +} + +tr[class="total"] { + border-bottom: 4px double #0a0a23; + font-weight: bold; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-javascript/multiple-identical-options-in-switch-statements.md b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-javascript/multiple-identical-options-in-switch-statements.md index 10df9e1cae4..2a70e73f756 100644 --- a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-javascript/multiple-identical-options-in-switch-statements.md +++ b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-javascript/multiple-identical-options-in-switch-statements.md @@ -13,7 +13,7 @@ dashedName: multiple-identical-options-in-switch-statements ```js let result = ""; -switch(val) { +switch (val) { case 1: case 2: case 3: @@ -127,7 +127,7 @@ sequentialSizes(1); function sequentialSizes(val) { let answer = ""; - switch(val) { + switch (val) { case 1: case 2: case 3: diff --git a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-javascript/replacing-if-else-chains-with-switch.md b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-javascript/replacing-if-else-chains-with-switch.md index 6193e6cf6a6..ae35d169df1 100644 --- a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-javascript/replacing-if-else-chains-with-switch.md +++ b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-javascript/replacing-if-else-chains-with-switch.md @@ -24,7 +24,7 @@ if (val === 1) { можна замінити цим: ```js -switch(val) { +switch (val) { case 1: answer = "a"; break; @@ -136,7 +136,7 @@ chainToSwitch(7); function chainToSwitch(val) { let answer = ""; - switch(val) { + switch (val) { case "bob": answer = "Marley"; break; diff --git a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-javascript/selecting-from-many-options-with-switch-statements.md b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-javascript/selecting-from-many-options-with-switch-statements.md index 732dec028d3..593f8e69d60 100644 --- a/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-javascript/selecting-from-many-options-with-switch-statements.md +++ b/curriculum/challenges/ukrainian/02-javascript-algorithms-and-data-structures/basic-javascript/selecting-from-many-options-with-switch-statements.md @@ -14,7 +14,7 @@ dashedName: selecting-from-many-options-with-switch-statements

Ось наводиться приклад інструкції switch`: ```js -switch(lowercaseLetter) { +switch (lowercaseLetter) { case "a": console.log("A"); break; @@ -96,7 +96,7 @@ caseInSwitch(1); function caseInSwitch(val) { let answer = ""; - switch(val) { + switch (val) { case 1: answer = "alpha"; break;