diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f33071498eb2472b87ddee4.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f33071498eb2472b87ddee4.md index 929453fb1fd..70b869f6fc9 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f33071498eb2472b87ddee4.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f33071498eb2472b87ddee4.md @@ -7,7 +7,7 @@ dashedName: step-1 # --description-- -Come hai imparato negli ultimi passi della App di Foto di Gatto, c'è una struttura di base necessaria per iniziare a costruire la tua pagina web. +Come hai imparato negli ultimi step di Cat Photo App, c'è una struttura di base necessaria per iniziare a costruire la tua pagina web. Aggiungi il tag `` e un elemento `html`. diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3313e74582ad9d063e3a38.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3313e74582ad9d063e3a38.md new file mode 100644 index 00000000000..9e54440cbd6 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3313e74582ad9d063e3a38.md @@ -0,0 +1,61 @@ +--- +id: 5f3313e74582ad9d063e3a38 +title: Step 2 +challengeType: 0 +dashedName: step-2 +--- + +# --description-- + +Aggiungi un elemento `head` all'interno dell'elemento `html`, in modo da poter aggiungere un elemento `title`. Il testo dell'elemento `title` dovrebbe essere `Cafe Menu`. + +# --hints-- + +Dovresti avere un tag di apertura ``. + +```js +assert(code.match(//i)); +``` + +Dovresti avere un tag di chiusura ``. + +```js +assert(code.match(//i)); +``` + +Dovresti avere un tag di apertura ``. + +```js +assert(code.match(/<title>/i)); +``` + +Dovresti avere un tag di chiusura ``. + +```js +assert(code.match(/<\/title>/i)); +``` + +L'elemento `title` dovrebbe essere annidato nell'elemento `head`. + +```js +assert(code.match(/\s*.*<\/title>\s*<\/head>/si)); +``` + +L'elemento `title` dovrebbe avere il testo `Cafe Menu`. Controlla la tua ortografia. + +```js +assert.match(document.querySelector('title')?.innerText, /Cafe Menu/i); +``` + +# --seed-- + +## --seed-contents-- + +```html +<!DOCTYPE html> +<html> +--fcc-editable-region-- + +--fcc-editable-region-- +</html> +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f331e55dfab7a896e53c3a1.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f331e55dfab7a896e53c3a1.md new file mode 100644 index 00000000000..e68c65b61c2 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f331e55dfab7a896e53c3a1.md @@ -0,0 +1,47 @@ +--- +id: 5f331e55dfab7a896e53c3a1 +title: Step 3 +challengeType: 0 +dashedName: step-3 +--- + +# --description-- + +`title` è uno dei diversi elementi che forniscono informazioni aggiuntive non visibili sulla pagina web, ma potrebbe essere utile per i motori di ricerca o per la visualizzazione della pagina. + +All'interno dell'elemento `head`, annida un elemento `meta` con `utf-8` come valore dell'attributo `charset` per comunicare al browser come codificare i caratteri della pagina. Nota che gli elementi `meta` sono autoconcludenti. + +# --hints-- + +Il codice dovrebbe avere un tag `meta`. + +```js +assert(code.match(/<meta.*?\/?>/is)); +``` + +Il tag `meta` dovrebbe avere un attributo `charset`. + +```js +assert(code.match(/<meta charset=/i)); +``` + +L'attributo `charset` dovrebbe avere valore `utf-8`. + +```js +assert(code.match(/charset=('|")utf-8\1/i)); +``` + +# --seed-- + +## --seed-contents-- + +```html +<!DOCTYPE html> +<html> +--fcc-editable-region-- + <head> + <title>Cafe Menu + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3326b143638ee1a09ff1e3.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3326b143638ee1a09ff1e3.md index e724a5a5019..d8ccbbcc797 100644 --- a/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3326b143638ee1a09ff1e3.md +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3326b143638ee1a09ff1e3.md @@ -7,7 +7,7 @@ dashedName: step-4 # --description-- -Per preparati a creare del contenuto, aggiungi un elemento `body` sotto l'elemento `head`. +Per prepararti a creare del contenuto, aggiungi un elemento `body` sotto l'elemento `head`. # --hints-- @@ -30,7 +30,7 @@ assert(code.match(//i)); assert(code.match(/<\/head>/i)); ``` -Il tuo elemento `body` dovrebbe essere all'interno dell'elemento `head`. +L'elemento `body` dovrebbe essere all'interno dell'elemento `head`. ```js assert(code.match(/<\/head>[.\n\s]*/im)); diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f33294a6af5e9188dbdb8f3.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f33294a6af5e9188dbdb8f3.md new file mode 100644 index 00000000000..b1deafd6c4b --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f33294a6af5e9188dbdb8f3.md @@ -0,0 +1,60 @@ +--- +id: 5f33294a6af5e9188dbdb8f3 +title: Step 5 +challengeType: 0 +dashedName: step-5 +--- + +# --description-- + +Il nome del bar è `CAMPER CAFE`. Aggiungi un elemento `h1` all'interno dell'elemento `body`. Dagli il nome del bar in lettere maiuscole per farlo risaltare. + +# --hints-- + +Dovresti avere un tag di apertura `

