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

fix(challenge-md): Fix quotes that failed in the transform

Browse Source
This commit is contained in:
Bouncey
2018-10-08 01:01:53 +01:00
committed by mrugesh mohapatra
parent 392b28fa55
commit a859035023
1333 changed files with 5710 additions and 5710 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -24,7 +24,7 @@ Change the <code>margin</code> of the blue box to <code>-15px</code>, so it fill
```yml
tests:
- text: Your <code>blue-box</code> class should give elements <code>-15px</code> of <code>margin</code>.
testString: 'assert($(".blue-box").css("margin-top") === "-15px", ''Your <code>blue-box</code> class should give elements <code>-15px</code> of <code>margin</code>.'');'
testString: 'assert($(".blue-box").css("margin-top") === "-15px", "Your <code>blue-box</code> class should give elements <code>-15px</code> of <code>margin</code>.");'
```
@ -53,7 +53,7 @@ tests:
background-color: yellow;
padding: 10px;
}
.red-box {
background-color: crimson;
color: #fff;

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

@ -26,15 +26,15 @@ Remember that you can apply multiple classes to an element using its <code>class
```yml
tests:
- text: Your <code>img</code> element should have the class <code>smaller-image</code>.
testString: 'assert($("img").hasClass("smaller-image"), ''Your <code>img</code> element should have the class <code>smaller-image</code>.'');'
testString: 'assert($("img").hasClass("smaller-image"), "Your <code>img</code> element should have the class <code>smaller-image</code>.");'
- text: Your <code>img</code> element should have the class <code>thick-green-border</code>.
testString: 'assert($("img").hasClass("thick-green-border"), ''Your <code>img</code> element should have the class <code>thick-green-border</code>.'');'
testString: 'assert($("img").hasClass("thick-green-border"), "Your <code>img</code> element should have the class <code>thick-green-border</code>.");'
- text: Give your image a border width of <code>10px</code>.
testString: 'assert($("img").hasClass("thick-green-border") && parseInt($("img").css("border-top-width"), 10) >= 8 && parseInt($("img").css("border-top-width"), 10) <= 12, ''Give your image a border width of <code>10px</code>.'');'
testString: 'assert($("img").hasClass("thick-green-border") && parseInt($("img").css("border-top-width"), 10) >= 8 && parseInt($("img").css("border-top-width"), 10) <= 12, "Give your image a border width of <code>10px</code>.");'
- text: Give your image a border style of <code>solid</code>.
testString: 'assert($("img").css("border-right-style") === "solid", ''Give your image a border style of <code>solid</code>.'');'
testString: 'assert($("img").css("border-right-style") === "solid", "Give your image a border style of <code>solid</code>.");'
- text: The border around your <code>img</code> element should be green.
testString: 'assert($("img").css("border-left-color") === "rgb(0, 128, 0)", ''The border around your <code>img</code> element should be green.'');'
testString: 'assert($("img").css("border-left-color") === "rgb(0, 128, 0)", "The border around your <code>img</code> element should be green.");'
```
@ -69,9 +69,9 @@ tests:
<h2 class="red-text">CatPhotoApp</h2>
<main>
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img class="smaller-image" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<div>
<p>Things cats love:</p>
<ul>
@ -86,7 +86,7 @@ tests:
<li>other cats</li>
</ol>
</div>
<form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>

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

@ -22,13 +22,13 @@ Give the blue box a <code>margin</code> of <code>40px</code> on its top and left
```yml
tests:
- text: Your <code>blue-box</code> class should give the top of elements <code>40px</code> of <code>margin</code>.
testString: 'assert($(".blue-box").css("margin-top") === "40px", ''Your <code>blue-box</code> class should give the top of elements <code>40px</code> of <code>margin</code>.'');'
testString: 'assert($(".blue-box").css("margin-top") === "40px", "Your <code>blue-box</code> class should give the top of elements <code>40px</code> of <code>margin</code>.");'
- text: Your <code>blue-box</code> class should give the right of elements <code>20px</code> of <code>margin</code>.
testString: 'assert($(".blue-box").css("margin-right") === "20px", ''Your <code>blue-box</code> class should give the right of elements <code>20px</code> of <code>margin</code>.'');'
testString: 'assert($(".blue-box").css("margin-right") === "20px", "Your <code>blue-box</code> class should give the right of elements <code>20px</code> of <code>margin</code>.");'
- text: Your <code>blue-box</code> class should give the bottom of elements <code>20px</code> of <code>margin</code>.
testString: 'assert($(".blue-box").css("margin-bottom") === "20px", ''Your <code>blue-box</code> class should give the bottom of elements <code>20px</code> of <code>margin</code>.'');'
testString: 'assert($(".blue-box").css("margin-bottom") === "20px", "Your <code>blue-box</code> class should give the bottom of elements <code>20px</code> of <code>margin</code>.");'
- text: Your <code>blue-box</code> class should give the left of elements <code>40px</code> of <code>margin</code>.
testString: 'assert($(".blue-box").css("margin-left") === "40px", ''Your <code>blue-box</code> class should give the left of elements <code>40px</code> of <code>margin</code>.'');'
testString: 'assert($(".blue-box").css("margin-left") === "40px", "Your <code>blue-box</code> class should give the left of elements <code>40px</code> of <code>margin</code>.");'
```
@ -57,7 +57,7 @@ tests:
background-color: yellow;
padding: 10px;
}
.red-box {
background-color: crimson;
color: #fff;

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

@ -23,13 +23,13 @@ Give the blue box a <code>padding</code> of <code>40px</code> on its top and lef
```yml
tests:
- text: Your <code>blue-box</code> class should give the top of the elements <code>40px</code> of <code>padding</code>.
testString: 'assert($(".blue-box").css("padding-top") === "40px", ''Your <code>blue-box</code> class should give the top of the elements <code>40px</code> of <code>padding</code>.'');'
testString: 'assert($(".blue-box").css("padding-top") === "40px", "Your <code>blue-box</code> class should give the top of the elements <code>40px</code> of <code>padding</code>.");'
- text: Your <code>blue-box</code> class should give the right of the elements <code>20px</code> of <code>padding</code>.
testString: 'assert($(".blue-box").css("padding-right") === "20px", ''Your <code>blue-box</code> class should give the right of the elements <code>20px</code> of <code>padding</code>.'');'
testString: 'assert($(".blue-box").css("padding-right") === "20px", "Your <code>blue-box</code> class should give the right of the elements <code>20px</code> of <code>padding</code>.");'
- text: Your <code>blue-box</code> class should give the bottom of the elements <code>20px</code> of <code>padding</code>.
testString: 'assert($(".blue-box").css("padding-bottom") === "20px", ''Your <code>blue-box</code> class should give the bottom of the elements <code>20px</code> of <code>padding</code>.'');'
testString: 'assert($(".blue-box").css("padding-bottom") === "20px", "Your <code>blue-box</code> class should give the bottom of the elements <code>20px</code> of <code>padding</code>.");'
- text: Your <code>blue-box</code> class should give the left of the elements <code>40px</code> of <code>padding</code>.
testString: 'assert($(".blue-box").css("padding-left") === "40px", ''Your <code>blue-box</code> class should give the left of the elements <code>40px</code> of <code>padding</code>.'');'
testString: 'assert($(".blue-box").css("padding-left") === "40px", "Your <code>blue-box</code> class should give the left of the elements <code>40px</code> of <code>padding</code>.");'
```
@ -58,7 +58,7 @@ tests:
background-color: yellow;
padding: 10px;
}
.red-box {
background-color: crimson;
color: #fff;

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

@ -23,9 +23,9 @@ Note: this challenge allows for multiple possible solutions. For example, you ma
```yml
tests:
- text: Your image element should have the class "thick-green-border".
testString: 'assert($("img").hasClass("thick-green-border"), ''Your image element should have the class "thick-green-border".'');'
testString: 'assert($("img").hasClass("thick-green-border"), "Your image element should have the class "thick-green-border".");'
- text: Your image should have a border radius of <code>10px</code>
testString: 'assert(parseInt($("img").css("border-top-left-radius")) > 8, ''Your image should have a border radius of <code>10px</code>'');'
testString: 'assert(parseInt($("img").css("border-top-left-radius")) > 8, "Your image should have a border radius of <code>10px</code>");'
```
@ -66,9 +66,9 @@ tests:
<h2 class="red-text">CatPhotoApp</h2>
<main>
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<div>
<p>Things cats love:</p>
<ul>
@ -83,7 +83,7 @@ tests:
<li>other cats</li>
</ol>
</div>
<form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>

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

@ -24,7 +24,7 @@ Change the <code>margin</code> of the blue box to match that of the red box.
```yml
tests:
- text: Your <code>blue-box</code> class should give elements <code>20px</code> of <code>margin</code>.
testString: 'assert($(".blue-box").css("margin-top") === "20px", ''Your <code>blue-box</code> class should give elements <code>20px</code> of <code>margin</code>.'');'
testString: 'assert($(".blue-box").css("margin-top") === "20px", "Your <code>blue-box</code> class should give elements <code>20px</code> of <code>margin</code>.");'
```
@ -53,7 +53,7 @@ tests:
background-color: yellow;
padding: 10px;
}
.red-box {
background-color: crimson;
color: #fff;

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

@ -27,7 +27,7 @@ Change the <code>padding</code> of your blue box to match that of your red box.
```yml
tests:
- text: Your <code>blue-box</code> class should give elements <code>20px</code> of <code>padding</code>.
testString: 'assert($(".blue-box").css("padding-top") === "20px", ''Your <code>blue-box</code> class should give elements <code>20px</code> of <code>padding</code>.'');'
testString: 'assert($(".blue-box").css("padding-top") === "20px", "Your <code>blue-box</code> class should give elements <code>20px</code> of <code>padding</code>.");'
```
@ -56,7 +56,7 @@ tests:
background-color: yellow;
padding: 10px;
}
.red-box {
background-color: crimson;
color: #fff;

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

@ -26,9 +26,9 @@ It looks there is a problem with the variables supplied to the <code>.penguin-to
```yml
tests:
- text: Apply the fallback value of <code>black</code> to the <code>background</code> property of the <code>penguin-top</code> class.
testString: 'assert(code.match(/.penguin-top\s*?{[\s\S]*background\s*?:\s*?var\(\s*?--pengiun-skin\s*?,\s*?black\s*?\)\s*?;[\s\S]*}[\s\S]*.penguin-bottom\s{/gi), ''Apply the fallback value of <code>black</code> to the <code>background</code> property of the <code>penguin-top</code> class.'');'
testString: 'assert(code.match(/.penguin-top\s*?{[\s\S]*background\s*?:\s*?var\(\s*?--pengiun-skin\s*?,\s*?black\s*?\)\s*?;[\s\S]*}[\s\S]*.penguin-bottom\s{/gi), "Apply the fallback value of <code>black</code> to the <code>background</code> property of the <code>penguin-top</code> class.");'
- text: Apply the fallback value of <code>black</code> to the <code>background</code> property of the <code>penguin-bottom</code> class.
testString: 'assert(code.match(/.penguin-bottom\s*?{[\s\S]*background\s*?:\s*?var\(\s*?--pengiun-skin\s*?,\s*?black\s*?\)\s*?;[\s\S]*}/gi), ''Apply the fallback value of <code>black</code> to the <code>background</code> property of the <code>penguin-bottom</code> class.'');'
testString: 'assert(code.match(/.penguin-bottom\s*?{[\s\S]*background\s*?:\s*?var\(\s*?--pengiun-skin\s*?,\s*?black\s*?\)\s*?;[\s\S]*}/gi), "Apply the fallback value of <code>black</code> to the <code>background</code> property of the <code>penguin-bottom</code> class.");'
```
@ -52,33 +52,33 @@ tests:
width: 300px;
height: 300px;
}
.penguin-top {
top: 10%;
left: 25%;
/* change code below */
background: var(--pengiun-skin);
/* change code above */
width: 50%;
height: 45%;
border-radius: 70% 70% 60% 60%;
}
.penguin-bottom {
top: 40%;
left: 23.5%;
/* change code below */
background: var(--pengiun-skin);
/* change code above */
width: 53%;
height: 45%;
border-radius: 70% 70% 100% 100%;
}
.right-hand {
top: 0%;
left: -5%;
@ -89,7 +89,7 @@ tests:
transform: rotate(45deg);
z-index: -1;
}
.left-hand {
top: 0%;
left: 75%;
@ -100,7 +100,7 @@ tests:
transform: rotate(-45deg);
z-index: -1;
}
.right-cheek {
top: 15%;
left: 35%;
@ -109,7 +109,7 @@ tests:
height: 70%;
border-radius: 70% 70% 60% 60%;
}
.left-cheek {
top: 15%;
left: 5%;
@ -118,7 +118,7 @@ tests:
height: 70%;
border-radius: 70% 70% 60% 60%;
}
.belly {
top: 60%;
left: 2.5%;
@ -127,7 +127,7 @@ tests:
height: 100%;
border-radius: 120% 120% 100% 100%;
}
.right-feet {
top: 85%;
left: 60%;
@ -138,7 +138,7 @@ tests:
transform: rotate(-80deg);
z-index: -2222;
}
.left-feet {
top: 85%;
left: 25%;
@ -149,7 +149,7 @@ tests:
transform: rotate(80deg);
z-index: -2222;
}
.right-eye {
top: 45%;
left: 60%;
@ -158,7 +158,7 @@ tests:
height: 17%;
border-radius: 50%;
}
.left-eye {
top: 45%;
left: 25%;
@ -167,7 +167,7 @@ tests:
height: 17%;
border-radius: 50%;
}
.sparkle {
top: 25%;
left: 15%;
@ -176,7 +176,7 @@ tests:
height: 35%;
border-radius: 50%;
}
.blush-right {
top: 65%;
left: 15%;
@ -185,7 +185,7 @@ tests:
height: 10%;
border-radius: 50%;
}
.blush-left {
top: 65%;
left: 70%;
@ -194,7 +194,7 @@ tests:
height: 10%;
border-radius: 50%;
}
.beak-top {
top: 60%;
left: 40%;
@ -203,7 +203,7 @@ tests:
height: 10%;
border-radius: 50%;
}
.beak-bottom {
top: 65%;
left: 42%;
@ -212,11 +212,11 @@ tests:
height: 10%;
border-radius: 50%;
}
body {
background:#c6faf1;
}
.penguin * {
position: absolute;
}

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

