From 229fa686cafa3b9dbf471315bc8baf69a7fe818c Mon Sep 17 00:00:00 2001 From: "Nicholas Carrigan (he/him)" Date: Tue, 9 Nov 2021 10:03:21 -0800 Subject: [PATCH] feat(curriculum): css ferris wheel (#43460) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: initial infra * feat: initial step breakdown * feat: expand instructions * feat: write tests! * chore: apply shaun's review suggestions Co-authored-by: Shaun Hamilton * chore: more tweaks * chore: ferris → Ferris * chore: apply shaun's review suggestions Co-authored-by: Shaun Hamilton * fix: no lang * chore: fix lint issues Co-authored-by: Oliver Eyton-Williams Co-authored-by: Shaun Hamilton Co-authored-by: Tom <20648924+moT01@users.noreply.github.com> Co-authored-by: Oliver Eyton-Williams --- client/i18n/locales/english/intro.json | 3 +- .../css-ferris-wheel/index.md | 10 + client/utils/help-category-map.json | 3 +- .../_meta/css-ferris-wheel/meta.json | 130 ++++++++ .../css-ferris-wheel/step-001.md | 178 +++++++++++ .../css-ferris-wheel/step-002.md | 79 +++++ .../css-ferris-wheel/step-003.md | 74 +++++ .../css-ferris-wheel/step-004.md | 72 +++++ .../css-ferris-wheel/step-005.md | 68 ++++ .../css-ferris-wheel/step-006.md | 85 +++++ .../css-ferris-wheel/step-007.md | 83 +++++ .../css-ferris-wheel/step-008.md | 77 +++++ .../css-ferris-wheel/step-009.md | 85 +++++ .../css-ferris-wheel/step-010.md | 126 ++++++++ .../css-ferris-wheel/step-011.md | 111 +++++++ .../css-ferris-wheel/step-012.md | 103 +++++++ .../css-ferris-wheel/step-013.md | 100 ++++++ .../css-ferris-wheel/step-014.md | 114 +++++++ .../css-ferris-wheel/step-015.md | 196 ++++++++++++ .../css-ferris-wheel/step-016.md | 137 +++++++++ .../css-ferris-wheel/step-017.md | 139 +++++++++ .../css-ferris-wheel/step-018.md | 131 ++++++++ .../css-ferris-wheel/step-019.md | 146 +++++++++ .../css-ferris-wheel/step-020.md | 142 +++++++++ .../css-ferris-wheel/step-021.md | 144 +++++++++ .../css-ferris-wheel/step-022.md | 191 ++++++++++++ .../css-ferris-wheel/step-023.md | 149 +++++++++ .../css-ferris-wheel/step-024.md | 151 +++++++++ .../css-ferris-wheel/step-025.md | 148 +++++++++ .../css-ferris-wheel/step-026.md | 291 ++++++++++++++++++ .../css-ferris-wheel/step-027.md | 154 +++++++++ .../css-ferris-wheel/step-028.md | 164 ++++++++++ .../css-ferris-wheel/step-029.md | 169 ++++++++++ utils/preformatted-block-names.json | 3 +- 34 files changed, 3953 insertions(+), 3 deletions(-) create mode 100644 client/src/pages/learn/responsive-web-design/css-ferris-wheel/index.md create mode 100644 curriculum/challenges/_meta/css-ferris-wheel/meta.json create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-001.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-002.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-003.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-004.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-005.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-006.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-007.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-008.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-009.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-010.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-011.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-012.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-013.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-014.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-015.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-016.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-017.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-018.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-019.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-020.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-021.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-022.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-023.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-024.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-025.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-026.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-027.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-028.md create mode 100644 curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-029.md diff --git a/client/i18n/locales/english/intro.json b/client/i18n/locales/english/intro.json index 60a85b4b6d..54c8daee06 100644 --- a/client/i18n/locales/english/intro.json +++ b/client/i18n/locales/english/intro.json @@ -101,7 +101,8 @@ "css-nutrition-label": { "title": "CSS Nutrition Label", "intro": ["", ""] - } + }, + "css-ferris-wheel": { "title": "CSS Ferris Wheel", "intro": ["", ""] } } }, "javascript-algorithms-and-data-structures": { diff --git a/client/src/pages/learn/responsive-web-design/css-ferris-wheel/index.md b/client/src/pages/learn/responsive-web-design/css-ferris-wheel/index.md new file mode 100644 index 0000000000..a53aa27d97 --- /dev/null +++ b/client/src/pages/learn/responsive-web-design/css-ferris-wheel/index.md @@ -0,0 +1,10 @@ +--- +title: Introduction to the CSS Ferris Wheel +block: css-ferris-wheel +superBlock: Responsive Web Design +isBeta: true +--- + +## Introduction to the CSS Ferris Wheel + +This is a test for the new project-based curriculum. diff --git a/client/utils/help-category-map.json b/client/utils/help-category-map.json index 1b64b7fece..c4affee5cf 100644 --- a/client/utils/help-category-map.json +++ b/client/utils/help-category-map.json @@ -81,5 +81,6 @@ "registration-form": "HTML-CSS", "css-photo-gallery": "HTML-CSS", "css-grid-magazine": "HTML-CSS", - "css-nutrition-label": "HTML-CSS" + "css-nutrition-label": "HTML-CSS", + "css-ferris-wheel": "HTML-CSS" } diff --git a/curriculum/challenges/_meta/css-ferris-wheel/meta.json b/curriculum/challenges/_meta/css-ferris-wheel/meta.json new file mode 100644 index 0000000000..b62a47afc5 --- /dev/null +++ b/curriculum/challenges/_meta/css-ferris-wheel/meta.json @@ -0,0 +1,130 @@ +{ + "name": "CSS Ferris Wheel", + "isUpcomingChange": true, + "dashedName": "css-ferris-wheel", + "order": 15, + "time": "5 hours", + "template": "", + "required": [], + "superBlock": "responsive-web-design", + "superOrder": 1, + "isBeta": true, + "challengeOrder": [ + [ + "6140c7e645d8e905819f1dd4", + "Step 1" + ], + [ + "6140c9d35015ae0ba0c250e8", + "Step 2" + ], + [ + "6140cbeec34e970dfe75e710", + "Step 3" + ], + [ + "6140cd32d018ed0f600eefce", + "Step 4" + ], + [ + "617ace7d831f9c16a569b38a", + "Step 5" + ], + [ + "6140cdebd39d6a101e747529", + "Step 6" + ], + [ + "6140cfc08ca9c5128c3e6478", + "Step 7" + ], + [ + "6140d0069049f5139d78da40", + "Step 8" + ], + [ + "6140d10d50636e14695013b2", + "Step 9" + ], + [ + "6140d1a351e88f159ed54fca", + "Step 10" + ], + [ + "6140d263016325162fd076fe", + "Step 11" + ], + [ + "6140d2b687a2cd17bac5730c", + "Step 12" + ], + [ + "6140d36b8b747718b50d4b7a", + "Step 13" + ], + [ + "6140d3dc359b371b1a21d783", + "Step 14" + ], + [ + "6140d4bc9db3c81c51a09ab7", + "Step 15" + ], + [ + "6140d94b5fab7f1d73c9bedb", + "Step 16" + ], + [ + "6140dc5e13d0c81e7496f182", + "Step 17" + ], + [ + "6140dd77e0bc5a1f70bd7466", + "Step 18" + ], + [ + "6140de31b1f5b420410728ff", + "Step 19" + ], + [ + "6140df547f09402144e40b92", + "Step 20" + ], + [ + "6140e0d875ec16262f26432b", + "Step 21" + ], + [ + "6140f4b5c1555a2960de1e5f", + "Step 22" + ], + [ + "614100d7d335bb2a5ff74f1f", + "Step 23" + ], + [ + "61410126fa3a6d2b3cda502e", + "Step 24" + ], + [ + "6141019eadec6d2c6c6f007b", + "Step 25" + ], + [ + "6141026ec9882f2d39dcf2b8", + "Step 26" + ], + [ + "6169ab1aaeb4cd1174def700", + "Step 27" + ], + [ + "6169b1357fcb701bb5efc619", + "Step 28" + ], + [ + "6169b284950e171d8d0bb16a", + "Step 29" + ] + ] +} \ No newline at end of file diff --git a/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-001.md b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-001.md new file mode 100644 index 0000000000..f5b2c74a36 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-001.md @@ -0,0 +1,178 @@ +--- +id: 6140c7e645d8e905819f1dd4 +title: Step 1 +challengeType: 0 +dashedName: step-1 +--- + +# --description-- + +Begin with the standard boilerplate. Add your `DOCTYPE` declaration, your `html` element, your `head` and `body` elements. + +Add your `meta` element for the correct `charset`, your `title` element, and a `link` element for the `./styles.css` file. + +Set the `title` to `CSS Ferris Wheel`. + +# --hints-- + +Your code should contain the `DOCTYPE` reference. + +```js +assert(code.match(/` after the type. + +```js +assert(code.match(//gi)); +``` + +Your `html` element should have an opening tag. + +```js +assert(code.match(//gi)); +``` + +Your `html` element should have a closing tag. + +```js +assert(code.match(/<\/html\s*>/)); +``` + +Your `html` element should be below the `DOCTYPE` declaration. + +```js +assert(code.match(/^\s*[\s\S]*<\s*html\s*>/gi)); +``` + +You should have an opening `head` tag. + +```js +assert(code.match(//i)); +``` + +You should have a closing `head` tag. + +```js +assert(code.match(/<\/head\s*>/i)); +``` + +You should have an opening `body` tag. + +```js +assert(code.match(//i)); +``` + +You should have a closing `body` tag. + +```js +assert(code.match(/<\/body\s*>/i)); +``` + +The `head` and `body` elements should be siblings. + +```js +assert(document.querySelector('head')?.nextElementSibling?.localName === 'body'); +``` + +The `head` element should be within the `html` element. + +```js +assert([...document.querySelector('html')?.children].some(x => x?.localName === 'head')); +``` + +The `body` element should be within the `html` element. + +```js +assert([...document.querySelector('html')?.children].some(x => x?.localName === 'body')); +``` + +Your code should have a `meta` element. + +```js +const meta = document.querySelector('meta'); +assert.exists(meta); +``` + +Your `meta` element should have a `charset` attribute with the value `UTF-8`. + +```js +assert.match(code, //i)); +``` + +Your `link` element should be within your `head` element. + +```js +assert(code.match(/[\w\W\s]*[\w\W\s]*<\/head>/i)) +``` + +Your `link` element should have a `rel` attribute with the value `stylesheet`. + +```js +assert.match(code, / child?.localName === 'div'); +assert(divs?.length === 1); +``` + +Your `div` within your `body` element should have a `class` of `wheel`. + +```js +assert(document.querySelector('body div')?.classList?.contains('wheel')); +``` + +Your `.wheel` element should have six `span` elements within. + +```js +assert(document.querySelectorAll('.wheel span')?.length === 6); +``` + +Your six `span` elements within the `.wheel` element should have a `class` of `line`. + +```js +const spans = [...document.querySelectorAll('.wheel span')]; +assert(spans?.every(span => span?.classList?.contains('line'))); +assert(document.querySelectorAll('.line')?.length === 6); +``` + +Your `.wheel` element should have six `div` elements within. + +```js +assert(document.querySelectorAll('.wheel div')?.length === 6); +``` + +Your six `div` elements within the `.wheel` element should have a `class` of `cabin`. + +```js +const divs = [...document.querySelectorAll('.wheel div')]; +assert(divs?.every(div => div?.classList?.contains('cabin'))); +assert(document.querySelectorAll('.cabin')?.length === 6); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + CSS Ferris Wheel + + +--fcc-editable-region-- + + + +--fcc-editable-region-- + +``` + +```css + +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-003.md b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-003.md new file mode 100644 index 0000000000..d34c9b8b02 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-003.md @@ -0,0 +1,74 @@ +--- +id: 6140cbeec34e970dfe75e710 +title: Step 3 +challengeType: 0 +dashedName: step-3 +--- + +# --description-- + +Create a selector for your `.wheel` element. Start by setting the `border` to `2px solid black`, the `border-radius` to `50%`, and the `margin-left` to `50px`. + +# --hints-- + +You should have a `.wheel` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.wheel')); +``` + +Your `.wheel` selector should have a `border` property set to `2px solid black`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.border === '2px solid black'); +``` + +Your `.wheel` selector should have a `border-radius` property set to `50%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.borderRadius === '50%'); +``` + +Your `.wheel` selector should have a `margin-left` property set to `50px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.marginLeft === '50px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Learn CSS Animations by Building a Ferris Wheel + + + +
+ + + + + + + +
+
+
+
+
+
+
+ + +``` + +```css +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-004.md b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-004.md new file mode 100644 index 0000000000..c4f6e78781 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-004.md @@ -0,0 +1,72 @@ +--- +id: 6140cd32d018ed0f600eefce +title: Step 4 +challengeType: 0 +dashedName: step-4 +--- + +# --description-- + +Set the `position` property of the `.wheel` selector to `absolute`. Set the `height` and `width` both to `55vw`. + +# --hints-- + +Your `.wheel` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.position === 'absolute'); +``` + +Your `.wheel` selector should have a `height` property set to `55vw`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.height === '55vw'); +``` + +Your `.wheel` selector should have a `width` property set to `55vw`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.width === '55vw'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Learn CSS Animations by Building a Ferris Wheel + + + +
+ + + + + + + +
+
+
+
+
+
+
+ + +``` + +```css +--fcc-editable-region-- +.wheel { + border: 2px solid black; + border-radius: 50%; + margin-left: 50px; +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-005.md b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-005.md new file mode 100644 index 0000000000..d706fde28c --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-005.md @@ -0,0 +1,68 @@ +--- +id: 617ace7d831f9c16a569b38a +title: Step 5 +challengeType: 0 +dashedName: step-5 +--- + +# --description-- + +Give your `.wheel` selector a `max-height` and `max-width` property both set to `500px`. + +# --hints-- + +Your `.wheel` selector should have a `max-height` property set to `500px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.maxHeight === '500px'); +``` + +Your `.wheel` selector should have a `max-width` property set to `500px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.maxWidth === '500px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Learn CSS Animations by Building a Ferris Wheel + + + +
+ + + + + + + +
+
+
+
+
+
+
+ + +``` + +```css +--fcc-editable-region-- +.wheel { + border: 2px solid black; + border-radius: 50%; + margin-left: 50px; + height: 55vw; + width: 55vw; +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-006.md b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-006.md new file mode 100644 index 0000000000..cdb1da75ef --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-006.md @@ -0,0 +1,85 @@ +--- +id: 6140cdebd39d6a101e747529 +title: Step 6 +challengeType: 0 +dashedName: step-6 +--- + +# --description-- + +Create a selector for your `.line` elements. Start by setting the `background-color` to `black`, the `width` to `50%`, and the `height` to `2px`. + +# --hints-- + +You should have a `.line` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.line')); +``` + +Your `.line` selector should have a `background-color` property set to `black`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.line')?.backgroundColor === "black"); +``` + +Your `.line` selector should have a `width` property set to `50%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.line')?.width === "50%"); +``` + +Your `.line` selector should have a `height` property set to `2px`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.line')?.height === "2px"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Learn CSS Animations by Building a Ferris Wheel + + + +
+ + + + + + + +
+
+
+
+
+
+
+ + +``` + +```css +.wheel { + border: 2px solid black; + border-radius: 50%; + margin-left: 50px; + position: absolute; + height: 55vw; + width: 55vw; + max-width: 500px; + max-height: 500px; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-007.md b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-007.md new file mode 100644 index 0000000000..7dbd5c5e7a --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-007.md @@ -0,0 +1,83 @@ +--- +id: 6140cfc08ca9c5128c3e6478 +title: Step 7 +challengeType: 0 +dashedName: step-7 +--- + +# --description-- + +Set the `.line` selector's `position` property to `absolute`, the `left` property to `50%`, and the `top` property to `50%`. + +# --hints-- + +Your `.line` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.line')?.position === 'absolute'); +``` + +Your `.line` selector should have a `left` property set to `50%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.line')?.left === '50%'); +``` + +Your `.line` selector should have a `top` property set to `50%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.line')?.top === '50%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Learn CSS Animations by Building a Ferris Wheel + + + +
+ + + + + + + +
+
+
+
+
+
+
+ + +``` + +```css +.wheel { + border: 2px solid black; + border-radius: 50%; + margin-left: 50px; + position: absolute; + height: 55vw; + width: 55vw; + max-width: 500px; + max-height: 500px; +} + +--fcc-editable-region-- +.line { + background-color: black; + width: 50%; + height: 2px; +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-008.md b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-008.md new file mode 100644 index 0000000000..d389fa62c7 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-008.md @@ -0,0 +1,77 @@ +--- +id: 6140d0069049f5139d78da40 +title: Step 8 +challengeType: 0 +dashedName: step-8 +--- + +# --description-- + +The `transform-origin` property is used to set the point around which a CSS transformation is applied. For example, when performing a `rotate` (which you will do later in this project), the `transform-origin` determines around which point the element is rotated. + +Give the `.line` selector a `transform-origin` property of `0% 0%`. This will offset the origin point by `0%` from the left and `0%` from the top, setting it to the top left corner of the element. + +# --hints-- + +Your `.line` selector should have a `transform-origin` property set to `0% 0%`. + +```js +const transformOrigin = new __helpers.CSSHelp(document).getStyle('.line')?.transformOrigin; +assert(transformOrigin === '0% 0%' || transformOrigin === '0% 0% 0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Learn CSS Animations by Building a Ferris Wheel + + + +
+ + + + + + + +
+
+
+
+
+
+
+ + +``` + +```css +.wheel { + border: 2px solid black; + border-radius: 50%; + margin-left: 50px; + position: absolute; + height: 55vw; + width: 55vw; + max-width: 500px; + max-height: 500px; +} + +--fcc-editable-region-- +.line { + background-color: black; + width: 50%; + height: 2px; + position: absolute; + top: 50%; + left: 50%; +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-009.md b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-009.md new file mode 100644 index 0000000000..c84f05fcdc --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-009.md @@ -0,0 +1,85 @@ +--- +id: 6140d10d50636e14695013b2 +title: Step 9 +challengeType: 0 +dashedName: step-9 +--- + +# --description-- + +Create a selector to target your second `.line` element. Set the `transform` property to `rotate(60deg)`. + +Remember that the `transform` property allows you to manipulate the shape of an element. In this case, using the `rotate(60deg)` value will rotate the element around its `transform-origin` point by 60 degrees clockwise. + +# --hints-- + +You should create a `.line:nth-of-type(2)` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(2)')); +``` + +Your `.line:nth-of-type(2)` selector should have a `transform` property set to `rotate(60deg)`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(2)')?.transform === 'rotate(60deg)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Learn CSS Animations by Building a Ferris Wheel + + + +
+ + + + + + + +
+
+
+
+
+
+
+ + +``` + +```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%; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-010.md b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-010.md new file mode 100644 index 0000000000..2a37438fea --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-010.md @@ -0,0 +1,126 @@ +--- +id: 6140d1a351e88f159ed54fca +title: Step 10 +challengeType: 0 +dashedName: 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. + +```js +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)`. + +```js +assert(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(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(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(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(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(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(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(6)')?.transform === 'rotate(300deg)'); +``` + + +# --seed-- + +## --seed-contents-- + +```html + + + + + Learn CSS Animations by Building a Ferris Wheel + + + +
+ + + + + + + +
+
+
+
+
+
+
+ + +``` + +```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-- +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-011.md b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-011.md new file mode 100644 index 0000000000..8cad6e9670 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-011.md @@ -0,0 +1,111 @@ +--- +id: 6140d263016325162fd076fe +title: Step 11 +challengeType: 0 +dashedName: step-11 +--- + +# --description-- + +Create a `.cabin` selector. Set the `background-color` to `red`, the `width` to `20%`, and the `height` to `20%`. + +# --hints-- + +You should have a `.cabin` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cabin')); +``` + +Your `.cabin` selector should have a `background-color` property set to `red`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cabin')?.backgroundColor === 'red'); +``` + +Your `.cabin` selector should have a `width` property set to `20%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cabin')?.width === '20%'); +``` + +Your `.cabin` selector should have a `height` property set to `20%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cabin')?.height === '20%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Learn CSS Animations by Building a Ferris Wheel + + + +
+ + + + + + + +
+
+
+
+
+
+
+ + +``` + +```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); +} +.line:nth-of-type(3) { + transform: rotate(120deg); +} +.line:nth-of-type(4) { + transform: rotate(180deg); +} +.line:nth-of-type(5) { + transform: rotate(240deg); +} +.line:nth-of-type(6) { + transform: rotate(300deg); +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-012.md b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-012.md new file mode 100644 index 0000000000..8d5432fff7 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-012.md @@ -0,0 +1,103 @@ +--- +id: 6140d2b687a2cd17bac5730c +title: Step 12 +challengeType: 0 +dashedName: step-12 +--- + +# --description-- + +Give the `.cabin` a `position` of `absolute`, and a `border` of `2px solid`. + +# --hints-- + +Your `.cabin` selector should have a `position` property set to `absolute`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cabin')?.position === 'absolute'); +``` + +Your `.cabin` selector should have a `border` property set to `2px solid`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cabin')?.border === '2px solid'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Learn CSS Animations by Building a Ferris Wheel + + + +
+ + + + + + + +
+
+
+
+
+
+
+ + +``` + +```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); +} +.line:nth-of-type(3) { + transform: rotate(120deg); +} +.line:nth-of-type(4) { + transform: rotate(180deg); +} +.line:nth-of-type(5) { + transform: rotate(240deg); +} +.line:nth-of-type(6) { + transform: rotate(300deg); +} + +--fcc-editable-region-- +.cabin { + background-color: red; + width: 20%; + height: 20%; +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-013.md b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-013.md new file mode 100644 index 0000000000..77029595c0 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-013.md @@ -0,0 +1,100 @@ +--- +id: 6140d36b8b747718b50d4b7a +title: Step 13 +challengeType: 0 +dashedName: step-13 +--- + +# --description-- + +Set the `.cabin` to have a `transform-origin` property of `50% 0%`. This will set the origin point to be offset `50%` from the left and `0%` from the top, placing it in the middle of the top edge of the element. + +# --hints-- + +Your `.cabin` selector should have a `transform-origin` property set to `50% 0%`. + +```js +const transformOrigin = new __helpers.CSSHelp(document).getStyle('.cabin')?.transformOrigin; +assert(transformOrigin === '50% 0%' || transformOrigin === '50% 0% 0px'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Learn CSS Animations by Building a Ferris Wheel + + + +
+ + + + + + + +
+
+
+
+
+
+
+ + +``` + +```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); +} +.line:nth-of-type(3) { + transform: rotate(120deg); +} +.line:nth-of-type(4) { + transform: rotate(180deg); +} +.line:nth-of-type(5) { + transform: rotate(240deg); +} +.line:nth-of-type(6) { + transform: rotate(300deg); +} + +--fcc-editable-region-- +.cabin { + background-color: red; + width: 20%; + height: 20%; + position: absolute; + border: 2px solid; +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-014.md b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-014.md new file mode 100644 index 0000000000..84c37cc07a --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-014.md @@ -0,0 +1,114 @@ +--- +id: 6140d3dc359b371b1a21d783 +title: Step 14 +challengeType: 0 +dashedName: step-14 +--- + +# --description-- + +Time to position the cabins around the wheel. Select the first `.cabin` element. Set the `right` property to `-8.5%` and the `top` property to `50%`. + +# --hints-- + +You should have a `.cabin:nth-of-type(1)` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(1)')); +``` + +Your `.cabin:nth-of-type(1)` selector should have a `right` property set to `-8.5%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(1)')?.right === '-8.5%'); +``` + +Your `.cabin:nth-of-type(1)` selector should have a `top` property set to `50%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(1)')?.top === '50%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Learn CSS Animations by Building a Ferris Wheel + + + +
+ + + + + + + +
+
+
+
+
+
+
+ + +``` + +```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); +} +.line:nth-of-type(3) { + transform: rotate(120deg); +} +.line:nth-of-type(4) { + transform: rotate(180deg); +} +.line:nth-of-type(5) { + transform: rotate(240deg); +} +.line:nth-of-type(6) { + transform: rotate(300deg); +} + +.cabin { + background-color: red; + width: 20%; + height: 20%; + position: absolute; + border: 2px solid; + transform-origin: 50% 0%; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-015.md b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-015.md new file mode 100644 index 0000000000..1b323fa79a --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-015.md @@ -0,0 +1,196 @@ +--- +id: 6140d4bc9db3c81c51a09ab7 +title: Step 15 +challengeType: 0 +dashedName: step-15 +--- + +# --description-- + +Continuing the pattern, select the following `.cabin` elements and apply the specific rules to them: + +- The second `.cabin` should have the `right` property set to `17%` and the `top` property set to `93.5%`. +- The third `.cabin` should have the `right` property set to `67%` and the `top` property set to `93.5%`. +- The fourth `.cabin` should have the `left` property set to `-8.5%` and the `top` property set to `50%`. +- The fifth `.cabin` should have the `left` property set to `17%` and the `top` property set to `7%`. +- The sixth `.cabin` should have the `right` property set to `17%` and the `top` property set to `7%`. + +# --hints-- + +You should have a `.cabin:nth-of-type(2)` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(2)')); +``` + +Your `.cabin:nth-of-type(2)` selector should have a `right` property set to `17%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(2)')?.right === '17%'); +``` + +Your `.cabin:nth-of-type(2)` selector should have a `top` property set to `93.5%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(2)')?.top === '93.5%'); +``` + +You should have a `.cabin:nth-of-type(3)` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(3)')); +``` + +Your `.cabin:nth-of-type(3)` selector should have a `right` property set to `67%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(3)')?.right === '67%'); +``` + +Your `.cabin:nth-of-type(3)` selector should have a `top` property set to `93.5%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(3)')?.top === '93.5%'); +``` + +You should have a `.cabin:nth-of-type(4)` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(4)')); +``` + +Your `.cabin:nth-of-type(4)` selector should have a `left` property set to `-8.5%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(4)')?.left === '-8.5%'); +``` + +Your `.cabin:nth-of-type(4)` selector should have a `top` property set to `50%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(4)')?.top === '50%'); +``` + +You should have a `.cabin:nth-of-type(5)` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(5)')); +``` + +Your `.cabin:nth-of-type(5)` selector should have a `left` property set to `17%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(5)')?.left === '17%'); +``` + +Your `.cabin:nth-of-type(5)` selector should have a `top` property set to `7%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(5)')?.top === '7%'); +``` + +You should have a `.cabin:nth-of-type(6)` selector. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(6)')); +``` + +Your `.cabin:nth-of-type(6)` selector should have a `right` property set to `17%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(6)')?.right === '17%'); +``` + +Your `.cabin:nth-of-type(6)` selector should have a `top` property set to `7%`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(6)')?.top === '7%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Learn CSS Animations by Building a Ferris Wheel + + + +
+ + + + + + + +
+
+
+
+
+
+
+ + +``` + +```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); +} +.line:nth-of-type(3) { + transform: rotate(120deg); +} +.line:nth-of-type(4) { + transform: rotate(180deg); +} +.line:nth-of-type(5) { + transform: rotate(240deg); +} +.line:nth-of-type(6) { + transform: rotate(300deg); +} + +.cabin { + background-color: red; + width: 20%; + height: 20%; + position: absolute; + border: 2px solid; + transform-origin: 50% 0%; +} + +.cabin:nth-of-type(1) { + right: -8.5%; + top: 50%; +} +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-016.md b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-016.md new file mode 100644 index 0000000000..0146daa3c5 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-016.md @@ -0,0 +1,137 @@ +--- +id: 6140d94b5fab7f1d73c9bedb +title: Step 16 +challengeType: 0 +dashedName: step-16 +--- + +# --description-- + +The `@keyframes` at-rule is used to define the flow of a CSS animation. Within the `@keyframes` rule, you can create selectors for specific points in the animation sequence, such as `0%` or `25%`, or use `from` and `to` to define the start and end of the sequence. + +`@keyframes` rules require a name to be assigned to them, which you use in other rules to reference. For example, the `@keyframes freeCodeCamp { }` rule would be named `freeCodeCamp`. + +Time to start animating. Create a `@keyframes` rule named `wheel`. + +# --hints-- + +You should have a `@keyframes` rule. + +```js +assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.length === 1); +``` + +Your new `@keyframes` rule should be named `wheel`. + +```js +assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[0]?.name === 'wheel'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Learn CSS Animations by Building a Ferris Wheel + + + +
+ + + + + + + +
+
+
+
+
+
+
+ + +``` + +```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); +} +.line:nth-of-type(3) { + transform: rotate(120deg); +} +.line:nth-of-type(4) { + transform: rotate(180deg); +} +.line:nth-of-type(5) { + transform: rotate(240deg); +} +.line:nth-of-type(6) { + transform: rotate(300deg); +} + +.cabin { + background-color: red; + width: 20%; + height: 20%; + position: absolute; + border: 2px solid; + transform-origin: 50% 0%; +} + +.cabin:nth-of-type(1) { + right: -8.5%; + top: 50%; +} +.cabin:nth-of-type(2) { + right: 17%; + top: 93.5%; +} +.cabin:nth-of-type(3) { + right: 67%; + top: 93.5%; +} +.cabin:nth-of-type(4) { + left: -8.5%; + top: 50%; +} +.cabin:nth-of-type(5) { + left: 17%; + top: 7%; +} +.cabin:nth-of-type(6) { + right: 17%; + top: 7%; +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-017.md b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-017.md new file mode 100644 index 0000000000..777aa7a95d --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-017.md @@ -0,0 +1,139 @@ +--- +id: 6140dc5e13d0c81e7496f182 +title: Step 17 +challengeType: 0 +dashedName: step-17 +--- + +# --description-- + +You now need to define how your animation should start. To do this, create a `0%` rule within your `@keyframes wheel` rule. The properties you set in this nested selector will apply at the beginning of your animation. + +As an example, this would be a `12%` rule: + +```css +@keyframes freecodecamp { + 12% { + color: green; + } +} +``` + +# --hints-- + +Your `@keyframes wheel` rule should have a `0%` selector. + +```js +assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[0]?.cssRules?.[0]?.keyText === '0%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Learn CSS Animations by Building a Ferris Wheel + + + +
+ + + + + + + +
+
+
+
+
+
+
+ + +``` + +```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); +} +.line:nth-of-type(3) { + transform: rotate(120deg); +} +.line:nth-of-type(4) { + transform: rotate(180deg); +} +.line:nth-of-type(5) { + transform: rotate(240deg); +} +.line:nth-of-type(6) { + transform: rotate(300deg); +} + +.cabin { + background-color: red; + width: 20%; + height: 20%; + position: absolute; + border: 2px solid; + transform-origin: 50% 0%; +} + +.cabin:nth-of-type(1) { + right: -8.5%; + top: 50%; +} +.cabin:nth-of-type(2) { + right: 17%; + top: 93.5%; +} +.cabin:nth-of-type(3) { + right: 67%; + top: 93.5%; +} +.cabin:nth-of-type(4) { + left: -8.5%; + top: 50%; +} +.cabin:nth-of-type(5) { + left: 17%; + top: 7%; +} +.cabin:nth-of-type(6) { + right: 17%; + top: 7%; +} + +--fcc-editable-region-- +@keyframes wheel { + +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-018.md b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-018.md new file mode 100644 index 0000000000..517e11c407 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-018.md @@ -0,0 +1,131 @@ +--- +id: 6140dd77e0bc5a1f70bd7466 +title: Step 18 +challengeType: 0 +dashedName: step-18 +--- + +# --description-- + +Give the `0%` rule a `transform` property set to `rotate(0deg)`. This will start the animation with no rotation. + +# --hints-- + +Your `0%` selector should have a `transform` property set to `rotate(0deg)`. + +```js +assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[0]?.cssRules?.[0]?.style?.transform === 'rotate(0deg)'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Learn CSS Animations by Building a Ferris Wheel + + + +
+ + + + + + + +
+
+
+
+
+
+
+ + +``` + +```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); +} +.line:nth-of-type(3) { + transform: rotate(120deg); +} +.line:nth-of-type(4) { + transform: rotate(180deg); +} +.line:nth-of-type(5) { + transform: rotate(240deg); +} +.line:nth-of-type(6) { + transform: rotate(300deg); +} + +.cabin { + background-color: red; + width: 20%; + height: 20%; + position: absolute; + border: 2px solid; + transform-origin: 50% 0%; +} + +.cabin:nth-of-type(1) { + right: -8.5%; + top: 50%; +} +.cabin:nth-of-type(2) { + right: 17%; + top: 93.5%; +} +.cabin:nth-of-type(3) { + right: 67%; + top: 93.5%; +} +.cabin:nth-of-type(4) { + left: -8.5%; + top: 50%; +} +.cabin:nth-of-type(5) { + left: 17%; + top: 7%; +} +.cabin:nth-of-type(6) { + right: 17%; + top: 7%; +} + +--fcc-editable-region-- +@keyframes wheel { + 0% { + + } +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-019.md b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-019.md new file mode 100644 index 0000000000..27baf32c8b --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-019.md @@ -0,0 +1,146 @@ +--- +id: 6140de31b1f5b420410728ff +title: Step 19 +challengeType: 0 +dashedName: step-19 +--- + +# --description-- + +Now give the `@keyframes wheel` rule a `100%` selector. Within that, set the `transform` to `rotate(360deg)`. By doing this, your animation will now complete a full rotation. + +# --hints-- + +Your `@keyframes wheel` rule should have a `100%` selector. + +```js +const rules = new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[0]?.cssRules +assert(rules?.[0]?.keyText === '100%' || rules?.[1]?.keyText === '100%'); +``` + +Your `100%` selector should come after your `0%` selector. + +```js +assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[0]?.cssRules?.[1]?.keyText === '100%') +``` + +Your `100%` selector should have a `transform` property set to `rotate(360deg)`. + +```js +assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[0]?.cssRules?.[1]?.style?.transform === 'rotate(360deg)') +``` + + +# --seed-- + +## --seed-contents-- + +```html + + + + + Learn CSS Animations by Building a Ferris Wheel + + + +
+ + + + + + + +
+
+
+
+
+
+
+ + +``` + +```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); +} +.line:nth-of-type(3) { + transform: rotate(120deg); +} +.line:nth-of-type(4) { + transform: rotate(180deg); +} +.line:nth-of-type(5) { + transform: rotate(240deg); +} +.line:nth-of-type(6) { + transform: rotate(300deg); +} + +.cabin { + background-color: red; + width: 20%; + height: 20%; + position: absolute; + border: 2px solid; + transform-origin: 50% 0%; +} + +.cabin:nth-of-type(1) { + right: -8.5%; + top: 50%; +} +.cabin:nth-of-type(2) { + right: 17%; + top: 93.5%; +} +.cabin:nth-of-type(3) { + right: 67%; + top: 93.5%; +} +.cabin:nth-of-type(4) { + left: -8.5%; + top: 50%; +} +.cabin:nth-of-type(5) { + left: 17%; + top: 7%; +} +.cabin:nth-of-type(6) { + right: 17%; + top: 7%; +} + +--fcc-editable-region-- +@keyframes wheel { + 0% { + transform: rotate(0deg); + } + +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-020.md b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-020.md new file mode 100644 index 0000000000..e415eca8c4 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-020.md @@ -0,0 +1,142 @@ +--- +id: 6140df547f09402144e40b92 +title: Step 20 +challengeType: 0 +dashedName: step-20 +--- + +# --description-- + +The `animation-name` property is used to link a `@keyframes` rule to a CSS selector. The value of this property should match the name of the `@keyframes` rule. Give your `.wheel` selector an `animation-name` property set to `wheel`. + +The `animation-duration` property is used to set how long the animation should sequence to complete. The time should be specified in either seconds (`s`) or milliseconds (`ms`). Set your `.wheel` selector to have an `animation-duration` property of `10s`. + +# --hints-- + +Your `.wheel` selector should have an `animation-name` property set to `wheel`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.animationName === 'wheel'); +``` + +Your `.wheel` selector should have an `animation-duration` property set to `10s`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.animationDuration === '10s'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Learn CSS Animations by Building a Ferris Wheel + + + +
+ + + + + + + +
+
+
+
+
+
+
+ + +``` + +```css +--fcc-editable-region-- +.wheel { + border: 2px solid black; + border-radius: 50%; + margin-left: 50px; + position: absolute; + height: 55vw; + width: 55vw; + max-width: 500px; + max-height: 500px; +} +--fcc-editable-region-- + +.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); +} +.line:nth-of-type(3) { + transform: rotate(120deg); +} +.line:nth-of-type(4) { + transform: rotate(180deg); +} +.line:nth-of-type(5) { + transform: rotate(240deg); +} +.line:nth-of-type(6) { + transform: rotate(300deg); +} + +.cabin { + background-color: red; + width: 20%; + height: 20%; + position: absolute; + border: 2px solid; + transform-origin: 50% 0%; +} + +.cabin:nth-of-type(1) { + right: -8.5%; + top: 50%; +} +.cabin:nth-of-type(2) { + right: 17%; + top: 93.5%; +} +.cabin:nth-of-type(3) { + right: 67%; + top: 93.5%; +} +.cabin:nth-of-type(4) { + left: -8.5%; + top: 50%; +} +.cabin:nth-of-type(5) { + left: 17%; + top: 7%; +} +.cabin:nth-of-type(6) { + right: 17%; + top: 7%; +} + +@keyframes wheel { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-021.md b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-021.md new file mode 100644 index 0000000000..6cc3705a6a --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-021.md @@ -0,0 +1,144 @@ +--- +id: 6140e0d875ec16262f26432b +title: Step 21 +challengeType: 0 +dashedName: step-21 +--- + +# --description-- + +The `animation-iteration-count` property sets how many times your animation should repeat. This can be set to a number, or to `infinite` to indefinitely repeat the animation. Your Ferris wheel should never stop, so set the `.wheel` selector to have an `animation-iteration-count` of `infinite`. + +The `animation-timing-function` property sets how the animation should progress over time. There are a few different values for this property, but you want the Ferris wheel animation to run at the same rate from start to finish. Set the `animation-timing-function` to `linear` in your `.wheel` selector. + +# --hints-- + +Your `.wheel` selector should have an `animation-iteration-count` property set to `infinite`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.animationIterationCount === 'infinite'); +``` + +Your `.wheel` selector should have an `animation-timing-function` property set to `linear`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.animationTimingFunction === 'linear'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Learn CSS Animations by Building a Ferris Wheel + + + +
+ + + + + + + +
+
+
+
+
+
+
+ + +``` + +```css +--fcc-editable-region-- +.wheel { + border: 2px solid black; + border-radius: 50%; + margin-left: 50px; + position: absolute; + height: 55vw; + width: 55vw; + max-width: 500px; + max-height: 500px; + animation-name: wheel; + animation-duration: 10s; +} +--fcc-editable-region-- + +.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); +} +.line:nth-of-type(3) { + transform: rotate(120deg); +} +.line:nth-of-type(4) { + transform: rotate(180deg); +} +.line:nth-of-type(5) { + transform: rotate(240deg); +} +.line:nth-of-type(6) { + transform: rotate(300deg); +} + +.cabin { + background-color: red; + width: 20%; + height: 20%; + position: absolute; + border: 2px solid; + transform-origin: 50% 0%; +} + +.cabin:nth-of-type(1) { + right: -8.5%; + top: 50%; +} +.cabin:nth-of-type(2) { + right: 17%; + top: 93.5%; +} +.cabin:nth-of-type(3) { + right: 67%; + top: 93.5%; +} +.cabin:nth-of-type(4) { + left: -8.5%; + top: 50%; +} +.cabin:nth-of-type(5) { + left: 17%; + top: 7%; +} +.cabin:nth-of-type(6) { + right: 17%; + top: 7%; +} + +@keyframes wheel { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-022.md b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-022.md new file mode 100644 index 0000000000..a9c198c5e0 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-022.md @@ -0,0 +1,191 @@ +--- +id: 6140f4b5c1555a2960de1e5f +title: Step 22 +challengeType: 0 +dashedName: step-22 +--- + +# --description-- + +Create another `@keyframes` rule with the name `cabins`. Use the same properties as your `@keyframes wheel`, copying both the `0%` and `100%` rules, but set the `transform` property of the `100%` selector to `rotate(-360deg)`. + +# --hints-- + +You should have a `@keyframes` rule. + +```js +assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.length === 2); +``` + +Your new `@keyframes` rule should be named `cabins`. + +```js +const rules = new __helpers.CSSHelp(document).getCSSRules('keyframes'); +assert(rules?.[0]?.name === 'cabins' || rules?.[1]?.name === 'cabins'); +``` + +Your new `@keyframes` rule should come after your `@keyframes wheel` rule. + +```js +assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.name === 'cabins'); +``` + +You should not change the name of your `@keyframes wheel` rule. + +```js +assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[0]?.name === 'wheel'); +``` + +Your `@keyframes cabins` rule should have a `0%` selector. + +```js +assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[0]?.keyText === '0%'); +``` + +Your `0%` selector should have a `transform` property set to `rotate(0deg)`. + +```js +assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[0]?.style?.transform === 'rotate(0deg)'); +``` + +Your `@keyframes cabins` rule should have a `100%` selector. + +```js +const rules = new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules +assert(rules?.[0]?.keyText === '100%' || rules?.[1]?.keyText === '100%'); +``` + +Your `100%` selector should come after your `0%` selector. + +```js +assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[1]?.keyText === '100%') +``` + +Your `100%` selector should have a `transform` property set to `rotate(-360deg)`. + +```js +assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[1]?.style?.transform === 'rotate(-360deg)') +``` + + +# --seed-- + +## --seed-contents-- + +```html + + + + + Learn CSS Animations by Building a Ferris Wheel + + + +
+ + + + + + + +
+
+
+
+
+
+
+ + +``` + +```css +.wheel { + border: 2px solid black; + border-radius: 50%; + margin-left: 50px; + position: absolute; + height: 55vw; + width: 55vw; + max-width: 500px; + max-height: 500px; + animation-name: wheel; + animation-duration: 10s; + animation-iteration-count: infinite; + animation-timing-function: linear; +} + +.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); +} +.line:nth-of-type(3) { + transform: rotate(120deg); +} +.line:nth-of-type(4) { + transform: rotate(180deg); +} +.line:nth-of-type(5) { + transform: rotate(240deg); +} +.line:nth-of-type(6) { + transform: rotate(300deg); +} + +.cabin { + background-color: red; + width: 20%; + height: 20%; + position: absolute; + border: 2px solid; + transform-origin: 50% 0%; +} + +.cabin:nth-of-type(1) { + right: -8.5%; + top: 50%; +} +.cabin:nth-of-type(2) { + right: 17%; + top: 93.5%; +} +.cabin:nth-of-type(3) { + right: 67%; + top: 93.5%; +} +.cabin:nth-of-type(4) { + left: -8.5%; + top: 50%; +} +.cabin:nth-of-type(5) { + left: 17%; + top: 7%; +} +.cabin:nth-of-type(6) { + right: 17%; + top: 7%; +} + +@keyframes wheel { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} + +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-023.md b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-023.md new file mode 100644 index 0000000000..f1f6c9cebf --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-023.md @@ -0,0 +1,149 @@ +--- +id: 614100d7d335bb2a5ff74f1f +title: Step 23 +challengeType: 0 +dashedName: step-23 +--- + +# --description-- + +With your `.wheel` selector, you created four different properties to control the animation. For your `.cabin` selector, you can use the `animation` property to set these all at once. + +Set the `animation` property of the `.cabin` rule to `cabins 10s linear infinite`. This will set the `animation-name`, `animation-duration`, `animation-timing-function`, and `animation-iteration-count` properties in that order. + +# --hints-- + +Your `.cabin` selector should have an `animation` property set to `cabins 10s linear infinite`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cabin')?.animation === '10s linear 0s infinite normal none running cabins'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Learn CSS Animations by Building a Ferris Wheel + + + +
+ + + + + + + +
+
+
+
+
+
+
+ + +``` + +```css +.wheel { + border: 2px solid black; + border-radius: 50%; + margin-left: 50px; + position: absolute; + height: 55vw; + width: 55vw; + max-width: 500px; + max-height: 500px; + animation-name: wheel; + animation-duration: 10s; + animation-iteration-count: infinite; + animation-timing-function: linear; +} + +.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); +} +.line:nth-of-type(3) { + transform: rotate(120deg); +} +.line:nth-of-type(4) { + transform: rotate(180deg); +} +.line:nth-of-type(5) { + transform: rotate(240deg); +} +.line:nth-of-type(6) { + transform: rotate(300deg); +} + +--fcc-editable-region-- +.cabin { + background-color: red; + width: 20%; + height: 20%; + position: absolute; + border: 2px solid; + transform-origin: 50% 0%; +} +--fcc-editable-region-- + +.cabin:nth-of-type(1) { + right: -8.5%; + top: 50%; +} +.cabin:nth-of-type(2) { + right: 17%; + top: 93.5%; +} +.cabin:nth-of-type(3) { + right: 67%; + top: 93.5%; +} +.cabin:nth-of-type(4) { + left: -8.5%; + top: 50%; +} +.cabin:nth-of-type(5) { + left: 17%; + top: 7%; +} +.cabin:nth-of-type(6) { + right: 17%; + top: 7%; +} + +@keyframes wheel { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} + +@keyframes cabins { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(-360deg); + } +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-024.md b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-024.md new file mode 100644 index 0000000000..7d03c3c947 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-024.md @@ -0,0 +1,151 @@ +--- +id: 61410126fa3a6d2b3cda502e +title: Step 24 +challengeType: 0 +dashedName: step-24 +--- + +# --description-- + +To make your cabin animation seem more like a natural swinging motion, you can use the `ease-in-out` timing function. This setting will tell the animation to start and end at a slower pace, but move more quickly in the middle of the cycle. + +Replace `linear` to `ease-in-out` in the `.cabin` selector. + +# --hints-- + +Your `.cabin` selector should have an `animation` property set to `cabins 10s ease-in-out infinite`. + +```js +assert(new __helpers.CSSHelp(document).getStyle('.cabin')?.animation === '10s ease-in-out 0s infinite normal none running cabins'); +``` + + +# --seed-- + +## --seed-contents-- + +```html + + + + + Learn CSS Animations by Building a Ferris Wheel + + + +
+ + + + + + + +
+
+
+
+
+
+
+ + +``` + +```css +.wheel { + border: 2px solid black; + border-radius: 50%; + margin-left: 50px; + position: absolute; + height: 55vw; + width: 55vw; + max-width: 500px; + max-height: 500px; + animation-name: wheel; + animation-duration: 10s; + animation-iteration-count: infinite; + animation-timing-function: linear; +} + +.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); +} +.line:nth-of-type(3) { + transform: rotate(120deg); +} +.line:nth-of-type(4) { + transform: rotate(180deg); +} +.line:nth-of-type(5) { + transform: rotate(240deg); +} +.line:nth-of-type(6) { + transform: rotate(300deg); +} + +--fcc-editable-region-- +.cabin { + background-color: red; + width: 20%; + height: 20%; + position: absolute; + border: 2px solid; + transform-origin: 50% 0%; + animation: cabins 10s linear infinite; +} +--fcc-editable-region-- + +.cabin:nth-of-type(1) { + right: -8.5%; + top: 50%; +} +.cabin:nth-of-type(2) { + right: 17%; + top: 93.5%; +} +.cabin:nth-of-type(3) { + right: 67%; + top: 93.5%; +} +.cabin:nth-of-type(4) { + left: -8.5%; + top: 50%; +} +.cabin:nth-of-type(5) { + left: 17%; + top: 7%; +} +.cabin:nth-of-type(6) { + right: 17%; + top: 7%; +} + +@keyframes wheel { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} + +@keyframes cabins { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(-360deg); + } +} +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-025.md b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-025.md new file mode 100644 index 0000000000..10c0ef0710 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-025.md @@ -0,0 +1,148 @@ +--- +id: 6141019eadec6d2c6c6f007b +title: Step 25 +challengeType: 0 +dashedName: step-25 +--- + +# --description-- + +You can use `@keyframes` rules to control more than just the transformation of an element. In the `0%` selector of your `@keyframes cabins`, set the `background-color` to `yellow`. + +# --hints-- + +Your `0%` selector should have a `background-color` property set to `yellow`. + +```js +assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[0]?.style?.backgroundColor === 'yellow'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Learn CSS Animations by Building a Ferris Wheel + + + +
+ + + + + + + +
+
+
+
+
+
+
+ + +``` + +```css +.wheel { + border: 2px solid black; + border-radius: 50%; + margin-left: 50px; + position: absolute; + height: 55vw; + width: 55vw; + max-width: 500px; + max-height: 500px; + animation-name: wheel; + animation-duration: 10s; + animation-iteration-count: infinite; + animation-timing-function: linear; +} + +.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); +} +.line:nth-of-type(3) { + transform: rotate(120deg); +} +.line:nth-of-type(4) { + transform: rotate(180deg); +} +.line:nth-of-type(5) { + transform: rotate(240deg); +} +.line:nth-of-type(6) { + transform: rotate(300deg); +} + +.cabin { + background-color: red; + width: 20%; + height: 20%; + position: absolute; + border: 2px solid; + transform-origin: 50% 0%; + animation: cabins 10s ease-in-out infinite; +} + +.cabin:nth-of-type(1) { + right: -8.5%; + top: 50%; +} +.cabin:nth-of-type(2) { + right: 17%; + top: 93.5%; +} +.cabin:nth-of-type(3) { + right: 67%; + top: 93.5%; +} +.cabin:nth-of-type(4) { + left: -8.5%; + top: 50%; +} +.cabin:nth-of-type(5) { + left: 17%; + top: 7%; +} +.cabin:nth-of-type(6) { + right: 17%; + top: 7%; +} + +@keyframes wheel { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} + +--fcc-editable-region-- +@keyframes cabins { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(-360deg); + } +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-026.md b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-026.md new file mode 100644 index 0000000000..5487ae229a --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-026.md @@ -0,0 +1,291 @@ +--- +id: 6141026ec9882f2d39dcf2b8 +title: Step 26 +challengeType: 0 +dashedName: step-26 +--- + +# --description-- + +Between the `0%` and `100%` selectors, add a `50%` selector. This will apply in the middle of the animation cycle. Set the `background-color` to `purple`. + +# --hints-- + +You should create a new `50%` selector in your `@keyframes cabins` rule. + +```js +const rules = new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules; +assert(rules?.[0]?.keyText === '50%' || rules?.[1]?.keyText === '50%' || rules?.[2]?.keyText === '50%'); +``` + +Your `50%` selector should be between your `0%` and `100%` selectors. + +```js +assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[1]?.keyText === '50%'); +``` + +Your `50%` selector should have a `background-color` property set to `purple`. + +```js +assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[1]?.style?.backgroundColor === 'purple'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Learn CSS Animations by Building a Ferris Wheel + + + +
+ + + + + + + +
+
+
+
+
+
+
+ + +``` + +```css +.wheel { + border: 2px solid black; + border-radius: 50%; + margin-left: 50px; + position: absolute; + height: 55vw; + width: 55vw; + max-width: 500px; + max-height: 500px; + animation-name: wheel; + animation-duration: 10s; + animation-iteration-count: infinite; + animation-timing-function: linear; +} + +.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); +} +.line:nth-of-type(3) { + transform: rotate(120deg); +} +.line:nth-of-type(4) { + transform: rotate(180deg); +} +.line:nth-of-type(5) { + transform: rotate(240deg); +} +.line:nth-of-type(6) { + transform: rotate(300deg); +} + +.cabin { + background-color: red; + width: 20%; + height: 20%; + position: absolute; + border: 2px solid; + transform-origin: 50% 0%; + animation: cabins 10s ease-in-out infinite; +} + +.cabin:nth-of-type(1) { + right: -8.5%; + top: 50%; +} +.cabin:nth-of-type(2) { + right: 17%; + top: 93.5%; +} +.cabin:nth-of-type(3) { + right: 67%; + top: 93.5%; +} +.cabin:nth-of-type(4) { + left: -8.5%; + top: 50%; +} +.cabin:nth-of-type(5) { + left: 17%; + top: 7%; +} +.cabin:nth-of-type(6) { + right: 17%; + top: 7%; +} + +@keyframes wheel { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} + +--fcc-editable-region-- +@keyframes cabins { + 0% { + transform: rotate(0deg); + background-color: yellow; + } + 100% { + transform: rotate(-360deg); + } +} +--fcc-editable-region-- +``` + +## --solutions-- + +```html + + + + + Learn CSS Animations by Building a Ferris Wheel + + + +
+ + + + + + + +
+
+
+
+
+
+
+ + +``` + +```css +.wheel { + border: 2px solid black; + border-radius: 50%; + margin-left: 50px; + position: absolute; + height: 55vw; + width: 55vw; + animation-name: wheel; + animation-duration: 10s; + animation-iteration-count: infinite; + animation-timing-function: linear; +} + +.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); +} +.line:nth-of-type(3) { + transform: rotate(120deg); +} +.line:nth-of-type(4) { + transform: rotate(180deg); +} +.line:nth-of-type(5) { + transform: rotate(240deg); +} +.line:nth-of-type(6) { + transform: rotate(300deg); +} + +.cabin { + background-color: red; + width: 20%; + height: 20%; + position: absolute; + border: 2px solid; + transform-origin: 50% 0%; + animation: cabins 10s ease-in-out infinite; +} + +.cabin:nth-of-type(1) { + right: -8.5%; + top: 50%; +} +.cabin:nth-of-type(2) { + right: 17%; + top: 93.5%; +} +.cabin:nth-of-type(3) { + right: 67%; + top: 93.5%; +} +.cabin:nth-of-type(4) { + left: -8.5%; + top: 50%; +} +.cabin:nth-of-type(5) { + left: 17%; + top: 7%; +} +.cabin:nth-of-type(6) { + right: 17%; + top: 7%; +} + +@keyframes wheel { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} + +@keyframes cabins { + 0% { + transform: rotate(0deg); + background-color: yellow; + } + 50% { + background-color: purple; + } + 100% { + transform: rotate(-360deg); + } +} +``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-027.md b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-027.md new file mode 100644 index 0000000000..cd388e2de6 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-027.md @@ -0,0 +1,154 @@ +--- +id: 6169ab1aaeb4cd1174def700 +title: Step 27 +challengeType: 0 +dashedName: step-27 +--- + +# --description-- + +Because the animation is on an infinite loop and the start and end colors are not the same, the transition appears jerky when it switches back to yellow from red. + +To start fixing this, remove the `background-color` from your `0%` selector. + +# --hints-- + +Your `0%` selector should not have a `background-color` property. + +```js +assert(!new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[0]?.style?.backgroundColor); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Learn CSS Animations by Building a Ferris Wheel + + + +
+ + + + + + + +
+
+
+
+
+
+
+ + +``` + +```css +.wheel { + border: 2px solid black; + border-radius: 50%; + margin-left: 50px; + position: absolute; + height: 55vw; + width: 55vw; + max-width: 500px; + max-height: 500px; + animation-name: wheel; + animation-duration: 10s; + animation-iteration-count: infinite; + animation-timing-function: linear; +} + +.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); +} +.line:nth-of-type(3) { + transform: rotate(120deg); +} +.line:nth-of-type(4) { + transform: rotate(180deg); +} +.line:nth-of-type(5) { + transform: rotate(240deg); +} +.line:nth-of-type(6) { + transform: rotate(300deg); +} + +.cabin { + background-color: red; + width: 20%; + height: 20%; + position: absolute; + border: 2px solid; + transform-origin: 50% 0%; + animation: cabins 10s ease-in-out infinite; +} + +.cabin:nth-of-type(1) { + right: -8.5%; + top: 50%; +} +.cabin:nth-of-type(2) { + right: 17%; + top: 93.5%; +} +.cabin:nth-of-type(3) { + right: 67%; + top: 93.5%; +} +.cabin:nth-of-type(4) { + left: -8.5%; + top: 50%; +} +.cabin:nth-of-type(5) { + left: 17%; + top: 7%; +} +.cabin:nth-of-type(6) { + right: 17%; + top: 7%; +} + +@keyframes wheel { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} + +--fcc-editable-region-- +@keyframes cabins { + 0% { + transform: rotate(0deg); + background-color: yellow; + } + 50% { + background-color: purple; + } + 100% { + transform: rotate(-360deg); + } +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-028.md b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-028.md new file mode 100644 index 0000000000..8e014b6822 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-028.md @@ -0,0 +1,164 @@ +--- +id: 6169b1357fcb701bb5efc619 +title: Step 28 +challengeType: 0 +dashedName: step-28 +--- + +# --description-- + +Create a new `25%` selector between your `0%` and `50%` selectors. Give this new selector the `background-color` property set to `yellow`. + +# --hints-- + +You should create a new `25%` selector in your `@keyframes cabins` rule. + +```js +const rules = new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules; +assert(rules?.[0]?.keyText === '25%' || rules?.[1]?.keyText === '25%' || rules?.[2]?.keyText === '25%' || rules?.[3]?.keyText === '25%'); +``` + +Your `25%` selector should be between your `0%` and `50%` selectors. + +```js +assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[1]?.keyText === '25%'); +``` + +Your `25%` selector should have a `background-color` property set to `yellow`. + +```js +assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[1]?.style?.backgroundColor === 'yellow'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Learn CSS Animations by Building a Ferris Wheel + + + +
+ + + + + + + +
+
+
+
+
+
+
+ + +``` + +```css +.wheel { + border: 2px solid black; + border-radius: 50%; + margin-left: 50px; + position: absolute; + height: 55vw; + width: 55vw; + max-width: 500px; + max-height: 500px; + animation-name: wheel; + animation-duration: 10s; + animation-iteration-count: infinite; + animation-timing-function: linear; +} + +.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); +} +.line:nth-of-type(3) { + transform: rotate(120deg); +} +.line:nth-of-type(4) { + transform: rotate(180deg); +} +.line:nth-of-type(5) { + transform: rotate(240deg); +} +.line:nth-of-type(6) { + transform: rotate(300deg); +} + +.cabin { + background-color: red; + width: 20%; + height: 20%; + position: absolute; + border: 2px solid; + transform-origin: 50% 0%; + animation: cabins 10s ease-in-out infinite; +} + +.cabin:nth-of-type(1) { + right: -8.5%; + top: 50%; +} +.cabin:nth-of-type(2) { + right: 17%; + top: 93.5%; +} +.cabin:nth-of-type(3) { + right: 67%; + top: 93.5%; +} +.cabin:nth-of-type(4) { + left: -8.5%; + top: 50%; +} +.cabin:nth-of-type(5) { + left: 17%; + top: 7%; +} +.cabin:nth-of-type(6) { + right: 17%; + top: 7%; +} + +@keyframes wheel { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} + +--fcc-editable-region-- +@keyframes cabins { + 0% { + transform: rotate(0deg); + } + 50% { + background-color: purple; + } + 100% { + transform: rotate(-360deg); + } +} +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-029.md b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-029.md new file mode 100644 index 0000000000..c92ad27e87 --- /dev/null +++ b/curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-029.md @@ -0,0 +1,169 @@ +--- +id: 6169b284950e171d8d0bb16a +title: Step 29 +challengeType: 0 +dashedName: step-29 +--- + +# --description-- + +Finally, create a new `75%` selector between your `50%` and `100%` selectors. Give this new selector a `background-color` property set to `yellow.` + +With that, your animation is much smoother and your Ferris wheel is complete. + +# --hints-- + +You should create a new `75%` selector in your `@keyframes cabins` rule. + +```js +const rules = new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules; +assert(rules?.[0]?.keyText === '75%' || rules?.[1]?.keyText === '75%' || rules?.[2]?.keyText === '75%' || rules?.[3]?.keyText === '75%' || rules?.[4]?.keyText === '75%'); +``` + +Your `75%` selector should be between your `50%` and `100%` selectors. + +```js +assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[3]?.keyText === '75%'); +``` + +Your `75%` selector should have a `background-color` property set to `yellow`. + +```js +assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[3]?.style?.backgroundColor === 'yellow'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + Learn CSS Animations by Building a Ferris Wheel + + + +
+ + + + + + + +
+
+
+
+
+
+
+ + +``` + +```css +.wheel { + border: 2px solid black; + border-radius: 50%; + margin-left: 50px; + position: absolute; + height: 55vw; + width: 55vw; + max-width: 500px; + max-height: 500px; + animation-name: wheel; + animation-duration: 10s; + animation-iteration-count: infinite; + animation-timing-function: linear; +} + +.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); +} +.line:nth-of-type(3) { + transform: rotate(120deg); +} +.line:nth-of-type(4) { + transform: rotate(180deg); +} +.line:nth-of-type(5) { + transform: rotate(240deg); +} +.line:nth-of-type(6) { + transform: rotate(300deg); +} + +.cabin { + background-color: red; + width: 20%; + height: 20%; + position: absolute; + border: 2px solid; + transform-origin: 50% 0%; + animation: cabins 10s ease-in-out infinite; +} + +.cabin:nth-of-type(1) { + right: -8.5%; + top: 50%; +} +.cabin:nth-of-type(2) { + right: 17%; + top: 93.5%; +} +.cabin:nth-of-type(3) { + right: 67%; + top: 93.5%; +} +.cabin:nth-of-type(4) { + left: -8.5%; + top: 50%; +} +.cabin:nth-of-type(5) { + left: 17%; + top: 7%; +} +.cabin:nth-of-type(6) { + right: 17%; + top: 7%; +} + +@keyframes wheel { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } +} + +--fcc-editable-region-- +@keyframes cabins { + 0% { + transform: rotate(0deg); + } + 25% { + background-color: yellow; + } + 50% { + background-color: purple; + } + 100% { + transform: rotate(-360deg); + } +} +--fcc-editable-region-- +``` diff --git a/utils/preformatted-block-names.json b/utils/preformatted-block-names.json index ab1014d7aa..eb7d9ded55 100644 --- a/utils/preformatted-block-names.json +++ b/utils/preformatted-block-names.json @@ -30,5 +30,6 @@ "registration-form": "Registration Form", "css-photo-gallery": "CSS Photo Gallery", "css-grid-magazine": "CSS Grid Magazine", - "css-nutrition-label": "CSS Nutrition Label" + "css-nutrition-label": "CSS Nutrition Label", + "css-ferris-wheel": "CSS Ferris Wheel" }