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

Feat: add new Markdown parser (#39800)

Browse Source 
and change all the challenges to new `md` format.
This commit is contained in:
Oliver Eyton-Williams
2020-11-27 19:02:05 +01:00
committed by GitHub
parent a07f84c8ec
commit 0bd52f8bd1
2580 changed files with 113436 additions and 111979 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-001.md
View File

@@ -4,44 +4,27 @@ title: Part 1
challengeType: 0
---
## Description
<section id='description'>
# --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.
</section>
## Instructions
<section id='instructions'>
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests:
- text: test-text
testString: assert(code.match(/<!DOCTYPE\s+html\s*>/gi));
test-text
```js
assert(code.match(/<!DOCTYPE\s+html\s*>/gi));
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<!DOCTYPE html>
```
</section>

33
curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-002.md
View File

@@ -4,42 +4,27 @@ title: Part 2
challengeType: 0
---
## Description
<section id='description'>
# --description--
Add opening and closing `html` tags below the doctype so you have a place to start putting some code.
</section>
## Instructions
<section id='instructions'>
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests:
- text: test-text
testString: assert(code.match(/<!DOCTYPE\s+html\s*>\s*<html\s*>\s*<\/html\s*>/gi));
test-text
```js
assert(code.match(/<!DOCTYPE\s+html\s*>\s*<html\s*>\s*<\/html\s*>/gi));
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<!DOCTYPE html>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<!DOCTYPE html>
@@ -47,5 +32,3 @@ tests:
</html>
```
</section>

37
curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-003.md
View File

@@ -4,31 +4,25 @@ title: Part 3
challengeType: 0
---
## Description
<section id='description'>
# --description--
Next, add opening and closing `head` and `body` tags within the html element.
</section>
## Instructions
<section id='instructions'>
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests:
- text: test-text
testString: assert(code.match(/<html\s*>\s*<head\s*>\s*<\/head\s*>\s*<body\s*>\s*<\/body\s*>\s*<\/html\s*>/gi));
test-text
```js
assert(
code.match(
/<html\s*>\s*<head\s*>\s*<\/head\s*>\s*<body\s*>\s*<\/body\s*>\s*<\/html\s*>/gi
)
);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<!DOCTYPE html>
@@ -37,12 +31,7 @@ tests:
</html>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<!DOCTYPE html>
@@ -55,5 +44,3 @@ tests:
</body>
</html>
```
</section>

37
curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-004.md
View File

@@ -4,31 +4,25 @@ title: Part 4
challengeType: 0
---
## Description
<section id='description'>
# --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.
</section>
## Instructions
<section id='instructions'>
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests:
- text: test-text
testString: assert(code.match(/<head\s*>\s*(<style\s*>\s*<\/style\s*>\s*<title\s*>freeCodeCamp Skyline Project<\/title\s*>|<title\s*>freeCodeCamp Skyline Project<\/title\s*>\s*<style\s*>\s*<\/style>)\s*<\/head\s*>/g));
test-text
```js
assert(
code.match(
/<head\s*>\s*(<style\s*>\s*<\/style\s*>\s*<title\s*>freeCodeCamp Skyline Project<\/title\s*>|<title\s*>freeCodeCamp Skyline Project<\/title\s*>\s*<style\s*>\s*<\/style>)\s*<\/head\s*>/g
)
);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<!DOCTYPE html>
@@ -42,12 +36,7 @@ tests:
</html>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<!DOCTYPE html>
@@ -61,5 +50,3 @@ tests:
</body>
</html>
```
</section>

37
curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-005.md
View File

@@ -4,31 +4,25 @@ title: Part 5
challengeType: 0
---
## Description
<section id='description'>
# --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.
</section>
## Instructions
<section id='instructions'>
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests:
- text: test-text
testString: assert(code.match(/<style\s*>\s*\*\s*{\s*border\s*:\s*1px\s+solid\s+black\s*;?\s*}\s*<\/style\s*>/g));
test-text
```js
assert(
code.match(
/<style\s*>\s*\*\s*{\s*border\s*:\s*1px\s+solid\s+black\s*;?\s*}\s*<\/style\s*>/g
)
);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<!DOCTYPE html>
@@ -43,12 +37,7 @@ tests:
</html>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<!DOCTYPE html>
@@ -66,5 +55,3 @@ tests:
</body>
</html>
```
</section>

33
curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-006.md
View File

@@ -4,31 +4,21 @@ title: Part 6
challengeType: 0
---
## Description
<section id='description'>
# --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.
</section>
## Instructions
<section id='instructions'>
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests:
- text: test-text
testString: assert($("#display-body").css("box-sizing") === "border-box");
test-text
```js
assert($('#display-body').css('box-sizing') === 'border-box');
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<!DOCTYPE html>
@@ -47,12 +37,7 @@ tests:
</html>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<!DOCTYPE html>
@@ -71,5 +56,3 @@ tests:
</body>
</html>
```
</section>

38
curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-007.md
View File

@@ -4,31 +4,26 @@ title: Part 7
challengeType: 0
---
## Description
<section id='description'>
# --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.
</section>
## Instructions
<section id='instructions'>
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests:
- text: test-text
testString: 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));
test-text
```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)
);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<!DOCTYPE html>
@@ -48,12 +43,7 @@ tests:
</html>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<!DOCTYPE html>
@@ -78,5 +68,3 @@ tests:
</body>
</html>
```
</section>

33
curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-008.md
View File

@@ -4,31 +4,21 @@ title: Part 8
challengeType: 0
---
## Description
<section id='description'>
# --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.
</section>
## Instructions
<section id='instructions'>
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests:
- text: test-text
testString: assert($("#display-body")[0].contains($("div.background-buildings")[0]));
test-text
```js
assert($('#display-body')[0].contains($('div.background-buildings')[0]));
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<!DOCTYPE html>
@@ -54,12 +44,7 @@ tests:
</html>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<!DOCTYPE html>
@@ -85,5 +70,3 @@ tests:
</body>
</html>
```
</section>

36
curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-009.md
View File

@@ -4,31 +4,24 @@ title: Part 9
challengeType: 0
---
## Description
<section id='description'>
# --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.
</section>
## Instructions
<section id='instructions'>
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests:
- text: test-text
testString: 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))
test-text
```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)
);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<!DOCTYPE html>
@@ -55,12 +48,7 @@ tests:
</html>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<!DOCTYPE html>
@@ -91,5 +79,3 @@ tests:
</body>
</html>
```
</section>

38
curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-010.md
View File

@@ -4,31 +4,26 @@ title: Part 10
challengeType: 0
---
## Description
<section id='description'>
# --description--
Nest a `div` with a class of `bb1` in the background buildings container. Give it a `width` of `10%` and `height` of `70%`. "bb" stands for "background building", this will be your first building.
</section>
## Instructions
<section id='instructions'>
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests:
- text: test-text
testString: 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));
test-text
```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)
);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<!DOCTYPE html>
@@ -60,12 +55,7 @@ tests:
</html>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<!DOCTYPE html>
@@ -103,5 +93,3 @@ tests:
</body>
</html>
```
</section>

39
curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-011.md
View File

@@ -4,31 +4,27 @@ title: Part 11
challengeType: 0
---
## Description
<section id='description'>
# --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.
</section>
## Instructions
<section id='instructions'>
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests:
- text: test-text
testString: 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]));
test-text
```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])
);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<!DOCTYPE html>
@@ -67,12 +63,7 @@ tests:
</html>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<!DOCTYPE html>
@@ -115,5 +106,3 @@ tests:
</body>
</html>
```
</section>

46
curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-012.md
View File

@@ -4,31 +4,34 @@ title: Part 12
challengeType: 0
---
## Description
<section id='description'>
# --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.
</section>
## Instructions
<section id='instructions'>
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests:
- text: test-text
testString: 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));
test-text
```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)
);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<!DOCTYPE html>
@@ -72,12 +75,7 @@ tests:
</html>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<!DOCTYPE html>
@@ -140,5 +138,3 @@ tests:
</body>
</html>
```
</section>

38
curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-013.md
View File

