ContextQMD
Back to Freecodecamp

Step 10

curriculum/challenges/english/blocks/workshop-ferris-wheel/6140d1a351e88f159ed54fca.md

latest2.8 KB
Original Source

--description--

Using the same pattern, create a separate selector for the third .line, the fourth .line, the fifth .line, and the sixth .line.

Set the transform property for the third .line to rotate(120deg), the fourth to rotate(180deg), the fifth to rotate(240deg), and the sixth to rotate(300deg).

--hints--

You should create a .line:nth-of-type(3) selector.

js
assert.exists(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(3)'));

Your .line:nth-of-type(3) selector should have a transform property set to rotate(120deg).

js
assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(3)')?.transform, 'rotate(120deg)');

You should create a .line:nth-of-type(4) selector.

js
assert.exists(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(4)'));

Your .line:nth-of-type(4) selector should have a transform property set to rotate(180deg).

js
assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(4)')?.transform, 'rotate(180deg)');

You should create a .line:nth-of-type(5) selector.

js
assert.exists(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(5)'));

Your .line:nth-of-type(5) selector should have a transform property set to rotate(240deg).

js
assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(5)')?.transform, 'rotate(240deg)');

You should create a .line:nth-of-type(6) selector.

js
assert.exists(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(6)'));

Your .line:nth-of-type(6) selector should have a transform property set to rotate(300deg).

js
assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(6)')?.transform, 'rotate(300deg)');

--seed--

--seed-contents--

html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Ferris Wheel</title>
    <link rel="stylesheet" href="./styles.css">
  </head>
  <body>
    <div class="wheel">
      <span class="line"></span>
      <span class="line"></span>
      <span class="line"></span>
      <span class="line"></span>
      <span class="line"></span>
      <span class="line"></span>

      <div class="cabin"></div>
      <div class="cabin"></div>
      <div class="cabin"></div>
      <div class="cabin"></div>
      <div class="cabin"></div>
      <div class="cabin"></div>
    </div>
  </body>
</html>
css
.wheel {
  border: 2px solid black;
  border-radius: 50%;
  margin-left: 50px;
  position: absolute;
  height: 55vw;
  width: 55vw;
  max-width: 500px;
  max-height: 500px;
}

.line {
  background-color: black;
  width: 50%;
  height: 2px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: 0% 0%;
}

.line:nth-of-type(2) {
  transform: rotate(60deg);
}

--fcc-editable-region--

--fcc-editable-region--