jprdonnelly/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-06-03 01:01:13 -04:00
Code Issues Projects Releases Wiki Activity

chore(curriculum): update step 78 workshop magazine to use specific asserts (#61388)

Browse Source
This commit is contained in:
Joydeep Bhattacharya
2025-07-18 05:39:49 +05:30
committed by GitHub
parent 1cc0be72a4
commit f4e31b2eb0
1 changed files with 9 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
curriculum/challenges/english/25-front-end-development/workshop-magazine/6148f693e0728f77c87f3020.md
View File

@@ -14,40 +14,40 @@ Create a third `@media` query for `only screen` with a `max-width` of `550px`. W
You should have a new `@media` query for `only screen` with a `max-width` of `550px`. This should come after your previous two.
```js
assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[2]?.media?.mediaText === 'only screen and (max-width: 550px)');
assert.equal(new __helpers.CSSHelp(document).getCSSRules('media')?.[2]?.media?.mediaText, 'only screen and (max-width: 550px)');
```
Your new `@media` rule should have a `.hero-title` selector, a `.hero-subtitle, .author, .quote, .list-title` selector, a `.social-icons` selector, and a `.text` selector. These selectors should be in this order.
```js
assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[2]?.cssRules?.[0]?.selectorText === '.hero-title');
assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[2]?.cssRules?.[1]?.selectorText === '.hero-subtitle, .author, .quote, .list-title');
assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[2]?.cssRules?.[2]?.selectorText === '.social-icons');
assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[2]?.cssRules?.[3]?.selectorText === '.text');
assert.equal(new __helpers.CSSHelp(document).getCSSRules('media')?.[2]?.cssRules?.[0]?.selectorText, '.hero-title');
assert.equal(new __helpers.CSSHelp(document).getCSSRules('media')?.[2]?.cssRules?.[1]?.selectorText, '.hero-subtitle, .author, .quote, .list-title');
assert.equal(new __helpers.CSSHelp(document).getCSSRules('media')?.[2]?.cssRules?.[2]?.selectorText, '.social-icons');
assert.equal(new __helpers.CSSHelp(document).getCSSRules('media')?.[2]?.cssRules?.[3]?.selectorText, '.text');
```
Your `.hero-title` selector should have a `font-size` set to `6rem`.
```js
assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[2]?.cssRules?.[0]?.style?.fontSize === '6rem');
assert.equal(new __helpers.CSSHelp(document).getCSSRules('media')?.[2]?.cssRules?.[0]?.style?.fontSize, '6rem');
```
Your `.hero-subtitle, .author, .quote, .list-title` selector should have a `font-size` set to `1.8rem`.
```js
assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[2]?.cssRules?.[1]?.style?.fontSize === '1.8rem');
assert.equal(new __helpers.CSSHelp(document).getCSSRules('media')?.[2]?.cssRules?.[1]?.style?.fontSize, '1.8rem');
```
Your `.social-icons` selector should have a `font-size` set to `2rem`.
```js
assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[2]?.cssRules?.[2]?.style?.fontSize === '2rem');
assert.equal(new __helpers.CSSHelp(document).getCSSRules('media')?.[2]?.cssRules?.[2]?.style?.fontSize, '2rem');
```
Your `.text` selector should have a `font-size` set to `1.6rem`.
```js
assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[2]?.cssRules?.[3]?.style?.fontSize === '1.6rem');
assert.equal(new __helpers.CSSHelp(document).getCSSRules('media')?.[2]?.cssRules?.[3]?.style?.fontSize, '1.6rem');
```
# --seed--