@ -23,7 +23,7 @@ Define a variable named <code>--penguin-belly</code> in the <code>:root</code> s
```yml
tests:
- text: 'declare the <code>--penguin-belly</code> variable in the <code>:root</code> and assign it to <code>pink</code>.'
testString: 'assert(code.match(/:root\s*?{[\s\S]*--penguin-belly\s*?:\s*?pink\s*?;[\s\S]*}/gi), ''declare the <code>--penguin-belly</code> variable in the <code>:root</code> and assign it to <code>pink</code>.'');'
testString: 'assert(code.match(/:root\s*?{[\s\S]*--penguin-belly\s*?:\s*?pink\s*?;[\s\S]*}/gi), "declare the <code>--penguin-belly</code> variable in the <code>:root</code> and assign it to <code>pink</code>.");'
```
@ -37,16 +37,16 @@ tests:
```html
<style>
:root {
/* add code below */
/* add code above */
}
body {
background: var(--penguin-belly, #c6faf1);
}
.penguin {
--penguin-skin: gray;
--penguin-beak: orange;
@ -57,7 +57,7 @@ tests:
width: 300px;
height: 300px;
}
.right-cheek {
top: 15%;
left: 35%;
@ -66,7 +66,7 @@ tests:
height: 70%;
border-radius: 70% 70% 60% 60%;
}
.left-cheek {
top: 15%;
left: 5%;
@ -75,7 +75,7 @@ tests:
height: 70%;
border-radius: 70% 70% 60% 60%;
}
.belly {
top: 60%;
left: 2.5%;
@ -84,7 +84,7 @@ tests:
height: 100%;
border-radius: 120% 120% 100% 100%;
}
.penguin-top {
top: 10%;
left: 25%;
@ -93,7 +93,7 @@ tests:
height: 45%;
border-radius: 70% 70% 60% 60%;
}
.penguin-bottom {
top: 40%;
left: 23.5%;
@ -102,7 +102,7 @@ tests:
height: 45%;
border-radius: 70% 70% 100% 100%;
}
.right-hand {
top: 0%;
left: -5%;
@ -113,7 +113,7 @@ tests:
transform: rotate(45deg);
z-index: -1;
}
.left-hand {
top: 0%;
left: 75%;
@ -124,7 +124,7 @@ tests:
transform: rotate(-45deg);
z-index: -1;
}
.right-feet {
top: 85%;
left: 60%;
@ -135,7 +135,7 @@ tests:
transform: rotate(-80deg);
z-index: -2222;
}
.left-feet {
top: 85%;
left: 25%;
@ -146,7 +146,7 @@ tests:
transform: rotate(80deg);
z-index: -2222;
}
.right-eye {
top: 45%;
left: 60%;
@ -155,7 +155,7 @@ tests:
height: 17%;
border-radius: 50%;
}
.left-eye {
top: 45%;
left: 25%;
@ -164,7 +164,7 @@ tests:
height: 17%;
border-radius: 50%;
}
.sparkle {
top: 25%;
left: 15%;
@ -173,7 +173,7 @@ tests:
height: 35%;
border-radius: 50%;
}
.blush-right {
top: 65%;
left: 15%;
@ -182,7 +182,7 @@ tests:
height: 10%;
border-radius: 50%;
}
.blush-left {
top: 65%;
left: 70%;
@ -191,7 +191,7 @@ tests:
height: 10%;
border-radius: 50%;
}
.beak-top {
top: 60%;
left: 40%;
@ -200,7 +200,7 @@ tests:
height: 10%;
border-radius: 50%;
}
.beak-bottom {
top: 65%;
left: 42%;
@ -209,7 +209,7 @@ tests:
height: 10%;
border-radius: 50%;
}
.penguin * {
position: absolute;
}

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

@ -22,7 +22,7 @@ Change the value of <code>--penguin-belly</code> to <code>white</code> in the <c
```yml
tests:
- text: The <code>penguin</code> class should reassign the <code>--penguin-belly</code> variable to <code>white</code>.
testString: 'assert(code.match(/.penguin\s*?{[\s\S]*--penguin-belly\s*?:\s*?white\s*?;[\s\S]*}/gi), ''The <code>penguin</code> class should reassign the <code>--penguin-belly</code> variable to <code>white</code>.'');'
testString: 'assert(code.match(/.penguin\s*?{[\s\S]*--penguin-belly\s*?:\s*?white\s*?;[\s\S]*}/gi), "The <code>penguin</code> class should reassign the <code>--penguin-belly</code> variable to <code>white</code>.");'
```
@ -40,17 +40,17 @@ tests:
--penguin-belly: pink;
--penguin-beak: orange;
}
body {
background: var(--penguin-belly, #c6faf1);
}
.penguin {
/* add code below */
/* add code above */
position: relative;
margin: auto;
display: block;
@ -58,7 +58,7 @@ tests:
width: 300px;
height: 300px;
}
.right-cheek {
top: 15%;
left: 35%;
@ -67,7 +67,7 @@ tests:
height: 70%;
border-radius: 70% 70% 60% 60%;
}
.left-cheek {
top: 15%;
left: 5%;
@ -76,7 +76,7 @@ tests:
height: 70%;
border-radius: 70% 70% 60% 60%;
}
.belly {
top: 60%;
left: 2.5%;
@ -85,7 +85,7 @@ tests:
height: 100%;
border-radius: 120% 120% 100% 100%;
}
.penguin-top {
top: 10%;
left: 25%;
@ -94,7 +94,7 @@ tests:
height: 45%;
border-radius: 70% 70% 60% 60%;
}
.penguin-bottom {
top: 40%;
left: 23.5%;
@ -103,7 +103,7 @@ tests:
height: 45%;
border-radius: 70% 70% 100% 100%;
}
.right-hand {
top: 0%;
left: -5%;
@ -114,7 +114,7 @@ tests:
transform: rotate(45deg);
z-index: -1;
}
.left-hand {
top: 0%;
left: 75%;
@ -125,7 +125,7 @@ tests:
transform: rotate(-45deg);
z-index: -1;
}
.right-feet {
top: 85%;
left: 60%;
@ -136,7 +136,7 @@ tests:
transform: rotate(-80deg);
z-index: -2222;
}
.left-feet {
top: 85%;
left: 25%;
@ -147,7 +147,7 @@ tests:
transform: rotate(80deg);
z-index: -2222;
}
.right-eye {
top: 45%;
left: 60%;
@ -156,7 +156,7 @@ tests:
height: 17%;
border-radius: 50%;
}
.left-eye {
top: 45%;
left: 25%;
@ -165,7 +165,7 @@ tests:
height: 17%;
border-radius: 50%;
}
.sparkle {
top: 25%;
left: 15%;
@ -174,7 +174,7 @@ tests:
height: 35%;
border-radius: 50%;
}
.blush-right {
top: 65%;
left: 15%;
@ -183,7 +183,7 @@ tests:
height: 10%;
border-radius: 50%;
}
.blush-left {
top: 65%;
left: 70%;
@ -192,7 +192,7 @@ tests:
height: 10%;
border-radius: 50%;
}
.beak-top {
top: 60%;
left: 40%;
@ -201,7 +201,7 @@ tests:
height: 10%;
border-radius: 50%;
}
.beak-bottom {
top: 65%;
left: 42%;
@ -210,7 +210,7 @@ tests:
height: 10%;
border-radius: 50%;
}
.penguin * {
position: absolute;
}

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

@ -26,9 +26,9 @@ Change your <code>h2</code> element's style so that its text color is red.
```yml
tests:
- text: Your <code>h2</code> element should be red.
testString: 'assert($("h2").css("color") === "rgb(255, 0, 0)", ''Your <code>h2</code> element should be red.'');'
testString: 'assert($("h2").css("color") === "rgb(255, 0, 0)", "Your <code>h2</code> element should be red.");'
- text: Your <code>style</code> declaration should end with a <code>;</code> .
testString: 'assert(code.match(/<h2\s+style\s*=\s*(\''|")\s*color\s*:\s*(?:rgb\(\s*255\s*,\s*0\s*,\s*0\s*\)|rgb\(\s*100%\s*,\s*0%\s*,\s*0%\s*\)|red|#ff0000|#f00|hsl\(\s*0\s*,\s*100%\s*,\s*50%\s*\))\s*\;(\''|")>\s*CatPhotoApp\s*<\/h2>/),'' Your <code>style</code> declaration should end with a <code>;</code> .'');'
testString: 'assert(code.match(/<h2\s+style\s*=\s*(\"|")\s*color\s*:\s*(?:rgb\(\s*255\s*,\s*0\s*,\s*0\s*\)|rgb\(\s*100%\s*,\s*0%\s*,\s*0%\s*\)|red|#ff0000|#f00|hsl\(\s*0\s*,\s*100%\s*,\s*50%\s*\))\s*\;(\"|")>\s*CatPhotoApp\s*<\/h2>/)," Your <code>style</code> declaration should end with a <code>;</code> .");'
```
@ -43,9 +43,9 @@ tests:
<h2>CatPhotoApp</h2>
<main>
<p>Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<div>
<p>Things cats love:</p>
<ul>
@ -60,7 +60,7 @@ tests:
<li>other cats</li>
</ol>
</div>
<form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>

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

@ -22,7 +22,7 @@ Inside the same <code>&#60;style&#62;</code> tag that contains your <code>red-te
```yml
tests:
- text: 'Between the <code>style</code> tags, give the <code>p</code> elements <code>font-size</code> of <code>16px</code>. Browser and Text zoom should be at 100%.'
testString: 'assert(code.match(/p\s*{\s*font-size\s*:\s*16\s*px\s*;\s*}/i), ''Between the <code>style</code> tags, give the <code>p</code> elements <code>font-size</code> of <code>16px</code>. Browser and Text zoom should be at 100%.'');'
testString: 'assert(code.match(/p\s*{\s*font-size\s*:\s*16\s*px\s*;\s*}/i), "Between the <code>style</code> tags, give the <code>p</code> elements <code>font-size</code> of <code>16px</code>. Browser and Text zoom should be at 100%.");'
```
@ -43,9 +43,9 @@ tests:
<h2 class="red-text">CatPhotoApp</h2>
<main>
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<div>
<p>Things cats love:</p>
<ul>
@ -60,7 +60,7 @@ tests:
<li>other cats</li>
</ol>
</div>
<form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>

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

@ -24,7 +24,7 @@ In the <code>penguin</code> class, create a variable name <code>--penguin-skin</
```yml
tests:
- text: <code>penguin</code> class should declare the <code>--penguin-skin</code> variable and assign it to <code>gray</code>.
testString: 'assert(code.match(/.penguin\s*?{[\s\S]*--penguin-skin\s*?:\s*?gray\s*?;[\s\S]*}/gi), ''<code>penguin</code> class should declare the <code>--penguin-skin</code> variable and assign it to <code>gray</code>.'');'
testString: 'assert(code.match(/.penguin\s*?{[\s\S]*--penguin-skin\s*?:\s*?gray\s*?;[\s\S]*}/gi), "<code>penguin</code> class should declare the <code>--penguin-skin</code> variable and assign it to <code>gray</code>.");'
```
@ -38,9 +38,9 @@ tests:
```html
<style>
.penguin {
/* add code below */
/* add code above */
position: relative;
margin: auto;
@ -49,7 +49,7 @@ tests:
width: 300px;
height: 300px;
}
.penguin-top {
top: 10%;
left: 25%;
@ -58,7 +58,7 @@ tests:
height: 45%;
border-radius: 70% 70% 60% 60%;
}
.penguin-bottom {
top: 40%;
left: 23.5%;
@ -67,7 +67,7 @@ tests:
height: 45%;
border-radius: 70% 70% 100% 100%;
}
.right-hand {
top: 0%;
left: -5%;
@ -78,7 +78,7 @@ tests:
transform: rotate(45deg);
z-index: -1;
}
.left-hand {
top: 0%;
left: 75%;
@ -89,7 +89,7 @@ tests:
transform: rotate(-45deg);
z-index: -1;
}
.right-cheek {
top: 15%;
left: 35%;
@ -98,7 +98,7 @@ tests:
height: 70%;
border-radius: 70% 70% 60% 60%;
}
.left-cheek {
top: 15%;
left: 5%;
@ -107,7 +107,7 @@ tests:
height: 70%;
border-radius: 70% 70% 60% 60%;
}
.belly {
top: 60%;
left: 2.5%;
@ -116,7 +116,7 @@ tests:
height: 100%;
border-radius: 120% 120% 100% 100%;
}
.right-feet {
top: 85%;
left: 60%;
@ -125,9 +125,9 @@ tests:
height: 30%;
border-radius: 50% 50% 50% 50%;
transform: rotate(-80deg);
z-index: -2222;
z-index: -2222;
}
.left-feet {
top: 85%;
left: 25%;
@ -136,76 +136,76 @@ tests:
height: 30%;
border-radius: 50% 50% 50% 50%;
transform: rotate(80deg);
z-index: -2222;
z-index: -2222;
}
.right-eye {
top: 45%;
left: 60%;
background: black;
width: 15%;
height: 17%;
border-radius: 50%;
border-radius: 50%;
}
.left-eye {
top: 45%;
left: 25%;
background: black;
width: 15%;
height: 17%;
border-radius: 50%;
border-radius: 50%;
}
.sparkle {
top: 25%;
left: 15%;
background: white;
width: 35%;
height: 35%;
border-radius: 50%;
border-radius: 50%;
}
.blush-right {
top: 65%;
left: 15%;
background: pink;
width: 15%;
height: 10%;
border-radius: 50%;
border-radius: 50%;
}
.blush-left {
top: 65%;
left: 70%;
background: pink;
width: 15%;
height: 10%;
border-radius: 50%;
border-radius: 50%;
}
.beak-top {
top: 60%;
left: 40%;
background: orange;
width: 20%;
height: 10%;
border-radius: 50%;
border-radius: 50%;
}
.beak-bottom {
top: 65%;
left: 42%;
background: orange;
width: 16%;
height: 10%;
border-radius: 50%;
border-radius: 50%;
}
body {
background:#c6faf1;
}
.penguin * {
position: absolute;
}

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

