gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat(curriculum): css ferris wheel (#43460)

Browse Source 
* feat: initial infra

* feat: initial step breakdown

* feat: expand instructions

* feat: write tests!

* chore: apply shaun's review suggestions

Co-authored-by: Shaun Hamilton <shauhami020@gmail.com>

* chore: more tweaks

* chore: ferris → Ferris

* chore: apply shaun's review suggestions

Co-authored-by: Shaun Hamilton <shauhami020@gmail.com>

* fix: no lang

* chore: fix lint issues

Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

Co-authored-by: Shaun Hamilton <shauhami020@gmail.com>
Co-authored-by: Tom <20648924+moT01@users.noreply.github.com>
Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>
This commit is contained in:
Nicholas Carrigan (he/him)
2021-11-09 10:03:21 -08:00
committed by GitHub
parent 5ffd65e4e7
commit 229fa686ca
34 changed files with 3953 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
client/i18n/locales/english/intro.json
View File

@ -101,7 +101,8 @@
"css-nutrition-label": { "css-nutrition-label": {
"title": "CSS Nutrition Label", "title": "CSS Nutrition Label",
"intro": ["", ""] "intro": ["", ""]
} },
"css-ferris-wheel": { "title": "CSS Ferris Wheel", "intro": ["", ""] }
} }
}, },
"javascript-algorithms-and-data-structures": { "javascript-algorithms-and-data-structures": {

10
client/src/pages/learn/responsive-web-design/css-ferris-wheel/index.md Normal file
View File

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

3
client/utils/help-category-map.json
View File

@ -81,5 +81,6 @@
"registration-form": "HTML-CSS", "registration-form": "HTML-CSS",
"css-photo-gallery": "HTML-CSS", "css-photo-gallery": "HTML-CSS",
"css-grid-magazine": "HTML-CSS", "css-grid-magazine": "HTML-CSS",
"css-nutrition-label": "HTML-CSS" "css-nutrition-label": "HTML-CSS",
"css-ferris-wheel": "HTML-CSS"
} }

130
curriculum/challenges/_meta/css-ferris-wheel/meta.json Normal file
View File

@ -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"
]
]
}

178
curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-001.md Normal file
View File