@@ -4,31 +4,26 @@ title: Part 13
challengeType: 0
---
## Description
<section id='description'>
# --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.
</section>
## Instructions
<section id='instructions'>
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests:
- text: test-text
testString: const bb1 = $(".bb1"); assert(bb1.css("display") === "flex" && bb1.css("flex-direction") === "column" && bb1.css("align-items") === "center");
test-text
```js
const bb1 = $('.bb1');
assert(
bb1.css('display') === 'flex' &&
bb1.css('flex-direction') === 'column' &&
bb1.css('align-items') === 'center'
);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<!DOCTYPE html>
@@ -92,12 +87,7 @@ tests:
</html>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<!DOCTYPE html>
@@ -163,5 +153,3 @@ tests:
</body>
</html>
```
</section>

34
curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-014.md
View File

@@ -4,31 +4,22 @@ title: Part 14
challengeType: 0
---
## Description
<section id='description'>
# --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`.
</section>
## Instructions
<section id='instructions'>
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests:
- text: test-text
testString: const bb1style = code.match(/\.bb1\s*{[\s\S]+?[^}]}/g)[0]; assert(/--building-color1\s*:\s*#999\s*(;|\s*})/g.test(bb1style));
test-text
```js
const bb1style = code.match(/\.bb1\s*{[\s\S]+?[^}]}/g)[0];
assert(/--building-color1\s*:\s*#999\s*(;|\s*})/g.test(bb1style));
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<!DOCTYPE html>
@@ -95,12 +86,7 @@ tests:
</html>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<!DOCTYPE html>
@@ -167,5 +153,3 @@ tests:
</body>
</html>
```
</section>

38
curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-015.md
View File

@@ -4,31 +4,26 @@ title: Part 15
challengeType: 0
---
## Description
<section id='description'>
# --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.
</section>
## Instructions
<section id='instructions'>
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests:
- text: test-text
testString: 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));
test-text
```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
)
);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<!DOCTYPE html>
@@ -96,12 +91,7 @@ tests:
</html>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<!DOCTYPE html>
@@ -169,5 +159,3 @@ tests:
</body>
</html>
```
</section>

46
curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-016.md
View File

@@ -4,31 +4,34 @@ title: Part 16
challengeType: 0
---
## Description
<section id='description'>
# --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.
</section>
## Instructions
<section id='instructions'>
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests:
- text: test-text
testString: 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));
test-text
```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
)
);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<!DOCTYPE html>
@@ -97,12 +100,7 @@ tests:
</html>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<!DOCTYPE html>
@@ -173,5 +171,3 @@ tests:
</body>
</html>
```
</section>

34
curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-017.md
View File

@@ -4,31 +4,22 @@ title: Part 17
challengeType: 0
---
## Description
<section id='description'>
# --description--
I don't really like that color. Change the value of your variable from `#999` to `#aa80ff` and you can see how it gets applied everywhere you used the variable. This is the main advantage of using variables, being able to quickly change many values in your stylesheet by just changing the value of a variable.
</section>
## Instructions
<section id='instructions'>
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests:
- text: test-text
testString: const bb1style = code.match(/\.bb1\s*{[\s\S]+?[^}]}/g)[0]; assert(/--building-color1\s*:\s*#aa80ff\s*(;|\s*})/g.test(bb1style));
test-text
```js
const bb1style = code.match(/\.bb1\s*{[\s\S]+?[^}]}/g)[0];
assert(/--building-color1\s*:\s*#aa80ff\s*(;|\s*})/g.test(bb1style));
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<!DOCTYPE html>
@@ -100,12 +91,7 @@ tests:
</html>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<!DOCTYPE html>
@@ -176,5 +162,3 @@ tests:
</body>
</html>
```
</section>

38
curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-018.md
View File

@@ -4,31 +4,26 @@ title: Part 18
challengeType: 0
---
## Description
<section id='description'>
# --description--
Your first building looks pretty good now. Let's make some more! Nest three new `div` elements in the `background-buildings` container and give them the classes of `bb2`, `bb3`, and `bb4` in that order. These will be three more buildings for the background.
</section>
## Instructions
<section id='instructions'>
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests:
- text: test-text
testString: const bb = $(".background-buildings"); assert(bb.children(".bb2").length === 1 && bb.children(".bb3").length === 1 && bb.children(".bb4").length === 1);
test-text
```js
const bb = $('.background-buildings');
assert(
bb.children('.bb2').length === 1 &&
bb.children('.bb3').length === 1 &&
bb.children('.bb4').length === 1
);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<!DOCTYPE html>
@@ -100,12 +95,7 @@ tests:
</html>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<!DOCTYPE html>
@@ -179,5 +169,3 @@ tests:
</body>
</html>
```
</section>

43
curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-019.md
View File

@@ -4,31 +4,31 @@ title: Part 19
challengeType: 0
---
## Description
<section id='description'>
# --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.
</section>
## Instructions
<section id='instructions'>
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests:
- text: test-text
testString: 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));
test-text
```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)
);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<!DOCTYPE html>
@@ -103,12 +103,7 @@ tests:
</html>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<!DOCTYPE html>
@@ -197,5 +192,3 @@ tests:
</body>
</html>
```
</section>

38
curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-020.md
View File

@@ -4,31 +4,26 @@ title: Part 20
challengeType: 0
---
## Description
<section id='description'>
# --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.
</section>
## Instructions
<section id='instructions'>
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests:
- text: test-text
testString: const bb = $(".background-buildings"); assert(bb.css("display") === "flex" && bb.css("align-items") === "flex-end" && bb.css("justify-content") === "space-evenly");
test-text
```js
const bb = $('.background-buildings');
assert(
bb.css('display') === 'flex' &&
bb.css('align-items') === 'flex-end' &&
bb.css('justify-content') === 'space-evenly'
);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<!DOCTYPE html>
@@ -118,12 +113,7 @@ tests:
</html>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<!DOCTYPE html>
@@ -215,5 +205,3 @@ tests:
</body>
</html>
```
</section>

40
curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-021.md
View File

@@ -4,31 +4,28 @@ title: Part 21
challengeType: 0
---
## Description
<section id='description'>
# --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.
</section>
## Instructions
<section id='instructions'>
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests:
- text: test-text
testString: 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]);
test-text
```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]
);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<!DOCTYPE html>
@@ -121,12 +118,7 @@ tests:
</html>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<!DOCTYPE html>
@@ -223,5 +215,3 @@ tests:
</body>
</html>
```
</section>

40
curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-022.md
View File

@@ -4,31 +4,28 @@ title: Part 22
challengeType: 0
---
## Description
<section id='description'>
# --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`.
</section>
## Instructions
<section id='instructions'>
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests:
- text: test-text
testString: 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));
test-text
```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
)
);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<!DOCTYPE html>
@@ -126,12 +123,7 @@ tests:
</html>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<!DOCTYPE html>
@@ -230,5 +222,3 @@ tests:
</body>
</html>
```
</section>

38
curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-023.md
View File

@@ -4,31 +4,26 @@ title: Part 23
challengeType: 0
---
## Description
<section id='description'>
# --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`.
</section>
## Instructions
<section id='instructions'>
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests:
- text: test-text
testString: 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));
test-text
```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
)
);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<!DOCTYPE html>
@@ -128,12 +123,7 @@ tests:
</html>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<!DOCTYPE html>
@@ -232,5 +222,3 @@ tests:
</body>
</html>
```
</section>

40
curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-024.md
View File

@@ -4,31 +4,28 @@ title: Part 24
challengeType: 0
---
## Description
<section id='description'>
# --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`.
</section>
## Instructions
<section id='instructions'>
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests:
- text: test-text
testString: 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));
test-text
```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
)
);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<!DOCTYPE html>
@@ -128,12 +125,7 @@ tests:
</html>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<!DOCTYPE html>
@@ -234,5 +226,3 @@ tests:
</body>
</html>
```
</section>

42
curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-025.md
View File

@@ -4,31 +4,30 @@ title: Part 25
challengeType: 0
---
## Description
<section id='description'>
# --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.
</section>
## Instructions
<section id='instructions'>
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests:
- text: test-text
testString: 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));
test-text
```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)
);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<!DOCTYPE html>
@@ -130,12 +129,7 @@ tests:
</html>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<!DOCTYPE html>
@@ -239,5 +233,3 @@ tests:
</body>
</html>
```
</section>

43
curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-026.md
View File