@ -23,9 +23,9 @@ Create a class called <code>silver-background</code> with the <code>background-c
```yml
tests:
- text: Give your <code>div</code> element the class <code>silver-background</code>.
testString: 'assert($("div").hasClass("silver-background"), ''Give your <code>div</code> element the class <code>silver-background</code>.'');'
testString: 'assert($("div").hasClass("silver-background"), "Give your <code>div</code> element the class <code>silver-background</code>.");'
- text: Your <code>div</code> element should have a silver background.
testString: 'assert($("div").css("background-color") === "rgb(192, 192, 192)", ''Your <code>div</code> element should have a silver background.'');'
testString: 'assert($("div").css("background-color") === "rgb(192, 192, 192)", "Your <code>div</code> element should have a silver background.");'
- text: Define a class named <code>silver-background</code> within the <code>style</code> element and assign the value of <code>silver</code> to the <code>background-color</code> property.
testString: 'assert(code.match(/\.silver-background\s*{\s*background-color:\s*silver;\s*}/), "Define a class named <code>silver-background</code> within the <code>style</code> element and assign the value of <code>silver</code> to the <code>background-color</code> property.");'
@ -69,9 +69,9 @@ tests:
<h2 class="red-text">CatPhotoApp</h2>
<main>
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<div>
<p>Things cats love:</p>
<ul>
@ -86,7 +86,7 @@ tests:
<li>other cats</li>
</ol>
</div>
<form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>

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

@ -28,13 +28,13 @@ Create a <code>font-family</code> CSS rule that uses the <code>Lobster</code> fo
```yml
tests:
- text: Import the <code>Lobster</code> font.
testString: 'assert(new RegExp("googleapis", "gi").test(code), ''Import the <code>Lobster</code> font.'');'
testString: 'assert(new RegExp("googleapis", "gi").test(code), "Import the <code>Lobster</code> font.");'
- text: Your <code>h2</code> element should use the font <code>Lobster</code>.
testString: 'assert($("h2").css("font-family").match(/lobster/i), ''Your <code>h2</code> element should use the font <code>Lobster</code>.'');'
testString: 'assert($("h2").css("font-family").match(/lobster/i), "Your <code>h2</code> element should use the font <code>Lobster</code>.");'
- text: Use an <code>h2</code> CSS selector to change the font.
testString: 'assert(/\s*h2\s*\{\s*font-family\:\s*(\''|")?Lobster(\''|")?\s*;\s*\}/gi.test(code), ''Use an <code>h2</code> CSS selector to change the font.'');'
testString: 'assert(/\s*h2\s*\{\s*font-family\:\s*(\"|")?Lobster(\"|")?\s*;\s*\}/gi.test(code), "Use an <code>h2</code> CSS selector to change the font.");'
- text: Your <code>p</code> element should still use the font <code>monospace</code>.
testString: 'assert($("p").css("font-family").match(/monospace/i), ''Your <code>p</code> element should still use the font <code>monospace</code>.'');'
testString: 'assert($("p").css("font-family").match(/monospace/i), "Your <code>p</code> element should still use the font <code>monospace</code>.");'
```
@ -60,9 +60,9 @@ tests:
<h2 class="red-text">CatPhotoApp</h2>
<main>
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<div>
<p>Things cats love:</p>
<ul>
@ -77,7 +77,7 @@ tests:
<li>other cats</li>
</ol>
</div>
<form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>

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

@ -2,7 +2,7 @@
id: 5b7d72c338cd7e35b63f3e14
title: Improve Compatibility with Browser Fallbacks
challengeType: 0
videoUrl: ''
videoUrl: "
---
## Description
@ -23,7 +23,7 @@ It looks like a variable is being used to set the background color of the <code>
```yml
tests:
- text: Your <code>.red-box</code> rule should include a fallback with the <code>background</code> set to red immediately before the existing <code>background</code> declaration.
testString: 'assert(code.match(/.red-box\s*{[^}]*background:\s*(red|#ff0000|#f00|rgb\(\s*255\s*,\s*0\s*,\s*0\s*\)|rgb\(\s*100%\s*,\s*0%\s*,\s*0%\s*\)|hsl\(\s*0\s*,\s*100%\s*,\s*50%\s*\))\s*;\s*background:\s*var\(\s*--red-color\s*\);/gi), ''Your <code>.red-box</code> rule should include a fallback with the <code>background</code> set to red immediately before the existing <code>background</code> declaration.'');'
testString: 'assert(code.match(/.red-box\s*{[^}]*background:\s*(red|#ff0000|#f00|rgb\(\s*255\s*,\s*0\s*,\s*0\s*\)|rgb\(\s*100%\s*,\s*0%\s*,\s*0%\s*\)|hsl\(\s*0\s*,\s*100%\s*,\s*50%\s*\))\s*;\s*background:\s*var\(\s*--red-color\s*\);/gi), "Your <code>.red-box</code> rule should include a fallback with the <code>background</code> set to red immediately before the existing <code>background</code> declaration.");'
```
@ -40,7 +40,7 @@ tests:
--red-color: red;
}
.red-box {
background: var(--red-color);
height: 200px;
width:200px;

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

@ -24,19 +24,19 @@ Finally, give your <code>body</code> element the font-family of <code>monospace<
```yml
tests:
- text: Create an <code>h1</code> element.
testString: 'assert(($("h1").length > 0), ''Create an <code>h1</code> element.'');'
testString: 'assert(($("h1").length > 0), "Create an <code>h1</code> element.");'
- text: Your <code>h1</code> element should have the text <code>Hello World</code>.
testString: 'assert(($("h1").length > 0 && $("h1").text().match(/hello world/i)), ''Your <code>h1</code> element should have the text <code>Hello World</code>.'');'
testString: 'assert(($("h1").length > 0 && $("h1").text().match(/hello world/i)), "Your <code>h1</code> element should have the text <code>Hello World</code>.");'
- text: Make sure your <code>h1</code> element has a closing tag.
testString: 'assert(code.match(/<\/h1>/g) && code.match(/<h1/g) && code.match(/<\/h1>/g).length === code.match(/<h1/g).length, ''Make sure your <code>h1</code> element has a closing tag.'');'
testString: 'assert(code.match(/<\/h1>/g) && code.match(/<h1/g) && code.match(/<\/h1>/g).length === code.match(/<h1/g).length, "Make sure your <code>h1</code> element has a closing tag.");'
- text: Give your <code>body</code> element the <code>color</code> property of <code>green</code>.
testString: 'assert(($("body").css("color") === "rgb(0, 128, 0)"), ''Give your <code>body</code> element the <code>color</code> property of <code>green</code>.'');'
testString: 'assert(($("body").css("color") === "rgb(0, 128, 0)"), "Give your <code>body</code> element the <code>color</code> property of <code>green</code>.");'
- text: Give your <code>body</code> element the <code>font-family</code> property of <code>monospace</code>.
testString: 'assert(($("body").css("font-family").match(/monospace/i)), ''Give your <code>body</code> element the <code>font-family</code> property of <code>monospace</code>.'');'
testString: 'assert(($("body").css("font-family").match(/monospace/i)), "Give your <code>body</code> element the <code>font-family</code> property of <code>monospace</code>.");'
- text: Your <code>h1</code> element should inherit the font <code>monospace</code> from your <code>body</code> element.
testString: 'assert(($("h1").length > 0 && $("h1").css("font-family").match(/monospace/i)), ''Your <code>h1</code> element should inherit the font <code>monospace</code> from your <code>body</code> element.'');'
testString: 'assert(($("h1").length > 0 && $("h1").css("font-family").match(/monospace/i)), "Your <code>h1</code> element should inherit the font <code>monospace</code> from your <code>body</code> element.");'
- text: Your <code>h1</code> element should inherit the color green from your <code>body</code> element.
testString: 'assert(($("h1").length > 0 && $("h1").css("color") === "rgb(0, 128, 0)"), ''Your <code>h1</code> element should inherit the color green from your <code>body</code> element.'');'
testString: 'assert(($("h1").length > 0 && $("h1").css("color") === "rgb(0, 128, 0)"), "Your <code>h1</code> element should inherit the color green from your <code>body</code> element.");'
```

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

@ -21,9 +21,9 @@ Give your cat photo a <code>border-radius</code> of <code>50%</code>.
```yml
tests:
- text: 'Your image should have a border radius of <code>50%</code>, making it perfectly circular.'
testString: 'assert(parseInt($("img").css("border-top-left-radius")) > 48, ''Your image should have a border radius of <code>50%</code>, making it perfectly circular.'');'
testString: 'assert(parseInt($("img").css("border-top-left-radius")) > 48, "Your image should have a border radius of <code>50%</code>, making it perfectly circular.");'
- text: Be sure to use a percentage value of <code>50%</code>.
testString: 'assert(code.match(/50%/g), ''Be sure to use a percentage value of <code>50%</code>.'');'
testString: 'assert(code.match(/50%/g), "Be sure to use a percentage value of <code>50%</code>.");'
```
@ -65,9 +65,9 @@ tests:
<h2 class="red-text">CatPhotoApp</h2>
<main>
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<div>
<p>Things cats love:</p>
<ul>
@ -82,7 +82,7 @@ tests:
<li>other cats</li>
</ol>
</div>
<form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>

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

@ -26,17 +26,17 @@ An example of how to do this is:
```yml
tests:
- text: Your <code>h1</code> element should have the class <code>pink-text</code>.
testString: 'assert($("h1").hasClass("pink-text"), ''Your <code>h1</code> element should have the class <code>pink-text</code>.'');'
testString: 'assert($("h1").hasClass("pink-text"), "Your <code>h1</code> element should have the class <code>pink-text</code>.");'
- text: Your <code>h1</code> element should have the class <code>blue-text</code>.
testString: 'assert($("h1").hasClass("blue-text"), ''Your <code>h1</code> element should have the class <code>blue-text</code>.'');'
testString: 'assert($("h1").hasClass("blue-text"), "Your <code>h1</code> element should have the class <code>blue-text</code>.");'
- text: Your <code>h1</code> element should have the id of <code>orange-text</code>.
testString: 'assert($("h1").attr("id") === "orange-text", ''Your <code>h1</code> element should have the id of <code>orange-text</code>.'');'
testString: 'assert($("h1").attr("id") === "orange-text", "Your <code>h1</code> element should have the id of <code>orange-text</code>.");'
- text: 'Your <code>h1</code> element should have the inline style of <code>color&#58; white</code>.'
testString: 'assert(code.match(/<h1.*style/gi) && code.match(/<h1.*style.*color\s*?:/gi), ''Your <code>h1</code> element should have the inline style of <code>color&#58; white</code>.'');'
testString: 'assert(code.match(/<h1.*style/gi) && code.match(/<h1.*style.*color\s*?:/gi), "Your <code>h1</code> element should have the inline style of <code>color&#58; white</code>.");'
- text: Your <code>pink-text</code> class declaration should have the <code>!important</code> keyword to override all other declarations.
testString: 'assert(code.match(/\.pink-text\s*?\{[\s\S]*?color:.*pink.*!important\s*;?[^\.]*\}/g), ''Your <code>pink-text</code> class declaration should have the <code>!important</code> keyword to override all other declarations.'');'
testString: 'assert(code.match(/\.pink-text\s*?\{[\s\S]*?color:.*pink.*!important\s*;?[^\.]*\}/g), "Your <code>pink-text</code> class declaration should have the <code>!important</code> keyword to override all other declarations.");'
- text: Your <code>h1</code> element should be pink.
testString: 'assert($("h1").css("color") === "rgb(255, 192, 203)", ''Your <code>h1</code> element should be pink.'');'
testString: 'assert($("h1").css("color") === "rgb(255, 192, 203)", "Your <code>h1</code> element should be pink.");'
```

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

@ -28,19 +28,19 @@ Note: It doesn't matter whether you declare this CSS above or below pink-text cl
```yml
tests:
- text: Your <code>h1</code> element should have the class <code>pink-text</code>.
testString: 'assert($("h1").hasClass("pink-text"), ''Your <code>h1</code> element should have the class <code>pink-text</code>.'');'
testString: 'assert($("h1").hasClass("pink-text"), "Your <code>h1</code> element should have the class <code>pink-text</code>.");'
- text: Your <code>h1</code> element should have the class <code>blue-text</code>.
testString: 'assert($("h1").hasClass("blue-text"), ''Your <code>h1</code> element should have the class <code>blue-text</code>.'');'
testString: 'assert($("h1").hasClass("blue-text"), "Your <code>h1</code> element should have the class <code>blue-text</code>.");'
- text: Give your <code>h1</code> element the id of <code>orange-text</code>.
testString: 'assert($("h1").attr("id") === "orange-text", ''Give your <code>h1</code> element the id of <code>orange-text</code>.'');'
testString: 'assert($("h1").attr("id") === "orange-text", "Give your <code>h1</code> element the id of <code>orange-text</code>.");'
- text: There should be only one <code>h1</code> element.
testString: 'assert(($("h1").length === 1), ''There should be only one <code>h1</code> element.'');'
testString: 'assert(($("h1").length === 1), "There should be only one <code>h1</code> element.");'
- text: Create a CSS declaration for your <code>orange-text</code> id
testString: 'assert(code.match(/#orange-text\s*{/gi), ''Create a CSS declaration for your <code>orange-text</code> id'');'
testString: 'assert(code.match(/#orange-text\s*{/gi), "Create a CSS declaration for your <code>orange-text</code> id");'
- text: Do not give your <code>h1</code> any <code>style</code> attributes.
testString: 'assert(!code.match(/<h1.*style.*>/gi), ''Do not give your <code>h1</code> any <code>style</code> attributes.'');'
testString: 'assert(!code.match(/<h1.*style.*>/gi), "Do not give your <code>h1</code> any <code>style</code> attributes.");'
- text: Your <code>h1</code> element should be orange.
testString: 'assert($("h1").css("color") === "rgb(255, 165, 0)", ''Your <code>h1</code> element should be orange.'');'
testString: 'assert($("h1").css("color") === "rgb(255, 165, 0)", "Your <code>h1</code> element should be orange.");'
```

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

@ -24,15 +24,15 @@ Leave the <code>blue-text</code> and <code>pink-text</code> classes on your <cod
```yml
tests:
- text: Your <code>h1</code> element should have the class <code>pink-text</code>.
testString: 'assert($("h1").hasClass("pink-text"), ''Your <code>h1</code> element should have the class <code>pink-text</code>.'');'
testString: 'assert($("h1").hasClass("pink-text"), "Your <code>h1</code> element should have the class <code>pink-text</code>.");'
- text: Your <code>h1</code> element should have the class <code>blue-text</code>.
testString: 'assert($("h1").hasClass("blue-text"), ''Your <code>h1</code> element should have the class <code>blue-text</code>.'');'
testString: 'assert($("h1").hasClass("blue-text"), "Your <code>h1</code> element should have the class <code>blue-text</code>.");'
- text: Your <code>h1</code> element should have the id of <code>orange-text</code>.
testString: 'assert($("h1").attr("id") === "orange-text", ''Your <code>h1</code> element should have the id of <code>orange-text</code>.'');'
testString: 'assert($("h1").attr("id") === "orange-text", "Your <code>h1</code> element should have the id of <code>orange-text</code>.");'
- text: Give your <code>h1</code> element an inline style.
testString: 'assert(document.querySelector(''h1[style]''), ''Give your <code>h1</code> element an inline style.'');'
testString: 'assert(document.querySelector("h1[style]"), "Give your <code>h1</code> element an inline style.");'
- text: Your <code>h1</code> element should be white.
testString: 'assert($("h1").css("color") === "rgb(255, 255, 255)", ''Your <code>h1</code> element should be white.'');'
testString: 'assert($("h1").css("color") === "rgb(255, 255, 255)", "Your <code>h1</code> element should be white.");'
```

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

@ -27,13 +27,13 @@ However, the order of the <code>class</code> declarations in the <code>&#60;styl
```yml
tests:
- text: Your <code>h1</code> element should have the class <code>pink-text</code>.
testString: 'assert($("h1").hasClass("pink-text"), ''Your <code>h1</code> element should have the class <code>pink-text</code>.'');'
testString: 'assert($("h1").hasClass("pink-text"), "Your <code>h1</code> element should have the class <code>pink-text</code>.");'
- text: Your <code>h1</code> element should have the class <code>blue-text</code>.
testString: 'assert($("h1").hasClass("blue-text"), ''Your <code>h1</code> element should have the class <code>blue-text</code>.'');'
testString: 'assert($("h1").hasClass("blue-text"), "Your <code>h1</code> element should have the class <code>blue-text</code>.");'
- text: Both <code>blue-text</code> and <code>pink-text</code> should belong to the same <code>h1</code> element.
testString: 'assert($(".pink-text").hasClass("blue-text"), ''Both <code>blue-text</code> and <code>pink-text</code> should belong to the same <code>h1</code> element.'');'
testString: 'assert($(".pink-text").hasClass("blue-text"), "Both <code>blue-text</code> and <code>pink-text</code> should belong to the same <code>h1</code> element.");'
- text: Your <code>h1</code> element should be blue.
testString: 'assert($("h1").css("color") === "rgb(0, 0, 255)", ''Your <code>h1</code> element should be blue.'');'
testString: 'assert($("h1").css("color") === "rgb(0, 0, 255)", "Your <code>h1</code> element should be blue.");'
```

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

@ -24,11 +24,11 @@ Give your <code>h1</code> element the class of <code>pink-text</code>.
```yml
tests:
- text: Your <code>h1</code> element should have the class <code>pink-text</code>.
testString: 'assert($("h1").hasClass("pink-text"), ''Your <code>h1</code> element should have the class <code>pink-text</code>.'');'
testString: 'assert($("h1").hasClass("pink-text"), "Your <code>h1</code> element should have the class <code>pink-text</code>.");'
- text: 'Your <code>&#60;style&#62;</code> should have a <code>pink-text</code> CSS class that changes the <code>color</code>.'
testString: 'assert(code.match(/\.pink-text\s*\{\s*color\s*:\s*.+\s*;\s*\}/g), ''Your <code>&#60;style&#62;</code> should have a <code>pink-text</code> CSS class that changes the <code>color</code>.'');'
testString: 'assert(code.match(/\.pink-text\s*\{\s*color\s*:\s*.+\s*;\s*\}/g), "Your <code>&#60;style&#62;</code> should have a <code>pink-text</code> CSS class that changes the <code>color</code>.");'
- text: Your <code>h1</code> element should be pink.
testString: 'assert($("h1").css("color") === "rgb(255, 192, 203)", ''Your <code>h1</code> element should be pink.'');'
testString: 'assert($("h1").css("color") === "rgb(255, 192, 203)", "Your <code>h1</code> element should be pink.");'
```

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

@ -23,7 +23,7 @@ Make all of your <code>p</code> elements use the <code>monospace</code> font.
```yml
tests:
- text: Your <code>p</code> elements should use the font <code>monospace</code>.
testString: 'assert($("p").not(".red-text").css("font-family").match(/monospace/i), ''Your <code>p</code> elements should use the font <code>monospace</code>.'');'
testString: 'assert($("p").not(".red-text").css("font-family").match(/monospace/i), "Your <code>p</code> elements should use the font <code>monospace</code>.");'
```
@ -48,9 +48,9 @@ tests:
<h2 class="red-text">CatPhotoApp</h2>
<main>
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<div>
<p>Things cats love:</p>
<ul>
@ -65,7 +65,7 @@ tests:
<li>other cats</li>
</ol>
</div>
<form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>

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

@ -25,7 +25,7 @@ Give your <code>form</code> element the id <code>cat-photo-form</code>.
```yml
tests:
- text: Give your <code>form</code> element the id of <code>cat-photo-form</code>.
testString: 'assert($("form").attr("id") === "cat-photo-form", ''Give your <code>form</code> element the id of <code>cat-photo-form</code>.'');'
testString: 'assert($("form").attr("id") === "cat-photo-form", "Give your <code>form</code> element the id of <code>cat-photo-form</code>.");'
```
@ -71,9 +71,9 @@ tests:
<h2 class="red-text">CatPhotoApp</h2>
<main>
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<div class="silver-background">
<p>Things cats love:</p>
<ul>
@ -88,7 +88,7 @@ tests:
<li>other cats</li>
</ol>
</div>
<form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>

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

@ -24,9 +24,9 @@ Create a class called <code>smaller-image</code> and use it to resize the image
```yml
tests:
- text: Your <code>img</code> element should have the class <code>smaller-image</code>.
testString: 'assert($("img[src=''https://bit.ly/fcc-relaxing-cat'']").attr(''class'') === "smaller-image", ''Your <code>img</code> element should have the class <code>smaller-image</code>.'');'
testString: 'assert($("img[src="https://bit.ly/fcc-relaxing-cat"]").attr("class") === "smaller-image", "Your <code>img</code> element should have the class <code>smaller-image</code>.");'
- text: Your image should be 100 pixels wide. Browser zoom should be at 100%.
testString: 'assert($("img").width() === 100, ''Your image should be 100 pixels wide. Browser zoom should be at 100%.'');'
testString: 'assert($("img").width() === 100, "Your image should be 100 pixels wide. Browser zoom should be at 100%.");'
```
@ -57,9 +57,9 @@ tests:
<h2 class="red-text">CatPhotoApp</h2>
<main>
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<div>
<p>Things cats love:</p>
<ul>
@ -74,7 +74,7 @@ tests:
<li>other cats</li>
</ol>
</div>
<form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>

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

@ -27,13 +27,13 @@ In the last challenge, you imported the <code>Lobster</code> font using the <cod
```yml
tests:
- text: Your h2 element should use the font <code>Lobster</code>.
testString: 'assert($("h2").css("font-family").match(/^"?lobster/i), ''Your h2 element should use the font <code>Lobster</code>.'');'
testString: 'assert($("h2").css("font-family").match(/^"?lobster/i), "Your h2 element should use the font <code>Lobster</code>.");'
- text: Your h2 element should degrade to the font <code>monospace</code> when <code>Lobster</code> is not available.
testString: 'assert(/\s*h2\s*\{\s*font-family\:\s*(\''|")?Lobster(\''|")?,\s*monospace\s*;\s*\}/gi.test(code), ''Your h2 element should degrade to the font <code>monospace</code> when <code>Lobster</code> is not available.'');'
testString: 'assert(/\s*h2\s*\{\s*font-family\:\s*(\"|")?Lobster(\"|")?,\s*monospace\s*;\s*\}/gi.test(code), "Your h2 element should degrade to the font <code>monospace</code> when <code>Lobster</code> is not available.");'
- text: 'Comment out your call to Google for the <code>Lobster</code> font by putting <code>&#60!--</code> in front of it.'
testString: 'assert(new RegExp("<!--[^fc]", "gi").test(code), ''Comment out your call to Google for the <code>Lobster</code> font by putting <code>&#60!--</code> in front of it.'');'
testString: 'assert(new RegExp("<!--[^fc]", "gi").test(code), "Comment out your call to Google for the <code>Lobster</code> font by putting <code>&#60!--</code> in front of it.");'
- text: 'Be sure to close your comment by adding <code>--&#62;</code>.'
testString: 'assert(new RegExp("[^fc]-->", "gi").test(code), ''Be sure to close your comment by adding <code>--&#62;</code>.'');'
testString: 'assert(new RegExp("[^fc]-->", "gi").test(code), "Be sure to close your comment by adding <code>--&#62;</code>.");'
```
@ -64,9 +64,9 @@ tests:
<h2 class="red-text">CatPhotoApp</h2>
<main>
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<div>
<p>Things cats love:</p>
<ul>
@ -81,7 +81,7 @@ tests:
<li>other cats</li>
</ol>
</div>
<form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>

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

@ -21,15 +21,15 @@ Classes allow you to use the same CSS styles on multiple HTML elements. You can
```yml
tests:
- text: Your <code>h2</code> element should be red.
testString: 'assert($("h2").css("color") === "rgb(255, 0, 0)", ''Your <code>h2</code> element should be red.'');'
testString: 'assert($("h2").css("color") === "rgb(255, 0, 0)", "Your <code>h2</code> element should be red.");'
- text: Your <code>h2</code> element should have the class <code>red-text</code>.
testString: 'assert($("h2").hasClass("red-text"), ''Your <code>h2</code> element should have the class <code>red-text</code>.'');'
testString: 'assert($("h2").hasClass("red-text"), "Your <code>h2</code> element should have the class <code>red-text</code>.");'
- text: Your first <code>p</code> element should be red.
testString: 'assert($("p:eq(0)").css("color") === "rgb(255, 0, 0)", ''Your first <code>p</code> element should be red.'');'
testString: 'assert($("p:eq(0)").css("color") === "rgb(255, 0, 0)", "Your first <code>p</code> element should be red.");'
- text: Your second and third <code>p</code> elements should not be red.
testString: 'assert(!($("p:eq(1)").css("color") === "rgb(255, 0, 0)") && !($("p:eq(2)").css("color") === "rgb(255, 0, 0)"), ''Your second and third <code>p</code> elements should not be red.'');'
testString: 'assert(!($("p:eq(1)").css("color") === "rgb(255, 0, 0)") && !($("p:eq(2)").css("color") === "rgb(255, 0, 0)"), "Your second and third <code>p</code> elements should not be red.");'
- text: Your first <code>p</code> element should have the class <code>red-text</code>.
testString: 'assert($("p:eq(0)").hasClass("red-text"), ''Your first <code>p</code> element should have the class <code>red-text</code>.'');'
testString: 'assert($("p:eq(0)").hasClass("red-text"), "Your first <code>p</code> element should have the class <code>red-text</code>.");'
```
@ -50,9 +50,9 @@ tests:
<h2 class="red-text">CatPhotoApp</h2>
<main>
<p>Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<div>
<p>Things cats love:</p>
<ul>
@ -67,7 +67,7 @@ tests:
<li>other cats</li>
</ol>
</div>
<form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>

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

@ -24,11 +24,11 @@ We can do this by adding the following to our <code>style</code> element:
```yml
tests:
- text: Give your <code>body</code> element the <code>background-color</code> of black.
testString: 'assert($("body").css("background-color") === "rgb(0, 0, 0)", ''Give your <code>body</code> element the <code>background-color</code> of black.'');'
testString: 'assert($("body").css("background-color") === "rgb(0, 0, 0)", "Give your <code>body</code> element the <code>background-color</code> of black.");'
- text: Make sure your CSS rule is properly formatted with both opening and closing curly brackets.
testString: 'assert(code.match(/<style>\s*body\s*\{\s*background.*\s*:\s*.*;\s*\}\s*<\/style>/i), ''Make sure your CSS rule is properly formatted with both opening and closing curly brackets.'');'
testString: 'assert(code.match(/<style>\s*body\s*\{\s*background.*\s*:\s*.*;\s*\}\s*<\/style>/i), "Make sure your CSS rule is properly formatted with both opening and closing curly brackets.");'
- text: Make sure your CSS rule ends with a semi-colon.
testString: 'assert(code.match(/<style>\s*body\s*\{\s*background.*\s*:\s*.*;\s*\}\s*<\/style>/i), ''Make sure your CSS rule ends with a semi-colon.'');'
testString: 'assert(code.match(/<style>\s*body\s*\{\s*background.*\s*:\s*.*;\s*\}\s*<\/style>/i), "Make sure your CSS rule ends with a semi-colon.");'
```

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

@ -24,9 +24,9 @@ Add a <code>padding</code> property to the element with class <code>red-box</cod
```yml
tests:
- text: Your <code>red-box</code> class should have a <code>padding</code> property.
testString: 'assert($(''.red-box'').css(''padding-top'') != ''0px'' && $(''.red-box'').css(''padding-right'') != ''0px'' && $(''.red-box'').css(''padding-bottom'') != ''0px'' && $(''.red-box'').css(''padding-left'') != ''0px'', ''Your <code>red-box</code> class should have a <code>padding</code> property.'');'
testString: 'assert($(".red-box").css("padding-top") != "0px" && $(".red-box").css("padding-right") != "0px" && $(".red-box").css("padding-bottom") != "0px" && $(".red-box").css("padding-left") != "0px", "Your <code>red-box</code> class should have a <code>padding</code> property.");'
- text: Your <code>red-box</code> class should give elements 1.5em of <code>padding</code>.
testString: 'assert(code.match(/\.red-box\s*?{\s*?.*?\s*?.*?\s*?padding:\s*?1\.5em/gi), ''Your <code>red-box</code> class should give elements 1.5em of <code>padding</code>.'');'
testString: 'assert(code.match(/\.red-box\s*?{\s*?.*?\s*?.*?\s*?padding:\s*?1\.5em/gi), "Your <code>red-box</code> class should give elements 1.5em of <code>padding</code>.");'
```
@ -59,7 +59,7 @@ tests:
.red-box {
background-color: red;
margin: 20px 40px 20px 40px;
}
.green-box {

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

@ -28,13 +28,13 @@ Give your <code>h2</code> element the <code>class</code> attribute with a value
```yml
tests:
- text: Your <code>h2</code> element should be red.
testString: 'assert($("h2").css("color") === "rgb(255, 0, 0)", ''Your <code>h2</code> element should be red.'');'
testString: 'assert($("h2").css("color") === "rgb(255, 0, 0)", "Your <code>h2</code> element should be red.");'
- text: Your <code>h2</code> element should have the class <code>red-text</code>.
testString: 'assert($("h2").hasClass("red-text"), ''Your <code>h2</code> element should have the class <code>red-text</code>.'');'
testString: 'assert($("h2").hasClass("red-text"), "Your <code>h2</code> element should have the class <code>red-text</code>.");'
- text: Your stylesheet should declare a <code>red-text</code> class and have its color set to red.
testString: 'assert(code.match(/\.red-text\s*\{\s*color\s*:\s*red;\s*\}/g), ''Your stylesheet should declare a <code>red-text</code> class and have its color set to red.'');'
testString: 'assert(code.match(/\.red-text\s*\{\s*color\s*:\s*red;\s*\}/g), "Your stylesheet should declare a <code>red-text</code> class and have its color set to red.");'
- text: 'Do not use inline style declarations like <code>style="color&#58; red"</code> in your <code>h2</code> element.'
testString: 'assert($("h2").attr("style") === undefined, ''Do not use inline style declarations like <code>style="color&#58; red"</code> in your <code>h2</code> element.'');'
testString: 'assert($("h2").attr("style") === undefined, "Do not use inline style declarations like <code>style="color&#58; red"</code> in your <code>h2</code> element.");'
```
@ -55,9 +55,9 @@ tests:
<h2>CatPhotoApp</h2>
<main>
<p>Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<div>
<p>Things cats love:</p>
<ul>
@ -72,7 +72,7 @@ tests:
<li>other cats</li>
</ol>
</div>
<form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>

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

@ -24,13 +24,13 @@ Apply the <code>--penguin-skin</code> variable to the <code>background</code> pr
```yml
tests:
- text: Apply the <code>--penguin-skin</code> variable to the <code>background</code> property of the <code>penguin-top</code> class.
testString: 'assert(code.match(/.penguin-top\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}[\s\S]*.penguin-bottom\s{/gi), ''Apply the <code>--penguin-skin</code> variable to the <code>background</code> property of the <code>penguin-top</code> class.'');'
testString: 'assert(code.match(/.penguin-top\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}[\s\S]*.penguin-bottom\s{/gi), "Apply the <code>--penguin-skin</code> variable to the <code>background</code> property of the <code>penguin-top</code> class.");'
- text: Apply the <code>--penguin-skin</code> variable to the <code>background</code> property of the <code>penguin-bottom</code> class.
testString: 'assert(code.match(/.penguin-bottom\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}[\s\S]*.right-hand\s{/gi), ''Apply the <code>--penguin-skin</code> variable to the <code>background</code> property of the <code>penguin-bottom</code> class.'');'
testString: 'assert(code.match(/.penguin-bottom\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}[\s\S]*.right-hand\s{/gi), "Apply the <code>--penguin-skin</code> variable to the <code>background</code> property of the <code>penguin-bottom</code> class.");'
- text: Apply the <code>--penguin-skin</code> variable to the <code>background</code> property of the <code>right-hand</code> class.
testString: 'assert(code.match(/.right-hand\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}[\s\S]*.left-hand\s{/gi), ''Apply the <code>--penguin-skin</code> variable to the <code>background</code> property of the <code>right-hand</code> class.'');'
testString: 'assert(code.match(/.right-hand\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}[\s\S]*.left-hand\s{/gi), "Apply the <code>--penguin-skin</code> variable to the <code>background</code> property of the <code>right-hand</code> class.");'
- text: Apply the <code>--penguin-skin</code> variable to the <code>background</code> property of the <code>left-hand</code> class.
testString: 'assert(code.match(/.left-hand\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}/gi), ''Apply the <code>--penguin-skin</code> variable to the <code>background</code> property of the <code>left-hand</code> class.'');'
testString: 'assert(code.match(/.left-hand\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}/gi), "Apply the <code>--penguin-skin</code> variable to the <code>background</code> property of the <code>left-hand</code> class.");'
```
@ -52,63 +52,63 @@ tests:
width: 300px;
height: 300px;
}
.penguin-top {
top: 10%;
left: 25%;
/* change code below */
background: black;
/* change code above */
width: 50%;
height: 45%;
border-radius: 70% 70% 60% 60%;
}
.penguin-bottom {
top: 40%;
left: 23.5%;
/* change code below */
background: black;
/* change code above */
width: 53%;
height: 45%;
border-radius: 70% 70% 100% 100%;
}
.right-hand {
top: 0%;
left: -5%;
/* change code below */
background: black;
/* change code above */
width: 30%;
height: 60%;
border-radius: 30% 30% 120% 30%;
transform: rotate(45deg);
z-index: -1;
}
.left-hand {
top: 0%;
left: 75%;
/* change code below */
background: black;
/* change code above */
width: 30%;
height: 60%;
border-radius: 30% 30% 30% 120%;
transform: rotate(-45deg);
z-index: -1;
}
.right-cheek {
top: 15%;
left: 35%;
@ -117,7 +117,7 @@ tests:
height: 70%;
border-radius: 70% 70% 60% 60%;
}
.left-cheek {
top: 15%;
left: 5%;
@ -126,7 +126,7 @@ tests:
height: 70%;
border-radius: 70% 70% 60% 60%;
}
.belly {
top: 60%;
left: 2.5%;
@ -135,7 +135,7 @@ tests:
height: 100%;
border-radius: 120% 120% 100% 100%;
}
.right-feet {
top: 85%;
left: 60%;
@ -144,9 +144,9 @@ tests:
height: 30%;
border-radius: 50% 50% 50% 50%;
transform: rotate(-80deg);
z-index: -2222;
z-index: -2222;
}
.left-feet {
top: 85%;
left: 25%;
@ -155,18 +155,18 @@ tests:
height: 30%;
border-radius: 50% 50% 50% 50%;
transform: rotate(80deg);
z-index: -2222;
z-index: -2222;
}
.right-eye {
top: 45%;
left: 60%;
background: black;
width: 15%;
height: 17%;
border-radius: 50%;
border-radius: 50%;
}
.left-eye {
top: 45%;
left: 25%;
@ -175,7 +175,7 @@ tests:
height: 17%;
border-radius: 50%;
}
.sparkle {
top: 25%;
left: 15%;
@ -184,7 +184,7 @@ tests:
height: 35%;
border-radius: 50%;
}
.blush-right {
top: 65%;
left: 15%;
@ -193,7 +193,7 @@ tests:
height: 10%;
border-radius: 50%;
}
.blush-left {
top: 65%;
left: 70%;
@ -202,7 +202,7 @@ tests:
height: 10%;
border-radius: 50%;
}
.beak-top {
top: 60%;
left: 40%;
@ -211,7 +211,7 @@ tests:
height: 10%;
border-radius: 50%;
}
.beak-bottom {
top: 65%;
left: 42%;
@ -220,11 +220,11 @@ tests:
height: 10%;
border-radius: 50%;
}
body {
background:#c6faf1;
}
.penguin * {
position: absolute;
}

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

@ -22,9 +22,9 @@ In the <code>:root</code> selector of the <code>media query</code>, change it so
```yml
tests:
- text: '<code>:root</code> should reassign the <code>--penguin-size</code> variable to <code>200px</code>.'
testString: 'assert(code.match(/media\s*?\(\s*?max-width\s*?:\s*?350px\s*?\)\s*?{[\s\S]*:root\s*?{[\s\S]*--penguin-size\s*?:\s*?200px\s*?;[\s\S]*}[\s\S]*}/gi), ''<code>:root</code> should reassign the <code>--penguin-size</code> variable to <code>200px</code>.'');'
testString: 'assert(code.match(/media\s*?\(\s*?max-width\s*?:\s*?350px\s*?\)\s*?{[\s\S]*:root\s*?{[\s\S]*--penguin-size\s*?:\s*?200px\s*?;[\s\S]*}[\s\S]*}/gi), "<code>:root</code> should reassign the <code>--penguin-size</code> variable to <code>200px</code>.");'
- text: '<code>:root</code> should reassign the <code>--penguin-skin</code> variable to <code>black</code>.'
testString: 'assert(code.match(/media\s*?\(\s*?max-width\s*?:\s*?350px\s*?\)\s*?{[\s\S]*:root\s*?{[\s\S]*--penguin-skin\s*?:\s*?black\s*?;[\s\S]*}[\s\S]*}/gi), ''<code>:root</code> should reassign the <code>--penguin-skin</code> variable to <code>black</code>.'');'
testString: 'assert(code.match(/media\s*?\(\s*?max-width\s*?:\s*?350px\s*?\)\s*?{[\s\S]*:root\s*?{[\s\S]*--penguin-skin\s*?:\s*?black\s*?;[\s\S]*}[\s\S]*}/gi), "<code>:root</code> should reassign the <code>--penguin-skin</code> variable to <code>black</code>.");'
```
@ -43,17 +43,17 @@ tests:
--penguin-belly: white;
--penguin-beak: orange;
}
@media (max-width: 350px) {
:root {
/* add code below */
/* add code above */
}
}
.penguin {
position: relative;
margin: auto;
@ -62,7 +62,7 @@ tests:
width: var(--penguin-size, 300px);
height: var(--penguin-size, 300px);
}
.right-cheek {
top: 15%;
left: 35%;
@ -71,7 +71,7 @@ tests:
height: 70%;
border-radius: 70% 70% 60% 60%;
}
.left-cheek {
top: 15%;
left: 5%;
@ -80,7 +80,7 @@ tests:
height: 70%;
border-radius: 70% 70% 60% 60%;
}
.belly {
top: 60%;
left: 2.5%;
@ -89,7 +89,7 @@ tests:
height: 100%;
border-radius: 120% 120% 100% 100%;
}
.penguin-top {
top: 10%;
left: 25%;
@ -98,7 +98,7 @@ tests:
height: 45%;
border-radius: 70% 70% 60% 60%;
}
.penguin-bottom {
top: 40%;
left: 23.5%;
@ -107,7 +107,7 @@ tests:
height: 45%;
border-radius: 70% 70% 100% 100%;
}
.right-hand {
top: 5%;
left: 25%;
@ -123,7 +123,7 @@ tests:
transform-origin:0% 0%;
animation-timing-function: linear;
}
@keyframes wave {
10% {
transform: rotate(110deg);
@ -133,12 +133,12 @@ tests:
}
30% {
transform: rotate(110deg);
}
}
40% {
transform: rotate(130deg);
}
}
}
.left-hand {
top: 0%;
left: 75%;
@ -149,7 +149,7 @@ tests:
transform: rotate(-45deg);
z-index: -1;
}
.right-feet {
top: 85%;
left: 60%;
@ -160,7 +160,7 @@ tests:
transform: rotate(-80deg);
z-index: -2222;
}
.left-feet {
top: 85%;
left: 25%;
@ -171,7 +171,7 @@ tests:
transform: rotate(80deg);
z-index: -2222;
}
.right-eye {
top: 45%;
left: 60%;
@ -180,7 +180,7 @@ tests:
height: 17%;
border-radius: 50%;
}
.left-eye {
top: 45%;
left: 25%;
@ -189,7 +189,7 @@ tests:
height: 17%;
border-radius: 50%;
}
.sparkle {
top: 25%;
left:-23%;
@ -198,7 +198,7 @@ tests:
height: 100%;
border-radius: 50%;
}
.blush-right {
top: 65%;
left: 15%;
@ -207,7 +207,7 @@ tests:
height: 10%;
border-radius: 50%;
}
.blush-left {
top: 65%;
left: 70%;
@ -216,7 +216,7 @@ tests:
height: 10%;
border-radius: 50%;
}
.beak-top {
top: 60%;
left: 40%;
@ -225,7 +225,7 @@ tests:
height: 10%;
border-radius: 50%;
}
.beak-bottom {
top: 65%;
left: 42%;
@ -234,11 +234,11 @@ tests:
height: 10%;
border-radius: 50%;
}
body {
background:#c6faf1;
}
.penguin * {
position: absolute;
}

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

@ -24,21 +24,21 @@ Go ahead, try using the abbreviated hex codes to color the correct elements.
```yml
tests:
- text: Give your <code>h1</code> element with the text <code>I am red!</code> the <code>color</code> red.
testString: 'assert($(''.red-text'').css(''color'') === ''rgb(255, 0, 0)'', ''Give your <code>h1</code> element with the text <code>I am red!</code> the <code>color</code> red.'');'
testString: 'assert($(".red-text").css("color") === "rgb(255, 0, 0)", "Give your <code>h1</code> element with the text <code>I am red!</code> the <code>color</code> red.");'
- text: 'Use the abbreviate <code>hex code</code> for the color red instead of the hex code <code>#FF0000</code>.'
testString: 'assert(code.match(/\.red-text\s*?{\s*?color:\s*?#F00\s*?;\s*?}/gi), ''Use the abbreviate <code>hex code</code> for the color red instead of the hex code <code>#FF0000</code>.'');'
testString: 'assert(code.match(/\.red-text\s*?{\s*?color:\s*?#F00\s*?;\s*?}/gi), "Use the abbreviate <code>hex code</code> for the color red instead of the hex code <code>#FF0000</code>.");'
- text: Give your <code>h1</code> element with the text <code>I am green!</code> the <code>color</code> green.
testString: 'assert($(''.green-text'').css(''color'') === ''rgb(0, 255, 0)'', ''Give your <code>h1</code> element with the text <code>I am green!</code> the <code>color</code> green.'');'
testString: 'assert($(".green-text").css("color") === "rgb(0, 255, 0)", "Give your <code>h1</code> element with the text <code>I am green!</code> the <code>color</code> green.");'
- text: 'Use the abbreviated <code>hex code</code> for the color green instead of the hex code <code>#00FF00</code>.'
testString: 'assert(code.match(/\.green-text\s*?{\s*?color:\s*?#0F0\s*?;\s*?}/gi), ''Use the abbreviated <code>hex code</code> for the color green instead of the hex code <code>#00FF00</code>.'');'
testString: 'assert(code.match(/\.green-text\s*?{\s*?color:\s*?#0F0\s*?;\s*?}/gi), "Use the abbreviated <code>hex code</code> for the color green instead of the hex code <code>#00FF00</code>.");'
- text: Give your <code>h1</code> element with the text <code>I am cyan!</code> the <code>color</code> cyan.
testString: 'assert($(''.cyan-text'').css(''color'') === ''rgb(0, 255, 255)'', ''Give your <code>h1</code> element with the text <code>I am cyan!</code> the <code>color</code> cyan.'');'
testString: 'assert($(".cyan-text").css("color") === "rgb(0, 255, 255)", "Give your <code>h1</code> element with the text <code>I am cyan!</code> the <code>color</code> cyan.");'
- text: 'Use the abbreviated <code>hex code</code> for the color cyan instead of the hex code <code>#00FFFF</code>.'
testString: 'assert(code.match(/\.cyan-text\s*?{\s*?color:\s*?#0FF\s*?;\s*?}/gi), ''Use the abbreviated <code>hex code</code> for the color cyan instead of the hex code <code>#00FFFF</code>.'');'
testString: 'assert(code.match(/\.cyan-text\s*?{\s*?color:\s*?#0FF\s*?;\s*?}/gi), "Use the abbreviated <code>hex code</code> for the color cyan instead of the hex code <code>#00FFFF</code>.");'
- text: Give your <code>h1</code> element with the text <code>I am fuchsia!</code> the <code>color</code> fuchsia.
testString: 'assert($(''.fuchsia-text'').css(''color'') === ''rgb(255, 0, 255)'', ''Give your <code>h1</code> element with the text <code>I am fuchsia!</code> the <code>color</code> fuchsia.'');'
testString: 'assert($(".fuchsia-text").css("color") === "rgb(255, 0, 255)", "Give your <code>h1</code> element with the text <code>I am fuchsia!</code> the <code>color</code> fuchsia.");'
- text: 'Use the abbreviated <code>hex code</code> for the color fuchsia instead of the hex code <code>#FF00FF</code>.'
testString: 'assert(code.match(/\.fuchsia-text\s*?{\s*?color:\s*?#F0F\s*?;\s*?}/gi), ''Use the abbreviated <code>hex code</code> for the color fuchsia instead of the hex code <code>#FF00FF</code>.'');'
testString: 'assert(code.match(/\.fuchsia-text\s*?{\s*?color:\s*?#F0F\s*?;\s*?}/gi), "Use the abbreviated <code>hex code</code> for the color fuchsia instead of the hex code <code>#FF00FF</code>.");'
```

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

@ -25,13 +25,13 @@ Try giving your form, which now has the <code>id</code> attribute of <code>cat-p
```yml
tests:
- text: Give your <code>form</code> element the id of <code>cat-photo-form</code>.
testString: 'assert($("form").attr("id") === "cat-photo-form", ''Give your <code>form</code> element the id of <code>cat-photo-form</code>.'');'
testString: 'assert($("form").attr("id") === "cat-photo-form", "Give your <code>form</code> element the id of <code>cat-photo-form</code>.");'
- text: Your <code>form</code> element should have the <code>background-color</code> of green.
testString: 'assert($("#cat-photo-form").css("background-color") === "rgb(0, 128, 0)", ''Your <code>form</code> element should have the <code>background-color</code> of green.'');'
testString: 'assert($("#cat-photo-form").css("background-color") === "rgb(0, 128, 0)", "Your <code>form</code> element should have the <code>background-color</code> of green.");'
- text: Make sure your <code>form</code> element has an <code>id</code> attribute.
testString: 'assert(code.match(/<form.*cat-photo-form.*>/gi) && code.match(/<form.*cat-photo-form.*>/gi).length > 0, ''Make sure your <code>form</code> element has an <code>id</code> attribute.'');'
testString: 'assert(code.match(/<form.*cat-photo-form.*>/gi) && code.match(/<form.*cat-photo-form.*>/gi).length > 0, "Make sure your <code>form</code> element has an <code>id</code> attribute.");'
- text: Do not give your <code>form</code> any <code>class</code> or <code>style</code> attributes.
testString: 'assert(!code.match(/<form.*style.*>/gi) && !code.match(/<form.*class.*>/gi), ''Do not give your <code>form</code> any <code>class</code> or <code>style</code> attributes.'');'
testString: 'assert(!code.match(/<form.*style.*>/gi) && !code.match(/<form.*class.*>/gi), "Do not give your <code>form</code> any <code>class</code> or <code>style</code> attributes.");'
```
@ -77,9 +77,9 @@ tests:
<h2 class="red-text">CatPhotoApp</h2>
<main>
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<div class="silver-background">
<p>Things cats love:</p>
<ul>
@ -94,7 +94,7 @@ tests:
<li>other cats</li>
</ol>
</div>
<form action="/submit-cat-photo" id="cat-photo-form">
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>

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

@ -24,11 +24,11 @@ Using the <code>type</code> attribute selector, try to give the checkboxes in Ca
```yml
tests:
- text: The <code>type</code> attribute selector should be used to select the checkboxes.
testString: 'assert(code.match(/<style>[\s\S]*?\[type=("|'')checkbox\1\]\s*?{[\s\S]*?}[\s\S]*?<\/style>/gi),''The <code>type</code> attribute selector should be used to select the checkboxes.'');'
testString: 'assert(code.match(/<style>[\s\S]*?\[type=("|")checkbox\1\]\s*?{[\s\S]*?}[\s\S]*?<\/style>/gi),"The <code>type</code> attribute selector should be used to select the checkboxes.");'
- text: The top margins of the checkboxes should be 10px.
testString: 'assert((function() {var count=0; $("[type=''checkbox'']").each(function() { if($(this).css(''marginTop'') === ''10px'') {count++;}});return (count===3)}()),''The top margins of the checkboxes should be 10px.'');'
testString: 'assert((function() {var count=0; $("[type="checkbox"]").each(function() { if($(this).css("marginTop") === "10px") {count++;}});return (count===3)}()),"The top margins of the checkboxes should be 10px.");'
- text: The bottom margins of the checkboxes should be 15px.
testString: 'assert((function() {var count=0; $("[type=''checkbox'']").each(function() { if($(this).css(''marginBottom'') === ''15px'') {count++;}});return (count===3)}()),''The bottom margins of the checkboxes should be 15px.'');'
testString: 'assert((function() {var count=0; $("[type="checkbox"]").each(function() { if($(this).css("marginBottom") === "15px") {count++;}});return (count===3)}()),"The bottom margins of the checkboxes should be 15px.");'
```
@ -74,9 +74,9 @@ tests:
<h2 class="red-text">CatPhotoApp</h2>
<main>
<p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<div class="silver-background">
<p>Things cats love:</p>
<ul>
@ -91,7 +91,7 @@ tests:
<li>other cats</li>
</ol>
</div>
<form action="/submit-cat-photo" id="cat-photo-form">
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>

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

@ -24,13 +24,13 @@ Use <code>Clockwise Notation</code> to give the element with the <code>blue-box<
```yml
tests:
- text: Your <code>blue-box</code> class should give the top of elements <code>40px</code> of <code>margin</code>.
testString: 'assert($(".blue-box").css("margin-top") === "40px", ''Your <code>blue-box</code> class should give the top of elements <code>40px</code> of <code>margin</code>.'');'
testString: 'assert($(".blue-box").css("margin-top") === "40px", "Your <code>blue-box</code> class should give the top of elements <code>40px</code> of <code>margin</code>.");'
- text: Your <code>blue-box</code> class should give the right of elements <code>20px</code> of <code>margin</code>.
testString: 'assert($(".blue-box").css("margin-right") === "20px", ''Your <code>blue-box</code> class should give the right of elements <code>20px</code> of <code>margin</code>.'');'
testString: 'assert($(".blue-box").css("margin-right") === "20px", "Your <code>blue-box</code> class should give the right of elements <code>20px</code> of <code>margin</code>.");'
- text: Your <code>blue-box</code> class should give the bottom of elements <code>20px</code> of <code>margin</code>.
testString: 'assert($(".blue-box").css("margin-bottom") === "20px", ''Your <code>blue-box</code> class should give the bottom of elements <code>20px</code> of <code>margin</code>.'');'
testString: 'assert($(".blue-box").css("margin-bottom") === "20px", "Your <code>blue-box</code> class should give the bottom of elements <code>20px</code> of <code>margin</code>.");'
- text: Your <code>blue-box</code> class should give the left of elements <code>40px</code> of <code>margin</code>.
testString: 'assert($(".blue-box").css("margin-left") === "40px", ''Your <code>blue-box</code> class should give the left of elements <code>40px</code> of <code>margin</code>.'');'
testString: 'assert($(".blue-box").css("margin-left") === "40px", "Your <code>blue-box</code> class should give the left of elements <code>40px</code> of <code>margin</code>.");'
```
@ -59,7 +59,7 @@ tests:
background-color: yellow;
padding: 20px 40px 20px 40px;
}
.red-box {
background-color: crimson;
color: #fff;

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

@ -23,15 +23,15 @@ Use Clockwise Notation to give the ".blue-box" class a <code>padding</code> of <
```yml
tests:
- text: Your <code>blue-box</code> class should give the top of elements <code>40px</code> of <code>padding</code>.
testString: 'assert($(".blue-box").css("padding-top") === "40px", ''Your <code>blue-box</code> class should give the top of elements <code>40px</code> of <code>padding</code>.'');'
testString: 'assert($(".blue-box").css("padding-top") === "40px", "Your <code>blue-box</code> class should give the top of elements <code>40px</code> of <code>padding</code>.");'
- text: Your <code>blue-box</code> class should give the right of elements <code>20px</code> of <code>padding</code>.
testString: 'assert($(".blue-box").css("padding-right") === "20px", ''Your <code>blue-box</code> class should give the right of elements <code>20px</code> of <code>padding</code>.'');'
testString: 'assert($(".blue-box").css("padding-right") === "20px", "Your <code>blue-box</code> class should give the right of elements <code>20px</code> of <code>padding</code>.");'
- text: Your <code>blue-box</code> class should give the bottom of elements <code>20px</code> of <code>padding</code>.
testString: 'assert($(".blue-box").css("padding-bottom") === "20px", ''Your <code>blue-box</code> class should give the bottom of elements <code>20px</code> of <code>padding</code>.'');'
testString: 'assert($(".blue-box").css("padding-bottom") === "20px", "Your <code>blue-box</code> class should give the bottom of elements <code>20px</code> of <code>padding</code>.");'
- text: Your <code>blue-box</code> class should give the left of elements <code>40px</code> of <code>padding</code>.
testString: 'assert($(".blue-box").css("padding-left") === "40px", ''Your <code>blue-box</code> class should give the left of elements <code>40px</code> of <code>padding</code>.'');'
testString: 'assert($(".blue-box").css("padding-left") === "40px", "Your <code>blue-box</code> class should give the left of elements <code>40px</code> of <code>padding</code>.");'
- text: You should use the clockwise notation to set the padding of <code>blue-box</code> class.
testString: 'assert(!/padding-top|padding-right|padding-bottom|padding-left/.test(code), ''You should use the clockwise notation to set the padding of <code>blue-box</code> class.'');'
testString: 'assert(!/padding-top|padding-right|padding-bottom|padding-left/.test(code), "You should use the clockwise notation to set the padding of <code>blue-box</code> class.");'
```
@ -60,7 +60,7 @@ tests:
background-color: yellow;
padding: 20px 40px 20px 40px;
}
.red-box {
background-color: crimson;
color: #fff;

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

@ -28,15 +28,15 @@ Delete your <code>h2</code> element's style attribute, and instead create a CSS
```yml
tests:
- text: Remove the style attribute from your <code>h2</code> element.
testString: 'assert(!$("h2").attr("style"), ''Remove the style attribute from your <code>h2</code> element.'');'
testString: 'assert(!$("h2").attr("style"), "Remove the style attribute from your <code>h2</code> element.");'
- text: Create a <code>style</code> element.
testString: 'assert($("style") && $("style").length > 1, ''Create a <code>style</code> element.'');'
testString: 'assert($("style") && $("style").length > 1, "Create a <code>style</code> element.");'
- text: Your <code>h2</code> element should be blue.
testString: 'assert($("h2").css("color") === "rgb(0, 0, 255)", ''Your <code>h2</code> element should be blue.'');'
testString: 'assert($("h2").css("color") === "rgb(0, 0, 255)", "Your <code>h2</code> element should be blue.");'
- text: Ensure that your stylesheet <code>h2</code> declaration is valid with a semicolon and closing brace.
testString: 'assert(code.match(/h2\s*\{\s*color\s*:.*;\s*\}/g), ''Ensure that your stylesheet <code>h2</code> declaration is valid with a semicolon and closing brace.'');'
testString: 'assert(code.match(/h2\s*\{\s*color\s*:.*;\s*\}/g), "Ensure that your stylesheet <code>h2</code> declaration is valid with a semicolon and closing brace.");'
- text: Make sure all your <code>style</code> elements are valid and have a closing tag.
testString: 'assert(code.match(/<\/style>/g) && code.match(/<\/style>/g).length === (code.match(/<style((\s)*((type|media|scoped|title|disabled)="[^"]*")?(\s)*)*>/g) || []).length, ''Make sure all your <code>style</code> elements are valid and have a closing tag.'');'
testString: 'assert(code.match(/<\/style>/g) && code.match(/<\/style>/g).length === (code.match(/<style((\s)*((type|media|scoped|title|disabled)="[^"]*")?(\s)*)*>/g) || []).length, "Make sure all your <code>style</code> elements are valid and have a closing tag.");'
```
@ -51,9 +51,9 @@ tests:
<h2 style="color: red">CatPhotoApp</h2>
<main>
<p>Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<div>
<p>Things cats love:</p>
<ul>
@ -68,7 +68,7 @@ tests:
<li>other cats</li>
</ol>
</div>
<form action="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>

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

@ -22,11 +22,11 @@ In the <code>penguin</code> class, change the <code>black</code> value to <code>
```yml
tests:
- text: <code>penguin</code> class should declare the <code>--penguin-skin</code> variable and assign it to <code>gray</code>.
testString: 'assert(code.match(/.penguin\s*?{[\s\S]*--penguin-skin\s*?:\s*?gray\s*?;[\s\S]*}/gi), ''<code>penguin</code> class should declare the <code>--penguin-skin</code> variable and assign it to <code>gray</code>.'');'
testString: 'assert(code.match(/.penguin\s*?{[\s\S]*--penguin-skin\s*?:\s*?gray\s*?;[\s\S]*}/gi), "<code>penguin</code> class should declare the <code>--penguin-skin</code> variable and assign it to <code>gray</code>.");'
- text: <code>penguin</code> class should declare the <code>--penguin-belly</code> variable and assign it to <code>white</code>.
testString: 'assert(code.match(/.penguin\s*?{[\s\S]*--penguin-belly\s*?:\s*?white\s*?;[\s\S]*}/gi), ''<code>penguin</code> class should declare the <code>--penguin-belly</code> variable and assign it to <code>white</code>.'');'
testString: 'assert(code.match(/.penguin\s*?{[\s\S]*--penguin-belly\s*?:\s*?white\s*?;[\s\S]*}/gi), "<code>penguin</code> class should declare the <code>--penguin-belly</code> variable and assign it to <code>white</code>.");'
- text: <code>penguin</code> class should declare the <code>--penguin-beak</code> variable and assign it to <code>orange</code>.
testString: 'assert(code.match(/.penguin\s*?{[\s\S]*--penguin-beak\s*?:\s*?orange\s*?;[\s\S]*}/gi), ''<code>penguin</code> class should declare the <code>--penguin-beak</code> variable and assign it to <code>orange</code>.'');'
testString: 'assert(code.match(/.penguin\s*?{[\s\S]*--penguin-beak\s*?:\s*?orange\s*?;[\s\S]*}/gi), "<code>penguin</code> class should declare the <code>--penguin-beak</code> variable and assign it to <code>orange</code>.");'
```
@ -40,13 +40,13 @@ tests:
```html
<style>
.penguin {
/* change code below */
--penguin-skin: black;
--penguin-belly: gray;
--penguin-beak: yellow;
/* change code above */
position: relative;
margin: auto;
display: block;
@ -54,7 +54,7 @@ tests:
width: 300px;
height: 300px;
}
.penguin-top {
top: 10%;
left: 25%;
@ -63,7 +63,7 @@ tests:
height: 45%;
border-radius: 70% 70% 60% 60%;
}
.penguin-bottom {
top: 40%;
left: 23.5%;
@ -72,7 +72,7 @@ tests:
height: 45%;
border-radius: 70% 70% 100% 100%;
}
.right-hand {
top: 0%;
left: -5%;
@ -83,7 +83,7 @@ tests:
transform: rotate(45deg);
z-index: -1;
}
.left-hand {
top: 0%;
left: 75%;
@ -94,7 +94,7 @@ tests:
transform: rotate(-45deg);
z-index: -1;
}
.right-cheek {
top: 15%;
left: 35%;
@ -103,7 +103,7 @@ tests:
height: 70%;
border-radius: 70% 70% 60% 60%;
}
.left-cheek {
top: 15%;
left: 5%;
@ -112,7 +112,7 @@ tests:
height: 70%;
border-radius: 70% 70% 60% 60%;
}
.belly {
top: 60%;
left: 2.5%;
@ -121,7 +121,7 @@ tests:
height: 100%;
border-radius: 120% 120% 100% 100%;
}
.right-feet {
top: 85%;
left: 60%;
@ -130,9 +130,9 @@ tests:
height: 30%;
border-radius: 50% 50% 50% 50%;
transform: rotate(-80deg);
z-index: -2222;
z-index: -2222;
}
.left-feet {
top: 85%;
left: 25%;
@ -141,76 +141,76 @@ tests:
height: 30%;
border-radius: 50% 50% 50% 50%;
transform: rotate(80deg);
z-index: -2222;
z-index: -2222;
}
.right-eye {
top: 45%;
left: 60%;
background: black;
width: 15%;
height: 17%;
border-radius: 50%;
border-radius: 50%;
}
.left-eye {
top: 45%;
left: 25%;
background: black;
width: 15%;
height: 17%;
border-radius: 50%;
border-radius: 50%;
}
.sparkle {
top: 25%;
left: 15%;
background: white;
width: 35%;
height: 35%;
border-radius: 50%;
border-radius: 50%;
}
.blush-right {
top: 65%;
left: 15%;
background: pink;
width: 15%;
height: 10%;
border-radius: 50%;
border-radius: 50%;
}
.blush-left {
top: 65%;
left: 70%;
background: pink;
width: 15%;
height: 10%;
border-radius: 50%;
border-radius: 50%;
}
.beak-top {
top: 60%;
left: 40%;
background: var(--penguin-beak, orange);
width: 20%;
height: 10%;
border-radius: 50%;
border-radius: 50%;
}
.beak-bottom {
top: 65%;
left: 42%;
background: var(--penguin-beak, orange);
width: 16%;
height: 10%;
border-radius: 50%;
border-radius: 50%;
}
body {
background:#c6faf1;
}
.penguin * {
position: absolute;
}

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

