Files

Nicholas Carrigan (he/him) 06651d7043 chore: rename ferris wheel (#44213 )

* chore: rename files

* chore: update codebase

* chore: proper title case

2021-11-19 21:38:19 -06:00

2.9 KiB

Raw Blame History

id, title, challengeType, dashedName

id	title	challengeType	dashedName
6140d1a351e88f159ed54fca	Step 10	0	step-10

--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.

assert(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).

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

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

assert(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).

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

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

assert(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).

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

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

assert(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).

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

--seed--

--seed-contents--

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title> Learn CSS Animations by Building a 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>

.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--

2.9 KiB Raw Blame History

--description--

--hints--

--seed--

--seed-contents--

2.9 KiB

Raw Blame History