@@ -4,30 +4,30 @@ title: Part 26
challengeType: 0
---
## Description
<section id='description'>
# --description--
Now that you've worked the bugs out and the buildings are the right colors, you can remove the fallback values in the two places they were used. Go ahead and do that now.
</section>
## Instructions
<section id='instructions'>
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests:
- text: test-text
testString: 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));
test-text
```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
)
);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<!DOCTYPE html>
@@ -132,12 +132,7 @@ tests:
</html>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<!DOCTYPE html>
@@ -241,5 +236,3 @@ tests:
</body>
</html>
```
</section>

40
curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-027.md
View File

@@ -4,31 +4,28 @@ title: Part 27
challengeType: 0
---
## Description
<section id='description'>
# --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.
</section>
## Instructions
<section id='instructions'>
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests:
- text: test-text
testString: 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));
test-text
```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
)
);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<!DOCTYPE html>
@@ -133,12 +130,7 @@ tests:
</html>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<!DOCTYPE html>
@@ -244,5 +236,3 @@ tests:
</body>
</html>
```
</section>

36
curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-028.md
View File

@@ -4,31 +4,24 @@ title: Part 28
challengeType: 0
---
## Description
<section id='description'>
# --description--
The background buildings are starting to look pretty good. Create a new `div` below the `background-buildings` element and give it a class of `foreground-buildings`. This will be another container for more buildings.
</section>
## Instructions
<section id='instructions'>
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests:
- text: test-text
testString: const bodyDivs = $("#display-body").children("div"); assert(bodyDivs.length === 2 && bodyDivs[1] === $("div.foreground-buildings")[0]);
test-text
```js
const bodyDivs = $('#display-body').children('div');
assert(
bodyDivs.length === 2 && bodyDivs[1] === $('div.foreground-buildings')[0]
);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<!DOCTYPE html>
@@ -135,12 +128,7 @@ tests:
</html>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<!DOCTYPE html>
@@ -248,5 +236,3 @@ tests:
</body>
</html>
```
</section>

39
curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-029.md
View File

@@ -4,31 +4,27 @@ title: Part 29
challengeType: 0
---
## Description
<section id='description'>
# --description--
You want the foreground buildings container to sit directly on top of the background buildings element. Give it a `width` and `height` of `100%`, set the `position` to `absolute`, and the `top` to `0`. This will make it the same size as the body and move the start of it to the top left corner.
</section>
## Instructions
<section id='instructions'>
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests:
- text: test-text
testString: 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));
test-text
```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)
);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<!DOCTYPE html>
@@ -137,12 +133,7 @@ tests:
</html>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<!DOCTYPE html>
@@ -257,5 +248,3 @@ tests:
</body>
</html>
```
</section>

42
curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-030.md
View File

@@ -4,31 +4,30 @@ title: Part 30
challengeType: 0
---
## Description
<section id='description'>
# --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.
</section>
## Instructions
<section id='instructions'>
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests:
- text: test-text
testString: 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]);
test-text
```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]
);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<!DOCTYPE html>
@@ -144,12 +143,7 @@ tests:
</html>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<!DOCTYPE html>
@@ -271,5 +265,3 @@ tests:
</body>
</html>
```
</section>

52
curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-031.md
View File

@@ -4,31 +4,40 @@ title: Part 31
challengeType: 0
---
## Description
<section id='description'>
# --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`.
</section>
## Instructions
<section id='instructions'>
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests:
- text: test-text
testString: 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));
test-text
```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
)
);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<!DOCTYPE html>
@@ -151,12 +160,7 @@ tests:
</html>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<!DOCTYPE html>
@@ -308,5 +312,3 @@ tests:
</body>
</html>
```
</section>

38
curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-032.md
View File

@@ -4,31 +4,26 @@ title: Part 32
challengeType: 0
---
## Description
<section id='description'>
# --description--
Add the same `display`, `align-items`, and `justify-content` properties and values to `foreground-buildings` that you used on `background-buildings`. Again, this will use Flexbox to evenly space the buildings across the bottom of their container.
</section>
## Instructions
<section id='instructions'>
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests:
- text: test-text
testString: const fb = $(".foreground-buildings"); assert(fb.css("display") === "flex" && fb.css("align-items") === "flex-end" && fb.css("justify-content") === "space-evenly");
test-text
```js
const fb = $('.foreground-buildings');
assert(
fb.css('display') === 'flex' &&
fb.css('align-items') === 'flex-end' &&
fb.css('justify-content') === 'space-evenly'
);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<!DOCTYPE html>
@@ -181,12 +176,7 @@ tests:
</html>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<!DOCTYPE html>
@@ -341,5 +331,3 @@ tests:
</body>
</html>
```
</section>

39
curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-033.md
View File

@@ -4,31 +4,27 @@ title: Part 33
challengeType: 0
---
## Description
<section id='description'>
# --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`.
</section>
## Instructions
<section id='instructions'>
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests:
- text: test-text
testString: 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));
test-text
```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
)
);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<!DOCTYPE html>
@@ -184,12 +180,7 @@ tests:
</html>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<!DOCTYPE html>
@@ -344,5 +335,3 @@ tests:
</body>
</html>
```
</section>

33
curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-034.md
View File

@@ -4,31 +4,21 @@ title: Part 34
challengeType: 0
---
## Description
<section id='description'>
# --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.
</section>
## Instructions
<section id='instructions'>
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests:
- text: test-text
testString: assert(code.match(/\.foreground-buildings/g).length === 1);
test-text
```js
assert(code.match(/\.foreground-buildings/g).length === 1);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<!DOCTYPE html>
@@ -184,12 +174,7 @@ tests:
</html>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<!DOCTYPE html>
@@ -336,5 +321,3 @@ tests:
</body>
</html>
```
</section>

40
curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-035.md
View File

@@ -4,31 +4,28 @@ title: Part 35
challengeType: 0
---
## Description
<section id='description'>
# --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`.
</section>
## Instructions
<section id='instructions'>
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests:
- text: test-text
testString: 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)");
test-text
```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)'
);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<!DOCTYPE html>
@@ -176,12 +173,7 @@ tests:
</html>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<!DOCTYPE html>
@@ -334,5 +326,3 @@ tests:
</body>
</html>
```
</section>

42
curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-036.md
View File

@@ -4,31 +4,30 @@ title: Part 36
challengeType: 0
---
## Description
<section id='description'>
# --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`.
</section>
## Instructions
<section id='instructions'>
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests:
- text: test-text
testString: 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]);
test-text
```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]
);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<!DOCTYPE html>
@@ -182,12 +181,7 @@ tests:
</html>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<!DOCTYPE html>
@@ -345,5 +339,3 @@ tests:
</body>
</html>
```
</section>

40
curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-037.md
View File

@@ -4,31 +4,28 @@ title: Part 37
challengeType: 0
---
## Description
<section id='description'>
# --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.
</section>
## Instructions
<section id='instructions'>
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests:
- text: test-text
testString: 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));
test-text
```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)
);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<!DOCTYPE html>
@@ -187,12 +184,7 @@ tests:
</html>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<!DOCTYPE html>
@@ -354,5 +346,3 @@ tests:
</body>
</html>
```
</section>

40
curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-038.md
View File

@@ -4,31 +4,28 @@ title: Part 38
challengeType: 0
---
## Description
<section id='description'>
# --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 */`.
</section>
## Instructions
<section id='instructions'>
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests:
- text: test-text
testString: 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));
test-text
```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
)
);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<!DOCTYPE html>
@@ -191,12 +188,7 @@ tests:
</html>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<!DOCTYPE html>
@@ -360,5 +352,3 @@ tests:
</body>
</html>
```
</section>

34
curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-039.md
View File

@@ -4,31 +4,22 @@ title: Part 39
challengeType: 0
---
## Description
<section id='description'>
# --description--
Create a new variable in `:root` called `--window-color1` and give it a value of `black`. This will be a secondary color for the purple buildings.
</section>
## Instructions
<section id='instructions'>
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests:
- text: test-text
testString: const rootStyle = code.match(/:root\s*{[\s\S]+?[^}]}/g)[0]; assert(/--window-color1\s*:\s*black\s*(;|})/g.test(rootStyle));
test-text
```js
const rootStyle = code.match(/:root\s*{[\s\S]+?[^}]}/g)[0];
assert(/--window-color1\s*:\s*black\s*(;|})/g.test(rootStyle));
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<!DOCTYPE html>
@@ -193,12 +184,7 @@ tests:
</html>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<!DOCTYPE html>
@@ -363,5 +349,3 @@ tests:
</body>
</html>
```
</section>

