curriculum/challenges/english/blocks/workshop-ferris-wheel/6140c9d35015ae0ba0c250e8.md
Add a div within your body element and give it a class of wheel.
Inside your new div, add six span elements with a class set to line, and six div elements with a class set to cabin.
You should create a new div within your body element.
const divs = [...document.querySelector('body')?.children].filter(child => child?.localName === 'div');
assert.lengthOf(divs, 1);
Your div within your body element should have a class of wheel.
assert.isTrue(document.querySelector('body div')?.classList?.contains('wheel'));
Your .wheel element should have six span elements within.
assert.lengthOf(document.querySelectorAll('.wheel span'), 6);
Your six span elements within the .wheel element should have a class of line.
const spans = [...document.querySelectorAll('.wheel span')];
assert.isTrue(spans?.every(span => span?.classList?.contains('line')));
assert.lengthOf(document.querySelectorAll('.line'), 6);
Your .wheel element should have six div elements within.
assert.lengthOf(document.querySelectorAll('.wheel div'), 6);
Your six div elements within the .wheel element should have a class of cabin.
const divs = [...document.querySelectorAll('.wheel div')];
assert.isTrue(divs?.every(div => div?.classList?.contains('cabin')));
assert.lengthOf(document.querySelectorAll('.cabin'), 6);
<!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>