mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-04-12 01:00:13 -04:00
chore(i18n,learn): processed translations (#45916)
This commit is contained in:
camperbot
@@ -9,7 +9,7 @@ dashedName: build-a-world-cup-database
|
||||
|
||||
# --description--
|
||||
|
||||
Questo è uno dei progetti richiesti per completare la certificazione. Per questo progetto, creerai uno script di Bash che inserisce informazioni da partite della coppa del mondo in PostgresSQL, e poi fare query al database per ottenere statistiche utili.
|
||||
Questo è uno dei progetti richiesti per completare la certificazione. Per questo progetto, creerai uno script di Bash che inserisce informazioni da partite della coppa del mondo in PostgreSQL, e poi fare query al database per ottenere statistiche utili.
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@ dashedName: build-a-bike-rental-shop
|
||||
|
||||
# --description--
|
||||
|
||||
In questo corso da 210 lezioni, costruirai un programma Bash interattivo che immagazzina informazioni per il tuo negozio di noleggio biciclette che usa PostgresSQL.
|
||||
In questo corso da 210 lezioni, costruirai un programma Bash interattivo che immagazzina informazioni per il tuo negozio di noleggio biciclette che usa PostgreSQL.
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@ dashedName: build-a-mario-database
|
||||
|
||||
# --description--
|
||||
|
||||
In questo corso da 165 lezioni, imparerai le basi di un database relazionale creando un database PostgresSQL pieno di personaggi di videogiochi.
|
||||
In questo corso da 165 lezioni, imparerai le basi di un database relazionale creando un database PostgreSQL pieno di personaggi di videogiochi.
|
||||
|
||||
# --instructions--
|
||||
|
||||
|
||||
@@ -0,0 +1,76 @@
|
||||
---
|
||||
id: 5dfb655eeacea3f48c6300b3
|
||||
title: Step 22
|
||||
challengeType: 0
|
||||
dashedName: step-22
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
L'elemento `figure` rappresenta un contenuto autonomo e ti permetterà di associare un'immagine a una didascalia.
|
||||
|
||||
Annida l'immagine che hai appena aggiunto all'interno di un elemento `figure`.
|
||||
|
||||
# --hints--
|
||||
|
||||
L'elemento `figure` dovrebbe avere un tag di apertura. I tag di apertura hanno la seguente sintassi: `<nomeElemento>`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('figure'));
|
||||
```
|
||||
|
||||
L'elemento `figure` dovrebbe avere un tag di chiusura. I tag di chiusura hanno un carattere `/` subito dopo il carattere `<`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/figure\>/));
|
||||
```
|
||||
|
||||
Ci dovrebbe essere un elemento `figure` proprio sopra il tag di chiusura del secondo elemento `section`.
|
||||
|
||||
```js
|
||||
assert($('section')[1].lastElementChild.nodeName === 'FIGURE');
|
||||
```
|
||||
|
||||
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'
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
<h1>CatPhotoApp</h1>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
|
||||
<a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Cat Lists</h2>
|
||||
<h3>Things cats love:</h3>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
--fcc-editable-region--
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
|
||||
--fcc-editable-region--
|
||||
</section>
|
||||
</main>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@@ -0,0 +1,85 @@
|
||||
---
|
||||
id: 5ef9b03c81a63668521804d0
|
||||
title: Step 24
|
||||
challengeType: 0
|
||||
dashedName: step-24
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Metti in evidenza la parola `love` nell'elemento `figcaption` inserendola in un elemento di enfasi (`em`).
|
||||
|
||||
# --hints--
|
||||
|
||||
L'elemento di enfasi (`em`) dovrebbe avere un tag di apertura. I tag di apertura hanno questa sintassi: `<nomeElemento>`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('em'));
|
||||
```
|
||||
|
||||
L'elemento di enfasi (`em`) dovrebbe avere un tag di chiusura. I tag di chiusura hanno un carattere `/` subito dopo il carattere `<`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/em\>/));
|
||||
```
|
||||
|
||||
Hai cancellato l'elemento `figcaption` oppure manca un tag di apertura o chiusura.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('figcaption') && code.match(/<\/figcaption\>/));
|
||||
```
|
||||
|
||||
L'elemento di enfasi (`em`) dovrebbe circondare il testo `love`. Hai omesso il testo o hai un refuso.
|
||||
|
||||
```js
|
||||
assert(
|
||||
document.querySelector('figcaption > em').innerText.toLowerCase() === 'love'
|
||||
);
|
||||
```
|
||||
|
||||
Il testo dell'elemento `figcaption`dovrebbe essere `Cats love lasagna`. Controlla eventuali errori e che ci siano gli spazi necessari attorno ai tag di apertura e chiusura dell'elemento `em`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
document
|
||||
.querySelector('figcaption')
|
||||
.innerText.replace(/\s+/gi, ' ')
|
||||
.match(/cats love lasagna\.?/i)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
<h1>CatPhotoApp</h1>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
|
||||
<a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Cat Lists</h2>
|
||||
<h3>Things cats love:</h3>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
|
||||
--fcc-editable-region--
|
||||
<figcaption>Cats love lasagna.</figcaption>
|
||||
--fcc-editable-region--
|
||||
</figure>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@@ -0,0 +1,92 @@
|
||||
---
|
||||
id: 5ef9b03c81a63668521804d2
|
||||
title: Step 26
|
||||
challengeType: 0
|
||||
dashedName: step-26
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Il codice di una lista ordinata (`ol`) è simile a una lista non ordinata, ma gli elementi elencati in una lista ordinata sono numerati.
|
||||
|
||||
Dopo l'ultimo elemento `h3`del secondo elemento `section`, aggiungi una lista ordinata con questi tre elementi di lista: `flea treatment`, `thunder` e `other cats`.
|
||||
|
||||
# --hints--
|
||||
|
||||
L'elemento `ol` dovrebbe avere un tag di apertura. I tag di apertura hanno questa sintassi: `<nomeElemento>`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('ol'));
|
||||
```
|
||||
|
||||
L'elemento `ol` dovrebbe avere un tag di chiusura. I tag di chiusura hanno un carattere `/` subito dopo il carattere `<`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/ol>/));
|
||||
```
|
||||
|
||||
Ci dovrebbe essere un elemento `ol` proprio sopra il tag di chiusura del secondo elemento `section`. Sono nell'ordine sbagliato.
|
||||
|
||||
```js
|
||||
assert($('main > section')[1].lastElementChild.nodeName === 'OL');
|
||||
```
|
||||
|
||||
I tre elementi `li` dovrebbero essere annidati all’interno dell’elemento `ol`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
[...document.querySelectorAll('li')].filter(
|
||||
(item) => item.parentNode.nodeName === 'OL'
|
||||
).length === 3
|
||||
);
|
||||
```
|
||||
|
||||
Dovresti avere tre elementi `li` con il testo `flea treatment`, `thunder` e `other cats` in qualsiasi ordine.
|
||||
|
||||
```js
|
||||
assert.deepStrictEqual(
|
||||
[...document.querySelectorAll('li')]
|
||||
.filter((item) => item.parentNode.nodeName === 'OL')
|
||||
.map((item) => item.innerText.toLowerCase())
|
||||
.sort((a, b) => a.localeCompare(b)),
|
||||
['flea treatment', 'other cats', 'thunder']
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
<h1>CatPhotoApp</h1>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
|
||||
<a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Cat Lists</h2>
|
||||
<h3>Things cats love:</h3>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
|
||||
<figcaption>Cats <em>love</em> lasagna.</figcaption>
|
||||
</figure>
|
||||
--fcc-editable-region--
|
||||
<h3>Top 3 things cats hate:</h3>
|
||||
--fcc-editable-region--
|
||||
</section>
|
||||
</main>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@@ -0,0 +1,72 @@
|
||||
---
|
||||
id: 5ef9b03c81a63668521804d3
|
||||
title: Step 27
|
||||
challengeType: 0
|
||||
dashedName: step-27
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Dopo la lista ordinata, aggiungi un altro elemento `figure`.
|
||||
|
||||
# --hints--
|
||||
|
||||
L'elemento `figure` dovrebbe avere un tag di apertura. I tag di apertura hanno questa sintassi: `<nomeElemento>`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('figure').length === 2);
|
||||
```
|
||||
|
||||
L'elemento `figure` dovrebbe avere un tag di chiusura. I tag di chiusura hanno un carattere `/` subito dopo il carattere `<`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/figure>/g).length === 2);
|
||||
```
|
||||
|
||||
Ci dovrebbe essere un elemento `figure` proprio sopra il tag di chiusura del secondo elemento `section`.
|
||||
|
||||
```js
|
||||
assert($('main > section')[1].lastElementChild.nodeName === 'FIGURE');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
<h1>CatPhotoApp</h1>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
|
||||
<a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Cat Lists</h2>
|
||||
<h3>Things cats love:</h3>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
|
||||
<figcaption>Cats <em>love</em> lasagna.</figcaption>
|
||||
</figure>
|
||||
<h3>Top 3 things cats hate:</h3>
|
||||
--fcc-editable-region--
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
--fcc-editable-region--
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@@ -0,0 +1,96 @@
|
||||
---
|
||||
id: 5ef9b03c81a63668521804d4
|
||||
title: Step 31
|
||||
challengeType: 0
|
||||
dashedName: step-31
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
L'elemento `strong` è usato per sottolineare l'importanza di una parte del testo.
|
||||
|
||||
Nell'elemento `figcaption` che hai appena aggiunto, indica che `hate` è di grande importanza inserendolo in un elemento `strong`.
|
||||
|
||||
# --hints--
|
||||
|
||||
L'elemento `strong` dovrebbe avere un tag di apertura. I tag di apertura hanno questa sintassi: `<nomeElemento>`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('strong'));
|
||||
```
|
||||
|
||||
L'elemento strong deve avere un tag di chiusura. I tag di chiusura hanno un carattere `/` subito dopo il carattere `<`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/strong\>/));
|
||||
```
|
||||
|
||||
L'elemento strong dovrebbe racchiudere la parola `hate` nel testo `Cats hate other cats.` Hai omesso il testo o hai un refuso.
|
||||
|
||||
```js
|
||||
assert(
|
||||
document
|
||||
.querySelectorAll('figcaption')[1]
|
||||
.querySelector('strong')
|
||||
.innerText.toLowerCase() === 'hate'
|
||||
);
|
||||
```
|
||||
|
||||
Il testo dell'elemento `figcaption` dovrebbe essere `Cats hate other cats.` Controlla eventuali errori e che siano presenti gli spazi necessari intorno ai tag di apertura e di chiusura dell'elemento`strong`.
|
||||
|
||||
```js
|
||||
const secondFigCaption = document.querySelectorAll('figcaption')[1];
|
||||
assert(
|
||||
secondFigCaption &&
|
||||
secondFigCaption.innerText
|
||||
.replace(/\s+/gi, ' ')
|
||||
.trim()
|
||||
.match(/cats hate other cats\.?/i)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
<h1>CatPhotoApp</h1>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
|
||||
<a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Cat Lists</h2>
|
||||
<h3>Things cats love:</h3>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
|
||||
<figcaption>Cats <em>love</em> lasagna.</figcaption>
|
||||
</figure>
|
||||
<h3>Top 3 things cats hate:</h3>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
|
||||
--fcc-editable-region--
|
||||
<figcaption>Cats hate other cats.</figcaption>
|
||||
--fcc-editable-region--
|
||||
</figure>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@@ -0,0 +1,88 @@
|
||||
---
|
||||
id: 5ef9b03c81a63668521804d6
|
||||
title: Step 34
|
||||
challengeType: 0
|
||||
dashedName: step-34
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Adesso aggiungerai un modulo web per raccogliere informazioni dagli utenti.
|
||||
|
||||
Dopo l'intestazione `Cat Form`, aggiungi un elemento `form`.
|
||||
|
||||
# --hints--
|
||||
|
||||
L'elemento `form` dovrebbe avere un tag di apertura e un tag di chiusura. Potrebbero mancare uno o entrambi i tag richiesti, o essere nell'ordine sbagliato.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('form') && code.match(/<\/form>/g));
|
||||
```
|
||||
|
||||
I tag dell'elemento `form` non sono nell'ordine corretto.
|
||||
|
||||
```js
|
||||
const noSpaces = code.replace(/\s/g, '');
|
||||
assert(noSpaces.indexOf('<form>') < noSpaces.indexOf('</form>'));
|
||||
```
|
||||
|
||||
L'elemento `form` annidato nell'ultimo elemento `section` dovrebbe essere al di sotto dell'elemento `h2`. L'elemento `h2` e l'elemento `form` sono nell'ordine sbagliato.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('form').previousElementSibling.nodeName === 'H2');
|
||||
```
|
||||
|
||||
L'elemento `form` non deve avere contenuti. Rimuovi qualsiasi elemento HTML o testo tra i tag dell'elemento `form`.
|
||||
|
||||
```js
|
||||
assert($('form')[0].innerHTML.trim().length === 0);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
<h1>CatPhotoApp</h1>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
|
||||
<a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Cat Lists</h2>
|
||||
<h3>Things cats love:</h3>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
|
||||
<figcaption>Cats <em>love</em> lasagna.</figcaption>
|
||||
</figure>
|
||||
<h3>Top 3 things cats hate:</h3>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
|
||||
<figcaption>Cats <strong>hate</strong> other cats.</figcaption>
|
||||
</figure>
|
||||
</section>
|
||||
<section>
|
||||
--fcc-editable-region--
|
||||
<h2>Cat Form</h2>
|
||||
--fcc-editable-region--
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@@ -0,0 +1,116 @@
|
||||
---
|
||||
id: 5ef9b03c81a63668521804d7
|
||||
title: Step 35
|
||||
challengeType: 0
|
||||
dashedName: step-35
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
L'attributo `action` indica dove dovrebbero essere inviati i dati del modulo. Ad esempio, `<form action="/submit-url"></form>` indica al browser che i dati del modulo dovrebbero essere inviati al percorso `/submit-url`.
|
||||
|
||||
Aggiungi all'elemento `form` un attributo `action` con il valore `https://freecatphotoapp.com/submit-cat-photo`.
|
||||
|
||||
# --hints--
|
||||
|
||||
L'elemento `form` dovrebbe avere un tag di apertura e un tag di chiusura nell'ordine corretto. Potrebbero mancare uno o entrambi i tag richiesti, o essere nell'ordine sbagliato.
|
||||
|
||||
```js
|
||||
const noSpaces = code.replace(/\s/g, '');
|
||||
assert(
|
||||
document.querySelector('form') &&
|
||||
code.match(/<\/form>/g) &&
|
||||
noSpaces.indexOf('<form') < noSpaces.indexOf('</form>')
|
||||
);
|
||||
```
|
||||
|
||||
L'elemento `form` annidato nell'ultimo elemento `section` dovrebbe essere al di sotto dell'elemento `h2`. L'elemento `h2` e l'elemento `form` sono nell'ordine sbagliato.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('form').previousElementSibling.nodeName === 'H2');
|
||||
```
|
||||
|
||||
L'elemento `form` non dovrebbe avere contenuti. Rimuovi qualsiasi elemento HTML o testo tra i tag dell'elemento `form`.
|
||||
|
||||
```js
|
||||
assert($('form')[0].innerHTML.trim().length === 0);
|
||||
```
|
||||
|
||||
L'elemento `form` non ha un attributo `action`. Controlla 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
|
||||
const form = document.querySelector('form');
|
||||
assert(form.hasAttribute('action'));
|
||||
```
|
||||
|
||||
L'elemento del modulo `form` dovrebbe avere un attributo `action` con il valore `https://freecatphotoapp.com/submit-cat-photo`.
|
||||
|
||||
```js
|
||||
const form = document.querySelector('form');
|
||||
assert(
|
||||
form
|
||||
.getAttribute('action')
|
||||
.match(/^https:\/\/freecatphotoapp\.com\/submit-cat-photo$/)
|
||||
);
|
||||
```
|
||||
|
||||
Anche se l'URL dell'attributo `action` è corretto, è sempre raccomandato inserire il valore di un attributo tra virgolette.
|
||||
|
||||
```js
|
||||
assert(
|
||||
!/\<form\s+action\s*=\s*https:\/\/freecatphotoapp\.com\/submit-cat-photo/.test(
|
||||
code
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
<h1>CatPhotoApp</h1>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
|
||||
<a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Cat Lists</h2>
|
||||
<h3>Things cats love:</h3>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
|
||||
<figcaption>Cats <em>love</em> lasagna.</figcaption>
|
||||
</figure>
|
||||
<h3>Top 3 things cats hate:</h3>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
|
||||
<figcaption>Cats <strong>hate</strong> other cats.</figcaption>
|
||||
</figure>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Cat Form</h2>
|
||||
--fcc-editable-region--
|
||||
<form>
|
||||
</form>
|
||||
--fcc-editable-region--
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@@ -0,0 +1,109 @@
|
||||
---
|
||||
id: 5ef9b03c81a63668521804d8
|
||||
title: Step 36
|
||||
challengeType: 0
|
||||
dashedName: step-36
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
L'elemento `input` ti permette di raccogliere dati da un modulo web in vari modi. Come gli elementi `img`, gli elementi `input` sono <dfn>self-closing</dfn> e non necessitano di tag di chiusura.
|
||||
|
||||
Annida un elemento `input` nell'elemento `form`.
|
||||
|
||||
# --hints--
|
||||
|
||||
L'elemento `form` dovrebbe avere un tag di apertura e di chiusura nell'ordine corretto. Potrebbero mancare uno o entrambi i tag richiesti, o essere nell'ordine sbagliato.
|
||||
|
||||
```js
|
||||
const noSpaces = code.replace(/\s/g, '');
|
||||
assert(
|
||||
document.querySelector('form') &&
|
||||
code.match(/<\/form>/g) &&
|
||||
noSpaces.indexOf('<form') < noSpaces.indexOf('</form>')
|
||||
);
|
||||
```
|
||||
|
||||
Il tag di apertura dell'elemento `form` dovrebbe avere solo un attributo `action`. Rimuovi qualsiasi altra cosa dal suo interno.
|
||||
|
||||
```js
|
||||
assert([...document.querySelector('form').attributes].length < 2);
|
||||
```
|
||||
|
||||
Dovresti creare un elemento input. Controlla la sintassi.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('input'));
|
||||
```
|
||||
|
||||
L'elemento `input` dovrebbe avere un tag di apertura, ma non un tag di chiusura.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('input') && !code.match(/<\/input\>/g));
|
||||
```
|
||||
|
||||
L'elemento `input` dovrebbe essere annidato all'interno dell'elemento `form`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('form > input'));
|
||||
```
|
||||
|
||||
L'elemento `form` dovrebbe contenere solo l'elemento `input`. Rimuovi qualsiasi elemento HTML o testo tra i tag dell'elemento `form`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('form')[0].children.length === 1 &&
|
||||
$('form')[0].innerText.trim().length === 0
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
<h1>CatPhotoApp</h1>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
|
||||
<a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Cat Lists</h2>
|
||||
<h3>Things cats love:</h3>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
|
||||
<figcaption>Cats <em>love</em> lasagna.</figcaption>
|
||||
</figure>
|
||||
<h3>Top 3 things cats hate:</h3>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
|
||||
<figcaption>Cats <strong>hate</strong> other cats.</figcaption>
|
||||
</figure>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Cat Form</h2>
|
||||
--fcc-editable-region--
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
</form>
|
||||
--fcc-editable-region--
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@@ -0,0 +1,104 @@
|
||||
---
|
||||
id: 5ef9b03c81a63668521804d9
|
||||
title: Step 39
|
||||
challengeType: 0
|
||||
dashedName: step-39
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Il testo segnaposto viene utilizzato per dare agli utenti un suggerimento sul tipo di informazioni da inserire in un input. Ad esempio, `<input type="text" placeholder="Email address">`.
|
||||
|
||||
Aggiungi il testo segnaposto `cat photo URL` al tuo elemento `input`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Hai eliminato il tuo elemento `input` oppure ha una sintassi non valida. Tutti i valori degli attributi dovrebbero essere circondati da virgolette.
|
||||
|
||||
```js
|
||||
assert($('input').length);
|
||||
```
|
||||
|
||||
L'elemento `form` dovrebbe contenere solo l'elemento `input`. Rimuovi qualsiasi elemento HTML o testo aggiuntivo all'interno dell'elemento `form`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('form')[0].children.length === 1 &&
|
||||
$('form')[0].innerText.trim().length === 0
|
||||
);
|
||||
```
|
||||
|
||||
L'elemento `input` non ha un attributo `placeholder`. 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($('input')[0].hasAttribute('placeholder'));
|
||||
```
|
||||
|
||||
L'elemento `input` deve avere un attributo `placeholder` con il valore `cat photo URL`. Hai omesso il valore o hai un refuso. Ricorda che i valori degli attributi devono essere racchiusi tra virgolette.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('input')[0]
|
||||
.getAttribute('placeholder')
|
||||
.replace(/\s+/g, ' ')
|
||||
.match(/^cat photo URL$/i)
|
||||
);
|
||||
```
|
||||
|
||||
Sebbene tu abbia impostato l'attributo `placeholder` dell'elemento `input` su `cat photo URL`, è raccomandato inserire sempre il valore di un attributo tra virgolette.
|
||||
|
||||
```js
|
||||
assert(!/\<\s*input\s+placeholder\s*=\s*cat\s+photo\s+url/i.test(code));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
<h1>CatPhotoApp</h1>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
|
||||
<a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Cat Lists</h2>
|
||||
<h3>Things cats love:</h3>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
|
||||
<figcaption>Cats <em>love</em> lasagna.</figcaption>
|
||||
</figure>
|
||||
<h3>Top 3 things cats hate:</h3>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
|
||||
<figcaption>Cats <strong>hate</strong> other cats.</figcaption>
|
||||
</figure>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Cat Form</h2>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
--fcc-editable-region--
|
||||
<input type="text" name="catphotourl">
|
||||
--fcc-editable-region--
|
||||
</form>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@@ -0,0 +1,91 @@
|
||||
---
|
||||
id: 5ef9b03c81a63668521804db
|
||||
title: Step 40
|
||||
challengeType: 0
|
||||
dashedName: step-40
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Per evitare che un utente invii il modulo senza tutte le informazioni richieste, è necessario aggiungere l'attributo `required` all'elemento `input`. Non è necessario impostare un valore per l'attributo `required`. Aggiungi la parola `required` all'elemento `input`, assicurandoti che ci sia spazio tra di esso e altri attributi.
|
||||
|
||||
# --hints--
|
||||
|
||||
Hai eliminato l'elemento `input` oppure ha una sintassi non valida. Tutti i valori degli attributi devono essere circondati da virgolette.
|
||||
|
||||
```js
|
||||
assert($('input').length);
|
||||
```
|
||||
|
||||
L'elemento `form` dovrebbe contenere solo l'elemento `input`. Rimuovi qualsiasi elemento HTML o testo aggiuntivo all'interno dell'elemento `form`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('form')[0].children.length === 1 &&
|
||||
$('form')[0].innerText.trim().length === 0
|
||||
);
|
||||
```
|
||||
|
||||
L'elemento `input` dovrebbe avere un attributo `required`. Ricorda, basta aggiungere la parola `required` all'interno del tag dell'elemento `input`.
|
||||
|
||||
```js
|
||||
assert($('input')[0].hasAttribute('required'));
|
||||
```
|
||||
|
||||
Non bisogna assegnare un valore all'attributo `required`.
|
||||
|
||||
```js
|
||||
assert($('input')[0].getAttribute('required') === '');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
<h1>CatPhotoApp</h1>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
|
||||
<a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Cat Lists</h2>
|
||||
<h3>Things cats love:</h3>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
|
||||
<figcaption>Cats <em>love</em> lasagna.</figcaption>
|
||||
</figure>
|
||||
<h3>Top 3 things cats hate:</h3>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
|
||||
<figcaption>Cats <strong>hate</strong> other cats.</figcaption>
|
||||
</figure>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Cat Form</h2>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
--fcc-editable-region--
|
||||
<input type="text" name="catphotourl" placeholder="cat photo URL">
|
||||
--fcc-editable-region--
|
||||
</form>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@@ -0,0 +1,135 @@
|
||||
---
|
||||
id: 5ef9b03c81a63668521804dc
|
||||
title: Step 43
|
||||
challengeType: 0
|
||||
dashedName: step-43
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
È possibile utilizzare i pulsanti di opzione per le domande in cui desideri una sola risposta tra opzioni multiple.
|
||||
|
||||
Ecco un esempio di un pulsante di opzione con l'opzione `cat`: `<input type="radio"> cat`. Ricorda che gli elementi `input` sono <dfn>self-closing</dfn>.
|
||||
|
||||
Prima dell'input di testo, aggiungi un pulsante di opzione con l'opzione `Indoor`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti creare un elemento di input per il tuo pulsante di opzione. Controlla la sintassi.
|
||||
|
||||
```js
|
||||
assert($('form > input').length >= 2);
|
||||
```
|
||||
|
||||
L'elemento `input` dovrebbe avere un tag di apertura, ma non un tag di chiusura.
|
||||
|
||||
```js
|
||||
assert($('form > input') && !code.match(/<\/input\>/g));
|
||||
```
|
||||
|
||||
Dovresti aver aggiunto un solo elemento di input per il tuo pulsante di opzione. Rimuovi quelli di troppo.
|
||||
|
||||
```js
|
||||
assert($('form > input').length === 2);
|
||||
```
|
||||
|
||||
Il nuovo elemento `input` dovrebbe essere sopra l' `input` esistente, che ha `text` come valore dell'attributo `type`. Sono nell'ordine sbagliato.
|
||||
|
||||
```js
|
||||
const existingInputElem = document.querySelector('form > input[type="text"]');
|
||||
assert(
|
||||
existingInputElem &&
|
||||
existingInputElem.previousElementSibling.nodeName === 'INPUT'
|
||||
);
|
||||
```
|
||||
|
||||
Il nuovo elemento `input` non ha un attributo `type`. Verifica che ci sia uno spazio dopo il nome del tag di apertura.
|
||||
|
||||
```js
|
||||
assert($('input')[0].hasAttribute('type'));
|
||||
```
|
||||
|
||||
Il nuovo elemento `input` dovrebbe avere un attributo `type` con il valore `radio`. Hai omesso il valore o hai un refuso. Ricorda che i valori degli attributi devono essere racchiusi tra virgolette.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('input')[0]
|
||||
.getAttribute('type')
|
||||
.match(/^radio$/i)
|
||||
);
|
||||
```
|
||||
|
||||
Sebbene tu abbia impostato `radio` come valore dell'attributo `type` del nuovo elemento `input`, è raccomandato inserire sempre il valore di un attributo tra virgolette.
|
||||
|
||||
```js
|
||||
assert(!/\<\s*input\s+type\s*=\s*radio/i.test(code));
|
||||
```
|
||||
|
||||
Il testo `Indoor` del pulsante di opzione dovrebbe essere posizionato dopo di esso invece che prima.
|
||||
|
||||
```js
|
||||
const radioInputElem = $('input')[0];
|
||||
assert(!radioInputElem.previousSibling.nodeValue.match(/Indoor/i));
|
||||
```
|
||||
|
||||
Il testo `Indoor` dovrebbe essere posizionato direttamente a destra del pulsante di opzione. Assicurati che ci sia uno spazio tra l'elemento e il testo. Hai omesso il testo o hai un refuso.
|
||||
|
||||
```js
|
||||
const radioInputElem = $('input')[0];
|
||||
assert(
|
||||
radioInputElem.nextSibling.nodeValue.replace(/\s+/g, ' ').match(/ Indoor/i)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
<h1>CatPhotoApp</h1>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
|
||||
<a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Cat Lists</h2>
|
||||
<h3>Things cats love:</h3>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
|
||||
<figcaption>Cats <em>love</em> lasagna.</figcaption>
|
||||
</figure>
|
||||
<h3>Top 3 things cats hate:</h3>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
|
||||
<figcaption>Cats <strong>hate</strong> other cats.</figcaption>
|
||||
</figure>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Cat Form</h2>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
--fcc-editable-region--
|
||||
<input type="text" name="catphotourl" placeholder="cat photo URL" required>
|
||||
--fcc-editable-region--
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@@ -0,0 +1,104 @@
|
||||
---
|
||||
id: 5ef9b03c81a63668521804dd
|
||||
title: Step 44
|
||||
challengeType: 0
|
||||
dashedName: step-44
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Gli elementi `label` sono usati per aiutare ad associare il testo di un elemento `input` con l'elemento stesso (specialmente per le tecnologie assistive come i lettori di schermo). Ad esempio, `<label><input type="radio"> cat</label>` fa sì che facendo clic sulla parola `cat` venga selezionato anche il corrispondente pulsante di opzione.
|
||||
|
||||
Annida il tuo pulsante di opzione all'interno di un elemento `label`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Dovresti assicurarti che il pulsante di opzione sia ancora presente.
|
||||
|
||||
```js
|
||||
assert($('input[type="radio"]')[0]);
|
||||
```
|
||||
|
||||
Il testo `Indoor` dovrebbe essere posizionato direttamente a destra del pulsante di opzione. Assicurati che ci sia uno spazio tra l'elemento e il testo. Hai omesso il testo o hai un refuso.
|
||||
|
||||
```js
|
||||
const radioInputElem = $('input')[0];
|
||||
assert(
|
||||
radioInputElem.nextSibling.nodeValue.replace(/\s+/g, ' ').match(/ Indoor/i)
|
||||
);
|
||||
```
|
||||
|
||||
L'elemento `label` dovrebbe avere un tag di apertura. I tag di apertura hanno questa sintassi: `<nomeElemento>`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('label'));
|
||||
```
|
||||
|
||||
L'elemento `label` dovrebbe avere un tag di chiusura. I tag di chiusura hanno un carattere `/` subito dopo il carattere `<`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/label\>/));
|
||||
```
|
||||
|
||||
Il pulsante di opzione e il suo testo dovrebbero essere posizionati tra i tag di apertura e chiusura dell'elemento `label`.
|
||||
|
||||
```js
|
||||
const labelChildNodes = [...$('form > label')[0].childNodes];
|
||||
assert(
|
||||
labelChildNodes.filter((childNode) => childNode.nodeName === 'INPUT').length
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
<h1>CatPhotoApp</h1>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
|
||||
<a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Cat Lists</h2>
|
||||
<h3>Things cats love:</h3>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
|
||||
<figcaption>Cats <em>love</em> lasagna.</figcaption>
|
||||
</figure>
|
||||
<h3>Top 3 things cats hate:</h3>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
|
||||
<figcaption>Cats <strong>hate</strong> other cats.</figcaption>
|
||||
</figure>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Cat Form</h2>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
--fcc-editable-region--
|
||||
<input type="radio"> Indoor
|
||||
--fcc-editable-region--
|
||||
<input type="text" name="catphotourl" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@@ -0,0 +1,98 @@
|
||||
---
|
||||
id: 5ef9b03c81a63668521804de
|
||||
title: Step 47
|
||||
challengeType: 0
|
||||
dashedName: step-47
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Nota che entrambi i pulsanti di opzione possono essere selezionati contemporaneamente. Per fare in modo che la selezione di un pulsante di opzione deselezioni automaticamente l'altro, entrambi i pulsanti devono avere un attributo `name` con lo stesso valore.
|
||||
|
||||
Aggiungi l'attributo `name` con il valore `indoor-outdoor` a entrambi i pulsanti di opzione.
|
||||
|
||||
# --hints--
|
||||
|
||||
Entrambi i pulsanti di opzione dovrebbero essere ancora posizionati tra i tag di apertura e chiusura dell'elemento `label`.
|
||||
|
||||
```js
|
||||
const labelChildNodes = [...document.querySelectorAll('form > label')].map(
|
||||
(node) => node.childNodes
|
||||
);
|
||||
assert(
|
||||
labelChildNodes.filter((childNode) => childNode[0].nodeName === 'INPUT')
|
||||
.length === 2
|
||||
);
|
||||
```
|
||||
|
||||
Entrambi i pulsanti di opzione dovrebbero avere un attributo `name`. 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
|
||||
const radioButtons = [...document.querySelectorAll('input[type="radio"]')];
|
||||
assert(radioButtons.every((btn) => btn.hasAttribute('name')));
|
||||
```
|
||||
|
||||
Entrambi i pulsanti di opzione dovrebbero avere un attributo `name` con il valore `indoor-outdoor`. Hai omesso il valore o hai un refuso. Ricorda che i valori degli attributi devono essere racchiusi tra virgolette.
|
||||
|
||||
```js
|
||||
const radioButtons = [...$('input[type="radio"]')];
|
||||
assert(
|
||||
radioButtons.every((btn) =>
|
||||
btn.getAttribute('name').match(/^indoor-outdoor$/)
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
<h1>CatPhotoApp</h1>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
|
||||
<a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
<section>
|
||||
<h2>Cat Lists</h2>
|
||||
<h3>Things cats love:</h3>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
|
||||
<figcaption>Cats <em>love</em> lasagna.</figcaption>
|
||||
</figure>
|
||||
<h3>Top 3 things cats hate:</h3>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
|
||||
<figcaption>Cats <strong>hate</strong> other cats.</figcaption>
|
||||
</figure>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Cat Form</h2>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
--fcc-editable-region--
|
||||
<label><input id="indoor" type="radio"> Indoor</label>
|
||||
<label><input id="outdoor" type="radio"> Outdoor</label>
|
||||
--fcc-editable-region--
|
||||
<input type="text" name="catphotourl" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@@ -0,0 +1,89 @@
|
||||
---
|
||||
id: 5ef9b03c81a63668521804df
|
||||
title: Step 45
|
||||
challengeType: 0
|
||||
dashedName: step-45
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
L'attributo `id` viene utilizzato per identificare specifici elementi HTML. Il valore di ogni attributo `id` deve essere distinto da tutti gli altri valori `id` dell'intera pagina.
|
||||
|
||||
Aggiungi un attributo `id` con il valore `indoor` al pulsante di opzione. Quando gli elementi hanno attributi multipli, l'ordine degli attributi non importa.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il pulsante di opzione dovrebbe ancora essere posizionato tra i tag di apertura e chiusura dell'elemento `label`.
|
||||
|
||||
```js
|
||||
const labelChildNodes = [...$('form > label')[0].childNodes];
|
||||
assert(
|
||||
labelChildNodes.filter((childNode) => childNode.nodeName === 'INPUT').length
|
||||
);
|
||||
```
|
||||
|
||||
Il pulsante di opzione dovrebbe avere un attributo `id`. 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($('input')[0].hasAttribute('id'));
|
||||
```
|
||||
|
||||
Il pulsante di opzione dovrebbe avere un attributo `id` con il valore `indoor`. Hai omesso il valore o hai un refuso. Ricorda che i valori degli attributi devono essere circondati da virgolette.
|
||||
|
||||
```js
|
||||
assert($('input')[0].id.match(/^indoor$/));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
<h1>CatPhotoApp</h1>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
|
||||
<a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Cat Lists</h2>
|
||||
<h3>Things cats love:</h3>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
|
||||
<figcaption>Cats <em>love</em> lasagna.</figcaption>
|
||||
</figure>
|
||||
<h3>Top 3 things cats hate:</h3>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
|
||||
<figcaption>Cats <strong>hate</strong> other cats.</figcaption>
|
||||
</figure>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Cat Form</h2>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
--fcc-editable-region--
|
||||
<label><input type="radio"> Indoor</label>
|
||||
--fcc-editable-region--
|
||||
<input type="text" name="catphotourl" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@@ -0,0 +1,100 @@
|
||||
---
|
||||
id: 5ef9b03c81a63668521804e1
|
||||
title: Step 49
|
||||
challengeType: 0
|
||||
dashedName: step-49
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
L'elemento `fieldset` viene utilizzato per raggruppare insieme gli input e le etichette correlati in un modulo web. Gli elementi `fieldset` sono <dfn>block-level elements</dfn>, il che significa che appaiono su una nuova riga.
|
||||
|
||||
Annida i pulsanti di opzione `Indoor` e `Outdoor` all'interno di un elemento `fieldset` e non dimenticare di indentare i pulsanti di opzione.
|
||||
|
||||
# --hints--
|
||||
|
||||
Entrambi i pulsanti di opzione dovrebbero essere ancora posizionati tra i tag di apertura e chiusura dell'elemento `label`.
|
||||
|
||||
```js
|
||||
const labelChildNodes = [...$('label')].map((node) => [...node.childNodes]);
|
||||
assert(
|
||||
labelChildNodes.filter((childNode) => childNode[0].nodeName === 'INPUT')
|
||||
.length === 2
|
||||
);
|
||||
```
|
||||
|
||||
L'elemento `fieldset` dovrebbe avere un tag di apertura. I tag di apertura hanno la seguente sintassi: `<nomeElemento>`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('fieldset'));
|
||||
```
|
||||
|
||||
L'elemento `fieldset` dovrebbe avere un tag di chiusura. I tag di chiusura hanno un carattere `/` subito dopo il carattere `<`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/fieldset\>/));
|
||||
```
|
||||
|
||||
Sia il pulsante di opzione che le etichette associate devono essere tra i tag di apertura e chiusura dell'elemento `fieldset`.
|
||||
|
||||
```js
|
||||
const radioButtons = [...$('input[type="radio"]')];
|
||||
assert(
|
||||
radioButtons.every((btn) => btn.parentNode.parentNode.nodeName === 'FIELDSET')
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
<h1>CatPhotoApp</h1>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
|
||||
<a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Cat Lists</h2>
|
||||
<h3>Things cats love:</h3>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
|
||||
<figcaption>Cats <em>love</em> lasagna.</figcaption>
|
||||
</figure>
|
||||
<h3>Top 3 things cats hate:</h3>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
|
||||
<figcaption>Cats <strong>hate</strong> other cats.</figcaption>
|
||||
</figure>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Cat Form</h2>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
--fcc-editable-region--
|
||||
<label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor"> Indoor</label>
|
||||
<label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label>
|
||||
--fcc-editable-region--
|
||||
<input type="text" name="catphotourl" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@@ -0,0 +1,128 @@
|
||||
---
|
||||
id: 5ef9b03c81a63668521804e2
|
||||
title: Step 53
|
||||
challengeType: 0
|
||||
dashedName: step-53
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
I moduli usano comunemente delle caselle di spunta (checkbox) per le domande che possono avere più di una risposta. Ad esempio, ecco una casella di spunta con l'opzione `tacos`: `<input type="checkbox"> tacos`.
|
||||
|
||||
Sotto l'elemento `legend` che hai appena aggiunto, aggiungi un elemento `input` con `checkbox` come valore dell'attributo `type` e l'opzione `Loving`.
|
||||
|
||||
# --hints--
|
||||
|
||||
L'elemento `input` della casella di spunta dovrebbe avere un tag di apertura, ma non un tag di chiusura.
|
||||
|
||||
```js
|
||||
assert($('fieldset > input') && !code.match(/<\/input\>/g));
|
||||
```
|
||||
|
||||
Dovresti aver aggiunto solo un elemento di input per la casella di spunta. Rimuovi quelli di troppo.
|
||||
|
||||
```js
|
||||
assert($('fieldset > input').length === 1);
|
||||
```
|
||||
|
||||
Il nuovo elemento `input` dovrebbe essere al di sotto dell'elemento `legend` con il testo `What's your cat's personality?`. Sono nell'ordine sbagliato.
|
||||
|
||||
```js
|
||||
const existingLegendElem = $('fieldset > legend')[1];
|
||||
assert(
|
||||
existingLegendElem &&
|
||||
existingLegendElem.nextElementSibling.nodeName === 'INPUT'
|
||||
);
|
||||
```
|
||||
|
||||
L'elemento `input` non ha un attributo `type`. Controlla che ci sia uno spazio dopo il nome del tag di apertura.
|
||||
|
||||
```js
|
||||
assert($('fieldset > input')[0].hasAttribute('type'));
|
||||
```
|
||||
|
||||
L'elemento `input` dovrebbe avere un attributo `type` con il valore `checkbox`. Hai omesso il valore o hai un refuso. Ricorda che i valori degli attributi devono essere circondati da virgolette.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('fieldset > input')[0]
|
||||
.getAttribute('type')
|
||||
.match(/^checkbox$/i)
|
||||
);
|
||||
```
|
||||
|
||||
Sebbene tu abbia impostato `checkbox` come valore dell'attributo `type` del nuovo elemento `input`, è raccomandato inserire sempre il valore di un attributo tra virgolette.
|
||||
|
||||
```js
|
||||
assert(!/\<\s*input\s+type\s*=\s*checkbox/i.test(code));
|
||||
```
|
||||
|
||||
Il testo `Loving` dovrebbe essere posizionato direttamente a destra della tua casella di spunta. Assicurati che ci sia uno spazio tra l'elemento e il testo. Hai omesso il valore o hai un refuso.
|
||||
|
||||
```js
|
||||
const checkboxInputElem = $('input[type="checkbox"]')[0];
|
||||
assert(
|
||||
checkboxInputElem.nextSibling.nodeValue.replace(/\s+/g, ' ').match(/ Loving/i)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
<h1>CatPhotoApp</h1>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
|
||||
<a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Cat Lists</h2>
|
||||
<h3>Things cats love:</h3>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
|
||||
<figcaption>Cats <em>love</em> lasagna.</figcaption>
|
||||
</figure>
|
||||
<h3>Top 3 things cats hate:</h3>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
|
||||
<figcaption>Cats <strong>hate</strong> other cats.</figcaption>
|
||||
</figure>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Cat Form</h2>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<fieldset>
|
||||
<legend>Is your cat an indoor or outdoor cat?</legend>
|
||||
<label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor"> Indoor</label>
|
||||
<label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
--fcc-editable-region--
|
||||
<legend>What's your cat's personality?</legend>
|
||||
--fcc-editable-region--
|
||||
</fieldset>
|
||||
<input type="text" name="catphotourl" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@@ -0,0 +1,122 @@
|
||||
---
|
||||
id: 5ef9b03c81a63668521804e3
|
||||
title: Step 57
|
||||
challengeType: 0
|
||||
dashedName: step-57
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Aggiungi un'altra casella di spunta dopo quella che hai appena aggiunto. Il valore dell'attributo `id` dovrebbe essere `lazy` e il valore dell'attributo `name` dovrebbe essere lo stesso dell'ultima casella di spunta.
|
||||
|
||||
Aggiungi anche un elemento `label` alla destra della nuova casella di spunta con il testo `Lazy`. Assicurati di associare l'elemento `label` con la nuova casella di spunta usando l'attributo `for`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Devi aggiungere una nuova casella di spunta.
|
||||
|
||||
```js
|
||||
assert($('input[type="checkbox"]').length === 2);
|
||||
```
|
||||
|
||||
La nuova casella di spunta dovrebbe avere un attributo `id` con il valore `lazy` e un attributo `name` con il valore `personality`. Verifica che ci sia uno spazio dopo il nome del tag di apertura e/o che ci siano spazi prima di tutti attributi.
|
||||
|
||||
```js
|
||||
const checkboxes = [...$('input[type="checkbox"]')];
|
||||
assert(
|
||||
checkboxes.some(
|
||||
(checkbox) =>
|
||||
checkbox.id === 'lazy' && checkbox.getAttribute('name') === 'personality'
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
La nuova casella di spunta dovrebbe essere dopo la prima. Sono nell'ordine sbagliato.
|
||||
|
||||
```js
|
||||
const checkboxes = [...$('input[type="checkbox"]')].map(
|
||||
(checkbox) => checkbox.id
|
||||
);
|
||||
assert(checkboxes.indexOf('loving') < checkboxes.indexOf('lazy'));
|
||||
```
|
||||
|
||||
A destra della nuova casella di spunta, dovrebbe esserci l'elemento `label` con il testo `Lazy`.
|
||||
|
||||
```js
|
||||
const nextElementSibling = $('input[type="checkbox"]')[1].nextElementSibling;
|
||||
assert(
|
||||
nextElementSibling.nodeName === 'LABEL' &&
|
||||
nextElementSibling.innerText.replace(/\s+/g, '').match(/^Lazy$/i)
|
||||
);
|
||||
```
|
||||
|
||||
Il nuovo `label` dovrebbe avere un attributo `for` con lo stesso valore dell'attributo `id` della nuova casella di spunta. Hai omesso il valore o hai un refuso.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('input[type="checkbox"]')[1].nextElementSibling.getAttribute('for') ===
|
||||
'lazy'
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
<h1>CatPhotoApp</h1>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
|
||||
<a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Cat Lists</h2>
|
||||
<h3>Things cats love:</h3>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
|
||||
<figcaption>Cats <em>love</em> lasagna.</figcaption>
|
||||
</figure>
|
||||
<h3>Top 3 things cats hate:</h3>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
|
||||
<figcaption>Cats <strong>hate</strong> other cats.</figcaption>
|
||||
</figure>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Cat Form</h2>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<fieldset>
|
||||
<legend>Is your cat an indoor or outdoor cat?</legend>
|
||||
<label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor"> Indoor</label>
|
||||
<label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend>What's your cat's personality?</legend>
|
||||
--fcc-editable-region--
|
||||
<input id="loving" type="checkbox" name="personality"> <label for="loving">Loving</label>
|
||||
--fcc-editable-region--
|
||||
</fieldset>
|
||||
<input type="text" name="catphotourl" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@@ -0,0 +1,117 @@
|
||||
---
|
||||
id: 5ef9b03c81a63668521804e5
|
||||
title: Step 60
|
||||
challengeType: 0
|
||||
dashedName: step-60
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Per far sì che una casella di spunta o un pulsante di opzione risultino selezionati di default, è necessario aggiungere l'attributo `checked`. Non è necessario impostare un valore per l'attributo `checked`. Aggiungi la parola `checked` all'elemento `input`, assicurandoti che ci sia spazio tra esso e altri attributi.
|
||||
|
||||
Fai in modo che il primo pulsante di opzione e la prima casella di spunta siano selezionati di default.
|
||||
|
||||
# --hints--
|
||||
|
||||
Assicurati che ci siano ancora due pulsanti di opzione e tre caselle di spunta annidate nei rispettivi elementi `fieldset`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('input[type="radio"]').length === 2 &&
|
||||
$('fieldset > input[type="checkbox"]').length === 3
|
||||
);
|
||||
```
|
||||
|
||||
Nel primo pulsante di opzione manca l'attributo `checked`.
|
||||
|
||||
```js
|
||||
assert($('input[type="radio"]')[0].hasAttribute('checked'));
|
||||
```
|
||||
|
||||
Il secondo pulsante di opzione non deve avere l'attributo `checked`.
|
||||
|
||||
```js
|
||||
assert(!$('input[type="radio"]')[1].hasAttribute('checked'));
|
||||
```
|
||||
|
||||
Nella prima casella di spunta manca l'attributo `checked`.
|
||||
|
||||
```js
|
||||
assert($('input[type="checkbox"]')[0].hasAttribute('checked'));
|
||||
```
|
||||
|
||||
La seconda casella di spunta non deve avere l'attributo `checked`.
|
||||
|
||||
```js
|
||||
assert(!$('input[type="checkbox"]')[1].hasAttribute('checked'));
|
||||
```
|
||||
|
||||
La terza casella di spunta non deve avere l'attributo `checked`.
|
||||
|
||||
```js
|
||||
assert(!$('input[type="checkbox"]')[2].hasAttribute('checked'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
<h1>CatPhotoApp</h1>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
|
||||
<a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Cat Lists</h2>
|
||||
<h3>Things cats love:</h3>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
|
||||
<figcaption>Cats <em>love</em> lasagna.</figcaption>
|
||||
</figure>
|
||||
<h3>Top 3 things cats hate:</h3>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
|
||||
<figcaption>Cats <strong>hate</strong> other cats.</figcaption>
|
||||
</figure>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Cat Form</h2>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
--fcc-editable-region--
|
||||
<fieldset>
|
||||
<legend>Is your cat an indoor or outdoor cat?</legend>
|
||||
<label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor"> Indoor</label>
|
||||
<label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend>What's your cat's personality?</legend>
|
||||
<input id="loving" type="checkbox" name="personality" value="loving"> <label for="loving">Loving</label>
|
||||
<input id="lazy" type="checkbox" name="personality" value="lazy"> <label for="lazy">Lazy</label>
|
||||
<input id="energetic" type="checkbox" name="personality" value="energetic"> <label for="energetic"> Energetic</label>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<input type="text" name="catphotourl" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@@ -0,0 +1,102 @@
|
||||
---
|
||||
id: 5ef9b03c81a63668521804e7
|
||||
title: Step 61
|
||||
challengeType: 0
|
||||
dashedName: step-61
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Adesso aggiungerai una sezione piè di pagina alla pagina.
|
||||
|
||||
Dopo l'elemento `main`, aggiungi un elemento `footer`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Hai eliminato l'elemento `main` oppure manca un tag di apertura o un tag di chiusura.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('main') && code.match(/<\/main>/));
|
||||
```
|
||||
|
||||
L'elemento `footer` dovrebbe avere un tag di apertura. I tag di apertura hanno la seguente sintassi: `<nomeElemento>`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('footer'));
|
||||
```
|
||||
|
||||
L'elemento `footer` dovrebbe avere un tag di chiusura. I tag di chiusura hanno un carattere `/` subito dopo il carattere `<`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/footer\>/));
|
||||
```
|
||||
|
||||
L'elemento `footer` dovrebbe essere al di sotto del tag di chiusura dell'elemento `main`. Lo hai inserito nel posto sbagliato.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('main').nextElementSibling.nodeName === 'FOOTER');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
<h1>CatPhotoApp</h1>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
|
||||
<a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Cat Lists</h2>
|
||||
<h3>Things cats love:</h3>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
|
||||
<figcaption>Cats <em>love</em> lasagna.</figcaption>
|
||||
</figure>
|
||||
<h3>Top 3 things cats hate:</h3>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
|
||||
<figcaption>Cats <strong>hate</strong> other cats.</figcaption>
|
||||
</figure>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Cat Form</h2>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<fieldset>
|
||||
<legend>Is your cat an indoor or outdoor cat?</legend>
|
||||
<label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor" checked> Indoor</label>
|
||||
<label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend>What's your cat's personality?</legend>
|
||||
<input id="loving" type="checkbox" name="personality" value="loving" checked> <label for="loving">Loving</label>
|
||||
<input id="lazy" type="checkbox" name="personality" value="lazy"> <label for="lazy">Lazy</label>
|
||||
<input id="energetic" type="checkbox" name="personality" value="energetic"> <label for="energetic">Energetic</label>
|
||||
</fieldset>
|
||||
<input type="text" name="catphotourl" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</section>
|
||||
--fcc-editable-region--
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
--fcc-editable-region--
|
||||
```
|
||||
|
||||
@@ -0,0 +1,104 @@
|
||||
---
|
||||
id: 5ef9b03c81a63668521804e8
|
||||
title: Step 62
|
||||
challengeType: 0
|
||||
dashedName: step-62
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Annida un elemento `p` con il testo `No Copyright - freeCodeCamp.org` all'interno dell'elemento `footer`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Hai eliminato l'elemento `footer` oppure manca un tag di apertura o di chiusura.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('footer') && code.match(/<\/footer>/));
|
||||
```
|
||||
|
||||
L'elemento `footer` dovrebbe avere un elemento `p`. Assicurati di aggiungere il tag di apertura e di chiusura per l'elemento `p`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('footer > p'));
|
||||
```
|
||||
|
||||
L'elemento `footer` dovrebbe avere un tag di chiusura. I tag di chiusura hanno un carattere `/` subito dopo il carattere `<`.
|
||||
|
||||
```js
|
||||
const pElemClosingTags = code.match(/<\/p\>/g);
|
||||
assert(pElemClosingTags && pElemClosingTags.length === 2);
|
||||
```
|
||||
|
||||
Il testo dell'elemento `p` dovrebbe essere `No Copyright - freeCodeCamp.org`. Hai omesso il testo, hai un refuso oppure il testo non è compreso tra i tag di apertura e chiusura dell'elemento `legend`.
|
||||
|
||||
```js
|
||||
const extraSpacesRemoved = $('footer > p')[0].innerText.replace(/\s+/g, ' ');
|
||||
assert(extraSpacesRemoved.match(/No Copyright - freeCodeCamp\.org$/i));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
<h1>CatPhotoApp</h1>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
|
||||
<a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Cat Lists</h2>
|
||||
<h3>Things cats love:</h3>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
|
||||
<figcaption>Cats <em>love</em> lasagna.</figcaption>
|
||||
</figure>
|
||||
<h3>Top 3 things cats hate:</h3>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
|
||||
<figcaption>Cats <strong>hate</strong> other cats.</figcaption>
|
||||
</figure>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Cat Form</h2>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<fieldset>
|
||||
<legend>Is your cat an indoor or outdoor cat?</legend>
|
||||
<label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor" checked> Indoor</label>
|
||||
<label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend>What's your cat's personality?</legend>
|
||||
<input id="loving" type="checkbox" name="personality" value="loving" checked> <label for="loving">Loving</label>
|
||||
<input id="lazy" type="checkbox" name="personality" value="lazy"> <label for="lazy">Lazy</label>
|
||||
<input id="energetic" type="checkbox" name="personality" value="energetic"> <label for="energetic">Energetic</label>
|
||||
</fieldset>
|
||||
<input type="text" name="catphotourl" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</section>
|
||||
</main>
|
||||
--fcc-editable-region--
|
||||
<footer>
|
||||
</footer>
|
||||
--fcc-editable-region--
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@@ -0,0 +1,100 @@
|
||||
---
|
||||
id: 5efada803cbd2bbdab94e332
|
||||
title: Step 28
|
||||
challengeType: 0
|
||||
dashedName: step-28
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
All'interno dell'elemento `figure` che hai appena aggiunto, annida un elemento `img` con `https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg` come attributo dell'elemento `src`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il secondo elemento `figure` dovrebbe avere un tag di apertura. I tag di apertura hanno questa sintassi: `<nomeElemento>`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('figure').length === 2);
|
||||
```
|
||||
|
||||
Il secondo elemento `figure` dovrebbe avere un tag di chiusura. I tag di chiusura hanno un carattere `/` subito dopo il carattere `<`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/figure>/g).length === 2);
|
||||
```
|
||||
|
||||
Ci dovrebbe essere un secondo elemento `figure` proprio sopra il tag di chiusura del secondo elemento `section`. Sono nell'ordine sbagliato.
|
||||
|
||||
```js
|
||||
assert($('main > section')[1].lastElementChild.nodeName === 'FIGURE');
|
||||
```
|
||||
|
||||
Dovresti avere un terzo elemento `img` annidato nell'elemento `figure`.
|
||||
|
||||
```js
|
||||
const catsImg = document.querySelectorAll('figure > img')[1];
|
||||
assert(
|
||||
catsImg &&
|
||||
catsImg.getAttribute('src').toLowerCase() === 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg'
|
||||
);
|
||||
```
|
||||
|
||||
L'attributo `src` della terza immagine dovrebbe essere `https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg`.
|
||||
|
||||
```js
|
||||
const catsImg = document.querySelectorAll('figure > img')[1];
|
||||
assert(
|
||||
catsImg &&
|
||||
catsImg.getAttribute('src').toLowerCase() === 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg'
|
||||
);
|
||||
```
|
||||
|
||||
Anche se hai inserito l'URL corretto nell'attributo `src` della nuova immagine, è raccomandato inserire sempre il valore di un attributo tra virgolette.
|
||||
|
||||
```js
|
||||
assert(!/\<img\s+.+\s+src\s*=\s*https:\/\/cdn\.freecodecamp\.org\/curriculum\/cat-photo-app\/cats\.jpg/.test(code));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
<h1>CatPhotoApp</h1>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
|
||||
<a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Cat Lists</h2>
|
||||
<h3>Things cats love:</h3>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
|
||||
<figcaption>Cats <em>love</em> lasagna.</figcaption>
|
||||
</figure>
|
||||
<h3>Top 3 things cats hate:</h3>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
--fcc-editable-region--
|
||||
<figure>
|
||||
</figure>
|
||||
--fcc-editable-region--
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@@ -0,0 +1,97 @@
|
||||
---
|
||||
id: 5efae0543cbd2bbdab94e333
|
||||
title: Step 29
|
||||
challengeType: 0
|
||||
dashedName: step-29
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Per migliorare l'accessibilità dell'immagine che hai appena aggiunto, inserisciun attributo `alt` con il testo `Five cats looking around a field.`
|
||||
|
||||
# --hints--
|
||||
|
||||
L'elemento `figure` dovrebbe avere un tag di apertura. I tag di apertura hanno questa sintassi: `<nomeElemento>`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('figure').length === 2);
|
||||
```
|
||||
|
||||
L'elemento `ol` dovrebbe avere un tag di chiusura. I tag di chiusura hanno un carattere `/` subito dopo il carattere `<`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/figure>/g).length === 2);
|
||||
```
|
||||
|
||||
Ci dovrebbe essere un elemento `figure` proprio sopra il tag di chiusura dell'ultimo elemento `section`.
|
||||
|
||||
```js
|
||||
assert($('main > section')[1].lastElementChild.nodeName === 'FIGURE');
|
||||
```
|
||||
|
||||
L'elemento `img` con i gatti dovrebbe essere annidato nell'elemento `figure`.
|
||||
|
||||
```js
|
||||
const catsImg = document.querySelectorAll('figure > img')[1];
|
||||
assert(
|
||||
catsImg &&
|
||||
catsImg.getAttribute('src').toLowerCase() === 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg'
|
||||
);
|
||||
```
|
||||
|
||||
L'elemento `img` con i gatti dovrebbe avere un attributo `alt` con il valore `Five cats looking around a field.`
|
||||
|
||||
```js
|
||||
const catsImg = document.querySelectorAll('figure > img')[1];
|
||||
assert(
|
||||
catsImg
|
||||
.getAttribute('alt')
|
||||
.replace(/\s+/g, ' ')
|
||||
.match(/^Five cats looking around a field\.?$/i)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
<h1>CatPhotoApp</h1>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
|
||||
<a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Cat Lists</h2>
|
||||
<h3>Things cats love:</h3>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
|
||||
<figcaption>Cats <em>love</em> lasagna.</figcaption>
|
||||
</figure>
|
||||
<h3>Top 3 things cats hate:</h3>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<figure>
|
||||
--fcc-editable-region--
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg">
|
||||
--fcc-editable-region--
|
||||
</figure>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@@ -0,0 +1,123 @@
|
||||
---
|
||||
id: 5efae16e3cbd2bbdab94e334
|
||||
title: Step 30
|
||||
challengeType: 0
|
||||
dashedName: step-30
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Dopo l'ultimo elemento `img`, aggiungi un elemento `figcaption` con il testo `Cats hate other cats.`
|
||||
|
||||
# --hints--
|
||||
|
||||
L'elemento `figcaption` dovrebbe avere un tag di apertura. I tag di apertura hanno la seguente sintassi: `<nomeElemento>`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('figcaption').length === 2);
|
||||
```
|
||||
|
||||
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\>/g).length === 2);
|
||||
```
|
||||
|
||||
Ci dovrebbe essere un elemento `figure` proprio sopra il tag di chiusura del secondo elemento `section`.
|
||||
|
||||
```js
|
||||
assert($('main > section')[1].lastElementChild.nodeName === 'FIGURE');
|
||||
```
|
||||
|
||||
L'ultimo elemento `img` dovrebbe essere annidato nell'elemento `figure`.
|
||||
|
||||
```js
|
||||
const catsImg = document.querySelectorAll('figure > img')[1];
|
||||
assert(
|
||||
catsImg &&
|
||||
catsImg.getAttribute('src').toLowerCase() === 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg'
|
||||
);
|
||||
```
|
||||
|
||||
L'elemento `figure` dovrebbe avere un tag di apertura. I tag di apertura hanno la seguente sintassi: `<nomeElemento>`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('figure').length === 2);
|
||||
```
|
||||
|
||||
L'elemento `figure` dovrebbe avere un tag di chiusura. I tag di chiusura hanno un carattere `/` subito dopo il carattere `<`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/figure\>/g).length === 2);
|
||||
```
|
||||
|
||||
L'elemento `figcaption` dovrebbe essere annidato nell'elemento `figure`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('figure > figcaption').length === 2);
|
||||
```
|
||||
|
||||
L'elemento `figcaption` annidato nell'elemento `figure` dovrebbe essere al di sotto dell'elemento `img`. L'elemento `img` e l'elemento `figcaption` sono nell'ordine sbagliato.
|
||||
|
||||
```js
|
||||
assert(
|
||||
document.querySelectorAll('figcaption')[1].previousElementSibling.nodeName ===
|
||||
'IMG'
|
||||
);
|
||||
```
|
||||
|
||||
L'elemento `figcaption` dovrebbe avere il testo `Cats hate other cats.` Hai omesso una parola o hai refuso.
|
||||
|
||||
```js
|
||||
assert(
|
||||
document
|
||||
.querySelectorAll('figcaption')[1]
|
||||
.innerText.toLowerCase()
|
||||
.match(/Cats hate other cats\.?$/i)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
<h1>CatPhotoApp</h1>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
|
||||
<a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Cat Lists</h2>
|
||||
<h3>Things cats love:</h3>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
|
||||
<figcaption>Cats <em>love</em> lasagna.</figcaption>
|
||||
</figure>
|
||||
<h3>Top 3 things cats hate:</h3>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<figure>
|
||||
--fcc-editable-region--
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
|
||||
--fcc-editable-region--
|
||||
</figure>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@@ -0,0 +1,104 @@
|
||||
---
|
||||
id: 5efb23e70dc218d6c85f89b1
|
||||
title: Step 37
|
||||
challengeType: 0
|
||||
dashedName: step-37
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Ci sono molti tipi di input che puoi creare usando l'attributo `type`. Puoi creare facilmente un campo di password, un pulsante di reset o un controllo per consentire agli utenti di selezionare un file dal proprio computer.
|
||||
|
||||
Crea un casella di testo per ottenere input di testo da un utente aggiungendo l'attributo `type` con il valore `text` all'elemento `input`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Hai eliminato l'elemento `input` oppure ha una sintassi non valida. Se hai aggiunto degli attributi, assicurati che i loro valori siano circondati da virgolette.
|
||||
|
||||
```js
|
||||
assert($('input').length);
|
||||
```
|
||||
|
||||
L'elemento `form` dovrebbe contenere solo l'elemento `input`. Rimuovi qualsiasi elemento HTML o testo aggiuntivo tra i tag dell'elemento `form`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('form')[0].children.length === 1 &&
|
||||
$('form')[0].innerText.trim().length === 0
|
||||
);
|
||||
```
|
||||
|
||||
L'elemento `input` non ha un attributo `type` con il valore `text`. 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($('input')[0].hasAttribute('type'));
|
||||
```
|
||||
|
||||
L'elemento `input` dovrebbe avere un attributo `type` con il valore `text`. Hai omesso il valore o hai un refuso. Ricorda che i valori degli attributi devono essere circondati da virgolette.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('input')[0]
|
||||
.getAttribute('type')
|
||||
.replace(/\s+/g, ' ')
|
||||
.match(/^text$/i)
|
||||
);
|
||||
```
|
||||
|
||||
Sebbene tu abbia impostato l'attributo `type` dell'elemento `input` come `text`, è sempre raccomandato inserire il valore di un attributo tra virgolette.
|
||||
|
||||
```js
|
||||
assert(!/\<input\s+type\s*=\s*text/.test(code));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
<h1>CatPhotoApp</h1>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
|
||||
<a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Cat Lists</h2>
|
||||
<h3>Things cats love:</h3>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
|
||||
<figcaption>Cats <em>love</em> lasagna.</figcaption>
|
||||
</figure>
|
||||
<h3>Top 3 things cats hate:</h3>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
|
||||
<figcaption>Cats <strong>hate</strong> other cats.</figcaption>
|
||||
</figure>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Cat Form</h2>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
--fcc-editable-region--
|
||||
<input>
|
||||
--fcc-editable-region--
|
||||
</form>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@@ -0,0 +1,136 @@
|
||||
---
|
||||
id: 5efc4f528d6a74d05e68af74
|
||||
title: Step 55
|
||||
challengeType: 0
|
||||
dashedName: step-55
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
C'è un altro modo per associare il testo di un elemento `input` con l'elemento stesso. Puoi annidare il testo all'interno di un elemento `label` e aggiungere un attributo `for` con lo stesso valore dell'attributo `id` dell'elemento `input`.
|
||||
|
||||
Associa il testo `Loving` alla casella di spunta annidando il testo `Loving` in un elemento `label` e posizionalo a destra della casella di spunta dell'elemento `input`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Assicurati che la casella di spunta sia ancora presente.
|
||||
|
||||
```js
|
||||
assert($('input[type="checkbox"]')[0]);
|
||||
```
|
||||
|
||||
La casella di spunta dovrebbe ancora avere un attributo `id` con il valore `loving`. Potresti aver rimosso l'attributo o cambiato il suo valore.
|
||||
|
||||
```js
|
||||
assert($('input[type="checkbox"]')[0].id === 'loving');
|
||||
```
|
||||
|
||||
Il testo `Loving` non dovrebbe essere più posizionato direttamente a destra della tua casella di spunta. Dovrebbe essere contenuto in un elemento `label`. Assicurati che ci sia uno spazio tra i due elementi.
|
||||
|
||||
```js
|
||||
const checkboxInputElem = $('input[type="checkbox"]')[0];
|
||||
assert(
|
||||
!checkboxInputElem.nextSibling.nodeValue
|
||||
.replace(/\s+/g, ' ')
|
||||
.match(/ Loving/i)
|
||||
);
|
||||
```
|
||||
|
||||
Dovresti aggiungere un nuovo elemento `label` in cui annidare il testo `Loving`. Assicurati di avere sia i tag di apertura che di chiusura.
|
||||
|
||||
```js
|
||||
assert(
|
||||
document.querySelectorAll('label').length === 3 &&
|
||||
code.match(/<\/label\>/g).length === 3
|
||||
);
|
||||
```
|
||||
|
||||
Il nuovo elemento `label` dovrebbe essere posizionato direttamente a destra della tua casella di spunta. Assicurati che ci sia uno spazio tra i due elementi.
|
||||
|
||||
```js
|
||||
const checkboxInputElem = $('input[type="checkbox"]')[0];
|
||||
assert(checkboxInputElem.nextElementSibling.nodeName === 'LABEL');
|
||||
```
|
||||
|
||||
Il nuovo elemento `label` non ha un attributo `for`. Controlla che ci sia uno spazio dopo il nome del tag di apertura.
|
||||
|
||||
```js
|
||||
const labelElem = $('input[type="checkbox"]')[0].nextElementSibling;
|
||||
assert(labelElem.hasAttribute('for'));
|
||||
```
|
||||
|
||||
Il nuovo elemento `label` dovrebbe avere un attributo `for` con il valore `loving`. Hai omesso il valore o hai un refuso. Ricorda che i valori degli attributi devono essere racchiusi tra virgolette.
|
||||
|
||||
```js
|
||||
const labelElem = $('input[type="checkbox"]')[0].nextElementSibling;
|
||||
assert(labelElem.getAttribute('for').match(/^loving$/));
|
||||
```
|
||||
|
||||
Il testo `Loving` dovrebbe essere annidato all'interno del nuovo elemento `label`. Hai omesso il valore o hai un refuso.
|
||||
|
||||
```js
|
||||
const labelElem = document.querySelector('label[for="loving"]');
|
||||
assert(labelElem.textContent.replace(/\s/g, '').match(/Loving/i));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
<h1>CatPhotoApp</h1>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
|
||||
<a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Cat Lists</h2>
|
||||
<h3>Things cats love:</h3>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
|
||||
<figcaption>Cats <em>love</em> lasagna.</figcaption>
|
||||
</figure>
|
||||
<h3>Top 3 things cats hate:</h3>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
|
||||
<figcaption>Cats <strong>hate</strong> other cats.</figcaption>
|
||||
</figure>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Cat Form</h2>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<fieldset>
|
||||
<legend>Is your cat an indoor or outdoor cat?</legend>
|
||||
<label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor"> Indoor</label>
|
||||
<label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend>What's your cat's personality?</legend>
|
||||
--fcc-editable-region--
|
||||
<input id="loving" type="checkbox"> Loving
|
||||
--fcc-editable-region--
|
||||
</fieldset>
|
||||
<input type="text" name="catphotourl" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@@ -0,0 +1,98 @@
|
||||
---
|
||||
id: 5efc518e8d6a74d05e68af75
|
||||
title: Step 56
|
||||
challengeType: 0
|
||||
dashedName: step-56
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Aggiungi l'attributo `name` con il valore `personality` all'elemento `input`.
|
||||
|
||||
Non noterai nulla nel browser, ma questa operazione facilita l'elaborazione del modulo web per un server, soprattutto quando ci sono più caselle di spunta.
|
||||
|
||||
# --hints--
|
||||
|
||||
Assicurati che la casella di spunta sia ancora presente.
|
||||
|
||||
```js
|
||||
assert($('input[type="checkbox"]')[0]);
|
||||
```
|
||||
|
||||
L'elemento `input` con la casella di spunta non ha un attributo `name`. Controlla che ci sia uno spazio dopo il nome del tag di apertura.
|
||||
|
||||
```js
|
||||
assert($('input[type="checkbox"]')[0].hasAttribute('name'));
|
||||
```
|
||||
|
||||
L'elemento `input` con la casella di spunta dovrebbe avere un attributo `name` con il valore `personality`. Hai omesso il valore o hai un refuso. Ricorda che i valori degli attributi devono essere racchiusi tra virgolette.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('input[type="checkbox"]')[0]
|
||||
.getAttribute('name')
|
||||
.match(/^personality$/)
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
<h1>CatPhotoApp</h1>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
|
||||
<a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Cat Lists</h2>
|
||||
<h3>Things cats love:</h3>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
|
||||
<figcaption>Cats <em>love</em> lasagna.</figcaption>
|
||||
</figure>
|
||||
<h3>Top 3 things cats hate:</h3>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
|
||||
<figcaption>Cats <strong>hate</strong> other cats.</figcaption>
|
||||
</figure>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Cat Form</h2>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<fieldset>
|
||||
<legend>Is your cat an indoor or outdoor cat?</legend>
|
||||
<label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor"> Indoor</label>
|
||||
<label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend>What's your cat's personality?</legend>
|
||||
--fcc-editable-region--
|
||||
<input id="loving" type="checkbox"> <label for="loving">Loving</label>
|
||||
--fcc-editable-region--
|
||||
</fieldset>
|
||||
<input type="text" name="catphotourl" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@@ -0,0 +1,86 @@
|
||||
---
|
||||
id: 5efc54138d6a74d05e68af76
|
||||
title: Step 54
|
||||
challengeType: 0
|
||||
dashedName: step-54
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Aggiungi un attributo `id` con il valore `loving` all'input della casella di spunta.
|
||||
|
||||
# --hints--
|
||||
|
||||
La casella di spunta dovrebbe avere un attributo `id`. Controlla 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($('input[type="checkbox"]')[0].hasAttribute('id'));
|
||||
```
|
||||
|
||||
La casella di spunta dovrebbe avere un attributo `id` con il valore `loving`. Hai omesso il testo o hai un refuso. Ricorda che i valori degli attributi devono essere racchiusi tra virgolette.
|
||||
|
||||
```js
|
||||
assert($('input[type="checkbox"]')[0].id.match(/^loving$/));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
<h1>CatPhotoApp</h1>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
|
||||
<a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Cat Lists</h2>
|
||||
<h3>Things cats love:</h3>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
|
||||
<figcaption>Cats <em>love</em> lasagna.</figcaption>
|
||||
</figure>
|
||||
<h3>Top 3 things cats hate:</h3>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
|
||||
<figcaption>Cats <strong>hate</strong> other cats.</figcaption>
|
||||
</figure>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Cat Form</h2>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<fieldset>
|
||||
<legend>Is your cat an indoor or outdoor cat?</legend>
|
||||
<label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor"> Indoor</label>
|
||||
<label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend>What's your cat's personality?</legend>
|
||||
--fcc-editable-region--
|
||||
<input type="checkbox"> Loving
|
||||
--fcc-editable-region--
|
||||
</fieldset>
|
||||
<input type="text" name="catphotourl" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@@ -0,0 +1,124 @@
|
||||
---
|
||||
id: 5efc575c8d6a74d05e68af77
|
||||
title: Step 58
|
||||
challengeType: 0
|
||||
dashedName: step-58
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Aggiungi un'ultima casella di spunta dopo quella precedente con un attributo `id` con il valore `energetic`. L'attributo `name` dovrebbe essere lo stesso della casella di spunta precedente.
|
||||
|
||||
Aggiungi anche un elemento `label` a destra della nuova casella di spunta con il testo `Energetic`. Assicurati di associare l'elemento `label` alla nuova casella di spunta.
|
||||
|
||||
# --hints--
|
||||
|
||||
Devi aggiungere una nuova casella di spunta.
|
||||
|
||||
```js
|
||||
assert($('input[type="checkbox"]').length === 3);
|
||||
```
|
||||
|
||||
La nuova casella di spunta dovrebbe avere un attributo `id` con il valore `energetic` e un attributo `name` con il valore `personality`. 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
|
||||
const checkboxes = [...$('input[type="checkbox"]')];
|
||||
assert(
|
||||
checkboxes.some(
|
||||
(checkbox) =>
|
||||
checkbox.id === 'energetic' &&
|
||||
checkbox.getAttribute('name') === 'personality'
|
||||
)
|
||||
);
|
||||
```
|
||||
|
||||
La nuova casella di spunta dovrebbe essere dopo la seconda. Sono nell'ordine sbagliato.
|
||||
|
||||
```js
|
||||
const checkboxes = [...$('input[type="checkbox"]')].map(
|
||||
(checkbox) => checkbox.id
|
||||
);
|
||||
assert(checkboxes.indexOf('lazy') < checkboxes.indexOf('energetic'));
|
||||
```
|
||||
|
||||
A destra della nuova casella di spunta, ci dovrebbe essere l'elemento `label` con il testo `Energetic`.
|
||||
|
||||
```js
|
||||
const nextElementSibling = $('input[type="checkbox"]')[2].nextElementSibling;
|
||||
assert(
|
||||
nextElementSibling.nodeName === 'LABEL' &&
|
||||
nextElementSibling.innerText.replace(/\s+/g, '').match(/^Energetic$/i)
|
||||
);
|
||||
```
|
||||
|
||||
Il nuovo `label` dovrebbe avere un attributo `for` con lo stesso valore dell'attributo `id` della nuova casella di spunta. Hai omesso il valore o hai un refuso.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('input[type="checkbox"]')[2].nextElementSibling.getAttribute('for') ===
|
||||
'energetic'
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
<h1>CatPhotoApp</h1>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
|
||||
<a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Cat Lists</h2>
|
||||
<h3>Things cats love:</h3>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
|
||||
<figcaption>Cats <em>love</em> lasagna.</figcaption>
|
||||
</figure>
|
||||
<h3>Top 3 things cats hate:</h3>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
|
||||
<figcaption>Cats <strong>hate</strong> other cats.</figcaption>
|
||||
</figure>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Cat Form</h2>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<fieldset>
|
||||
<legend>Is your cat an indoor or outdoor cat?</legend>
|
||||
<label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor"> Indoor</label>
|
||||
<label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend>What's your cat's personality?</legend>
|
||||
--fcc-editable-region--
|
||||
<input id="loving" type="checkbox" name="personality"> <label for="loving">Loving</label>
|
||||
<input id="lazy" type="checkbox" name="personality"> <label for="lazy">Lazy</label>
|
||||
--fcc-editable-region--
|
||||
</fieldset>
|
||||
<input type="text" name="catphotourl" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@@ -0,0 +1,107 @@
|
||||
---
|
||||
id: 5f05a1d8e233dff4a68508d8
|
||||
title: Step 46
|
||||
challengeType: 0
|
||||
dashedName: step-46
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Annida un altro pulsante di opzione con l'opzione `Outdoor` in un nuovo elemento `label`. Il nuovo pulsante di opzione dovrebbe essere posizionato dopo il primo. Inoltre, imposta `outdoor` come valore del suo attributo `id`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Hai bisogno di aggiungere un nuovo elemento `label` nel quale annidare il nuovo pulsante di opzione. Assicurati di avere entrambi i tag di apertura e chiusura.
|
||||
|
||||
```js
|
||||
assert(
|
||||
document.querySelectorAll('label').length === 2 &&
|
||||
code.match(/<\/label\>/g).length === 2
|
||||
);
|
||||
```
|
||||
|
||||
Il testo `Outdoor` dovrebbe essere posizionato direttamente a destra del nuovo pulsante di opzione. Assicurati che ci sia uno spazio tra l'elemento e il testo. Hai omesso il testo o hai un refuso.
|
||||
|
||||
```js
|
||||
const radioButtons = [...$('input')];
|
||||
assert(
|
||||
radioButtons.filter((btn) =>
|
||||
btn.nextSibling.nodeValue.replace(/\s+/g, ' ').match(/ Outdoor/i)
|
||||
).length
|
||||
);
|
||||
```
|
||||
|
||||
Il nuovo pulsante di opzione e l'etichetta associata devono trovarsi sotto al primo. Sono nell'ordine sbagliato.
|
||||
|
||||
```js
|
||||
const collection = [
|
||||
...document.querySelectorAll('input[type="radio"]')
|
||||
].map((node) => node.nextSibling.nodeValue.replace(/\s+/g, ''));
|
||||
assert(collection.indexOf('Indoor') < collection.indexOf('Outdoor'));
|
||||
```
|
||||
|
||||
Il nuovo pulsante di opzione dovrebbe avere un attributo `id`. 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($('input')[1].hasAttribute('id'));
|
||||
```
|
||||
|
||||
Il nuovo pulsante di opzione dovrebbe avere un attributo `id` con il valore `outdoor`. Hai omesso il valore o hai un refuso. Ricorda che i valori degli attributi devono essere circondati da virgolette.
|
||||
|
||||
```js
|
||||
assert($('input')[1].id.match(/^outdoor$/));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
<h1>CatPhotoApp</h1>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
|
||||
<a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Cat Lists</h2>
|
||||
<h3>Things cats love:</h3>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
|
||||
<figcaption>Cats <em>love</em> lasagna.</figcaption>
|
||||
</figure>
|
||||
<h3>Top 3 things cats hate:</h3>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
|
||||
<figcaption>Cats <strong>hate</strong> other cats.</figcaption>
|
||||
</figure>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Cat Form</h2>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
--fcc-editable-region--
|
||||
<label><input id="indoor" type="radio"> Indoor</label>
|
||||
--fcc-editable-region--
|
||||
<input type="text" name="catphotourl" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@@ -0,0 +1,98 @@
|
||||
---
|
||||
id: 5f07fb1579dc934717801375
|
||||
title: Step 32
|
||||
challengeType: 0
|
||||
dashedName: step-32
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
È ora di aggiungere una nuova sezione. Aggiungi un terzo elemento `section` sotto il secondo elemento `section`.
|
||||
|
||||
# --hints--
|
||||
|
||||
L'elemento `section` dovrebbe avere un tag di apertura. I tag di apertura hanno questa sintassi: `<nomeElemento>`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('section').length >= 3);
|
||||
```
|
||||
|
||||
Dovresti aggiungere un solo tag di apertura `section`. Rimuovi quelli di troppo.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('section').length === 3);
|
||||
```
|
||||
|
||||
L'elemento `section` dovrebbe avere un tag di chiusura. I tag di chiusura hanno un carattere `/` subito dopo il carattere `<`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/section>/g).length >= 3);
|
||||
```
|
||||
|
||||
Dovresti aggiungere un solo tag di chiusura `section`. Rimuovi quelli di troppo.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/section>/g).length === 3);
|
||||
```
|
||||
|
||||
Tutti gli elementi `section` dovrebbero essere compresi tra i tag di apertura e chiusura dell'elemento `main`.
|
||||
|
||||
```js
|
||||
const childrenOfMain = [...document.querySelector('main').children];
|
||||
const sectionElemsFound = childrenOfMain.filter((child) => {
|
||||
return child.nodeName === 'SECTION';
|
||||
});
|
||||
assert(sectionElemsFound.length === 3);
|
||||
```
|
||||
|
||||
L'ultimo elemento `section` non dovrebbe avere contenuti. Rimuovi qualsiasi elemento HTML o testo all'interno dell'elemento `section`.
|
||||
|
||||
```js
|
||||
assert($('main > section')[2].children.length === 0);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
<h1>CatPhotoApp</h1>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
|
||||
<a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
</section>
|
||||
--fcc-editable-region--
|
||||
<section>
|
||||
<h2>Cat Lists</h2>
|
||||
<h3>Things cats love:</h3>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
|
||||
<figcaption>Cats <em>love</em> lasagna.</figcaption>
|
||||
</figure>
|
||||
<h3>Top 3 things cats hate:</h3>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
|
||||
<figcaption>Cats <strong>hate</strong> other cats.</figcaption>
|
||||
</figure>
|
||||
</section>
|
||||
--fcc-editable-region--
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@@ -0,0 +1,105 @@
|
||||
---
|
||||
id: 5f0d48e7b435f13ab6550051
|
||||
title: Step 50
|
||||
challengeType: 0
|
||||
dashedName: step-50
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
L'elemento `legend` agisce come una didascalia per il contenuto dell'elemento `fieldset`. Fornisce agli utenti il contesto di ciò che dovrebbero inserire in quella parte del modulo.
|
||||
|
||||
Aggiungi un elemento `legend` con il testo `Is your cat an indoor or outdoor cat?` sopra entrambi i pulsanti di opzione.
|
||||
|
||||
# --hints--
|
||||
|
||||
L'elemento `legend` dovrebbe avere un tag di apertura. I tag di apertura hanno la seguente sintassi: `<nomeElemento>`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('legend'));
|
||||
```
|
||||
|
||||
L'elemento `legend` dovrebbe avere un tag di chiusura. I tag di chiusura hanno un carattere `/` subito dopo il carattere `<`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/legend\>/));
|
||||
```
|
||||
|
||||
L'elemento `legend` dovrebbe essere il primo elemento proprio al di sotto del tag di apertura dell'elemento `fieldset` e prima del tag di apertura dell'elemento `label`. Non è nella posizione corretta.
|
||||
|
||||
```js
|
||||
const fieldsetElem = document.querySelector('fieldset');
|
||||
const fieldsetElemChildren = fieldsetElem.children;
|
||||
assert(
|
||||
fieldsetElem.firstElementChild.nodeName === 'LEGEND' &&
|
||||
fieldsetElemChildren[1].nodeName === 'LABEL' &&
|
||||
fieldsetElemChildren[1].children[0].nodeName === 'INPUT' &&
|
||||
fieldsetElemChildren[1].children[0].id === 'indoor'
|
||||
);
|
||||
```
|
||||
|
||||
Il testo dell'elemento `legend` dovrebbe essere `Is your cat an indoor or outdoor cat?`. Hai omesso il testo, hai un refuso o non è tra i tag di apertura e chiusura dell'elemento `legend`.
|
||||
|
||||
```js
|
||||
const extraSpacesRemoved = document
|
||||
.querySelector('legend')
|
||||
.innerText.replace(/\s+/g, ' ');
|
||||
assert(extraSpacesRemoved.match(/Is your cat an indoor or outdoor cat\??$/i));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
<h1>CatPhotoApp</h1>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
|
||||
<a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Cat Lists</h2>
|
||||
<h3>Things cats love:</h3>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
|
||||
<figcaption>Cats <em>love</em> lasagna.</figcaption>
|
||||
</figure>
|
||||
<h3>Top 3 things cats hate:</h3>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
|
||||
<figcaption>Cats <strong>hate</strong> other cats.</figcaption>
|
||||
</figure>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Cat Form</h2>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
--fcc-editable-region--
|
||||
<fieldset>
|
||||
<label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor"> Indoor</label>
|
||||
<label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<input type="text" name="catphotourl" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@@ -0,0 +1,128 @@
|
||||
---
|
||||
id: 5f0d4ab1b435f13ab6550052
|
||||
title: Step 51
|
||||
challengeType: 0
|
||||
dashedName: step-51
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Adesso, stai per aggiungere alcuni nuovi elementi di modulo `input`, quindi aggiungi un altro elemento `fieldset` direttamente sotto l'attuale elemento `fieldset`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Il nuovo elemento `fieldset` dovrebbe avere un tag di apertura. I tag di apertura hanno questa sintassi: `<nomeElemento>`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('fieldset').length >= 2);
|
||||
```
|
||||
|
||||
Dovresti aggiungere solo un tag di apertura `fieldset`. Rimuovi quelli di troppo.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('fieldset').length === 2);
|
||||
```
|
||||
|
||||
Il nuovo elemento `fieldset` dovrebbe avere un tag di chiusura. I tag di chiusura hanno un carattere `/` subito dopo il carattere `<`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/fieldset>/g).length >= 2);
|
||||
```
|
||||
|
||||
Dovresti aggiungere solo un tag di chiusura `fieldset`. Rimuovi quelli di troppo.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/fieldset>/g).length === 2);
|
||||
```
|
||||
|
||||
Il secondo elemento `fieldset` non dovrebbe essere annidato nel primo elemento `fieldset`.
|
||||
|
||||
```js
|
||||
const childrenOf1stFieldset = [
|
||||
...document.querySelector('form > fieldset').children
|
||||
];
|
||||
const foundElems = childrenOf1stFieldset.filter((child) => {
|
||||
return child.nodeName === 'FIELDSET';
|
||||
});
|
||||
assert(foundElems.length === 0);
|
||||
```
|
||||
|
||||
Entrambi gli elementi `fieldset` dovrebbero essere al di sopra del campo di testo e del suo elemento `label` associato. Sono nell'ordine sbagliato.
|
||||
|
||||
```js
|
||||
const formChildren = $('form')[0].children;
|
||||
assert(
|
||||
formChildren[0].nodeName === 'FIELDSET' &&
|
||||
formChildren[1].nodeName === 'FIELDSET' &&
|
||||
formChildren[2] &&
|
||||
formChildren[2].nodeName === 'INPUT' &&
|
||||
formChildren[2].getAttribute('type') === 'text'
|
||||
);
|
||||
```
|
||||
|
||||
Il nuovo elemento `fieldset` dovrebbe essere al di sotto dell'elemento `fieldset` esistente. Sono nell'ordine sbagliato.
|
||||
|
||||
```js
|
||||
const fieldsetChildren = [...document.querySelectorAll('fieldset')].map(
|
||||
(elem) => elem.children
|
||||
);
|
||||
assert(fieldsetChildren[0].length > fieldsetChildren[1].length);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
<h1>CatPhotoApp</h1>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
|
||||
<a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Cat Lists</h2>
|
||||
<h3>Things cats love:</h3>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
|
||||
<figcaption>Cats <em>love</em> lasagna.</figcaption>
|
||||
</figure>
|
||||
<h3>Top 3 things cats hate:</h3>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
|
||||
<figcaption>Cats <strong>hate</strong> other cats.</figcaption>
|
||||
</figure>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Cat Form</h2>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
--fcc-editable-region--
|
||||
<fieldset>
|
||||
<legend>Is your cat an indoor or outdoor cat?</legend>
|
||||
<label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor"> Indoor</label>
|
||||
<label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label>
|
||||
</fieldset>
|
||||
<input type="text" name="catphotourl" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
--fcc-editable-region--
|
||||
</form>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@@ -0,0 +1,114 @@
|
||||
---
|
||||
id: 5f0d4d04b435f13ab6550053
|
||||
title: Step 52
|
||||
challengeType: 0
|
||||
dashedName: step-52
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Aggiungi un elemento `legend` con il testo `What's your cat's personality?` all'interno del secondo elemento `fieldset`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Hai eliminato il secondo elemento `fieldset` oppure manca un tag di apertura o di chiusura.
|
||||
|
||||
```js
|
||||
assert(
|
||||
document.querySelectorAll('fieldset').length === 2 &&
|
||||
code.match(/<\/fieldset>/g).length === 2
|
||||
);
|
||||
```
|
||||
|
||||
L'elemento `legend` dovrebbe avere un tag di apertura. I tag di apertura hanno questa sintassi: `<nomeElemento>`.
|
||||
|
||||
```js
|
||||
const secondFieldset = $('fieldset')[1];
|
||||
assert(
|
||||
secondFieldset &&
|
||||
[...secondFieldset.children].filter((child) => child.nodeName === 'LEGEND')
|
||||
.length
|
||||
);
|
||||
```
|
||||
|
||||
L'elemento `legend` dovrebbe avere un tag di chiusura. I tag di chiusura hanno un carattere`/` subito dopo il carattere `<`.
|
||||
|
||||
```js
|
||||
assert(code.match(/<\/legend\>/g).length === 2);
|
||||
```
|
||||
|
||||
L'elemento `legend` dovrebbe avere il testo `What's your cat's personality?`. Hai omesso il testo o hai un refuso.
|
||||
|
||||
```js
|
||||
const secondFieldset = $('fieldset')[1];
|
||||
assert(
|
||||
secondFieldset &&
|
||||
[...secondFieldset.children].filter((child) => {
|
||||
const extraSpacesRemoved = child.innerText.replace(/\s+/g, ' ');
|
||||
return (
|
||||
child.nodeName === 'LEGEND' &&
|
||||
extraSpacesRemoved.match(/What's your cat's personality\??$/i)
|
||||
);
|
||||
}).length
|
||||
);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
<h1>CatPhotoApp</h1>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
|
||||
<a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Cat Lists</h2>
|
||||
<h3>Things cats love:</h3>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
|
||||
<figcaption>Cats <em>love</em> lasagna.</figcaption>
|
||||
</figure>
|
||||
<h3>Top 3 things cats hate:</h3>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
|
||||
<figcaption>Cats <strong>hate</strong> other cats.</figcaption>
|
||||
</figure>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Cat Form</h2>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
<fieldset>
|
||||
<legend>Is your cat an indoor or outdoor cat?</legend>
|
||||
<label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor"> Indoor</label>
|
||||
<label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<fieldset>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<input type="text" name="catphotourl" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@@ -0,0 +1,101 @@
|
||||
---
|
||||
id: 5f1a80975fc4bcae0edb3497
|
||||
title: Step 48
|
||||
challengeType: 0
|
||||
dashedName: step-48
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Se selezioni il pulsante di opzione `Indoor` e invii il modulo, i dati del modulo per il pulsante si basano sugli attributi `name` e `value`. Dal momento che i pulsanti di opzione non hanno un attributo `value`, i dati del modulo includeranno `indoor-outdoor=on`, che non è utile quando hai più pulsanti.
|
||||
|
||||
Aggiungi un attributo `value` a entrambi i pulsanti di opzione. Per comodità, imposta l'attributo `value` del pulsante con lo stesso valore dell'attributo `id`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Entrambi i pulsanti di opzione dovrebbero essere ancora posizionati tra i tag di apertura e chiusura dell'elemento `label`.
|
||||
|
||||
```js
|
||||
const labelChildNodes = [...document.querySelectorAll('form > label')].map(
|
||||
(node) => node.childNodes
|
||||
);
|
||||
assert(
|
||||
labelChildNodes.filter((childNode) => childNode[0].nodeName === 'INPUT')
|
||||
.length === 2
|
||||
);
|
||||
```
|
||||
|
||||
Entrambi i pulsanti di opzione dovrebbero avere un attributo `value`. 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
|
||||
const radioButtons = [...document.querySelectorAll('input[type="radio"]')];
|
||||
assert(radioButtons.every((btn) => btn.hasAttribute('value')));
|
||||
```
|
||||
|
||||
L'attributo `value` del pulsante di opzione`Indoor` dovrebbe avere il valore `indoor`. Hai omesso il valore o hai un refuso. Ricorda che i valori degli attributi devono essere racchiusi tra virgolette.
|
||||
|
||||
```js
|
||||
const indoorRadioButton = document.querySelector('#indoor');
|
||||
assert(indoorRadioButton.getAttribute('value').match(/^indoor$/));
|
||||
```
|
||||
|
||||
L'attributo `value` del pulsante di opzione `Outdoor` dovrebbe avere il valore `outdoor`. Hai omesso il valore o hai un refuso. Ricorda che i valori degli attributi devono essere racchiusi tra virgolette.
|
||||
|
||||
```js
|
||||
const outdoorRadioButton = document.querySelector('#outdoor');
|
||||
assert(outdoorRadioButton.getAttribute('value').match(/^outdoor$/));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
<h1>CatPhotoApp</h1>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
|
||||
<a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
<section>
|
||||
<h2>Cat Lists</h2>
|
||||
<h3>Things cats love:</h3>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
|
||||
<figcaption>Cats <em>love</em> lasagna.</figcaption>
|
||||
</figure>
|
||||
<h3>Top 3 things cats hate:</h3>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
|
||||
<figcaption>Cats <strong>hate</strong> other cats.</figcaption>
|
||||
</figure>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Cat Form</h2>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
--fcc-editable-region--
|
||||
<label><input id="indoor" type="radio" name="indoor-outdoor"> Indoor</label>
|
||||
<label><input id="outdoor" type="radio" name="indoor-outdoor"> Outdoor</label>
|
||||
--fcc-editable-region--
|
||||
<input type="text" name="catphotourl" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@@ -0,0 +1,106 @@
|
||||
---
|
||||
id: 5f1a89f1190aff21ae42105a
|
||||
title: Step 59
|
||||
challengeType: 0
|
||||
dashedName: step-59
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Come per i pulsanti di opzione, i dati del modulo per le caselle di spunta selezionate sono coppie di attributi `name` / `value`. Anche se l'attributo `value` è opzionale, è buona pratica includerlo in qualsiasi casella di spunta o pulsante di opzione nella pagina.
|
||||
|
||||
Aggiungi un attributo `value` a ogni casella di spunta. Per comodità, imposta l'attributo `value` di ogni casella di spunta con lo stesso valore dell'attributo `id`.
|
||||
|
||||
# --hints--
|
||||
|
||||
Tutte e tre le caselle di spunta dovrebbero avere un attributo `value`. 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
|
||||
const checkboxes = [...document.querySelectorAll('input[type="checkbox"]')];
|
||||
assert(checkboxes.every((checkbox) => checkbox.hasAttribute('value')));
|
||||
```
|
||||
|
||||
L'attributo `value` della casella di spunta `Loving` dovrebbe avere valore `loving`. Hai omesso il valore o hai un refuso. Ricorda che i valori degli attributi devono essere racchiusi tra virgolette.
|
||||
|
||||
```js
|
||||
const lovingCheckbox = document.querySelector('#loving');
|
||||
assert(lovingCheckbox.getAttribute('value').match(/^loving$/));
|
||||
```
|
||||
|
||||
L'attributo `value` della casella di spunta `Lazy` dovrebbe avere valore `lazy`. Hai omesso il testo o hai un refuso. Ricorda che i valori degli attributi devono essere racchiusi tra virgolette.
|
||||
|
||||
```js
|
||||
const lazyCheckbox = document.querySelector('#lazy');
|
||||
assert(lazyCheckbox.getAttribute('value').match(/^lazy$/));
|
||||
```
|
||||
|
||||
L'attributo `value` della casella di spunta `Energetic` dovrebbe avere valore `energetic`. Hai omesso il valore o hai un refuso. Ricorda che i valori degli attributi devono essere racchiusi tra virgolette.
|
||||
|
||||
```js
|
||||
const energeticCheckbox = document.querySelector('#energetic');
|
||||
assert(energeticCheckbox.getAttribute('value').match(/^energetic$/));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
<h1>CatPhotoApp</h1>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
|
||||
<a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Cat Lists</h2>
|
||||
<h3>Things cats love:</h3>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
|
||||
<figcaption>Cats <em>love</em> lasagna.</figcaption>
|
||||
</figure>
|
||||
<h3>Top 3 things cats hate:</h3>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
|
||||
<figcaption>Cats <strong>hate</strong> other cats.</figcaption>
|
||||
</figure>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Cat Form</h2>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
--fcc-editable-region--
|
||||
<fieldset>
|
||||
<legend>Is your cat an indoor or outdoor cat?</legend>
|
||||
<label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor"> Indoor</label>
|
||||
<label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend>What's your cat's personality?</legend>
|
||||
<input id="loving" type="checkbox" name="personality"> <label for="loving">Loving</label>
|
||||
<input id="lazy" type="checkbox" name="personality"> <label for="lazy">Lazy</label>
|
||||
<input id="energetic" type="checkbox" name="personality"> <label for="energetic"> Energetic</label>
|
||||
</fieldset>
|
||||
--fcc-editable-region--
|
||||
<input type="text" name="catphotourl" placeholder="cat photo URL" required>
|
||||
<button type="submit">Submit</button>
|
||||
</form>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
@@ -0,0 +1,103 @@
|
||||
---
|
||||
id: 7cf9b03d81a65668421804c3
|
||||
title: Step 38
|
||||
challengeType: 0
|
||||
dashedName: step-38
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Per accedere ai dati di un modulo dalla posizione specificata nell'attributo `action`, devi dare al campo di testo un attributo `name` e assegnargli un valore per rappresentare i dati inviati. Per esempio, puoi utilizzare la seguente sintassi per un campo di testo per indirizzo email: `<input type="text" name="email">`.
|
||||
|
||||
Aggiungi l'attributo `name` con il valore `catphotourl` al tuo campo di testo.
|
||||
|
||||
# --hints--
|
||||
|
||||
Hai cancellato l'elemento `input` oppure ha una sintassi non valida. Tutti i valori degli attributi dovrebbero essere circondati da virgolette.
|
||||
|
||||
```js
|
||||
assert($('input').length);
|
||||
```
|
||||
|
||||
L'elemento `form` dovrebbe contenere solo l'elemento `input`. Rimuovi qualsiasi elemento HTML o testo aggiuntivo all'interno dell'elemento `form`.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('form')[0].children.length === 1 &&
|
||||
$('form')[0].innerText.trim().length === 0
|
||||
);
|
||||
```
|
||||
|
||||
L'elemento `input` non ha un attributo `name`. 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($('input')[0].hasAttribute('name'));
|
||||
```
|
||||
|
||||
L'elemento `input` dovrebbe avere un attributo `name` con il valore `catphotourl`. Hai omesso il valore o hai un refuso. Ricorda che i valori degli attributi devono essere circondati da virgolette.
|
||||
|
||||
```js
|
||||
assert(
|
||||
$('input')[0]
|
||||
.getAttribute('name')
|
||||
.match(/^catphotourl$/i)
|
||||
);
|
||||
```
|
||||
|
||||
Anche se hai impostato l'attributo `name` dell'elemento `input` su `catphotourl`, è sempre raccomandato inserire il valore di un attributo tra virgolette.
|
||||
|
||||
```js
|
||||
assert(!/\<\s*input\s+.*\s*=\s*catphotourl/.test(code));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
<h1>CatPhotoApp</h1>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
|
||||
<a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Cat Lists</h2>
|
||||
<h3>Things cats love:</h3>
|
||||
<ul>
|
||||
<li>cat nip</li>
|
||||
<li>laser pointers</li>
|
||||
<li>lasagna</li>
|
||||
</ul>
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
|
||||
<figcaption>Cats <em>love</em> lasagna.</figcaption>
|
||||
</figure>
|
||||
<h3>Top 3 things cats hate:</h3>
|
||||
<ol>
|
||||
<li>flea treatment</li>
|
||||
<li>thunder</li>
|
||||
<li>other cats</li>
|
||||
</ol>
|
||||
<figure>
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
|
||||
<figcaption>Cats <strong>hate</strong> other cats.</figcaption>
|
||||
</figure>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Cat Form</h2>
|
||||
<form action="https://freecatphotoapp.com/submit-cat-photo">
|
||||
--fcc-editable-region--
|
||||
<input type="text">
|
||||
--fcc-editable-region--
|
||||
</form>
|
||||
</section>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
Reference in New Issue
Block a user