From 3c097ec6850de0793a3a2ae34cdf5e68d3aaafe7 Mon Sep 17 00:00:00 2001 From: Ilenia <26656284+ilenia-magoni@users.noreply.github.com> Date: Wed, 13 Nov 2024 19:33:04 +0100 Subject: [PATCH] chore(curriculum): add ferris wheel workshop to cert (#56742) Co-authored-by: Sem Bauke Co-authored-by: moT01 <20648924+moT01@users.noreply.github.com> --- client/i18n/locales/english/intro.json | 8 +- .../workshop-ferris-wheel/index.md | 32 ++ .../_meta/workshop-ferris-wheel/meta.json | 129 ++++++++ .../6140c7e645d8e905819f1dd4.md | 71 ++++ .../6140c9d35015ae0ba0c250e8.md | 79 +++++ .../6140cbeec34e970dfe75e710.md | 74 +++++ .../6140cd32d018ed0f600eefce.md | 72 +++++ .../6140cdebd39d6a101e747529.md | 85 +++++ .../6140cfc08ca9c5128c3e6478.md | 83 +++++ .../6140d0069049f5139d78da40.md | 77 +++++ .../6140d10d50636e14695013b2.md | 85 +++++ .../6140d1a351e88f159ed54fca.md | 126 ++++++++ .../6140d263016325162fd076fe.md | 111 +++++++ .../6140d2b687a2cd17bac5730c.md | 103 ++++++ .../6140d36b8b747718b50d4b7a.md | 100 ++++++ .../6140d3dc359b371b1a21d783.md | 117 +++++++ .../6140d4bc9db3c81c51a09ab7.md | 199 ++++++++++++ .../6140d94b5fab7f1d73c9bedb.md | 137 ++++++++ .../6140dc5e13d0c81e7496f182.md | 139 ++++++++ .../6140dd77e0bc5a1f70bd7466.md | 131 ++++++++ .../6140de31b1f5b420410728ff.md | 146 +++++++++ .../6140df547f09402144e40b92.md | 142 ++++++++ .../6140e0d875ec16262f26432b.md | 144 +++++++++ .../6140f4b5c1555a2960de1e5f.md | 191 +++++++++++ .../614100d7d335bb2a5ff74f1f.md | 155 +++++++++ .../61410126fa3a6d2b3cda502e.md | 157 +++++++++ .../6141019eadec6d2c6c6f007b.md | 148 +++++++++ .../6141026ec9882f2d39dcf2b8.md | 162 ++++++++++ .../6169ab1aaeb4cd1174def700.md | 154 +++++++++ .../6169b1357fcb701bb5efc619.md | 164 ++++++++++ .../6169b284950e171d8d0bb16a.md | 304 ++++++++++++++++++ .../617ace7d831f9c16a569b38a.md | 69 ++++ .../superblock-structure/full-stack.json | 1 + curriculum/test/utils/mongo-ids.js | 29 ++ 34 files changed, 3923 insertions(+), 1 deletion(-) create mode 100644 client/src/pages/learn/full-stack-developer/workshop-ferris-wheel/index.md create mode 100644 curriculum/challenges/_meta/workshop-ferris-wheel/meta.json create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6140c7e645d8e905819f1dd4.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6140c9d35015ae0ba0c250e8.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6140cbeec34e970dfe75e710.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6140cd32d018ed0f600eefce.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6140cdebd39d6a101e747529.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6140cfc08ca9c5128c3e6478.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6140d0069049f5139d78da40.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6140d10d50636e14695013b2.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6140d1a351e88f159ed54fca.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6140d263016325162fd076fe.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6140d2b687a2cd17bac5730c.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6140d36b8b747718b50d4b7a.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6140d3dc359b371b1a21d783.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6140d4bc9db3c81c51a09ab7.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6140d94b5fab7f1d73c9bedb.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6140dc5e13d0c81e7496f182.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6140dd77e0bc5a1f70bd7466.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6140de31b1f5b420410728ff.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6140df547f09402144e40b92.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6140e0d875ec16262f26432b.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6140f4b5c1555a2960de1e5f.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/614100d7d335bb2a5ff74f1f.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/61410126fa3a6d2b3cda502e.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6141019eadec6d2c6c6f007b.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6141026ec9882f2d39dcf2b8.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6169ab1aaeb4cd1174def700.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6169b1357fcb701bb5efc619.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6169b284950e171d8d0bb16a.md create mode 100644 curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/617ace7d831f9c16a569b38a.md diff --git a/client/i18n/locales/english/intro.json b/client/i18n/locales/english/intro.json index 253dcf84566..a2a02f2f9be 100644 --- a/client/i18n/locales/english/intro.json +++ b/client/i18n/locales/english/intro.json @@ -2417,7 +2417,13 @@ "In these lecture videos, you will learn about animations and accessibility." ] }, - "dpaq": { "title": "120", "intro": [] }, + "workshop-ferris-wheel": { + "title": "Build an Animated Ferris Wheel", + "intro": [ + "You can use CSS animation to draw attention to specific sections of your webpage and make it more engaging.", + "In this workshop, you'll build a Ferris wheel. You'll practice how to use CSS to animate elements, transform them, and adjust their speed." + ] + }, "lab-moon-orbit": { "title": "Build a Moon Orbit", "intro": [ diff --git a/client/src/pages/learn/full-stack-developer/workshop-ferris-wheel/index.md b/client/src/pages/learn/full-stack-developer/workshop-ferris-wheel/index.md new file mode 100644 index 00000000000..4bb78dac71f --- /dev/null +++ b/client/src/pages/learn/full-stack-developer/workshop-ferris-wheel/index.md @@ -0,0 +1,32 @@ +--- +title: Introduction to the Build an Animated Ferris Wheel +block: workshop-ferris-wheel +superBlock: full-stack-developer +--- + +## Introduction to the Build an Animated Ferris Wheel + +Have you ever wanted to bring your web pages to life with fun and interactive animations? CSS animation allows you to add movement and interactivity to your web pages, making them more engaging and dynamic. It’s like adding a sprinkle of magic to your design! + +You will practice techniques like using CSS `keyframes` to control how your elements behave. + +```css +@keyframes spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} +``` + +And how to apply those animations to an element: + +```css +.wheel { + animation: spin 10s linear infinite; +} +``` + +Ready to create some enchanting animations? diff --git a/curriculum/challenges/_meta/workshop-ferris-wheel/meta.json b/curriculum/challenges/_meta/workshop-ferris-wheel/meta.json new file mode 100644 index 00000000000..bf9692f453d --- /dev/null +++ b/curriculum/challenges/_meta/workshop-ferris-wheel/meta.json @@ -0,0 +1,129 @@ +{ + "name": "Build an Animated Ferris Wheel", + "isUpcomingChange": true, + "usesMultifileEditor": true, + "hasEditableBoundaries": true, + "dashedName": "workshop-ferris-wheel", + "superBlock": "full-stack-developer", + "blockType": "workshop", + "blockLayout": "challenge-grid", + "challengeOrder": [ + { + "id": "6140c7e645d8e905819f1dd4", + "title": "Step 1" + }, + { + "id": "6140c9d35015ae0ba0c250e8", + "title": "Step 2" + }, + { + "id": "6140cbeec34e970dfe75e710", + "title": "Step 3" + }, + { + "id": "6140cd32d018ed0f600eefce", + "title": "Step 4" + }, + { + "id": "617ace7d831f9c16a569b38a", + "title": "Step 5" + }, + { + "id": "6140cdebd39d6a101e747529", + "title": "Step 6" + }, + { + "id": "6140cfc08ca9c5128c3e6478", + "title": "Step 7" + }, + { + "id": "6140d0069049f5139d78da40", + "title": "Step 8" + }, + { + "id": "6140d10d50636e14695013b2", + "title": "Step 9" + }, + { + "id": "6140d1a351e88f159ed54fca", + "title": "Step 10" + }, + { + "id": "6140d263016325162fd076fe", + "title": "Step 11" + }, + { + "id": "6140d2b687a2cd17bac5730c", + "title": "Step 12" + }, + { + "id": "6140d36b8b747718b50d4b7a", + "title": "Step 13" + }, + { + "id": "6140d3dc359b371b1a21d783", + "title": "Step 14" + }, + { + "id": "6140d4bc9db3c81c51a09ab7", + "title": "Step 15" + }, + { + "id": "6140d94b5fab7f1d73c9bedb", + "title": "Step 16" + }, + { + "id": "6140dc5e13d0c81e7496f182", + "title": "Step 17" + }, + { + "id": "6140dd77e0bc5a1f70bd7466", + "title": "Step 18" + }, + { + "id": "6140de31b1f5b420410728ff", + "title": "Step 19" + }, + { + "id": "6140df547f09402144e40b92", + "title": "Step 20" + }, + { + "id": "6140e0d875ec16262f26432b", + "title": "Step 21" + }, + { + "id": "6140f4b5c1555a2960de1e5f", + "title": "Step 22" + }, + { + "id": "614100d7d335bb2a5ff74f1f", + "title": "Step 23" + }, + { + "id": "61410126fa3a6d2b3cda502e", + "title": "Step 24" + }, + { + "id": "6141019eadec6d2c6c6f007b", + "title": "Step 25" + }, + { + "id": "6141026ec9882f2d39dcf2b8", + "title": "Step 26" + }, + { + "id": "6169ab1aaeb4cd1174def700", + "title": "Step 27" + }, + { + "id": "6169b1357fcb701bb5efc619", + "title": "Step 28" + }, + { + "id": "6169b284950e171d8d0bb16a", + "title": "Step 29" + } + ], + "helpCategory": "HTML-CSS" +} \ No newline at end of file diff --git a/curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6140c7e645d8e905819f1dd4.md b/curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6140c7e645d8e905819f1dd4.md new file mode 100644 index 00000000000..3794c902435 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6140c7e645d8e905819f1dd4.md @@ -0,0 +1,71 @@ +--- +id: 6140c7e645d8e905819f1dd4 +title: Step 1 +challengeType: 0 +dashedName: step-1 +demoType: onLoad +--- + +# --description-- + +To start, add a `link` element for the `./styles.css` file. + +# --hints-- + +Your code should have a `link` element. + +```js +assert.match(code, / link')); +``` + +Your `link` element should have a `rel` attribute with the value `stylesheet`. + +```js +const linkElement = document.querySelector('link'); +const rel = linkElement?.getAttribute("rel"); +assert.strictEqual(rel, "stylesheet"); +``` + +Your `link` element should have an `href` attribute with the value `styles.css`. + +```js +const linkElement = document.querySelector('link'); +assert.strictEqual(linkElement?.dataset?.href, "styles.css"); +``` + +# --seed-- + +## --seed-contents-- + +```html + + +--fcc-editable-region-- + + + Ferris Wheel + + +--fcc-editable-region-- + + + + + +``` + +```css + +``` diff --git a/curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6140c9d35015ae0ba0c250e8.md b/curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6140c9d35015ae0ba0c250e8.md new file mode 100644 index 00000000000..05b718b60f2 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6140c9d35015ae0ba0c250e8.md @@ -0,0 +1,79 @@ +--- +id: 6140c9d35015ae0ba0c250e8 +title: Step 2 +challengeType: 0 +dashedName: step-2 +--- + +# --description-- + +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`. + +# --hints-- + +You should create a new `div` within your `body` element. + +```js +const divs = [...document.querySelector('body')?.children].filter(child => 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 + + + + + Ferris Wheel + + +--fcc-editable-region-- + + + +--fcc-editable-region-- + +``` + +```css + +``` diff --git a/curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6140cbeec34e970dfe75e710.md b/curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6140cbeec34e970dfe75e710.md new file mode 100644 index 00000000000..06b1753386e --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6140cbeec34e970dfe75e710.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 + + + + + Ferris Wheel + + + +
+ + + + + + + +
+
+
+
+
+
+
+ + +``` + +```css +--fcc-editable-region-- + +--fcc-editable-region-- +``` diff --git a/curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6140cd32d018ed0f600eefce.md b/curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6140cd32d018ed0f600eefce.md new file mode 100644 index 00000000000..a75e568eaae --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6140cd32d018ed0f600eefce.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 + + + + + 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/25-front-end-development/workshop-ferris-wheel/6140cdebd39d6a101e747529.md b/curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6140cdebd39d6a101e747529.md new file mode 100644 index 00000000000..808f24f9992 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6140cdebd39d6a101e747529.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 + + + + + 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/25-front-end-development/workshop-ferris-wheel/6140cfc08ca9c5128c3e6478.md b/curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6140cfc08ca9c5128c3e6478.md new file mode 100644 index 00000000000..1305bdbd4bb --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6140cfc08ca9c5128c3e6478.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 + + + + + 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/25-front-end-development/workshop-ferris-wheel/6140d0069049f5139d78da40.md b/curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6140d0069049f5139d78da40.md new file mode 100644 index 00000000000..308878a667c --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6140d0069049f5139d78da40.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 you apply a `rotate` transformation (as you'll 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 at `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 + + + + + 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/25-front-end-development/workshop-ferris-wheel/6140d10d50636e14695013b2.md b/curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6140d10d50636e14695013b2.md new file mode 100644 index 00000000000..efde2c026c8 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6140d10d50636e14695013b2.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 + + + + + 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/25-front-end-development/workshop-ferris-wheel/6140d1a351e88f159ed54fca.md b/curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6140d1a351e88f159ed54fca.md new file mode 100644 index 00000000000..52f330a33ca --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6140d1a351e88f159ed54fca.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 + + + + + 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/25-front-end-development/workshop-ferris-wheel/6140d263016325162fd076fe.md b/curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6140d263016325162fd076fe.md new file mode 100644 index 00000000000..ddfe9fe01b7 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6140d263016325162fd076fe.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 + + + + + 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/25-front-end-development/workshop-ferris-wheel/6140d2b687a2cd17bac5730c.md b/curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6140d2b687a2cd17bac5730c.md new file mode 100644 index 00000000000..70bfaf56789 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6140d2b687a2cd17bac5730c.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 + + + + + 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/25-front-end-development/workshop-ferris-wheel/6140d36b8b747718b50d4b7a.md b/curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6140d36b8b747718b50d4b7a.md new file mode 100644 index 00000000000..bf9b40e4793 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6140d36b8b747718b50d4b7a.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 + + + + + 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/25-front-end-development/workshop-ferris-wheel/6140d3dc359b371b1a21d783.md b/curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6140d3dc359b371b1a21d783.md new file mode 100644 index 00000000000..428aea11eaf --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6140d3dc359b371b1a21d783.md @@ -0,0 +1,117 @@ +--- +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 +const def = (s) => new __helpers.CSSHelp(document).getStyle(s) +assert.exists(def('.cabin:first-of-type') || def('.cabin:nth-of-type(1)')); +``` + +Your `.cabin:nth-of-type(1)` selector should have a `right` property set to `-8.5%`. + +```js +const right = (s) => new __helpers.CSSHelp(document).getStyle(s)?.right +assert.equal(right('.cabin:nth-of-type(1)') || right('.cabin:first-of-type'), '-8.5%'); +``` + +Your `.cabin:nth-of-type(1)` selector should have a `top` property set to `50%`. + +```js +const top = (s) => new __helpers.CSSHelp(document).getStyle(s)?.top +assert.equal(top('.cabin:nth-of-type(1)') || top('.cabin:first-of-type'),'50%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + 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/25-front-end-development/workshop-ferris-wheel/6140d4bc9db3c81c51a09ab7.md b/curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6140d4bc9db3c81c51a09ab7.md new file mode 100644 index 00000000000..e2c5e9636ab --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6140d4bc9db3c81c51a09ab7.md @@ -0,0 +1,199 @@ +--- +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 +const def = (s) => new __helpers.CSSHelp(document).getStyle(s) +assert(def('.cabin:nth-of-type(6)') || def('.cabin:last-of-type')); +``` + +Your `.cabin:nth-of-type(6)` selector should have a `right` property set to `17%`. + +```js +const right = (s) => new __helpers.CSSHelp(document).getStyle(s)?.right +assert.equal(right('.cabin:nth-of-type(6)') || right('.cabin:last-of-type'),'17%'); +``` + +Your `.cabin:nth-of-type(6)` selector should have a `top` property set to `7%`. + +```js +const top = (s) => new __helpers.CSSHelp(document).getStyle(s)?.top +assert.equal(top('.cabin:nth-of-type(6)') || top('.cabin:last-of-type'),'7%'); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + 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/25-front-end-development/workshop-ferris-wheel/6140d94b5fab7f1d73c9bedb.md b/curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6140d94b5fab7f1d73c9bedb.md new file mode 100644 index 00000000000..f9a32b68dbe --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6140d94b5fab7f1d73c9bedb.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 + + + + + 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/25-front-end-development/workshop-ferris-wheel/6140dc5e13d0c81e7496f182.md b/curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6140dc5e13d0c81e7496f182.md new file mode 100644 index 00000000000..c1878bd3ab9 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6140dc5e13d0c81e7496f182.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 + + + + + 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/25-front-end-development/workshop-ferris-wheel/6140dd77e0bc5a1f70bd7466.md b/curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6140dd77e0bc5a1f70bd7466.md new file mode 100644 index 00000000000..21a8afbec29 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6140dd77e0bc5a1f70bd7466.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 + + + + + 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/25-front-end-development/workshop-ferris-wheel/6140de31b1f5b420410728ff.md b/curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6140de31b1f5b420410728ff.md new file mode 100644 index 00000000000..76f9ec80c72 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6140de31b1f5b420410728ff.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 + + + + + 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/25-front-end-development/workshop-ferris-wheel/6140df547f09402144e40b92.md b/curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6140df547f09402144e40b92.md new file mode 100644 index 00000000000..6d83fdb1c68 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6140df547f09402144e40b92.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 + + + + + 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/25-front-end-development/workshop-ferris-wheel/6140e0d875ec16262f26432b.md b/curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6140e0d875ec16262f26432b.md new file mode 100644 index 00000000000..af0430c9f6f --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6140e0d875ec16262f26432b.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 + + + + + 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/25-front-end-development/workshop-ferris-wheel/6140f4b5c1555a2960de1e5f.md b/curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6140f4b5c1555a2960de1e5f.md new file mode 100644 index 00000000000..6c6ae12000e --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6140f4b5c1555a2960de1e5f.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 + + + + + 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/25-front-end-development/workshop-ferris-wheel/614100d7d335bb2a5ff74f1f.md b/curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/614100d7d335bb2a5ff74f1f.md new file mode 100644 index 00000000000..ac7241c1185 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/614100d7d335bb2a5ff74f1f.md @@ -0,0 +1,155 @@ +--- +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 +const cabinElementStyles = new __helpers.CSSHelp(document).getStyle('.cabin'); +assert( + cabinElementStyles?.animationName === "cabins" && + cabinElementStyles?.animationDuration === "10s" && + cabinElementStyles?.animationTimingFunction === "linear" && + cabinElementStyles?.animationIterationCount === "infinite" +); +``` + +# --seed-- + +## --seed-contents-- + +```html + + + + + 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/25-front-end-development/workshop-ferris-wheel/61410126fa3a6d2b3cda502e.md b/curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/61410126fa3a6d2b3cda502e.md new file mode 100644 index 00000000000..9d20d40c72d --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/61410126fa3a6d2b3cda502e.md @@ -0,0 +1,157 @@ +--- +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 +const cabinElementStyles = new __helpers.CSSHelp(document).getStyle('.cabin'); +assert( + cabinElementStyles?.animationName === "cabins" && + cabinElementStyles?.animationDuration === "10s" && + cabinElementStyles?.animationTimingFunction === "ease-in-out" && + cabinElementStyles?.animationIterationCount === "infinite" +); +``` + + +# --seed-- + +## --seed-contents-- + +```html + + + + + 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/25-front-end-development/workshop-ferris-wheel/6141019eadec6d2c6c6f007b.md b/curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6141019eadec6d2c6c6f007b.md new file mode 100644 index 00000000000..a378bec97d8 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6141019eadec6d2c6c6f007b.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 + + + + + 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/25-front-end-development/workshop-ferris-wheel/6141026ec9882f2d39dcf2b8.md b/curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6141026ec9882f2d39dcf2b8.md new file mode 100644 index 00000000000..5e92d6712fd --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6141026ec9882f2d39dcf2b8.md @@ -0,0 +1,162 @@ +--- +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 + + + + + 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-- +``` diff --git a/curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6169ab1aaeb4cd1174def700.md b/curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6169ab1aaeb4cd1174def700.md new file mode 100644 index 00000000000..976bf2acd56 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6169ab1aaeb4cd1174def700.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 + + + + + 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/25-front-end-development/workshop-ferris-wheel/6169b1357fcb701bb5efc619.md b/curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6169b1357fcb701bb5efc619.md new file mode 100644 index 00000000000..f66778bf091 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6169b1357fcb701bb5efc619.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 + + + + + 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/25-front-end-development/workshop-ferris-wheel/6169b284950e171d8d0bb16a.md b/curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6169b284950e171d8d0bb16a.md new file mode 100644 index 00000000000..d25135f4977 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/6169b284950e171d8d0bb16a.md @@ -0,0 +1,304 @@ +--- +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 + + + + + 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-- +``` + +# --solutions-- + +```html + + + + + 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); + } +} + +@keyframes cabins { + 0% { + transform: rotate(0deg); + } + 25% { + background-color: yellow; + } + 50% { + background-color: purple; + } + 75% { + background-color: yellow; + } + 100% { + transform: rotate(-360deg); + } +} +``` diff --git a/curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/617ace7d831f9c16a569b38a.md b/curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/617ace7d831f9c16a569b38a.md new file mode 100644 index 00000000000..c7cc4432ee9 --- /dev/null +++ b/curriculum/challenges/english/25-front-end-development/workshop-ferris-wheel/617ace7d831f9c16a569b38a.md @@ -0,0 +1,69 @@ +--- +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 + + + + + Ferris Wheel + + + +
+ + + + + + + +
+
+
+
+
+
+
+ + +``` + +```css +--fcc-editable-region-- +.wheel { + border: 2px solid black; + border-radius: 50%; + margin-left: 50px; + position: absolute; + height: 55vw; + width: 55vw; +} +--fcc-editable-region-- +``` diff --git a/curriculum/superblock-structure/full-stack.json b/curriculum/superblock-structure/full-stack.json index 891c82b9913..5109d781684 100644 --- a/curriculum/superblock-structure/full-stack.json +++ b/curriculum/superblock-structure/full-stack.json @@ -246,6 +246,7 @@ "dashedName": "css-animations", "blocks": [ { "dashedName": "lecture-animations-and-accessibility" }, + { "dashedName": "workshop-ferris-wheel" }, { "dashedName": "lab-moon-orbit" }, { "dashedName": "workshop-flappy-penguin" }, { "dashedName": "lab-personal-portfolio" }, diff --git a/curriculum/test/utils/mongo-ids.js b/curriculum/test/utils/mongo-ids.js index dc7885b0b7f..4572e9eb259 100644 --- a/curriculum/test/utils/mongo-ids.js +++ b/curriculum/test/utils/mongo-ids.js @@ -902,6 +902,35 @@ const duplicatedProjectIds = [ '587d78af367417b2b2512b04', // Ferris Wheel + '6140c7e645d8e905819f1dd4', + '6140c9d35015ae0ba0c250e8', + '6140cbeec34e970dfe75e710', + '6140cd32d018ed0f600eefce', + '617ace7d831f9c16a569b38a', + '6140cdebd39d6a101e747529', + '6140cfc08ca9c5128c3e6478', + '6140d0069049f5139d78da40', + '6140d10d50636e14695013b2', + '6140d1a351e88f159ed54fca', + '6140d263016325162fd076fe', + '6140d2b687a2cd17bac5730c', + '6140d36b8b747718b50d4b7a', + '6140d3dc359b371b1a21d783', + '6140d4bc9db3c81c51a09ab7', + '6140d94b5fab7f1d73c9bedb', + '6140dc5e13d0c81e7496f182', + '6140dd77e0bc5a1f70bd7466', + '6140de31b1f5b420410728ff', + '6140df547f09402144e40b92', + '6140e0d875ec16262f26432b', + '6140f4b5c1555a2960de1e5f', + '614100d7d335bb2a5ff74f1f', + '61410126fa3a6d2b3cda502e', + '6141019eadec6d2c6c6f007b', + '6141026ec9882f2d39dcf2b8', + '6169ab1aaeb4cd1174def700', + '6169b1357fcb701bb5efc619', + '6169b284950e171d8d0bb16a', // Penguin '619665c9abd72906f3ad30f9',