38
curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-040.md
View File

@@ -4,8 +4,7 @@ title: Part 40
challengeType: 0
---
## Description
<section id='description'>
# --description--
Gradients in CSS are a way to transition between colors across the distance of an element. They are applied to the `background` property and the syntax looks like this:
@@ -17,27 +16,23 @@ 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.
</section>
## Instructions
<section id='instructions'>
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests:
- text: test-text
testString: 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));
test-text
```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
)
);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<!DOCTYPE html>
@@ -203,12 +198,7 @@ tests:
</html>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<!DOCTYPE html>
@@ -377,5 +367,3 @@ tests:
</body>
</html>
```
</section>

39
curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-041.md
View File

@@ -4,31 +4,27 @@ title: Part 41
challengeType: 0
---
## Description
<section id='description'>
# --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.
</section>
## Instructions
<section id='instructions'>
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests:
- text: test-text
testString: 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));
test-text
```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
)
);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<!DOCTYPE html>
@@ -198,12 +194,7 @@ tests:
</html>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<!DOCTYPE html>
@@ -375,5 +366,3 @@ tests:
</body>
</html>
```
</section>

37
curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-042.md
View File

@@ -4,31 +4,25 @@ title: Part 42
challengeType: 0
---
## Description
<section id='description'>
# --description--
Add the new `bb1-window` class to the `bb1a`, `bb1b`, and `bb1c` elements. This will apply the gradient to them.
</section>
## Instructions
<section id='instructions'>
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests:
- text: test-text
testString: assert($(".bb1a.bb1-window").length === 1 && $(".bb1b.bb1-window").length === 1 && $(".bb1c.bb1-window").length === 1);
test-text
```js
assert(
$('.bb1a.bb1-window').length === 1 &&
$('.bb1b.bb1-window').length === 1 &&
$('.bb1c.bb1-window').length === 1
);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<!DOCTYPE html>
@@ -201,12 +195,7 @@ tests:
</html>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<!DOCTYPE html>
@@ -378,5 +367,3 @@ tests:
</body>
</html>
```
</section>

40
curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-043.md
View File

@@ -4,31 +4,28 @@ title: Part 43
challengeType: 0
---
## Description
<section id='description'>
# --description--
You don't need the `height` or `background-color` properties in `bb1a`, `bb1b` or `bb1c` anymore, so go ahead and remove them.
</section>
## Instructions
<section id='instructions'>
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests:
- text: test-text
testString: const bb1aStyle = code.match(/\.bb1a\s*{[\s\S]+?[^}]}/g)[0]; const bb1bStyle = code.match(/\.bb1b\s*{[\s\S]+?[^}]}/g)[0]; const bb1cStyle = code.match(/\.bb1c\s*{[\s\S]+?[^}]}/g)[0]; assert(!/(height|background-color)/g.test(bb1aStyle) && !/(height|background-color)/g.test(bb1bStyle) && !/(height|background-color)/g.test(bb1cStyle));
test-text
```js
const bb1aStyle = code.match(/\.bb1a\s*{[\s\S]+?[^}]}/g)[0];
const bb1bStyle = code.match(/\.bb1b\s*{[\s\S]+?[^}]}/g)[0];
const bb1cStyle = code.match(/\.bb1c\s*{[\s\S]+?[^}]}/g)[0];
assert(
!/(height|background-color)/g.test(bb1aStyle) &&
!/(height|background-color)/g.test(bb1bStyle) &&
!/(height|background-color)/g.test(bb1cStyle)
);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<!DOCTYPE html>
@@ -201,12 +198,7 @@ tests:
</html>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<!DOCTYPE html>
@@ -373,5 +365,3 @@ tests:
</body>
</html>
```
</section>

38
curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-044.md
View File

@@ -4,8 +4,7 @@ title: Part 44
challengeType: 0
---
## Description
<section id='description'>
# --description--
Gradients can use as many colors as you want like this:
@@ -18,27 +17,23 @@ 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.
</section>
## Instructions
<section id='instructions'>
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests:
- text: test-text
testString: 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));
test-text
```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
)
);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<!DOCTYPE html>
@@ -206,12 +201,7 @@ tests:
</html>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<!DOCTYPE html>
@@ -383,5 +373,3 @@ tests:
</body>
</html>
```
</section>

34
curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-045.md
View File

@@ -4,31 +4,22 @@ title: Part 45
challengeType: 0
---
## Description
<section id='description'>
# --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`.
</section>
## Instructions
<section id='instructions'>
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests:
- text: test-text
testString: const bb1dStyle = code.match(/\.bb1d\s*{[\s\S]+?[^}]}/g)[0]; assert(!/background-color/g.test(bb1dStyle));
test-text
```js
const bb1dStyle = code.match(/\.bb1d\s*{[\s\S]+?[^}]}/g)[0];
assert(!/background-color/g.test(bb1dStyle));
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<!DOCTYPE html>
@@ -201,12 +192,7 @@ tests:
</html>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<!DOCTYPE html>
@@ -377,5 +363,3 @@ tests:
</body>
</html>
```
</section>

38
curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-046.md
View File

@@ -4,8 +4,7 @@ title: Part 46
challengeType: 0
---
## Description
<section id='description'>
# --description--
You can specify where you want a gradient transition to complete by adding it to the color like this:
@@ -18,27 +17,23 @@ 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.
</section>
## Instructions
<section id='instructions'>
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests:
- text: test-text
testString: 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));
test-text
```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
)
);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<!DOCTYPE html>
@@ -210,12 +205,7 @@ tests:
</html>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<!DOCTYPE html>
@@ -386,5 +376,3 @@ tests:
</body>
</html>
```
</section>

38
curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-047.md
View File

@@ -4,31 +4,26 @@ title: Part 47
challengeType: 0
---
## Description
<section id='description'>
# --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.
</section>
## Instructions
<section id='instructions'>
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests:
- text: test-text
testString: 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));
test-text
```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
)
);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<!DOCTYPE html>
@@ -200,12 +195,7 @@ tests:
</html>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<!DOCTYPE html>
@@ -375,5 +365,3 @@ tests:
</body>
</html>
```
</section>

36
curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-048.md
View File

@@ -4,31 +4,24 @@ title: Part 48
challengeType: 0
---
## Description
<section id='description'>
# --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.
</section>
## Instructions
<section id='instructions'>
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests:
- text: test-text
testString: const bb2 = $(".bb2").children("div"); assert(bb2.length === 2 && bb2[0] === $(".bb2a")[0] && bb2[1] === $(".bb2b")[0]);
test-text
```js
const bb2 = $('.bb2').children('div');
assert(
bb2.length === 2 && bb2[0] === $('.bb2a')[0] && bb2[1] === $('.bb2b')[0]
);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<!DOCTYPE html>
@@ -199,12 +192,7 @@ tests:
</html>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<!DOCTYPE html>
@@ -377,5 +365,3 @@ tests:
</body>
</html>
```
</section>

37
curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-049.md
View File

@@ -4,31 +4,25 @@ title: Part 49
challengeType: 0
---
## Description
<section id='description'>
# --description--
Give `bb2b` a `width` and `height` of `100%` to make it fill the building container. You will add something on the top a little later.
</section>
## Instructions
<section id='instructions'>
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests:
- text: test-text
testString: assert(/\.bb2b\s*{\s*(width\s*:\s*100%\s*;\s*height\s*:\s*100%\s*(;|})|height\s*:\s*100%\s*;\s*width\s*:\s*100%\s*(;|}))/g.test(code));
test-text
```js
assert(
/\.bb2b\s*{\s*(width\s*:\s*100%\s*;\s*height\s*:\s*100%\s*(;|})|height\s*:\s*100%\s*;\s*width\s*:\s*100%\s*(;|}))/g.test(
code
)
);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<!DOCTYPE html>
@@ -202,12 +196,7 @@ tests:
</html>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<!DOCTYPE html>
@@ -385,5 +374,3 @@ tests:
</body>
</html>
```
</section>

34
curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-050.md
View File