@ -24,9 +24,9 @@ Replace the word <code>black</code> in our <code>body</code> element's backgroun
```yml
tests:
- text: Give your <code>body</code> element the background-color of black.
testString: 'assert($("body").css("background-color") === "rgb(0, 0, 0)", ''Give your <code>body</code> element the background-color of black.'');'
testString: 'assert($("body").css("background-color") === "rgb(0, 0, 0)", "Give your <code>body</code> element the background-color of black.");'
- text: Use the <code>hex code</code> for the color black instead of the word <code>black</code>.
testString: 'assert(code.match(/body\s*{(([\s\S]*;\s*?)|\s*?)background.*\s*:\s*?#000(000)?((\s*})|(;[\s\S]*?}))/gi), ''Use the <code>hex code</code> for the color black instead of the word <code>black</code>.'');'
testString: 'assert(code.match(/body\s*{(([\s\S]*;\s*?)|\s*?)background.*\s*:\s*?#000(000)?((\s*})|(;[\s\S]*?}))/gi), "Use the <code>hex code</code> for the color black instead of the word <code>black</code>.");'
```

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

@ -26,21 +26,21 @@ Replace the color words in our <code>style</code> element with their correct hex
```yml
tests:
- text: Give your <code>h1</code> element with the text <code>I am red!</code> the <code>color</code> red.
testString: 'assert($(''.red-text'').css(''color'') === ''rgb(255, 0, 0)'', ''Give your <code>h1</code> element with the text <code>I am red!</code> the <code>color</code> red.'');'
testString: 'assert($(".red-text").css("color") === "rgb(255, 0, 0)", "Give your <code>h1</code> element with the text <code>I am red!</code> the <code>color</code> red.");'
- text: Use the <code>hex code</code> for the color red instead of the word <code>red</code>.
testString: 'assert(code.match(/\.red-text\s*?{\s*?color:\s*?#FF0000\s*?;\s*?}/gi), ''Use the <code>hex code</code> for the color red instead of the word <code>red</code>.'');'
testString: 'assert(code.match(/\.red-text\s*?{\s*?color:\s*?#FF0000\s*?;\s*?}/gi), "Use the <code>hex code</code> for the color red instead of the word <code>red</code>.");'
- text: Give your <code>h1</code> element with the text <code>I am green!</code> the <code>color</code> green.
testString: 'assert($(''.green-text'').css(''color'') === ''rgb(0, 255, 0)'', ''Give your <code>h1</code> element with the text <code>I am green!</code> the <code>color</code> green.'');'
testString: 'assert($(".green-text").css("color") === "rgb(0, 255, 0)", "Give your <code>h1</code> element with the text <code>I am green!</code> the <code>color</code> green.");'
- text: Use the <code>hex code</code> for the color green instead of the word <code>green</code>.
testString: 'assert(code.match(/\.green-text\s*?{\s*?color:\s*?#00FF00\s*?;\s*?}/gi), ''Use the <code>hex code</code> for the color green instead of the word <code>green</code>.'');'
testString: 'assert(code.match(/\.green-text\s*?{\s*?color:\s*?#00FF00\s*?;\s*?}/gi), "Use the <code>hex code</code> for the color green instead of the word <code>green</code>.");'
- text: Give your <code>h1</code> element with the text <code>I am dodger blue!</code> the <code>color</code> dodger blue.
testString: 'assert($(''.dodger-blue-text'').css(''color'') === ''rgb(30, 144, 255)'', ''Give your <code>h1</code> element with the text <code>I am dodger blue!</code> the <code>color</code> dodger blue.'');'
testString: 'assert($(".dodger-blue-text").css("color") === "rgb(30, 144, 255)", "Give your <code>h1</code> element with the text <code>I am dodger blue!</code> the <code>color</code> dodger blue.");'
- text: Use the <code>hex code</code> for the color dodger blue instead of the word <code>dodgerblue</code>.
testString: 'assert(code.match(/\.dodger-blue-text\s*?{\s*?color:\s*?#1E90FF\s*?;\s*?}/gi), ''Use the <code>hex code</code> for the color dodger blue instead of the word <code>dodgerblue</code>.'');'
testString: 'assert(code.match(/\.dodger-blue-text\s*?{\s*?color:\s*?#1E90FF\s*?;\s*?}/gi), "Use the <code>hex code</code> for the color dodger blue instead of the word <code>dodgerblue</code>.");'
- text: Give your <code>h1</code> element with the text <code>I am orange!</code> the <code>color</code> orange.
testString: 'assert($(''.orange-text'').css(''color'') === ''rgb(255, 165, 0)'', ''Give your <code>h1</code> element with the text <code>I am orange!</code> the <code>color</code> orange.'');'
testString: 'assert($(".orange-text").css("color") === "rgb(255, 165, 0)", "Give your <code>h1</code> element with the text <code>I am orange!</code> the <code>color</code> orange.");'
- text: Use the <code>hex code</code> for the color orange instead of the word <code>orange</code>.
testString: 'assert(code.match(/\.orange-text\s*?{\s*?color:\s*?#FFA500\s*?;\s*?}/gi), ''Use the <code>hex code</code> for the color orange instead of the word <code>orange</code>.'');'
testString: 'assert(code.match(/\.orange-text\s*?{\s*?color:\s*?#FFA500\s*?;\s*?}/gi), "Use the <code>hex code</code> for the color orange instead of the word <code>orange</code>.");'
```

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

