diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-001.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-001.md index bb75227295..af6e2dcd83 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-001.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-001.md @@ -7,14 +7,32 @@ dashedName: part-1 # --description-- -Welcome to the CSS Variables skyline project! Start by adding the `!DOCTYPE html` declaration at the top of the document so the browser knows what type of document it's reading. +Welcome to the CSS Variables Skyline project! Start by adding the `!DOCTYPE html` declaration at the top of the document so the browser knows what type of document it's reading. # --hints-- -test-text +Your code should contain the `DOCTYPE` reference. ```js -assert(code.match(//gi)); +assert(code.match(/` after the type. + +```js +assert(code.match(/html\s*>/gi)); ``` # --seed-- @@ -22,10 +40,8 @@ assert(code.match(//gi)); ## --seed-contents-- ```html -``` +--fcc-editable-region-- -# --solutions-- +--fcc-editable-region-- -```html - ``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-002.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-002.md index 8ee51fc019..cad8fbec1d 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-002.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-002.md @@ -7,14 +7,38 @@ dashedName: part-2 # --description-- -Add opening and closing `html` tags below the doctype so you have a place to start putting some code. +Add opening and closing `html` tags below the `DOCTYPE` so you have a place to start putting some code. # --hints-- -test-text +Your `html` element should be below the `DOCTYPE` declaration. ```js -assert(code.match(/\s*\s*<\/html\s*>/gi)); +assert(code.match(/(?)/gi)); +``` + +Your `html` element should have an opening tag. + +```js +assert(code.match(//gi)); +``` + +Your `html` element should have a closing tag. + +```js +assert(code.match(/<\/html\s*>/)); +``` + +Your `html` tags should be in the correct order. + +```js +assert(code.match(/\s*<\/html\s*>/)); +``` + +You should only have one `html` element. + +```js +assert(document.querySelectorAll('html').length === 1); ``` # --seed-- @@ -23,13 +47,8 @@ assert(code.match(/\s*\s*<\/html\s*>/gi)); ```html -``` +--fcc-editable-region-- -# --solutions-- +--fcc-editable-region-- -```html - - - - ``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-003.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-003.md index 579e9b1083..c3e4334e9d 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-003.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-003.md @@ -7,18 +7,50 @@ dashedName: part-3 # --description-- -Next, add opening and closing `head` and `body` tags within the html element. +Next, add opening and closing `head` and `body` tags within the `html` element. # --hints-- -test-text +You should have an opening `head` tag. ```js -assert( - code.match( - /\s*\s*<\/head\s*>\s*\s*<\/body\s*>\s*<\/html\s*>/gi - ) -); +assert(code.match(//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(//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')); ``` # --seed-- @@ -27,21 +59,11 @@ assert( ```html +--fcc-editable-region-- +--fcc-editable-region-- + ``` -# --solutions-- - -```html - - - - - - - - - -``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-004.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-004.md index 982354dad2..8a0da90828 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-004.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-004.md @@ -7,18 +7,80 @@ dashedName: part-4 # --description-- -Nest opening and closing `title` and `style` tags in the head area and give your project a title of `freeCodeCamp Skyline Project`. Any styles you are asked to add during this project should go in this style area. +Add a `title` element to the `head`, and give your project a title of `freeCodeCamp Skyline Project`. Also, nest a self-closing `link` element in the `head` element. Give it a `rel` attribute value of `stylesheet`, a `type` attribute value of `text/css`, and an `href` attribute value of `styles.css`. # --hints-- -test-text +Your code should have a `title` element. ```js -assert( - code.match( - /\s*(\s*<\/style\s*>\s*freeCodeCamp Skyline Project<\/title\s*>|freeCodeCamp Skyline Project<\/title\s*>\s*\s*<\/style>)\s*<\/head\s*>/g - ) -); +const title = document.querySelector('title'); +assert.exists(title); +``` + +The `title` element should be within the `head` element. + +```js +const head = document.querySelector('head'); +// TODO: head does not contain title...body contains title +``` + +Your project should have a title of `freeCodeCamp Skyline Project`. + +```js +const title = document.querySelector('title'); +assert.equal(title.text.toLowerCase(), 'freecodecamp skyline project') +``` + +Remember, the casing and spelling matters for the title. + +```js +const title = document.querySelector('title'); +assert.equal(title.text, 'freeCodeCamp Skyline Project'); +``` + +Your code should have a `link` element. + +```js +assert.match(code, //i)); +``` + +Your `link` element should be within your `head` element. + +```js +assert(code.match(/[\w\W\s]*[\w\W\s]*<\/head>/i)) +``` + +Your `link` element should have a `rel` attribute with the value `stylesheet`. + +```js +assert.match(code, / - + +--fcc-editable-region-- - - - - -``` - -# --solutions-- - -```html - - - - freeCodeCamp Skyline Project - - - +--fcc-editable-region-- diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-005.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-005.md index 160ef4b2e6..82be89d35b 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-005.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-005.md @@ -7,18 +7,27 @@ dashedName: part-5 # --description-- -In CSS, you can target everything with an asterisk. Add a border to everything by using the `*` selector in your style area and giving it a `border` of `1px solid black`. This is a trick I like to use to help visualize where elements are and their size. You will remove this later. +In CSS, you can target everything with an asterisk. Add a border to everything by using the `*` selector, and giving it a `border` of `1px solid black`. This is a trick I like to use to help visualize where elements are and their size. You will remove this later. # --hints-- -test-text +You should use the `*` selector. ```js -assert( - code.match( - /\s*\*\s*{\s*border\s*:\s*1px\s+solid\s+black\s*;?\s*}\s*<\/style\s*>/g - ) -); +assert.exists(new __helpers.CSSHelp(document).getStyle('*')); +``` + +You should use the `border` property to style all the elements. + +```js +assert(new __helpers.CSSHelp(document).isPropertyUsed('border')); +``` + +All elements should have a `1px solid black` border. + +```js +const astStyles = new __helpers.CSSHelp(document).getStyle('*'); +assert.equal(astStyles?.border, '1px solid black'); ``` # --seed-- @@ -30,7 +39,7 @@ assert( freeCodeCamp Skyline Project - + @@ -38,21 +47,9 @@ assert( ``` -# --solutions-- +```css +--fcc-editable-region-- -```html - - - - freeCodeCamp Skyline Project - - +--fcc-editable-region-- - - - ``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-006.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-006.md index 0f4e31cd15..9dfcb82d0f 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-006.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-006.md @@ -7,14 +7,28 @@ dashedName: part-6 # --description-- -Also add a `box-sizing` of `border-box` to the everything. This will make it so the border you added doesn't add any size to your elements. +Also add a `box-sizing` of `border-box` to everything. This will make it so the border you added doesn't add any size to your elements. # --hints-- -test-text +You should use the `box-sizing` property. ```js -assert($('#display-body').css('box-sizing') === 'border-box'); +assert(new __helpers.CSSHelp(document).isPropertyUsed('box-sizing')); +``` + +You should make use of the existing `*` selector. + +```js +// Two selectors create two CSSStyleRule objects +assert.equal(new __helpers.CSSHelp(document).getStyleDeclarations('*').length, 1); +``` + +All elements should have a `box-sizing` of `border-box`. + +```js +const astStyles = new __helpers.CSSHelp(document).getStyle('*'); +assert.equal(astStyles.boxSizing, 'border-box'); ``` # --seed-- @@ -26,11 +40,7 @@ assert($('#display-body').css('box-sizing') === 'border-box'); freeCodeCamp Skyline Project - + @@ -38,22 +48,13 @@ assert($('#display-body').css('box-sizing') === 'border-box'); ``` -# --solutions-- +```css +--fcc-editable-region-- +* { + border: 1px solid black; +} -```html - - - - freeCodeCamp Skyline Project - - +--fcc-editable-region-- - - - ``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-007.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-007.md index c1a21e579a..5dcb394b32 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-007.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-007.md @@ -7,19 +7,34 @@ dashedName: part-7 # --description-- -You can see the body, it's the horizontal line on your page; the box around it is the html element. Make your body fill the whole viewport by giving it a `height` of `100vh`. Remove the default margin from the body by setting the `margin` to `0`. Finally, set the `overflow` property to `hidden` to hide any scroll bars that appear when something extends past the viewport. +You can see the `body` (it's the inner-most box on your page); the box around it is the `html` element. Make your `body` fill the whole viewport by giving it a `height` of `100vh`. Remove the default `margin` from the `body` by setting the `margin` to `0`. Finally, set the `overflow` property to `hidden` to hide any scroll bars that appear when something extends past the viewport. # --hints-- -test-text +You should use the `body` selector. ```js -const body = code.match(/body\s*{[\s\S]+?[^}]}/g)[0]; -assert( - /height\s*:\s*100vh\s*(;|})/g.test(body) && - /margin\s*:\s*(0|0px)\s*(;|})/g.test(body) && - /overflow\s*:\s*hidden\s*(;|})/g.test(body) -); +assert.exists(new __helpers.CSSHelp(document).getStyle('body')); +``` + +Your `body` should have a `height` of `100vh`. + +```js +const bodyStyles = new __helpers.CSSHelp(document).getStyle('body'); +assert.equal(bodyStyles?.height, '100vh'); +``` + +Your `body` should have a `margin` of `0`. + +```js +// TODO: Editor adds margin as preferential style - 8px is always added. +assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.margin, '0px'); +``` + +Your `body` should have the `overflow` property set to `hidden`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.overflow, 'hidden'); ``` # --seed-- @@ -31,12 +46,7 @@ assert( freeCodeCamp Skyline Project - + @@ -44,28 +54,16 @@ assert( ``` -# --solutions-- +```css +* { + border: 1px solid black; + box-sizing: border-box; +} -```html - - - - freeCodeCamp Skyline Project - - - - - +--fcc-editable-region-- + ``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-008.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-008.md index 6e5acf8f46..6cfcd45102 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-008.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-008.md @@ -7,14 +7,26 @@ dashedName: part-8 # --description-- -It's tough to see now, but there's a border at the edge of your preview, that's the body. Create a `div` element in the body with a class of `background-buildings`. This will be a container for a group of buildings. +It's tough to see now, but there's a border at the edge of your preview, that's the `body`. Create a `div` element in the `body` with a class of `background-buildings`. This will be a container for a group of buildings. # --hints-- -test-text +You should create a `div` element. ```js -assert($('#display-body')[0].contains($('div.background-buildings')[0])); +assert.exists(document.querySelector('div')); +``` + +Your `div` element should be within the `body`. + +```js +assert(document.querySelector('div')?.parentElement?.localName === 'body'); +``` + +Your `div` element should have a class of `background-buildings` + +```js +assert([...document.querySelector('div')?.classList]?.includes('background-buildings')); ``` # --seed-- @@ -26,48 +38,27 @@ assert($('#display-body')[0].contains($('div.background-buildings')[0])); freeCodeCamp Skyline Project - + - +--fcc-editable-region-- + +--fcc-editable-region-- ``` -# --solutions-- +```css +* { + border: 1px solid black; + box-sizing: border-box; +} -```html - - - - freeCodeCamp Skyline Project - - - - -
- - ``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-009.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-009.md index a00890945e..e8766f2a96 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-009.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-009.md @@ -7,17 +7,26 @@ dashedName: part-9 # --description-- -Give your background buildings element a `width` and `height` of `100%` to make it the full width and height of its parent, the body. +Give your background buildings element a `width` and `height` of `100%` to make it the full width and height of its parent, the `body`. # --hints-- -test-text +You should use the `background-buildings` class to select the correct element. ```js -const bb = code.match(/\.background-buildings\s*{[\s\S]+?[^}]}/g)[0]; -assert( - /width\s*:\s*100%\s*(;|})/g.test(bb) && /height\s*:\s*100%\s*(;|})/g.test(bb) -); +assert.exists(new __helpers.CSSHelp(document).getStyle('.background-buildings')); +``` + +Your `.background-buildings` element should have a `width` of `100%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.background-buildings')?.width, '100%'); +``` + +Your `.background-buildings` element should have a `height` of `100%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.background-buildings')?.height, '100%'); ``` # --seed-- @@ -29,18 +38,7 @@ assert( freeCodeCamp Skyline Project - + @@ -49,34 +47,21 @@ assert( ``` -# --solutions-- +```css +* { + border: 1px solid black; + box-sizing: border-box; +} -```html - - - - freeCodeCamp Skyline Project - - - - -
- - +--fcc-editable-region-- + ``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-010.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-010.md index 1a85a98692..21c3069422 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-010.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-010.md @@ -11,15 +11,34 @@ Nest a `div` with a class of `bb1` in the background buildings container. Give i # --hints-- -test-text +You should create a new `div` element. ```js -const bb1 = code.match(/\.bb1\s*{[\s\S]+?[^}]}/g)[0]; -assert( - $('.background-buildings')[0].contains($('div.bb1')[0]) && - /width\s*:\s*10%\s*(;|})/g.test(bb1) && - /height\s*:\s*70%\s*(;|})/g.test(bb1) -); +assert.equal(document.querySelectorAll('div').length, 2); +``` + +You should give the new `div` a class of `bb1`. + +```js +assert.exists(document.querySelector('div.bb1')); +``` + +You should use a `.bb1` class selector to style the element. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1')); +``` + +You should give the `.bb1` element a `width` of `10%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.width, '10%'); +``` + +You should give the `.bb1` element a `height` of `70%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.height, '70%'); ``` # --seed-- @@ -31,66 +50,33 @@ assert( freeCodeCamp Skyline Project - + +--fcc-editable-region--
+--fcc-editable-region-- ``` -# --solutions-- +```css +* { + border: 1px solid black; + box-sizing: border-box; +} -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
- - +.background-buildings { + width: 100%; + height: 100%; +} + ``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-011.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-011.md index 6f78b96a61..1ebfa1024d 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-011.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-011.md @@ -7,20 +7,53 @@ dashedName: part-11 # --description-- -Nest four `div` elements in the `bb1` container. Give them the classes `bb1a`, `bb1b`, `bb1c`, and `bb1d` in that order. This building will have four sections. +Nest four `div` elements in the `.bb1` container. Give them the classes `bb1a`, `bb1b`, `bb1c`, and `bb1d` in that order. This building will have four sections. # --hints-- -test-text +You should create four new `div` elements. ```js -const bb1 = $('.bb1')[0]; -assert( - bb1.contains($('div.bb1a')[0]) && - bb1.contains($('div.bb1b')[0]) && - bb1.contains($('div.bb1c')[0]) && - bb1.contains($('div.bb1d')[0]) -); +assert.equal(document.querySelectorAll('div')?.length, 6); +``` + +You should give one of the new `div` elements a class of `bb1a`. + +```js +assert.exists(document.querySelector('div.bb1a')); +``` + +You should give one of the new `div` elements a class of `bb1b`. + +```js +assert.exists(document.querySelector('div.bb1b')); +``` + +You should give one of the new `div` elements a class of `bb1c`. + +```js +assert.exists(document.querySelector('div.bb1c')); +``` + +You should give one of the new `div` elements a class of `bb1d`. + +```js +assert.exists(document.querySelector('div.bb1d')); +``` + +You should place the new `div` elements in the correct order. + +```js +function __t(a, b) { + return [...document.querySelector(a)?.nextElementSibling?.classList]?.includes(b); +} +assert(__t('div.bb1a','bb1b') && __t('div.bb1b','bb1c') && __t('div.bb1c','bb1d')); +``` + +You should place the new `div` elements within the `.bb1` element. + +```js +assert.equal(document.querySelectorAll('div.bb1 > div')?.length, 4); ``` # --seed-- @@ -32,78 +65,40 @@ assert( freeCodeCamp Skyline Project - +
+--fcc-editable-region--
+--fcc-editable-region--
``` -# --solutions-- +```css +* { + border: 1px solid black; + box-sizing: border-box; +} -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
- - +.bb1 { + width: 10%; + height: 70%; +} + ``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-012.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-012.md index 6c741c959d..380ebf8154 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-012.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-012.md @@ -7,27 +7,80 @@ dashedName: part-12 # --description-- -Give the parts of your building `width` and `height` properties with these values: `70%` and `10%` to `bb1a`, `80%` and `10%` to `bb1b`, `90%` and `10%` to `bb1c`, and `100%` and `70%` to `bb1d`. Remember that these percentages are relative to the parent and note that the heights will add up to 100% to fill the container vertically. +Give the parts of your building `width` and `height` properties with these values: `70%` and `10%` to `.bb1a`, `80%` and `10%` to `.bb1b`, `90%` and `10%` to `.bb1c`, and `100%` and `70%` to `.bb1d`. Remember that these percentages are relative to the parent and note that the heights will add up to 100% - vertically filling the container. # --hints-- -test-text +You should use a class selector to style `.bb1a`. ```js -const bb1a = code.match(/\.bb1a\s*{[\s\S]+?[^}]}/g)[0]; -const bb1b = code.match(/\.bb1b\s*{[\s\S]+?[^}]}/g)[0]; -const bb1c = code.match(/\.bb1c\s*{[\s\S]+?[^}]}/g)[0]; -const bb1d = code.match(/\.bb1d\s*{[\s\S]+?[^}]}/g)[0]; -assert( - /width\s*:\s*70%\s*(;|})/g.test(bb1a) && - /height\s*:\s*10%\s*(;|})/g.test(bb1a) && - /width\s*:\s*80%\s*(;|})/g.test(bb1b) && - /height\s*:\s*10%\s*(;|})/g.test(bb1b) && - /width\s*:\s*90%\s*(;|})/g.test(bb1c) && - /height\s*:\s*10%\s*(;|})/g.test(bb1c) && - /width\s*:\s*100%\s*(;|})/g.test(bb1d) && - /height\s*:\s*70%\s*(;|})/g.test(bb1d) -); +assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1a')); +``` + +You should give `.bb1a` a `width` of `70%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1a')?.width, '70%'); +``` + +You should give `.bb1a` a `height` of `10%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1a')?.height, '10%'); +``` + +You should use a class selector to style `.bb1b`. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1b')); +``` + +You should give `.bb1b` a `width` of `80%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1b')?.width, '80%'); +``` + +You should give `.bb1b` a `height` of `10%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1b')?.height, '10%'); +``` + +You should use a class selector to style `.bb1c`. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1c')); +``` + +You should give `.bb1c` a `width` of `90%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1c')?.width, '90%'); +``` + +You should give `.bb1c` a `height` of `10%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1c')?.height, '10%'); +``` + +You should use a class selector to style `.bb1d`. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1d')); +``` + +You should give `.bb1d` a `width` of `100%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.width, '100%'); +``` + +You should give `.bb1d` a `height` of `70%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.height, '70%'); ``` # --seed-- @@ -39,28 +92,7 @@ assert( freeCodeCamp Skyline Project - + @@ -76,66 +108,30 @@ assert( ``` -# --solutions-- +```css +* { + border: 1px solid black; + box-sizing: border-box; +} -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
- - ``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-013.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-013.md index 9f883d2c96..7850695cd7 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-013.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-013.md @@ -7,19 +7,37 @@ dashedName: part-13 # --description-- -Give your `bb1` element these style properties: `display: flex;`, `flex-direction: column;`, and `align-items: center;`. This will center the parts of the building using "flex" or "flexbox". You will learn about it in more detail on another project. +Give your `.bb1` element these style properties: `display: flex;`, `flex-direction: column;`, and `align-items: center;`. This will center the parts of the building using "flex" or "flexbox". You will learn about it in more detail on another project. # --hints-- -test-text +You should not change the `.bb1` `width` or `height` properties. ```js -const bb1 = $('.bb1'); -assert( - bb1.css('display') === 'flex' && - bb1.css('flex-direction') === 'column' && - bb1.css('align-items') === 'center' -); +const bb1Style = new __helpers.CSSHelp(document).getStyle('.bb1'); +assert.equal(bb1Style?.width, '10%'); +assert.equal(bb1Style?.height, '70%'); +``` + +You should give the `.bb1` element a `display` of `flex`. + +```js +const bb1Style = new __helpers.CSSHelp(document).getStyle('.bb1'); +assert.equal(bb1Style?.display, 'flex'); +``` + +You should give the `.bb1` element a `flex-direction` of `column`. + +```js +const bb1Style = new __helpers.CSSHelp(document).getStyle('.bb1'); +assert.equal(bb1Style?.flexDirection, 'column'); +``` + +You should give the `.bb1` element a `align-items` of `center`. + +```js +const bb1Style = new __helpers.CSSHelp(document).getStyle('.bb1'); +assert.equal(bb1Style?.alignItems, 'center'); ``` # --seed-- @@ -31,48 +49,7 @@ assert( freeCodeCamp Skyline Project - + @@ -88,69 +65,47 @@ assert( ``` -# --solutions-- +```css +* { + border: 1px solid black; + box-sizing: border-box; +} -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
- - +.bb1d { + width: 100%; + height: 70%; +} + ``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-014.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-014.md index 13d12ab343..cb9fbb36dd 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-014.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-014.md @@ -7,15 +7,26 @@ dashedName: part-14 # --description-- -Now you have something that is starting to resemble a building. Lets get into your first variable. Variable declarations begin with two dashes (`-`) and are given a name and a value like this: `--variable-name: value;`. In the `bb1` class, create a variable named `--building-color1` and give it a value of `#999`. +Now you have something that is starting to resemble a building. Let's get into your first variable. Variable declarations begin with two dashes (`-`) and are given a name and a value like this: `--variable-name: value;`. In the `.bb1` class, create a variable named `--building-color1` and give it a value of `#999`. # --hints-- -test-text +You should create a new variable named `--building-color1`. ```js -const bb1style = code.match(/\.bb1\s*{[\s\S]+?[^}]}/g)[0]; -assert(/--building-color1\s*:\s*#999\s*(;|\s*})/g.test(bb1style)); +assert(new __helpers.CSSHelp(document).isPropertyUsed('--building-color1')); +``` + +You should define the `--building-color1` variable within `.bb1`. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color1')); +``` + +You should give `--building-color1` a value of `#999`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color1').trim(),'#999'); ``` # --seed-- @@ -27,51 +38,7 @@ assert(/--building-color1\s*:\s*#999\s*(;|\s*})/g.test(bb1style)); freeCodeCamp Skyline Project - + @@ -87,70 +54,49 @@ assert(/--building-color1\s*:\s*#999\s*(;|\s*})/g.test(bb1style)); ``` -# --solutions-- +```css +* { + border: 1px solid black; + box-sizing: border-box; +} -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
- - +.bb1d { + width: 100%; + height: 70%; +} + ``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-015.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-015.md index 86242aa86b..409a632063 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-015.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-015.md @@ -7,19 +7,20 @@ dashedName: part-15 # --description-- -To use a variable, just put the variable name in parenthesis with `var` in front of them like this: `var(--variable-name)`. Add your variable as the value of the `background-color` property of the `bb1a` class. Whatever value you gave the variable will be applied to whatever property you use it on. In this case, your variable has the value of `#999`. So `#999` will be used as the value for the `background-color` property. +To use a variable, put the variable name in parentheses with `var` in front of them like this: `var(--variable-name)`. Add your variable as the value of the `background-color` property of the `.bb1a` class. Whatever value you gave the variable will be applied to whatever property you use it on. In this case, your variable has the value of `#999`. So `#999` will be used as the value for the `background-color` property. # --hints-- -test-text +The `background-color` of the `bb1a` element should be set. ```js -const bb1aStyle = code.match(/\.bb1a\s*{[\s\S]+?[^}]}/g)[0]; -assert( - /background-color\s*:\s*var\(\s*--building-color1\s*\)\s*(;|\s*})/g.test( - bb1aStyle - ) -); +assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1a')?.backgroundColor) +``` + +You should use `var(--building-color1)` to set the `background-color` of the `.bb1a` element. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1a')?.backgroundColor.trim(), 'var(--building-color1)'); ``` # --seed-- @@ -31,52 +32,7 @@ assert( freeCodeCamp Skyline Project - + @@ -92,71 +48,50 @@ assert( ``` -# --solutions-- +```css +* { + border: 1px solid black; + box-sizing: border-box; +} -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
- - +.bb1d { + width: 100%; + height: 70%; +} + ``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-016.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-016.md index 363e20886a..1fa9350bd3 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-016.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-016.md @@ -7,27 +7,44 @@ dashedName: part-16 # --description-- -It's that simple. Use the same variable as the `background-color` of the `bb1b`, `bb1c`, and `bb1d` classes to fill in the rest of the building. +Use the same variable as the `background-color` of the `.bb1b`, `.bb1c`, and `.bb1d` classes to fill in the rest of the building. # --hints-- -test-text +The `background-color` of the `bb1b` element should be set. ```js -const bb1bStyle = code.match(/\.bb1b\s*{[\s\S]+?[^}]}/g)[0]; -const bb1cStyle = code.match(/\.bb1c\s*{[\s\S]+?[^}]}/g)[0]; -const bb1dStyle = code.match(/\.bb1d\s*{[\s\S]+?[^}]}/g)[0]; -assert( - /background-color\s*:\s*var\(\s*--building-color1\s*\)\s*(;|\s*})/g.test( - bb1bStyle - ) && - /background-color\s*:\s*var\(\s*--building-color1\s*\)\s*(;|\s*})/g.test( - bb1cStyle - ) && - /background-color\s*:\s*var\(\s*--building-color1\s*\)\s*(;|\s*})/g.test( - bb1dStyle - ) -); +assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1b')?.backgroundColor) +``` + +You should use `var(--building-color1)` to set the `background-color` of the `.bb1b` element. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1b')?.backgroundColor.trim(), 'var(--building-color1)'); +``` + +The `background-color` of the `bb1c` element should be set. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1c')?.backgroundColor) +``` + +You should use `var(--building-color1)` to set the `background-color` of the `.bb1c` element. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1c')?.backgroundColor.trim(), 'var(--building-color1)'); +``` + +The `background-color` of the `bb1d` element should be set. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1d')?.backgroundColor) +``` + +You should use `var(--building-color1)` to set the `background-color` of the `.bb1d` element. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.backgroundColor.trim(), 'var(--building-color1)'); ``` # --seed-- @@ -39,53 +56,7 @@ assert( freeCodeCamp Skyline Project - + @@ -101,74 +72,52 @@ assert( ``` -# --solutions-- +```css +* { + border: 1px solid black; + box-sizing: border-box; +} -```html - - - - freeCodeCamp Skyline Project - - +.bb1d { + width: 100%; + height: 70%; +} +--fcc-editable-region-- - -
-
-
-
-
-
-
-
- - ``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-017.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-017.md index b057889631..9fa4d4961f 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-017.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-017.md @@ -11,11 +11,10 @@ I don't really like that color. Change the value of your variable from `#999` to # --hints-- -test-text +You should change the value of the `--building-color1` property variable from `#999` to `#aa80ff`. ```js -const bb1style = code.match(/\.bb1\s*{[\s\S]+?[^}]}/g)[0]; -assert(/--building-color1\s*:\s*#aa80ff\s*(;|\s*})/g.test(bb1style)); +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color1').trim(),'#aa80ff'); ``` # --seed-- @@ -27,56 +26,7 @@ assert(/--building-color1\s*:\s*#aa80ff\s*(;|\s*})/g.test(bb1style)); freeCodeCamp Skyline Project - + @@ -92,74 +42,57 @@ assert(/--building-color1\s*:\s*#aa80ff\s*(;|\s*})/g.test(bb1style)); ``` -# --solutions-- +```css +* { + border: 1px solid black; + box-sizing: border-box; +} -```html - - - - freeCodeCamp Skyline Project - - +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} + +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} - -
-
-
-
-
-
-
-
- - ``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-018.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-018.md index 1ebccdaa42..9e662570ca 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-018.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-018.md @@ -11,15 +11,43 @@ Your first building looks pretty good now. Let's make some more! Nest three new # --hints-- -test-text +You should create a `div` with a class of `bb2`. ```js -const bb = $('.background-buildings'); -assert( - bb.children('.bb2').length === 1 && - bb.children('.bb3').length === 1 && - bb.children('.bb4').length === 1 -); +assert.exists(document.querySelector('div.bb2')); +``` + +You should create a `div` with a class of `bb3`. + +```js +assert.exists(document.querySelector('div.bb3')); +``` + +You should create a `div` with a class of `bb4`. + +```js +assert.exists(document.querySelector('div.bb4')); +``` + +You should create 3 new `div` elements. + +```js +assert.equal(document.querySelectorAll('div')?.length, 9); +``` + +You should place these `div` elements within the `.background-buildings` element. + +```js +assert.equal(document.querySelector('div.background-buildings')?.children?.length, 4); +``` + +You should place the elements in the correct order. + +```js +function __t(a, b) { + return [...document.querySelector(a)?.nextElementSibling?.classList]?.includes(b); +} +assert(__t('div.bb1','bb2') && __t('div.bb2','bb3') && __t('div.bb3','bb4')); ``` # --seed-- @@ -31,56 +59,7 @@ assert( freeCodeCamp Skyline Project - + @@ -91,82 +70,63 @@ assert(
+--fcc-editable-region-- + +--fcc-editable-region-- ``` -# --solutions-- +```css +* { + border: 1px solid black; + box-sizing: border-box; +} -```html - - - - freeCodeCamp Skyline Project - - +.bb1c { + width: 90%; + height: 10%; + background-color: var(--building-color1); +} - -
-
-
-
-
-
-
-
-
-
-
- - +.bb1d { + width: 100%; + height: 70%; + background-color: var(--building-color1); +} + ``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-019.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-019.md index d658c537fc..4b2a3d2c55 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-019.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-019.md @@ -7,24 +7,44 @@ dashedName: part-19 # --description-- -Give the new buildings `width` and `height` properties of: `10%` and `50%` for `bb2`, `10%` and `55%` for `bb3`, and `11%` and `58%` for `bb4`. You will be using almost all percent based units and some Flexbox for this project, so everything will be completely responsive. +Give the new buildings `width` and `height` properties of: `10%` and `50%` for `.bb2`, `10%` and `55%` for `.bb3`, and `11%` and `58%` for `.bb4`. You will be using almost all percent based units and some flexbox for this project, so everything will be completely responsive. # --hints-- -test-text +You should give `.bb2` a `width` of `10%`. ```js -const bb2 = code.match(/\.bb2\s*{[\s\S]+?[^}]}/g)[0]; -const bb3 = code.match(/\.bb3\s*{[\s\S]+?[^}]}/g)[0]; -const bb4 = code.match(/\.bb4\s*{[\s\S]+?[^}]}/g)[0]; -assert( - /width\s*:\s*10%\s*(;|})/g.test(bb2) && - /height\s*:\s*50%\s*(;|})/g.test(bb2) && - /width\s*:\s*10%\s*(;|})/g.test(bb3) && - /height\s*:\s*55%\s*(;|})/g.test(bb3) && - /width\s*:\s*11%\s*(;|})/g.test(bb4) && - /height\s*:\s*58%\s*(;|})/g.test(bb4) -); +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2')?.width, '10%'); +``` + +You should give `.bb2` a `height` of `50%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2')?.height, '50%'); +``` + +You should give `.bb3` a `width` of `10%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb3')?.width, '10%'); +``` + +You should give `.bb3` a `height` of `55%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb3')?.height, '55%'); +``` + +You should give `.bb4` a `width` of `11%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb4')?.width, '11%'); +``` + +You should give `.bb4` a `height` of `58%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb4')?.height, '58%'); ``` # --seed-- @@ -36,56 +56,7 @@ assert( freeCodeCamp Skyline Project - + @@ -104,92 +75,58 @@ assert( ``` -# --solutions-- +```css +* { + border: 1px solid black; + box-sizing: border-box; +} -```html - - - - freeCodeCamp Skyline Project - - +--fcc-editable-region-- - -
-
-
-
-
-
-
-
-
-
-
- - ``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-020.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-020.md index 03b1999dcd..e30b9780d2 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-020.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-020.md @@ -7,19 +7,26 @@ dashedName: part-20 # --description-- -The buildings are stacked on top of each other and running off the screen. Let's fix that. Add the properties `display: flex;`, `align-items: flex-end;`, and `justify-content: space-evenly;` to the `background-buildings` class. This will use Flexbox again to evenly space the buildings across the bottom of the element. +The buildings are stacked on top of each other and running off the screen. Let's fix that. Add the properties `display: flex;`, `align-items: flex-end;`, and `justify-content: space-evenly;` to the `background-buildings` class. This will use flexbox again to evenly space the buildings across the bottom of the element. # --hints-- -test-text +You should add a `display` of `flex` to the `background-buildings` class. ```js -const bb = $('.background-buildings'); -assert( - bb.css('display') === 'flex' && - bb.css('align-items') === 'flex-end' && - bb.css('justify-content') === 'space-evenly' -); +assert.equal(new __helpers.CSSHelp(document).getStyle('.background-buildings')?.display, 'flex'); +``` + +You should add an `align-items` of `flex-end` to the `background-buildings` class. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.background-buildings')?.alignItems, 'flex-end'); +``` + +You should add a `justify-content` of `space-evenly` to the `background-buildings` class. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.background-buildings')?.justifyContent, 'space-evenly'); ``` # --seed-- @@ -31,71 +38,7 @@ assert( freeCodeCamp Skyline Project - + @@ -114,95 +57,70 @@ assert( ``` -# --solutions-- +```css +* { + border: 1px solid black; + box-sizing: border-box; +} -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
- - +.bb4 { + width: 11%; + height: 58%; +} + ``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-021.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-021.md index d18e714021..dece02c0f7 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-021.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-021.md @@ -7,21 +7,36 @@ dashedName: part-21 # --description-- -I don't like how spaced out the buildings are. Squeeze them together by adding two empty `div` elements to the top of the `background-buildings` element, two more at the bottom of it, and one more in between `bb3` and `bb4`. These will be added as things that are spaced evenly across the container, effectively moving the buildings closer to the center. +I don't like how spaced out the buildings are. Squeeze them together by adding two empty `div` elements to the top of the `background-buildings` element, two more at the bottom of it, and one more in between `.bb3` and `.bb4`. These will be added as evenly-spaced elements across the container, effectively moving the buildings closer to the center. # --hints-- -test-text +You should add two new `div` elements before the `.bb1` element. ```js -const bb = $('.background-buildings').children('div'); -assert( - bb.length === 9 && - bb[2] === $('div.bb1')[0] && - bb[3] === $('div.bb2')[0] && - bb[4] === $('div.bb3')[0] && - bb[6] === $('div.bb4')[0] -); +const bBuildings = document.querySelector('.background-buildings')?.children; +assert(![...bBuildings?.[0]?.classList]?.includes('bb1')); +assert(![...bBuildings?.[1]?.classList]?.includes('bb1')); +``` + +You should add one new `div` element between the `.bb3` and `.bb4` element. + +```js +assert(document.querySelector('.bb3')?.nextElementSibling === document.querySelector('.bb4')?.previousElementSibling); +``` + +You should add two new `div` elements after the `.bb4` element. + +```js +const bb4 = document.querySelector('.bb4'); +assert.exists(bb4?.nextElementSibling); +assert.exists(bb4?.nextElementSibling?.nextElementSibling); +``` + +You should add 5 new `div` elements. + +```js +assert.equal(document.querySelectorAll('div')?.length, 14); ``` # --seed-- @@ -33,77 +48,11 @@ assert( freeCodeCamp Skyline Project - + +--fcc-editable-region--
@@ -115,104 +64,78 @@ assert(
+--fcc-editable-region-- ``` -# --solutions-- +```css +* { + border: 1px solid black; + box-sizing: border-box; +} -```html - - - - freeCodeCamp Skyline Project - - +.bb3 { + width: 10%; + height: 55%; +} - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - +.bb4 { + width: 11%; + height: 58%; +} + ``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-022.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-022.md index ff31a4c043..516d968a8a 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-022.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-022.md @@ -7,21 +7,32 @@ dashedName: part-22 # --description-- -Create a new variable by the other one called `--building-color2` and give it a value of `#66cc99`. Then set it as the `background-color` of `bb2`. +Create a new variable by the other one called `--building-color2` and give it a value of `#66cc99`. Then set it as the `background-color` of `.bb2`. # --hints-- -test-text +You should define a new property variable called `--building-color2`. ```js -const bb1style = code.match(/\.bb1\s*{[\s\S]+?[^}]}/g)[0]; -const bb2style = code.match(/\.bb2\s*{[\s\S]+?[^}]}/g)[0]; -assert( - /--building-color2\s*:\s*#66cc99\s*(;|\s*})/g.test(bb1style) && - /background-color\s*:\s*var\(\s*--building-color2\s*\)\s*(;|\s*})/g.test( - bb2style - ) -); +assert.exists(new __helpers.CSSHelp(document).isPropertyUsed('--building-color2')); +``` + +You should give `--building-color2` a value of `#66cc99`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color2').trim(), '#66cc99'); +``` + +You should set the `background-color` of `.bb2`. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.bb2')?.backgroundColor); +``` + +You should set the `background-color` using the `--building-color2` variable. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2')?.backgroundColor.trim(), 'var(--building-color2)'); ``` # --seed-- @@ -33,74 +44,7 @@ assert( freeCodeCamp Skyline Project - + @@ -124,102 +68,72 @@ assert( ``` -# --solutions-- +```css +* { + border: 1px solid black; + box-sizing: border-box; +} -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - +.bb4 { + width: 11%; + height: 58%; +} + ``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-023.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-023.md index ffc58f6688..91519e234c 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-023.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-023.md @@ -7,19 +7,14 @@ dashedName: part-23 # --description-- -Hmm, I'm not sure why that didn't work. You can add a fallback value to a variable by putting it as the second value of where you use the variable like this: `var(--variable-name, fallback-value)`. The property will use the fallback value when there's a problem with the variable. Add a fallback value of `green` to the `background-color` of `bb2`. +Hmm, I'm not sure why that didn't work. You can add a fallback value to a variable by putting it as the second value of where you use the variable like this: `var(--variable-name, fallback-value)`. The property will use the fallback value when there's a problem with the variable. Add a fallback value of `green` to the `background-color` of `.bb2`. # --hints-- -test-text +You should add a fallback value of `green` to the `background-color` property. ```js -const bb2style = code.match(/\.bb2\s*{[\s\S]+?[^}]}/g)[0]; -assert( - /background-color\s*:\s*var\(\s*--building-color2\s*,\s*green\s*\)\s*(;|\s*})/g.test( - bb2style - ) -); +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2')?.backgroundColor.trim(), 'var(--building-color2, green)'); ``` # --seed-- @@ -31,76 +26,7 @@ assert( freeCodeCamp Skyline Project - + @@ -124,102 +50,74 @@ assert( ``` -# --solutions-- +```css +* { + border: 1px solid black; + box-sizing: border-box; +} -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - +.bb4 { + width: 11%; + height: 58%; +} + ``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-024.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-024.md index d1c7ea2fd2..e4eb0c91a4 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-024.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-024.md @@ -7,21 +7,32 @@ dashedName: part-24 # --description-- -Create a new variable by the other ones named `--building-color3` and give it a value of `#cc6699`. Then use it as the `background-color` of the `bb3` class and give it a fallback value of `pink`. +Create a new variable by the other ones named `--building-color3` and give it a value of `#cc6699`. Then use it as the `background-color` of the `.bb3` class and give it a fallback value of `pink`. # --hints-- -test-text +You should define a new property variable called `--building-color3`. ```js -const bb1style = code.match(/\.bb1\s*{[\s\S]+?[^}]}/g)[0]; -const bb3style = code.match(/\.bb3\s*{[\s\S]+?[^}]}/g)[0]; -assert( - /--building-color3\s*:\s*#cc6699\s*(;|\s*})/g.test(bb1style) && - /background-color\s*:\s*var\(\s*--building-color3\s*,\s*pink\s*\)\s*(;|\s*})/g.test( - bb3style - ) -); +assert.exists(new __helpers.CSSHelp(document).isPropertyUsed('--building-color3')); +``` + +You should give `--building-color3` a value of `#66cc99`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color3')?.trim(), '#cc6699'); +``` + +You should set the `background-color` of `.bb3`. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.bb3')?.backgroundColor); +``` + +You should set the `background-color` using the `--building-color3` variable with a fallback of `pink`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb3')?.backgroundColor.trim(), 'var(--building-color3, pink)'); ``` # --seed-- @@ -33,76 +44,7 @@ assert( freeCodeCamp Skyline Project - + @@ -126,104 +68,74 @@ assert( ``` -# --solutions-- +```css +* { + border: 1px solid black; + box-sizing: border-box; +} -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - ``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-025.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-025.md index e070f9f60c..1404f2b90c 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-025.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-025.md @@ -7,23 +7,40 @@ dashedName: part-25 # --description-- -That one used the fallback value as well? I see the problem now! The variables you declared in `bb1` do not cascade to the `bb2` and `bb3` sibling elements. That's just how CSS works. Because of this, variables are often declared in the `:root` selector. This is the highest level selector in CSS; putting your variables there will make them usable everywhere. Add the `:root` selector to the top of your stylesheet and move all your variable declarations there. +That one used the fallback value as well? I see the problem now! The variables you declared in `.bb1` do not cascade to the `.bb2` and `.bb3` sibling elements. That's just how CSS works. Because of this, variables are often declared in the `:root` selector. This is the highest level selector in CSS; putting your variables there will make them usable everywhere. Add the `:root` selector to the top of your stylesheet, and move all your variable declarations there. # --hints-- -test-text +You should declare a `:root` selector at the top of the stylesheet. ```js -const bb1style = code.match(/\.bb1\s*{[\s\S]+?[^}]}/g)[0]; -const rootStyle = code.match(/:root\s*{[\s\S]+?[^}]}/g)[0]; -assert( - /--building-color1\s*:\s*#aa80ff\s*(;|\s*})/g.test(rootStyle) && - /--building-color2\s*:\s*#66cc99\s*(;|\s*})/g.test(rootStyle) && - /--building-color3\s*:\s*#cc6699\s*(;|\s*})/g.test(rootStyle) && - !/--building-color1\s*:\s*#aa80ff\s*(;|\s*})/g.test(bb1style) && - !/--building-color2\s*:\s*#66cc99\s*(;|\s*})/g.test(bb1style) && - !/--building-color3\s*:\s*#cc6699\s*(;|\s*})/g.test(bb1style) -); +assert.exists(new __helpers.CSSHelp(document).getStyle(':root')); +``` + +You should define `--building-color1` with a value of `#aa80ff` in the `:root` selector. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--building-color1')?.trim(), '#aa80ff'); +``` + +You should define `--building-color2` with a value of `#66cc99` in the `:root` selector. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--building-color2')?.trim(), '#66cc99'); +``` + +You should define `--building-color3` with a value of `#cc6699` in the `:root` selector. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--building-color3')?.trim(), '#cc6699'); +``` + +You should remove the custom property variables from `.bb1`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color1')); +assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color2')); +assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color3')); ``` # --seed-- @@ -35,78 +52,7 @@ assert( freeCodeCamp Skyline Project - + @@ -130,107 +76,79 @@ assert( ``` -# --solutions-- +```css +--fcc-editable-region-- -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - +.bb4 { + width: 11%; + height: 58%; +} + ``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-026.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-026.md index ade60d0c2a..71c0fd57f1 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-026.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-026.md @@ -11,19 +11,16 @@ Now that you've worked the bugs out and the buildings are the right colors, you # --hints-- -test-text +You should remove the fallback in the `background-color` from `.bb2`. ```js -const bb2style = code.match(/\.bb2\s*{[\s\S]+?[^}]}/g)[0]; -const bb3style = code.match(/\.bb3\s*{[\s\S]+?[^}]}/g)[0]; -assert( - /background-color\s*:\s*var\(\s*--building-color2\s*\)\s*(;|\s*})/g.test( - bb2style - ) && - /background-color\s*:\s*var\(\s*--building-color3\s*\)\s*(;|\s*})/g.test( - bb3style - ) -); +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2')?.backgroundColor, 'var(--building-color2)'); +``` + +You should remove the fallback in the `background-color` from `.bb3`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb3')?.backgroundColor.trim(), 'var(--building-color3)'); ``` # --seed-- @@ -35,81 +32,7 @@ assert( freeCodeCamp Skyline Project - + @@ -133,107 +56,79 @@ assert( ``` -# --solutions-- +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; +} -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3, pink); +} +--fcc-editable-region-- +.bb4 { + width: 11%; + height: 58%; +} + ``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-027.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-027.md index 16f3836f4d..dd2a089728 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-027.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-027.md @@ -7,21 +7,20 @@ dashedName: part-27 # --description-- -Create another variable named `--building-color4` and give it a value of `#538cc6`, make sure it's in the `:root` selector this time. Then use it to fill in the last building. +Create another variable named `--building-color4` and give it a value of `#538cc6`. Make sure it's in the `:root` selector this time. Then use it to fill in the last building. # --hints-- -test-text +You should define a new property variable called `--building-color4`. ```js -const rootStyle = code.match(/:root\s*{[\s\S]+?[^}]}/g)[0]; -const bb4style = code.match(/\.bb4\s*{[\s\S]+?[^}]}/g)[0]; -assert( - /--building-color4\s*:\s*#538cc6\s*(;|\s*})/g.test(rootStyle) && - /background-color\s*:\s*var\(\s*--building-color4\s*\)\s*(;|\s*})/g.test( - bb4style - ) -); +assert.exists(new __helpers.CSSHelp(document).isPropertyUsed('--building-color4')); +``` + +You should give `--building-color4` a value of `#538cc6` in the `:root` selector. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--building-color4').trim(), '#538cc6'); ``` # --seed-- @@ -33,81 +32,7 @@ assert( freeCodeCamp Skyline Project - + @@ -131,109 +56,82 @@ assert( ``` -# --solutions-- +```css +--fcc-editable-region-- +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; +} -```html - - - - freeCodeCamp Skyline Project - - +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} + +.bb4 { + width: 11%; + height: 58%; +} +--fcc-editable-region-- - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - ``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-028.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-028.md index 553f25d1bd..7eb6a89aaa 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-028.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-028.md @@ -11,13 +11,22 @@ The background buildings are starting to look pretty good. Create a new `div` be # --hints-- -test-text +You should create a new `div` element. ```js -const bodyDivs = $('#display-body').children('div'); -assert( - bodyDivs.length === 2 && bodyDivs[1] === $('div.foreground-buildings')[0] -); +assert.equal(document.querySelectorAll('div')?.length, 15); +``` + +The new `div` should come after the `div.background-buildings` element. + +```js +assert.exists(document.querySelector('div.background-buildings + div')); +``` + +Your new `div` should have a class of `foreground-buildings`. + +```js +assert.exists(document.querySelector('div.foreground-buildings')); ``` # --seed-- @@ -29,83 +38,7 @@ assert( freeCodeCamp Skyline Project - + @@ -125,115 +58,89 @@ assert(
+--fcc-editable-region-- + +--fcc-editable-region-- ``` -# --solutions-- +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; +} -```html - - - - freeCodeCamp Skyline Project - - +.bb3 { + width: 10%; + height: 55%; + background-color: var(--building-color3); +} - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} -
- - ``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-029.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-029.md index 67e74407cc..fe23e03684 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-029.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-029.md @@ -11,16 +11,34 @@ You want the foreground buildings container to sit directly on top of the backgr # --hints-- -test-text +You should use a `.foreground-buildings` selector. ```js -const fb = code.match(/\.foreground-buildings\s*{[\s\S]+?[^}]}/g)[0]; -assert( - $('.foreground-buildings').css('position') === 'absolute' && - $('.foreground-buildings').css('top') === '0px' && - /width\s*:\s*100%\s*(;|})/g.test(fb) && - /height\s*:\s*100%\s*(;|})/g.test(fb) -); +assert.exists(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')); +``` + +You should give the `.foreground-buildings` element a `width` of `100%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.width, '100%'); +``` + +You should give the `.foreground-buildings` element a `height` of `100%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.height, '100%'); +``` + +You should give the `.foreground-buildings` element a `position` of `absolute`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.position, 'absolute'); +``` + +You should give the `.foreground-buildings` element a `top` of `0`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.top, '0px'); ``` # --seed-- @@ -32,83 +50,7 @@ assert( freeCodeCamp Skyline Project - + @@ -134,118 +76,85 @@ assert( ``` -# --solutions-- +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; +} -```html - - - - freeCodeCamp Skyline Project - - +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} +--fcc-editable-region-- - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+--fcc-editable-region-- -
- - ``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-030.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-030.md index 0b02b6556d..454b97cd7d 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-030.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-030.md @@ -7,23 +7,64 @@ dashedName: part-30 # --description-- -Nest six `div` elements within `foreground-buildings` and give them the classes of `fb1` through `fb6` in that order. "fb" stands for "foreground building". These will be six more buildings for the foreground. +Nest six `div` elements within `.foreground-buildings` and give them the classes of `fb1` through `fb6` in that order. "fb" stands for "foreground building". These will be six more buildings for the foreground. # --hints-- -test-text +You should create a new `div` with a class of `fb1`. ```js -const fb = $('.foreground-buildings').children('div'); -assert( - fb.length === 6 && - fb[0] === $('div.fb1')[0] && - fb[1] === $('div.fb2')[0] && - fb[2] === $('div.fb3')[0] && - fb[3] === $('div.fb4')[0] && - fb[4] === $('div.fb5')[0] && - fb[5] === $('div.fb6')[0] -); +assert.exists(document.querySelector('div.fb1')); +``` + +You should create a new `div` with a class of `fb2`. + +```js +assert.exists(document.querySelector('div.fb2')); +``` + +You should create a new `div` with a class of `fb3`. + +```js +assert.exists(document.querySelector('div.fb3')); +``` + +You should create a new `div` with a class of `fb4`. + +```js +assert.exists(document.querySelector('div.fb4')); +``` + +You should create a new `div` with a class of `fb5`. + +```js +assert.exists(document.querySelector('div.fb5')); +``` + +You should create a new `div` with a class of `fb6`. + +```js +assert.exists(document.querySelector('div.fb6')); +``` + +You should place these new `div` elements within the `.foreground-buildings` element. + +```js +assert.exists(document.querySelector('div.foreground-buildings > div.fb1')); +assert.exists(document.querySelector('div.foreground-buildings > div.fb2')); +assert.exists(document.querySelector('div.foreground-buildings > div.fb3')); +assert.exists(document.querySelector('div.foreground-buildings > div.fb4')); +assert.exists(document.querySelector('div.foreground-buildings > div.fb5')); +assert.exists(document.querySelector('div.foreground-buildings > div.fb6')); +``` + +You should place the new `div` elements in the correct order. + +```js +function __t(a, b) { + return [...document.querySelector(a)?.nextElementSibling?.classList]?.includes(b); +} +assert(__t('div.fb1','fb2') && __t('div.fb2','fb3') && __t('div.fb3','fb4') && __t('div.fb4', 'fb5') && __t('div.fb5', 'fb6')); ``` # --seed-- @@ -35,90 +76,7 @@ assert( freeCodeCamp Skyline Project - + @@ -138,131 +96,96 @@ assert(
- +--fcc-editable-region--
+--fcc-editable-region-- ``` -# --solutions-- +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; +} -```html - - - - freeCodeCamp Skyline Project - - +.bb4 { + width: 11%; + height: 58%; + background-color: var(--building-color4); +} - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+.foreground-buildings { + width: 100%; + height: 100%; + position: absolute; + top: 0; +} -
-
-
-
-
-
-
-
- - ``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-031.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-031.md index 508a89fa0e..80f12d8c37 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-031.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-031.md @@ -7,33 +7,116 @@ dashedName: part-31 # --description-- -Give the six new elements these `width` and `height` values: `10%` and `60%` to `fb1`, `10%` and `40%` to `fb2`, `10%` and `35%` to `fb3`, `8%` and `45%` to `fb4`, `10%` and `33%` to `fb5`, and `9%` and `38%` to `fb6`. +Give the six new elements these `width` and `height` values: `10%` and `60%` to `.fb1`, `10%` and `40%` to `.fb2`, `10%` and `35%` to `.fb3`, `8%` and `45%` to `.fb4`, `10%` and `33%` to `.fb5`, and `9%` and `38%` to `.fb6`. # --hints-- -test-text +You should create a `.fb1` selector. ```js -assert( - /\.fb1\s*{\s*(width\s*:\s*10%\s*;\s*height\s*:\s*60%\s*(;|})|height\s*:\s*60%\s*;\s*width\s*:\s*10%\s*(;|}))/g.test( - code - ) && - /\.fb2\s*{\s*(width\s*:\s*10%\s*;\s*height\s*:\s*40%\s*(;|})|height\s*:\s*40%\s*;\s*width\s*:\s*10%\s*(;|}))/g.test( - code - ) && - /\.fb3\s*{\s*(width\s*:\s*10%\s*;\s*height\s*:\s*35%\s*(;|})|height\s*:\s*35%\s*;\s*width\s*:\s*10%\s*(;|}))/g.test( - code - ) && - /\.fb4\s*{\s*(width\s*:\s*8%\s*;\s*height\s*:\s*45%\s*(;|})|height\s*:\s*45%\s*;\s*width\s*:\s*8%\s*(;|}))/g.test( - code - ) && - /\.fb5\s*{\s*(width\s*:\s*10%\s*;\s*height\s*:\s*33%\s*(;|})|height\s*:\s*33%\s*;\s*width\s*:\s*10%\s*(;|}))/g.test( - code - ) && - /\.fb6\s*{\s*(width\s*:\s*9%\s*;\s*height\s*:\s*38%\s*(;|})|height\s*:\s*38%\s*;\s*width\s*:\s*9%\s*(;|}))/g.test( - code - ) -); +assert.exists(new __helpers.CSSHelp(document).getStyle('.fb1')); +``` + +You should give the `.fb1` selector a `width` of `10%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb1')?.width, '10%'); +``` + +You should give the `.fb1` selector a `height` of `60%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb1')?.height, '60%'); +``` + +You should create a `.fb2` selector. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.fb2')); +``` + +You should give the `.fb2` selector a `width` of `10%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb2')?.width, '10%'); +``` + +You should give the `.fb2` selector a `height` of `40%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb2')?.height, '40%'); +``` + +You should create a `.fb3` selector. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.fb3')); +``` + +You should give the `.fb3` selector a `width` of `10%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb3')?.width, '10%'); +``` + +You should give the `.fb3` selector a `height` of `35%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb3')?.height, '35%'); +``` + +You should create a `.fb4` selector. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.fb4')); +``` + +You should give the `.fb4` selector a `width` of `8%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb4')?.width, '8%'); +``` + +You should give the `.fb4` selector a `height` of `45%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb4')?.height, '45%'); +``` + +You should create a `.fb5` selector. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.fb5')); +``` + +You should give the `.fb5` selector a `width` of `10%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb5')?.width, '10%'); +``` + +You should give the `.fb5` selector a `height` of `33%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb5')?.height, '33%'); +``` + +You should create a `.fb6` selector. + +```js +assert.exists(new __helpers.CSSHelp(document).getStyle('.fb6')); +``` + +You should give the `.fb6` selector a `width` of `9%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb6')?.width, '9%'); +``` + +You should give the `.fb6` selector a `height` of `38%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb6')?.height, '38%'); ``` # --seed-- @@ -45,90 +128,7 @@ assert( freeCodeCamp Skyline Project - + @@ -161,155 +161,92 @@ assert( ``` -# --solutions-- +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; +} -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
- - +--fcc-editable-region-- + ``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-032.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-032.md index 7e8477efcf..2eec0eaf33 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-032.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-032.md @@ -11,15 +11,22 @@ Add the same `display`, `align-items`, and `justify-content` properties and valu # --hints-- -test-text +You should give `.foreground-buildings` a `display` property of `flex`. ```js -const fb = $('.foreground-buildings'); -assert( - fb.css('display') === 'flex' && - fb.css('align-items') === 'flex-end' && - fb.css('justify-content') === 'space-evenly' -); +assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.display, 'flex'); +``` + +You should give `.foreground-buildings` an `align-items` property of `flex-end`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.alignItems, 'flex-end'); +``` + +You should give `.foreground-buildings` a `justify-content` property of `space-evenly`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.justifyContent, 'space-evenly'); ``` # --seed-- @@ -31,120 +38,7 @@ assert( freeCodeCamp Skyline Project - + @@ -177,158 +71,119 @@ assert( ``` -# --solutions-- +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; +} -```html - - - - freeCodeCamp Skyline Project - - +.fb5 { + width: 10%; + height: 33%; +} - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+.fb6 { + width: 9%; + height: 38%; +} -
-
-
-
-
-
-
-
- - ``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-033.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-033.md index f8255ebd50..552d8fdb23 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-033.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-033.md @@ -7,20 +7,56 @@ dashedName: part-33 # --description-- -I see some code that can be optimized. Move the `position` and `top` properties and values from `foreground-buildings` to `background-buildings`. Then select both `background-buildings` and `foreground-buildings` there, effectively applying those styles to both of the elements. You can use a comma (`,`) to separate selectors like this: `selector1, selector2`. +I see some code that can be optimized. Move the `position` and `top` properties and values from `.foreground-buildings` to `.background-buildings`. Then select both `.background-buildings` and `.foreground-buildings` there, effectively applying those styles to both of the elements. You can use a comma (`,`) to separate selectors like this: `selector1, selector2`. # --hints-- -test-text +You should not remove the `.foreground-buildings` declaration. ```js -assert( - $('.background-buildings').css('position') === 'absolute' && - $('.background-buildings').css('top') === '0px' && - /(\.background-buildings\s*,\s*\.foreground-buildings|\.foreground-buildings\s*,\s*\.background-buildings)/g.test( - code - ) -); +assert.exists(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')); +``` + +You should remove the `position` property from `.foreground-buildings`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.position); +``` + +You should remove the `top` property from `.foreground-buildings`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.top); +``` + +You should add the `position` property of `absolute` to `.background-buildings, foreground-buildings`. + +```js +function eitherOr() { + const a = new __helpers.CSSHelp(document) + return a.getStyle('.background-buildings, .foreground-buildings') ?? a.getStyle('.foreground-buildings, .background-buildings'); +} +assert.equal(eitherOr()?.position, 'absolute'); +``` + +You should add the `top` property of `0` to `.background-buildings, foreground-buildings`. + +```js +function eitherOr() { + const a = new __helpers.CSSHelp(document) + return a.getStyle('.background-buildings, .foreground-buildings') ?? a.getStyle('.foreground-buildings, .background-buildings'); +} +assert.equal(eitherOr()?.top, '0px'); +``` + +You should use a comma to use both `.foreground-buildings` and `.background-buildings` selectors in the same style declaration. + +```js +function eitherOr() { + const a = new __helpers.CSSHelp(document) + return a.getStyle('.background-buildings, .foreground-buildings') ?? a.getStyle('.foreground-buildings, .background-buildings'); +} +assert.exists(eitherOr()); ``` # --seed-- @@ -32,123 +68,7 @@ assert( freeCodeCamp Skyline Project - + @@ -181,158 +101,122 @@ assert( ``` -# --solutions-- +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; +} -```html - - - - freeCodeCamp Skyline Project - - +.fb5 { + width: 10%; + height: 33%; +} - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
- - +.fb6 { + width: 9%; + height: 38%; +} + ``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-034.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-034.md index 10577213e4..47737211d7 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-034.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-034.md @@ -7,14 +7,14 @@ dashedName: part-34 # --description-- -Now that you did that, you can delete the old `foreground-buildings` class and all of its properties since they aren't needed anymore. +Now that you did that, you can delete the old `.foreground-buildings` declaration and all of its properties since they aren't needed anymore. # --hints-- -test-text +You should delete the whole `.foreground-buildings` style declaration. ```js -assert(code.match(/\.foreground-buildings/g).length === 1); +assert.notExists(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')); ``` # --seed-- @@ -26,123 +26,7 @@ assert(code.match(/\.foreground-buildings/g).length === 1); freeCodeCamp Skyline Project - + @@ -175,150 +59,122 @@ assert(code.match(/\.foreground-buildings/g).length === 1); ``` -# --solutions-- +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; +} -```html - - - - freeCodeCamp Skyline Project - - +.fb4 { + width: 8%; + height: 45%; +} - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+.fb5 { + width: 10%; + height: 33%; +} -
-
-
-
-
-
-
-
- - +.fb6 { + width: 9%; + height: 38%; +} + ``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-035.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-035.md index d30bb4248f..7d42b86a1d 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-035.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-035.md @@ -7,21 +7,44 @@ dashedName: part-35 # --description-- -The skyline is coming together. Fill in the `background-color` property of the foreground buildings. Use your `--building-color1` variable to fill in `fb3` and `fb4`, `--building-color2` for `fb5`, `--building-color3` for `fb2` and `fb6`, and `--building-color4` for `fb1`. +The skyline is coming together. Fill in the `background-color` property of the foreground buildings. Use your `--building-color1` variable to fill in `.fb3` and `.fb4`, `--building-color2` for `.fb5`, `--building-color3` for `.fb2` and `.fb6`, and `--building-color4` for `.fb1`. # --hints-- -test-text +You should give `.fb1` a `background-color` using `--building-color4`. ```js -assert( - $('.fb1').css('background-color') === 'rgb(83, 140, 198)' && - $('.fb2').css('background-color') === 'rgb(204, 102, 153)' && - $('.fb3').css('background-color') === 'rgb(170, 128, 255)' && - $('.fb4').css('background-color') === 'rgb(170, 128, 255)' && - $('.fb5').css('background-color') === 'rgb(102, 204, 153)' && - $('.fb6').css('background-color') === 'rgb(204, 102, 153)' -); +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb1')?.backgroundColor.trim(), 'var(--building-color4)'); +``` + +You should give `.fb2` a `background-color` using `--building-color3`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb2')?.backgroundColor, 'var(--building-color3)'); +``` + +You should give `.fb3` a `background-color` using `--building-color1`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb3')?.backgroundColor, 'var(--building-color1)'); +``` + +You should give `.fb4` a `background-color` using `--building-color1`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb4')?.backgroundColor, 'var(--building-color1)'); +``` + +You should give `.fb5` a `background-color` using `--building-color2`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb5')?.backgroundColor, 'var(--building-color2)'); +``` + +You should give `.fb6` a `background-color` using `--building-color3`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb6')?.backgroundColor, 'var(--building-color3)'); ``` # --seed-- @@ -33,115 +56,7 @@ assert( freeCodeCamp Skyline Project - + @@ -174,156 +89,114 @@ assert( ``` -# --solutions-- +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; +} -```html - - - - freeCodeCamp Skyline Project - - +.fb4 { + width: 8%; + height: 45%; +} - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+.fb5 { + width: 10%; + height: 33%; +} + +.fb6 { + width: 9%; + height: 38%; +} +--fcc-editable-region-- -
-
-
-
-
-
-
-
- - ``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-036.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-036.md index ef257421f3..2446ee4de8 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-036.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-036.md @@ -7,23 +7,37 @@ dashedName: part-36 # --description-- -Squeeze the buildings together again by adding two empty `div` elements at both the top and bottom of the `foreground-buildings` element, and one more in between `fb2` and `fb3`. +Squeeze the buildings together again by adding two empty `div` elements within both the top and bottom of the `.foreground-buildings` element, and one more in between `.fb2` and `.fb3`. # --hints-- -test-text +You should add two `div` elements as the first children of `.foreground-buildings`. ```js -const fb = $('.foreground-buildings').children('div'); -assert( - fb.length === 11 && - fb[2] === $('div.fb1')[0] && - fb[3] === $('div.fb2')[0] && - fb[5] === $('div.fb3')[0] && - fb[6] === $('div.fb4')[0] && - fb[7] === $('div.fb5')[0] && - fb[8] === $('div.fb6')[0] -); +const bBuildings = document.querySelector('.background-buildings')?.children; +assert(![...bBuildings?.[0]?.classList]?.includes('fb1')); +assert(![...bBuildings?.[1]?.classList]?.includes('fb1')); +``` + +You should add one `div` element between `.fb2` and `.fb3`. + +```js +assert(document.querySelector('.fb2')?.nextElementSibling === document.querySelector('.fb3')?.previousElementSibling); +``` + + +You should add two `div` elements as the last children of `.foreground-buildings`. + +```js +const fb6 = document.querySelector('.fb6'); +assert.exists(fb6?.nextElementSibling); +assert.exists(fb6?.nextElementSibling?.nextElementSibling); +``` + +You should have added 5 new `div` elements. + +```js +assert.equal(document.querySelectorAll('div')?.length, 26); ``` # --seed-- @@ -35,121 +49,7 @@ assert( freeCodeCamp Skyline Project - + @@ -169,7 +69,7 @@ assert(
- +--fcc-editable-region--
@@ -178,165 +78,125 @@ assert(
+--fcc-editable-region-- ``` -# --solutions-- +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; +} -```html - - - - freeCodeCamp Skyline Project - - +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); +} -
-
-
-
-
-
-
-
-
-
-
-
-
- - +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + ``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-037.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-037.md index 40e6630ecb..a7d2b2524b 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-037.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-037.md @@ -7,21 +7,32 @@ dashedName: part-37 # --description-- -Move the position of `fb4` relative to where it is now by adding a `position` of `relative` and `left` of `10%` to it. Do the same for `fb5` but use `right` instead of `left`. This will cover up the remaining white space in between the buildings. +Move the position of `.fb4` relative to where it is now by adding a `position` of `relative` and `left` of `10%` to it. Do the same for `.fb5` but use `right` instead of `left`. This will cover up the remaining white space in between the buildings. # --hints-- -test-text +You should give `.fb4` a `position` of `relative`. ```js -const fb4style = code.match(/\.fb4\s*{[\s\S]+?[^}]}/g)[0]; -const fb5style = code.match(/\.fb5\s*{[\s\S]+?[^}]}/g)[0]; -assert( - $('.fb4').css('position') === 'relative' && - $('.fb5').css('position') === 'relative' && - /left\s*:\s*10%\s*(;|})/g.test(fb4style) && - /right\s*:\s*10%\s*(;|})/g.test(fb5style) -); +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb4')?.position, 'relative'); +``` + +You should give `.fb4` a `left` of `10%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb4')?.left, '10%'); +``` + +You should give `.fb5` a `position` of `relative`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb5')?.position, 'relative'); +``` + +You should give `.fb5` a `right` of `10%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.fb5')?.right, '10%'); ``` # --seed-- @@ -33,121 +44,7 @@ assert( freeCodeCamp Skyline Project - + @@ -185,165 +82,120 @@ assert( ``` -# --solutions-- +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; +} -```html - - - - freeCodeCamp Skyline Project - - +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} +--fcc-editable-region-- +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); +} - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
- - +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); +} +--fcc-editable-region-- +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + ``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-038.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-038.md index f17be995d4..952920a88c 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-038.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-038.md @@ -7,21 +7,20 @@ dashedName: part-38 # --description-- -Your code is starting to get quite long. Add a comment above the `fb1` class that says `FOREGROUND BUILDINGS - "fb" stands for "foreground building"` to help people understand your code. Above the `bb1` class add another comment that says `BACKGROUND BUILDINGS - "bb" stands for "background building"`. If you don't remember, comments in CSS look like this: `/* Comment here */`. +Your code is starting to get quite long. Add a comment above the `.fb1` class that says `FOREGROUND BUILDINGS - "fb" stands for "foreground building"` to help people understand your code. Above the `.bb1` class add another comment that says `BACKGROUND BUILDINGS - "bb" stands for "background building"`. If you don't remember, comments in CSS look like this: `/* Comment here */`. # --hints-- -test-text +You should add the comment `BACKGROUND BUILDINGS - "bb" stands for "background building"` above the `.bb1` selector. ```js -assert( - /\/\*\s*BACKGROUND BUILDINGS - "bb" stands for "background building"\s*\*\//g.test( - code - ) && - /\/\*\s*FOREGROUND BUILDINGS - "fb" stands for "foreground building"\s*\*\//g.test( - code - ) -); +assert(/\/\*\s*BACKGROUND BUILDINGS - "bb" stands for "background building"\s*\*\//gi.test(code)); +``` + +You should add the comment `FOREGROUND BUILDINGS - "fb" stands for "foreground building"` above the `.fb1` selector. + +```js +assert(/\/\*\s*FOREGROUND BUILDINGS - "fb" stands for "foreground building"\s*\*\//gi.test(code)); ``` # --seed-- @@ -33,125 +32,7 @@ assert( freeCodeCamp Skyline Project - + @@ -189,167 +70,126 @@ assert( ``` -# --solutions-- +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; +} -```html - - - - freeCodeCamp Skyline Project - - +.fb1 { + width: 10%; + height: 60%; + background-color: var(--building-color4); +} +--fcc-editable-region-- +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} -
-
-
-
-
-
-
-
-
-
-
-
-
- - +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + ``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-039.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-039.md index cec0968b72..2500b94d10 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-039.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-039.md @@ -11,11 +11,16 @@ Create a new variable in `:root` called `--window-color1` and give it a value of # --hints-- -test-text +You should create a new variable in `:root` called `--window-color1`. ```js -const rootStyle = code.match(/:root\s*{[\s\S]+?[^}]}/g)[0]; -assert(/--window-color1\s*:\s*black\s*(;|})/g.test(rootStyle)); +assert(new __helpers.CSSHelp(document).isPropertyUsed('--window-color1')); +``` + +You should give the property variable `--window-color1` a value of `black`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--window-color1').trim(), 'black'); ``` # --seed-- @@ -27,127 +32,7 @@ assert(/--window-color1\s*:\s*black\s*(;|})/g.test(rootStyle)); freeCodeCamp Skyline Project - + @@ -185,168 +70,127 @@ assert(/--window-color1\s*:\s*black\s*(;|})/g.test(rootStyle)); ``` -# --solutions-- +```css +--fcc-editable-region-- +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; +} +--fcc-editable-region-- +* { + border: 1px solid black; + box-sizing: border-box; +} -```html - - - - freeCodeCamp Skyline Project - - +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} -
-
-
-
-
-
-
-
-
-
-
-
-
- - +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + ``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-040.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-040.md index 92a10ed9d3..ba9e697cb8 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-040.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-040.md @@ -16,19 +16,32 @@ gradient-type( ); ``` -In the example, `color1` is solid at the top, `color2` is solid at the bottom, and in between it transitions evenly from one to the next. In `bb1a`, add a gradient of type `linear-gradient` to the `background` property with `--building-color1` as the first color and `--window-color1` as the second. +In the example, `color1` is solid at the top, `color2` is solid at the bottom, and in between it transitions evenly from one to the next. In `.bb1a`, add a gradient of type `linear-gradient` to the `background` property with `--building-color1` as the first color and `--window-color1` as the second. # --hints-- -test-text +You should apply a `background` to `.bb1a`. ```js -const bb1a = code.match(/\.bb1a\s*{[\s\S]+?[^}]}/g)[0]; -assert( - /background\s*:\s*linear-gradient\(\s*var\(\s*--building-color1\s*\)\s*,\s*var\(\s*--window-color1\s*\)\s*\)\s*(;|})/g.test( - bb1a - ) -); +assert(new __helpers.CSSHelp(document).getStyle('.bb1a')?.background); +``` + +You should give the `background` a `linear-gradient`. + +```js +assert.include(new __helpers.CSSHelp(document).getStyle('.bb1a')?.background, 'linear-gradient'); +``` + +You should give the `background` a `linear-gradient` starting from `--building-color1`. + +```js +assert.include(new __helpers.CSSHelp(document).getStyle('.bb1a')?.getPropVal('background', true), 'linear-gradient(var(--building-color1'); +``` + +You should give the `background` a `linear-gradient` ending at `--window-color1`. + +```js +assert.include(new __helpers.CSSHelp(document).getStyle('.bb1a')?.getPropVal('background', true), 'linear-gradient(var(--building-color1),var(--window-color1))'); ``` # --seed-- @@ -40,128 +53,7 @@ assert( freeCodeCamp Skyline Project - + @@ -199,172 +91,127 @@ assert( ``` -# --solutions-- +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; +} -```html - - - - freeCodeCamp Skyline Project - - +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} -
-
-
-
-
-
-
-
-
-
-
-
-
- - +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + ``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-041.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-041.md index 5ebf3bdbb8..7e0922a857 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-041.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-041.md @@ -7,20 +7,40 @@ dashedName: part-41 # --description-- -You want to add the same gradient to the next two sections. But instead of doing that, create a new class called `bb1-window` and move the `height` and `background` properties and values from `bb1a` to the new class. +You want to add the same gradient to the next two sections. Instead of doing that, create a new class called `bb1-window`, and move the `height` and `background` properties and values from `.bb1a` to the new class. # --hints-- -test-text +You should create a new class declaration called `bb1-window`. ```js -const bb1wStyle = code.match(/\.bb1-window\s*{[\s\S]+?[^}]}/g)[0]; -assert( - /height\s*:\s*10%\s*(;|})/g.test(bb1wStyle) && - /background\s*:\s*linear-gradient\(\s*var\(\s*--building-color1\s*\)\s*,\s*var\(\s*--window-color1\s*\)\s*\)\s*(;|})/g.test( - bb1wStyle - ) -); +assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1-window')); +``` + +You should move the `height` property and value from `.bb1a` to `.bb1-window`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1a')?.height); +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1-window')?.height, '10%'); +``` + +You should move the `background` property and value from `.bb1a` to `.bb1-window`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1a')?.background); +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1-window')?.getPropVal('background', true), 'linear-gradient(var(--building-color1),var(--window-color1))'); +``` + +You should not move the `background-color` property from `.bb1a`. + +```js +assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.bb1a')?.backgroundColor); +``` + +You should not move the `width` property from `.bb1a`. + +```js +assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.bb1a')?.width); ``` # --seed-- @@ -32,132 +52,7 @@ assert( freeCodeCamp Skyline Project - + @@ -195,175 +90,133 @@ assert( ``` -# --solutions-- +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; +} -```html - - - - freeCodeCamp Skyline Project - - +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} -
-
-
-
-
-
-
-
-
-
-
-
-
- - +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + ``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-042.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-042.md index 1a744bda1e..73b06d9418 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-042.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-042.md @@ -7,18 +7,51 @@ dashedName: part-42 # --description-- -Add the new `bb1-window` class to the `bb1a`, `bb1b`, and `bb1c` elements. This will apply the gradient to them. +Add the new `bb1-window` class to the `.bb1a`, `.bb1b`, and `.bb1c` elements. This will apply the gradient to them. # --hints-- -test-text +You should not remove the `bb1a` class. ```js -assert( - $('.bb1a.bb1-window').length === 1 && - $('.bb1b.bb1-window').length === 1 && - $('.bb1c.bb1-window').length === 1 -); +assert.exists(document.querySelector('div.bb1a')); +``` + +You should add the `bb1-window` class to the `.bb1a` element. + +```js +assert.exists(document.querySelector('div.bb1a.bb1-window')); +``` + +You should not remove the `bb1b` class. + +```js +assert.exists(document.querySelector('div.bb1b')); +``` + +You should add the `bb1-window` class to the `.bb1b` element. + +```js +assert.exists(document.querySelector('div.bb1b.bb1-window')); +``` + +You should not remove the `bb1c` class. + +```js +assert.exists(document.querySelector('div.bb1c')); +``` + +You should add the `bb1-window` class to the `.bb1c` element. + +```js +assert.exists(document.querySelector('div.bb1c.bb1-window')); +``` + +You should not change the `.bb1d` element. + +```js +assert.exists(document.querySelector('div.bb1d')); +assert.notExists(document.querySelector('div.bb1d.bb1-window')); ``` # --seed-- @@ -30,147 +63,21 @@ assert( freeCodeCamp Skyline Project - +
+--fcc-editable-region--
+--fcc-editable-region--
@@ -196,175 +103,134 @@ assert( ``` -# --solutions-- +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; +} -```html - - - - freeCodeCamp Skyline Project - - +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} -
-
-
-
-
-
-
-
-
-
-
-
-
- - +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + ``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-043.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-043.md index 688527e451..0987efbe54 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-043.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-043.md @@ -7,21 +7,38 @@ dashedName: part-43 # --description-- -You don't need the `height` or `background-color` properties in `bb1a`, `bb1b` or `bb1c` anymore, so go ahead and remove them. +You don't need the `height` or `background-color` properties in `.bb1a`, `.bb1b` or `.bb1c` anymore, so go ahead and remove them. # --hints-- -test-text +You should remove the `background-color` from `.bb1a`. ```js -const bb1aStyle = code.match(/\.bb1a\s*{[\s\S]+?[^}]}/g)[0]; -const bb1bStyle = code.match(/\.bb1b\s*{[\s\S]+?[^}]}/g)[0]; -const bb1cStyle = code.match(/\.bb1c\s*{[\s\S]+?[^}]}/g)[0]; -assert( - !/(height|background-color)/g.test(bb1aStyle) && - !/(height|background-color)/g.test(bb1bStyle) && - !/(height|background-color)/g.test(bb1cStyle) -); +assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1a')?.backgroundColor); +``` + +You should remove the `height` property from `.bb1b`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1b')?.height); +``` + +You should remove the `background-color` property from `.bb1b`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1b')?.backgroundColor); +``` + +You should remove the `height` property from `.bb1c`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1c')?.height); +``` + +You should remove the `background-color` property from `.bb1c`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1c')?.backgroundColor); ``` # --seed-- @@ -33,135 +50,7 @@ assert( freeCodeCamp Skyline Project - + @@ -199,170 +88,134 @@ assert( ``` -# --solutions-- +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; +} -```html - - - - freeCodeCamp Skyline Project - - +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} -
-
-
-
-
-
-
-
-
-
-
-
-
- - +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + ``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-044.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-044.md index 39cde56440..a823d98993 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-044.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-044.md @@ -17,19 +17,38 @@ gradient-type( ); ``` -Add a `linear-gradient` to `bb1d` with `orange` as the first color, `--building-color1` as the second, and `--window-color1` as the third. Remember to use the gradient on the `background` property. +Add a `linear-gradient` to `.bb1d` with `orange` as the first color, `--building-color1` as the second, and `--window-color1` as the third. Remember to use the gradient on the `background` property. # --hints-- -test-text +You should use the `background` on `.bb1d`. ```js -const bb1d = code.match(/\.bb1d\s*{[\s\S]+?[^}]}/g)[0]; -assert( - /background\s*:\s*linear-gradient\(\s*orange\s*,\s*var\(\s*--building-color1\s*\)\s*,\s*var\(\s*--window-color1\s*\)\s*\)\s*(;|})/g.test( - bb1d - ) -); +assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.bb1d')?.background); +``` + +You should give the `background` property a `linear-gradient`. + +```js +assert.include(new __helpers.CSSHelp(document).getStyle('.bb1d')?.background, 'linear-gradient'); +``` + +You should use `orange` as the first color in the `linear-gradient`. + +```js +assert.include(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background', true), 'linear-gradient(orange'); +``` + +You should use `--building-color1` as the second color in the `linear-gradient`. + +```js +assert.include(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background', true), 'linear-gradient(orange,var(--building-color1)'); +``` + +You should use `--window-color1` as the third color in the `linear-gradient`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background', true), 'linear-gradient(orange,var(--building-color1),var(--window-color1))'); ``` # --seed-- @@ -41,130 +60,7 @@ assert( freeCodeCamp Skyline Project - + @@ -202,175 +98,129 @@ assert( ``` -# --solutions-- +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; +} -```html - - - - freeCodeCamp Skyline Project - - +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} -
-
-
-
-
-
-
-
-
-
-
-
-
- - +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + ``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-045.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-045.md index da9dce02c7..746f663724 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-045.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-045.md @@ -7,15 +7,14 @@ dashedName: part-45 # --description-- -It's a little hidden behind the foreground buildings, but you can see the three color gradient there. Since you are using that now, remove the `background-color` property from `bb1d`. +It's a little hidden behind the foreground buildings, but you can see the three color gradient there. Since you are using that now, remove the `background-color` property from `.bb1d`. # --hints-- -test-text +You should remove the `background-color` property and value from `.bb1d` ```js -const bb1dStyle = code.match(/\.bb1d\s*{[\s\S]+?[^}]}/g)[0]; -assert(!/background-color/g.test(bb1dStyle)); +assert.notMatch(code, /\.bb1d\s*\{\s*[^}]*?background-color[^}]*?\}/); ``` # --seed-- @@ -27,135 +26,7 @@ assert(!/background-color/g.test(bb1dStyle)); freeCodeCamp Skyline Project - + @@ -193,174 +64,134 @@ assert(!/background-color/g.test(bb1dStyle)); ``` -# --solutions-- +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; +} -```html - - - - freeCodeCamp Skyline Project - - +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} -
-
-
-
-
-
-
-
-
-
-
-
-
- - +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + ``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-046.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-046.md index dfbbe34dbf..243858d707 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-046.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-046.md @@ -17,19 +17,14 @@ gradient-type( ); ``` -Here, it will transition from `color1` to `color2` between `0%` and `20%` of the element and then transition to `color3` for the rest. Add `80%` to the `--building-color1` color of the `bb1d` gradient so you can see it in action. +Here, it will transition from `color1` to `color2` between `0%` and `20%` of the element and then transition to `color3` for the rest. Add `80%` to the `--building-color1` color of the `.bb1d` gradient so you can see it in action. # --hints-- -test-text +You should add a value of `80%` to the `--building-color1` color in the `linear-gradient` of `.bb1d`. ```js -const bb1d = code.match(/\.bb1d\s*{[\s\S]+?[^}]}/g)[0]; -assert( - /background\s*:\s*linear-gradient\(\s*orange\s*,\s*var\(\s*--building-color1\s*\)\s*80%\s*,\s*var\(\s*--window-color1\s*\)\s*\)\s*(;|})/g.test( - bb1d - ) -); +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background', true), 'linear-gradient(orange,var(--building-color1)80%,var(--window-color1))'); ``` # --seed-- @@ -41,134 +36,7 @@ assert( freeCodeCamp Skyline Project - + @@ -206,174 +74,133 @@ assert( ``` -# --solutions-- +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; +} -```html - - - - freeCodeCamp Skyline Project - - +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} -
-
-
-
-
-
-
-
-
-
-
-
-
- - +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + ``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-047.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-047.md index c298863934..9376d35c13 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-047.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-047.md @@ -7,19 +7,20 @@ dashedName: part-47 # --description-- -Remove `orange` from the `bb1d` gradient and change the `80%` to `50%`. This will make `--building-color1` solid for the top half, and then transition to `--window-color1` for the bottom half. +Remove `orange` from the `.bb1d` gradient and change the `80%` to `50%`. This will make `--building-color1` solid for the top half, and then transition to `--window-color1` for the bottom half. # --hints-- -test-text +You should remove `orange` from the `linear-gradient`. ```js -const bb1d = code.match(/\.bb1d\s*{[\s\S]+?[^}]}/g)[0]; -assert( - /background\s*:\s*linear-gradient\(\s*var\(\s*--building-color1\s*\)\s*50%\s*,\s*var\(\s*--window-color1\s*\)\s*\)\s*(;|})/g.test( - bb1d - ) -); +assert.notInclude(new __helpers.CSSHelp(document).getStyle('.bb1d')?.background, 'orange'); +``` + +You should change the now first `linear-gradient` color to transition at `50%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background', true), 'linear-gradient(var(--building-color1)50%,var(--window-color1))'); ``` # --seed-- @@ -31,134 +32,7 @@ assert( freeCodeCamp Skyline Project - + @@ -196,173 +70,133 @@ assert( ``` -# --solutions-- +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; +} -```html - - - - freeCodeCamp Skyline Project - - +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} -
-
-
-
-
-
-
-
-
-
-
-
-
- - +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + ``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-048.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-048.md index b21d374617..4c4b2a6573 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-048.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-048.md @@ -7,17 +7,26 @@ dashedName: part-48 # --description-- -Nest two new `div` elements within `bb2`, give them the classes of `bb2a` and `bb2b`, in that order. These will be two sections for this building. +Nest two new `div` elements within `.bb2`, give them the classes of `bb2a` and `bb2b`, in that order. These will be two sections for this building. # --hints-- -test-text +You should add two `div` elements to `.bb2`. ```js -const bb2 = $('.bb2').children('div'); -assert( - bb2.length === 2 && bb2[0] === $('.bb2a')[0] && bb2[1] === $('.bb2b')[0] -); +assert.equal(document.querySelector('div.bb2')?.children?.length, 2); +``` + +You should give the first `div` a class of `bb2a`. + +```js +assert.exists(document.querySelector('div.bb2a')); +``` + +You should give the second `div` a class of `bb2b`. + +```js +assert.exists(document.querySelector('div.bb2b')); ``` # --seed-- @@ -29,133 +38,7 @@ assert( freeCodeCamp Skyline Project - + @@ -168,7 +51,9 @@ assert(
+--fcc-editable-region--
+--fcc-editable-region--
@@ -193,176 +78,132 @@ assert( ``` -# --solutions-- +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; +} -```html - - - - freeCodeCamp Skyline Project - - +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} -
-
-
-
-
-
-
-
-
-
-
-
-
- - +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + ``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-049.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-049.md index 2b91797189..663f909caa 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-049.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-049.md @@ -7,18 +7,20 @@ dashedName: part-49 # --description-- -Give `bb2b` a `width` and `height` of `100%` to make it fill the building container. You will add something on the top a little later. +Give `.bb2b` a `width` and `height` of `100%` to make it fill the building container. You will add something on the top a little later. # --hints-- -test-text +You should give `.bb2b` a `width` of `100%`. ```js -assert( - /\.bb2b\s*{\s*(width\s*:\s*100%\s*;\s*height\s*:\s*100%\s*(;|})|height\s*:\s*100%\s*;\s*width\s*:\s*100%\s*(;|}))/g.test( - code - ) -); +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2b')?.width, '100%'); +``` + +You should give `.bb2b` a `height` of `100%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2b')?.height, '100%'); ``` # --seed-- @@ -30,133 +32,7 @@ assert( freeCodeCamp Skyline Project - + @@ -197,181 +73,134 @@ assert( ``` -# --solutions-- +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; +} -```html - - - - freeCodeCamp Skyline Project - - +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} -
-
-
-
-
-
-
-
-
-
-
-
-
- - +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + ``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-050.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-050.md index 77c28461f0..00d0e41165 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-050.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-050.md @@ -11,11 +11,16 @@ Create a new variable in `:root` named `window-color2` with a value of `#8cd9b3` # --hints-- -test-text +You should create a new property variable called `window-color2` within `:root`. ```js -const rootStyle = code.match(/:root\s*{[\s\S]+?[^}]}/g)[0]; -assert(/--window-color2\s*:\s*#8cd9b3\s*(;|})/g.test(rootStyle)); +assert.exists(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--window-color2')); +``` + +You should give `window-color2` a value of `#8cd9b3`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--window-color2').trim(), '#8cd9b3'); ``` # --seed-- @@ -27,138 +32,7 @@ assert(/--window-color2\s*:\s*#8cd9b3\s*(;|})/g.test(rootStyle)); freeCodeCamp Skyline Project - + @@ -199,182 +73,138 @@ assert(/--window-color2\s*:\s*#8cd9b3\s*(;|})/g.test(rootStyle)); ``` -# --solutions-- +```css +--fcc-editable-region-- +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; +} +--fcc-editable-region-- +* { + border: 1px solid black; + box-sizing: border-box; +} -```html - - - - freeCodeCamp Skyline Project - - +.fb2 { + width: 10%; + height: 40%; + background-color: var(--building-color3); +} - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} -
-
-
-
-
-
-
-
-
-
-
-
-
- - +.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + ``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-051.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-051.md index 903025605a..2b369aad43 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-051.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-051.md @@ -18,19 +18,38 @@ gradient-type( ); ``` -Here, the top half of the element will be `color1` and the bottom half will be `color2`. Add a `linear-gradient` to `bb2b` that uses `--building-color2` from `0%` to `6%` and `--window-color2` from `6%` to `9%`. +Here, the top half of the element will be `color1` and the bottom half will be `color2`. Add a `linear-gradient` to `.bb2b` that uses `--building-color2` from `0%` to `6%` and `--window-color2` from `6%` to `9%`. # --hints-- -test-text +You should give `.bb2b` a `background` property. ```js -const bb2b = code.match(/\.bb2b\s*{[\s\S]+?[^}]}/g)[0]; -assert( - /background\s*:\s*linear-gradient\(\s*var\(\s*--building-color2\s*\)\s*(0%\s*,|,)\s*var\(\s*--building-color2\s*\)\s*6%\s*,\s*var\(\s*--window-color2\s*\)\s*6%\s*,\s*var\(\s*--window-color2\s*\)\s*9%\s*\)\s*(;|})/g.test( - bb2b - ) -); +assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.background); +``` + +You should use a `linear-gradient` on the `background`. + +```js +assert.include(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.background, "linear-gradient"); +``` + +You should use `--building-color2` from `0%` to `6%`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.getPropVal('background', true), /var\(--building-color2\)(0%)?,var\(--building-color2\)6%/); +``` + +You should use `--window-color2` from `6%` to `9%`. + +```js +assert.include(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.getPropVal('background', true), "var(--window-color2)6%,var(--window-color2)9%"); +``` + +`.bb2b` should have a `linear-gradient` transitioning from `--building-color2` at `0%` to `6%`, and `--window-color2` at `6%` to `9%`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.getPropVal('background', true), /linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)6%,var\(--window-color2\)6%,var\(--window-color2\)9%\)/); ``` # --seed-- @@ -42,139 +61,7 @@ assert( freeCodeCamp Skyline Project - + @@ -215,188 +102,138 @@ assert( ``` -# --solutions-- +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; +} -```html - - - - freeCodeCamp Skyline Project - - +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
- - +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + ``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-052.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-052.md index 183b237c74..6054757c04 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-052.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-052.md @@ -11,15 +11,10 @@ You can see the hard color change at the top of the section. Change the gradient # --hints-- -test-text +You should change the `background` property of `.bb2b` from using `linear-gradient` to using `repeating-linear-gradient`. ```js -const bb2b = code.match(/\.bb2b\s*{[\s\S]+?[^}]}/g)[0]; -assert( - /background\s*:\s*repeating-linear-gradient\(\s*var\(\s*--building-color2\s*\)\s*(0%\s*,|,)\s*var\(\s*--building-color2\s*\)\s*6%\s*,\s*var\(\s*--window-color2\s*\)\s*6%\s*,\s*var\(\s*--window-color2\s*\)\s*9%\s*\)\s*(;|})/g.test( - bb2b - ) -); +assert.equal(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.getPropVal('background', true), "repeating-linear-gradient(var(--building-color2),var(--building-color2)6%,var(--window-color2)6%,var(--window-color2)9%)"); ``` # --seed-- @@ -31,145 +26,7 @@ assert( freeCodeCamp Skyline Project - + @@ -210,188 +67,144 @@ assert( ``` -# --solutions-- +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; +} -```html - - - - freeCodeCamp Skyline Project - - +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
- - +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + ``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-053.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-053.md index 6a2766b700..4eb36211e6 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-053.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-053.md @@ -7,15 +7,14 @@ dashedName: part-53 # --description-- -In the next few steps, you are going to use some tricks with CSS borders to turn the `bb2a` section into a triangle at the top of the building. First, remove the `background-color` from `bb2` since you don't need it anymore. +In the next few steps, you are going to use some tricks with CSS borders to turn the `.bb2a` section into a triangle at the top of the building. First, remove the `background-color` from `.bb2` since you don't need it anymore. # --hints-- -test-text +You should remove the `background-color` from `.bb2`. ```js -const bb2 = code.match(/\.bb2\s*{[\s\S]+?[^}]}/g)[0]; -assert(!/background-color/g.test(bb2)); +assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb2")?.backgroundColor); ``` # --seed-- @@ -27,145 +26,7 @@ assert(!/background-color/g.test(bb2)); freeCodeCamp Skyline Project - + @@ -206,187 +67,142 @@ assert(!/background-color/g.test(bb2)); ``` -# --solutions-- +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; +} -```html - - - - freeCodeCamp Skyline Project - - +.fb3 { + width: 10%; + height: 35%; + background-color: var(--building-color1); +} - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+.fb4 { + width: 8%; + height: 45%; + background-color: var(--building-color1); + position: relative; + left: 10%; +} -
-
-
-
-
-
-
-
-
-
-
-
-
- - +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} + +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} ``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-054.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-054.md index e152a2cde7..cff26bf35e 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-054.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-054.md @@ -7,35 +7,62 @@ dashedName: part-54 # --description-- -Add these properties to `bb2a`: +Add these properties to `.bb2a`: ```css - margin: auto; - width: 5vw; - height: 5vw; - border-top: 1vw solid #000; - border-bottom: 1vw solid #000; - border-left: 1vw solid #999; - border-right: 1vw solid #999; +margin: auto; +width: 5vw; +height: 5vw; +border-top: 1vw solid #000; +border-bottom: 1vw solid #000; +border-left: 1vw solid #999; +border-right: 1vw solid #999; ``` After you add these, you can see how a thick border on an element gives you some angles where two sides meet. You are going to use that bottom border as the top of the building. # --hints-- -test-text +You should give `.bb2a` a `margin` of `auto`. ```js -const bb2a = code.match(/\.bb2a\s*{[\s\S]+?[^}]}/g)[0]; -assert( - /margin\s*:\s*auto\s*(;|})/g.test(bb2a) && - /width\s*:\s*5vw\s*(;|})/g.test(bb2a) && - /height\s*:\s*5vw\s*(;|})/g.test(bb2a) && - /border-top\s*:\s*1vw\s+solid\s+#000\s*(;|})/g.test(bb2a) && - /border-bottom\s*:\s*1vw\s+solid\s+#000\s*(;|})/g.test(bb2a) && - /border-left\s*:\s*1vw\s+solid\s+#999\s*(;|})/g.test(bb2a) && - /border-right\s*:\s*1vw\s+solid\s+#999\s*(;|})/g.test(bb2a) -); +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.margin, "auto"); +``` + +You should give `.bb2a` a `width` of `auto`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.width, "5vw"); +``` + +You should give `.bb2a` a `height` of `5vw`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.height, "5vw"); +``` + +You should give `.bb2a` a `border-top` of `1vw solid #000`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.borderTop, "1vw solid rgb(0, 0, 0)"); +``` + +You should give `.bb2a` a `border-bottom` of `1vw solid #000`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.borderBottom, "1vw solid rgb(0, 0, 0)"); +``` + +You should give `.bb2a` a `border-left` of `1vw solid #999`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.borderLeft, "1vw solid rgb(153, 153, 153)"); +``` + +You should give `.bb2a` a `border-right` of `1vw solid #999`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.borderRight, "1vw solid rgb(153, 153, 153)"); ``` # --seed-- @@ -47,144 +74,7 @@ assert( freeCodeCamp Skyline Project - + @@ -225,197 +115,145 @@ assert( ``` -# --solutions-- +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; +} -```html - - - - freeCodeCamp Skyline Project - - +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
- - +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + ``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-055.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-055.md index d025431452..6526a06e9e 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-055.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-055.md @@ -7,20 +7,32 @@ dashedName: part-55 # --description-- -Next, remove the `width` and `height` from `bb2a`, and change the `border-left` and `border-right` to use `5vw` instead of `1vw`. The element will now have zero size and the borders will come together in the middle. +Next, remove the `width` and `height` from `.bb2a`, and change the `border-left` and `border-right` to use `5vw` instead of `1vw`. The element will now have zero size and the borders will come together in the middle. # --hints-- -test-text +You should remove the `width` from `.bb2a`. ```js -const bb2a = code.match(/\.bb2a\s*{[\s\S]+?[^}]}/g)[0]; -assert( - !/width/g.test(bb2a) && - !/height/g.test(bb2a) && - /border-left\s*:\s*5vw\s+solid\s+#999\s*(;|})/g.test(bb2a) && - /border-right\s*:\s*5vw\s+solid\s+#999\s*(;|})/g.test(bb2a) -); +assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb2a")?.width); +``` + +You should remove the `height` from `.bb2a`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb2a")?.height); +``` + +You should change the `border-left` to use `5vw`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderLeft, "5vw solid rgb(153, 153, 153)"); +``` + +You should change the `border-right` to use `5vw`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderRight, "5vw solid rgb(153, 153, 153)"); ``` # --seed-- @@ -32,154 +44,7 @@ assert( freeCodeCamp Skyline Project - + @@ -220,195 +85,153 @@ assert( ``` -# --solutions-- +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; +} -```html - - - - freeCodeCamp Skyline Project - - +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
- - +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + ``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-056.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-056.md index 36548450bf..d09ab00818 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-056.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-056.md @@ -7,18 +7,20 @@ dashedName: part-56 # --description-- -Next, change the two `#999` of `bb2a` to `transparent`. This will make the left and right borders invisible. +Next, change the two `#999` of `.bb2a` to `transparent`. This will make the left and right borders invisible. # --hints-- -test-text +You should change the `border-left` to use `transparent`. ```js -const bb2a = code.match(/\.bb2a\s*{[\s\S]+?[^}]}/g)[0]; -assert( - /border-left\s*:\s*5vw\s+solid\s+transparent\s*(;|})/g.test(bb2a) && - /border-right\s*:\s*5vw\s+solid\s+transparent\s*(;|})/g.test(bb2a) -); +assert.equal(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderLeft, "5vw solid transparent"); +``` + +You should change the `border-right` to use `transparent`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderRight, "5vw solid transparent"); ``` # --seed-- @@ -30,152 +32,7 @@ assert( freeCodeCamp Skyline Project - + @@ -216,195 +73,151 @@ assert( ``` -# --solutions-- +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; +} -```html - - - - freeCodeCamp Skyline Project - - +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
- - +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + ``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-057.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-057.md index 75b5ff6a1c..0e69ca5d02 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-057.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-057.md @@ -7,15 +7,20 @@ dashedName: part-57 # --description-- -Remove the `margin` and `border-top` properties and values from `bb2a` to turn it into a triangle for the top of the building. +Remove the `margin` and `border-top` properties and values from `.bb2a` to turn it into a triangle for the top of the building. # --hints-- -test-text +You should remove the `margin` from `.bb2a`. ```js -const bb2a = code.match(/\.bb2a\s*{[\s\S]+?[^}]}/g)[0]; -assert(!/margin/g.test(bb2a) && !/border-top/g.test(bb2a)); +assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb2a")?.margin); +``` + +You should remove the `border-top` from `.bb2a`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderTop); ``` # --seed-- @@ -27,152 +32,7 @@ assert(!/margin/g.test(bb2a) && !/border-top/g.test(bb2a)); freeCodeCamp Skyline Project - + @@ -213,193 +73,151 @@ assert(!/margin/g.test(bb2a) && !/border-top/g.test(bb2a)); ``` -# --solutions-- +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; +} -```html - - - - freeCodeCamp Skyline Project - - +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
- - +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + ``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-058.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-058.md index c6af6a5f43..5f714c9b26 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-058.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-058.md @@ -7,19 +7,26 @@ dashedName: part-58 # --description-- -Finally, on the `border-bottom` property of `bb2a`, change the `1vw` to `5vh` and change the `#000` color to your `--building-color2` variable. There you go, now it looks good! At any time throughout this project, you can comment out or remove the `border` property you added to everything at the beginning to see what the buildings will look like when that gets removed at the end. +Finally, on the `border-bottom` property of `.bb2a`, change the `1vw` to `5vh` and change the `#000` color to your `--building-color2` variable. There you go, now it looks good! At any time throughout this project, you can comment out or remove the `border` property you added to everything at the beginning to see what the buildings will look like when that gets removed at the end. # --hints-- -test-text +You should change `border-bottom` to use `5vh`. ```js -const bb2a = code.match(/\.bb2a\s*{[\s\S]+?[^}]}/g)[0]; -assert( - /border-bottom\s*:\s*5vh\s+solid\s+var\(\s*--building-color2\s*\)\s*(;|})/g.test( - bb2a - ) -); +assert.include(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderBottom, "5vh"); +``` + +You should change `border-bottom` to use `--building-color2`. + +```js +assert.include(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderBottom.trim(), "var(--building-color2)"); +``` + +`border-bottom` should be `5vh solid var(--building-color2)`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderBottom.trim(), "5vh solid var(--building-color2)"); ``` # --seed-- @@ -31,150 +38,7 @@ assert( freeCodeCamp Skyline Project - + @@ -215,193 +79,148 @@ assert( ``` -# --solutions-- +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; +} -```html - - - - freeCodeCamp Skyline Project - - +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
- - +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + ``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-059.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-059.md index 005dd3ec6c..e1f6e74f64 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-059.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-059.md @@ -11,11 +11,16 @@ On to the next building! Create a new variable called `--window-color3` in `:roo # --hints-- -test-text +You should define a new property variable `--window-color3`. ```js -const rootStyle = code.match(/:root\s*{[\s\S]+?[^}]}/g)[0]; -assert(/--window-color3\s*:\s*#d98cb3\s*(;|})/g.test(rootStyle)); +assert(new __helpers.CSSHelp(document).isPropertyUsed("--window-color3")); +``` + +You should give `--window-color3` a value of `#d98cb3`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(":root")?.getPropertyValue("--window-color3")?.trim(), "#d98cb3"); ``` # --seed-- @@ -27,150 +32,7 @@ assert(/--window-color3\s*:\s*#d98cb3\s*(;|})/g.test(rootStyle)); freeCodeCamp Skyline Project - + @@ -211,194 +73,150 @@ assert(/--window-color3\s*:\s*#d98cb3\s*(;|})/g.test(rootStyle)); ``` -# --solutions-- +```css +--fcc-editable-region-- +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; +} +--fcc-editable-region-- +* { + border: 1px solid black; + box-sizing: border-box; +} -```html - - - - freeCodeCamp Skyline Project - - +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
- - +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + ``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-060.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-060.md index 8bbab9ef49..c46d40193e 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-060.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-060.md @@ -11,25 +11,38 @@ So far, all the gradients you created have gone from top to bottom, that's the d ```css gradient-type( - direction + direction, color1, color2 ); ``` -Fill in `bb3` with a `repeating-linear-gradient`. Use `90deg` for the direction, your `building-color3` for the first two colors, and `window-color3` at `15%` for the third. When you don't specify a distance for a color, it will use the values that makes sense. In this case, the first two colors will default to `0%` and `7.5%` because it starts at `0%`, and `7.5%` is half of the `15%`. +Fill in `.bb3` with a `repeating-linear-gradient`. Use `90deg` for the direction, your `building-color3` for the first two colors, and `window-color3` at `15%` for the third. When you don't specify a distance for a color, it will use the values that makes sense. In this case, the first two colors will default to `0%` and `7.5%` because it starts at `0%`, and `7.5%` is half of the `15%`. # --hints-- -test-text +You should give `.bb3` a `background` using `repeating-linear-gradient`. ```js -const bb3 = code.match(/\.bb3\s*{[\s\S]+?[^}]}/g)[0]; -assert( - /background\s*:\s*repeating-linear-gradient\(\s*90deg\s*,\s*var\(\s*--building-color3\s*\)\s*(0%\s*,|,)\s*var\(\s*--building-color3\s*\)\s*(7\.5%\s*,|,)\s*var\(\s*--window-color3\s*\)\s*15%\s*\)\s*(;|})/g.test( - bb3 - ) -); +assert.include(new __helpers.CSSHelp(document).getStyle(".bb3")?.background, "repeating-linear-gradient"); +``` + +You should use `90deg` for the direction in the first argument of `repeating-linear-gradient`. + +```js +assert.include(new __helpers.CSSHelp(document).getStyle(".bb3")?.getPropVal('background', true), "repeating-linear-gradient(90deg"); +``` + +You should use `--building-color3` for the first two colors. + +```js +assert.include(new __helpers.CSSHelp(document).getStyle(".bb3")?.getPropVal('background', true), "repeating-linear-gradient(90deg,var(--building-color3),var(--building-color3)"); +``` + +You should use `--window-color3` at `15%` for the third color. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".bb3")?.getPropVal('background', true), "repeating-linear-gradient(90deg,var(--building-color3),var(--building-color3),var(--window-color3)15%)"); ``` # --seed-- @@ -41,151 +54,7 @@ assert( freeCodeCamp Skyline Project - + @@ -226,200 +95,150 @@ assert( ``` -# --solutions-- +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; +} -```html - - - - freeCodeCamp Skyline Project - - +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
- - +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + ``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-061.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-061.md index a022118558..8f877540df 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-061.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-061.md @@ -7,15 +7,14 @@ dashedName: part-61 # --description-- -Remove the `background-color` property and value from `bb3` since you are using the gradient as the background now. +Remove the `background-color` property and value from `.bb3` since you are using the gradient as the background now. # --hints-- -test-text +You should remove the `background-color` from `.bb3`. ```js -const bb3 = code.match(/\.bb3\s*{[\s\S]+?[^}]}/g)[0]; -assert(!/background-color/g.test(bb3)); +assert.notMatch(code, /\.bb3\s*\{\s*[^}]*?background-color[^}]*?\}/); ``` # --seed-- @@ -27,157 +26,7 @@ assert(!/background-color/g.test(bb3)); freeCodeCamp Skyline Project - + @@ -218,199 +67,156 @@ assert(!/background-color/g.test(bb3)); ``` -# --solutions-- +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; +} -```html - - - - freeCodeCamp Skyline Project - - +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
- - +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + ``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-062.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-062.md index aaec2981e8..9a10f37717 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-062.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-062.md @@ -7,20 +7,39 @@ dashedName: part-62 # --description-- -The next building will have three sections. Nest three `div` elements within `bb4`. Give them the classes of `bb4a`, `bb4b` and `bb4c` in that order. +The next building will have three sections. Nest three `div` elements within `.bb4`. Give them the classes of `bb4a`, `bb4b` and `bb4c` in that order. # --hints-- -test-text +You should add three `div` elements within `.bb4`. ```js -const bb4 = $('.bb4').children('div'); -assert( - bb4.length === 3 && - bb4[0] === $('.bb4a')[0] && - bb4[1] === $('.bb4b')[0] && - bb4[2] === $('.bb4c')[0] -); +assert.equal(document.querySelector("div.bb4")?.children?.length, 3); +``` + +You should give the first new `div` a class of `bb4a`. + +```js +assert.exists(document.querySelector("div.bb4 > div.bb4a")); +``` + +You should give the second new `div` a class of `bb4b`. + +```js +assert.exists(document.querySelector("div.bb4 > div.bb4a")); +``` + +You should give the third new `div` a class of `bb4c`. + +```js +assert.exists(document.querySelector("div.bb4 > div.bb4a")); +``` + +You should place the new `div` elements in this order `.bb4a + .bb4b + .bb4c`. + +```js +assert.exists(document.querySelector("div.bb4a + div.bb4b")); +assert.exists(document.querySelector("div.bb4b + div.bb4c")); ``` # --seed-- @@ -32,156 +51,7 @@ assert( freeCodeCamp Skyline Project - + @@ -200,7 +70,9 @@ assert(
+--fcc-editable-region--
+--fcc-editable-region--
@@ -222,203 +94,155 @@ assert( ``` -# --solutions-- +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; +} -```html - - - - freeCodeCamp Skyline Project - - +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
- - +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + ``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-063.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-063.md index e2561da7ba..16c5e7305a 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-063.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-063.md @@ -7,24 +7,44 @@ dashedName: part-63 # --description-- -Give the new `div` elements these `width` and `height` values: `3%` and `10%` to `bb4a`, `80%` and `5%` to `bb4b`, and `100%` and `85%` to `bb4c`. +Give the new `div` elements these `width` and `height` values: `3%` and `10%` to `.bb4a`, `80%` and `5%` to `.bb4b`, and `100%` and `85%` to `.bb4c`. # --hints-- -test-text +You should give `.bb4a` a `width` of `3%`. ```js -const bb4a = code.match(/\.bb4a\s*{[\s\S]+?[^}]}/g)[0]; -const bb4b = code.match(/\.bb4b\s*{[\s\S]+?[^}]}/g)[0]; -const bb4c = code.match(/\.bb4c\s*{[\s\S]+?[^}]}/g)[0]; -assert( - /width\s*:\s*3%\s*(;|})/g.test(bb4a) && - /height\s*:\s*10%\s*(;|})/g.test(bb4a) && - /width\s*:\s*80%\s*(;|})/g.test(bb4b) && - /height\s*:\s*5%\s*(;|})/g.test(bb4b) && - /width\s*:\s*100%\s*(;|})/g.test(bb4c) && - /height\s*:\s*85%\s*(;|})/g.test(bb4c) -); +assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4a")?.width, "3%"); +``` + +You should give `.bb4a` a `height` of `10%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4a")?.height, "10%"); +``` + +You should give `.bb4b` a `width` of `80%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4b")?.width, "80%"); +``` + +You should give `.bb4b` a `height` of `5%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4b")?.height, "5%"); +``` + +You should give `.bb4c` a `width` of `100%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4c")?.width, "100%"); +``` + +You should give `.bb4c` a `height` of `85%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4c")?.height, "85%"); ``` # --seed-- @@ -36,156 +56,7 @@ assert( freeCodeCamp Skyline Project - + @@ -230,218 +101,157 @@ assert( ``` -# --solutions-- +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; +} -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
- - +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + ``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-064.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-064.md index 787e55448f..d01d252375 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-064.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-064.md @@ -7,20 +7,32 @@ dashedName: part-64 # --description-- -Remove the `background-color` property and value from `bb4` and add it to the three new sections; `bb4a`, `bb4b`, and `bb4c`, so only the sections are filled. +Remove the `background-color` property and value from `.bb4`, and add it to the three new sections `.bb4a`, `.bb4b`, and `.bb4c`, so only the sections are filled. # --hints-- -test-text +You should remove the `background-color` from `.bb4`. ```js -const bb4 = code.match(/\.bb4\s*{[\s\S]+?[^}]}/g)[0]; -assert( - !/background-color/g.test(bb4) && - $('.bb4a').css('background-color') === 'rgb(83, 140, 198)' && - $('.bb4b').css('background-color') === 'rgb(83, 140, 198)' && - $('.bb4c').css('background-color') === 'rgb(83, 140, 198)' -); +assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb4")?.backgroundColor); +``` + +You should give `.bb4a` a `background-color` of `--building-color4`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4a")?.backgroundColor.trim(), "var(--building-color4)"); +``` + +You should give `.bb4b` a `background-color` of `--building-color4`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4b")?.backgroundColor.trim(), "var(--building-color4)"); +``` + +You should give `.bb4c` a `background-color` of `--building-color4`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4c")?.backgroundColor.trim(), "var(--building-color4)"); ``` # --seed-- @@ -32,171 +44,7 @@ assert( freeCodeCamp Skyline Project - + @@ -241,220 +89,169 @@ assert( ``` -# --solutions-- +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; +} -```html - - - - freeCodeCamp Skyline Project - - +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
- - +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + ``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-065.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-065.md index 80be2f8263..19619b732d 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-065.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-065.md @@ -7,14 +7,14 @@ dashedName: part-65 # --description-- -You want `bb4` to share the properties of `bb1` that center the sections. Instead of duplicating that code, create a new class above the background building comment called `building-wrap`. Leave it empty for now; this class will be used in a few places to save you some coding. +You want `.bb4` to share the properties of `.bb1` that center the sections. Instead of duplicating that code, create a new class above the background building comment called `building-wrap`. Leave it empty for now; this class will be used in a few places to save you some coding. # --hints-- -test-text +You should create a new class declaration called `building-wrap`. ```js -assert(/\.building-wrap\s*{\s*}/g.test(code)); +assert.exists(new __helpers.CSSHelp(document).getStyle(".building-wrap")); ``` # --seed-- @@ -26,173 +26,7 @@ assert(/\.building-wrap\s*{\s*}/g.test(code)); freeCodeCamp Skyline Project - + @@ -237,224 +71,174 @@ assert(/\.building-wrap\s*{\s*}/g.test(code)); ``` -# --solutions-- +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; +} -```html - - - - freeCodeCamp Skyline Project - - +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
- - +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + ``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-066.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-066.md index e3cc7585d6..9938257199 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-066.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-066.md @@ -7,19 +7,44 @@ dashedName: part-66 # --description-- -Move the `display`, `flex-direction`, and `align-items` properties and values from `bb1` to the new `building-wrap` class. +Move the `display`, `flex-direction`, and `align-items` properties and values from `.bb1` to the new `building-wrap` class. # --hints-- -test-text +You should remove `display` from `.bb1`. ```js -const bWrap = code.match(/\.building-wrap\s*{[\s\S]+?[^}]}/g)[0]; -assert( - /display\s*:\s*flex\s*(;|})/g.test(bWrap) && - /flex-direction\s*:\s*column\s*(;|})/g.test(bWrap) && - /align-items\s*:\s*center\s*(;|})/g.test(bWrap) -); +assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb1")?.display); +``` + +You should move `display` with a value of `flex` to `.building-wrap`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".building-wrap")?.display, "flex"); +``` + +You should remove `flex-direction` from `.bb1`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb1")?.flexDirection); +``` + +You should move `flex-direction` with a value of `column` to `.building-wrap`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".building-wrap")?.flexDirection, "column"); +``` + +You should remove `align-items` from `.bb1`. + +```js +assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb1")?.alignItems); +``` + +You should move `align-items` with a value of `center` to `.building-wrap`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".building-wrap")?.alignItems, "center"); ``` # --seed-- @@ -31,177 +56,7 @@ assert( freeCodeCamp Skyline Project - + @@ -246,223 +101,176 @@ assert( ``` -# --solutions-- +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; +} -```html - - - - freeCodeCamp Skyline Project - - +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
- - +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + ``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-067.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-067.md index dacdde1176..62c94234f8 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-067.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-067.md @@ -7,16 +7,20 @@ dashedName: part-67 # --description-- -Add the new `building-wrap` class to the `bb1` and `bb4` elements. This will apply the centering properties to the buildings that need it. +Add the new `building-wrap` class to the `.bb1` and `.bb4` elements. This will apply the centering properties to the buildings that need it. # --hints-- -test-text +You should add `building-wrap` to the `.bb1` element. ```js -assert( - $('.bb1.building-wrap').length === 1 && $('.bb4.building-wrap').length === 1 -); +assert.exists(document.querySelector("div.bb1.building-wrap")); +``` + +You should add `building-wrap` to the `.bb4` element. + +```js +assert.exists(document.querySelector("div.bb4.building-wrap")); ``` # --seed-- @@ -28,182 +32,14 @@ assert( freeCodeCamp Skyline Project - +
+--fcc-editable-region--
@@ -217,6 +53,7 @@ assert(
+--fcc-editable-region--
@@ -242,223 +79,175 @@ assert( ``` -# --solutions-- +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; +} -```html - - - - freeCodeCamp Skyline Project - - +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
- - +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + ``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-068.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-068.md index d109aede2c..073774fed9 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-068.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-068.md @@ -11,11 +11,16 @@ Create a new variable called `--window-color4` in `:root` and give it a value of # --hints-- -test-text +You should define a new property variable `--window-color4`. ```js -const rootStyle = code.match(/:root\s*{[\s\S]+?[^}]}/g)[0]; -assert(/--window-color4\s*:\s*#8cb3d9\s*(;|})/g.test(rootStyle)); +assert(new __helpers.CSSHelp(document).isPropertyUsed("--window-color4")); +``` + +You should give `--window-color4` a value of `#8cb3d9`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(":root")?.getPropertyValue("--window-color4")?.trim(), "#8cb3d9"); ``` # --seed-- @@ -27,176 +32,7 @@ assert(/--window-color4\s*:\s*#8cb3d9\s*(;|})/g.test(rootStyle)); freeCodeCamp Skyline Project - + @@ -241,224 +77,176 @@ assert(/--window-color4\s*:\s*#8cb3d9\s*(;|})/g.test(rootStyle)); ``` -# --solutions-- +```css +--fcc-editable-region-- +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; +} +--fcc-editable-region-- +* { + border: 1px solid black; + box-sizing: border-box; +} -```html - - - - freeCodeCamp Skyline Project - - +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
- - +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + ``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-069.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-069.md index eb7e27b8df..eef1666be9 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-069.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-069.md @@ -7,14 +7,20 @@ dashedName: part-69 # --description-- -Nest four new `div` elements within `bb4c`, give them all the class of `bb4-window`. These will be windows for this building. +Nest four new `div` elements within `.bb4c`, give them all the class of `bb4-window`. These will be windows for this building. # --hints-- -test-text +You should add four `div` elements to `.bb4c`. ```js -assert($('.bb4c').children('div.bb4-window').length === 4); +assert.equal(document.querySelector(".bb4c")?.children?.length, 4); +``` + +You should give each new `div` a class of `bb4-window`. + +```js +assert.equal(document.querySelectorAll("div.bb4c > div.bb4-window")?.length, 4); ``` # --seed-- @@ -26,177 +32,7 @@ assert($('.bb4c').children('div.bb4-window').length === 4); freeCodeCamp Skyline Project - + @@ -218,7 +54,9 @@ assert($('.bb4c').children('div.bb4-window').length === 4);
+--fcc-editable-region--
+--fcc-editable-region--
@@ -241,229 +79,176 @@ assert($('.bb4c').children('div.bb4-window').length === 4); ``` -# --solutions-- +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} -```html - - - - freeCodeCamp Skyline Project - - +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
- - +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + ``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-070.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-070.md index 8d39c7992d..7184a01644 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-070.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-070.md @@ -11,17 +11,22 @@ Give the `bb4-window` class a `width` of `18%`, a `height` of `90%`, and add you # --hints-- -test-text +You should give `.bb4-window` a `width` of `18%`. ```js -const bb4Window = code.match(/\.bb4-window\s*{[\s\S]+?[^}]}/g)[0]; -assert( - /width\s*:\s*18%\s*(;|})/g.test(bb4Window) && - /height\s*:\s*90%\s*(;|})/g.test(bb4Window) && - /background-color\s*:\s*var\(\s*--window-color4\s*\)\s*(;|})/g.test( - bb4Window - ) -); +assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4-window")?.width, "18%"); +``` + +You should give `.bb4-window` a `height` of `90%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4-window")?.height, "90%"); +``` + +You should give `.bb4-window` a `background-color` of `--window-color4`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4-window")?.backgroundColor.trim(), "var(--window-color4)"); ``` # --seed-- @@ -33,177 +38,7 @@ assert( freeCodeCamp Skyline Project - + @@ -253,235 +88,177 @@ assert( ``` -# --solutions-- +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} -```html - - - - freeCodeCamp Skyline Project - - +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
- - +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + ``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-071.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-071.md index c69fc0d90b..d212208d9a 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-071.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-071.md @@ -7,19 +7,40 @@ dashedName: part-71 # --description-- -The windows are stacked on top of each other at the left of the section, behind the purple building. Add a new class below `building-wrap` called `window-wrap` and add these properties to it: `display: flex;`, `align-items: center;`, and `justify-content: space-evenly;`. This will be used in a few places to center window elements vertically and space them evenly in their parent. +The windows are stacked on top of each other at the left of the section, behind the purple building. Add a new class below `.building-wrap` called `.window-wrap`, and add these properties to it: + +```css +display: flex; +align-items: center; +justify-content: space-evenly; +``` + +This will be used in a few places to center window elements vertically, and evenly space them in their parent. # --hints-- -test-text +You should create a `.window-wrap` selector. ```js -const wWrap = code.match(/\.window-wrap\s*{[\s\S]+?[^}]}/g)[0]; -assert( - /display\s*:\s*flex\s*(;|})/g.test(wWrap) && - /align-items\s*:\s*center\s*(;|})/g.test(wWrap) && - /justify-content\s*:\s*space-evenly\s*(;|})/g.test(wWrap) -); +assert.exists(new __helpers.CSSHelp(document).getStyle(".window-wrap")); +``` + +You should give `.window-wrap` a `display` of `flex`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".window-wrap")?.display, "flex"); +``` + +You should give `.window-wrap` an `align-items` of `center`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".window-wrap")?.alignItems, "center"); +``` + +You should give `.window-wrap` a `justify-content` of `space-evenly`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".window-wrap")?.justifyContent, "space-evenly"); ``` # --seed-- @@ -31,183 +52,7 @@ assert( freeCodeCamp Skyline Project - + @@ -257,241 +102,184 @@ assert( ``` -# --solutions-- +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} -```html - - - - freeCodeCamp Skyline Project - - +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
- - +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + ``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-072.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-072.md index f000236b61..d6a3fee472 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-072.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-072.md @@ -7,14 +7,14 @@ dashedName: part-72 # --description-- -Add the new `window-wrap` class to the `bb4c` element. +Add the new `window-wrap` class to the `.bb4c` element. # --hints-- -test-text +You should add a class of `window-wrap` to `.bb4c`. ```js -assert($('.bb4c.window-wrap').length === 1); +assert.exists(document.querySelector("div.bb4c.window-wrap")); ``` # --seed-- @@ -26,189 +26,7 @@ assert($('.bb4c.window-wrap').length === 1); freeCodeCamp Skyline Project - + @@ -230,12 +48,14 @@ assert($('.bb4c.window-wrap').length === 1);
+--fcc-editable-region--
+--fcc-editable-region--
@@ -258,241 +78,188 @@ assert($('.bb4c.window-wrap').length === 1); ``` -# --solutions-- +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} -```html - - - - freeCodeCamp Skyline Project - - +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
- - +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + ``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-073.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-073.md index 272a2085f3..80a18f9dba 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-073.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-073.md @@ -7,20 +7,39 @@ dashedName: part-73 # --description-- -Looks good! On to the foreground buildings! Turn the `fb1` building into three sections by nesting three new `div` elements within it. Give them the classes of `fb1a`, `fb1b` and `fb1c`, in that order. +Looks good! On to the foreground buildings! Turn the `.fb1` building into three sections by nesting three new `div` elements within it. Give them the classes of `fb1a`, `fb1b` and `fb1c`, in that order. # --hints-- -test-text +You should add three `div` elements within `.fb1`. ```js -const fb1 = $('.fb1').children('div'); -assert( - fb1.length === 3 && - fb1[0] === $('div.fb1a')[0] && - fb1[1] === $('div.fb1b')[0] && - fb1[2] === $('div.fb1c')[0] -); +assert.equal(document.querySelector("div.fb1")?.children?.length, 3); +``` + +You should give the first new `div` a class of `fb1a`. + +```js +assert.exists(document.querySelector("div.fb1 > div.fb1a")); +``` + +You should give the second new `div` a class of `fbab`. + +```js +assert.exists(document.querySelector("div.fb1 > div.fb1b")); +``` + +You should give the third new `div` a class of `fb1c`. + +```js +assert.exists(document.querySelector("div.fb1 > div.fb1c")); +``` + +You should place the new `div` elements in this order `.fb1a + .fb1b + .fb1c`. + +```js +assert.exists(document.querySelector("div.fb1a + div.fb1b")); +assert.exists(document.querySelector("div.fb1b + div.fb1c")); ``` # --seed-- @@ -32,189 +51,7 @@ assert( freeCodeCamp Skyline Project - + @@ -250,7 +87,9 @@ assert(
+--fcc-editable-region--
+--fcc-editable-region--
@@ -264,245 +103,188 @@ assert( ``` -# --solutions-- +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} -```html - - - - freeCodeCamp Skyline Project - - +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + ``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-074.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-074.md index 477e99a577..8e41d908da 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-074.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-074.md @@ -7,21 +7,32 @@ dashedName: part-74 # --description-- -Give `fb1b` a `width` of `60%` and `height` of `10%`, and `fb1c` a `width` of `100%` and `height` of `80%`. +Give `.fb1b` a `width` of `60%` and `height` of `10%`, and `.fb1c` a `width` of `100%` and `height` of `80%`. # --hints-- -test-text +You should give `.fb1b` a `width` of `60%`. ```js -const fb1b = code.match(/\.fb1b\s*{[\s\S]+?[^}]}/g)[0]; -const fb1c = code.match(/\.fb1c\s*{[\s\S]+?[^}]}/g)[0]; -assert( - /width\s*:\s*60%\s*(;|})/g.test(fb1b) && - /height\s*:\s*10%\s*(;|})/g.test(fb1b) && - /width\s*:\s*100%\s*(;|})/g.test(fb1c) && - /height\s*:\s*80%\s*(;|})/g.test(fb1c) -); +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1b")?.width, "60%"); +``` + +You should give `.fb1b` a `height` of `10%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1b")?.height, "10%"); +``` + +You should give `.fb1c` a `width` of `100%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1c")?.width, "100%"); +``` + +You should give `.fb1c` a `height` of `80%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1c")?.height, "80%"); ``` # --seed-- @@ -33,189 +44,7 @@ assert( freeCodeCamp Skyline Project - + @@ -269,255 +98,189 @@ assert( ``` -# --solutions-- +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + ``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-075.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-075.md index a4b8dc048b..45f8ac994e 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-075.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-075.md @@ -7,14 +7,14 @@ dashedName: part-75 # --description-- -Add the `building-wrap` class to the `fb1` element to center the sections. +Add the `building-wrap` class to the `.fb1` element to center the sections. # --hints-- -test-text +You should add the class `building-wrap` to `.fb1`. ```js -assert($('.fb1.building-wrap').length === 1); +assert.exists(document.querySelector("div.fb1.building-wrap")); ``` # --seed-- @@ -26,199 +26,7 @@ assert($('.fb1.building-wrap').length === 1); freeCodeCamp Skyline Project - + @@ -254,11 +62,13 @@ assert($('.fb1.building-wrap').length === 1);
+--fcc-editable-region--
+--fcc-editable-region--
@@ -272,255 +82,198 @@ assert($('.fb1.building-wrap').length === 1); ``` -# --solutions-- +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} -```html - - - - freeCodeCamp Skyline Project - - +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + ``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-076.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-076.md index 6009816eba..e5d039c1fc 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-076.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-076.md @@ -7,17 +7,20 @@ dashedName: part-76 # --description-- -Move the `background-color` property and value from `fb1` to `fb1b`. +Move the `background-color` property and value from `.fb1` to `.fb1b`. # --hints-- -test-text +You should remove `background-color` from `.fb1`. ```js -const fb1b = code.match(/\.fb1b\s*{[\s\S]+?[^}]}/g)[0]; -assert( - /background-color\s*:\s*var\(\s*--building-color4\s*\)\s*(;|})/g.test(fb1b) -); +assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".fb1")?.backgroundColor); +``` + +You should add a `background-color` of `--building-color4` to `.fb1b`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1b")?.backgroundColor.trim(), "var(--building-color4)"); ``` # --seed-- @@ -29,199 +32,7 @@ assert( freeCodeCamp Skyline Project - + @@ -275,255 +86,198 @@ assert( ``` -# --solutions-- +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + ``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-077.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-077.md index 151229fed5..e32e24c575 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-077.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-077.md @@ -9,19 +9,32 @@ dashedName: part-77 Don't worry about the space at the bottom, everything will get moved down later when you add some height to the element at the top of the building. -Add a `repeating-linear-gradient` to `fb1c` with a `90deg` angle, your `--building-color4` from `0%` to `10%` and `transparent` from `10%` to `15%`. +Add a `repeating-linear-gradient` to `.fb1c` with a `90deg` angle, your `--building-color4` from `0%` to `10%` and `transparent` from `10%` to `15%`. # --hints-- -test-text +You should give `.fb1c` a `background` with a `repeating-linear-gradient`. ```js -const fb1c = code.match(/\.fb1c\s*{[\s\S]+?[^}]}/g)[0]; -assert( - /background\s*:\s*repeating-linear-gradient\(\s*90deg\s*,\s*var\(\s*--building-color4\s*\)\s*(0%\s*,|,)\s*var\(\s*--building-color4\s*\)\s*10%\s*,\s*transparent\s*10%\s*,\s*transparent\s*15%\s*\)\s*(;|})/g.test( - fb1c - ) -); +assert.include(new __helpers.CSSHelp(document).getStyle(".fb1c")?.background, "repeating-linear-gradient"); +``` + +You should use a direction of `90deg`. + +```js +assert.include(new __helpers.CSSHelp(document).getStyle(".fb1c")?.getPropVal('background', true), "repeating-linear-gradient(90deg"); +``` + +You should use a first color of `--building-color4` from `0%` to `10%`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".fb1c")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color4\)(0%)?,var\(--building-color4\)10%/); +``` + +You should use a second color of `transparent` from `10%` to `15%`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".fb1c")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color4\)(0%)?,var\(--building-color4\)10%,transparent10%,transparent15%\)/); ``` # --seed-- @@ -33,199 +46,7 @@ assert( freeCodeCamp Skyline Project - + @@ -279,262 +100,197 @@ assert( ``` -# --solutions-- +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + ``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-078.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-078.md index 15b89de0c1..53da66d55e 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-078.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-078.md @@ -18,19 +18,26 @@ gradient2( ); ``` -Add a `repeating-linear-gradient` to `fb1c` below the one that's there; use your `--building-color4` from `0%` to `10%` and `--window-color4` from `10%` and `90%`. This will fill in behind the gradient you added last. +Add a `repeating-linear-gradient` to `.fb1c` below the one that's there; use your `--building-color4` from `0%` to `10%` and `--window-color4` from `10%` and `90%`. This will fill in behind the gradient you added last. # --hints-- -test-text +You should not alter the first `repeating-linear-gradient`. ```js -const fb1c = code.match(/\.fb1c\s*{[\s\S]+?[^}]}/g)[0]; -assert( - /background\s*:\s*repeating-linear-gradient\(\s*90deg\s*,\s*var\(\s*--building-color4\s*\)\s*(0%\s*,|,)\s*var\(\s*--building-color4\s*\)\s*10%\s*,\s*transparent\s*10%\s*,\s*transparent\s*15%\s*\)\s*,\s*repeating-linear-gradient\(\s*var\(\s*--building-color4\s*\)\s*(0%\s*,|,)\s*var\(\s*--building-color4\s*\)\s*10%\s*,\s*var\(\s*--window-color4\s*\)\s*10%\s*,\s*var\(\s*--window-color4\s*\)\s*90%\s*\)\s*(;|})/g.test( - fb1c - ) -); +assert.match(new __helpers.CSSHelp(document).getStyle(".fb1c")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color4\)(0%)?,var\(--building-color4\)10%,transparent10%,transparent15%\)/); +``` + +You should add a `repeating-linear-gradient` with a first color of `--building-color4` from `0%` to `10%`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".fb1c")?.getPropVal('background', true), /repeating-linear-gradient\(var\(--building-color4\)(0%)?,var\(--building-color4\)10%/); +``` + +You should use a second color of `--window-color4` from `10%` to `90%`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".fb1c")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color4\)(0%)?,var\(--building-color4\)10%,transparent10%,transparent15%\),repeating-linear-gradient\(var\(--building-color4\)(0%)?,var\(--building-color4\)10%,var\(--window-color4\)10%,var\(--window-color4\)90%\)/); ``` # --seed-- @@ -42,206 +49,7 @@ assert( freeCodeCamp Skyline Project - + @@ -295,268 +103,204 @@ assert( ``` -# --solutions-- +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + ``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-079.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-079.md index ddca723f61..427ff06cca 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-079.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-079.md @@ -7,19 +7,20 @@ dashedName: part-79 # --description-- -You're going to use some more border tricks for top section. Add a `border-bottom` with a value of `7vh solid var(--building-color4)` to `fb1a`. This will put a `7vh` height border on the bottom. But since the element has zero size, it only shows up as a 2px wide line from the 1px border that is on all the elements. +You're going to use some more border tricks for the top section. Add a `border-bottom` with a value of `7vh solid var(--building-color4)` to `.fb1a`. This will put a `7vh` height border on the bottom. But since the element has zero size, it only shows up as a 2px wide line from the 1px border that is on all the elements. # --hints-- -test-text +You should give `.fb1a` a `border-bottom`. ```js -const fb1a = code.match(/\.fb1a\s*{[\s\S]+?[^}]}/g)[0]; -assert( - /border-bottom\s*:\s*7vh\s+solid\s+var\(\s*--building-color4\s*\)\s*(;|})/g.test( - fb1a - ) -); +assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle(".fb1a")?.borderBottom); +``` + +You should use a `border-bottom` of `7vh solid var(--building-color4)`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1a")?.borderBottom.trim(), "7vh solid var(--building-color4)"); ``` # --seed-- @@ -31,212 +32,7 @@ assert( freeCodeCamp Skyline Project - + @@ -290,272 +86,212 @@ assert( ``` -# --solutions-- +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} -```html - - - - freeCodeCamp Skyline Project - - +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + ``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-080.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-080.md index 4ab9188403..4c177a753f 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-080.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-080.md @@ -7,18 +7,20 @@ dashedName: part-80 # --description-- -When you make the left and right borders bigger, the border on the bottom will expand to be the width of the combined left and right border widths. Add `2vw solid transparent;` as the value of the `border-left` and `border-right` properties of `fb1a`. They will be invisible, but it will make the border on the bottom `4vw` wide. +When you make the left and right borders bigger, the border on the bottom will expand to be the width of the combined left and right border widths. Add `2vw solid transparent` as the value of the `border-left` and `border-right` properties of `.fb1a`. They will be invisible, but it will make the border on the bottom `4vw` wide. # --hints-- -test-text +You should give `.fb1a` a `border-left` of `2vw solid transparent`. ```js -const fb1a = code.match(/\.fb1a\s*{[\s\S]+?[^}]}/g)[0]; -assert( - /border-left\s*:\s*2vw\s+solid\s+transparent\s*(;|})/g.test(fb1a) && - /border-right\s*:\s*2vw\s+solid\s+transparent\s*(;|})/g.test(fb1a) -); +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1a")?.borderLeft, "2vw solid transparent"); +``` + +You should give `.fb1a` a `border-right` of `2vw solid transparent`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1a")?.borderRight, "2vw solid transparent"); ``` # --seed-- @@ -30,216 +32,7 @@ assert( freeCodeCamp Skyline Project - + @@ -293,274 +86,215 @@ assert( ``` -# --solutions-- +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} -```html - - - - freeCodeCamp Skyline Project - - +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + ``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-081.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-081.md index 895d2ead8f..109408b6b1 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-081.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-081.md @@ -7,17 +7,27 @@ dashedName: part-81 # --description-- -On to the next building! Nest two `div` elements within `fb2` and give them the classes of `fb2a` and `fb2b`, in that order. +On to the next building! Nest two `div` elements within `.fb2` and give them classes of `fb2a` and `fb2b`, in that order. # --hints-- -test-text +You should add two `div` elements within `.fb2`. ```js -const fb2 = $('.fb2').children('div'); -assert( - fb2.length === 2 && fb2[0] === $('div.fb2a')[0] && fb2[1] === $('div.fb2b')[0] -); +assert.equal(document.querySelectorAll("div.fb2 > div")?.length, 2); +``` + +You should give the first new `div` a class of `fb2a`. + +```js +assert.exists(document.querySelector("div.fb2 > div.fb2a")); +assert(document.querySelector("div.fb2 > div.fb2a") === document.querySelector("div.fb2")?.firstElementChild); +``` + +You should give the second new `div` a class of `fb2b`. + +```js +assert.exists(document.querySelector("div.fb2 > div.fb2b")); ``` # --seed-- @@ -29,218 +39,7 @@ assert( freeCodeCamp Skyline Project - + @@ -281,7 +80,9 @@ assert(
+--fcc-editable-region--
+--fcc-editable-region--
@@ -294,277 +95,217 @@ assert( ``` -# --solutions-- +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} -```html - - - - freeCodeCamp Skyline Project - - +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + ``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-082.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-082.md index 3ac5ed7c0a..bf324a2956 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-082.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-082.md @@ -7,20 +7,26 @@ dashedName: part-82 # --description-- -Give `fb2a` a `width` of `100%` and `fb2b` a `width` of `100%` and `height` of `75%`. +Give `.fb2a` a `width` of `100%` and `.fb2b` a `width` of `100%` and `height` of `75%`. # --hints-- -test-text +You should give `.fb2a` a `width` of `100%`. ```js -const fb2a = code.match(/\.fb2a\s*{[\s\S]+?[^}]}/g)[0]; -const fb2b = code.match(/\.fb2b\s*{[\s\S]+?[^}]}/g)[0]; -assert( - /width\s*:\s*100%\s*(;|})/g.test(fb2a) && - /width\s*:\s*100%\s*(;|})/g.test(fb2b) && - /height\s*:\s*75%\s*(;|})/g.test(fb2b) -); +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2a")?.width, "100%"); +``` + +You should give `.fb2b` a `width` of `100%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2b")?.width, "100%"); +``` + +You should give `.fb2b` a `height` of `75%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2b")?.height, "75%"); ``` # --seed-- @@ -32,218 +38,7 @@ assert( freeCodeCamp Skyline Project - + @@ -300,286 +95,219 @@ assert( ``` -# --solutions-- +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} -```html - - - - freeCodeCamp Skyline Project - - +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + ``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-083.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-083.md index ca4381140b..24184743ac 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-083.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-083.md @@ -7,14 +7,20 @@ dashedName: part-83 # --description-- -Nest three `div` elements within `fb2b` and give them a class of `fb2-window`. These will be windows for this section of the building. +Nest three `div` elements within `.fb2b` and give them a class of `fb2-window`. These will be windows for this section of the building. # --hints-- -test-text +You should add three `div` elements within `.fb2b`. ```js -assert($('.fb2b').children('div.fb2-window').length === 3); +assert.equal(document.querySelectorAll("div.fb2b > div")?.length, 3); +``` + +You should give the three new `div` elements each a class of `fb2-window`. + +```js +assert.equal(document.querySelectorAll("div.fb2-window")?.length, 3); ``` # --seed-- @@ -26,227 +32,7 @@ assert($('.fb2b').children('div.fb2-window').length === 3); freeCodeCamp Skyline Project - + @@ -289,7 +75,9 @@ assert($('.fb2b').children('div.fb2-window').length === 3);
+--fcc-editable-region--
+--fcc-editable-region--
@@ -303,290 +91,226 @@ assert($('.fb2b').children('div.fb2-window').length === 3); ``` -# --solutions-- +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} -```html - - - - freeCodeCamp Skyline Project - - +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + ``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-084.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-084.md index 1c452cf77a..b775b0fe5f 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-084.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-084.md @@ -7,14 +7,14 @@ dashedName: part-84 # --description-- -Add your `window-wrap` class to `fb2b` to position the new window elements. +Add your `window-wrap` class to `.fb2b` to position the new window elements. # --hints-- -test-text +You should add the class `window-wrap` to `.fb2b`. ```js -assert($('.fb2b.window-wrap').length === 1); +assert.exists(document.querySelector("div.fb2b.window-wrap")); ``` # --seed-- @@ -26,227 +26,7 @@ assert($('.fb2b.window-wrap').length === 1); freeCodeCamp Skyline Project - + @@ -289,11 +69,13 @@ assert($('.fb2b.window-wrap').length === 1);
+--fcc-editable-region--
+--fcc-editable-region--
@@ -307,290 +89,226 @@ assert($('.fb2b.window-wrap').length === 1); ``` -# --solutions-- +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} -```html - - - - freeCodeCamp Skyline Project - - +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + ``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-085.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-085.md index db1f4577c4..9326f714b2 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-085.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-085.md @@ -7,19 +7,26 @@ dashedName: part-85 # --description-- -Give the `fb2-window` elements a `width` of `22%`, `height` of `100%`, and a `background-color` of your `--window-color3` variable. +Give the `.fb2-window` elements a `width` of `22%`, `height` of `100%`, and a `background-color` of your `--window-color3` variable. # --hints-- -test-text +You should give the `.fb2-window` elements a `width` of `22%`. ```js -const fb2w = code.match(/\.fb2-window\s*{[\s\S]+?[^}]}/g)[0]; -assert( - /width\s*:\s*22%\s*(;|})/g.test(fb2w) && - /height\s*:\s*100%\s*(;|})/g.test(fb2w) && - /background-color\s*:\s*var\(\s*--window-color3\s*\)\s*(;|})/g.test(fb2w) -); +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2-window")?.width, "22%"); +``` + +You should give the `.fb2-window` elements a `height` of `100%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2-window")?.height, "100%"); +``` + +You should give the `.fb2-window` elements a `background-color` of `--window-color3`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2-window")?.backgroundColor.trim(), "var(--window-color3)"); ``` # --seed-- @@ -31,227 +38,7 @@ assert( freeCodeCamp Skyline Project - + @@ -312,296 +99,227 @@ assert( ``` -# --solutions-- +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} -```html - - - - freeCodeCamp Skyline Project - - +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + ``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-086.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-086.md index 4e6565bdb9..8caf7577c6 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-086.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-086.md @@ -7,19 +7,20 @@ dashedName: part-86 # --description-- -Move the `background-color` property and value from `fb2` to `fb2b` to just color the section and not the container. +Move the `background-color` property and value from `.fb2` to `.fb2b` to just color the section and not the container. # --hints-- -test-text +You should remove the `background-color` property from `.fb2`. ```js -const fb2 = code.match(/\.fb2\s*{[\s\S]+?[^}]}/g)[0]; -const fb2b = code.match(/\.fb2b\s*{[\s\S]+?[^}]}/g)[0]; -assert( - !/background-color/g.test(fb2) && - /background-color\s*:\s*var\(\s*--building-color3\s*\)\s*(;|})/g.test(fb2b) -); +assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".fb2")?.backgroundColor); +``` + +You should give `.fb2b` a `background-color` of `--building-color3`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2b")?.backgroundColor.trim(), "var(--building-color3)"); ``` # --seed-- @@ -31,233 +32,7 @@ assert( freeCodeCamp Skyline Project - + @@ -318,296 +93,231 @@ assert( ``` -# --solutions-- +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} -```html - - - - freeCodeCamp Skyline Project - - +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + ``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-087.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-087.md index 7820fb5768..50973d12a8 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-087.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-087.md @@ -7,21 +7,26 @@ dashedName: part-87 # --description-- -For `fb2a`, add a `border-bottom` of `10vh solid var(--building-color3)` and a `border-left` and `border-right` of `1vw solid transparent`. This time the border trick will create a trapezoid shape. +For `.fb2a`, add a `border-bottom` of `10vh solid var(--building-color3)`, and a `border-left` and `border-right` of `1vw solid transparent`. This time the border trick will create a trapezoid shape. # --hints-- -test-text +You should give `.fb2a` a `border-bottom` of `10vh solid var(--building-color3)`. ```js -const fb2a = code.match(/\.fb2a\s*{[\s\S]+?[^}]}/g)[0]; -assert( - /border-bottom\s*:\s*10vh\s+solid\s+var\(\s*--building-color3\s*\)\s*(;|})/g.test( - fb2a - ) && - /border-left\s*:\s*1vw\s+solid\s+transparent\s*(;|})/g.test(fb2a) && - /border-right\s*:\s*1vw\s+solid\s+transparent\s*(;|})/g.test(fb2a) -); +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2a")?.borderBottom.trim(), "10vh solid var(--building-color3)"); +``` + +You should give `.fb2a` a `border-left` of `1vw solid transparent`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2a")?.borderLeft, "1vw solid transparent"); +``` + +You should give `.fb2a` a `border-right` of `1vw solid transparent`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2a")?.borderRight, "1vw solid transparent"); ``` # --seed-- @@ -33,233 +38,7 @@ assert( freeCodeCamp Skyline Project - + @@ -320,299 +99,231 @@ assert( ``` -# --solutions-- +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} -```html - - - - freeCodeCamp Skyline Project - - +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + ``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-088.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-088.md index b1b082bc0f..6ccdfd4622 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-088.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-088.md @@ -7,22 +7,38 @@ dashedName: part-88 # --description-- -For the next building, nest four `div` elements within `fb3` with classes of `fb3a`, `fb3b`, `fb3a` again, and `fb3b` again, in that order. This building will have four sections and the top two will be almost the same as the bottom two. +For the next building, nest four `div` elements within `.fb3` with classes of `fb3a`, `fb3b`, `fb3a` again, and `fb3b` again, in that order. This building will have four sections, and the top two will be almost the same as the bottom two. # --hints-- -test-text +You should add four `div` elements within `.fb3`. ```js -const fb3 = $('.fb3').children('div'); -console.log(fb3); -assert( - fb3.length === 4 && - fb3[0] === $('div.fb3a')[0] && - fb3[1] === $('div.fb3b')[0] && - fb3[2] === $('div.fb3a')[1] && - fb3[3] === $('div.fb3b')[1] -); +assert.equal(document.querySelectorAll("div.fb3 > div")?.length, 4); +``` + +You should give the first new `div` a class of `fb3a`. + +```js +assert.equal(document.querySelector("div.fb3").firstElementChild, document.querySelector("div.fb3a")); +``` + +You should give the second new `div` a class of `fb3b`. + +```js +assert.equal(document.querySelector("div.fb3 :nth-child(2)"), document.querySelector("div.fb3b")); +``` + +You should give the third new `div` a class of `fb3a`. + +```js +assert.equal(document.querySelector("div.fb3 :nth-child(3)"), document.querySelector("div.fb3b + div.fb3a")); +``` + +You should give the fourth new `div` a class of `fb3b`. + +```js +assert.exists(document.querySelector("div.fb3 :nth-child(4).fb3b")); ``` # --seed-- @@ -34,236 +50,7 @@ assert( freeCodeCamp Skyline Project - + @@ -313,7 +100,9 @@ assert(
+--fcc-editable-region--
+--fcc-editable-region--
@@ -324,304 +113,235 @@ assert( ``` -# --solutions-- +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} -```html - - - - freeCodeCamp Skyline Project - - +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + ``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-089.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-089.md index bdd55b260e..dc7197e55d 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-089.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-089.md @@ -7,21 +7,32 @@ dashedName: part-89 # --description-- -Give the `fb3a` element a `width` of `80%` and `height` of `15%`. Then give the `fb3b` element a `width` of `100%` and `height` of `35%`. +Give the `.fb3a` element a `width` of `80%` and `height` of `15%`. Then give the `.fb3b` element a `width` of `100%` and `height` of `35%`. # --hints-- -test-text +You should give `.fb3a` a `width` of `80%`. ```js -const fb3a = code.match(/\.fb3a\s*{[\s\S]+?[^}]}/g)[0]; -const fb3b = code.match(/\.fb3b\s*{[\s\S]+?[^}]}/g)[0]; -assert( - /width\s*:\s*80%\s*(;|})/g.test(fb3a) && - /height\s*:\s*15%\s*(;|})/g.test(fb3a) && - /width\s*:\s*100%\s*(;|})/g.test(fb3b) && - /height\s*:\s*35%\s*(;|})/g.test(fb3b) -); +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3a")?.width, "80%"); +``` + +You should give `.fb3a` a `height` of `15%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3a")?.height, "15%"); +``` + +You should give `.fb3b` a `width` of `100%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3b")?.width, "100%"); +``` + +You should give `.fb3b` a `height` of `35%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3b")?.height, "35%"); ``` # --seed-- @@ -33,236 +44,7 @@ assert( freeCodeCamp Skyline Project - + @@ -328,314 +110,237 @@ assert( ``` -# --solutions-- +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} -```html - - - - freeCodeCamp Skyline Project - - +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + ``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-090.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-090.md index 878a7bb4a5..bb0c2f514b 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-090.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-090.md @@ -7,23 +7,26 @@ dashedName: part-90 # --description-- -Remove the `background-color` property and value from `fb3` and add them to `fb3a` and `fb3b`. +Remove the `background-color` property and value from `.fb3`, and add them to `.fb3a` and `.fb3b`. # --hints-- -test-text +You should remove the `background-color` from `.fb3`. ```js -const fb3 = code.match(/\.fb3\s*{[\s\S]+?[^}]}/g)[0]; -const fb3a = code.match(/\.fb3a\s*{[\s\S]+?[^}]}/g)[0]; -const fb3b = code.match(/\.fb3b\s*{[\s\S]+?[^}]}/g)[0]; -assert( - !/background-color/g.test(fb3) && - /background-color\s*:\s*var\(\s*--building-color1\s*\)\s*(;|})/g.test( - fb3a - ) && - /background-color\s*:\s*var\(\s*--building-color1\s*\)\s*(;|})/g.test(fb3b) -); +assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".fb3")?.backgroundColor); +``` + +You should give `.fb3a` a `background-color` of `--building-color1`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3a")?.backgroundColor.trim(), "var(--building-color1)"); +``` + +You should give `.fb3b` a `background-color` of `--building-color1`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3b")?.backgroundColor.trim(), "var(--building-color1)"); ``` # --seed-- @@ -35,246 +38,7 @@ assert( freeCodeCamp Skyline Project - + @@ -340,315 +104,244 @@ assert( ``` -# --solutions-- +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + ``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-091.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-091.md index 34411c0ebc..6be858bcdc 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-091.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-091.md @@ -7,14 +7,14 @@ dashedName: part-91 # --description-- -Add your `building-wrap` class to the `fb3` element to center the sections. +Add your `building-wrap` class to the `.fb3` element to center the sections. # --hints-- -test-text +You should add the class `building-wrap` to `.fb3`. ```js -assert($('.fb3.building-wrap').length === 1); +assert.exists(document.querySelector("div.fb3.building-wrap")); ``` # --seed-- @@ -26,247 +26,7 @@ assert($('.fb3.building-wrap').length === 1); freeCodeCamp Skyline Project - + @@ -316,12 +76,14 @@ assert($('.fb3.building-wrap').length === 1);
+--fcc-editable-region--
+--fcc-editable-region--
@@ -332,315 +94,246 @@ assert($('.fb3.building-wrap').length === 1); ``` -# --solutions-- +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} -```html - - - - freeCodeCamp Skyline Project - - +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + ``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-092.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-092.md index 92ab0ffac6..934c17f77d 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-092.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-092.md @@ -7,14 +7,20 @@ dashedName: part-92 # --description-- -Nest three new `div` elements in the first `fb3a` element. Give them each a class of `fb3-window`. These will be windows for this section. +Nest three new `div` elements in the first `.fb3a` element. Give them each a class of `fb3-window`. These will be windows for this section. # --hints-- -test-text +You should add three `div` elements within the first `.fb3a` element. ```js -assert($('.fb3 div.fb3a:first-child').children('div.fb3-window').length === 3); +assert.equal(document.querySelectorAll("div.fb3a > div")?.length, 3); +``` + +You should give each new `div` a class of `fb3-window`. + +```js +assert.equal(document.querySelectorAll("div.fb3-window")?.length, 3) ``` # --seed-- @@ -26,247 +32,7 @@ assert($('.fb3 div.fb3a:first-child').children('div.fb3-window').length === 3); freeCodeCamp Skyline Project - + @@ -317,7 +83,9 @@ assert($('.fb3 div.fb3a:first-child').children('div.fb3-window').length === 3);
+--fcc-editable-region--
+--fcc-editable-region--
@@ -332,319 +100,246 @@ assert($('.fb3 div.fb3a:first-child').children('div.fb3-window').length === 3); ``` -# --solutions-- +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} -```html - - - - freeCodeCamp Skyline Project - - +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + ``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-093.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-093.md index 17b19b4aa6..df2a8d48b7 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-093.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-093.md @@ -7,19 +7,26 @@ dashedName: part-93 # --description-- -Give the `fb3-window` elements a `width` of `25%`, a `height` of `80%`, and use your `--window-color1` variable as the `background-color` value. +Give the `.fb3-window` elements a `width` of `25%`, a `height` of `80%`, and use your `--window-color1` variable as the `background-color` value. # --hints-- -test-text +You should give `.fb3-window` a `width` of `25%`. ```js -const fb3w = code.match(/\.fb3-window\s*{[\s\S]+?[^}]}/g)[0]; -assert( - /width\s*:\s*25%\s*(;|})/g.test(fb3w) && - /height\s*:\s*80%\s*(;|})/g.test(fb3w) && - /background-color\s*:\s*var\(\s*--window-color1\s*\)\s*(;|})/g.test(fb3w) -); +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3-window")?.width, "25%"); +``` + +You should give `.fb3-window` a `height` of `80%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3-window")?.height, "80%"); +``` + +You should give `.fb3-window` a `background-color` of `--window-color1`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3-window")?.backgroundColor.trim(), "var(--window-color1)"); ``` # --seed-- @@ -31,247 +38,7 @@ assert( freeCodeCamp Skyline Project - + @@ -341,325 +108,247 @@ assert( ``` -# --solutions-- +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + ``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-094.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-094.md index 1dde6d37ae..759f3108a6 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-094.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-094.md @@ -7,14 +7,14 @@ dashedName: part-94 # --description-- -Add your `window-wrap` class to the `fb3a` element to center and space the windows. +Add your `window-wrap` class to the `.fb3a` element to center and space the windows. # --hints-- -test-text +You should give `.fb3a` a class of `window-wrap`. ```js -assert($('.fb3 div.fb3a:first-child').hasClass('window-wrap')); +assert.exists(document.querySelector("div.fb3a.window-wrap")); ``` # --seed-- @@ -26,253 +26,7 @@ assert($('.fb3 div.fb3a:first-child').hasClass('window-wrap')); freeCodeCamp Skyline Project - + @@ -323,11 +77,13 @@ assert($('.fb3 div.fb3a:first-child').hasClass('window-wrap'));
+--fcc-editable-region--
+--fcc-editable-region--
@@ -342,325 +98,252 @@ assert($('.fb3 div.fb3a:first-child').hasClass('window-wrap')); ``` -# --solutions-- +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} -```html - - - - freeCodeCamp Skyline Project - - +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + ``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-095.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-095.md index b500a0d428..791e0dd553 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-095.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-095.md @@ -11,11 +11,10 @@ I'm not thrilled about that black for the windows anymore. Change the `--window- # --hints-- -test-text +You should change the value of `--window-color1` to `#bb99ff`. ```js -const root = code.match(/:root\s*{[\s\S]+?[^}]}/g)[0]; -assert(/--window-color1\s*:\s*#bb99ff\s*(;|})/g.test(root)); +assert.equal(new __helpers.CSSHelp(document).getStyle(":root")?.getPropertyValue("--window-color1")?.trim(), "#bb99ff"); ``` # --seed-- @@ -27,253 +26,7 @@ assert(/--window-color1\s*:\s*#bb99ff\s*(;|})/g.test(root)); freeCodeCamp Skyline Project - + @@ -343,325 +96,253 @@ assert(/--window-color1\s*:\s*#bb99ff\s*(;|})/g.test(root)); ``` -# --solutions-- +```css +--fcc-editable-region-- +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: black; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} +--fcc-editable-region-- +* { + border: 1px solid black; + box-sizing: border-box; +} -```html - - - - freeCodeCamp Skyline Project - - +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + ``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-096.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-096.md index e36510fc3f..e2ffa35234 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-096.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-096.md @@ -7,17 +7,26 @@ dashedName: part-96 # --description-- -Only three more building to go. Nest two new `div` elements within the `fb4` element and give them the classes of `fb4a` and `fb4b`, in that order. Remember that you sort of flipped the location of `fb4` and `fb5`, so it's the rightmost purple building you are working on now. +Only three more building to go. Nest two new `div` elements within the `.fb4` element and give them the classes of `fb4a` and `fb4b`, in that order. Remember that you sort of flipped the location of `.fb4` and `.fb5`, so it's the rightmost purple building you are working on now. # --hints-- -test-text +You should add two `div` elements within `.fb4`. ```js -const fb4 = $('.fb4').children('div'); -assert( - fb4.length === 2 && fb4[0] === $('div.fb4a')[0] && fb4[1] === $('div.fb4b')[0] -); +assert.equal(document.querySelectorAll("div.fb4 > div")?.length, 2); +``` + +You should give the first new `div` a class of `fb4a`. + +```js +assert.exists(document.querySelector("div.fb4a")); +``` + +You should give the second new `div` a class of `fb4b`. + +```js +assert.exists(document.querySelector("div.fb4b")); ``` # --seed-- @@ -29,253 +38,7 @@ assert( freeCodeCamp Skyline Project - + @@ -335,7 +98,9 @@ assert(
+--fcc-editable-region--
+--fcc-editable-region--
@@ -345,328 +110,252 @@ assert( ``` -# --solutions-- +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} -```html - - - - freeCodeCamp Skyline Project - - +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + ``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-097.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-097.md index 8aed6330b7..f37352eedb 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-097.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-097.md @@ -7,18 +7,20 @@ dashedName: part-97 # --description-- -Give `fb4b` a `width` of `100%` and `height` of `89%`. +Give `.fb4b` a `width` of `100%` and `height` of `89%`. # --hints-- -test-text +You should give `.fb4b` a `width` of `100%`. ```js -const fb4b = code.match(/\.fb4b\s*{[\s\S]+?[^}]}/g)[0]; -assert( - /width\s*:\s*100%\s*(;|})/g.test(fb4b) && - /height\s*:\s*89%\s*(;|})/g.test(fb4b) -); +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4b")?.width, "100%"); +``` + +You should give `.fb4b` a `height` of `89%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4b")?.height, "89%"); ``` # --seed-- @@ -30,253 +32,7 @@ assert( freeCodeCamp Skyline Project - + @@ -349,333 +105,254 @@ assert( ``` -# --solutions-- +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + ``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-098.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-098.md index 4b5e460fdc..87770986b0 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-098.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-098.md @@ -7,19 +7,20 @@ dashedName: part-98 # --description-- -Add your `--building-color1` variable as value of the `background-color` property of `fb4b`. Then, remove the `background-color` from `fb4`. +Add your `--building-color1` variable as value of the `background-color` property of `.fb4b`. Then, remove the `background-color` from `.fb4`. # --hints-- -test-text +You should remove the `background-color` from `.fb4`. ```js -const fb4 = code.match(/\.fb4\s*{[\s\S]+?[^}]}/g)[0]; -const fb4b = code.match(/\.fb4b\s*{[\s\S]+?[^}]}/g)[0]; -assert( - !/background-color/g.test(fb4) && - /background-color\s*:\s*var\(\s*--building-color1\s*\)\s*(;|})/g.test(fb4b) -); +assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".fb4")?.backgroundColor); +``` + +You should give `.fb4b` a `background-color` of `--building-color1`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4b")?.backgroundColor.trim(), "var(--building-color1)"); ``` # --seed-- @@ -31,258 +32,7 @@ assert( freeCodeCamp Skyline Project - + @@ -355,333 +105,256 @@ assert( ``` -# --solutions-- +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + ``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-099.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-099.md index 23598b0457..f31cd0844c 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-099.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-099.md @@ -7,14 +7,20 @@ dashedName: part-99 # --description-- -Nest six `div` elements within `fb4b` and give them all a class of `fb4-window`. +Nest six `div` elements within `.fb4b` and give them all a class of `fb4-window`. # --hints-- -test-text +You should add six `div` elements within `.fb4b`. ```js -assert($('.fb4b').children('div.fb4-window').length === 6); +assert.equal(document.querySelectorAll("div.fb4b > div")?.length, 6); +``` + +You should give each new `div` a class of `fb4-window`. + +```js +assert.equal(document.querySelectorAll("div.fb4-window")?.length, 6); ``` # --seed-- @@ -26,258 +32,7 @@ assert($('.fb4b').children('div.fb4-window').length === 6); freeCodeCamp Skyline Project - + @@ -339,7 +94,9 @@ assert($('.fb4b').children('div.fb4-window').length === 6);
+--fcc-editable-region--
+--fcc-editable-region--
@@ -350,340 +107,257 @@ assert($('.fb4b').children('div.fb4-window').length === 6); ``` -# --solutions-- +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} -```html - - - - freeCodeCamp Skyline Project - - +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + ``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-100.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-100.md index 1f8059feb2..31f752029a 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-100.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-100.md @@ -7,19 +7,26 @@ dashedName: part-100 # --description-- -Give the `fb4-window` elements a `width` of `30%`, `height` of `10%`, and `border-radius` of `50%`. These will make some circular windows for this building. +Give the `.fb4-window` elements a `width` of `30%`, `height` of `10%`, and `border-radius` of `50%`. These will make some circular windows for this building. # --hints-- -test-text +You should give `.fb4-window` a `width` of `30%`. ```js -const fb4w = code.match(/\.fb4-window\s*{[\s\S]+?[^}]}/g)[0]; -assert( - /width\s*:\s*30%\s*(;|})/g.test(fb4w) && - /height\s*:\s*10%\s*(;|})/g.test(fb4w) && - /border-radius\s*:\s*50%\s*(;|})/g.test(fb4w) -); +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4-window")?.width, "30%"); +``` + +You should give `.fb4-window` a `height` of `10%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4-window")?.height, "10%"); +``` + +You should give `.fb4-window` a `border-radius` of `50%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4-window")?.borderRadius, "50%"); ``` # --seed-- @@ -31,258 +38,7 @@ assert( freeCodeCamp Skyline Project - + @@ -362,346 +118,259 @@ assert( ``` -# --solutions-- +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + ``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-101.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-101.md index f9d0fdf02b..9bb4540b01 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-101.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-101.md @@ -11,14 +11,16 @@ Fill in the windows with your secondary color for this building. Also add a `mar # --hints-- -test-text +You should give `.fb4-window` a `background-color` of `--window-color1`. ```js -const fb4w = code.match(/\.fb4-window\s*{[\s\S]+?[^}]}/g)[0]; -assert( - /background-color\s*:\s*var\(\s*--window-color1\s*\)\s*(;|})/g.test(fb4w) && - /margin\s*:\s*10%\s*(;|})/g.test(fb4w) -); +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4-window")?.backgroundColor.trim(), "var(--window-color1)"); +``` + +You should give `.fb4-window` a `margin` of `10%`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4-window")?.margin, "10%"); ``` # --seed-- @@ -30,264 +32,7 @@ assert( freeCodeCamp Skyline Project - + @@ -367,348 +112,262 @@ assert( ``` -# --solutions-- +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + ``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-102.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-102.md index cd66060515..9df52f7221 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-102.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-102.md @@ -7,16 +7,20 @@ dashedName: part-102 # --description-- -Add `display: flex;` and `flex-wrap: wrap;` to the window container. This will put your windows side by side and then push them down to a new row when they don't fit. +Add `display: flex` and `flex-wrap: wrap` to the window container. This will put your windows side by side, and then push them down to a new row when they don't fit. # --hints-- -test-text +You should give `.fb4b` a `display` of `flex`. ```js -assert( - $('.fb4b').css('display') === 'flex' && $('.fb4b').css('flex-wrap') === 'wrap' -); +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4b")?.display, "flex"); +``` + +You should give `.fb4b` a `flex-wrap` of `wrap`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4b")?.flexWrap, "wrap"); ``` # --seed-- @@ -28,266 +32,7 @@ assert( freeCodeCamp Skyline Project - + @@ -367,350 +112,265 @@ assert( ``` -# --solutions-- +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + ``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-103.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-103.md index 52e7fefe0d..f6d9f9b1de 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-103.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-103.md @@ -7,20 +7,20 @@ dashedName: part-103 # --description-- -This building is going to have another triangle on top. Give the top section a `border-top` of `5vh solid transparent` and a `border-left` that is `8vw`, `solid`, and uses your building color variable as the color. +This building is going to have another triangle on top. Give the top section a `border-top` of `5vh solid transparent`, and a `border-left` that is `8vw`, `solid`, and uses your building color variable as the color. # --hints-- -test-text +You should give `.fb4a` a `border-top` of `5vh solid transparent`. ```js -const fb4a = code.match(/\.fb4a\s*{[\s\S]+?[^}]}/g)[0]; -assert( - /border-top\s*:\s*5vh\s+solid\s+transparent\s*(;|})/g.test(fb4a) && - /border-left\s*:\s*8vw\s+solid\s+var\(\s*--building-color1\s*\)\s*(;|})/g.test( - fb4a - ) -); +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4a")?.borderTop.trim(), "5vh solid transparent") +``` + +You should give `.fb4a` a `border-left` of `8vw solid var(--building-color1)`. + +```js +assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4a")?.borderLeft.trim(), "8vw solid var(--building-color1)") ``` # --seed-- @@ -32,268 +32,7 @@ assert( freeCodeCamp Skyline Project - + @@ -373,355 +112,269 @@ assert( ``` -# --solutions-- +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + ``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-104.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-104.md index 6704793daa..e51d237193 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-104.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-104.md @@ -7,19 +7,32 @@ dashedName: part-104 # --description-- -On to the next building! It's the green one in the foreground. Give it a `repeating-linear-gradient` with your building color from `0%` to `5%` and `transparent` from `5%` to `10%`. +On to the next building! It's the green one in the foreground. Give it a `repeating-linear-gradient` with your building color from `0%` to `5%`, and `transparent` from `5%` to `10%`. # --hints-- -test-text +You should give `.fb5` a `background` property. ```js -const fb5 = code.match(/\.fb5\s*{[\s\S]+?[^}]}/g)[0]; -assert( - /background\s*:\s*repeating-linear-gradient\(\s*var\(\s*--building-color2\s*\)\s*(0%\s*,|,)\s*var\(\s*--building-color2\s*\)\s*5%\s*,\s*transparent\s*5%\s*,\s*transparent\s*10%\s*\)\s*(;|})/g.test( - fb5 - ) -); +assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle(".fb5")?.background); +``` + +You should give the `background` a `repeating-linear-gradient`. + +```js +assert.include(new __helpers.CSSHelp(document).getStyle(".fb5")?.background, "repeating-linear-gradient"); +``` + +You should give the `repeating-linear-gradient` a first color of `--building-color2` from `0%` to `5%`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".fb5")?.getPropVal('background', true), /repeating-linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)5%/); +``` + +You should give the `repeating-linear-gradient` a second color of `transparent` from `5%` to `10%`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".fb5")?.getPropVal('background', true), /repeating-linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)5%,transparent5%,transparent10%\)/); ``` # --seed-- @@ -31,273 +44,7 @@ assert( freeCodeCamp Skyline Project - + @@ -377,361 +124,272 @@ assert( ``` -# --solutions-- +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - +.fb4-window { + width: 30%; + height: 10%; + border-radius: 50%; + background-color: var(--window-color1); + margin: 10%; +} +--fcc-editable-region-- +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; +} +--fcc-editable-region-- +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + ``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-105.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-105.md index 0beaca229a..d0bd2ea1f0 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-105.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-105.md @@ -11,15 +11,28 @@ Add another `repeating-linear-gradient` below the one you just added. Give it a # --hints-- -test-text +You should give `.fb5` a second `repeating-linear-gradient` in the `background` property. ```js -const fb5 = code.match(/\.fb5\s*{[\s\S]+?[^}]}/g)[0]; -assert( - /background\s*:\s*repeating-linear-gradient\(\s*var\(\s*--building-color2\s*\)\s*(0%\s*,|,)\s*var\(\s*--building-color2\s*\)\s*5%\s*,\s*transparent\s*5%\s*,\s*transparent\s*10%\s*\)\s*,\s*repeating-linear-gradient\(\s*90deg\s*,\s*var\(\s*--building-color2\s*\)\s*(0%\s*,|,)\s*var\(\s*--building-color2\s*\)\s*12%\s*,\s*var\(\s*--window-color2\s*\)\s*12%\s*,\s*var\(\s*--window-color2\s*\)\s*44%\s*\)\s*(;|})/g.test( - fb5 - ) -); +assert.match(new __helpers.CSSHelp(document).getStyle(".fb5")?.getPropVal('background', true), /repeating-linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)5%,transparent5%,transparent10%\),repeating-linear-gradient/); +``` + +You should give the second `repeating-linear-gradient` a direction of `90deg`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".fb5")?.getPropVal('background', true), /repeating-linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)5%,transparent5%,transparent10%\),repeating-linear-gradient\(90deg/); +``` + +You should give the second `repeating-linear-gradient` a first color of `--building-color2` from `0%` to `12%`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".fb5")?.getPropVal('background', true), /repeating-linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)5%,transparent5%,transparent10%\),repeating-linear-gradient\(90deg,var\(--building-color2\)(0%)?,var\(--building-color2\)12%/); +``` + +You should give the second `repeating-linear-gradient` a second color of `--window-color2` from `12%` to `44%`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".fb5")?.getPropVal('background', true), /repeating-linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)5%,transparent5%,transparent10%\),repeating-linear-gradient\(90deg,var\(--building-color2\)(0%)?,var\(--building-color2\)12%,var\(--window-color2\)12%,var\(--window-color2\)44%\)/); ``` # --seed-- @@ -31,279 +44,7 @@ assert( freeCodeCamp Skyline Project - + @@ -383,368 +124,278 @@ assert( ``` -# --solutions-- +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - +.fb4-window { + width: 30%; + height: 10%; + border-radius: 50%; + background-color: var(--window-color1); + margin: 10%; +} +--fcc-editable-region-- +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 5%, + transparent 5%, + transparent 10% + ) +} +--fcc-editable-region-- +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + ``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-106.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-106.md index fd5b4e0036..6ef0f7152f 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-106.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-106.md @@ -11,11 +11,10 @@ You don't need the `background-color` for this building anymore so you can remov # --hints-- -test-text +You should remove the `background-color` of `.fb5`. ```js -const fb5 = code.match(/\.fb5\s*{[\s\S]+?[^}]}/g)[0]; -assert(!/background-color/g.test(fb5)); +assert.notMatch(code, /\.fb5\s*\{\s*[^}]*?background-color[^}]*?\}/); ``` # --seed-- @@ -27,286 +26,7 @@ assert(!/background-color/g.test(fb5)); freeCodeCamp Skyline Project - + @@ -386,367 +106,285 @@ assert(!/background-color/g.test(fb5)); ``` -# --solutions-- +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} -```html - - - - freeCodeCamp Skyline Project - - - - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - +.fb4-window { + width: 30%; + height: 10%; + border-radius: 50%; + background-color: var(--window-color1); + margin: 10%; +} +--fcc-editable-region-- +.fb5 { + width: 10%; + height: 33%; + background-color: var(--building-color2); + position: relative; + right: 10%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 5%, + transparent 5%, + transparent 10% + ), + repeating-linear-gradient( + 90deg, + var(--building-color2), + var(--building-color2) 12%, + var(--window-color2) 12%, + var(--window-color2) 44% + ); +} +--fcc-editable-region-- +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} + ``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-107.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-107.md index 6c276414d7..cdb0673a5b 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-107.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-107.md @@ -11,15 +11,28 @@ Finally! You made it to the last building! Add a repeating gradient to it with a # --hints-- -test-text +You should add a `repeating-linear-gradient` to `.fb6` in the `background` property. ```js -const fb6 = code.match(/\.fb6\s*{[\s\S]+?[^}]}/g)[0]; -assert( - /background\s*:\s*repeating-linear-gradient\(\s*90deg\s*,\s*var\(\s*--building-color3\s*\)\s*(0%\s*,|,)\s*var\(\s*--building-color3\s*\)\s*10%\s*,\s*transparent\s*10%\s*,\s*transparent\s*30%\s*\)\s*(;|})/g.test( - fb6 - ) -); +assert.include(new __helpers.CSSHelp(document).getStyle(".fb6")?.background, "repeating-linear-gradient"); +``` + +You should give the `repeating-linear-gradient` a direction of `90deg`. + +```js +assert.include(new __helpers.CSSHelp(document).getStyle(".fb6")?.getPropVal('background', true), "repeating-linear-gradient(90deg"); +``` + +You should give the `repeating-linear-gradient` a first color of `--building-color3` from `0%` to `10%`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".fb6")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color3\)(0%)?,var\(--building-color3\)10%/); +``` + +You should give the `repeating-linear-gradient` a second color of `transparent` from `10%` to `30%`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".fb6")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color3\)(0%)?,var\(--building-color3\)10%,transparent10%,transparent30%\)/); ``` # --seed-- @@ -31,285 +44,7 @@ assert( freeCodeCamp Skyline Project - + @@ -389,374 +124,285 @@ assert( ``` -# --solutions-- +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} -```html - - - - freeCodeCamp Skyline Project - - +.fb5 { + width: 10%; + height: 33%; + position: relative; + right: 10%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 5%, + transparent 5%, + transparent 10% + ), + repeating-linear-gradient( + 90deg, + var(--building-color2), + var(--building-color2) 12%, + var(--window-color2) 12%, + var(--window-color2) 44% + ); +} +--fcc-editable-region-- +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); +} +--fcc-editable-region-- - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - ``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-108.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-108.md index e9bb0deec3..05bb4f8999 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-108.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-108.md @@ -11,15 +11,22 @@ Add another repeating gradient to this building; make it the same as the one you # --hints-- -test-text +You should give `.fb6` a second `repeating-linear-gradient` in the `background` property. ```js -const fb6 = code.match(/\.fb6\s*{[\s\S]+?[^}]}/g)[0]; -assert( - /background\s*:\s*repeating-linear-gradient\(\s*90deg\s*,\s*var\(\s*--building-color3\s*\)\s*(0%\s*,|,)\s*var\(\s*--building-color3\s*\)\s*10%\s*,\s*transparent\s*10%\s*,\s*transparent\s*30%\s*\)\s*,\s*repeating-linear-gradient\(\s*var\(\s*--building-color3\s*\)\s*(0%\s*,|,)\s*var\(\s*--building-color3\s*\)\s*10%\s*,\s*var\(\s*--window-color3\s*\)\s*10%\s*,\s*var\(\s*--window-color3\s*\)\s*30%\s*\)\s*(;|})/g.test( - fb6 - ) -); +assert.match(new __helpers.CSSHelp(document).getStyle(".fb6")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color3\)(0%)?,var\(--building-color3\)10%,transparent10%,transparent30%\),repeating-linear-gradient/); +``` + +You should give the second `repeating-linear-gradient` a first color of `--building-color3` from `0%` to `10%`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".fb6")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color3\)(0%)?,var\(--building-color3\)10%,transparent10%,transparent30%\),repeating-linear-gradient\(var\(--building-color3\)(0%)?,var\(--building-color3\)10%/); +``` + +You should give the second `repeating-linear-gradient` a second color of `--window-color3` from `10%` to `30%`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".fb6")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color3\)(0%)?,var\(--building-color3\)10%,transparent10%,transparent30%\),repeating-linear-gradient\(var\(--building-color3\)(0%)?,var\(--building-color3\)10%,var\(--window-color3\)10%,var\(--window-color3\)30%\)/); ``` # --seed-- @@ -31,292 +38,7 @@ assert( freeCodeCamp Skyline Project - + @@ -396,380 +118,291 @@ assert( ``` -# --solutions-- +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} -```html - - - - freeCodeCamp Skyline Project - - +.fb5 { + width: 10%; + height: 33%; + position: relative; + right: 10%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 5%, + transparent 5%, + transparent 10% + ), + repeating-linear-gradient( + 90deg, + var(--building-color2), + var(--building-color2) 12%, + var(--window-color2) 12%, + var(--window-color2) 44% + ); +} +--fcc-editable-region-- +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3) 10%, + transparent 10%, + transparent 30% + ) +} +--fcc-editable-region-- - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - ``` diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-109.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-109.md index f787d7af1b..db2ce83057 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-109.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-109.md @@ -11,11 +11,10 @@ You can remove the `background-color` for this building now, since it isn't need # --hints-- -test-text +You should remove the `background-color` of `.fb6`. ```js -const fb6 = code.match(/\.fb6\s*{[\s\S]+?[^}]}/g)[0]; -assert(!/background-color/g.test(fb6)); +assert.notMatch(code, /\.fb6\s*\{\s*[^}]*?background-color[^}]*?\}/); ``` # --seed-- @@ -27,298 +26,7 @@ assert(!/background-color/g.test(fb6)); freeCodeCamp Skyline Project - + @@ -398,379 +106,298 @@ assert(!/background-color/g.test(fb6)); ``` -# --solutions-- +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} -```html - - - - freeCodeCamp Skyline Project - - +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+.fb4 { + width: 8%; + height: 45%; + position: relative; + left: 10%; +} + +.fb4a { + border-top: 5vh solid transparent; + border-left: 8vw solid var(--building-color1); +} + +.fb4b { + width: 100%; + height: 89%; + background-color: var(--building-color1); + display: flex; + flex-wrap: wrap; +} + +.fb4-window { + width: 30%; + height: 10%; + border-radius: 50%; + background-color: var(--window-color1); + margin: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + position: relative; + right: 10%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 5%, + transparent 5%, + transparent 10% + ), + repeating-linear-gradient( + 90deg, + var(--building-color2), + var(--building-color2) 12%, + var(--window-color2) 12%, + var(--window-color2) 44% + ); +} +--fcc-editable-region-- +.fb6 { + width: 9%; + height: 38%; + background-color: var(--building-color3); + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3) 10%, + transparent 10%, + transparent 30% + ), + repeating-linear-gradient( + var(--building-color3), + var(--building-color3) 10%, + var(--window-color3) 10%, + var(--window-color3) 30% + ); +} +--fcc-editable-region-- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - ``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-110.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-110.md index 46e6509491..7a8418e151 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-110.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-110.md @@ -7,15 +7,14 @@ dashedName: part-110 # --description-- -Okay, the buildings are done. Go back to the `*` selector and remove the border you applied to everything at the beginning and the buildings will come together. +Okay, the buildings are done. Go back to the `*` selector and remove the `border` you applied to everything at the beginning and the buildings will come together. # --hints-- -test-text +You should remove the `border` from the `*` selector. ```js -const all = code.match(/\*\s*{[\s\S]+?[^}]}/g)[0]; -assert(!/border\s*:\s*1px\s+solid\s+black/g.test(all)); +assert.isEmpty(new __helpers.CSSHelp(document).getStyle("*")?.border); ``` # --seed-- @@ -27,297 +26,7 @@ assert(!/border\s*:\s*1px\s+solid\s+black/g.test(all)); freeCodeCamp Skyline Project - + @@ -397,378 +106,296 @@ assert(!/border\s*:\s*1px\s+solid\s+black/g.test(all)); ``` -# --solutions-- +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} +--fcc-editable-region-- +* { + border: 1px solid black; + box-sizing: border-box; +} +--fcc-editable-region-- +body { + height: 100vh; + margin: 0; + overflow: hidden; +} -```html - - - - freeCodeCamp Skyline Project - - +.fb5 { + width: 10%; + height: 33%; + position: relative; + right: 10%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 5%, + transparent 5%, + transparent 10% + ), + repeating-linear-gradient( + 90deg, + var(--building-color2), + var(--building-color2) 12%, + var(--window-color2) 12%, + var(--window-color2) 44% + ); +} - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - +.fb6 { + width: 9%; + height: 38%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3) 10%, + transparent 10%, + transparent 30% + ), + repeating-linear-gradient( + var(--building-color3), + var(--building-color3) 10%, + var(--window-color3) 10%, + var(--window-color3) 30% + ); +} + ``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-111.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-111.md index ac8960a7e9..7c289d6e2c 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-111.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-111.md @@ -7,14 +7,14 @@ dashedName: part-111 # --description-- -Add `sky` as a second class to the `background-buildings` element. You are going to make a background for the skyline. +Add `sky` as a second class to the `.background-buildings` element. You are going to make a background for the skyline. # --hints-- -test-text +You should add a class of `sky` to `.background-buildings`. ```js -assert($('.background-buildings.sky').length === 1); +assert.exists(document.querySelector("div.background-buildings.sky")); ``` # --seed-- @@ -26,299 +26,11 @@ assert($('.background-buildings.sky').length === 1); freeCodeCamp Skyline Project - + +--fcc-editable-region--
@@ -347,6 +59,7 @@ assert($('.background-buildings.sky').length === 1);
+--fcc-editable-region--
@@ -395,378 +108,295 @@ assert($('.background-buildings.sky').length === 1); ``` -# --solutions-- +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} -```html - - - - freeCodeCamp Skyline Project - - +.fb5 { + width: 10%; + height: 33%; + position: relative; + right: 10%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 5%, + transparent 5%, + transparent 10% + ), + repeating-linear-gradient( + 90deg, + var(--building-color2), + var(--building-color2) 12%, + var(--window-color2) 12%, + var(--window-color2) 44% + ); +} - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - +.fb6 { + width: 9%; + height: 38%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3) 10%, + transparent 10%, + transparent 30% + ), + repeating-linear-gradient( + var(--building-color3), + var(--building-color3) 10%, + var(--window-color3) 10%, + var(--window-color3) 30% + ); +} + ``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-112.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-112.md index 5391dde408..aebfa50ab6 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-112.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-112.md @@ -11,15 +11,28 @@ Give the `sky` class a `radial-gradient`. Use `#ffcf33` from `0%` to `20%`, `#ff # --hints-- -test-text +You should give `.sky` a `radial-gradient` in the `background` property. ```js -const sky = code.match(/\.sky\s*{[\s\S]+?[^}]}/g)[0]; -assert( - /background\s*:\s*radial-gradient\(\s*#ffcf33\s*(0%\s*,|,)\s*#ffcf33\s*20%\s*,\s*#ffff66\s*21%\s*,\s*#bbeeff\s*100%\s*\)\s*(;|})/g.test( - sky - ) -); +assert.include(new __helpers.CSSHelp(document).getStyle(".sky")?.background, "radial-gradient"); +``` + +You should give the `radial-gradient` a first color of `#ffcf33`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".sky")?.background, /radial-gradient\(rgb\(255, 207, 51\)( 0%)?, rgb\(255, 207, 51\) 20%/); +``` + +You should give the `radial-gradient` a second color of `#ffff66` at `21%`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".sky")?.background, /radial-gradient\(rgb\(255, 207, 51\)( 0%)?, rgb\(255, 207, 51\) 20%, rgb\(255, 255, 102\) 21%/); +``` + +You should give the `radial-gradient` a third color of `#bbeeff` at `100%`. + +```js +assert.match(new __helpers.CSSHelp(document).getStyle(".sky")?.background, /radial-gradient\(rgb\(255, 207, 51\)( 0%)?, rgb\(255, 207, 51\) 20%, rgb\(255, 255, 102\) 21%, rgb\(187, 238, 255\) 100%\)/); ``` # --seed-- @@ -31,296 +44,7 @@ assert( freeCodeCamp Skyline Project - + @@ -400,387 +124,297 @@ assert( ``` -# --solutions-- +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} -```html - - - - freeCodeCamp Skyline Project - - +.fb5 { + width: 10%; + height: 33%; + position: relative; + right: 10%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 5%, + transparent 5%, + transparent 10% + ), + repeating-linear-gradient( + 90deg, + var(--building-color2), + var(--building-color2) 12%, + var(--window-color2) 12%, + var(--window-color2) 44% + ); +} - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - +.fb6 { + width: 9%; + height: 38%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3) 10%, + transparent 10%, + transparent 30% + ), + repeating-linear-gradient( + var(--building-color3), + var(--building-color3) 10%, + var(--window-color3) 10%, + var(--window-color3) 30% + ); +} + ``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-113.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-113.md index b21bce07e1..0af4218a33 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-113.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-113.md @@ -7,19 +7,14 @@ dashedName: part-113 # --description-- -At the top of the sky gradient color list, where you would put a direction for the gradient; add `closest-corner circle at 15% 15%,`. This will move the start of the gradient to `15%` from the top and left. It will make it end at the `closest-corner` and it will maintain a `circle` shape. These are some keywords built into gradients to describe how it behaves. +At the top of the sky gradient color list, where you would put a direction for the gradient; add `circle closest-corner at 15% 15%,`. This will move the start of the gradient to `15%` from the top and left. It will make it end at the `closest-corner` and it will maintain a `circle` shape. These are some keywords built into gradients to describe how it behaves. # --hints-- -test-text +You should give the `.sky` `radial-gradient` a direction of `circle closest-corner at 15% 15%`. ```js -const sky = code.match(/\.sky\s*{[\s\S]+?[^}]}/g)[0]; -assert( - /background\s*:\s*radial-gradient\(\s*closest-corner\s+circle\s+at\s+15%\s+15%\s*,\s*#ffcf33\s*(0%\s*,|,)\s*#ffcf33\s*20%\s*,\s*#ffff66\s*21%\s*,\s*#bbeeff\s*100%\s*\)\s*(;|})/g.test( - sky - ) -); +assert.match(new __helpers.CSSHelp(document).getStyle(".sky")?.background, /radial-gradient\(circle closest-corner at 15% 15%, rgb\(255, 207, 51\)|( 0%), rgb\(255, 207, 51\) 20%, rgb\(255, 255, 102\) 21%, rgb\(187, 238, 255\) 100%\)/); ``` # --seed-- @@ -31,305 +26,7 @@ assert( freeCodeCamp Skyline Project - + @@ -409,388 +106,304 @@ assert( ``` -# --solutions-- +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} -```html - - - - freeCodeCamp Skyline Project - - +.fb5 { + width: 10%; + height: 33%; + position: relative; + right: 10%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 5%, + transparent 5%, + transparent 10% + ), + repeating-linear-gradient( + 90deg, + var(--building-color2), + var(--building-color2) 12%, + var(--window-color2) 12%, + var(--window-color2) 44% + ); +} - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - +.fb6 { + width: 9%; + height: 38%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3) 10%, + transparent 10%, + transparent 30% + ), + repeating-linear-gradient( + var(--building-color3), + var(--building-color3) 10%, + var(--window-color3) 10%, + var(--window-color3) 30% + ); +} + ``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-114.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-114.md index a9786f3779..b4a019003d 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-114.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-114.md @@ -19,10 +19,10 @@ Add an empty media query at the bottom of your stylesheet with a condition of `m # --hints-- -test-text +You should add an empty media query with `max-width: 1000px`. ```js -assert(/\@media\s*\(\s*max-width\s*:\s*1000px\s*\)\s*{\s*}/g.test(code)); +assert.equal(new __helpers.CSSHelp(document).getCSSRules("media")?.[0]?.media?.mediaText, '(max-width: 1000px)'); ``` # --seed-- @@ -34,306 +34,7 @@ assert(/\@media\s*\(\s*max-width\s*:\s*1000px\s*\)\s*{\s*}/g.test(code)); freeCodeCamp Skyline Project - + @@ -413,392 +114,308 @@ assert(/\@media\s*\(\s*max-width\s*:\s*1000px\s*\)\s*{\s*}/g.test(code)); ``` -# --solutions-- +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} -```html - - - - freeCodeCamp Skyline Project - - +.fb6 { + width: 9%; + height: 38%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3) 10%, + transparent 10%, + transparent 30% + ), + repeating-linear-gradient( + var(--building-color3), + var(--building-color3) 10%, + var(--window-color3) 10%, + var(--window-color3) 30% + ); +} +--fcc-editable-region-- - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+--fcc-editable-region-- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - ``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-115.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-115.md index eb515326a1..c9487b9c44 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-115.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-115.md @@ -9,17 +9,20 @@ dashedName: part-115 Copy and paste your whole `sky` class along with all of its properties and values into the media query. You are going to make another color scheme for the skyline that changes it from day to night. +Note: You are going to need to scroll past the editable region to copy the class. + # --hints-- -test-text +You should not delete the existing `.sky` declaration. ```js -const sky = code.match(/\.sky\s*{[\s\S]+?[^}]}/g)[1]; -assert( - /background\s*:\s*radial-gradient\(\s*closest-corner\s+circle\s+at\s+15%\s+15%\s*,\s*#ffcf33\s*(0%\s*,|,)\s*#ffcf33\s*20%\s*,\s*#ffff66\s*21%\s*,\s*#bbeeff\s*100%\s*\)\s*(;|})/g.test( - sky - ) -); +assert.match(new __helpers.CSSHelp(document).getStyle(".sky")?.getPropVal('background', true), /radial-gradient\(circleclosest-cornerat15%15%,rgb\(255,207,51\)(0%)?,rgb\(255,207,51\)20%,rgb\(255,255,102\)21%,rgb\(187,238,255\)100%\)/); +``` + +You should copy the existing `.sky` declaration into the media query. + +```js +assert.match(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x => x.selectorText===".sky")?.style?.background, /radial-gradient\(\s*circle\s+closest-corner\s+at\s+15%\s+15%\s*,\s+rgb\(\s*255\s*,\s*207\s*,\s*51\s*\)\s*(0%)?\s*,\s*rgb\(\s*255\s*,\s*207\s*,\s*51\s*\)\s+20%\s*,\s*rgb\(\s*255\s*,\s*255\s*,\s*102\s*\)\s+21%\s*,\s*rgb\(\s*187\s*,\s*238\s*,\s*255\s*\)\s+100%\s*\)/); ``` # --seed-- @@ -31,310 +34,7 @@ assert( freeCodeCamp Skyline Project - + @@ -414,400 +114,310 @@ assert( ``` -# --solutions-- +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} -```html - - - - freeCodeCamp Skyline Project - - +.fb6 { + width: 9%; + height: 38%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3) 10%, + transparent 10%, + transparent 30% + ), + repeating-linear-gradient( + var(--building-color3), + var(--building-color3) 10%, + var(--window-color3) 10%, + var(--window-color3) 30% + ); +} +--fcc-editable-region-- +@media (max-width: 1000px) { + +} +--fcc-editable-region-- - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - ``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-116.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-116.md index cc11333fde..45daeee048 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-116.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-116.md @@ -11,15 +11,22 @@ In the `sky` class of the media query, change the two `#ffcf33` color values to # --hints-- -test-text +You should change the first color values from `#ffcf33` to `#ccc`. ```js -const sky = code.match(/\.sky\s*{[\s\S]+?[^}]}/g)[1]; -assert( - /background\s*:\s*radial-gradient\(\s*closest-corner\s+circle\s+at\s+15%\s+15%\s*,\s*#ccc\s*(0%\s*,|,)\s*#ccc\s*20%\s*,\s*#445\s*21%\s*,\s*#223\s*100%\s*\)\s*(;|})/g.test( - sky - ) -); +assert.match(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x => x.selectorText===".sky")?.style?.background, /radial-gradient\(\s*circle\s+closest-corner\s+at\s+15%\s+15%\s*,\s+rgb\(\s*204\s*,\s*204\s*,\s*204\s*\)\s*(0%)?\s*,\s*rgb\(\s*204\s*,\s*204\s*,\s*204\s*\)\s+20%/); +``` + +You should change the second color value from `#ffff66` to `#445`. + +```js +assert.match(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x => x.selectorText===".sky")?.style?.background, /radial-gradient\(\s*circle\s+closest-corner\s+at\s+15%\s+15%\s*,\s+rgb\(\s*204\s*,\s*204\s*,\s*204\s*\)\s*(0%)?\s*,\s*rgb\(\s*204\s*,\s*204\s*,\s*204\s*\)\s+20%\s*,\s*rgb\(\s*68\s*,\s*68\s*,\s*85\s*\)\s+21%/); +``` + +You should change the third color value from `#bbeeff` to `#223`. + +```js +assert.match(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x => x.selectorText===".sky")?.style?.background, /radial-gradient\(\s*circle\s+closest-corner\s+at\s+15%\s+15%\s*,\s+rgb\(\s*204\s*,\s*204\s*,\s*204\s*\)\s*(0%)?\s*,\s*rgb\(\s*204\s*,\s*204\s*,\s*204\s*\)\s+20%\s*,\s*rgb\(\s*68\s*,\s*68\s*,\s*85\s*\)\s+21%\s*,\s*rgb\(\s*34\s*,\s*34\s*,\s*51\s*\)\s+100%\s*\)/); ``` # --seed-- @@ -31,318 +38,7 @@ assert( freeCodeCamp Skyline Project - + @@ -422,400 +118,319 @@ assert( ``` -# --solutions-- +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} -```html - - - - freeCodeCamp Skyline Project - - +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - +.fb4 { + width: 8%; + height: 45%; + position: relative; + left: 10%; +} + +.fb4a { + border-top: 5vh solid transparent; + border-left: 8vw solid var(--building-color1); +} + +.fb4b { + width: 100%; + height: 89%; + background-color: var(--building-color1); + display: flex; + flex-wrap: wrap; +} + +.fb4-window { + width: 30%; + height: 10%; + border-radius: 50%; + background-color: var(--window-color1); + margin: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + position: relative; + right: 10%; + background: repeating-linear-gradient( +var(--building-color2), +var(--building-color2) 5%, +transparent 5%, +transparent 10% + ), + repeating-linear-gradient( +90deg, +var(--building-color2), +var(--building-color2) 12%, +var(--window-color2) 12%, +var(--window-color2) 44% + ); +} + +.fb6 { + width: 9%; + height: 38%; + background: repeating-linear-gradient( +90deg, +var(--building-color3), +var(--building-color3) 10%, +transparent 10%, +transparent 30% + ), + repeating-linear-gradient( +var(--building-color3), +var(--building-color3) 10%, +var(--window-color3) 10%, +var(--window-color3) 30% + ); +} + +@media (max-width: 1000px) { +--fcc-editable-region-- + .sky { + background: radial-gradient( + closest-corner circle at 15% 15%, + #ffcf33, + #ffcf33 20%, + #ffff66 21%, + #bbeeff 100% +); + } +--fcc-editable-region-- +} + ``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-117.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-117.md index d1085e90e8..f8233bd788 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-117.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-117.md @@ -11,16 +11,33 @@ Add a `:root` selector to the top of your media query. Then redefine all four of # --hints-- -test-text +You should add a `:root` selector to the media query. ```js -const root = code.match(/:root\s*{[\s\S]+?[^}]}/g)[1]; -assert( - /--building-color1\s*:\s*#000\s*(;|})/g.test(root) && - /--building-color2\s*:\s*#000\s*(;|})/g.test(root) && - /--building-color3\s*:\s*#000\s*(;|})/g.test(root) && - /--building-color4\s*:\s*#000\s*(;|})/g.test(root) -); +``` + +You should add `--building-color1` with a value of `#000`. + +```js +assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--building-color1")?.trim(), "#000"); +``` + +You should add `--building-color2` with a value of `#000`. + +```js +assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--building-color2")?.trim(), "#000"); +``` + +You should add `--building-color3` with a value of `#000`. + +```js +assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--building-color3")?.trim(), "#000"); +``` + +You should add `--building-color4` with a value of `#000`. + +```js +assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--building-color4")?.trim(), "#000"); ``` # --seed-- @@ -32,318 +49,7 @@ assert( freeCodeCamp Skyline Project - + @@ -423,407 +129,320 @@ assert( ``` -# --solutions-- +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} -```html - - - - freeCodeCamp Skyline Project - - +@media (max-width: 1000px) { +--fcc-editable-region-- - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - +--fcc-editable-region-- + .sky { + background: radial-gradient( + closest-corner circle at 15% 15%, + #ccc, + #ccc 20%, + #445 21%, + #223 100% + ); + } +} + ``` + diff --git a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-118.md b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-118.md index 611963f5db..37acdf2d5e 100644 --- a/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-118.md +++ b/curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-118.md @@ -13,16 +13,28 @@ Variables are primarily used with colors, and that's how you used them here. But # --hints-- -test-text +You should add `--window-color1` with a value of `#777`. ```js -const root = code.match(/:root\s*{[\s\S]+?[^}]}/g)[1]; -assert( - /--window-color1\s*:\s*#777\s*(;|})/g.test(root) && - /--window-color2\s*:\s*#777\s*(;|})/g.test(root) && - /--window-color3\s*:\s*#777\s*(;|})/g.test(root) && - /--window-color4\s*:\s*#777\s*(;|})/g.test(root) -); +assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--window-color1")?.trim(), "#777"); +``` + +You should add `--window-color2` with a value of `#777`. + +```js +assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--window-color2")?.trim(), "#777"); +``` + +You should add `--window-color3` with a value of `#777`. + +```js +assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--window-color3")?.trim(), "#777"); +``` + +You should add `--window-color4` with a value of `#777`. + +```js +assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--window-color4")?.trim(), "#777"); ``` # --seed-- @@ -34,325 +46,7 @@ assert( freeCodeCamp Skyline Project - + @@ -432,6 +126,328 @@ assert( ``` +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +.sky { + background: radial-gradient( + closest-corner circle at 15% 15%, + #ffcf33, + #ffcf33 20%, + #ffff66 21%, + #bbeeff 100% + ); +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} + +.fb4 { + width: 8%; + height: 45%; + position: relative; + left: 10%; +} + +.fb4a { + border-top: 5vh solid transparent; + border-left: 8vw solid var(--building-color1); +} + +.fb4b { + width: 100%; + height: 89%; + background-color: var(--building-color1); + display: flex; + flex-wrap: wrap; +} + +.fb4-window { + width: 30%; + height: 10%; + border-radius: 50%; + background-color: var(--window-color1); + margin: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + position: relative; + right: 10%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 5%, + transparent 5%, + transparent 10% + ), + repeating-linear-gradient( + 90deg, + var(--building-color2), + var(--building-color2) 12%, + var(--window-color2) 12%, + var(--window-color2) 44% + ); +} + +.fb6 { + width: 9%; + height: 38%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3) 10%, + transparent 10%, + transparent 30% + ), + repeating-linear-gradient( + var(--building-color3), + var(--building-color3) 10%, + var(--window-color3) 10%, + var(--window-color3) 30% + ); +} + +@media (max-width: 1000px) { +--fcc-editable-region-- + :root { + --building-color1: #000; + --building-color2: #000; + --building-color3: #000; + --building-color4: #000; + } +--fcc-editable-region-- + .sky { + background: radial-gradient( + closest-corner circle at 15% 15%, + #ccc, + #ccc 20%, + #445 21%, + #223 100% + ); + } +} + +``` + # --solutions-- ```html @@ -439,329 +455,7 @@ assert( freeCodeCamp Skyline Project - + @@ -840,3 +534,327 @@ assert( ``` + +```css +:root { + --building-color1: #aa80ff; + --building-color2: #66cc99; + --building-color3: #cc6699; + --building-color4: #538cc6; + --window-color1: #bb99ff; + --window-color2: #8cd9b3; + --window-color3: #d98cb3; + --window-color4: #8cb3d9; +} + +* { + box-sizing: border-box; +} + +body { + height: 100vh; + margin: 0; + overflow: hidden; +} + +.background-buildings, .foreground-buildings { + width: 100%; + height: 100%; + display: flex; + align-items: flex-end; + justify-content: space-evenly; + position: absolute; + top: 0; +} + +.building-wrap { + display: flex; + flex-direction: column; + align-items: center; +} + +.window-wrap { + display: flex; + align-items: center; + justify-content: space-evenly; +} + +.sky { + background: radial-gradient( + closest-corner circle at 15% 15%, + #ffcf33, + #ffcf33 20%, + #ffff66 21%, + #bbeeff 100% + ); +} + +/* BACKGROUND BUILDINGS - "bb" stands for "background building" */ +.bb1 { + width: 10%; + height: 70%; +} + +.bb1a { + width: 70%; +} + +.bb1b { + width: 80%; +} + +.bb1c { + width: 90%; +} + +.bb1d { + width: 100%; + height: 70%; + background: linear-gradient( + var(--building-color1) 50%, + var(--window-color1) + ); +} + +.bb1-window { + height: 10%; + background: linear-gradient( + var(--building-color1), + var(--window-color1) + ); +} + +.bb2 { + width: 10%; + height: 50%; +} + +.bb2a { + border-bottom: 5vh solid var(--building-color2); + border-left: 5vw solid transparent; + border-right: 5vw solid transparent; +} + +.bb2b { + width: 100%; + height: 100%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 6%, + var(--window-color2) 6%, + var(--window-color2) 9% + ); +} + +.bb3 { + width: 10%; + height: 55%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3), + var(--window-color3) 15% + ); +} + +.bb4 { + width: 11%; + height: 58%; +} + +.bb4a { + width: 3%; + height: 10%; + background-color: var(--building-color4); +} + +.bb4b { + width: 80%; + height: 5%; + background-color: var(--building-color4); +} + +.bb4c { + width: 100%; + height: 85%; + background-color: var(--building-color4); +} + +.bb4-window { + width: 18%; + height: 90%; + background-color: var(--window-color4); +} + +/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */ +.fb1 { + width: 10%; + height: 60%; +} + +.fb1a { + border-bottom: 7vh solid var(--building-color4); + border-left: 2vw solid transparent; + border-right: 2vw solid transparent; +} + +.fb1b { + width: 60%; + height: 10%; + background-color: var(--building-color4); +} + +.fb1c { + width: 100%; + height: 80%; + background: repeating-linear-gradient( + 90deg, + var(--building-color4), + var(--building-color4) 10%, + transparent 10%, + transparent 15% + ), + repeating-linear-gradient( + var(--building-color4), + var(--building-color4) 10%, + var(--window-color4) 10%, + var(--window-color4) 90% + ); +} + +.fb2 { + width: 10%; + height: 40%; +} + +.fb2a { + width: 100%; + border-bottom: 10vh solid var(--building-color3); + border-left: 1vw solid transparent; + border-right: 1vw solid transparent; +} + +.fb2b { + width: 100%; + height: 75%; + background-color: var(--building-color3); +} + +.fb2-window { + width: 22%; + height: 100%; + background-color: var(--window-color3); +} + +.fb3 { + width: 10%; + height: 35%; +} + +.fb3a { + width: 80%; + height: 15%; + background-color: var(--building-color1); +} + +.fb3b { + width: 100%; + height: 35%; + background-color: var(--building-color1); +} + +.fb3-window { + width: 25%; + height: 80%; + background-color: var(--window-color1); +} + +.fb4 { + width: 8%; + height: 45%; + position: relative; + left: 10%; +} + +.fb4a { + border-top: 5vh solid transparent; + border-left: 8vw solid var(--building-color1); +} + +.fb4b { + width: 100%; + height: 89%; + background-color: var(--building-color1); + display: flex; + flex-wrap: wrap; +} + +.fb4-window { + width: 30%; + height: 10%; + border-radius: 50%; + background-color: var(--window-color1); + margin: 10%; +} + +.fb5 { + width: 10%; + height: 33%; + position: relative; + right: 10%; + background: repeating-linear-gradient( + var(--building-color2), + var(--building-color2) 5%, + transparent 5%, + transparent 10% + ), + repeating-linear-gradient( + 90deg, + var(--building-color2), + var(--building-color2) 12%, + var(--window-color2) 12%, + var(--window-color2) 44% + ); +} + +.fb6 { + width: 9%; + height: 38%; + background: repeating-linear-gradient( + 90deg, + var(--building-color3), + var(--building-color3) 10%, + transparent 10%, + transparent 30% + ), + repeating-linear-gradient( + var(--building-color3), + var(--building-color3) 10%, + var(--window-color3) 10%, + var(--window-color3) 30% + ); +} + +@media (max-width: 1000px) { + :root { + --building-color1: #000; + --building-color2: #000; + --building-color3: #000; + --building-color4: #000; + --window-color1: #777; + --window-color2: #777; + --window-color3: #777; + --window-color4: #777; + } + .sky { + background: radial-gradient( + closest-corner circle at 15% 15%, + #ccc, + #ccc 20%, + #445 21%, + #223 100% + ); + } +} + +```