@@ -4,31 +4,22 @@ title: Part 50
challengeType: 0
---
## Description
<section id='description'>
# --description--
Create a new variable in `:root` named `window-color2` with a value of `#8cd9b3`. This will be used as the secondary color for this building.
</section>
## Instructions
<section id='instructions'>
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests:
- text: test-text
testString: const rootStyle = code.match(/:root\s*{[\s\S]+?[^}]}/g)[0]; assert(/--window-color2\s*:\s*#8cd9b3\s*(;|})/g.test(rootStyle));
test-text
```js
const rootStyle = code.match(/:root\s*{[\s\S]+?[^}]}/g)[0];
assert(/--window-color2\s*:\s*#8cd9b3\s*(;|})/g.test(rootStyle));
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<!DOCTYPE html>
@@ -207,12 +198,7 @@ tests:
</html>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<!DOCTYPE html>
@@ -391,5 +377,3 @@ tests:
</body>
</html>
```
</section>

39
curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-051.md
View File

@@ -4,8 +4,8 @@ title: Part 51
challengeType: 0
---
## Description
<section id='description'>
# --description--
You can make an instant color change in a gradient by giving the transition zero space like this:
```css
@@ -18,27 +18,23 @@ 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%`.
</section>
## Instructions
<section id='instructions'>
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests:
- text: test-text
testString: 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));
test-text
```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
)
);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<!DOCTYPE html>
@@ -218,12 +214,7 @@ tests:
</html>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<!DOCTYPE html>
@@ -408,5 +399,3 @@ tests:
</body>
</html>
```
</section>

38
curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-052.md
View File

@@ -4,31 +4,26 @@ title: Part 52
challengeType: 0
---
## Description
<section id='description'>
# --description--
You can see the hard color change at the top of the section. Change the gradient type from `linear-gradient` to `repeating-linear-gradient` for this section. This will make the four colors of your gradient repeat until it gets to the bottom of the element; giving you some stripes, and saving you from having to add a bunch of elements to create them.
</section>
## Instructions
<section id='instructions'>
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests:
- text: test-text
testString: 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));
test-text
```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
)
);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<!DOCTYPE html>
@@ -214,12 +209,7 @@ tests:
</html>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<!DOCTYPE html>
@@ -404,5 +394,3 @@ tests:
</body>
</html>
```
</section>

34
curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-053.md
View File

@@ -4,31 +4,22 @@ title: Part 53
challengeType: 0
---
## Description
<section id='description'>
# --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.
</section>
## Instructions
<section id='instructions'>
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests:
- text: test-text
testString: const bb2 = code.match(/\.bb2\s*{[\s\S]+?[^}]}/g)[0]; assert(!/background-color/g.test(bb2));
test-text
```js
const bb2 = code.match(/\.bb2\s*{[\s\S]+?[^}]}/g)[0];
assert(!/background-color/g.test(bb2));
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<!DOCTYPE html>
@@ -214,12 +205,7 @@ tests:
</html>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<!DOCTYPE html>
@@ -403,5 +389,3 @@ tests:
</body>
</html>
```
</section>

42
curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-054.md
View File

@@ -4,8 +4,7 @@ title: Part 54
challengeType: 0
---
## Description
<section id='description'>
# --description--
Add these properties to `bb2a`:
@@ -20,27 +19,27 @@ Add these properties to `bb2a`:
```
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.
</section>
## Instructions
<section id='instructions'>
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests:
- text: test-text
testString: 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));
test-text
```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)
);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<!DOCTYPE html>
@@ -225,12 +224,7 @@ tests:
</html>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<!DOCTYPE html>
@@ -424,5 +418,3 @@ tests:
</body>
</html>
```
</section>

39
curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-055.md
View File

@@ -4,31 +4,27 @@ title: Part 55
challengeType: 0
---
## Description
<section id='description'>
# --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.
</section>
## Instructions
<section id='instructions'>
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests:
- text: test-text
testString: 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));
test-text
```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)
);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<!DOCTYPE html>
@@ -223,12 +219,7 @@ tests:
</html>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<!DOCTYPE html>
@@ -420,5 +411,3 @@ tests:
</body>
</html>
```
</section>

37
curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-056.md
View File

@@ -4,31 +4,25 @@ title: Part 56
challengeType: 0
---
## Description
<section id='description'>
# --description--
Next, change the two `#999` of `bb2a` to `transparent`. This will make the left and right borders invisible.
</section>
## Instructions
<section id='instructions'>
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests:
- text: test-text
testString: 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));
test-text
```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)
);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<!DOCTYPE html>
@@ -221,12 +215,7 @@ tests:
</html>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<!DOCTYPE html>
@@ -418,5 +407,3 @@ tests:
</body>
</html>
```
</section>

34
curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-057.md
View File

@@ -4,31 +4,22 @@ title: Part 57
challengeType: 0
---
## Description
<section id='description'>
# --description--
Remove the `margin` and `border-top` properties and values from `bb2a` to turn it into a triangle for the top of the building.
</section>
## Instructions
<section id='instructions'>
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests:
- text: test-text
testString: const bb2a = code.match(/\.bb2a\s*{[\s\S]+?[^}]}/g)[0]; assert(!/margin/g.test(bb2a) && !/border-top/g.test(bb2a));
test-text
```js
const bb2a = code.match(/\.bb2a\s*{[\s\S]+?[^}]}/g)[0];
assert(!/margin/g.test(bb2a) && !/border-top/g.test(bb2a));
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<!DOCTYPE html>
@@ -221,12 +212,7 @@ tests:
</html>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<!DOCTYPE html>
@@ -416,5 +402,3 @@ tests:
</body>
</html>
```
</section>

38
curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-058.md
View File

@@ -4,31 +4,26 @@ title: Part 58
challengeType: 0
---
## Description
<section id='description'>
# --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.
</section>
## Instructions
<section id='instructions'>
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests:
- text: test-text
testString: 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));
test-text
```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
)
);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<!DOCTYPE html>
@@ -219,12 +214,7 @@ tests:
</html>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<!DOCTYPE html>
@@ -414,5 +404,3 @@ tests:
</body>
</html>
```
</section>

34
curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-059.md
View File

@@ -4,31 +4,22 @@ title: Part 59
challengeType: 0
---
## Description
<section id='description'>
# --description--
On to the next building! Create a new variable called `--window-color3` in `:root` and give it a value of `#d98cb3`. This will be the secondary color for the pink buildings.
</section>
## Instructions
<section id='instructions'>
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests:
- text: test-text
testString: const rootStyle = code.match(/:root\s*{[\s\S]+?[^}]}/g)[0]; assert(/--window-color3\s*:\s*#d98cb3\s*(;|})/g.test(rootStyle));
test-text
```js
const rootStyle = code.match(/:root\s*{[\s\S]+?[^}]}/g)[0];
assert(/--window-color3\s*:\s*#d98cb3\s*(;|})/g.test(rootStyle));
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<!DOCTYPE html>
@@ -219,12 +210,7 @@ tests:
</html>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<!DOCTYPE html>
@@ -415,5 +401,3 @@ tests:
</body>
</html>
```
</section>

39
curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-060.md
View File

@@ -4,8 +4,8 @@ title: Part 60
challengeType: 0
---
## Description
<section id='description'>
# --description--
So far, all the gradients you created have gone from top to bottom, that's the default direction. You can specify another direction by adding it before your colors like this:
```css
@@ -17,27 +17,23 @@ gradient-type(
```
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%`.
</section>
## Instructions
<section id='instructions'>
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests:
- text: test-text
testString: 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));
test-text
```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
)
);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<!DOCTYPE html>
@@ -229,12 +225,7 @@ tests:
</html>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<!DOCTYPE html>
@@ -431,5 +422,3 @@ tests:
</body>
</html>
```
</section>

34
curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-061.md
View File

@@ -4,31 +4,22 @@ title: Part 61
challengeType: 0
---
## Description
<section id='description'>
# --description--
Remove the `background-color` property and value from `bb3` since you are using the gradient as the background now.
</section>
## Instructions
<section id='instructions'>
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests:
- text: test-text
testString: const bb3 = code.match(/\.bb3\s*{[\s\S]+?[^}]}/g)[0]; assert(!/background-color/g.test(bb3));
test-text
```js
const bb3 = code.match(/\.bb3\s*{[\s\S]+?[^}]}/g)[0];
assert(!/background-color/g.test(bb3));
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<!DOCTYPE html>
@@ -226,12 +217,7 @@ tests:
</html>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<!DOCTYPE html>
@@ -427,5 +413,3 @@ tests:
</body>
</html>
```
</section>

39
curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-062.md
View File

@@ -4,31 +4,27 @@ title: Part 62
challengeType: 0
---
## Description
<section id='description'>
# --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.
</section>
## Instructions
<section id='instructions'>
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests:
- text: test-text
testString: const bb4 = $(".bb4").children("div"); assert(bb4.length === 3 && bb4[0] === $(".bb4a")[0] && bb4[1] === $(".bb4b")[0] && bb4[2] === $(".bb4c")[0]);
test-text
```js
const bb4 = $('.bb4').children('div');
assert(
bb4.length === 3 &&
bb4[0] === $('.bb4a')[0] &&
bb4[1] === $('.bb4b')[0] &&
bb4[2] === $('.bb4c')[0]
);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<!DOCTYPE html>
@@ -225,12 +221,7 @@ tests:
</html>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<!DOCTYPE html>
@@ -430,5 +421,3 @@ tests:
</body>
</html>
```
</section>

43
curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-063.md
View File

@@ -4,31 +4,31 @@ title: Part 63
challengeType: 0
---
## Description
<section id='description'>
# --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`.
</section>
## Instructions
<section id='instructions'>
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests:
- text: test-text
testString: 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));
test-text
```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)
);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<!DOCTYPE html>
@@ -229,12 +229,7 @@ tests:
</html>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<!DOCTYPE html>
@@ -449,5 +444,3 @@ tests:
</body>
</html>
```
</section>

