freeCodeCamp/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-flexbox-by-buildi.../61537c9eecea6a335db6da79.md

1.4 KiB

id title challengeType dashedName
61537c9eecea6a335db6da79 Step 5 0 step-5

--description--

Al di sotto dell'elemento .header, crea un nuovo elemento div con un attributo class del valore di gallery. Questo div fungerà da contenitore per le immagini della galleria.

In quest'elemento .gallery, crea nove elementi img.

--hints--

Dovresti creare un secondo elemento div nell'elemento body.

assert(document.querySelector('body')?.querySelectorAll('div')?.length >= 1);

Il nuovo elemento div dovrebbe avere un attributo class con il valore gallery.

assert(document.querySelector('body')?.querySelector('.gallery'));

Il nuovo elemento div dovrebbe trovarsi dopo l'elemento .header.

assert(document.querySelector('header')?.nextElementSibling?.classList?.contains('gallery'));

L'elemento .gallery dovrebbe contenere nove elementi img.

assert(document.querySelector('.gallery')?.querySelectorAll('img')?.length === 9);

--seed--

--seed-contents--

--fcc-editable-region--
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Photo Gallery</title>
    <link rel="stylesheet" href="./styles.css">
  </head>
  <body>
    <header class="header">
      <h1>css flexbox photo gallery</h1>
    </header>
  </body>
</html>
--fcc-editable-region--