return(true);",
+ " if (1 === 2) {",
+ " return true;",
"}",
"else {",
- " return(false);",
+ " return false;",
"}",
"Let's use if and else statements to make a coin-flip game.",
- "Create an if-else statement to return heads if the flip var is zero and to return tails if it's not."
+ "Create an if-else statement to return heads if the flip var is zero, or else return tails if it's not."
],
"tests":[
- "assert((function(){if(myFunction() === \"heads\" || myFunction() === \"tails\"){return(true);}else{return(false);}})(), 'myFunction should either return heads or tails');",
+ "assert((function(){if(myFunction() === \"heads\" || myFunction() === \"tails\"){return true;}else{return false;}})(), 'myFunction should either return heads or tails');",
"assert(editor.getValue().match(/if/g).length >= 3, 'You should have created a new if statement');",
"assert(editor.getValue().match(/else/g).length >= 2, 'You should have created a new else statement');"
],
"challengeSeed":[
"function myFunction(){",
" var flip = Math.floor(Math.random() * (1 - 0 + 1)) + 0;",
- " // Create and if else statement here to return \"heads\" if flip is 0. Otherwise return \"tails\".",
+ " // Create an if-else statement here to return \"heads\" if flip is 0. Otherwise return \"tails\".",
"",
" // Only change code below this line.",
"",
@@ -982,7 +989,7 @@
"",
"// Only change code above this line.",
"// We use this function to show you the value of your variable in your output box.",
- "(function(){return(myFunction());})();"
+ "(function(){return myFunction();})();"
],
"type": "waypoint",
"challengeType": 1
@@ -992,7 +999,7 @@
"title": "Sift through Text with Regular Expressions",
"difficulty":"9.984",
"description":[
- "Regular expressions are way to find certain words or patterns inside of strings.",
+ "Regular expressions are used to find certain words or patterns inside of strings.",
"For example, if we wanted to find the number of times the word the occurred in the string The dog chased the cat, we could use the following regular expression: \/the+\/gi",
"Let's break this down a bit:",
"the is the pattern we want to match.",
@@ -1000,7 +1007,7 @@
"g means that we want to search the entire string for this pattern.",
"i means that we want to ignore the case (uppercase or lowercase) when searching for the pattern.",
"Regular expressions are usually surrounded by / symbols.",
- "Let's try selecting all the occurances of the word and in the string George Boole and Alan Turing went to the shop and got some milk. We can do this by replacing the .+ part of our regular expression with the current regular expression with the word and."
+ "Let's try selecting all the occurrences of the word and in the string George Boole and Alan Turing went to the shop and got some milk. We can do this by replacing the . part of our regular expression with the word and."
],
"tests":[
"assert(test==2, 'Your regular expression should find two occurrences of the word and');",
@@ -1016,8 +1023,8 @@
"",
" // Only change code above this line.",
" // We use this function to show you the value of your variable in your output box.",
- " return(testString.match(expression).length);",
- "})();(function(){return(test);})();"
+ " return testString.match(expression).length;",
+ "})();(function(){return test;})();"
],
"type": "waypoint",
"challengeType": 1
@@ -1034,11 +1041,11 @@
],
"tests":[
"assert(test === 2, 'Your RegEx should have found two numbers in the testString');",
- "assert(editor.getValue().match(/\\/\\\\d\\+\\//gi), 'You should be using the following expression /\\d+/gi to find the numbers in the testString');"
+ "assert(editor.getValue().match(/\\/\\\\d\\+\\//gi), 'You should be using the following expression /\\\\d+/gi to find the numbers in the testString');"
],
"challengeSeed":[
"var test = (function() {",
- " var testString = \"There's 3 cats but 4 dogs.\";",
+ " var testString = \"There are 3 cats but 4 dogs.\";",
"",
" // Only change code below this line.",
"",
@@ -1046,8 +1053,8 @@
"",
" // Only change code above this line.",
" // We use this function to show you the value of your variable in your output box.",
- " return(testString.match(expression).length);",
- "})();(function(){return(test);})();"
+ " return testString.match(expression).length;",
+ "})();(function(){return test;})();"
],
"type": "waypoint",
"challengeType": 1
@@ -1064,7 +1071,7 @@
],
"tests":[
"assert(test === 7, 'Your RegEx should have found seven spaces in the testString.');",
- "assert(editor.getValue().match(/\\/\\\\s\\+\\//gi), 'You should be using the following expression /\\s+/gi to find the spaces in the testString.');"
+ "assert(editor.getValue().match(/\\/\\\\s\\+\\//gi), 'You should be using the following expression /\\\\s+/gi to find the spaces in the testString.');"
],
"challengeSeed":[
"var test = (function(){",
@@ -1076,8 +1083,8 @@
"",
" // Only change code above this line.",
" // We use this function to show you the value of your variable in your output box.",
- " return(testString.match(expression).length);",
- "})();(function(){return(test);})();"
+ " return testString.match(expression).length;",
+ "})();(function(){return test;})();"
],
"type": "waypoint",
"challengeType": 1
@@ -1091,12 +1098,12 @@
"You can invert any match by using the uppercase version of the selector \\s versus \\S for example."
],
"tests":[
- "assert(test === 36, 'Your RegEx should have found seven spaces in the testString.');",
- "assert(editor.getValue().match(/\\/\\\\S\\/gi/gi), 'You should be using the following expression /\\S+/gi to find the spaces in the testString.');"
+ "assert(test === 49, 'Your RegEx should have found forty nine non-space characters in the testString.');",
+ "assert(editor.getValue().match(/\\/\\\\S\\/gi/gi), 'You should be using the following expression /\\\\S/gi to find non-space characters in the testString.');"
],
"challengeSeed":[
"var test = (function(){",
- " var testString = \"How many spaces are there in this sentence?\";",
+ " var testString = \"How many non-space characters are there in this sentence?\";",
"",
" // Only change code below this line.",
"",
@@ -1104,8 +1111,8 @@
"",
" // Only change code above this line.",
" // We use this function to show you the value of your variable in your output box.",
- " return(testString.match(expression).length);",
- "})();(function(){return(test);})();"
+ " return testString.match(expression).length;",
+ "})();(function(){return test;})();"
],
"type": "waypoint",
"challengeType":1
@@ -1125,7 +1132,7 @@
"assert(typeof(runSlots($(\".slot\"))[0]) === \"number\", 'slotOne should be a random number.')",
"assert(typeof(runSlots($(\".slot\"))[1]) === \"number\", 'slotTwo should be a random number.')",
"assert(typeof(runSlots($(\".slot\"))[2]) === \"number\", 'slotThree should be a random number.')",
- "assert((function(){if(editor.match(/Math\\.floor\\(\\s?Math\\.random\\(\\)\\s?\\*\\s?\\(\\s?3\\s?\\-\\s?1\\s?\\+\\s?1\\s?\\)\\s?\\)\\s?\\+\\s?1;/gi) !== null){return(editor.match(/Math\\.floor\\(\\s?Math\\.random\\(\\)\\s?\\*\\s?\\(\\s?3\\s?\\-\\s?1\\s?\\+\\s?1\\s?\\)\\s?\\)\\s?\\+\\s?1;/gi).length >= 3);}else{return(false);}})(), 'You should have used Math.floor(Math.random() * (3 - 1 + 1)) + 1; three times to generate your random numbers.')"
+ "assert((function(){if(editor.match(/Math\\.floor\\(\\s?Math\\.random\\(\\)\\s?\\*\\s?\\(\\s?3\\s?\\-\\s?1\\s?\\+\\s?1\\s?\\)\\s?\\)\\s?\\+\\s?1;/gi) !== null){return editor.match(/Math\\.floor\\(\\s?Math\\.random\\(\\)\\s?\\*\\s?\\(\\s?3\\s?\\-\\s?1\\s?\\+\\s?1\\s?\\)\\s?\\)\\s?\\+\\s?1;/gi).length >= 3;}else{return false;}})(), 'You should have used Math.floor(Math.random() * (3 - 1 + 1)) + 1; three times to generate your random numbers.')"
],
"challengeSeed":[
"fccss",
@@ -1148,7 +1155,7 @@
" if(slotOne !== undefined && slotTwo !== undefined && slotThree !== undefined){",
" $(\".logger\").html(slotOne + \" \" + slotTwo + \" \" + slotThree);",
" }",
- " return([slotOne, slotTwo, slotThree]);",
+ " return [slotOne, slotTwo, slotThree];",
" }",
"",
" $(document).ready(function(){",
@@ -1272,14 +1279,14 @@
"Now that our slots will each generate random numbers, we need to check whether they've all returned the same number.",
"If they have, we should notify our user that they've won.",
"Otherwise, we should return null, which is a JavaScript data structure that means nothing.",
- "If all three numbers match, we should change the value of win to the number that we have three of or leave it as null.",
+ "If all three numbers match, we should return the number that we have in three of slots or leave it as null.",
"Let's create an if statement with multiple conditions in order to check whether all numbers are equal.",
"if(slotOne !== slotTwo || slotTwo !== slotThree){",
- " return(null);",
+ " return null;",
"}"
],
"tests":[
- "assert((function(){var data = runSlots();if(data === null){return(true)}else{if(data[0] === data[1] && data[1] === data[2]){return(true);}else{return(false);}}})(), 'If all three of our random numbers are the same we should return that number. Otherwise we should return null.')"
+ "assert((function(){var data = runSlots();if(data === null){return true}else{if(data[0] === data[1] && data[1] === data[2]){return true;}else{return false;}}})(), 'If all three of our random numbers are the same we should return that number. Otherwise we should return null.')"
],
"challengeSeed":[
"fccss",
@@ -1308,7 +1315,7 @@
" $(\".logger\").append(\" \" + slotTwo);",
" $(\".logger\").append(\" \" + slotThree);",
" }",
- " return([slotOne, slotTwo, slotThree]);",
+ " return [slotOne, slotTwo, slotThree];",
" }",
"",
" $(document).ready(function(){",
@@ -1437,8 +1444,8 @@
"Use the above selector to display each number in its corresponding slot."
],
"tests":[
- "assert((function(){runSlots();if($($(\".slot\")[0]).html().replace(/\\s/gi, \"\") !== \"\" && $($(\".slot\")[1]).html().replace(/\\s/gi, \"\") !== \"\" && $($(\".slot\")[2]).html().replace(/\\s/gi, \"\") !== \"\"){return(true);}else{return(false);}})(), 'You should be displaying the result of the slot numbers in the corresponding slots')",
- "assert((function(){if(editor.match( /\\$\\(\\$\\(\\\"\\.slot\\\"\\)\\[\\d\\]\\)/gi )){if(editor.match( /\\$\\(\\$\\(\\\"\\.slot\\\"\\)\\[\\d\\]\\)/gi ).length >= 3 && editor.match( /\\.html\\(slotOne\\)/gi ) && editor.match( /\\.html\\(slotTwo\\)/gi ) && editor.match( /\\.html\\(slotThree\\)/gi )){return(true);}else{return(false);}}else{return(false);}})(), 'You should have used the the selector given in the description to select each slot and assign it the value of slotOne, slotTwo and slotThree respectively')"
+ "assert((function(){runSlots();if($($(\".slot\")[0]).html().replace(/\\s/gi, \"\") !== \"\" && $($(\".slot\")[1]).html().replace(/\\s/gi, \"\") !== \"\" && $($(\".slot\")[2]).html().replace(/\\s/gi, \"\") !== \"\"){return true;}else{return false;}})(), 'You should be displaying the result of the slot numbers in the corresponding slots')",
+ "assert((function(){if(editor.match( /\\$\\(\\$\\(\\\"\\.slot\\\"\\)\\[\\d\\]\\)/gi )){if(editor.match( /\\$\\(\\$\\(\\\"\\.slot\\\"\\)\\[\\d\\]\\)/gi ).length >= 3 && editor.match( /\\.html\\(slotOne\\)/gi ) && editor.match( /\\.html\\(slotTwo\\)/gi ) && editor.match( /\\.html\\(slotThree\\)/gi )){return true;}else{return false;}}else{return false;}})(), 'You should have used the the selector given in the description to select each slot and assign it the value of slotOne, slotTwo and slotThree respectively')"
],
"challengeSeed":[
"fccss",
@@ -1463,7 +1470,7 @@
" // Only change code above this line.",
" ",
" if(slotOne !== slotTwo || slotTwo !== slotThree){",
- " return(null);",
+ " return null;",
" }",
" ",
" if(slotOne !== undefined && slotTwo !== undefined && slotThree !== undefined){",
@@ -1472,7 +1479,7 @@
" $(\".logger\").append(\" \" + slotThree);",
" }",
" ",
- " return([slotOne, slotTwo, slotThree]);",
+ " return [slotOne, slotTwo, slotThree];",
" }",
"",
" $(document).ready(function(){",
@@ -1602,7 +1609,7 @@
"Set up all three slots like this, then click the \"Go\" button to play the slot machine."
],
"tests":[
- "assert(editor.match(/\\$\\(\\$\\(\\'\\.slot\\'\\)\\[\\d\\]\\)\\.html\\(\\'\\<a target='_blank'&rt;.",
+ "Note that CodePen.io overrides the Window.open() function, so if you want to open windows using jquery, you will need to target invisible anchor elements like this one: <a target='_blank'>.",
"Remember to use Read-Search-Ask if you get stuck.",
"When you are finished, click the \"I've completed this challenge\" button and include a link to your CodePen. If you pair programmed, you should also include the Free Code Camp username of your pair.",
"If you'd like immediate feedback on your project, click this button and paste in a link to your CodePen project. Otherwise, we'll review it before you start your nonprofit projects.
Click here then add your link to your tweet's text"
@@ -183,9 +184,10 @@
"User Story: As a user, I can click the status output and be sent directly to the Free Code Camp's Twitch.tv channel.",
"User Story: As a user, if Free Code Camp is streaming, I can see additional details about what they are streaming.",
"Bonus User Story: As a user, I can search through the streams listed.",
+ "Bonus User Story: As a user, I will see a placeholder notification if a streamer has closed their Twitch account. You can verify this works by adding brunofin and comster404 to your array of Twitch streamers.",
"Hint: Here's an example call to Twitch.tv's JSON API: https://api.twitch.tv/kraken/streams/freecodecamp.",
"Hint: The relevant documentation about this API call is here: https://github.com/justintv/Twitch-API/blob/master/v3_resources/streams.md#get-streamschannel.",
- "Hint: Here's an array of the Twitch.tv usernames of people who regularly stream coding: [\"freecodecamp\", \"storbeck\", \"terakilobyte\", \"habathcx\",\"RobotCaleb\",\"comster404\",\"brunofin\",\"thomasballinger\",\"noobs2ninjas\",\"beohoff\"]",
+ "Hint: Here's an array of the Twitch.tv usernames of people who regularly stream coding: [\"freecodecamp\", \"storbeck\", \"terakilobyte\", \"habathcx\",\"RobotCaleb\",\"thomasballinger\",\"noobs2ninjas\",\"beohoff\"]",
"Remember to use Read-Search-Ask if you get stuck.",
"When you are finished, click the \"I've completed this challenge\" button and include a link to your CodePen. If you pair programmed, you should also include the Free Code Camp username of your pair.",
"If you'd like immediate feedback on your project, click this button and paste in a link to your CodePen project. Otherwise, we'll review it before you start your nonprofit projects.
Click here then add your link to your tweet's text"
diff --git a/challenges/bootstrap.json b/challenges/bootstrap.json
index 8d1ed23a7f1..5f5d0ff63e7 100644
--- a/challenges/bootstrap.json
+++ b/challenges/bootstrap.json
@@ -133,7 +133,7 @@
"",
" Click here for cat photos.
",
"",
- " ![](\"https://bit.ly/fcc-relaxing-cat\")
",
+ " ![](\"http://bit.ly/fcc-relaxing-cat\")
",
"",
" Things cats love:
",
" ",
@@ -176,8 +176,8 @@
"title": "Center Text with Bootstrap",
"difficulty": 2.03,
"description": [
- "Now that we're using Bootstrap, we can center our heading elements to make them look better. All we need to do is add the class text-center to our h1 and h2 elements.",
- "Remember that you can add several classes to the same element by separating each of them with a space, like this: <h2 class=\"text-red text-center\">your text</h2>."
+ "Now that we're using Bootstrap, we can center our heading element to make it look better. All we need to do is add the class text-center to our h2 element.",
+ "Remember that you can add several classes to the same element by separating each of them with a space, like this: <h2 class=\"red-text text-center\">your text</h2>."
],
"tests": [
"assert($(\"h2\").hasClass(\"text-center\"), 'Your h2 element should be centered by applying the class text-center')"
@@ -347,7 +347,7 @@
"description": [
"Normally, your button elements are only as wide as the text that they contain. By making them block elements, your button will stretch to fill your page's entire horizontal space.",
"This image illustrates the difference between inline elements and block-level elements:",
- "![\"An](\"https://www.evernote.com/l/AHTFU358y71AV6mokPeuTEgrZVdUJ4A8v3AB/image.png\")
",
+ "![\"An](\"http://i.imgur.com/O32cDWE.png\")
",
"Note that these buttons still need the btn class.",
"Add Bootstrap's btn-block class to your Bootstrap button."
],
@@ -614,7 +614,7 @@
"Note that these buttons still need the btn and btn-block classes."
],
"tests": [
- "assert(new RegExp(\"delete\",\"gi\").test($(\"button\").text()), 'Create a new button element with the text \"delete\".')",
+ "assert(new RegExp(\"Delete\",\"gi\").test($(\"button\").text()), 'Create a new button element with the text \"Delete\".')",
"assert($(\"button.btn-block.btn\").length > 2, 'All of your Bootstrap buttons should have the btn and btn-block classes.')",
"assert($(\"button\").hasClass(\"btn-danger\"), 'Your new button should have the class btn-danger.')",
"assert(editor.match(/<\\/button>/g) && editor.match(/
elements have a closing tag.')"
@@ -700,7 +700,7 @@
"description": [
"Bootstrap uses a responsive grid system, which makes it easy to put elements into rows and specify each element's relative width. Most of Bootstrap's classes can be applied to a div element.",
"Here's a diagram of how Bootstrap's 12-column grid layout works:",
- "![](\"https://www.evernote.com/l/AHTwlE2XCLhGFYJzoye_QfsF3ho6y87via4B/image.png\")
",
+ "![\"an](\"http://i.imgur.com/FaYuui8.png\")
",
"Note that in this illustration, the col-md-* class is being used. Here, md means medium, and * is a number specifying how many columns wide the element should be. In this case, the column width of an element on a medium-sized screen, such as a laptop, is being specified.",
"In the Cat Photo App that we're building, we'll use col-xs-*, where xs means extra small (like an extra-small mobile phone screen), and * is the number of columns specifying how many columns wide the element should be.",
"Put the Like, Info and Delete buttons side-by-side by nesting all three of them within one <div class=\"row\"> element, then each of them within a <div class=\"col-xs-4\"> element.",
@@ -795,7 +795,7 @@
"We can clean up our code and make our Cat Photo App look more conventional by using Bootstrap's built-in styles instead of the custom styles we created earlier.",
"Don't worry - there will be plenty of time to customize our CSS later.",
"Delete the .red-text, p, and .smaller-image CSS declarations from your style element so that the only declarations left in your style element are h2 and thick-green-border.",
- "Then Delete the p element that contains a dead link. Then remove the red-text class from your h2 element and replace it with the text-primary Bootstrap class.",
+ "Then delete the p element that contains a dead link. Then remove the red-text class from your h2 element and replace it with the text-primary Bootstrap class.",
"Finally, remove the \"smaller-image\" class from your first img element and replace it with the img-responsive class."
],
"tests": [
@@ -893,12 +893,12 @@
"title": "Use Spans for Inline Elements",
"difficulty": 2.105,
"description": [
- "You can use use spans to create inline elements. Remember when we used the btn-block class to make the button grow fill the entire row?",
+ "You can use spans to create inline elements. Remember when we used the btn-block class to make the button fill the entire row?",
"This image illustrates the difference between inline elements and block-level elements:",
- "",
+ "",
"By using the span element, you can put several elements together, and even style different parts of the same element differently.",
"Nest the word \"love\" in your \"Things cats love\" element below within a span element. Then give that span the class text-danger to make the text red.",
- "Here's how you would do this with the \"Top 3 things cats hate\" element: <p>Top 3 things cats <span class\"text-danger\">hate</span></p>"
+ "Here's how you would do this with the \"Top 3 things cats hate\" element: <p>Top 3 things cats <span class = \"text-danger\">hate</span></p>"
],
"tests": [
"assert($(\"p span\") && $(\"p span\").length > 0, 'Your span element should be inside your p element.')",
@@ -997,7 +997,7 @@
"We will make a simple heading for our Cat Photo App by putting them in the same row.",
"Remember, Bootstrap uses a responsive grid system, which makes it easy to put elements into rows and specify each element's relative width. Most of Bootstrap's classes can be applied to a div element.",
"Here's a diagram of how Bootstrap's 12-column grid layout works:",
- "",
+ "",
"Note that in this illustration, the col-md-* class is being used. Here, md means medium, and * is a number specifying how many columns wide the element should be. In this case, the column width of an element on a medium-sized screen, such as a laptop, is being specified.",
"In the Cat Photo App that we're building, we'll use col-xs-*, where xs means extra small (like an extra-small mobile phone screen), and * is the number of columns specifying how many columns wide the element should be.",
"Nest your first image and your h2 element within a single <div class=\"row\"> element. Nest your h2 text within a <div class=\"col-xs-8\"> and your image in a <div class=\"col-xs-4\"> so that they are on the same line.",
@@ -1532,7 +1532,7 @@
"difficulty": 2.17,
"description": [
"Now let's get your form input and your submission button on the same line. We'll do this the same way we have previously: by using a div element with the class row, and other div elements within it using the col-xs-* class.",
- "Nest both your form's text input and submit button within a div with the class row. Nest your form's text input within a div with the class of \"col-xs-7\". Nest your form's submit button in a div with the class col-xs-5.",
+ "Nest both your form's text input and submit button within a div with the class row. Nest your form's text input within a div with the class of col-xs-7. Nest your form's submit button in a div with the class col-xs-5.",
"This is the last challenge we'll do for our Cat Photo App for now. We hope you've enjoyed learning Font Awesome, Bootstrap, and responsive design!"
],
"tests": [
@@ -1769,8 +1769,8 @@
"Nest one div element with the class well within each of your col-xs-6 div elements."
],
"tests": [
- "assert($(\"div\").length > 4, 'Add two div elements inside your div class=\"well\"> element both with the class col-xs-6')",
- "assert($(\"div.col-xs-6\").children(\"div.well\").length > 1, 'Nest both of your div class=\"col-xs-6\" elements within your div class=\"row\" element.')",
+ "assert($(\"div\").length > 4, 'Add a div element with the class well inside each of your div class=\"col-xs-6\"> elements')",
+ "assert($(\"div.col-xs-6 div.well\").length > 1, 'Nest both of your div class=\"col-xs-6\" elements within your div class=\"row\" element.')",
"assert(editor.match(/<\\/div>/g) && editor.match(//g).length === editor.match(/
div elements have closing tags.')"
],
"challengeSeed": [
diff --git a/challenges/git.json b/challenges/git.json
index 7b091e8fb73..aa03fb0a18b 100644
--- a/challenges/git.json
+++ b/challenges/git.json
@@ -16,7 +16,7 @@
"Choose Node.js in the selection area below the name field.",
"Click the Create button. Then click into your new workspace.",
"In the lower right hand corner you should see a terminal window. In this window use the following commands. You don't need to know what these mean at this point.",
- "Install /gi) && editor.match(//gi).length > 0, 'Make sure your /gi) && editor.match(//gi).length > 0, 'Make sure your /gi) && !editor.match(//gi), 'Do not give your /g).length === editor.match(/
how-to-npm with this command: npm install -g git-it",
+ "Install git-it with this command: npm install -g git-it",
"Now start the tutorial by running git-it.",
"Note that you can resize the c9.io's windows by dragging their borders.",
"Make sure that you are always in your project's \"workspace\" directory. You can always navigate back to this directory by running this command: cd ~/workspace.",
diff --git a/challenges/html5-and-css.json b/challenges/html5-and-css.json
index 4d4ae95cad4..b3759fdc2c0 100644
--- a/challenges/html5-and-css.json
+++ b/challenges/html5-and-css.json
@@ -372,7 +372,7 @@
"difficulty": 1.09,
"description": [
"Delete your h2 element's style attribute and instead create a CSS style element. Add the necessary CSS to turn all h2 elements blue.",
- "With CSS, there are hundreds of CSS attributes that you can use to change the way an element looks on your page.",
+ "With CSS, there are hundreds of CSS properties that you can use to change the way an element looks on your page.",
"When you entered <h2 style=\"color: red\">CatPhotoApp</h2>, you were giving that individual h2 element an inline style.",
"That's one way to add style to an element, but a better way is by using CSS, which stands for Cascading Style Sheets.",
"At the top of your code, create a style element like this: <style></style>.",
@@ -381,7 +381,7 @@
],
"tests": [
"assert(!$(\"h2\").attr(\"style\"), 'Remove the style attribute from your h2 element.')",
- "assert(($(\"style\").length > 1), 'Create a style element.')",
+ "assert($(\"style\") && $(\"style\").length > 1, 'Create a style element.')",
"assert($(\"h2\").css(\"color\") === \"rgb(0, 0, 255)\", 'Your h2 element should be blue.')",
"assert(editor.match(/<\\/style>/g) && editor.match(/<\\/style>/g).length === editor.match(/",
"",
@@ -2530,14 +2534,14 @@
"difficulty": 1.392,
"description": [
"One cool thing about id attributes is that, like classes, you can style them using CSS.",
- "Here's an example of how you can take your element with the id attribute of cat-photo-element and give it the background color of green. In your style element: #cat-photo-element { background-color: green; }>",
+ "Here's an example of how you can take your element with the id attribute of cat-photo-element and give it the background color of green. In your style element: #cat-photo-element { background-color: green; }",
"Note that inside your style element, you always reference classes by putting a . in front of their names. You always reference ids by putting a # in front of their names.",
"Try giving your form, which now has the id attribute of cat-photo-form, a green background."
],
"tests": [
"assert($(\"form\").attr(\"id\") === \"cat-photo-form\", 'Give your form element the id of cat-photo-form.')",
"assert($(\"#cat-photo-form\").css(\"background-color\") === \"rgb(0, 128, 0)\", 'Your form element should have the background-color of green.')",
- "assert(editor.match(/form element has both an id attribute.')",
+ "assert(editor.match(/form element has an id attribute.')",
"assert(!editor.match(/form any class or style attributes.')"
],
"challengeSeed": [
@@ -2623,7 +2627,7 @@
"difficulty": 1.40,
"description": [
"You may have already noticed this, but all HTML elements are essentially little rectangles.",
- "Three important attributes control the space that surrounds each HTML element: padding, margin, and border.",
+ "Three important properties control the space that surrounds each HTML element: padding, margin, and border.",
"An element's padding controls the amount of space between the element and its border.",
"Here, we can see that the green box and the red box are nested within the yellow box. Note that the red box has more padding than the green box.",
"When you increase the green box's padding, it will increase the distance between the text padding and the border around it.",
@@ -2835,7 +2839,7 @@
"difficulty": 1.43,
"description": [
"Sometimes you will want to customize an element so that it has different padding on each of its sides.",
- "CSS allows you to control the padding of an element on all four sides with padding-top, padding-right, padding-bottom, and padding-left attributes.",
+ "CSS allows you to control the padding of an element on all four sides with padding-top, padding-right, padding-bottom, and padding-left properties.",
"Give the green box a padding of 40px on its top and left side, but only 20px on its bottom and right side."
],
"tests": [
@@ -2908,7 +2912,7 @@
"description": [
"Give the green box a margin of 40px on its top and left side, but only 20px on its bottom and right side.",
"Sometimes you will want to customize an element so that it has a different margin on each of its sides.",
- "CSS allows you to control the margin of an element on all four sides with margin-top, margin-right, margin-bottom, and margin-left attributes."
+ "CSS allows you to control the margin of an element on all four sides with margin-top, margin-right, margin-bottom, and margin-left properties."
],
"tests": [
"assert($(\".green-box\").css(\"margin-top\") === \"40px\", 'Your green-box class should give the top of elements 40px of margin.')",
@@ -2977,7 +2981,7 @@
"title": "Use Clockwise Notation to Specify the Padding of an Element",
"difficulty": 1.44,
"description": [
- "Instead of specifying an element's padding-top, padding-right, padding-bottom, and padding-left attributes, you can specify them all in one line, like this: padding: 10px 20px 10px 20px;.",
+ "Instead of specifying an element's padding-top, padding-right, padding-bottom, and padding-left properties, you can specify them all in one line, like this: padding: 10px 20px 10px 20px;.",
"These four values work like a clock: top, right, bottom, left, and will produce the exact same result as using the side-specific padding instructions.",
"Use Clockwise Notation to give the \".green-box\" class a padding of 40px on its top and left side, but only 20px on its bottom and right side."
],
@@ -3047,7 +3051,7 @@
"difficulty": 1.45,
"description": [
"Let's try this again, but with margin this time.",
- "Instead of specifying an element's margin-top, margin-right, margin-bottom, and margin-left attributes, you can specify them all in one line, like this: margin: 10px 20px 10px 20px;.",
+ "Instead of specifying an element's margin-top, margin-right, margin-bottom, and margin-left properties, you can specify them all in one line, like this: margin: 10px 20px 10px 20px;.",
"These four values work like a clock: top, right, bottom, left, and will produce the exact same result as using the side-specific margin instructions.",
"Use Clockwise Notation to give an element a margin of 40px on its top and left side, but only 20px on its bottom and right side."
],
@@ -3117,7 +3121,7 @@
"difficulty": 1.46,
"description": [
"Now let's start fresh and talk about CSS inheritance.",
- "Every HTML page has body element.",
+ "Every HTML page has a body element.",
"We can prove that the body element exists here by giving it a background-color of black.",
"We can do this by adding body { background-color: black; } to our style element."
],
@@ -3159,8 +3163,8 @@
"assert(($(\"h1\").length > 0), 'Create an h1 element.')",
"assert(($(\"h1\").length > 0 && $(\"h1\").text().match(/hello world/i)), 'Your h1 element should have the text Hello World.')",
"assert(editor.match(/<\\/h1>/g) && editor.match(//g).length === editor.match(/h1 element has a closing tag.')",
- "assert(($(\"body\").css(\"color\") === \"rgb(0, 128, 0)\"), 'Give your body element the color attribute of green.')",
- "assert(($(\"body\").css(\"font-family\").match(/Monospace/i)), 'Give your body element the font-family attribute of Monospace.')",
+ "assert(($(\"body\").css(\"color\") === \"rgb(0, 128, 0)\"), 'Give your body element the color property of green.')",
+ "assert(($(\"body\").css(\"font-family\").match(/Monospace/i)), 'Give your body element the font-family property of Monospace.')",
"assert(($(\"h1\").length > 0 && $(\"h1\").css(\"font-family\").match(/monospace/i)), 'Your h1 element should inherit the font Monospace from your body element.')",
"assert(($(\"h1\").length > 0 && $(\"h1\").css(\"color\") === \"rgb(0, 128, 0)\"), 'Your h1 element should inherit the color green from your body element.')"
],
@@ -3194,7 +3198,7 @@
"description": [
"Sometimes your HTML elements will receive multiple styles that conflict with one another.",
"For example, your h1 element can't be both green and pink at the same time.",
- "Let's see what happens when we create a class that makes text pink, then apply it to an element. Will our class override the body element's color: green; CSS attribute?",
+ "Let's see what happens when we create a class that makes text pink, then apply it to an element. Will our class override the body element's color: green; CSS property?",
"Create a CSS class called pink-text that gives an element the color pink.",
"Give your h1 element the class of pink-text."
],
@@ -3235,7 +3239,8 @@
"Our \"pink-text\" class overrode our body element's CSS declaration!",
"We just proved that our classes will override the body element's CSS. So the next logical question is, what can we do to override our pink-text class?",
"Create an additional CSS class called blue-text that gives an element the color blue. Make sure it's below your pink-text class declaration.",
- "Apply the blue-text class to your h1 element in addition to your pink-text class, and let's see which one wins."
+ "Apply the blue-text class to your h1 element in addition to your pink-text class, and let's see which one wins.",
+ "Applying multiple class attributes to a HTML element is done with a space between them like this: class=\"class1 class2\""
],
"tests": [
"assert($(\"h1\").hasClass(\"pink-text\"), 'Your h1 element should have the class pink-text.')",
@@ -3280,12 +3285,14 @@
"Let's override your pink-text and blue-text classes, and make your h1 element orange, by giving the h1 element an id and then styling that id.",
"Give your h1 element the id attribute of orange-text. Remember, id styles look like this: <h1 id=\"orange-text\">",
"Leave the blue-text and pink-text classes on your h1 element.",
- "Create a CSS declaration for your orange-text id in your style element. Here's and example of what this looks like: #brown-text { color: brown; }"
+ "Create a CSS declaration for your orange-text id in your style element. Here's an example of what this looks like: #brown-text { color: brown; }"
],
"tests": [
"assert($(\"h1\").hasClass(\"pink-text\"), 'Your h1 element should have the class pink-text.')",
"assert($(\"h1\").hasClass(\"blue-text\"), 'Your h1 element should have the class blue-text.')",
"assert($(\"h1\").attr(\"id\") === \"orange-text\", 'Give your h1 element the id of orange-text.')",
+ "assert(editor.match(/#orange-text\\s*{/gi), 'Create a CSS declaration for your orange-text id')",
+ "assert(!editor.match(//gi), 'Do not give your h1 any style attributes.')",
"assert($(\"h1\").css(\"color\") === \"rgb(255, 165, 0)\", 'Your h1 element should be orange.')"
],
"challengeSeed": [
@@ -3387,7 +3394,7 @@
"assert($(\"h1\").hasClass(\"blue-text\"), 'Your h1 element should have the class blue-text.')",
"assert($(\"h1\").attr(\"id\") === \"orange-text\", 'Your h1 element should have the id of orange-text.')",
"assert(editor.match(/ 0, 'Your h1 element should have the inline style of color: white.')",
- "assert(editor.match(/pink.*\\!important/gi) && editor.match(/pink.*\\!important;/gi).length > 0, 'Your pink-text class should have the !important keyword to override all other declarations.')",
+ "assert(editor.match(/pink.*\\!important;/gi), 'Your pink-text class should have the !important keyword to override all other declarations.')",
"assert($(\"h1\").css(\"color\") === \"rgb(255, 192, 203)\", 'Your h1 element should be pink.')"
],
"challengeSeed": [
@@ -3431,7 +3438,7 @@
"description": [
"Did you know there are other ways to represent colors in CSS? One of these ways is called hexadecimal code, or hex code for short.",
"Decimal means the numbers zero through nine - the numbers that people use in everyday life. Hexadecimal includes these 10 numbers, plus the letters A, B, C, D, E and F. This means that Hexidecimal has a total of 16 possible values, instead of the 10 possible values that our normal base-10 number system gives us.",
- "With CSS, we use 6 hexidecimal number to represent colors. For example, #000000 is the lowest possible value, and it represents the color black.",
+ "With CSS, we use 6 hexadecimal numbers to represent colors. For example, #000000 is the lowest possible value, and it represents the color black.",
"Replace the word black in our body element's background-color with its hex code representation, #000000. "
],
"tests": [
@@ -3508,7 +3515,7 @@
],
"tests": [
"assert($(\"body\").css(\"background-color\") === \"rgb(255, 0, 0)\", 'Give your body element the background-color of red.')",
- "assert(editor.match(/#FF0000/g) && editor.match(/#FF0000/g).length > 0, 'Use the hex code for the color red instead of the word red. For example body { color: #FF0000; }.')"
+ "assert(editor.match(/#FF0000/ig) && editor.match(/#FF0000/ig).length > 0, 'Use the hex code for the color red instead of the word red. For example body { color: #FF0000; }.')"
],
"challengeSeed": [
"
body element the color attribute of green.')",
- "assert(($(\"body\").css(\"font-family\").match(/Monospace/i)), 'Give your body element the font-family attribute of Monospace.')",
+ "assert(($(\"body\").css(\"color\") === \"rgb(0, 128, 0)\"), 'Give your body element the color property of green.')",
+ "assert(($(\"body\").css(\"font-family\").match(/Monospace/i)), 'Give your body element the font-family property of Monospace.')",
"assert(($(\"h1\").length > 0 && $(\"h1\").css(\"font-family\").match(/monospace/i)), 'Your h1 element should inherit the font Monospace from your body element.')",
"assert(($(\"h1\").length > 0 && $(\"h1\").css(\"color\") === \"rgb(0, 128, 0)\"), 'Your h1 element should inherit the color green from your body element.')"
],
@@ -3194,7 +3198,7 @@
"description": [
"Sometimes your HTML elements will receive multiple styles that conflict with one another.",
"For example, your h1 element can't be both green and pink at the same time.",
- "Let's see what happens when we create a class that makes text pink, then apply it to an element. Will our class override the body element's color: green; CSS attribute?",
+ "Let's see what happens when we create a class that makes text pink, then apply it to an element. Will our class override the body element's color: green; CSS property?",
"Create a CSS class called pink-text that gives an element the color pink.",
"Give your h1 element the class of pink-text."
],
@@ -3235,7 +3239,8 @@
"Our \"pink-text\" class overrode our body element's CSS declaration!",
"We just proved that our classes will override the body element's CSS. So the next logical question is, what can we do to override our pink-text class?",
"Create an additional CSS class called blue-text that gives an element the color blue. Make sure it's below your pink-text class declaration.",
- "Apply the blue-text class to your h1 element in addition to your pink-text class, and let's see which one wins."
+ "Apply the blue-text class to your h1 element in addition to your pink-text class, and let's see which one wins.",
+ "Applying multiple class attributes to a HTML element is done with a space between them like this: class=\"class1 class2\""
],
"tests": [
"assert($(\"h1\").hasClass(\"pink-text\"), 'Your h1 element should have the class pink-text.')",
@@ -3280,12 +3285,14 @@
"Let's override your pink-text and blue-text classes, and make your h1 element orange, by giving the h1 element an id and then styling that id.",
"Give your h1 element the id attribute of orange-text. Remember, id styles look like this: <h1 id=\"orange-text\">",
"Leave the blue-text and pink-text classes on your h1 element.",
- "Create a CSS declaration for your orange-text id in your style element. Here's and example of what this looks like: #brown-text { color: brown; }"
+ "Create a CSS declaration for your orange-text id in your style element. Here's an example of what this looks like: #brown-text { color: brown; }"
],
"tests": [
"assert($(\"h1\").hasClass(\"pink-text\"), 'Your h1 element should have the class pink-text.')",
"assert($(\"h1\").hasClass(\"blue-text\"), 'Your h1 element should have the class blue-text.')",
"assert($(\"h1\").attr(\"id\") === \"orange-text\", 'Give your h1 element the id of orange-text.')",
+ "assert(editor.match(/#orange-text\\s*{/gi), 'Create a CSS declaration for your orange-text id')",
+ "assert(!editor.match(/h1 any style attributes.')",
"assert($(\"h1\").css(\"color\") === \"rgb(255, 165, 0)\", 'Your h1 element should be orange.')"
],
"challengeSeed": [
@@ -3387,7 +3394,7 @@
"assert($(\"h1\").hasClass(\"blue-text\"), 'Your h1 element should have the class blue-text.')",
"assert($(\"h1\").attr(\"id\") === \"orange-text\", 'Your h1 element should have the id of orange-text.')",
"assert(editor.match(/h1 element should have the inline style of color: white.')",
- "assert(editor.match(/pink.*\\!important/gi) && editor.match(/pink.*\\!important;/gi).length > 0, 'Your pink-text class should have the !important keyword to override all other declarations.')",
+ "assert(editor.match(/pink.*\\!important;/gi), 'Your pink-text class should have the !important keyword to override all other declarations.')",
"assert($(\"h1\").css(\"color\") === \"rgb(255, 192, 203)\", 'Your h1 element should be pink.')"
],
"challengeSeed": [
@@ -3431,7 +3438,7 @@
"description": [
"Did you know there are other ways to represent colors in CSS? One of these ways is called hexadecimal code, or hex code for short.",
"Decimal means the numbers zero through nine - the numbers that people use in everyday life. Hexadecimal includes these 10 numbers, plus the letters A, B, C, D, E and F. This means that Hexidecimal has a total of 16 possible values, instead of the 10 possible values that our normal base-10 number system gives us.",
- "With CSS, we use 6 hexidecimal number to represent colors. For example, #000000 is the lowest possible value, and it represents the color black.",
+ "With CSS, we use 6 hexadecimal numbers to represent colors. For example, #000000 is the lowest possible value, and it represents the color black.",
"Replace the word black in our body element's background-color with its hex code representation, #000000. "
],
"tests": [
@@ -3508,7 +3515,7 @@
],
"tests": [
"assert($(\"body\").css(\"background-color\") === \"rgb(255, 0, 0)\", 'Give your body element the background-color of red.')",
- "assert(editor.match(/#FF0000/g) && editor.match(/#FF0000/g).length > 0, 'Use the hex code for the color red instead of the word red. For example body { color: #FF0000; }.')"
+ "assert(editor.match(/#FF0000/ig) && editor.match(/#FF0000/ig).length > 0, 'Use the hex code for the color red instead of the word red. For example body { color: #FF0000; }.')"
],
"challengeSeed": [
"