39
curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-064.md
View File

@@ -4,31 +4,27 @@ title: Part 64
challengeType: 0
---
## Description
<section id='description'>
# --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.
</section>
## Instructions
<section id='instructions'>
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests:
- text: test-text
testString: 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)");
test-text
```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)'
);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<!DOCTYPE html>
@@ -244,12 +240,7 @@ tests:
</html>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<!DOCTYPE html>
@@ -466,5 +457,3 @@ tests:
</body>
</html>
```
</section>

33
curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-065.md
View File

@@ -4,31 +4,21 @@ title: Part 65
challengeType: 0
---
## Description
<section id='description'>
# --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.
</section>
## Instructions
<section id='instructions'>
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests:
- text: test-text
testString: assert(/\.building-wrap\s*{\s*}/g.test(code));
test-text
```js
assert(/\.building-wrap\s*{\s*}/g.test(code));
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<!DOCTYPE html>
@@ -246,12 +236,7 @@ tests:
</html>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<!DOCTYPE html>
@@ -472,5 +457,3 @@ tests:
</body>
</html>
```
</section>

38
curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-066.md
View File

@@ -4,31 +4,26 @@ title: Part 66
challengeType: 0
---
## Description
<section id='description'>
# --description--
Move the `display`, `flex-direction`, and `align-items` properties and values from `bb1` to the new `building-wrap` class.
</section>
## Instructions
<section id='instructions'>
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests:
- text: test-text
testString: 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));
test-text
```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)
);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<!DOCTYPE html>
@@ -250,12 +245,7 @@ tests:
</html>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<!DOCTYPE html>
@@ -475,5 +465,3 @@ tests:
</body>
</html>
```
</section>

35
curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-067.md
View File

@@ -4,31 +4,23 @@ title: Part 67
challengeType: 0
---
## Description
<section id='description'>
# --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.
</section>
## Instructions
<section id='instructions'>
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests:
- text: test-text
testString: assert($(".bb1.building-wrap").length === 1 && $(".bb4.building-wrap").length === 1);
test-text
```js
assert(
$('.bb1.building-wrap').length === 1 && $('.bb4.building-wrap').length === 1
);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<!DOCTYPE html>
@@ -249,12 +241,7 @@ tests:
</html>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<!DOCTYPE html>
@@ -474,5 +461,3 @@ tests:
</body>
</html>
```
</section>

34
curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-068.md
View File

@@ -4,31 +4,22 @@ title: Part 68
challengeType: 0
---
## Description
<section id='description'>
# --description--
Create a new variable called `--window-color4` in `:root` and give it a value of `#8cb3d9`. This will be the secondary color for the last background building.
</section>
## Instructions
<section id='instructions'>
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests:
- text: test-text
testString: const rootStyle = code.match(/:root\s*{[\s\S]+?[^}]}/g)[0]; assert(/--window-color4\s*:\s*#8cb3d9\s*(;|})/g.test(rootStyle));
test-text
```js
const rootStyle = code.match(/:root\s*{[\s\S]+?[^}]}/g)[0];
assert(/--window-color4\s*:\s*#8cb3d9\s*(;|})/g.test(rootStyle));
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<!DOCTYPE html>
@@ -249,12 +240,7 @@ tests:
</html>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<!DOCTYPE html>
@@ -475,5 +461,3 @@ tests:
</body>
</html>
```
</section>

33
curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-069.md
View File

@@ -4,31 +4,21 @@ title: Part 69
challengeType: 0
---
## Description
<section id='description'>
# --description--
Nest four new `div` elements within `bb4c`, give them all the class of `bb4-window`. These will be windows for this building.
</section>
## Instructions
<section id='instructions'>
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests:
- text: test-text
testString: assert($(".bb4c").children("div.bb4-window").length === 4);
test-text
```js
assert($('.bb4c').children('div.bb4-window').length === 4);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<!DOCTYPE html>
@@ -250,12 +240,7 @@ tests:
</html>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<!DOCTYPE html>
@@ -481,5 +466,3 @@ tests:
</body>
</html>
```
</section>

40
curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-070.md
View File

@@ -4,31 +4,28 @@ title: Part 70
challengeType: 0
---
## Description
<section id='description'>
# --description--
Give the `bb4-window` class a `width` of `18%`, a `height` of `90%`, and add your `--window-color4` variable as the `background-color`.
</section>
## Instructions
<section id='instructions'>
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests:
- text: test-text
testString: 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));
test-text
```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
)
);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<!DOCTYPE html>
@@ -255,12 +252,7 @@ tests:
</html>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<!DOCTYPE html>
@@ -492,5 +484,3 @@ tests:
</body>
</html>
```
</section>

39
curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-071.md
View File