@ -22,21 +22,21 @@ Replace the hex codes in our <code>style</code> element with their correct RGB v
```yml
tests:
- text: Give your <code>h1</code> element with the text <code>I am red!</code> the <code>color</code> red.
testString: 'assert($(''.red-text'').css(''color'') === ''rgb(255, 0, 0)'', ''Give your <code>h1</code> element with the text <code>I am red!</code> the <code>color</code> red.'');'
testString: 'assert($(".red-text").css("color") === "rgb(255, 0, 0)", "Give your <code>h1</code> element with the text <code>I am red!</code> the <code>color</code> red.");'
- text: Use <code>rgb</code> for the color red.
testString: 'assert(code.match(/\.red-text\s*?{\s*?color:\s*?rgb\(\s*?255\s*?,\s*?0\s*?,\s*?0\s*?\)\s*?;\s*?}/gi), ''Use <code>rgb</code> for the color red.'');'
testString: 'assert(code.match(/\.red-text\s*?{\s*?color:\s*?rgb\(\s*?255\s*?,\s*?0\s*?,\s*?0\s*?\)\s*?;\s*?}/gi), "Use <code>rgb</code> for the color red.");'
- text: Give your <code>h1</code> element with the text <code>I am orchid!</code> the <code>color</code> orchid.
testString: 'assert($(''.orchid-text'').css(''color'') === ''rgb(218, 112, 214)'', ''Give your <code>h1</code> element with the text <code>I am orchid!</code> the <code>color</code> orchid.'');'
testString: 'assert($(".orchid-text").css("color") === "rgb(218, 112, 214)", "Give your <code>h1</code> element with the text <code>I am orchid!</code> the <code>color</code> orchid.");'
- text: Use <code>rgb</code> for the color orchid.
testString: 'assert(code.match(/\.orchid-text\s*?{\s*?color:\s*?rgb\(\s*?218\s*?,\s*?112\s*?,\s*?214\s*?\)\s*?;\s*?}/gi), ''Use <code>rgb</code> for the color orchid.'');'
testString: 'assert(code.match(/\.orchid-text\s*?{\s*?color:\s*?rgb\(\s*?218\s*?,\s*?112\s*?,\s*?214\s*?\)\s*?;\s*?}/gi), "Use <code>rgb</code> for the color orchid.");'
- text: Give your <code>h1</code> element with the text <code>I am blue!</code> the <code>color</code> blue.
testString: 'assert($(''.blue-text'').css(''color'') === ''rgb(0, 0, 255)'', ''Give your <code>h1</code> element with the text <code>I am blue!</code> the <code>color</code> blue.'');'
testString: 'assert($(".blue-text").css("color") === "rgb(0, 0, 255)", "Give your <code>h1</code> element with the text <code>I am blue!</code> the <code>color</code> blue.");'
- text: Use <code>rgb</code> for the color blue.
testString: 'assert(code.match(/\.blue-text\s*?{\s*?color:\s*?rgb\(\s*?0\s*?,\s*?0\s*?,\s*?255\s*?\)\s*?;\s*?}/gi), ''Use <code>rgb</code> for the color blue.'');'
testString: 'assert(code.match(/\.blue-text\s*?{\s*?color:\s*?rgb\(\s*?0\s*?,\s*?0\s*?,\s*?255\s*?\)\s*?;\s*?}/gi), "Use <code>rgb</code> for the color blue.");'
- text: Give your <code>h1</code> element with the text <code>I am sienna!</code> the <code>color</code> sienna.
testString: 'assert($(''.sienna-text'').css(''color'') === ''rgb(160, 82, 45)'', ''Give your <code>h1</code> element with the text <code>I am sienna!</code> the <code>color</code> sienna.'');'
testString: 'assert($(".sienna-text").css("color") === "rgb(160, 82, 45)", "Give your <code>h1</code> element with the text <code>I am sienna!</code> the <code>color</code> sienna.");'
- text: Use <code>rgb</code> for the color sienna.
testString: 'assert(code.match(/\.sienna-text\s*?{\s*?color:\s*?rgb\(\s*?160\s*?,\s*?82\s*?,\s*?45\s*?\)\s*?;\s*?}/gi), ''Use <code>rgb</code> for the color sienna.'');'
testString: 'assert(code.match(/\.sienna-text\s*?{\s*?color:\s*?rgb\(\s*?160\s*?,\s*?82\s*?,\s*?45\s*?\)\s*?;\s*?}/gi), "Use <code>rgb</code> for the color sienna.");'
```

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

@ -29,9 +29,9 @@ Let's replace the hex code in our <code>body</code> element's background color w
```yml
tests:
- text: Your <code>body</code> element should have a black background.
testString: 'assert($("body").css("background-color") === "rgb(0, 0, 0)", ''Your <code>body</code> element should have a black background.'');'
testString: 'assert($("body").css("background-color") === "rgb(0, 0, 0)", "Your <code>body</code> element should have a black background.");'
- text: Use <code>rgb</code> to give your <code>body</code> element a color of black.
testString: 'assert(code.match(/rgb\s*\(\s*0\s*,\s*0\s*,\s*0\s*\)/ig), ''Use <code>rgb</code> to give your <code>body</code> element a color of black.'');'
testString: 'assert(code.match(/rgb\s*\(\s*0\s*,\s*0\s*,\s*0\s*\)/ig), "Use <code>rgb</code> to give your <code>body</code> element a color of black.");'
```