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

feat(dev): add css helper function (#42148)

Browse Source 
* feat(dev): add css helper function

* add media declaration methods

* use a selector to grab styles

* add CSSHelp class with annoying TS warnings (no-verify)

* replace indexing with getPropertyValue

Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com>

* connect CSSHelp to helpers, clean up types

* fix: return extended object, not modify prototype

* fix: unnecessary assertion error

* add tests with fixtures

* add afterAll document clean-up

* 'fix' tests

* undo jest transform config

* remove erroneous comments and logs

* reafactor: use existing types and narrow types

* refactor test descriptions

* rename files to appease Mrugesh 😄

* remove probably unnecessary document clean

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

Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com>
Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>
This commit is contained in:
Shaun Hamilton
2021-05-25 15:34:55 +01:00
committed by GitHub
parent a32559b203
commit d5cc9ba259
5 changed files with 522 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
curriculum/challenges/english/01-responsive-web-design/responsive-web-design-principles/create-a-media-query.md
View File

@ -13,13 +13,13 @@ Media Queries are a new technique introduced in CSS3 that change the presentatio
Media Queries consist of a media type, and if that media type matches the type of device the document is displayed on, the styles are applied. You can have as many selectors and styles inside your media query as you want.
Here's an example of a media query that returns the content when the device's width is less than or equal to 100px:
Here's an example of a media query that returns the content when the device's width is less than or equal to `100px`:
```css
@media (max-width: 100px) { /* CSS Rules */ }
```
and the following media query returns the content when the device's height is more than or equal to 350px:
and the following media query returns the content when the device's height is more than or equal to `350px`:
```css
@media (min-height: 350px) { /* CSS Rules */ }
@ -33,38 +33,25 @@ Add a media query, so that the `p` tag has a `font-size` of `10px` when the devi
# --hints--
You should declare a `@media` query for devices with a `height` less than or equal to 800px.
You should declare a `@media` query for devices with a `height` less than or equal to `800px`.
```js
assert(
$('style')
.text()
.replace(/\s/g, '')
.match(/@media\(max-height:800px\)/g)
);
const media = new __helpers.CSSHelp(document).getCSSRules('media');
assert(media.some(x => x.conditionText?.includes('(max-height: 800px)')));
```
Your `p` element should have a `font-size` of 10px when the device `height` is less than or equal to 800px.
Your `p` element should have a `font-size` of `10px` when the device `height` is less than or equal to `800px`.
```js
assert(
$('style')
.text()
.replace(/\s/g, '')
.match(/@media\(max-height:800px\){p{font-size:10px;?}}/g)
);
const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-height: 800px)');
assert(rules?.find(x => x.selectorText === 'p')?.style.fontSize === "10px");
```
Your `p` element should have an initial `font-size` of 20px when the device `height` is more than 800px.
Your `p` element should have an initial `font-size` of `20px` when the device `height` is more than `800px`.
```js
assert(
$('style')
.text()
.replace(/\s/g, '')
.replace(/@media.*}/g, '')
.match(/p{font-size:20px;?}/g)
);
const ifPFirst = new __helpers.CSSHelp(document).getCSSRules()?.find(x => x?.selectorText === 'p' || x?.media);
assert(ifPFirst?.style?.fontSize === '20px');
```
# --seed--