@@ -4,32 +4,26 @@ title: Part 71
challengeType: 0
---
## Description
<section id='description'>
# --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.
</section>
## Instructions
<section id='instructions'>
</section>
## Tests
<section id='tests'>
```yml
tests:
- text: test-text
testString: 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));
# --hints--
test-text
```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)
);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<!DOCTYPE html>
@@ -262,12 +256,7 @@ tests:
</html>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<!DOCTYPE html>
@@ -505,5 +494,3 @@ tests:
</body>
</html>
```
</section>

33
curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-072.md
View File

@@ -4,31 +4,21 @@ title: Part 72
challengeType: 0
---
## Description
<section id='description'>
# --description--
Add the new `window-wrap` class to the `bb4c` element.
</section>
## Instructions
<section id='instructions'>
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests:
- text: test-text
testString: assert($(".bb4c.window-wrap").length === 1);
test-text
```js
assert($('.bb4c.window-wrap').length === 1);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<!DOCTYPE html>
@@ -267,12 +257,7 @@ tests:
</html>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<!DOCTYPE html>
@@ -510,5 +495,3 @@ tests:
</body>
</html>
```
</section>

39
curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-073.md
View File

@@ -4,31 +4,27 @@ title: Part 73
challengeType: 0
---
## Description
<section id='description'>
# --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.
</section>
## Instructions
<section id='instructions'>
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests:
- text: test-text
testString: const fb1 = $(".fb1").children("div"); assert(fb1.length === 3 && fb1[0] === $("div.fb1a")[0] && fb1[1] === $("div.fb1b")[0] && fb1[2] === $("div.fb1c")[0]);
test-text
```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]
);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<!DOCTYPE html>
@@ -267,12 +263,7 @@ tests:
</html>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<!DOCTYPE html>
@@ -514,5 +505,3 @@ tests:
</body>
</html>
```
</section>

40
curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-074.md
View File

@@ -4,31 +4,28 @@ title: Part 74
challengeType: 0
---
## Description
<section id='description'>
# --description--
Give `fb1b` a `width` of `60%` and `height` of `10%`, and `fb1c` a `width` of `100%` and `height` of `80%`.
</section>
## Instructions
<section id='instructions'>
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests:
- text: test-text
testString: 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));
test-text
```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)
);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<!DOCTYPE html>
@@ -271,12 +268,7 @@ tests:
</html>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<!DOCTYPE html>
@@ -528,5 +520,3 @@ tests:
</body>
</html>
```
</section>

33
curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-075.md
View File

@@ -4,31 +4,21 @@ title: Part 75
challengeType: 0
---
## Description
<section id='description'>
# --description--
Add the `building-wrap` class to the `fb1` element to center the sections.
</section>
## Instructions
<section id='instructions'>
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests:
- text: test-text
testString: assert($(".fb1.building-wrap").length === 1);
test-text
```js
assert($('.fb1.building-wrap').length === 1);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<!DOCTYPE html>
@@ -281,12 +271,7 @@ tests:
</html>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<!DOCTYPE html>
@@ -538,5 +523,3 @@ tests:
</body>
</html>
```
</section>

36
curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-076.md
View File

@@ -4,31 +4,24 @@ title: Part 76
challengeType: 0
---
## Description
<section id='description'>
# --description--
Move the `background-color` property and value from `fb1` to `fb1b`.
</section>
## Instructions
<section id='instructions'>
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests:
- text: test-text
testString: const fb1b = code.match(/\.fb1b\s*{[\s\S]+?[^}]}/g)[0]; assert(/background-color\s*:\s*var\(\s*--building-color4\s*\)\s*(;|})/g.test(fb1b));
test-text
```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)
);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<!DOCTYPE html>
@@ -281,12 +274,7 @@ tests:
</html>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<!DOCTYPE html>
@@ -538,5 +526,3 @@ tests:
</body>
</html>
```
</section>

39
curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-077.md
View File

@@ -4,32 +4,28 @@ title: Part 77
challengeType: 0
---
## Description
<section id='description'>
# --description--
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%`.
</section>
## Instructions
<section id='instructions'>
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests:
- text: test-text
testString: 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));
test-text
```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
)
);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<!DOCTYPE html>
@@ -282,12 +278,7 @@ tests:
</html>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<!DOCTYPE html>
@@ -546,5 +537,3 @@ tests:
</body>
</html>
```
</section>

38
curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-078.md
View File

@@ -4,8 +4,7 @@ title: Part 78
challengeType: 0
---
## Description
<section id='description'>
# --description--
You can add multiple gradients to an element by separating them with a comma (`,`) like this:
@@ -19,27 +18,23 @@ 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.
</section>
## Instructions
<section id='instructions'>
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests:
- text: test-text
testString: 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));
test-text
```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
)
);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<!DOCTYPE html>
@@ -299,12 +294,7 @@ tests:
</html>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<!DOCTYPE html>
@@ -569,5 +559,3 @@ tests:
</body>
</html>
```
</section>

38
curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-079.md
View File

@@ -4,31 +4,26 @@ title: Part 79
challengeType: 0
---
## Description
<section id='description'>
# --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.
</section>
## Instructions
<section id='instructions'>
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests:
- text: test-text
testString: 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));
test-text
```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
)
);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<!DOCTYPE html>
@@ -294,12 +289,7 @@ tests:
</html>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<!DOCTYPE html>
@@ -568,5 +558,3 @@ tests:
</body>
</html>
```
</section>

37
curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-080.md
View File

@@ -4,31 +4,25 @@ title: Part 80
challengeType: 0
---
## Description
<section id='description'>
# --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.
</section>
## Instructions
<section id='instructions'>
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests:
- text: test-text
testString: 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));
test-text
```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)
);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<!DOCTYPE html>
@@ -298,12 +292,7 @@ tests:
</html>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<!DOCTYPE html>
@@ -574,5 +563,3 @@ tests:
</body>
</html>
```
</section>

36
curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-081.md
View File

@@ -4,31 +4,24 @@ title: Part 81
challengeType: 0
---
## Description
<section id='description'>
# --description--
On to the next building! Nest two `div` elements within `fb2` and give them the classes of `fb2a` and `fb2b`, in that order.
</section>
## Instructions
<section id='instructions'>
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests:
- text: test-text
testString: const fb2 = $(".fb2").children("div"); assert(fb2.length === 2 && fb2[0] === $("div.fb2a")[0] && fb2[1] === $("div.fb2b")[0]);
test-text
```js
const fb2 = $('.fb2').children('div');
assert(
fb2.length === 2 && fb2[0] === $('div.fb2a')[0] && fb2[1] === $('div.fb2b')[0]
);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<!DOCTYPE html>
@@ -300,12 +293,7 @@ tests:
</html>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<!DOCTYPE html>
@@ -579,5 +567,3 @@ tests:
</body>
</html>
```
</section>

39
curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-082.md
View File

@@ -4,31 +4,27 @@ title: Part 82
challengeType: 0
---
## Description
<section id='description'>
# --description--
Give `fb2a` a `width` of `100%` and `fb2b` a `width` of `100%` and `height` of `75%`.
</section>
## Instructions
<section id='instructions'>
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests:
- text: test-text
testString: 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));
test-text
```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)
);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<!DOCTYPE html>
@@ -303,12 +299,7 @@ tests:
</html>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<!DOCTYPE html>
@@ -591,5 +582,3 @@ tests:
</body>
</html>
```
</section>

33
curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-083.md
View File

@@ -4,31 +4,21 @@ title: Part 83
challengeType: 0
---
## Description
<section id='description'>
# --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.
</section>
## Instructions
<section id='instructions'>
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests:
- text: test-text
testString: assert($(".fb2b").children("div.fb2-window").length === 3);
test-text
```js
assert($('.fb2b').children('div.fb2-window').length === 3);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<!DOCTYPE html>
@@ -312,12 +302,7 @@ tests:
</html>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<!DOCTYPE html>
@@ -604,5 +589,3 @@ tests:
</body>
</html>
```
</section>

33
curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-084.md
View File

@@ -4,31 +4,21 @@ title: Part 84
challengeType: 0
---
## Description
<section id='description'>
# --description--
Add your `window-wrap` class to `fb2b` to position the new window elements.
</section>
## Instructions
<section id='instructions'>
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests:
- text: test-text
testString: assert($(".fb2b.window-wrap").length === 1);
test-text
```js
assert($('.fb2b.window-wrap').length === 1);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<!DOCTYPE html>
@@ -316,12 +306,7 @@ tests:
</html>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<!DOCTYPE html>
@@ -608,5 +593,3 @@ tests:
</body>
</html>
```
</section>

38
curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-085.md
View File

@@ -4,31 +4,26 @@ title: Part 85
challengeType: 0
---
## Description
<section id='description'>
# --description--
Give the `fb2-window` elements a `width` of `22%`, `height` of `100%`, and a `background-color` of your `--window-color3` variable.
</section>
## Instructions
<section id='instructions'>
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests:
- text: test-text
testString: 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));
test-text
```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)
);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<!DOCTYPE html>
@@ -316,12 +311,7 @@ tests:
</html>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<!DOCTYPE html>
@@ -614,5 +604,3 @@ tests:
</body>
</html>
```
</section>

38
curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-086.md
View File

@@ -4,31 +4,26 @@ title: Part 86
challengeType: 0
---
## Description
<section id='description'>
# --description--
Move the `background-color` property and value from `fb2` to `fb2b` to just color the section and not the container.
</section>
## Instructions
<section id='instructions'>
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests:
- text: test-text
testString: 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));
test-text
```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)
);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<!DOCTYPE html>
@@ -322,12 +317,7 @@ tests:
</html>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<!DOCTYPE html>
@@ -620,5 +610,3 @@ tests:
</body>
</html>
```
</section>

40
curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-087.md
View File

@@ -4,31 +4,28 @@ title: Part 87
challengeType: 0
---
## Description
<section id='description'>
# --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.
</section>
## Instructions
<section id='instructions'>
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests:
- text: test-text
testString: 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));
test-text
```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)
);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<!DOCTYPE html>
@@ -322,12 +319,7 @@ tests:
</html>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<!DOCTYPE html>
@@ -623,5 +615,3 @@ tests:
</body>
</html>
```
</section>

