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

chore(curriculum): remove jquery from Legacy Basic CSS Challenges (#57139)

Browse Source 
Co-authored-by: Ilenia <26656284+ilenia-magoni@users.noreply.github.com>
Co-authored-by: Naomi Carrigan <commits@nhcarrigan.com>
This commit is contained in:
Anna
2024-12-15 16:14:55 -05:00
committed by GitHub
parent 2b9a5ecb5e
commit d6530bc3a1
44 changed files with 327 additions and 335 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
curriculum/challenges/english/01-responsive-web-design/basic-css/add-a-negative-margin-to-an-element.md
View File

@@ -24,7 +24,9 @@ Change the `margin` of the blue box to `-15px`, so it fills the entire horizonta
Your `blue-box` class should give elements `-15px` of `margin`.
```js
assert($('.blue-box').css('margin-top') === '-15px');
const blueBox = document.querySelector('.blue-box');
const marginTop = window.getComputedStyle(blueBox)["margin-top"];
assert.strictEqual(marginTop, "-15px");
```
# --seed--

21
curriculum/challenges/english/01-responsive-web-design/basic-css/add-borders-around-your-elements.md
View File

@@ -38,35 +38,38 @@ Remember that you can apply multiple classes to an element using its `class` att
Your `img` element should have the class `smaller-image`.
```js
assert($('img').hasClass('smaller-image'));
assert.isTrue(document.querySelector('img').classList.contains('smaller-image'));
```
Your `img` element should have the class `thick-green-border`.
```js
assert($('img').hasClass('thick-green-border'));
assert.isTrue(document.querySelector('img').classList.contains('thick-green-border'));
```
Your image should have a border width of `10px`.
```js
assert(
$('img').hasClass('thick-green-border') &&
parseInt($('img').css('border-top-width'), 10) >= 8 &&
parseInt($('img').css('border-top-width'), 10) <= 12
);
const image = document.querySelector('img');
const imageBorderTopWidth = window.getComputedStyle(image)["border-top-width"];
assert.strictEqual(imageBorderTopWidth, "10px")
```
Your image should have a border style of `solid`.
```js
assert($('img').css('border-right-style') === 'solid');
const image = document.querySelector('img');
const borderRightStyle = window.getComputedStyle(image)["border-right-style"];
assert.strictEqual(borderRightStyle, 'solid');
```
The border around your `img` element should be green.
```js
assert($('img').css('border-left-color') === 'rgb(0, 128, 0)');
const image = document.querySelector('img');
const borderLeftColor = window.getComputedStyle(image)["border-left-color"];
assert.strictEqual(borderLeftColor, 'rgb(0, 128, 0)');
```
# --seed--

16
curriculum/challenges/english/01-responsive-web-design/basic-css/add-different-margins-to-each-side-of-an-element.md
View File

@@ -22,25 +22,33 @@ Give the blue box a `margin` of `40px` on its top and left side, but only `20px`
Your `blue-box` class should give the top of elements `40px` of `margin`.
```js
assert($('.blue-box').css('margin-top') === '40px');
const blueBox = document.querySelector('.blue-box');
const marginTop = window.getComputedStyle(blueBox)['margin-top'];
assert.strictEqual(marginTop, '40px');
```
Your `blue-box` class should give the right of elements `20px` of `margin`.
```js
assert($('.blue-box').css('margin-right') === '20px');
const blueBox = document.querySelector('.blue-box');
const marginRight = window.getComputedStyle(blueBox)['margin-right'];
assert.strictEqual(marginRight, '20px');
```
Your `blue-box` class should give the bottom of elements `20px` of `margin`.
```js
assert($('.blue-box').css('margin-bottom') === '20px');
const blueBox = document.querySelector('.blue-box');
const marginBottom = window.getComputedStyle(blueBox)['margin-bottom'];
assert.strictEqual(marginBottom, '20px');
```
Your `blue-box` class should give the left of elements `40px` of `margin`.
```js
assert($('.blue-box').css('margin-left') === '40px');
const blueBox = document.querySelector('.blue-box');
const marginLeft = window.getComputedStyle(blueBox)['margin-left'];
assert.strictEqual(marginLeft,'40px');
```
# --seed--

16
curriculum/challenges/english/01-responsive-web-design/basic-css/add-different-padding-to-each-side-of-an-element.md
View File

@@ -22,25 +22,33 @@ Give the blue box a `padding` of `40px` on its top and left side, but only `20px
Your `blue-box` class should give the top of the elements `40px` of `padding`.
```js
assert($('.blue-box').css('padding-top') === '40px');
const blueBox = document.querySelector('.blue-box');
const paddingTop = window.getComputedStyle(blueBox)['padding-top'];
assert.strictEqual(paddingTop, '40px');
```
Your `blue-box` class should give the right of the elements `20px` of `padding`.
```js
assert($('.blue-box').css('padding-right') === '20px');
const blueBox = document.querySelector('.blue-box');
const paddingRight = window.getComputedStyle(blueBox)['padding-right'];
assert.strictEqual(paddingRight, '20px');
```
Your `blue-box` class should give the bottom of the elements `20px` of `padding`.
```js
assert($('.blue-box').css('padding-bottom') === '20px');
const blueBox = document.querySelector('.blue-box');
const paddingBottom = window.getComputedStyle(blueBox)['padding-bottom'];
assert.strictEqual(paddingBottom, '20px');
```
Your `blue-box` class should give the left of the elements `40px` of `padding`.
```js
assert($('.blue-box').css('padding-left') === '40px');
const blueBox = document.querySelector('.blue-box');
const paddingLeft = window.getComputedStyle(blueBox)['padding-left'];
assert.strictEqual(paddingLeft, '40px');
```
# --seed--

19
curriculum/challenges/english/01-responsive-web-design/basic-css/add-rounded-corners-with-border-radius.md
View File

@@ -22,18 +22,23 @@ You can specify a `border-radius` with pixels. Give your cat photo a `border-rad
Your image element should have the class `thick-green-border`.
```js
assert($('img').hasClass('thick-green-border'));
assert.isTrue(document.querySelector('img').classList.contains('thick-green-border'));
```
Your image should have a border radius of `10px`.
```js
assert(
$('img').css('border-top-left-radius') === '10px' &&
$('img').css('border-top-right-radius') === '10px' &&
$('img').css('border-bottom-left-radius') === '10px' &&
$('img').css('border-bottom-right-radius') === '10px'
);
const image = document.querySelector('img');
const style = window.getComputedStyle(image);
const borderTopLeftRadius = style['border-top-left-radius'];
const borderTopRightRadius = style['border-top-right-radius'];
const borderBottomLeftRadius = style['border-bottom-left-radius'];
const borderBottomRightRadius = style['border-bottom-right-radius'];
assert.strictEqual(borderTopLeftRadius, '10px');
assert.strictEqual(borderTopRightRadius, '10px');
assert.strictEqual(borderBottomLeftRadius, '10px');
assert.strictEqual(borderBottomRightRadius, '10px');
```
# --seed--

4
curriculum/challenges/english/01-responsive-web-design/basic-css/adjust-the-margin-of-an-element.md
View File

@@ -24,7 +24,9 @@ Change the `margin` of the blue box to match that of the red box.
Your `blue-box` class should give elements `20px` of `margin`.
```js
assert($('.blue-box').css('margin-top') === '20px');
const blueBox = document.querySelector('.blue-box');
const marginTop = window.getComputedStyle(blueBox)['margin-top'];
assert.strictEqual(marginTop, '20px');
```
# --seed--

4
curriculum/challenges/english/01-responsive-web-design/basic-css/adjust-the-padding-of-an-element.md
View File

@@ -30,7 +30,9 @@ Change the `padding` of your blue box to match that of your red box.
Your `blue-box` class should give elements `20px` of `padding`.
```js
assert($('.blue-box').css('padding-top') === '20px');
const blueBox = document.querySelector('.blue-box');
const paddingTop = window.getComputedStyle(blueBox)['padding-top'];
assert.strictEqual(paddingTop, '20px');
```
# --seed--

12
curriculum/challenges/english/01-responsive-web-design/basic-css/attach-a-fallback-value-to-a-css-variable.md
View File

@@ -30,21 +30,13 @@ It looks like there is a problem with the variables supplied to the `.penguin-to
The fallback value of `black` should be used in the `background` property of the `penguin-top` class.
```js
assert(
code.match(
/.penguin-top\s*?{[\s\S]*background\s*?:\s*?var\(\s*?--pengiun-skin\s*?,\s*?black\s*?\)\s*?;[\s\S]*}[\s\S]*.penguin-bottom\s{/gi
)
);
assert.match(__helpers.removeCssComments(code), /.penguin-top\s*?{[\s\S]*background\s*?:\s*?var\(\s*?--pengiun-skin\s*?,\s*?black\s*?\)\s*?;[\s\S]*}[\s\S]*.penguin-bottom\s{/gi);
```
The fallback value of `black` should be used in `background` property of the `penguin-bottom` class.
```js
assert(
code.match(
/.penguin-bottom\s*?{[\s\S]*background\s*?:\s*?var\(\s*?--pengiun-skin\s*?,\s*?black\s*?\)\s*?;[\s\S]*}/gi
)
);
assert.match(__helpers.removeCssComments(code), /.penguin-bottom\s*?{[\s\S]*background\s*?:\s*?var\(\s*?--pengiun-skin\s*?,\s*?black\s*?\)\s*?;[\s\S]*}/gi);
```
# --seed--

8
curriculum/challenges/english/01-responsive-web-design/basic-css/change-a-variable-for-a-specific-area.md
View File

@@ -22,17 +22,13 @@ Change the value of `--penguin-belly` to `white` in the `penguin` class.
The `penguin` class should reassign the `--penguin-belly` variable to `white`.
```js
assert(
code.match(/\.penguin\s*?{[\s\S]*--penguin-belly\s*?:\s*?white\s*?;[\s\S]*}/gi)
);
assert.match(__helpers.removeCssComments(code), /\.penguin\s*?{[\s\S]*--penguin-belly\s*?:\s*?white\s*?;[\s\S]*}/gi);
```
The `penguin` class should not contain the `background-color` property.
```js
assert(
code.match(/^((?!background-color\s*?:\s*?)[\s\S])*$/g)
);
assert.match(__helpers.removeCssComments(code), /^((?!background-color\s*?:\s*?)[\s\S])*$/g);
```

6
curriculum/challenges/english/01-responsive-web-design/basic-css/change-the-color-of-text.md
View File

@@ -32,19 +32,19 @@ Change your `h2` element's style so that its text color is red.
Your `h2` element should have a `style` declaration.
```js
assert($('h2').attr('style'));
assert.exists(document.querySelector('h2').getAttribute('style'));
```
Your `h2` element should have color set to `red`.
```js
assert($('h2')[0].style.color === 'red');
assert.strictEqual(document.querySelector('h2').style.color, 'red');
```
Your `style` declaration should end with a `;` .
```js
assert($('h2').attr('style') && $('h2').attr('style').endsWith(';'));
assert.isTrue(document.querySelector('h2').getAttribute('style').endsWith(';'));
```
# --seed--

2
curriculum/challenges/english/01-responsive-web-design/basic-css/change-the-font-size-of-an-element.md
View File

@@ -26,7 +26,7 @@ Inside the same `<style>` tag that contains your `red-text` class, create an ent
Between the `style` tags, give the `p` elements `font-size` of `16px`. Browser and Text zoom should be at 100%.
```js
assert(code.match(/p\s*{\s*font-size\s*:\s*16\s*px\s*;\s*}/i));
assert.match(__helpers.removeCssComments(code), /p\s*{\s*font-size\s*:\s*16\s*px\s*;\s*}/i);
```
# --seed--

4
curriculum/challenges/english/01-responsive-web-design/basic-css/create-a-custom-css-variable.md
View File

@@ -26,9 +26,7 @@ In the `penguin` class, create a variable name `--penguin-skin` and give it a va
`penguin` class should declare the `--penguin-skin` variable and assign it to `gray`.
```js
assert(
code.match(/\.penguin\s*\{[^{}]*?--penguin-skin\s*:\s*gr[ae]y\s*;[^{}]*?\}/gi)
);
assert.match(__helpers.removeHtmlComments(code), /\.penguin\s*\{[^{}]*?--penguin-skin\s*:\s*gr[ae]y\s*;[^{}]*?\}/gi);
```
# --seed--

8
curriculum/challenges/english/01-responsive-web-design/basic-css/give-a-background-color-to-a-div-element.md
View File

@@ -28,19 +28,21 @@ Create a class called `silver-background` with the `background-color` of `silver
Your`div` element should have the class `silver-background`.
```js
assert($('div').hasClass('silver-background'));
assert.isTrue(document.querySelector('div').classList.contains('silver-background'));
```
Your `div` element should have a silver background.
```js
assert($('div').css('background-color') === 'rgb(192, 192, 192)');
const div = document.querySelector('div');
const backgroundColor = window.getComputedStyle(div)['background-color'];
assert.strictEqual(backgroundColor, 'rgb(192, 192, 192)');
```
A class named `silver-background` should be defined within the `style` element and the value of `silver` should be assigned to the `background-color` property.
```js
assert(code.match(/\.silver-background\s*{\s*background-color\s*:\s*silver\s*;?\s*}/));
assert.match(__helpers.removeHtmlComments(code), /\.silver-background\s*{\s*background-color\s*:\s*silver\s*;?\s*}/);
```
# --seed--

24
curriculum/challenges/english/01-responsive-web-design/basic-css/import-a-google-font.md
View File

@@ -40,37 +40,29 @@ Import the `Lobster` font to your web page. Then, use an element selector to set
You should import the `Lobster` font.
```js
assert($('link[href*="googleapis" i]').length);
assert.exists(document.querySelector('link[href*="googleapis" i]'));
```
Your `h2` element should use the font `Lobster`.
```js
assert(
$('h2')
.css('font-family')
.match(/lobster/i)
);
const h2 = document.querySelector('h2');
const fontFamily = window.getComputedStyle(h2)['font-family'];
assert.match(fontFamily, /lobster/i);
```
You should only use an `h2` element selector to change the font.
```js
assert(
/\s*[^\.]h2\s*\{\s*font-family\s*:\s*('|"|)Lobster\1\s*(,\s*('|"|)[a-z -]+\3\s*)?(;\s*\}|\})/gi.test(
code
)
);
assert.match(__helpers.removeHtmlComments(code), /\s*[^\.]h2\s*\{\s*font-family\s*:\s*('|"|)Lobster\1\s*(,\s*('|"|)[a-z -]+\3\s*)?(;\s*\}|\})/gi);
```
Your `p` element should still use the font `monospace`.
```js
assert(
$('p')
.css('font-family')
.match(/monospace/i)
);
const paragraphElement = document.querySelector('p');
const fontFamily = window.getComputedStyle(paragraphElement)['font-family'];
assert.match(fontFamily, /monospace/i);
```
# --seed--

10
curriculum/challenges/english/01-responsive-web-design/basic-css/improve-compatibility-with-browser-fallbacks.md
View File

@@ -23,12 +23,10 @@ It looks like a variable is being used to set the background color of the `.red-
Your `.red-box` rule should include a fallback with the `background` set to `red` immediately before the existing `background` declaration.
```js
assert(
code
.replace(/\s/g, '')
.match(
/\.red-box{background:(red|#ff0000|#f00|rgb\(255,0,0\)|rgb\(100%,0%,0%\)|hsl\(0,100%,50%\));background:var\(--red-color\);height:200px;width:200px;}/gi
)
const spacelessCode = __helpers.removeWhiteSpace(__helpers.removeCssComments(code));
assert.match(
spacelessCode,
/\.red-box{background:(red|#ff0000|#f00|rgb\(255,0,0\)|rgb\(100%,0%,0%\)|hsl\(0,100%,50%\));background:var\(--red-color\);height:200px;width:200px;}/gi
);
```

5
curriculum/challenges/english/01-responsive-web-design/basic-css/inherit-css-variables.md
View File

@@ -24,8 +24,9 @@ Define a variable named `--penguin-belly` in the `:root` selector and give it th
The `--penguin-belly` variable should be declared in the `:root` and assigned the value `pink`.
```js
assert(
code.match(/:root\s*?{[\s\S]*--penguin-belly\s*?:\s*?pink\s*?;[\s\S]*}/gi)
assert.match(
__helpers.removeCssComments(code),
/:root\s*?{[\s\S]*--penguin-belly\s*?:\s*?pink\s*?;[\s\S]*}/gi
);
```

44
curriculum/challenges/english/01-responsive-web-design/basic-css/inherit-styles-from-the-body-element.md
View File

@@ -26,61 +26,57 @@ Finally, give your `body` element the font-family of `monospace` by adding `font
You should create an `h1` element.
```js
assert($('h1').length > 0);
assert.isNotEmpty(document.querySelectorAll('h1'));
```
Your `h1` element should have the text `Hello World`.
```js
assert(
$('h1').length > 0 &&
$('h1')
.text()
.match(/hello world/i)
assert.match(
document.querySelector('h1').textContent,
/hello world/i
);
```
Your `h1` element should have a closing tag.
```js
assert(
code.match(/<\/h1>/g) &&
code.match(/<h1/g) &&
code.match(/<\/h1>/g).length === code.match(/<h1/g).length
);
const commentlessCode = __helpers.removeHtmlComments(code);
assert.match(commentlessCode, /<\/h1>/g);
assert.match(commentlessCode, /<h1/g);
assert.lengthOf(commentlessCode.match(/<\/h1>/g), commentlessCode.match(/<h1/g).length);
```
Your `body` element should have the `color` property of `green`.
```js
assert($('body').css('color') === 'rgb(0, 128, 0)');
const bodyElement = document.querySelector('body');
const color = window.getComputedStyle(bodyElement)['color'];
assert.strictEqual(color, 'rgb(0, 128, 0)');
```
Your `body` element should have the `font-family` property of `monospace`.
```js
assert(
$('body')
.css('font-family')
.match(/monospace/i)
);
const bodyElement = document.querySelector('body');
const fontFamily = window.getComputedStyle(bodyElement)['font-family'];
assert.include(fontFamily.toLowerCase(), "monospace");
```
Your `h1` element should inherit the font `monospace` from your `body` element.
```js
assert(
$('h1').length > 0 &&
$('h1')
.css('font-family')
.match(/monospace/i)
);
const h1Element = document.querySelector('h1');
const fontFamily = window.getComputedStyle(h1Element)['font-family'];
assert.include(fontFamily.toLowerCase(), "monospace");
```
Your `h1` element should inherit the color `green` from your `body` element.
```js
assert($('h1').length > 0 && $('h1').css('color') === 'rgb(0, 128, 0)');
const h1Element = document.querySelector('h1');
const color = window.getComputedStyle(h1Element)['color'];
assert.strictEqual(color, 'rgb(0, 128, 0)');
```
# --seed--

6
curriculum/challenges/english/01-responsive-web-design/basic-css/make-circular-images-with-a-border-radius.md
View File

@@ -20,13 +20,15 @@ Give your cat photo a `border-radius` of `50%`.
Your image should have a border radius of `50%`, making it perfectly circular.
```js
assert(parseInt($('img').css('border-top-left-radius')) > 48);
const image = document.querySelector('img');
const borderTopLeftRadius = window.getComputedStyle(image)['border-top-left-radius'];
assert.strictEqual(parseInt(borderTopLeftRadius), 50);
```
The `border-radius` value should use a percentage value of `50%`.
```js
assert(code.match(/50%/g));
assert.match(__helpers.removeCssComments(code), /50%/g);
```
# --seed--

18
curriculum/challenges/english/01-responsive-web-design/basic-css/override-all-other-styles-by-using-important.md
View File

@@ -32,39 +32,41 @@ color: red !important;
Your `h1` element should have the class `pink-text`.
```js
assert($('h1').hasClass('pink-text'));
assert.isTrue(document.querySelector('h1').classList.contains('pink-text'));
```
Your `h1` element should have the class `blue-text`.
```js
assert($('h1').hasClass('blue-text'));
assert.isTrue(document.querySelector('h1').classList.contains('blue-text'));
```
Your `h1` element should have the `id` of `orange-text`.
```js
assert($('h1').attr('id') === 'orange-text');
assert.strictEqual(document.querySelector('h1').getAttribute('id'), 'orange-text');
```
Your `h1` element should have the inline style of `color: white`.
```js
assert(code.match(/<h1.*style/gi) && code.match(/<h1.*style.*color\s*?:/gi));
const commentessCode = __helpers.removeHtmlComments(code);
assert.match(commentessCode, /<h1.*style/gi);
assert.match(commentessCode, /<h1.*style.*color\s*?:/gi);
```
Your `pink-text` class declaration should have the `!important` keyword to override all other declarations.
```js
assert(
code.match(/\.pink-text\s*?\{[\s\S]*?color:.*pink.*!important\s*;?[^\.]*\}/g)
);
assert.match(__helpers.removeCssComments(code), /\.pink-text\s*?\{[\s\S]*?color:.*pink.*!important\s*;?[^\.]*\}/g);
```
Your `h1` element should be pink.
```js
assert($('h1').css('color') === 'rgb(255, 192, 203)');
const h1Element = document.querySelector('h1');
const color = window.getComputedStyle(h1Element)['color'];
assert.strictEqual(color, 'rgb(255, 192, 203)');
```
# --seed--

16
curriculum/challenges/english/01-responsive-web-design/basic-css/override-class-declarations-by-styling-id-attributes.md
View File

@@ -40,43 +40,45 @@ Create a CSS declaration for your `orange-text` id in your `style` element. Here
Your `h1` element should have the class `pink-text`.
```js
assert($('h1').hasClass('pink-text'));
assert.isTrue(document.querySelector('h1').classList.contains('pink-text'));
```
Your `h1` element should have the class `blue-text`.
```js
assert($('h1').hasClass('blue-text'));
assert.isTrue(document.querySelector('h1').classList.contains('blue-text'));
```
Your `h1` element should have the id of `orange-text`.
```js
assert($('h1').attr('id') === 'orange-text');
assert.strictEqual(document.querySelector('h1').getAttribute('id'),'orange-text');
```
There should be only one `h1` element.
```js
assert($('h1').length === 1);
assert.lengthOf(document.querySelectorAll('h1'), 1);
```
Your `orange-text` id should have a CSS declaration.
```js
assert(code.match(/#orange-text\s*{/gi));
assert.match(__helpers.removeCssComments(code), /#orange-text\s*{/gi);
```
Your `h1` should not have any `style` attributes.
```js
assert(!code.match(/<h1.*style.*>/gi));
assert.notMatch(__helpers.removeHtmlComments(code), /<h1.*style.*>/gi);
```
Your `h1` element should be orange.
```js
assert($('h1').css('color') === 'rgb(255, 165, 0)');
const h1Element = document.querySelector('h1');
const color = window.getComputedStyle(h1Element)['color'];
assert.strictEqual(color, 'rgb(255, 165, 0)');
```
# --seed--

12
curriculum/challenges/english/01-responsive-web-design/basic-css/override-class-declarations-with-inline-styles.md
View File

@@ -28,31 +28,33 @@ Leave the `blue-text` and `pink-text` classes on your `h1` element.
Your `h1` element should have the class `pink-text`.
```js
assert($('h1').hasClass('pink-text'));
assert.isTrue(document.querySelector('h1').classList.contains('pink-text'));
```
Your `h1` element should have the class `blue-text`.
```js
assert($('h1').hasClass('blue-text'));
assert.isTrue(document.querySelector('h1').classList.contains('blue-text'));
```
Your `h1` element should have the id of `orange-text`.
```js
assert($('h1').attr('id') === 'orange-text');
assert.strictEqual(document.querySelector('h1').getAttribute('id'), 'orange-text');
```
Your `h1` element should have an inline style.
```js
assert(document.querySelector('h1[style]'));
assert.exists(document.querySelector('h1[style]'));
```
Your `h1` element should be white.
```js
assert($('h1').css('color') === 'rgb(255, 255, 255)');
const h1Element = document.querySelector('h1');
const color = window.getComputedStyle(h1Element)['color'];
assert.strictEqual(color, 'rgb(255, 255, 255)');
```
# --seed--

10
curriculum/challenges/english/01-responsive-web-design/basic-css/override-styles-in-subsequent-css.md
View File

@@ -34,25 +34,27 @@ However, the order of the `class` declarations in the `<style>` section is what
Your `h1` element should have the class `pink-text`.
```js
assert($('h1').hasClass('pink-text'));
assert.isTrue(document.querySelector('h1').classList.contains('pink-text'));
```
Your `h1` element should have the class `blue-text`.
```js
assert($('h1').hasClass('blue-text'));
assert.isTrue(document.querySelector('h1').classList.contains('blue-text'));
```
Both `blue-text` and `pink-text` should belong to the same `h1` element.
```js
assert($('.pink-text').hasClass('blue-text'));
assert.isTrue(document.querySelector('.pink-text').classList.contains('blue-text'));
```
Your `h1` element should be blue.
```js
assert($('h1').css('color') === 'rgb(0, 0, 255)');
const h1Element = document.querySelector('h1');
const color = window.getComputedStyle(h1Element)['color'];
assert.strictEqual(color, 'rgb(0, 0, 255)');
```
# --seed--

8
curriculum/challenges/english/01-responsive-web-design/basic-css/prioritize-one-style-over-another.md
View File

@@ -26,19 +26,21 @@ Give your `h1` element the class of `pink-text`.
Your `h1` element should have the class `pink-text`.
```js
assert($('h1').hasClass('pink-text'));
assert.isTrue(document.querySelector('h1').classList.contains('pink-text'));
```
Your `<style>` should have a `pink-text` CSS class that changes the `color`.
```js
assert(code.match(/\.pink-text\s*\{\s*color\s*:\s*.+\s*;?\s*\}/g));
assert.match(__helpers.removeCssComments(code), /\.pink-text\s*\{\s*color\s*:\s*.+\s*;?\s*\}/g);
```
Your `h1` element should be pink.
```js
assert($('h1').css('color') === 'rgb(255, 192, 203)');
const h1Element = document.querySelector('h1');
const color = window.getComputedStyle(h1Element)['color'];
assert.strictEqual(color, 'rgb(255, 192, 203)');
```
# --seed--

9
curriculum/challenges/english/01-responsive-web-design/basic-css/set-the-font-family-of-an-element.md
View File

@@ -28,12 +28,9 @@ Make all of your `p` elements use the `monospace` font.
Your `p` elements should use the font `monospace`.
```js
assert(
$('p')
.not('.red-text')
.css('font-family')
.match(/monospace/i)
);
const notRed = document.querySelector('p:not(.red-text)');
const fontFamily = window.getComputedStyle(notRed)['font-family'];
assert.match(fontFamily, /monospace/i);
```
# --seed--

2
curriculum/challenges/english/01-responsive-web-design/basic-css/set-the-id-of-an-element.md
View File

@@ -30,7 +30,7 @@ Give your `form` element the id `cat-photo-form`.
Your `form` element should have the id of `cat-photo-form`.
```js
assert($('form').attr('id') === 'cat-photo-form');
assert.strictEqual(document.querySelector('form').getAttribute('id'), 'cat-photo-form');
```
# --seed--

15
curriculum/challenges/english/01-responsive-web-design/basic-css/size-your-images.md
View File

@@ -29,19 +29,18 @@ Create a class called `smaller-image` and use it to resize the image so that it'
Your `img` element should have the class `smaller-image`.
```js
assert(
$("img[src='https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg']").attr('class')
.trim().split(/\s+/g).includes('smaller-image')
);
const relaxingCatImage = document.querySelector("img[src='https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg']");
const catImageClass = relaxingCatImage.getAttribute('class').trim().split(/\s+/g);
assert.include(catImageClass, 'smaller-image');
```
Your image should be 100 pixels wide.
```js
assert(
$('img').width() < 200 &&
code.match(/\.smaller-image\s*{\s*width\s*:\s*100px\s*(;\s*}|})/i)
);
const image = document.querySelector('img');
const width = image.getBoundingClientRect().width;
assert.isBelow(width, 200);
assert.match(__helpers.removeCssComments(code), /\.smaller-image\s*{\s*width\s*:\s*100px\s*(;\s*}|})/i);
```
# --seed--

18
curriculum/challenges/english/01-responsive-web-design/basic-css/specify-how-fonts-should-degrade.md
View File

@@ -36,33 +36,27 @@ In the last challenge, you imported the `Lobster` font using the `link` tag. Now
Your h2 element should use the font `Lobster`.
```js
assert(
$('h2')
.css('font-family')
.match(/^"?lobster/i)
);
const h2Element = document.querySelector('h2');
const fontFamily = window.getComputedStyle(h2Element)['font-family'];
assert.match(fontFamily, /^"?lobster/i);
```
Your h2 element should degrade to the font `monospace` when `Lobster` is not available.
```js
assert(
/\s*h2\s*\{\s*font-family\s*\:\s*(\'|"|)Lobster\1\s*,\s*monospace\s*;?\s*\}/gi.test(
code
)
);
assert.match(__helpers.removeCssComments(code), /\s*h2\s*\{\s*font-family\s*\:\s*(\'|"|)Lobster\1\s*,\s*monospace\s*;?\s*\}/gi);
```
You should comment out your call to Google for the `Lobster` font by putting `<!--` in front of it.
```js
assert(new RegExp('<!--[^fc]', 'gi').test(code));
assert.match(code, /<!--[^fc]/gi);
```
You should close your comment by adding `-->`.
```js
assert(new RegExp('[^fc]-->', 'gi').test(code));
assert.match(code, /[^fc]-->/gi);
```
# --seed--

24
curriculum/challenges/english/01-responsive-web-design/basic-css/style-multiple-elements-with-a-css-class.md
View File

@@ -16,34 +16,42 @@ Classes allow you to use the same CSS styles on multiple HTML elements. You can
Your `h2` element should be red.
```js
assert($('h2').css('color') === 'rgb(255, 0, 0)');
const h2Element = document.querySelector('h2');
const color = window.getComputedStyle(h2Element)['color'];
assert.strictEqual(color, 'rgb(255, 0, 0)');
```
Your `h2` element should have the class `red-text`.
```js
assert($('h2').hasClass('red-text'));
assert.isTrue(document.querySelector('h2').classList.contains('red-text'));
```
Your first `p` element should be red.
```js
assert($('p:eq(0)').css('color') === 'rgb(255, 0, 0)');
const paragraph = document.querySelectorAll('p')[0];
const color = window.getComputedStyle(paragraph )['color'];
assert.strictEqual(color, 'rgb(255, 0, 0)');
```
Your second and third `p` elements should not be red.
```js
assert(
!($('p:eq(1)').css('color') === 'rgb(255, 0, 0)') &&
!($('p:eq(2)').css('color') === 'rgb(255, 0, 0)')
);
const paragraph2 = document.querySelectorAll('p')[1];
const paragraph3 = document.querySelectorAll('p')[2];
const color2 = window.getComputedStyle(paragraph2)['color'];
const color3 = window.getComputedStyle(paragraph3)['color'];
assert.notStrictEqual(color2, 'rgb(255, 0, 0)');
assert.notStrictEqual(color3, 'rgb(255, 0, 0)');
```
Your first `p` element should have the class `red-text`.
```js
assert($('p:eq(0)').hasClass('red-text'));
assert.isTrue(document.querySelectorAll('p')[0].classList.contains('red-text'));
```
# --seed--

13
curriculum/challenges/english/01-responsive-web-design/basic-css/style-the-html-body-element.md
View File

@@ -30,23 +30,22 @@ body {
Your `body` element should have the `background-color` of black.
```js
assert($('body').css('background-color') === 'rgb(0, 0, 0)');
const body = document.querySelector('body');
const backgroundColor = window.getComputedStyle(body)['background-color'];
assert.strictEqual(backgroundColor, 'rgb(0, 0, 0)');
```
Your CSS rule should be properly formatted with both opening and closing curly brackets.
```js
assert(
code.match(/<style>\s*body\s*\{\s*background.*\s*:\s*.*;\s*\}\s*<\/style>/i)
);
assert.match(code, /<style>\s*body\s*\{\s*background.*\s*:\s*.*;\s*\}\s*<\/style>/i);
```
Your CSS rule should end with a semicolon.
```js
assert(
code.match(/<style>\s*body\s*\{\s*background.*\s*:\s*.*;\s*\}\s*<\/style>/i)
);
assert.match(code, /<style>\s*body\s*\{\s*background.*\s*:\s*.*;\s*\}\s*<\/style>/i);
```
# --seed--

15
curriculum/challenges/english/01-responsive-web-design/basic-css/understand-absolute-versus-relative-units.md
View File

@@ -26,18 +26,19 @@ Add a `padding` property to the element with class `red-box` and set it to `1.5e
Your `red-box` class should have a `padding` property.
```js
assert(
$('.red-box').css('padding-top') != '0px' &&
$('.red-box').css('padding-right') != '0px' &&
$('.red-box').css('padding-bottom') != '0px' &&
$('.red-box').css('padding-left') != '0px'
);
const redBox =document.querySelector('.red-box');
const style = window.getComputedStyle(redBox);
assert.notEqual(style['padding-top'], '0px');
assert.notEqual(style['padding-right'], '0px');
assert.notEqual(style['padding-bottom'], '0px');
assert.notEqual(style['padding-left'], '0px');
```
Your `red-box` class should give elements 1.5em of `padding`.
```js
assert(code.match(/\.red-box\s*?{[\s\S]*padding\s*:\s*?1\.5em/gi));
assert.match(__helpers.removeCssComments(code), /\.red-box\s*?{[\s\S]*padding\s*:\s*?1\.5em/gi);
```
# --seed--

10
curriculum/challenges/english/01-responsive-web-design/basic-css/use-a-css-class-to-style-an-element.md
View File

@@ -34,25 +34,27 @@ Give your `h2` element the `class` attribute with a value of `red-text`.
Your `h2` element should be red.
```js
assert($('h2').css('color') === 'rgb(255, 0, 0)');
const h2Element = document.querySelector('h2');
const color = window.getComputedStyle(h2Element)['color'];
assert.strictEqual(color, 'rgb(255, 0, 0)');
```
Your `h2` element should have the class `red-text`.
```js
assert($('h2').hasClass('red-text'));
assert.isTrue(document.querySelector('h2').classList.contains('red-text'));
```
Your stylesheet should declare a `red-text` class and have its color set to `red`.
```js
assert(code.match(/\.red-text\s*\{\s*color\s*:\s*red;?\s*\}/g));
assert.match(__helpers.removeCssComments(code), /\.red-text\s*\{\s*color\s*:\s*red;?\s*\}/g);
```
You should not use inline style declarations like `style="color: red"` in your `h2` element.
```js
assert($('h2').attr('style') === undefined);
assert.notExists(document.querySelector('h2').getAttribute('style'));
```
# --seed--

24
curriculum/challenges/english/01-responsive-web-design/basic-css/use-a-custom-css-variable.md
View File

@@ -26,41 +26,25 @@ Apply the `--penguin-skin` variable to the `background` property of the `penguin
The `--penguin-skin` variable should be applied to the `background` property of the `penguin-top` class.
```js
assert(
code.match(
/.penguin-top\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}[\s\S]*.penguin-bottom\s{/gi
)
);
assert.match(__helpers.removeCssComments(code), /.penguin-top\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}[\s\S]*.penguin-bottom\s{/gi);
```
The `--penguin-skin` variable should be applied to the `background` property of the `penguin-bottom` class.
```js
assert(
code.match(
/.penguin-bottom\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}[\s\S]*.right-hand\s{/gi
)
);
assert.match(__helpers.removeCssComments(code), /.penguin-bottom\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}[\s\S]*.right-hand\s{/gi);
```
The `--penguin-skin` variable should be applied to the `background` property of the `right-hand` class.
```js
assert(
code.match(
/.right-hand\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}[\s\S]*.left-hand\s{/gi
)
);
assert.match(__helpers.removeCssComments(code), /.right-hand\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}[\s\S]*.left-hand\s{/gi);
```
The `--penguin-skin` variable should be applied to the `background` property of the `left-hand` class.
```js
assert(
code.match(
/.left-hand\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}/gi
)
);
assert.match(__helpers.removeCssComments(code), /.left-hand\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}/gi);
```
# --seed--

12
curriculum/challenges/english/01-responsive-web-design/basic-css/use-a-media-query-to-change-a-variable.md
View File

@@ -22,21 +22,13 @@ In the `:root` selector of the media query, change it so `--penguin-size` is red
`:root` should reassign the `--penguin-size` variable to `200px`.
```js
assert(
code.match(
/media\s*?\(\s*?max-width\s*?:\s*?350px\s*?\)\s*?{[\s\S]*:root\s*?{[\s\S]*--penguin-size\s*?:\s*?200px\s*?;[\s\S]*}[\s\S]*}/gi
)
);
assert.match(__helpers.removeCssComments(code), /media\s*?\(\s*?max-width\s*?:\s*?350px\s*?\)\s*?{[\s\S]*:root\s*?{[\s\S]*--penguin-size\s*?:\s*?200px\s*?;[\s\S]*}[\s\S]*}/gi);
```
`:root` should reassign the `--penguin-skin` variable to `black`.
```js
assert(
code.match(
/media\s*?\(\s*?max-width\s*?:\s*?350px\s*?\)\s*?{[\s\S]*:root\s*?{[\s\S]*--penguin-skin\s*?:\s*?black\s*?;[\s\S]*}[\s\S]*}/gi
)
);
assert.match(__helpers.removeCssComments(code), /media\s*?\(\s*?max-width\s*?:\s*?350px\s*?\)\s*?{[\s\S]*:root\s*?{[\s\S]*--penguin-skin\s*?:\s*?black\s*?;[\s\S]*}[\s\S]*}/gi);
```
# --seed--

24
curriculum/challenges/english/01-responsive-web-design/basic-css/use-abbreviated-hex-code.md
View File

@@ -26,49 +26,57 @@ Go ahead, try using the abbreviated hex codes to color the correct elements.
Your `h1` element with the text `I am red!` should be given the `color` red.
```js
assert($('.red-text').css('color') === 'rgb(255, 0, 0)');
const redText = document.querySelector('.red-text');
const color = window.getComputedStyle(redText)['color'];
assert.strictEqual(color, 'rgb(255, 0, 0)');
```
The abbreviated hex code for the color red should be used instead of the hex code `#FF0000`.
```js
assert(code.match(/\.red-text\s*?{\s*?color\s*:\s*?#F00\s*?;?\s*?}/gi));
assert.match(code,/\.red-text\s*?{\s*?color\s*:\s*?#F00\s*?;?\s*?}/gi);
```
Your `h1` element with the text `I am green!` should be given the `color` green.
```js
assert($('.green-text').css('color') === 'rgb(0, 255, 0)');
const greenText = document.querySelector('.green-text');
const color = window.getComputedStyle(greenText)['color'];
assert.strictEqual(color, 'rgb(0, 255, 0)');
```
The abbreviated hex code for the color green should be used instead of the hex code `#00FF00`.
```js
assert(code.match(/\.green-text\s*?{\s*?color\s*:\s*?#0F0\s*?;?\s*?}/gi));
assert.match(__helpers.removeCssComments(code), /\.green-text\s*?{\s*?color\s*:\s*?#0F0\s*?;?\s*?}/gi);
```
Your `h1` element with the text `I am cyan!` should be given the `color` cyan.
```js
assert($('.cyan-text').css('color') === 'rgb(0, 255, 255)');
const cyanText = document.querySelector('.cyan-text');
const color = window.getComputedStyle(cyanText)['color'];
assert.strictEqual(color, 'rgb(0, 255, 255)');
```
The abbreviated hex code for the color cyan should be used instead of the hex code `#00FFFF`.
```js
assert(code.match(/\.cyan-text\s*?{\s*?color\s*:\s*?#0FF\s*?;?\s*?}/gi));
assert.match(__helpers.removeCssComments(code), /\.cyan-text\s*?{\s*?color\s*:\s*?#0FF\s*?;?\s*?}/gi);
```
Your `h1` element with the text `I am fuchsia!` should be given the `color` fuchsia.
```js
assert($('.fuchsia-text').css('color') === 'rgb(255, 0, 255)');
const fuchsiaText = document.querySelector('.fuchsia-text');
const color = window.getComputedStyle(fuchsiaText)['color'];
assert.strictEqual(color,'rgb(255, 0, 255)');
```
The abbreviated hex code for the color fuchsia should be used instead of the hex code `#FF00FF`.
```js
assert(code.match(/\.fuchsia-text\s*?{\s*?color\s*:\s*?#F0F\s*?;?\s*?}/gi));
assert.match(__helpers.removeCssComments(code), /\.fuchsia-text\s*?{\s*?color\s*:\s*?#F0F\s*?;?\s*?}/gi);
```
# --seed--

15
curriculum/challenges/english/01-responsive-web-design/basic-css/use-an-id-attribute-to-style-an-element.md
View File

@@ -32,28 +32,29 @@ Try giving your form, which now has the `id` attribute of `cat-photo-form`, a gr
Your `form` element should have the id of `cat-photo-form`.
```js
assert($('form').attr('id') === 'cat-photo-form');
assert.strictEqual(document.querySelector('form').getAttribute('id'), 'cat-photo-form');
```
Your `form` element should have the `background-color` of green.
```js
assert($('#cat-photo-form').css('background-color') === 'rgb(0, 128, 0)');
const catPhotoForm = document.querySelector('#cat-photo-form');
const backgroundColor = window.getComputedStyle(catPhotoForm)['background-color'];
assert.strictEqual(backgroundColor, 'rgb(0, 128, 0)');
```
Your `form` element should have an `id` attribute.
```js
assert(
code.match(/<form.*cat-photo-form.*>/gi) &&
code.match(/<form.*cat-photo-form.*>/gi).length > 0
);
assert.match(__helpers.removeHtmlComments(code), /<form.*cat-photo-form.*>/gi);
assert.lengthOf(__helpers.removeHtmlComments(code).match(/<form.*cat-photo-form.*>/gi), 1)
```
You should not give your `form` any `class` or `style` attributes.
```js
assert(!code.match(/<form.*style.*>/gi) && !code.match(/<form.*class.*>/gi));
assert.notMatch(__helpers.removeHtmlComments(code), /<form.*style.*>/gi);
assert.notMatch(__helpers.removeHtmlComments(code), /<form.*class.*>/gi);
```
# --seed--

40
curriculum/challenges/english/01-responsive-web-design/basic-css/use-attribute-selectors-to-style-elements.md
View File

@@ -30,43 +30,29 @@ Using the `type` attribute selector, try to give the checkboxes in CatPhotoApp a
The `type` attribute selector should be used to select the checkboxes.
```js
assert(
code.match(
/<style>[\s\S]*?\[\s*?type\s*?=\s*?("|')checkbox\1\s*?\]\s*?{[\s\S]*?}[\s\S]*?<\/style>/gi
)
);
assert.match(__helpers.removeHtmlComments(code), /<style>[\s\S]*?\[\s*?type\s*?=\s*?("|')checkbox\1\s*?\]\s*?{[\s\S]*?}[\s\S]*?<\/style>/gi);
```
The top margins of the checkboxes should be 10px.
```js
assert(
(function () {
var count = 0;
$("[type='checkbox']").each(function () {
if ($(this).css('marginTop') === '10px') {
count++;
}
});
return count === 3;
})()
);
const checkboxes = document.querySelectorAll("[type='checkbox']");
assert.isNotEmpty(checkboxes);
checkboxes.forEach(function(checkbox) {
const marginTop = window.getComputedStyle(checkbox)['margin-top'];
assert.strictEqual(marginTop, '10px');
});
```
The bottom margins of the checkboxes should be 15px.
```js
assert(
(function () {
var count = 0;
$("[type='checkbox']").each(function () {
if ($(this).css('marginBottom') === '15px') {
count++;
}
});
return count === 3;
})()
);
const checkboxes = document.querySelectorAll("[type='checkbox']");
assert.isNotEmpty(checkboxes);
checkboxes.forEach(function(checkbox) {
const marginBottom = window.getComputedStyle(checkbox)['margin-bottom'];
assert.strictEqual(marginBottom, '15px');
});
```
# --seed--

23
curriculum/challenges/english/01-responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-margin-of-an-element.md
View File

@@ -28,35 +28,40 @@ Use Clockwise Notation to give the element with the `blue-box` class a margin of
Your `blue-box` class should give the top of elements `40px` of `margin`.
```js
assert($('.blue-box').css('margin-top') === '40px');
const blueBox = document.querySelector('.blue-box');
const marginTop = window.getComputedStyle(blueBox)['margin-top'];
assert.strictEqual(marginTop, '40px');
```
Your `blue-box` class should give the right of elements `20px` of `margin`.
```js
assert($('.blue-box').css('margin-right') === '20px');
const blueBox = document.querySelector('.blue-box');
const marginRight = window.getComputedStyle(blueBox)['margin-right'];
assert.strictEqual(marginRight, '20px');
```
Your `blue-box` class should give the bottom of elements `20px` of `margin`.
```js
assert($('.blue-box').css('margin-bottom') === '20px');
const blueBox = document.querySelector('.blue-box');
const marginBottom = window.getComputedStyle(blueBox)['margin-bottom'];
assert.strictEqual(marginBottom, '20px');
```
Your `blue-box` class should give the left of elements `40px` of `margin`.
```js
assert($('.blue-box').css('margin-left') === '40px');
const blueBox = document.querySelector('.blue-box');
const marginLeft = window.getComputedStyle(blueBox)['margin-left'];
assert.strictEqual(marginLeft, '40px');
```
You should use the clockwise notation to set the margin of `blue-box` class.
```js
assert(
/\.blue-box\s*{[\s\S]*margin[\s]*:\s*\d+px\s+\d+px\s+\d+px\s+\d+px(;\s*[^}]+\s*}|;?\s*})/.test(
__helpers.removeCssComments($('style').text())
)
);
const cssCode = __helpers.removeCssComments(document.querySelector('style:not(.fcc-hide-header)').textContent);
assert.match(cssCode, /\.blue-box\s*{[\s\S]*margin[\s]*:\s*\d+px\s+\d+px\s+\d+px\s+\d+px(;\s*[^}]+\s*}|;?\s*})/);
```
# --seed--

23
curriculum/challenges/english/01-responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-padding-of-an-element.md
View File

@@ -26,35 +26,40 @@ Use Clockwise Notation to give the `.blue-box` class a `padding` of `40px` on it
Your `blue-box` class should give the top of elements `40px` of `padding`.
```js
assert($('.blue-box').css('padding-top') === '40px');
const blueBox = document.querySelector('.blue-box');
const paddingTop = window.getComputedStyle(blueBox)['padding-top'];
assert.strictEqual(paddingTop, '40px');
```
Your `blue-box` class should give the right of elements `20px` of `padding`.
```js
assert($('.blue-box').css('padding-right') === '20px');
const blueBox = document.querySelector('.blue-box');
const paddingRight = window.getComputedStyle(blueBox)['padding-right'];
assert.strictEqual(paddingRight, '20px');
```
Your `blue-box` class should give the bottom of elements `20px` of `padding`.
```js
assert($('.blue-box').css('padding-bottom') === '20px');
const blueBox = document.querySelector('.blue-box');
const paddingBottom = window.getComputedStyle(blueBox)['padding-bottom'];
assert.strictEqual(paddingBottom, '20px');
```
Your `blue-box` class should give the left of elements `40px` of `padding`.
```js
assert($('.blue-box').css('padding-left') === '40px');
const blueBox = document.querySelector('.blue-box');
const paddingLeft = window.getComputedStyle(blueBox)['padding-left'];
assert.strictEqual(paddingLeft, '40px');
```
You should use the clockwise notation to set the padding of `blue-box` class.
```js
assert(
/\.blue-box\s*{[\s\S]*padding[\s]*:\s*\d+px\s+\d+px\s+\d+px\s+\d+px(;\s*[^}]+\s*}|;?\s*})/.test(
__helpers.removeCssComments($('style').text())
)
);
const css = __helpers.removeCssComments(document.querySelector('style:not(.fcc-hide-header)').textContent);
assert.match(css, /\.blue-box\s*{[\s\S]*padding\s*:\s*\d+px\s+\d+px\s+\d+px\s+\d+px(;\s*[^}]+\s*}|;?\s*})/);
```
# --seed--

25
curriculum/challenges/english/01-responsive-web-design/basic-css/use-css-selectors-to-style-elements.md
View File

@@ -43,39 +43,38 @@ Delete your `h2` element's style attribute, and instead create a CSS `style` blo
The `style` attribute should be removed from your `h2` element.
```js
assert(!$('h2').attr('style'));
assert.notExists(document.querySelector('h2').getAttribute('style'));
```
You should create a `style` element.
```js
assert($('style') && $('style').length >= 1);
assert.exists(document.querySelector('style:not(.fcc-hide-header)'));
assert.isAtLeast(document.querySelectorAll('style:not(.fcc-hide-header)').length, 1);
```
Your `h2` element should be blue.
```js
assert($('h2').css('color') === 'rgb(0, 0, 255)');
const h2Element = document.querySelector('h2');
const color = window.getComputedStyle(h2Element)['color'];
assert.strictEqual(color, 'rgb(0, 0, 255)');
```
Your stylesheet `h2` declaration should be valid with a semicolon and closing brace.
```js
assert(code.match(/h2\s*\{\s*color\s*:.*;\s*\}/g));
assert.match(__helpers.removeCssComments(code), /h2\s*\{\s*color\s*:.*;\s*\}/g);
```
All your `style` elements should be valid and have closing tags.
```js
assert(
code.match(/<\/style>/g) &&
code.match(/<\/style>/g).length ===
(
code.match(
/<style((\s)*((type|media|scoped|title|disabled)="[^"]*")?(\s)*)*>/g
) || []
).length
);
assert.match(__helpers.removeHtmlComments(code), /<\/style>/g);
const closingElementLength = __helpers.removeHtmlComments(code).match(/<\/style>/g).length;
const openingElementsLength = __helpers.removeHtmlComments(code).match(/<style((\s)*((type|media|scoped|title|disabled)="[^"]*")?(\s)*)*>/g).length;
assert.strictEqual(closingElementLength, openingElementsLength);
```
# --seed--

12
curriculum/challenges/english/01-responsive-web-design/basic-css/use-css-variables-to-change-several-elements-at-once.md
View File

@@ -22,25 +22,19 @@ In the `penguin` class, change the `black` value to `gray`, the `gray` value to
`penguin` class should declare the `--penguin-skin` variable and assign it to `gray`.
```js
assert(
code.match(/.penguin\s*?{[\s\S]*--penguin-skin\s*?:\s*?gray\s*?;[\s\S]*}/gi)
);
assert.match(__helpers.removeHtmlComments(code), /.penguin\s*?{[\s\S]*--penguin-skin\s*?:\s*?gray\s*?;[\s\S]*}/gi);
```
`penguin` class should declare the `--penguin-belly` variable and assign it to `white`.
```js
assert(
code.match(/.penguin\s*?{[\s\S]*--penguin-belly\s*?:\s*?white\s*?;[\s\S]*}/gi)
);
assert.match(code, /.penguin\s*?{[\s\S]*--penguin-belly\s*?:\s*?white\s*?;[\s\S]*}/gi);
```
`penguin` class should declare the `--penguin-beak` variable and assign it to `orange`.
```js
assert(
code.match(/.penguin\s*?{[\s\S]*--penguin-beak\s*?:\s*?orange\s*?;[\s\S]*}/gi)
);
assert.match(code, /.penguin\s*?{[\s\S]*--penguin-beak\s*?:\s*?orange\s*?;[\s\S]*}/gi);
```
# --seed--

10
curriculum/challenges/english/01-responsive-web-design/basic-css/use-hex-code-for-specific-colors.md
View File

@@ -30,17 +30,15 @@ Replace the word `black` in our `body` element's background-color with its hex c
Your `body` element should have the `background-color` of black.
```js
assert($('body').css('background-color') === 'rgb(0, 0, 0)');
const body = document.querySelector('body');
const backgroundColor = window.getComputedStyle(body)['background-color'];
assert.strictEqual(backgroundColor, 'rgb(0, 0, 0)');
```
The hex code for the color black should be used instead of the word `black`.
```js
assert(
code.match(
/body\s*{(([\s\S]*;\s*?)|\s*?)background.*\s*:\s*?#000(000)?((\s*})|(;[\s\S]*?}))/gi
)
);
assert.match(code, /body\s*{(([\s\S]*;\s*?)|\s*?)background.*\s*:\s*?#000(000)?((\s*})|(;[\s\S]*?}))/gi);
```
# --seed--

25
curriculum/challenges/english/01-responsive-web-design/basic-css/use-hex-code-to-mix-colors.md
View File

@@ -30,49 +30,58 @@ Replace the color words in our `style` element with their correct hex codes.
Your `h1` element with the text `I am red!` should be given the `color` red.
```js
assert($('.red-text').css('color') === 'rgb(255, 0, 0)');
const redText = document.querySelector('.red-text');
const color = window.getComputedStyle(redText)['color'];
assert.strictEqual(color, 'rgb(255, 0, 0)');
```
The `hex code` for the color red should be used instead of the word `red`.
```js
assert(code.match(/\.red-text\s*?{\s*?color\s*:\s*?(#FF0000|#F00)\s*?;?\s*?}/gi));
assert.match(code, /\.red-text\s*?{\s*?color\s*:\s*?(#FF0000|#F00)\s*?;?\s*?}/gi);
```
Your `h1` element with the text `I am green!` should be given the `color` green.
```js
assert($('.green-text').css('color') === 'rgb(0, 255, 0)');
const greenText = document.querySelector('.green-text');
const color = window.getComputedStyle(greenText)['color'];
assert.strictEqual(color, 'rgb(0, 255, 0)');
```
The `hex code` for the color green should be used instead of the word `green`.
```js
assert(code.match(/\.green-text\s*?{\s*?color\s*:\s*?(#00FF00|#0F0)\s*?;?\s*?}/gi));
assert.match(code, /\.green-text\s*?{\s*?color\s*:\s*?(#00FF00|#0F0)\s*?;?\s*?}/gi);
```
Your `h1` element with the text `I am dodger blue!` should be given the `color` dodger blue.
```js
assert($('.dodger-blue-text').css('color') === 'rgb(30, 144, 255)');
const blueText = document.querySelector('.dodger-blue-text');
const color = window.getComputedStyle(blueText)['color'];
assert.strictEqual(color, 'rgb(30, 144, 255)');
```
The `hex code` for the color dodger blue should be used instead of the word `dodgerblue`.
```js
assert(code.match(/\.dodger-blue-text\s*?{\s*?color\s*:\s*?#1E90FF\s*?;?\s*?}/gi));
assert.match(code, /\.dodger-blue-text\s*?{\s*?color\s*:\s*?#1E90FF\s*?;?\s*?}/gi);
```
Your `h1` element with the text `I am orange!` should be given the `color` orange.
```js
assert($('.orange-text').css('color') === 'rgb(255, 165, 0)');
const orangeText = document.querySelector('.orange-text');
const color = window.getComputedStyle(orangeText)['color'];
assert.strictEqual(color, 'rgb(255, 165, 0)');
```
The `hex code` for the color orange should be used instead of the word `orange`.
```js
assert(code.match(/\.orange-text\s*?{\s*?color\s*:\s*?#FFA500\s*?;?\s*?}/gi));
assert.match(code, /\.orange-text\s*?{\s*?color\s*:\s*?#FFA500\s*?;?\s*?}/gi);
```
# --seed--

40
curriculum/challenges/english/01-responsive-web-design/basic-css/use-rgb-to-mix-colors.md
View File

@@ -22,65 +22,57 @@ Replace the hex codes in our `style` element with their correct RGB values.
Your `h1` element with the text `I am red!` should have the `color` red.
```js
assert($('.red-text').css('color') === 'rgb(255, 0, 0)');
const redText = document.querySelector('.red-text');
const color = window.getComputedStyle(redText)['color'];
assert.strictEqual(color, 'rgb(255, 0, 0)');
```
You should use `rgb` for the color red.
```js
assert(
code.match(
/\.red-text\s*{\s*color\s*:\s*rgb\(\s*255\s*,\s*0\s*,\s*0\s*\)\s*;?\s*}/gi
)
);
assert.match(code, /\.red-text\s*{\s*color\s*:\s*rgb\(\s*255\s*,\s*0\s*,\s*0\s*\)\s*;?\s*}/gi);
```
Your `h1` element with the text `I am orchid!` should have the `color` orchid.
```js
assert($('.orchid-text').css('color') === 'rgb(218, 112, 214)');
const orchidText = document.querySelector('.orchid-text');
const color = window.getComputedStyle(orchidText)['color'];
assert.strictEqual(color, 'rgb(218, 112, 214)');
```
You should use `rgb` for the color orchid.
```js
assert(
code.match(
/\.orchid-text\s*{\s*color\s*:\s*rgb\(\s*218\s*,\s*112\s*,\s*214\s*\)\s*;?\s*}/gi
)
);
assert.match(__helpers.removeCssComments(code), /\.orchid-text\s*{\s*color\s*:\s*rgb\(\s*218\s*,\s*112\s*,\s*214\s*\)\s*;?\s*}/gi);
```
Your `h1` element with the text `I am blue!` should have the `color` blue.
```js
assert($('.blue-text').css('color') === 'rgb(0, 0, 255)');
const blueText = document.querySelector('.blue-text');
const color = window.getComputedStyle(blueText)['color'];
assert.strictEqual(color, 'rgb(0, 0, 255)');
```
You should use `rgb` for the color blue.
```js
assert(
code.match(
/\.blue-text\s*{\s*color\s*:\s*rgb\(\s*0\s*,\s*0\s*,\s*255\s*\)\s*;?\s*}/gi
)
);
assert.match(__helpers.removeCssComments(code), /\.blue-text\s*{\s*color\s*:\s*rgb\(\s*0\s*,\s*0\s*,\s*255\s*\)\s*;?\s*}/gi);
```
Your `h1` element with the text `I am sienna!` should have the `color` sienna.
```js
assert($('.sienna-text').css('color') === 'rgb(160, 82, 45)');
const siennaText = document.querySelector('.sienna-text');
const color = window.getComputedStyle(siennaText)['color'];
assert.strictEqual(color, 'rgb(160, 82, 45)');
```
You should use `rgb` for the color sienna.
```js
assert(
code.match(
/\.sienna-text\s*{\s*color\s*:\s*rgb\(\s*160\s*,\s*82\s*,\s*45\s*\)\s*;?\s*}/gi
)
);
assert.match(__helpers.removeCssComments(code), /\.sienna-text\s*{\s*color\s*:\s*rgb\(\s*160\s*,\s*82\s*,\s*45\s*\)\s*;?\s*}/gi);
```
# --seed--

6
curriculum/challenges/english/01-responsive-web-design/basic-css/use-rgb-values-to-color-elements.md
View File

@@ -44,13 +44,15 @@ Let's replace the hex code in our `body` element's background color with the RGB
Your `body` element should have a black background.
```js
assert($('body').css('background-color') === 'rgb(0, 0, 0)');
const body = document.querySelector('body');
const backgroundColor = window.getComputedStyle(body)['background-color'];
assert.strictEqual(backgroundColor, 'rgb(0, 0, 0)');
```
You should use `rgb` to give your `body` element a background of black.
```js
assert(code.match(/rgb\s*\(\s*0\s*,\s*0\s*,\s*0\s*\)/gi));
assert.match(__helpers.removeCssComments(code), /rgb\s*\(\s*0\s*,\s*0\s*,\s*0\s*\)/gi);
```
# --seed--