`. + +```js +assert(code.match(/

/i)); +``` + +Dovresti avere un tag di chiusura `

`. + +```js +assert(code.match(/<\/h1>/i)); +``` + +Non dovresti cambiare l'elemento `body` esistente. + +```js +assert($('body').length === 1); +``` + +L'elemento `h1` dovrebbe essere annidato nell'elemento `body`. + +```js +assert($('h1')[0].parentElement.tagName === "BODY"); +``` + +L'elemento `h1` dovrebbe avere il testo `CAMPER CAFE`. + +```js +assert(code.match(/

CAMPER CAFE<\/h1>/)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Cafe Menu + +--fcc-editable-region-- + + +--fcc-editable-region-- + +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f332b23c2045fb843337579.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f332b23c2045fb843337579.md new file mode 100644 index 00000000000..ed8f0f05a38 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f332b23c2045fb843337579.md @@ -0,0 +1,59 @@ +--- +id: 5f332b23c2045fb843337579 +title: Step 7 +challengeType: 0 +dashedName: step-7 +--- + +# --description-- + +Dato che l'elemento `p` aggiunto nel passaggio precedente fornisce informazioni supplementari sul bar, annida entrambi gli elementi `h1` e `p` in un elemento `header`. + +# --hints-- + +Dovresti avere un tag di apertura `
`. + +```js +assert(code.match(/
/i)); +``` + +Dovresti avere un tag di chiusura `
`. + +```js +assert(code.match(/<\/header>/i)); +``` + +L'elemento `h1` dovrebbe essere annidato nell'elemento `header`. + +```js +const header = document.querySelectorAll('header')[0]; +assert(header.children[0].tagName === 'H1'); +``` + +L'elemento `p` dovrebbe essere annidato nell'elemento `header`. + +```js +const header = document.querySelectorAll('header')[0]; +assert(header.children[1].tagName === "P"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Cafe Menu + + +--fcc-editable-region-- +

CAMPER CAFE

+

Est. 2020

+--fcc-editable-region-- + + +``` + diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f33310c1851c6c4da013250.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f33310c1851c6c4da013250.md new file mode 100644 index 00000000000..d913e2c3a75 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f33310c1851c6c4da013250.md @@ -0,0 +1,59 @@ +--- +id: 5f33310c1851c6c4da013250 +title: Step 8 +challengeType: 0 +dashedName: step-8 +--- + +# --description-- + +È ora di aggiungere qualche contenuto del menu. Aggiungi un elemento `main` al di sotto dell'elemento `header` esistente. Conterrà delle informazioni sui prezzi del caffè e dei dessert offerti dal bar. + +# --hints-- + +Il codice dovrebbe avere un tag di apertura `
`. + +```js +assert(code.match(/
/i)); +``` + +Il codice dovrebbe avere un tag di chiusura `
`. + +```js +assert(code.match(/<\/main>/i)); +``` + +Non dovresti cambiare l'elemento `header`. Assicurati di non aver eliminato accidentalmente il tag di chiusura. + +```js +assert($('header').length === 1); +``` + +Il tag `main` dovrebbe essere dopo il tag `header`. + +```js +const main = document.querySelectorAll('main')[0]; +assert(main.previousElementSibling.tagName === 'HEADER'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Cafe Menu + + +--fcc-editable-region-- +
+

CAMPER CAFE

+

Est. 2020

+
+--fcc-editable-region-- + + +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344fbc22624a2976425065.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344fbc22624a2976425065.md new file mode 100644 index 00000000000..8c1d68a6463 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344fbc22624a2976425065.md @@ -0,0 +1,70 @@ +--- +id: 5f344fbc22624a2976425065 +title: Step 10 +challengeType: 0 +dashedName: step-10 +--- + +# --description-- + +Crea un elemento `h2` con il testo `Coffee` all'interno dell'elemento `section`. + +# --hints-- + +Dovresti avere un tag di apertura `

`. + +```js +assert(code.match(//i)); +``` + +Dovresti avere un tag di chiusura `

`. + +```js +assert(code.match(/<\/h2\s*>/i)); +``` + +Non dovresti cambiare l'elemento `section` esistente. Assicurati di non aver eliminato il tag di chiusura. + +```js +assert($('section').length === 1); +``` + +L'elemento `h2` dovrebbe essere all'interno dell'elemento `section`. + +```js +const h2 = document.querySelector('h2'); +assert(h2.parentElement.tagName === 'SECTION'); +``` + +L'elemento `h2` dovrebbe contenere il testo `Coffee`. + +```js +const h2 = document.querySelector('h2'); +assert(h2.innerText === 'Coffee'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Cafe Menu + + +
+

CAMPER CAFE

+

Est. 2020

+
+
+--fcc-editable-region-- +
+
+--fcc-editable-region-- +
+ + +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344fc1520b6719f2e35605.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344fc1520b6719f2e35605.md new file mode 100644 index 00000000000..976778f7c9b --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344fc1520b6719f2e35605.md @@ -0,0 +1,61 @@ +--- +id: 5f344fc1520b6719f2e35605 +title: Step 9 +challengeType: 0 +dashedName: step-9 +--- + +# --description-- + +Ci saranno due sezioni nel menù, una per il caffè e una per i dessert. Aggiungi un elemento `section` all'interno dell'elemento `main` in modo da avere uno spazio in cui inserire tutti i caffè disponibili. + +# --hints-- + +Dovresti avere un tag di apertura `
`. + +```js +assert(code.match(//i)); +``` + +Dovresti avere un tag di chiusura `
`. + +```js +assert(code.match(/<\/section\s*>/i)); +``` + +Non dovresti cambiare l'elemento `main` esistente. Assicurati di non aver eliminato il tag di chiusura. + +```js +assert($('main').length === 1); +``` + +L'elemento `section` dovrebbe essere all'interno dell'elemento `main`. + +```js +const main = document.querySelectorAll('main')?.[0]; +assert(main.children[0].tagName === 'SECTION'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Cafe Menu + + +
+

CAMPER CAFE

+

Est. 2020

+
+--fcc-editable-region-- +
+
+--fcc-editable-region-- + + +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa2407b521be39a3de7be1.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa2407b521be39a3de7be1.md new file mode 100644 index 00000000000..b2a4fff5336 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa2407b521be39a3de7be1.md @@ -0,0 +1,55 @@ +--- +id: 5dfa2407b521be39a3de7be1 +title: Step 13 +challengeType: 0 +dashedName: step-13 +--- + +# --description-- + +Aggiungi un attributo `target` con il valore `_blank` al tag di apertura dell'elemento di ancoraggio (`a`), in modo che il link si apra in una nuova scheda. + +# --hints-- + +L'elemento `p` dovrebbe avere un elemento di ancoraggio annidato (`a`) con il testo `cat photos`. Potresti averlo cancellato o avere un refuso. + +```js +const anchor = $('p > a'); +assert( + anchor.length && + anchor[0].innerText.toLowerCase().replace(/\s+/g, ' ') === 'cat photos' +); +``` + +L'elemento di ancoraggio (`a`) non ha un attributo `target`. Verifica che ci sia uno spazio dopo il nome del tag di apertura e/o che ci siano spazi prima di tutti i nomi degli attributi. + +```js +assert(document.querySelector('a').hasAttribute('target')); +``` + +Il valore dell'attributo `target` dovrebbe essere `\_blank`. Hai omesso il valore o hai un refuso. Ricorda che i valori degli attributi dovrebbero essere circondati da virgolette. + +```js +assert(document.querySelector('a').getAttribute('target') === '_blank'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+

Cat Photos

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

Click here to view more cat photos.

+--fcc-editable-region-- + A cute orange cat lying on its back. +
+ + +``` + diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6a35eacea3f48c6300b4.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6a35eacea3f48c6300b4.md new file mode 100644 index 00000000000..0ec29cffb05 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6a35eacea3f48c6300b4.md @@ -0,0 +1,106 @@ +--- +id: 5dfb6a35eacea3f48c6300b4 +title: Step 23 +challengeType: 0 +dashedName: step-23 +--- + +# --description-- + +Un elemento di didascalia della figura (`figcaption`) viene usato per aggiungere una didascalia per descrivere l'immagine contenuta nell'elemento `figure`. Ad esempio, `
A cute cat
` aggiunge la didascalia `A cute cat`. + +Dopo l'immagine annidata nell'elemento `figure`, aggiungi un elemento `figcaption` con il testo `Cats love lasagna.` + +# --hints-- + +L'elemento `img` con la lasagna deve essere annidato nell'elemento `figure`. + +```js +assert( + document.querySelector('figure > img') && + document.querySelector('figure > img').getAttribute('src').toLowerCase() === + 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg' +); +``` + +L'elemento `figcaption` dovrebbe avere un tag di apertura. I tag di apertura hanno la seguente sintassi: ``. + +```js +assert(document.querySelector('figcaption')); +``` + +L'elemento `figcaption` dovrebbe avere un tag di chiusura. I tag di chiusura hanno un carattere `/` subito dopo il carattere `<`. + +```js +assert(code.match(/<\/figcaption\>/)); +``` + +L'elemento `figcaption` dovrebbe essere annidato nell'elemento `figure`. + +```js +assert( + document.querySelector('figure > figcaption') && + document.querySelector('figure > figcaption') +); +``` + +L’elemento `img` con la lasagna dovrebbe essere annidato nell’elemento `figure`. + +```js +assert( + document.querySelector('figure > img') && + document.querySelector('figure > img').getAttribute('src').toLowerCase() === + 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg' +); +``` + +L'elemento `figcaption` annidato nell'elemento `figure` dovrebbe essere sotto l'elemento `img`. Sono nell'ordine sbagliato. + +```js +assert( + document.querySelector('figcaption').previousElementSibling.nodeName === 'IMG' +); +``` + +Il testo dell'elemento `figcaption` dovrebbe essere `Cats love lasagna.` Hai omesso il testo o hai un refuso. + +```js +assert( + document.querySelector('figcaption').innerText.match(/Cats love lasagna.?$/i) +); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
  • +
  • laser pointers
  • +
  • lasagna
  • +
+--fcc-editable-region-- +
+ A slice of lasagna on a plate. +
+--fcc-editable-region-- +
+
+ + +``` + diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d1.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d1.md new file mode 100644 index 00000000000..44ed15ec7b5 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d1.md @@ -0,0 +1,79 @@ +--- +id: 5ef9b03c81a63668521804d1 +title: Step 25 +challengeType: 0 +dashedName: step-25 +--- + +# --description-- + +Dopo l'elemento `figure`, aggiungi un altro elemento `h3` con il testo `Top 3 things cats hate:`. + +# --hints-- + +Ci dovrebbe essere un elemento `h3` proprio sopra il tag di chiusura del secondo elemento `section`. Assicurati che ci siano un tag di apertura e uno di chiusura. + +```js +assert( + document.querySelectorAll('main > section')[1].lastElementChild.nodeName === + 'H3' && code.match(/<\/h3\>/g).length === 2 +); +``` + +Il nuovo elemento `h3` dovrebbe contenere il testo `Top 3 things cats hate:`. Assicurati di includere i due punti alla fine del testo. + +```js +assert( + document + .querySelectorAll('main > section')[1] + .lastElementChild.innerText.toLowerCase() + .replace(/\s+/g, ' ') === 'top 3 things cats hate:' +); +``` + +Dovrebbe esserci un elemento `figure` sopra il nuovo elemento `h3`. Potresti aver cancellato accidentalmente l'elemento `figure`. + +```js +const secondSectionLastElemNode = document.querySelectorAll('main > section')[1] + .lastElementChild; +assert( + secondSectionLastElemNode.nodeName === 'H3' && + secondSectionLastElemNode.previousElementSibling.nodeName === 'FIGURE' +); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
  • +
  • laser pointers
  • +
  • lasagna
  • +
+--fcc-editable-region-- +
+ A slice of lasagna on a plate. +
Cats love lasagna.
+
+--fcc-editable-region-- +
+
+ + +``` + diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d5.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d5.md new file mode 100644 index 00000000000..9cf032257b3 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d5.md @@ -0,0 +1,103 @@ +--- +id: 5ef9b03c81a63668521804d5 +title: Step 33 +challengeType: 0 +dashedName: step-33 +--- + +# --description-- + +All'interno del terzo elemento `section`, aggiungi un elemento `h2` con il testo `Cat Form`. + +# --hints-- + +Non è possibile trovare il terzo elemento `section`. Potresti aver cancellato accidentalmente l'elemento o il tag di apertura o di chiusura. + +```js +assert( + document.querySelectorAll('section').length === 3 && + code.match(/<\/section>/g).length === 3 +); +``` + +L'elemento `h2` dovrebbe avere un tag di apertura e un tag di chiusura. Potrebbero mancare uno o entrambi i tag richiesti. + +```js +assert( + document.querySelectorAll('h2').length >= 3 && + code.match(/<\/h2>/g).length >= 3 +); +``` + +Dovresti aggiungere solo un elemento `h2`. Rimuovi quelli di troppo. + +```js +assert(document.querySelectorAll('h2').length === 3); +``` + +Il nuovo elemento `h2` dovrebbe essere posizionato proprio sopra il tag di chiusura del terzo elemento `section`. + +```js +const thirdSection = document.querySelectorAll('section')[2]; +assert(thirdSection.lastElementChild.nodeName === 'H2'); +``` + +Il testo dell'lemento `h2` dovrebbe essere `Cat Form`. + +```js +const thirdSection = document.querySelectorAll('section')[2]; +assert( + thirdSection + .querySelector('h2') + .innerText.toLowerCase() + .replace(/\s+/g, ' ') === 'cat form' +); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
  • +
  • laser pointers
  • +
  • lasagna
  • +
+
+ A slice of lasagna on a plate. +
Cats love lasagna.
+
+

Top 3 things cats hate:

+
    +
  1. flea treatment
  2. +
  3. thunder
  4. +
  5. other cats
  6. +
+
+ Five cats looking around a field. +
Cats hate other cats.
+
+
+--fcc-editable-region-- +
+
+--fcc-editable-region-- +
+ + +``` + diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804da.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804da.md new file mode 100644 index 00000000000..949c470b024 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804da.md @@ -0,0 +1,93 @@ +--- +id: 5ef9b03c81a63668521804da +title: Step 41 +challengeType: 0 +dashedName: step-41 +--- + +# --description-- + +Utilizza l'elemento `button` per creare un pulsante su cui poter cliccare. Ad esempio, `` crea un pulsante con il testo `Click Here`. + +Aggiungi un elemento `button` con il testo `Submit` sotto l'elemento `input`. In seguito a un click su un pulsante modulo senza alcun attributo, il modulo viene inviato di default alla posizione specificata nell'attributo `action` del modulo. + +# --hints-- + +L'elemento `button` dovrebbe avere un tag di apertura. I tag di apertura hanno questa sintassi: ``. + +```js +assert(document.querySelector('button')); +``` + +L'elemento `button` dovrebbe avere un tag di chiusura. I tag di chiusura hanno un carattere `/` subito dopo il carattere `<`. + +```js +assert(code.match(/<\/button\>/)); +``` + +Il testo dell'elemento `button` dovrebbe essere `Submit`. Hai omesso il testo o hai un refuso. + +```js +assert(document.querySelector('button').innerText.toLowerCase() === 'submit'); +``` + +L'elemento `button` dovrebbe essere sotto l'elemento `input`. Sono nell'ordine sbagliato. + +```js +const collection = [...document.querySelectorAll('input, button')].map( + (node) => node.nodeName +); +assert(collection.indexOf('INPUT') < collection.indexOf('BUTTON')); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
  • +
  • laser pointers
  • +
  • lasagna
  • +
+
+ A slice of lasagna on a plate. +
Cats love lasagna.
+
+

Top 3 things cats hate:

+
    +
  1. flea treatment
  2. +
  3. thunder
  4. +
  5. other cats
  6. +
+
+ Five cats looking around a field. +
Cats hate other cats.
+
+
+
+

Cat Form

+
+--fcc-editable-region-- + +--fcc-editable-region-- +
+
+
+ + +``` + diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e9.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e9.md new file mode 100644 index 00000000000..c3e1e221390 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e9.md @@ -0,0 +1,118 @@ +--- +id: 5ef9b03c81a63668521804e9 +title: Step 63 +challengeType: 0 +dashedName: step-63 +--- + +# --description-- + +Rendi il testo `freeCodeCamp.org` un link racchiudendolo in un elemento di ancoraggio (`a`). L'attributo `href` dovrebbe avere valore `https://www.freecodecamp.org`. + +# --hints-- + +L'elemento di ancoraggio (`a`) dovrebbe essere annidato all'interno dell'elemento `footer`. Assicurati di aggiungere un tag di apertura e di chiusura per l'elemento di ancoraggio (`a`). + +```js +assert($('footer > p > a').length); +``` + +L'elemento di ancoraggio (`a`) dovrebbe avere un tag di chiusura. I tag di chiusura hanno un carattere `/` subito dopo il carattere `<`. + +```js +const aElemClosingTags = code.match(/<\/a\>/g); +assert(aElemClosingTags && aElemClosingTags.length === 3); +``` + +L'elemento di ancoraggio (`a`) dovrebbe avere un attributo `href` con il valore `https://www.freecodecamp.org`. Potresti aver omesso l'attributo o il valore o avere un refuso. + +```js +const nestedAnchor = $('footer > p > a')[0]; +assert(nestedAnchor.getAttribute('href') === 'https://www.freecodecamp.org'); +``` + +Il testo del link dovrebbe essere `freeCodeCamp.org`. Hai omesso il testo o hai un refuso. + +```js +const nestedAnchor = $('footer > p > a')[0]; +assert( + nestedAnchor.innerText.toLowerCase().replace(/\s+/g, ' ') === + 'freecodecamp.org' +); +``` + +Dopo aver annidato l'elemento di ancoraggio (`a`), il solo contenuto dell'elemento `p` visibile nel browser dovrebbe essere `No Copyright - freeCodeCamp.org`. Controlla il testo, la spaziatura o la punteggiatura sia dell'elemento `p` che dell'elemento di ancoraggio annidato. + +```js +const pText = $('footer > p')[0].innerText.toLowerCase().replace(/\s+/g, ' '); +assert(pText.match(/^no copyright - freecodecamp.org$/)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
  • +
  • laser pointers
  • +
  • lasagna
  • +
+
+ A slice of lasagna on a plate. +
Cats love lasagna.
+
+

Top 3 things cats hate:

+
    +
  1. flea treatment
  2. +
  3. thunder
  4. +
  5. other cats
  6. +
+
+ Five cats looking around a field. +
Cats hate other cats.
+
+
+
+

Cat Form

+
+
+ Is your cat an indoor or outdoor cat? + + +
+
+ What's your cat's personality? + + + +
+ + +
+
+
+
+

+--fcc-editable-region-- + No Copyright - freeCodeCamp.org +--fcc-editable-region-- +

+
+ + +``` + diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ea.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ea.md new file mode 100644 index 00000000000..f6dfb283866 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ea.md @@ -0,0 +1,108 @@ +--- +id: 5ef9b03c81a63668521804ea +title: Step 64 +challengeType: 0 +dashedName: step-64 +--- + +# --description-- + +Nota che tutto ciò che hai aggiunto alla pagina finora è all'interno dell'elemento `body`. Tutti i contenuti che devono essere visualizzati nella pagina devono trovarsi all'interno dell'elemento `body`. Tuttavia, altre informazioni importanti vanno all'interno dell'elemento `head`. + +Aggiungi un elemento `head` appena sopra l'elemento `body`. + +# --hints-- + +Hai eliminato l'elemento `body` oppure manca un tag di apertura o di chiusura. + +```js +assert(document.querySelector('body') && code.match(/<\/body>/)); +``` + +L'elemento `head` dovrebbe avere un tag di apertura. I tag di apertura hanno la seguente sintassi: ``. + +```js +assert(code.match(/\/)); +``` + +L'elemento `head` dovrebbe avere un tag di chiusura. I tag di chiusura hanno un carattere `/` subito dopo il carattere `<`. + +```js +assert(code.match(/\<\/head\>/)); +``` + +L'elemento `head` dovrebbe essere al di sopra del tag di apertura dell'elemento `body`. Lo hai inserito nel posto sbagliato. + +```js +const noSpaces = code.replace(/\s/g, ''); +assert(noSpaces.match(/\<\/head\>\/)); +``` + +# --seed-- + +## --seed-contents-- + +```html + +--fcc-editable-region-- + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
  • +
  • laser pointers
  • +
  • lasagna
  • +
+
+ A slice of lasagna on a plate. +
Cats love lasagna.
+
+

Top 3 things cats hate:

+
    +
  1. flea treatment
  2. +
  3. thunder
  4. +
  5. other cats
  6. +
+
+ Five cats looking around a field. +
Cats hate other cats.
+
+
+
+

Cat Form

+
+
+ Is your cat an indoor or outdoor cat? + + +
+
+ What's your cat's personality? + + + +
+ + +
+
+
+ + +--fcc-editable-region-- + +``` + diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804eb.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804eb.md new file mode 100644 index 00000000000..4816ef2b953 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804eb.md @@ -0,0 +1,110 @@ +--- +id: 5ef9b03c81a63668521804eb +title: Step 65 +challengeType: 0 +dashedName: step-65 +--- + +# --description-- + +L'elemento `title` determina ciò che il browser mostra nella barra del titolo o nella scheda della pagina. + +Aggiungi un elemento `title` all'interno dell'elemento `head`. Dovrebbe contenere il testo `CatPhotoApp`. + +# --hints-- + +Hai eliminato l'elemento `head` oppure manca un tag di apertura o chiusura. + +```js +assert(code.match(/\/) && code.match(/\<\/head\>/)); +``` + +L'elemento `title` dovrebbe essere annidato nell'elemento `head`. Assicurati di aggiungere i tag di apertura e chiusura dell'elemento `title`. + +```js +const noSpaces = code.replace(/\s/g, ''); +assert(noSpaces.match(/\\.*\<\/title\>\<\/head\>/)); +``` + +L'elemento `title` dovrebbe avere un tag di chiusura. I tag di chiusura hanno un carattere `/` appena dopo il carattere `<`. + +```js +assert(code.match(/\<\/title\>/)); +``` + +Il testo dell'elemento `title` dovrebbe essere `CatPhotoApp`. Hai omesso il testo o hai un refuso. + +```js +assert(document.title && document.title.toLowerCase() === 'catphotoapp'); +``` + +# --seed-- + +## --seed-contents-- + +```html + +--fcc-editable-region-- + + +--fcc-editable-region-- + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
  • +
  • laser pointers
  • +
  • lasagna
  • +
+
+ A slice of lasagna on a plate. +
Cats love lasagna.
+
+

Top 3 things cats hate:

+
    +
  1. flea treatment
  2. +
  3. thunder
  4. +
  5. other cats
  6. +
+
+ Five cats looking around a field. +
Cats hate other cats.
+
+
+
+

Cat Form

+
+
+ Is your cat an indoor or outdoor cat? + + +
+
+ What's your cat's personality? + + + +
+ + +
+
+
+ + + +``` + diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ec.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ec.md new file mode 100644 index 00000000000..1eea26ef4e4 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ec.md @@ -0,0 +1,105 @@ +--- +id: 5ef9b03c81a63668521804ec +title: Step 66 +challengeType: 0 +dashedName: step-66 +--- + +# --description-- + +Nota che l'intero contenuto della pagina è annidato all'interno di un elemento `html`. Tutti gli altri elementi devono essere discendenti di questo elemento `html`. + +Aggiungi l'attributo `lang` con il valore `en` al tag di apertura `html` per specificare che la lingua della pagina è l'inglese. + +# --hints-- + +Hai eliminato l'elemento `html` oppure manca un tag di apertura o di chiusura. + +```js +assert(code.match(/\/) && code.match(/\<\/html\>/)); +``` + +L'elemento `html` dovrebbe avere un attributo `lang` con il valore `en`. Potresti aver omesso l'attributo o il valore o avere un refuso. + +```js +const extraSpacesRemoved = code.replace(/\s+/g, ' '); +assert(extraSpacesRemoved.match(/\/)); +``` + +Anche se hai impostato `en` come valore dell'attributo `lang` dell'elemento `html`, è raccomandato inserire sempre il valore di un attributo tra virgolette. + +```js +assert(!/\<\s*html\s+lang\s*=en/i.test(code)); +``` + +# --seed-- + +## --seed-contents-- + +```html +--fcc-editable-region-- + +--fcc-editable-region-- + + CatPhotoApp + + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
  • +
  • laser pointers
  • +
  • lasagna
  • +
+
+ A slice of lasagna on a plate. +
Cats love lasagna.
+
+

Top 3 things cats hate:

+
    +
  1. flea treatment
  2. +
  3. thunder
  4. +
  5. other cats
  6. +
+
+ Five cats looking around a field. +
Cats hate other cats.
+
+
+
+

Cat Form

+
+
+ Is your cat an indoor or outdoor cat? + + +
+
+ What's your cat's personality? + + + +
+ + +
+
+
+ + + +``` + diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ee.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ee.md new file mode 100644 index 00000000000..d43440808d3 --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ee.md @@ -0,0 +1,166 @@ +--- +id: 5ef9b03c81a63668521804ee +title: Step 67 +challengeType: 0 +dashedName: step-67 +--- + +# --description-- + +Tutte le pagine dovrebbero iniziare con ``. Questa stringa speciale viene detta dichiarazione e garantisce che il browser cerchi di soddisfare le specifiche del settore. + +Per completare questo progetto, aggiungi questa dichiarazione come prima riga del codice. + +# --hints-- + +Il tuo codice dovrebbe iniziare con la dichiarazione ``. Potresti aver omesso la dichiarazione, non averla inserita come prima riga di codice o avere un refuso. + +```js +assert(code.match(/\<\s*!DOCTYPE\s+html\s*\>/)); +``` + +`` deve essere situato nella parte superiore del documento. + +```js +const noSpaces = code.replace(/\s/g, ''); +assert(noSpaces.match(/^\<\!DOCTYPEhtml\>\ + + CatPhotoApp + +--fcc-editable-region-- + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
  • +
  • laser pointers
  • +
  • lasagna
  • +
+
+ A slice of lasagna on a plate. +
Cats love lasagna.
+
+

Top 3 things cats hate:

+
    +
  1. flea treatment
  2. +
  3. thunder
  4. +
  5. other cats
  6. +
+
+ Five cats looking around a field. +
Cats hate other cats.
+
+
+
+

Cat Form

+
+
+ Is your cat an indoor or outdoor cat? + + +
+
+ What's your cat's personality? + + + +
+ + +
+
+
+ + + +``` + +# --solutions-- + +```html + + + + CatPhotoApp + + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
  • +
  • laser pointers
  • +
  • lasagna
  • +
+
+ A slice of lasagna on a plate. +
Cats love lasagna.
+
+

Top 3 things cats hate:

+
    +
  1. flea treatment
  2. +
  3. thunder
  4. +
  5. other cats
  6. +
+
+ Five cats looking around a field. +
Cats hate other cats.
+
+
+
+

Cat Form

+
+
+ Is your cat an indoor or outdoor cat? + + +
+
+ What's your cat's personality? + + + +
+ + +
+
+
+ + + +``` diff --git a/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb2c990dc218d6c85f89b2.md b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb2c990dc218d6c85f89b2.md new file mode 100644 index 00000000000..9403721a91e --- /dev/null +++ b/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb2c990dc218d6c85f89b2.md @@ -0,0 +1,101 @@ +--- +id: 5efb2c990dc218d6c85f89b2 +title: Step 42 +challengeType: 0 +dashedName: step-42 +--- + +# --description-- + +Anche se hai aggiunto il pulsante sotto l'input di testo, appaiono uno accanto all'altro sulla pagina. Questo perché entrambi gli elementi `input` e `button` sono inline elements, che non appaiono su nuove righe. + +Precedentemente, hai imparato che il pulsante invia il modulo di default, ma puoi aggiungere esplicitamente l'attributo `type` con il valore `submit` per renderlo più chiaro. Prosegui in questo modo per specificare dove il pulsante dovrebbe inviare il modulo. + +# --hints-- + +L'elemento `button` dovrebbe avere un tag di apertura. I tag di apertura hanno questa sintassi: ``. + +```js +assert(document.querySelector('button')); +``` + +L'elemento `button` dovrebbe avere un tag di chiusura. I tag di chiusura hanno un carattere `/` subito dopo il carattere `<`. + +```js +assert(code.match(/<\/button\>/)); +``` + +L'elemento `button` non ha un attributo `type`. Controlla che ci sia uno spazio dopo il nome del tag di apertura. + +```js +assert($('button')[0].hasAttribute('type')); +``` + +L'elemento `button` dovrebbe avere un attributo `type` con il valore `submit`. Hai omesso il valore o hai un refuso. Ricorda che i valori degli attributi devono essere circondati da virgolette. + +```js +assert( + $('button')[0] + .getAttribute('type') + .match(/^submit$/i) +); +``` + +Anche se hai impostato `submit` come valore dell'attributo `type` dell'elemento `button`, è raccomandato inserire sempre il valore di un attributo tra virgolette. + +```js +assert(!/\<\s*button\s+type\s*=\s*submit/i.test(code)); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +

CatPhotoApp

+
+
+

Cat Photos

+ +

Click here to view more cat photos.

+ A cute orange cat lying on its back. +
+
+

Cat Lists

+

Things cats love:

+
    +
  • cat nip
  • +
  • laser pointers
  • +
  • lasagna
  • +
+
+ A slice of lasagna on a plate. +
Cats love lasagna.
+
+

Top 3 things cats hate:

+
    +
  1. flea treatment
  2. +
  3. thunder
  4. +
  5. other cats
  6. +
+
+ Five cats looking around a field. +
Cats hate other cats.
+
+
+
+

Cat Form

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