41
curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-088.md
View File

@@ -4,31 +4,29 @@ title: Part 88
challengeType: 0
---
## Description
<section id='description'>
# --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.
</section>
## Instructions
<section id='instructions'>
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests:
- text: test-text
testString: 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]);
test-text
```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]
);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<!DOCTYPE html>
@@ -325,12 +323,7 @@ tests:
</html>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<!DOCTYPE html>
@@ -631,5 +624,3 @@ tests:
</body>
</html>
```
</section>

40
curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-089.md
View File

@@ -4,31 +4,28 @@ title: Part 89
challengeType: 0
---
## Description
<section id='description'>
# --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%`.
</section>
## Instructions
<section id='instructions'>
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests:
- text: test-text
testString: 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));
test-text
```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)
);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<!DOCTYPE html>
@@ -330,12 +327,7 @@ tests:
</html>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<!DOCTYPE html>
@@ -646,5 +638,3 @@ tests:
</body>
</html>
```
</section>

42
curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-090.md
View File

@@ -4,31 +4,30 @@ title: Part 90
challengeType: 0
---
## Description
<section id='description'>
# --description--
Remove the `background-color` property and value from `fb3` and add them to `fb3a` and `fb3b`.
</section>
## Instructions
<section id='instructions'>
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests:
- text: test-text
testString: 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));
test-text
```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)
);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<!DOCTYPE html>
@@ -340,12 +339,7 @@ tests:
</html>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<!DOCTYPE html>
@@ -657,5 +651,3 @@ tests:
</body>
</html>
```
</section>

33
curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-091.md
View File

@@ -4,31 +4,21 @@ title: Part 91
challengeType: 0
---
## Description
<section id='description'>
# --description--
Add your `building-wrap` class to the `fb3` element to center the sections.
</section>
## Instructions
<section id='instructions'>
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests:
- text: test-text
testString: assert($(".fb3.building-wrap").length === 1);
test-text
```js
assert($('.fb3.building-wrap').length === 1);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<!DOCTYPE html>
@@ -341,12 +331,7 @@ tests:
</html>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<!DOCTYPE html>
@@ -658,5 +643,3 @@ tests:
</body>
</html>
```
</section>

33
curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-092.md
View File

@@ -4,31 +4,21 @@ title: Part 92
challengeType: 0
---
## Description
<section id='description'>
# --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.
</section>
## Instructions
<section id='instructions'>
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests:
- text: test-text
testString: assert($(".fb3 div.fb3a:first-child").children("div.fb3-window").length === 3);
test-text
```js
assert($('.fb3 div.fb3a:first-child').children('div.fb3-window').length === 3);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<!DOCTYPE html>
@@ -341,12 +331,7 @@ tests:
</html>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<!DOCTYPE html>
@@ -662,5 +647,3 @@ tests:
</body>
</html>
```
</section>

38
curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-093.md
View File

@@ -4,31 +4,26 @@ title: Part 93
challengeType: 0
---
## Description
<section id='description'>
# --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.
</section>
## Instructions
<section id='instructions'>
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests:
- text: test-text
testString: 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));
test-text
```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)
);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<!DOCTYPE html>
@@ -345,12 +340,7 @@ tests:
</html>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<!DOCTYPE html>
@@ -672,5 +662,3 @@ tests:
</body>
</html>
```
</section>

33
curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-094.md
View File

@@ -4,31 +4,21 @@ title: Part 94
challengeType: 0
---
## Description
<section id='description'>
# --description--
Add your `window-wrap` class to the `fb3a` element to center and space the windows.
</section>
## Instructions
<section id='instructions'>
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests:
- text: test-text
testString: assert($(".fb3 div.fb3a:first-child").hasClass("window-wrap"));
test-text
```js
assert($('.fb3 div.fb3a:first-child').hasClass('window-wrap'));
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<!DOCTYPE html>
@@ -351,12 +341,7 @@ tests:
</html>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<!DOCTYPE html>
@@ -678,5 +663,3 @@ tests:
</body>
</html>
```
</section>

34
curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-095.md
View File

@@ -4,31 +4,22 @@ title: Part 95
challengeType: 0
---
## Description
<section id='description'>
# --description--
I'm not thrilled about that black for the windows anymore. Change the `--window-color1` value to `#bb99ff`.
</section>
## Instructions
<section id='instructions'>
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests:
- text: test-text
testString: const root = code.match(/:root\s*{[\s\S]+?[^}]}/g)[0]; assert(/--window-color1\s*:\s*#bb99ff\s*(;|})/g.test(root));
test-text
```js
const root = code.match(/:root\s*{[\s\S]+?[^}]}/g)[0];
assert(/--window-color1\s*:\s*#bb99ff\s*(;|})/g.test(root));
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<!DOCTYPE html>
@@ -351,12 +342,7 @@ tests:
</html>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<!DOCTYPE html>
@@ -678,5 +664,3 @@ tests:
</body>
</html>
```
</section>

36
curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-096.md
View File

@@ -4,31 +4,24 @@ title: Part 96
challengeType: 0
---
## Description
<section id='description'>
# --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.
</section>
## Instructions
<section id='instructions'>
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests:
- text: test-text
testString: const fb4 = $(".fb4").children("div"); assert(fb4.length === 2 && fb4[0] === $("div.fb4a")[0] && fb4[1] === $("div.fb4b")[0]);
test-text
```js
const fb4 = $('.fb4').children('div');
assert(
fb4.length === 2 && fb4[0] === $('div.fb4a')[0] && fb4[1] === $('div.fb4b')[0]
);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<!DOCTYPE html>
@@ -351,12 +344,7 @@ tests:
</html>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<!DOCTYPE html>
@@ -681,5 +669,3 @@ tests:
</body>
</html>
```
</section>

37
curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-097.md
View File

@@ -4,31 +4,25 @@ title: Part 97
challengeType: 0
---
## Description
<section id='description'>
# --description--
Give `fb4b` a `width` of `100%` and `height` of `89%`.
</section>
## Instructions
<section id='instructions'>
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests:
- text: test-text
testString: 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));
test-text
```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)
);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<!DOCTYPE html>
@@ -354,12 +348,7 @@ tests:
</html>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<!DOCTYPE html>
@@ -689,5 +678,3 @@ tests:
</body>
</html>
```
</section>

38
curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-098.md
View File

@@ -4,31 +4,26 @@ title: Part 98
challengeType: 0
---
## Description
<section id='description'>
# --description--
Add your `--building-color1` variable as value of the `background-color` property of `fb4b`. Then, remove the `background-color` from `fb4`.
</section>
## Instructions
<section id='instructions'>
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests:
- text: test-text
testString: 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));
test-text
```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)
);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<!DOCTYPE html>
@@ -359,12 +354,7 @@ tests:
</html>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<!DOCTYPE html>
@@ -694,5 +684,3 @@ tests:
</body>
</html>
```
</section>

33
curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-099.md
View File

@@ -4,31 +4,21 @@ title: Part 99
challengeType: 0
---
## Description
<section id='description'>
# --description--
Nest six `div` elements within `fb4b` and give them all a class of `fb4-window`.
</section>
## Instructions
<section id='instructions'>
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests:
- text: test-text
testString: assert($(".fb4b").children("div.fb4-window").length === 6);
test-text
```js
assert($('.fb4b').children('div.fb4-window').length === 6);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<!DOCTYPE html>
@@ -359,12 +349,7 @@ tests:
</html>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<!DOCTYPE html>
@@ -701,5 +686,3 @@ tests:
</body>
</html>
```
</section>

38
curriculum/challenges/english/01-responsive-web-design/css-variables-skyline/part-100.md
View File

@@ -4,31 +4,26 @@ title: Part 100
challengeType: 0
---
## Description
<section id='description'>
# --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.
</section>
## Instructions
<section id='instructions'>
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests:
- text: test-text
testString: 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));
test-text
```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)
);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<!DOCTYPE html>
@@ -366,12 +361,7 @@ tests:
</html>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<!DOCTYPE html>
@@ -714,5 +704,3 @@ tests:
</body>
</html>
```
</section>

Some files were not shown because too many files have changed in this diff Show More