freeCodeCamp/curriculum/challenges/italian/14-responsive-web-design-22/learn-html-by-building-a-ca.../5dfb5ecbeacea3f48c6300b1.md

---
id: 5dfb5ecbeacea3f48c6300b1
title: Step 21
challengeType: 0
dashedName: step-21
---

# --description--

Usa gli elementi list item (`li`) per creare punti in una lista. Ecco un esempio di elementi list item in una lista non ordinata:

```html
<ul>
  <li>milk</li>
  <li>cheese</li>
</ul>
```

Dentro l'elemento `ul` annida tre elementi `li` per mostrare tre cose che piacciono ai gatti:

`cat nip` `laser pointers` `lasagna`

# --hints--

Dovresti avere tre elementi `li`. Ogni elemento `li` dovrebbe avere il proprio tag di apertura e chiusura.

```js
assert($('li').length === 3 && code.match(/<\/li\>/g).length === 3);
```

Dovresti avere tre elementi `li` con il testo `cat nip`, `laser pointers` e `lasagna` in qualsiasi ordine. Hai omesso del testo o hai un refuso.

```js
assert.deepStrictEqual(
  [...document.querySelectorAll('li')]
    .map((item) => item.innerText.toLowerCase())
    .sort((a, b) => a.localeCompare(b)),
  ['cat nip', 'lasagna', 'laser pointers']
);
```

I tre elementi `li` dovrebbero essere tra i tag di apertura e chiusura dell'elemento `ul`.

```js
assert(
  [...document.querySelectorAll('li')].filter(
    (item) => item.parentNode.nodeName === 'UL'
  ).length === 3
);
```

# --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>
--fcc-editable-region--
        <ul>
        </ul>
--fcc-editable-region--
      </section>
    </main>
  </body>
</html>
```
chore(i18n,learn): processed translations (#45905) 2022-05-10 17:56:44 +00:00			`---`
			`id: 5dfb5ecbeacea3f48c6300b1`
chore(i18n,learn): processed translations (#47510) * chore(i18n,learn): processed translations * Update Ukrainian file to match state on crowdin Co-authored-by: Ilenia <nethleen@gmail.com> 2022-09-14 16:30:37 +00:00			`title: Step 21`
chore(i18n,learn): processed translations (#45905) 2022-05-10 17:56:44 +00:00			`challengeType: 0`
chore(i18n,learn): processed translations (#47510) * chore(i18n,learn): processed translations * Update Ukrainian file to match state on crowdin Co-authored-by: Ilenia <nethleen@gmail.com> 2022-09-14 16:30:37 +00:00			`dashedName: step-21`
chore(i18n,learn): processed translations (#45905) 2022-05-10 17:56:44 +00:00			`---`

			`# --description--`

			Usa gli elementi list item (`li`) per creare punti in una lista. Ecco un esempio di elementi list item in una lista non ordinata:

			```html
			`<ul>`
			`<li>milk</li>`
			`<li>cheese</li>`
			`</ul>`
			```

chore(i18n,learn): processed translations (#46682) 2022-06-27 13:55:35 +00:00			Dentro l'elemento `ul` annida tre elementi `li` per mostrare tre cose che piacciono ai gatti:

			`cat nip` `laser pointers` `lasagna`
chore(i18n,learn): processed translations (#45905) 2022-05-10 17:56:44 +00:00
			`# --hints--`

			Dovresti avere tre elementi `li`. Ogni elemento `li` dovrebbe avere il proprio tag di apertura e chiusura.

			```js
			`assert($('li').length === 3 && code.match(/<\/li\>/g).length === 3);`
			```

			Dovresti avere tre elementi `li` con il testo `cat nip`, `laser pointers` e `lasagna` in qualsiasi ordine. Hai omesso del testo o hai un refuso.

			```js
			`assert.deepStrictEqual(`
			`[...document.querySelectorAll('li')]`
			`.map((item) => item.innerText.toLowerCase())`
			`.sort((a, b) => a.localeCompare(b)),`
			`['cat nip', 'lasagna', 'laser pointers']`
			`);`
			```

			I tre elementi `li` dovrebbero essere tra i tag di apertura e chiusura dell'elemento `ul`.

			```js
			`assert(`
			`[...document.querySelectorAll('li')].filter(`
			`(item) => item.parentNode.nodeName === 'UL'`
			`).length === 3`
			`);`
			```

			`# --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>`
			`--fcc-editable-region--`
			`<ul>`
			`</ul>`
			`--fcc-editable-region--`
			`</section>`
			`</main>`
			`</body>`
			`</html>`
			```