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*(
-
-
+--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(
- /
+
@@ -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
-
+
-
-
+.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--
-
-
+.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(
+.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);
+}
-
-
-
-
```
+
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%;
+}
-
-
-
-
```
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--
-
-
+.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);
+}
-
-
-
-
+.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%;
+}
-
-
-
-
+.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);
+}
-
-
-
-
+.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
-
+
-
-
+.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%;
+}
-
-
-
-
+.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%;
+}
-
-
-
-
+.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%;
+}
-
-
-
-
+.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%;
+}
-
-
-
-
+.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(
-
-
+.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);
+}
-
-
-
-
+.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
-
+
-
-
+.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);
-
-
+.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);
-
-
+.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(
-
-
+.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);
-
-
+.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(
-
-
+.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);
-
-
+.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(
-
-
+.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--
-
-
+.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);
-
-
+.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'));
-
-
+.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(
-
-
+.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);
-
-
+.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
-
-
-
-
-
-
-
```
+
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--
-
-
+.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%
+ );
+}
-
-