@ -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(/<!DOCTYPE/gi));
```
You should include a space after the `DOCTYPE` reference.
```js
assert(code.match(/<!DOCTYPE\s+/gi));
```
You should define the document type to be `html`.
```js
assert(code.match(/<!DOCTYPE\s+html/gi));
```
You should close the `DOCTYPE` declaration with a `>` after the type.
```js
assert(code.match(/<!DOCTYPE\s+html\s*>/gi));
```
Your `html` element should have an opening tag.
```js
assert(code.match(/<html\s*>/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*<!DOCTYPE\s+html\s*>[\s\S]*<\s*html\s*>/gi));
```
You should have an opening `head` tag.
```js
assert(code.match(/<head\s*>/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(/<body\s*>/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, /<meta[\s\S]+?charset=('|"|`)UTF-8\1/)
```
Your code should have a `title` element.
```js
const title = document.querySelector('title');
assert.exists(title);
```
Your project should have a title of `CSS Ferris Wheel`.
```js
const title = document.querySelector('title');
assert.equal(title?.text?.trim()?.toLowerCase(), 'css ferris wheel')
```
Remember, the casing and spelling matter for the title.
```js
const title = document.querySelector('title');
assert.equal(title?.text?.trim(), 'CSS Ferris Wheel');
```
Your code should have a `link` element.
```js
assert.match(code, /<link/)
```
Your `link` element should be a self-closing element.
```js
assert(code.match(/<link[\w\W\s]+\/>/i));
```
Your `link` element should be within your `head` element.
```js
assert(code.match(/<head>[\w\W\s]*<link[\w\W\s]*\/>[\w\W\s]*<\/head>/i))
```
Your `link` element should have a `rel` attribute with the value `stylesheet`.
```js
assert.match(code, /<link[\s\S]*?rel=('|"|`)stylesheet\1/)
```
Your `link` element should have an `href` attribute with the value `styles.css`.
```js
assert.match(code, /<link[\s\S]*?href=('|"|`)(\.\/)?styles\.css\1/)
```
# --seed--
## --seed-contents--
```html
--fcc-editable-region--
--fcc-editable-region--
```
```css
```

79
curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-002.md Normal file
View File

@ -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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS Ferris Wheel</title>
<link rel="stylesheet" href="./styles.css" />
</head>
--fcc-editable-region--
<body>
</body>
--fcc-editable-region--
</html>
```
```css
```

74
curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-003.md Normal file
View File

@ -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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Learn CSS Animations by Building a Ferris Wheel</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div class="wheel">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
</div>
</body>
</html>
```
```css
--fcc-editable-region--
--fcc-editable-region--
```

72
curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-004.md Normal file
View File

@ -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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Learn CSS Animations by Building a Ferris Wheel</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div class="wheel">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
</div>
</body>
</html>
```
```css
--fcc-editable-region--
.wheel {
border: 2px solid black;
border-radius: 50%;
margin-left: 50px;
}
--fcc-editable-region--
```

68
curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-005.md Normal file
View File

@ -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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Learn CSS Animations by Building a Ferris Wheel</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div class="wheel">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
</div>
</body>
</html>
```
```css
--fcc-editable-region--
.wheel {
border: 2px solid black;
border-radius: 50%;
margin-left: 50px;
height: 55vw;
width: 55vw;
}
--fcc-editable-region--
```

85
curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-006.md Normal file
View File

@ -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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Learn CSS Animations by Building a Ferris Wheel</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div class="wheel">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
</div>
</body>
</html>
```
```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--
```

83
curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-007.md Normal file
View File

@ -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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Learn CSS Animations by Building a Ferris Wheel</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div class="wheel">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
</div>
</body>
</html>
```
```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--
```

77
curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-008.md Normal file
View File

@ -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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Learn CSS Animations by Building a Ferris Wheel</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div class="wheel">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
</div>
</body>
</html>
```
```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--
```

85
curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-009.md Normal file
View File

@ -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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Learn CSS Animations by Building a Ferris Wheel</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div class="wheel">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
</div>
</body>
</html>
```
```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--
```

126
curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-010.md Normal file
View File

@ -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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Learn CSS Animations by Building a Ferris Wheel</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div class="wheel">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
</div>
</body>
</html>
```
```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--
```

111
curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-011.md Normal file
View File

@ -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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Learn CSS Animations by Building a Ferris Wheel</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div class="wheel">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
</div>
</body>
</html>
```
```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--
```

103
curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-012.md Normal file
View File

@ -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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Learn CSS Animations by Building a Ferris Wheel</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div class="wheel">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
</div>
</body>
</html>
```
```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--
```

100
curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-013.md Normal file
View File

@ -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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Learn CSS Animations by Building a Ferris Wheel</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div class="wheel">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
</div>
</body>
</html>
```
```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--
```

114
curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-014.md Normal file
View File

@ -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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Learn CSS Animations by Building a Ferris Wheel</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div class="wheel">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
</div>
</body>
</html>
```
```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--
```

196
curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-015.md Normal file
View File

@ -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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Learn CSS Animations by Building a Ferris Wheel</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div class="wheel">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
</div>
</body>
</html>
```
```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--
```

137
curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-016.md Normal file
View File

@ -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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Learn CSS Animations by Building a Ferris Wheel</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div class="wheel">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
</div>
</body>
</html>
```
```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--
```

139
curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-017.md Normal file
View File

@ -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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Learn CSS Animations by Building a Ferris Wheel</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div class="wheel">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
</div>
</body>
</html>
```
```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--
```

131
curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-018.md Normal file
View File

@ -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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Learn CSS Animations by Building a Ferris Wheel</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div class="wheel">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
</div>
</body>
</html>
```
```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--
```

146
curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-019.md Normal file
View File

@ -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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Learn CSS Animations by Building a Ferris Wheel</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div class="wheel">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
</div>
</body>
</html>
```
```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--
```

142
curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-020.md Normal file
View File

@ -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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Learn CSS Animations by Building a Ferris Wheel</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div class="wheel">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
</div>
</body>
</html>
```
```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);
}
}
```

144
curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-021.md Normal file
View File

@ -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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Learn CSS Animations by Building a Ferris Wheel</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div class="wheel">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
</div>
</body>
</html>
```
```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);
}
}
```

191
curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-022.md Normal file
View File

@ -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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Learn CSS Animations by Building a Ferris Wheel</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div class="wheel">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
</div>
</body>
</html>
```
```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--
```

149
curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-023.md Normal file
View File

@ -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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Learn CSS Animations by Building a Ferris Wheel</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div class="wheel">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
</div>
</body>
</html>
```
```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);
}
}
```

151
curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-024.md Normal file
View File

@ -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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Learn CSS Animations by Building a Ferris Wheel</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div class="wheel">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
</div>
</body>
</html>
```
```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);
}
}
```

148
curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-025.md Normal file
View File

@ -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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Learn CSS Animations by Building a Ferris Wheel</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div class="wheel">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
</div>
</body>
</html>
```
```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--
```

291
curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-026.md Normal file
View File

@ -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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Learn CSS Animations by Building a Ferris Wheel</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div class="wheel">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
</div>
</body>
</html>
```
```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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Learn CSS Animations by Building a Ferris Wheel</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div class="wheel">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
</div>
</body>
</html>
```
```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);
}
}
```

154
curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-027.md Normal file
View File

@ -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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Learn CSS Animations by Building a Ferris Wheel</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div class="wheel">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
</div>
</body>
</html>
```
```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--
```

164
curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-028.md Normal file
View File

@ -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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Learn CSS Animations by Building a Ferris Wheel</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div class="wheel">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
</div>
</body>
</html>
```
```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--
```

169
curriculum/challenges/english/01-responsive-web-design/css-ferris-wheel/step-029.md Normal file
View File

@ -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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Learn CSS Animations by Building a Ferris Wheel</title>
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<div class="wheel">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
<div class="cabin"></div>
</div>
</body>
</html>
```
```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--
```

3
utils/preformatted-block-names.json
View File

@ -30,5 +30,6 @@
"registration-form": "Registration Form", "registration-form": "Registration Form",
"css-photo-gallery": "CSS Photo Gallery", "css-photo-gallery": "CSS Photo Gallery",
"css-grid-magazine": "CSS Grid Magazine", "css-grid-magazine": "CSS Grid Magazine",
"css-nutrition-label": "CSS Nutrition Label" "css-nutrition-label": "CSS Nutrition Label",
"css-ferris-wheel": "CSS Ferris Wheel"
} }