freeCodeCamp/curriculum/challenges/italian/14-responsive-web-design-22/learn-css-animation-by-buil.../6140c9d35015ae0ba0c250e8.md

1.9 KiB

id title challengeType dashedName
6140c9d35015ae0ba0c250e8 Step 2 0 step-2

--description--

Aggiungi un div all'interno dell'elemento body e dagli un attributo class di wheel.

All'interno del nuovo div, aggiungi sei elementi span con un attributo class di line e sei elementi div con un valore class di cabin.

--hints--

Dovresti creare un nuovo div all'interno dell'elemento body.

const divs = [...document.querySelector('body')?.children].filter(child => child?.localName === 'div');
assert(divs?.length === 1);

L'elemento div dentro l'elemento body dovrebbe avere un attributo class con il valore wheel.

assert(document.querySelector('body div')?.classList?.contains('wheel'));

L'elemento .wheel dovrebbe avere sei elementi span al suo interno.

assert(document.querySelectorAll('.wheel span')?.length === 6);

I sei elementi span dentro .wheel dovrebbero avere un attributo class con il valore line.

const spans = [...document.querySelectorAll('.wheel span')];
assert(spans?.every(span => span?.classList?.contains('line')));
assert(document.querySelectorAll('.line')?.length === 6);

L'elemento .wheel dovrebbe avere sei elementi div al suo interno.

assert(document.querySelectorAll('.wheel div')?.length === 6);

I sei elementi div all'interno dell'elemento .wheel dovrebbero avere un attributo class con il valore cabin.

const divs = [...document.querySelectorAll('.wheel div')];
assert(divs?.every(div => div?.classList?.contains('cabin')));
assert(document.querySelectorAll('.cabin')?.length === 6);

--seed--

--seed-contents--

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Ferris Wheel</title>
    <link rel="stylesheet" href="./styles.css" />
  </head>
--fcc-editable-region--
  <body>

  </body>
--fcc-editable-region--
</html>