Merge remote-tracking branch 'upstream/staging' into patch-3
This commit is contained in:
Abhisek Pattnaik
@ -569,7 +569,8 @@
|
||||
"title": "Where art thou",
|
||||
"difficulty": "1.55",
|
||||
"description": [
|
||||
"Make a function that looks through an array (first argument) and returns an array of all objects that have equivalent property values (second argument).",
|
||||
"Make a function that looks through an array (first argument) and returns an array of all objects that have equivalent property and value pair (second argument).",
|
||||
"For example, if the first argument is <code>[{ first: 'Romeo', last: 'Montague' }, { first: 'Mercutio', last: null }, { first: 'Tybalt', last: 'Capulet' }]</code>, and the second argument is <code>{ last: 'Capulet' }</code>, then you must return the the third object from the array (the first argument), because it contains the property and it's value, that was passed on as the second argument.",
|
||||
"Remember to use <a href='//github.com/FreeCodeCamp/freecodecamp/wiki/How-to-get-help-when-you-get-stuck' target='_blank'>Read-Search-Ask</a> if you get stuck. Write your own code."
|
||||
],
|
||||
"challengeSeed": [
|
||||
@ -583,7 +584,9 @@
|
||||
],
|
||||
"tests": [
|
||||
"assert.deepEqual(where([{ first: 'Romeo', last: 'Montague' }, { first: 'Mercutio', last: null }, { first: 'Tybalt', last: 'Capulet' }], { last: 'Capulet' }), [{ first: 'Tybalt', last: 'Capulet' }], 'should return an array of objects');",
|
||||
"assert.deepEqual(where([{ 'a': 1 }, { 'a': 1 }, { 'a': 1, 'b': 2 }], { 'a': 1 }), [{ 'a': 1 }, { 'a': 1 }, { 'a': 1, 'b': 2 }], 'should return with multiples');"
|
||||
"assert.deepEqual(where([{ 'a': 1 }, { 'a': 1 }, { 'a': 1, 'b': 2 }], { 'a': 1 }), [{ 'a': 1 }, { 'a': 1 }, { 'a': 1, 'b': 2 }], 'should return with multiples');",
|
||||
"assert.deepEqual(where([{ 'a': 1, 'b': 2 }, { 'a': 1 }, { 'a': 1, 'b': 2, 'c': 2 }], { 'a': 1, 'b': 2 }), [{ 'a': 1, 'b': 2 }, { 'a': 1, 'b': 2, 'c': 2 }], 'should return two objects in array');",
|
||||
"assert.deepEqual(where([{ 'a': 5 }, { 'a': 5 }, { 'a': 5, 'b': 10 }], { 'a': 5, 'b': 10 }), [{ 'a': 5, 'b': 10 }], 'should return a single object in array');"
|
||||
],
|
||||
"MDNlinks": [
|
||||
"Global Object",
|
||||
|
||||
@ -13,7 +13,8 @@
|
||||
"<code>// This is a comment.</code>",
|
||||
"The slash-star-star-slash comment will comment out everything between the <code>/*</code> and the <code>*/</code> characters:",
|
||||
"<code>/* This is also a comment */</code>",
|
||||
"Try creating one of each."
|
||||
"Try creating one of each.",
|
||||
"And one more thing you need to notice. Starting at this waypoint in JavaScript related challenges (except AngularJS, all Ziplines, Git, Node.js and Express.js, MongoDB and Full Stack JavaScript Projects) you can see contents of <code>assert()</code> functions (in some challenges <code>except()</code>, <code>assert.equal()</code> and so on) which are used to test your code. It's part of these challenges that you are able to see the tests that are running against your code."
|
||||
],
|
||||
"tests":[
|
||||
"assert(editor.getValue().match(/(\\/\\/)...../g), 'Create a <code>\\/\\/</code> style comment that contains at least five letters');",
|
||||
@ -65,7 +66,7 @@
|
||||
"Look at the <code>ourName</code> example if you get stuck."
|
||||
],
|
||||
"tests": [
|
||||
"assert((function(){/**/if(typeof(myName) !== \"undefined\" && typeof(myName) === \"string\" && myName.length > 0){return(true);}else{return(false);}/**/})(), 'myName should be a string that contains at least one character in it');"
|
||||
"assert((function(){/**/if(typeof(myName) !== \"undefined\" && typeof(myName) === \"string\" && myName.length > 0){return true;}else{return false;}/**/})(), 'myName should be a string that contains at least one character in it');"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"// var ourName = \"Free Code Camp\";",
|
||||
@ -75,7 +76,7 @@
|
||||
"// We use this function to show you the value of your variable in your output box.",
|
||||
"// You'll learn about functions soon.",
|
||||
"",
|
||||
"if(typeof(myName) !== \"undefined\"){(function(v){return(v);})(myName);}"
|
||||
"if(typeof(myName) !== \"undefined\"){(function(v){return v;})(myName);}"
|
||||
],
|
||||
"type": "waypoint",
|
||||
"challengeType": 1
|
||||
@ -89,8 +90,8 @@
|
||||
"Now let's create two new string variables: <code>myFirstName</code>and <code>myLastName</code> and assign them the values of your first and last name, respectively."
|
||||
],
|
||||
"tests": [
|
||||
"assert((function(){if(typeof(myFirstName) !== \"undefined\" && typeof(myFirstName) === \"string\" && myFirstName.length > 0){return(true);}else{return(false);}})(), 'myFirstName should be a string with a least one character in it');",
|
||||
"assert((function(){if(typeof(myLastName) !== \"undefined\" && typeof(myLastName) === \"string\" && myLastName.length > 0){return(true);}else{return(false);}})(), 'myLastName should be a string with a least one character in it');"
|
||||
"assert((function(){if(typeof(myFirstName) !== \"undefined\" && typeof(myFirstName) === \"string\" && myFirstName.length > 0){return true;}else{return false;}})(), 'myFirstName should be a string with a least one character in it');",
|
||||
"assert((function(){if(typeof(myLastName) !== \"undefined\" && typeof(myLastName) === \"string\" && myLastName.length > 0){return true;}else{return false;}})(), 'myLastName should be a string with a least one character in it');"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"// name = \"Alan Turing\";",
|
||||
@ -101,7 +102,7 @@
|
||||
"// Only change code above this line.",
|
||||
"// We use this function to show you the value of your variable in your output box.",
|
||||
"// You'll learn about functions soon.",
|
||||
"if(typeof(myFirstName) !== \"undefined\" && typeof(myLastName) !== \"undefined\"){(function(){return(myFirstName + ', ' + myLastName);})();}"
|
||||
"if(typeof(myFirstName) !== \"undefined\" && typeof(myLastName) !== \"undefined\"){(function(){return myFirstName + ', ' + myLastName;})();}"
|
||||
],
|
||||
"type": "waypoint",
|
||||
"challengeType": 1
|
||||
@ -116,8 +117,8 @@
|
||||
"Use the <code>.length</code> property to count the number of characters in the <code>lastName</code> variable."
|
||||
],
|
||||
"tests": [
|
||||
"assert((function(){if(typeof(lastNameLength) !== \"undefined\" && typeof(lastNameLength) === \"number\" && lastNameLength === 8){return(true);}else{return(false);}})(), 'lastNameLength should be equal to eight.');",
|
||||
"assert((function(){if(editor.getValue().match(/\\.length/gi) && editor.getValue().match(/\\.length/gi).length >= 2 && editor.getValue().match(/var lastNameLength \\= 0;/gi) && editor.getValue().match(/var lastNameLength \\= 0;/gi).length >= 1){return(true);}else{return(false);}})(), 'You should be getting the length of <code>lastName</code> by using <code>.length</code> like this: <code>lastName.length</code>');"
|
||||
"assert((function(){if(typeof(lastNameLength) !== \"undefined\" && typeof(lastNameLength) === \"number\" && lastNameLength === 8){return true;}else{return false;}})(), 'lastNameLength should be equal to eight.');",
|
||||
"assert((function(){if(editor.getValue().match(/\\.length/gi) && editor.getValue().match(/\\.length/gi).length >= 2 && editor.getValue().match(/var lastNameLength \\= 0;/gi) && editor.getValue().match(/var lastNameLength \\= 0;/gi).length >= 1){return true;}else{return false;}})(), 'You should be getting the length of <code>lastName</code> by using <code>.length</code> like this: <code>lastName.length</code>');"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"var firstNameLength = 0;",
|
||||
@ -137,7 +138,7 @@
|
||||
"// Only change code above this line.",
|
||||
"// We use this function to show you the value of your variable in your output box.",
|
||||
"// You'll learn about functions soon.",
|
||||
"if(typeof(lastNameLength) !== \"undefined\"){(function(){return(lastNameLength);})();}"
|
||||
"if(typeof(lastNameLength) !== \"undefined\"){(function(){return lastNameLength;})();}"
|
||||
],
|
||||
"type": "waypoint",
|
||||
"challengeType": 1
|
||||
@ -154,7 +155,7 @@
|
||||
"Try looking at the <code>firstLetterOfFirstName</code> variable declaration if you get stuck."
|
||||
],
|
||||
"tests": [
|
||||
"assert((function(){if(typeof(firstLetterOfLastName) !== \"undefined\" && editor.getValue().match(/\\[0\\]/gi) && typeof(firstLetterOfLastName) === \"string\" && firstLetterOfLastName === \"L\"){return(true);}else{return(false);}})(), 'The first letter of firstLetterOfLastName should be a L');"
|
||||
"assert((function(){if(typeof(firstLetterOfLastName) !== \"undefined\" && editor.getValue().match(/\\[0\\]/gi) && typeof(firstLetterOfLastName) === \"string\" && firstLetterOfLastName === \"L\"){return true;}else{return false;}})(), 'The first letter of firstLetterOfLastName should be a L');"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"var firstLetterOfFirstName = \"\";",
|
||||
@ -172,7 +173,7 @@
|
||||
"// Only change code above this line.",
|
||||
"// We use this function to show you the value of your variable in your output box.",
|
||||
"// You'll learn about functions soon.",
|
||||
"(function(v){return(v);})(firstLetterOfLastName);"
|
||||
"(function(v){return v;})(firstLetterOfLastName);"
|
||||
],
|
||||
"type": "waypoint",
|
||||
"challengeType": 1
|
||||
@ -188,7 +189,7 @@
|
||||
"Try looking at the <code>secondLetterOfFirstName</code> variable declaration if you get stuck."
|
||||
],
|
||||
"tests": [
|
||||
"assert(thirdLetterOfLastName === 'v', 'The third last letter of lastName should be a \"v\"');"
|
||||
"assert(thirdLetterOfLastName === 'v', 'The third letter of lastName should be a \"v\"');"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"var firstName = \"Ada\";",
|
||||
@ -203,7 +204,7 @@
|
||||
"// Only change code above this line.",
|
||||
"// We use this function to show you the value of your variable in your output box.",
|
||||
"// You'll learn about functions soon.",
|
||||
"(function(v){return(v);})(thirdLetterOfLastName);"
|
||||
"(function(v){return v;})(thirdLetterOfLastName);"
|
||||
],
|
||||
"type": "waypoint",
|
||||
"challengeType": 1
|
||||
@ -235,7 +236,7 @@
|
||||
"// Only change code above this line.",
|
||||
"// We use this function to show you the value of your variable in your output box.",
|
||||
"// You'll learn about functions soon.",
|
||||
"(function(v){return(v);})(lastLetterOfLastName);"
|
||||
"(function(v){return v;})(lastLetterOfLastName);"
|
||||
],
|
||||
"type": "waypoint",
|
||||
"challengeType": 1
|
||||
@ -267,7 +268,7 @@
|
||||
"// Only change code above this line.",
|
||||
"// We use this function to show you the value of your variable in your output box.",
|
||||
"// You'll learn about functions soon.",
|
||||
"(function(v){return(v);})(secondToLastLetterOfLastName);"
|
||||
"(function(v){return v;})(secondToLastLetterOfLastName);"
|
||||
],
|
||||
"type": "waypoint",
|
||||
"challengeType": 1
|
||||
@ -282,7 +283,7 @@
|
||||
"Replace the <code>0</code> with the correct number so you can get the result mentioned in the comment."
|
||||
],
|
||||
"tests": [
|
||||
"assert((function(){if(sum === 20 && editor.getValue().match(/\\+/g)){return(true);}else{return(false);}})(), 'Make the variable <code>sum</code> equal 20');"
|
||||
"assert((function(){if(sum === 20 && editor.getValue().match(/\\+/g)){return true;}else{return false;}})(), 'Make the variable <code>sum</code> equal 20');"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"var sum = 10 + 0; //make this equal to 20 by changing the 0 into the appropriate number.",
|
||||
@ -290,7 +291,7 @@
|
||||
"// Only change code above this line.",
|
||||
"// We use this function to show you the value of your variable in your output box.",
|
||||
"// You'll learn about functions soon.",
|
||||
"(function(z){return('sum='+z);})(sum);"
|
||||
"(function(z){return 'sum='+z;})(sum);"
|
||||
],
|
||||
"type": "waypoint",
|
||||
"challengeType": 1
|
||||
@ -305,7 +306,7 @@
|
||||
"Replace the <code>0</code> with the correct number so you can get the result mentioned in the comment."
|
||||
],
|
||||
"tests": [
|
||||
"assert((function(){if(difference === 12 && editor.getValue().match(/\\-/g)){return(true);}else{return(false);}})(), 'Make the variable <code>difference</code> equal 12');"
|
||||
"assert((function(){if(difference === 12 && editor.getValue().match(/\\-/g)){return true;}else{return false;}})(), 'Make the variable <code>difference</code> equal 12');"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"var difference = 45 - 0; //make this equal to 12 by changing the 0 into the appropriate number.",
|
||||
@ -313,7 +314,7 @@
|
||||
"// Only change code above this line.",
|
||||
"// We use this function to show you the value of your variable in your output box.",
|
||||
"// You'll learn about functions soon.",
|
||||
"(function(z){return('difference='+z);})(difference);"
|
||||
"(function(z){return 'difference='+z;})(difference);"
|
||||
],
|
||||
"type": "waypoint",
|
||||
"challengeType": 1
|
||||
@ -328,7 +329,7 @@
|
||||
"Replace the <code>0</code> with the correct number so you can get the result mentioned in the comment."
|
||||
],
|
||||
"tests": [
|
||||
"assert((function(){if(product === 80 && editor.getValue().match(/\\*/g)){return(true);}else{return(false);}})(), 'Make the variable <code>product</code> equal 80.');"
|
||||
"assert((function(){if(product === 80 && editor.getValue().match(/\\*/g)){return true;}else{return false;}})(), 'Make the variable <code>product</code> equal 80.');"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"var product = 8 * 0; //make this equal to 80 by changing the 0 into the appropriate number.",
|
||||
@ -336,7 +337,7 @@
|
||||
"// Only change code above this line.",
|
||||
"// We use this function to show you the value of your variable in your output box.",
|
||||
"// You'll learn about functions soon.",
|
||||
"(function(z){return('product='+z);})(product);"
|
||||
"(function(z){return 'product='+z;})(product);"
|
||||
],
|
||||
"type": "waypoint",
|
||||
"challengeType": 1
|
||||
@ -351,7 +352,7 @@
|
||||
"Replace the <code>0</code> with the correct number so you can get the result mentioned in the comment."
|
||||
],
|
||||
"tests": [
|
||||
"assert((function(){if(quotient === 2 && editor.getValue().match(/\\//g)){return(true);}else{return(false);}})(), 'Make the variable <code>quotient</code> equal 2.');"
|
||||
"assert((function(){if(quotient === 2 && editor.getValue().match(/\\//g)){return true;}else{return false;}})(), 'Make the variable <code>quotient</code> equal 2.');"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"var quotient = 66 / 0; //make this equal to 2 by changing the 0 into the appropriate number.",
|
||||
@ -359,7 +360,7 @@
|
||||
"// Only change code above this line.",
|
||||
"// We use this function to show you the value of your variable in your output box.",
|
||||
"// You'll learn about functions soon.",
|
||||
"(function(z){return('quotient='+z);})(quotient);"
|
||||
"(function(z){return 'quotient='+z;})(quotient);"
|
||||
],
|
||||
"type": "waypoint",
|
||||
"challengeType": 1
|
||||
@ -373,7 +374,7 @@
|
||||
"Let's create a variable <code>myDecimal</code> and give it a decimal value."
|
||||
],
|
||||
"tests": [
|
||||
"assert((function(){if(typeof(myDecimal) !== \"undefined\" && typeof(myDecimal) === \"number\" && editor.getValue().match(/\\./g).length >=2){return(true);}else{return(false);}})(), 'myDecimal should be a decimal point number.');"
|
||||
"assert((function(){if(typeof(myDecimal) !== \"undefined\" && typeof(myDecimal) === \"number\" && editor.getValue().match(/\\./g).length >=2){return true;}else{return false;}})(), 'myDecimal should be a decimal point number.');"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"// var ourDecimal = 5.7;",
|
||||
@ -384,7 +385,7 @@
|
||||
"// Only change code above this line.",
|
||||
"// We use this function to show you the value of your variable in your output box.",
|
||||
"// You'll learn about functions soon.",
|
||||
"(function(){if(typeof(myDecimal) !== \"undefined\"){return(myDecimal);}})();"
|
||||
"(function(){if(typeof(myDecimal) !== \"undefined\"){return myDecimal;}})();"
|
||||
],
|
||||
"type": "waypoint",
|
||||
"challengeType": 1
|
||||
@ -398,8 +399,8 @@
|
||||
"Replace the <code>0.0</code> with the correct number so that you get the result mentioned in the comments."
|
||||
],
|
||||
"tests": [
|
||||
"assert((function(){if(product === 5.0 && editor.getValue().match(/\\*/g)){return(true);}else{return(false);}})(), 'Make the variable <code>product</code> equal 5.0.');",
|
||||
"assert((function(){if(quotient === 2.2 && editor.getValue().match(/\\//g)){return(true);}else{return(false);}})(), 'Make the variable <code>quotient</code> equal 2.2.');"
|
||||
"assert((function(){if(product === 5.0 && editor.getValue().match(/\\*/g)){return true;}else{return false;}})(), 'Make the variable <code>product</code> equal 5.0.');",
|
||||
"assert((function(){if(quotient === 2.2 && editor.getValue().match(/\\//g)){return true;}else{return false;}})(), 'Make the variable <code>quotient</code> equal 2.2.');"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"var quotient = 4.4 / 2.0; // equals 2.2",
|
||||
@ -409,7 +410,7 @@
|
||||
"// Only change code above this line.",
|
||||
"// We use this function to show you the value of your variable in your output box.",
|
||||
"// You'll learn about functions soon.",
|
||||
"(function(y){return('product='+y);})(product);"
|
||||
"(function(y){return 'product='+y;})(product);"
|
||||
],
|
||||
"type": "waypoint",
|
||||
"challengeType": 1
|
||||
@ -439,7 +440,7 @@
|
||||
"// Only change code above this line.",
|
||||
"// We use this function to show you the value of your variable in your output box.",
|
||||
"// You'll learn about functions soon.",
|
||||
"(function(z){return(z);})(myArray);"
|
||||
"(function(z){return z;})(myArray);"
|
||||
],
|
||||
"type": "waypoint",
|
||||
"challengeType": 1
|
||||
@ -464,7 +465,7 @@
|
||||
"// Only change code above this line.",
|
||||
"// We use this function to show you the value of your variable in your output box.",
|
||||
"// You'll learn about functions soon.",
|
||||
"if(typeof(myArray) !== \"undefined\"){(function(){return(myArray);})();}"
|
||||
"if(typeof(myArray) !== \"undefined\"){(function(){return myArray;})();}"
|
||||
],
|
||||
"type": "waypoint",
|
||||
"challengeType": 1
|
||||
@ -483,7 +484,7 @@
|
||||
"Create a variable called <code>myData</code> and set it to equal the first value of <code>myArray</code>."
|
||||
],
|
||||
"tests":[
|
||||
"assert((function(){if(typeof(myArray) != 'undefined' && typeof(myData) != 'undefined' && myArray[0] == myData){return(true);}else{return(false);}})(), 'The variable <code>myData</code> should equal the first value of myArray');"
|
||||
"assert((function(){if(typeof(myArray) != 'undefined' && typeof(myData) != 'undefined' && myArray[0] == myData){return true;}else{return false;}})(), 'The variable <code>myData</code> should equal the first value of myArray');"
|
||||
],
|
||||
"challengeSeed":[
|
||||
"//var ourArray = [1,2,3];",
|
||||
@ -496,7 +497,7 @@
|
||||
"// Only change code above this line.",
|
||||
"// We use this function to show you the value of your variable in your output box.",
|
||||
"// You'll learn about functions soon.",
|
||||
"if(typeof(myArray) !== \"undefined\" && typeof(myData) !== \"undefined\"){(function(y,z){return('myArray = ' + JSON.stringify(y) + ', myData = ' + JSON.stringify(z));})(myArray, myData);}"
|
||||
"if(typeof(myArray) !== \"undefined\" && typeof(myData) !== \"undefined\"){(function(y,z){return 'myArray = ' + JSON.stringify(y) + ', myData = ' + JSON.stringify(z);})(myArray, myData);}"
|
||||
],
|
||||
"type": "waypoint",
|
||||
"challengeType": 1
|
||||
@ -513,8 +514,8 @@
|
||||
"Now modify the data stored at index 0 of <code>myArray</code> to the value of 3."
|
||||
],
|
||||
"tests":[
|
||||
"assert((function(){if(typeof(myArray) != 'undefined' && myArray[0] == 3 && myArray[1] == 2 && myArray[2] == 3){return(true);}else{return(false);}})(), 'myArray should now be [3,2,3]');",
|
||||
"assert((function(){if(editor.getValue().match(/[0]/g).length >= 1 && editor.getValue().match(/=/g).length >= 2){return(true);}else{return(false);}})(), 'You should be using indexes to modify the values in myArray');"
|
||||
"assert((function(){if(typeof(myArray) != 'undefined' && myArray[0] == 3 && myArray[1] == 2 && myArray[2] == 3){return true;}else{return false;}})(), 'myArray should now be [3,2,3]');",
|
||||
"assert((function(){if(editor.getValue().match(/myArray\\[0\\]\\s?=\\s?/g)){return true;}else{return false;}})(), 'You should be using correct index to modify the value in myArray');"
|
||||
],
|
||||
"challengeSeed":[
|
||||
"var ourArray = [1,2,3];",
|
||||
@ -527,7 +528,7 @@
|
||||
"// Only change code above this line.",
|
||||
"// We use this function to show you the value of your variable in your output box.",
|
||||
"// You'll learn about functions soon.",
|
||||
"if(typeof(myArray) !== \"undefined\"){(function(){return(myArray);})();}"
|
||||
"if(typeof(myArray) !== \"undefined\"){(function(){return myArray;})();}"
|
||||
],
|
||||
"type": "waypoint",
|
||||
"challengeType": 1
|
||||
@ -543,8 +544,8 @@
|
||||
"Use the <code>.pop()</code> function to remove the last item from myArray."
|
||||
],
|
||||
"tests": [
|
||||
"assert((function(d){if(d[0] == 'John' && d[1] == 23 && d[2] == undefined){return(true);}else{return(false);}})(myArray), 'myArray should only have the first two values left([\"John\", 23])');",
|
||||
"assert((function(d){if(d[0] == 'cat' && d[1] == 2 && d[2] == undefined){return(true);}else{return(false);}})(removed), 'myArray should only have the first two values left([\"cat\"], 2)');"
|
||||
"assert((function(d){if(d[0] == 'John' && d[1] == 23 && d[2] == undefined){return true;}else{return false;}})(myArray), 'myArray should only have the first two values left([\"John\", 23])');",
|
||||
"assert((function(d){if(d[0] == 'cat' && d[1] == 2 && d[2] == undefined){return true;}else{return false;}})(removed), 'myArray should only have the first two values left([\"cat\"], 2)');"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"//var numbers = [1,2,3];",
|
||||
@ -561,7 +562,7 @@
|
||||
"// Only change code above this line.",
|
||||
"// We use this function to show you the value of your variable in your output box.",
|
||||
"// You'll learn about functions soon.",
|
||||
"(function(y, z){return('myArray = ' + JSON.stringify(y) + ' & removed = ' + JSON.stringify(z));})(myArray, removed);"
|
||||
"(function(y, z){return 'myArray = ' + JSON.stringify(y) + ' & removed = ' + JSON.stringify(z);})(myArray, removed);"
|
||||
],
|
||||
"type": "waypoint",
|
||||
"challengeType": 1
|
||||
@ -575,7 +576,7 @@
|
||||
"Take the myArray array and <code>push()</code> this value to the end of it: <code>[\"dog\", 3]</code>."
|
||||
],
|
||||
"tests": [
|
||||
"assert((function(d){if(d[2] != undefined && d[0] == 'John' && d[1] == 23 && d[2][0] == 'dog' && d[2][1] == 3 && d[2].length == 2){return(true);}else{return(false);}})(myArray), 'myArray should only have the first two values left([\"John\", 23, [\"dog\", 3]])');"
|
||||
"assert((function(d){if(d[2] != undefined && d[0] == 'John' && d[1] == 23 && d[2][0] == 'dog' && d[2][1] == 3 && d[2].length == 2){return true;}else{return false;}})(myArray), 'myArray should only have the first two values left([\"John\", 23, [\"dog\", 3]])');"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"var ourArray = [\"Stimpson\", \"J\", [\"cat\"]];",
|
||||
@ -592,7 +593,7 @@
|
||||
"// Only change code above this line.",
|
||||
"// We use this function to show you the value of your variable in your output box.",
|
||||
"// You'll learn about functions soon.",
|
||||
"(function(z){return('myArray = ' + JSON.stringify(z));})(myArray);"
|
||||
"(function(z){return 'myArray = ' + JSON.stringify(z);})(myArray);"
|
||||
],
|
||||
"type": "waypoint",
|
||||
"challengeType": 1
|
||||
@ -606,8 +607,8 @@
|
||||
"Take the myArray array and <code>shift()</code> the first value off of it."
|
||||
],
|
||||
"tests": [
|
||||
"assert((function(d){if(d[0] == 23 && d[1][0] == 'dog' && d[1][1] == 3 && d[2] == undefined){return(true);}else{return(false);}})(myArray), 'myArray should only have the first two values left([\"John\", 23])');",
|
||||
"assert((function(d){if(d === 'John' && typeof(myRemoved) === 'string'){return(true);}else{return(false);}})(myRemoved), 'myRemoved should contain \"John\"');"
|
||||
"assert((function(d){if(d[0] == 23 && d[1][0] == 'dog' && d[1][1] == 3 && d[2] == undefined){return true;}else{return false;}})(myArray), 'myArray should only have the last two values left([23, [\"dog\", 3]])');",
|
||||
"assert((function(d){if(d === 'John' && typeof(myRemoved) === 'string'){return true;}else{return false;}})(myRemoved), 'myRemoved should contain \"John\"');"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"var ourArray = [\"Stimpson\", \"J\", [\"cat\"]];",
|
||||
@ -623,7 +624,7 @@
|
||||
"",
|
||||
"// We use this function to show you the value of your variable in your output box.",
|
||||
"// You'll learn about functions soon.",
|
||||
"(function(y, z){return('myArray = ' + JSON.stringify(y) + ' & myRemoved = ' + JSON.stringify(z));})(myArray, myRemoved);"
|
||||
"(function(y, z){return 'myArray = ' + JSON.stringify(y) + ' & myRemoved = ' + JSON.stringify(z);})(myArray, myRemoved);"
|
||||
],
|
||||
"type": "waypoint",
|
||||
"challengeType": 1
|
||||
@ -637,7 +638,7 @@
|
||||
"Let's take the code we had last time and <code>unshift</code>this value to the start: <code>\"Paul\" </code>"
|
||||
],
|
||||
"tests": [
|
||||
"assert((function(d){if(d[0].toLowerCase() == 'paul' && d[1] == 23 && d[2][0] != undefined && d[2][0] == 'dog' && d[2][1] != undefined && d[2][1] == 3){return(true);}else{return(false);}})(myArray), 'myArray should now have [\"Paul\", 23, [\"dog\", 3]])');"
|
||||
"assert((function(d){if(d[0].toLowerCase() == 'paul' && d[1] == 23 && d[2][0] != undefined && d[2][0] == 'dog' && d[2][1] != undefined && d[2][1] == 3){return true;}else{return false;}})(myArray), 'myArray should now have [\"Paul\", 23, [\"dog\", 3]])');"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"var ourArray = [\"Stimpson\", \"J\", [\"cat\"]];",
|
||||
@ -655,7 +656,7 @@
|
||||
"// Only change code above this line.",
|
||||
"// We use this function to show you the value of your variable in your output box.",
|
||||
"// You'll learn about functions soon.",
|
||||
"(function(y, z){return('myArray = ' + JSON.stringify(y));})(myArray);"
|
||||
"(function(y, z){return 'myArray = ' + JSON.stringify(y);})(myArray);"
|
||||
],
|
||||
"type": "waypoint",
|
||||
"challengeType": 1
|
||||
@ -668,13 +669,13 @@
|
||||
"In JavaScript, we can divide up our code into reusable parts called <code>functions</code>.",
|
||||
"Here's an example of a function:",
|
||||
"<code>function functionName (a, b) {</code>",
|
||||
"<code>  return(a + b);</code>",
|
||||
"<code>  return a + b;</code>",
|
||||
"<code>}</code>",
|
||||
"We can \"call\" our function like this: <code>functionName();</code>, and it will run and return it's <code>return</code> value to us.",
|
||||
"Create and call a function called <code>myFunction</code>."
|
||||
"We can \"call\" our function like this: <code>functionName();</code>, and it will run and return its <code>return</code> value to us.",
|
||||
"Create and call a function called <code>myFunction</code> that returns the sum of a and b."
|
||||
],
|
||||
"tests":[
|
||||
"assert((function(){if(typeof(f) !== \"undefined\" && typeof(f) === \"number\" && f === a + b && editor.getValue().match(/return/gi).length >= 1 && editor.getValue().match(/a/gi).length >= 1 && editor.getValue().match(/b/gi).length >= 1 && editor.getValue().match(/\\+/gi).length >= 1){return(true);}else{return(false);}})(), 'Your function should return the value of a + b');"
|
||||
"assert((function(){if(typeof(f) !== \"undefined\" && typeof(f) === \"number\" && f === a + b && editor.getValue().match(/return/gi).length >= 1 && editor.getValue().match(/a/gi).length >= 1 && editor.getValue().match(/b/gi).length >= 1 && editor.getValue().match(/\\+/gi).length >= 1){return true;}else{return false;}})(), 'Your function should return the value of a + b');"
|
||||
],
|
||||
"challengeSeed":[
|
||||
"var a = 4;",
|
||||
@ -684,9 +685,9 @@
|
||||
" return a - b;",
|
||||
"};",
|
||||
"",
|
||||
"//Don't modify above this line",
|
||||
"//Create a function called myFunction that returns the value of a plus b.",
|
||||
" // Only change code below this line.",
|
||||
"// Don't modify above this line",
|
||||
"// Create a function called myFunction that returns the value of a plus b.",
|
||||
"// Only change code below this line.",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
@ -696,7 +697,7 @@
|
||||
"// You'll learn about functions soon.",
|
||||
"if(typeof(myFunction) !== \"undefined\"){",
|
||||
"var f=myFunction(a,b);",
|
||||
"(function(){return(f);})();",
|
||||
"(function(){return f;})();",
|
||||
"}"
|
||||
],
|
||||
"type": "waypoint",
|
||||
@ -717,14 +718,14 @@
|
||||
"<code> \"enemies\": [\"Water\", \"Dogs\"]</code>",
|
||||
"<code>};</code>",
|
||||
"</code>",
|
||||
"Objects are useful for storing data in a structured way, and can represents real world objects, like a cats.",
|
||||
"Let's try to make an Object that represents a dog called myDog!"
|
||||
"Objects are useful for storing data in a structured way, and can represents real world objects, like a cat.",
|
||||
"Let's try to make an Object that represents a dog called myDog which contains the properties 'name' (String), 'legs' (Number), 'tails' (Number) and 'friends' (Array)!"
|
||||
],
|
||||
"tests":[
|
||||
"assert((function(z){if(z.hasOwnProperty(\"name\") && z.name !== undefined && typeof(z.name) === \"string\"){return(true);}else{return(false);}})(myDog), 'myDog should contain the property name and it should be a string');",
|
||||
"assert((function(z){if(z.hasOwnProperty(\"legs\") && z.legs !== undefined && typeof(z.legs) === \"number\"){return(true);}else{return(false);}})(myDog), 'myDog should contain the property legs and it should be a number');",
|
||||
"assert((function(z){if(z.hasOwnProperty(\"tails\") && z.tails !== undefined && typeof(z.tails) === \"number\"){return(true);}else{return(false);}})(myDog), 'myDog should contain the property tails and it should be a number');",
|
||||
"assert((function(z){if(z.hasOwnProperty(\"friends\") && z.friends !== undefined && Array.isArray(z.friends)){return(true);}else{return(false);}})(myDog), 'myDog should contain the property friends and it should be an array');"
|
||||
"assert((function(z){if(z.hasOwnProperty(\"name\") && z.name !== undefined && typeof(z.name) === \"string\"){return true;}else{return false;}})(myDog), 'myDog should contain the property name and it should be a string');",
|
||||
"assert((function(z){if(z.hasOwnProperty(\"legs\") && z.legs !== undefined && typeof(z.legs) === \"number\"){return true;}else{return false;}})(myDog), 'myDog should contain the property legs and it should be a number');",
|
||||
"assert((function(z){if(z.hasOwnProperty(\"tails\") && z.tails !== undefined && typeof(z.tails) === \"number\"){return true;}else{return false;}})(myDog), 'myDog should contain the property tails and it should be a number');",
|
||||
"assert((function(z){if(z.hasOwnProperty(\"friends\") && z.friends !== undefined && Array.isArray(z.friends)){return true;}else{return false;}})(myDog), 'myDog should contain the property friends and it should be an array');"
|
||||
],
|
||||
"challengeSeed":[
|
||||
"//var ourDog = {",
|
||||
@ -745,7 +746,7 @@
|
||||
"",
|
||||
"// Only change code above this line.",
|
||||
"// We use this function to show you the value of your variable in your output box.",
|
||||
"(function(z){return(z);})(myDog);"
|
||||
"(function(z){return z;})(myDog);"
|
||||
],
|
||||
"type": "waypoint",
|
||||
"challengeType": 1
|
||||
@ -794,7 +795,7 @@
|
||||
"",
|
||||
"// Only change code above this line.",
|
||||
"// We use this function to show you the value of your variable in your output box.",
|
||||
"(function(z){return(z);})(myDog);"
|
||||
"(function(z){return z;})(myDog);"
|
||||
],
|
||||
"type": "waypoint",
|
||||
"challengeType": 1
|
||||
@ -843,7 +844,7 @@
|
||||
"<code>  ourArray.push(i);</code>",
|
||||
"<code>  i++;</code>",
|
||||
"<code>}</code>",
|
||||
"Let's try getting a for loop to work by pushing values to an array."
|
||||
"Let's try getting a while loop to work by pushing values to an array."
|
||||
],
|
||||
"tests":[
|
||||
"assert(editor.getValue().match(/while/g), 'You should be using a while loop for this.');",
|
||||
@ -877,13 +878,13 @@
|
||||
" //Change the 0 to Math.random()",
|
||||
" // Only change code below this line.",
|
||||
"",
|
||||
" return(0);",
|
||||
" return 0;",
|
||||
"",
|
||||
"// 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
|
||||
@ -894,16 +895,16 @@
|
||||
"difficulty":"9.9828",
|
||||
"description":[
|
||||
"It's great that we can create random decimal numbers, but it's even more useful if we use it to generate a random whole number.",
|
||||
"To achieve this we can multiply the random number by ten and use the <code>Math.floor()</code> to convert the decimal number to a whole number",
|
||||
"This technique gives us a whole number between zero and nine",
|
||||
"To achieve this we can multiply the random number by ten and use the <code>Math.floor()</code> to convert the decimal number to a whole number.",
|
||||
"This technique gives us a whole number between zero and nine.",
|
||||
"Example:",
|
||||
"<code>Math.floor(Math.random()*10);</code>",
|
||||
"Let's give this technique a go now"
|
||||
"Let's give this technique a go now."
|
||||
],
|
||||
"tests":[
|
||||
"assert(typeof(myFunction()) === \"number\", 'The result of myFunction should be a number');",
|
||||
"assert(editor.getValue().match(/Math.random/g), 'You should be using Math.random to create a random number');",
|
||||
"assert(!(''+myFunction()).match(/\\./g), 'You should have multiplied the result of Math.random but 10 to make it a number that\\'s greater then zero');",
|
||||
"assert(!(''+myFunction()).match(/\\./g), 'You should have multiplied the result of Math.random by 10 to make it a number that\\'s greater than zero');",
|
||||
"assert(editor.getValue().match(/Math.floor/g), 'You should use Math.floor to remove the decimal part of the number');"
|
||||
],
|
||||
"challengeSeed":[
|
||||
@ -912,13 +913,13 @@
|
||||
"",
|
||||
" // Only change code below this line.",
|
||||
"",
|
||||
" return(Math.random());",
|
||||
" return Math.random();",
|
||||
"",
|
||||
" // 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
|
||||
@ -935,7 +936,7 @@
|
||||
"tests":[
|
||||
"assert(myFunction() >= min, 'The random number that\\'s generated by myFunction should be greater than or equal to the minimum number');",
|
||||
"assert(myFunction() <= max, 'The random number that\\'s generated by myFunction should be less than or equal to the maximum number');",
|
||||
"assert((function(){if(editor.getValue().match(/max/g).length >= 2 && editor.getValue().match(/min/g).length >= 2 && editor.getValue().match(/Math.floor/g) && editor.getValue().match(/Math.random/g)){return(true);}else{return(false);}})(), 'You should be using the function given in the description to calculate the random in number in a range');"
|
||||
"assert((function(){if(editor.getValue().match(/max/g).length >= 2 && editor.getValue().match(/min/g).length >= 2 && editor.getValue().match(/Math.floor/g) && editor.getValue().match(/Math.random/g)){return true;}else{return false;}})(), 'You should be using the function given in the description to calculate the random in number in a range');"
|
||||
],
|
||||
"challengeSeed":[
|
||||
"var min = 0;",
|
||||
@ -944,12 +945,12 @@
|
||||
" // Make myFunction return a random number between zero and nine instead of a decimal",
|
||||
" // Only change code below this line.",
|
||||
"",
|
||||
" return(Math.random());",
|
||||
" return Math.random();",
|
||||
"}",
|
||||
"",
|
||||
"// 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
|
||||
@ -963,16 +964,16 @@
|
||||
"if statements require some sort of boolean condition to evaluate.",
|
||||
"Example:",
|
||||
"<code> if (1 === 2) {</code>",
|
||||
"<code>  return(true);</code>",
|
||||
"<code>  return true;</code>",
|
||||
"<code>}</code>",
|
||||
"<code>else {</code>",
|
||||
"<code>  return(false);</code>",
|
||||
"<code>  return false;</code>",
|
||||
"<code>}</code>",
|
||||
"Let's use <code>if</code> and <code>else</code> statements to make a coin-flip game.",
|
||||
"Create an <code>if-else statement</code> to return <code>heads</code> if the flip var is zero, or else return <code>tails</code> 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');"
|
||||
],
|
||||
@ -988,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
|
||||
@ -1021,8 +1022,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
|
||||
@ -1039,7 +1040,7 @@
|
||||
],
|
||||
"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() {",
|
||||
@ -1051,8 +1052,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
|
||||
@ -1069,7 +1070,7 @@
|
||||
],
|
||||
"tests":[
|
||||
"assert(test === 7, 'Your RegEx should have found seven spaces in the <code>testString</code>.');",
|
||||
"assert(editor.getValue().match(/\\/\\\\s\\+\\//gi), 'You should be using the following expression /\\s+/gi to find the spaces in the <code>testString</code>.');"
|
||||
"assert(editor.getValue().match(/\\/\\\\s\\+\\//gi), 'You should be using the following expression /\\\\s+/gi to find the spaces in the <code>testString</code>.');"
|
||||
],
|
||||
"challengeSeed":[
|
||||
"var test = (function(){",
|
||||
@ -1081,8 +1082,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
|
||||
@ -1097,7 +1098,7 @@
|
||||
],
|
||||
"tests":[
|
||||
"assert(test === 49, 'Your RegEx should have found forty nine non-space characters in the <code>testString</code>.');",
|
||||
"assert(editor.getValue().match(/\\/\\\\S\\/gi/gi), 'You should be using the following expression <code>/\\S/gi</code> to find non-space characters in the <code>testString</code>.');"
|
||||
"assert(editor.getValue().match(/\\/\\\\S\\/gi/gi), 'You should be using the following expression <code>/\\\\S/gi</code> to find non-space characters in the <code>testString</code>.');"
|
||||
],
|
||||
"challengeSeed":[
|
||||
"var test = (function(){",
|
||||
@ -1109,8 +1110,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
|
||||
@ -1130,7 +1131,7 @@
|
||||
"assert(typeof(runSlots($(\".slot\"))[0]) === \"number\", '<code>slotOne</code> should be a random number.')",
|
||||
"assert(typeof(runSlots($(\".slot\"))[1]) === \"number\", '<code>slotTwo</code> should be a random number.')",
|
||||
"assert(typeof(runSlots($(\".slot\"))[2]) === \"number\", '<code>slotThree</code> 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 <code>Math.floor(Math.random() * (3 - 1 + 1)) + 1;</code> 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 <code>Math.floor(Math.random() * (3 - 1 + 1)) + 1;</code> three times to generate your random numbers.')"
|
||||
],
|
||||
"challengeSeed":[
|
||||
"fccss",
|
||||
@ -1153,7 +1154,7 @@
|
||||
" if(slotOne !== undefined && slotTwo !== undefined && slotThree !== undefined){",
|
||||
" $(\".logger\").html(slotOne + \" \" + slotTwo + \" \" + slotThree);",
|
||||
" }",
|
||||
" return([slotOne, slotTwo, slotThree]);",
|
||||
" return [slotOne, slotTwo, slotThree];",
|
||||
" }",
|
||||
"",
|
||||
" $(document).ready(function(){",
|
||||
@ -1277,14 +1278,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 <code>null</code>, 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 <code>null</code>.",
|
||||
"Let's create an <code>if statement</code> with multiple conditions in order to check whether all numbers are equal.",
|
||||
"<code>if(slotOne !== slotTwo || slotTwo !== slotThree){</code>",
|
||||
"<code>  return(null);</code>",
|
||||
"<code>  return null;</code>",
|
||||
"<code>}</code>"
|
||||
],
|
||||
"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",
|
||||
@ -1313,7 +1314,7 @@
|
||||
" $(\".logger\").append(\" \" + slotTwo);",
|
||||
" $(\".logger\").append(\" \" + slotThree);",
|
||||
" }",
|
||||
" return([slotOne, slotTwo, slotThree]);",
|
||||
" return [slotOne, slotTwo, slotThree];",
|
||||
" }",
|
||||
"",
|
||||
" $(document).ready(function(){",
|
||||
@ -1442,8 +1443,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",
|
||||
@ -1468,7 +1469,7 @@
|
||||
" // Only change code above this line.",
|
||||
" ",
|
||||
" if(slotOne !== slotTwo || slotTwo !== slotThree){",
|
||||
" return(null);",
|
||||
" return null;",
|
||||
" }",
|
||||
" ",
|
||||
" if(slotOne !== undefined && slotTwo !== undefined && slotThree !== undefined){",
|
||||
@ -1477,7 +1478,7 @@
|
||||
" $(\".logger\").append(\" \" + slotThree);",
|
||||
" }",
|
||||
" ",
|
||||
" return([slotOne, slotTwo, slotThree]);",
|
||||
" return [slotOne, slotTwo, slotThree];",
|
||||
" }",
|
||||
"",
|
||||
" $(document).ready(function(){",
|
||||
@ -1635,7 +1636,7 @@
|
||||
" // Only change code above this line.",
|
||||
" ",
|
||||
" if(slotOne !== slotTwo || slotTwo !== slotThree){",
|
||||
" return(null);",
|
||||
" return null;",
|
||||
" }",
|
||||
" ",
|
||||
" if(slotOne !== undefined && slotTwo !== undefined && slotThree !== undefined){",
|
||||
@ -1644,7 +1645,7 @@
|
||||
" $('.logger').append(' ' + slotThree);",
|
||||
" }",
|
||||
" ",
|
||||
" return([slotOne, slotTwo, slotThree]);",
|
||||
" return [slotOne, slotTwo, slotThree];",
|
||||
" }",
|
||||
"",
|
||||
" $(document).ready(function(){",
|
||||
|
||||
@ -45,6 +45,7 @@
|
||||
"<span class='text-info'>Rule #1:</span> Don't look at the example project's code on CodePen. Figure it out for yourself.",
|
||||
"<span class='text-info'>Rule #2:</span> You may use whichever libraries or APIs you need.",
|
||||
"<span class='text-info'>Rule #3:</span> Reverse engineer the example project's functionality, and also feel free to personalize it.",
|
||||
"<span class='text-info'>Hint:</span> If you don't want to start from scratch, you can fork this simple Bootstrap portfolio template on CodePen: <a href='http://codepen.io/FreeCodeCamp/pen/mJNqQj/' target='_blank'>http://codepen.io/FreeCodeCamp/pen/mJNqQj</a>.",
|
||||
"Here are the <a href='http://en.wikipedia.org/wiki/User_story' target='_blank'>user stories</a> you must enable, and optional bonus user stories:",
|
||||
"<span class='text-info'>User Story:</span> As a user, I can access all of the portfolio webpage's content just by scrolling.",
|
||||
"<span class='text-info'>User Story:</span> As a user, I can click different buttons that will take me to the portfolio creator's different social media pages.",
|
||||
|
||||
@ -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 <code>text-center</code> to our <code>h1</code> and <code>h2</code> elements.",
|
||||
"Remember that you can add several classes to the same element by separating each of them with a space, like this: <code><h2 class=\"text-red text-center\">your text</h2></code>."
|
||||
"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 <code>text-center</code> to our <code>h2</code> element.",
|
||||
"Remember that you can add several classes to the same element by separating each of them with a space, like this: <code><h2 class=\"red-text text-center\">your text</h2></code>."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"h2\").hasClass(\"text-center\"), 'Your <code>h2</code> element should be centered by applying the class <code>text-center</code>')"
|
||||
@ -347,7 +347,7 @@
|
||||
"description": [
|
||||
"Normally, your <code>button</code> 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 <code>inline</code> elements and <code>block-level</code> elements:",
|
||||
"<img class=\"img-responsive\" src=\"https://www.evernote.com/l/AHTFU358y71AV6mokPeuTEgrZVdUJ4A8v3AB/image.png\" alt=\"An \"inline\" button is as small as the text it contains. In this image, it's centered. Below it is a \"block-level\" button, which stretches to fill the entire horizontal space.'>",
|
||||
"<img class=\"img-responsive\" src=\"http://i.imgur.com/O32cDWE.png\" alt=\"An \"inline\" button is as small as the text it contains. In this image, it's centered. Below it is a \"block-level\" button, which stretches to fill the entire horizontal space.'>",
|
||||
"Note that these buttons still need the <code>btn</code> class.",
|
||||
"Add Bootstrap's <code>btn-block</code> class to your Bootstrap button."
|
||||
],
|
||||
@ -614,7 +614,7 @@
|
||||
"Note that these buttons still need the <code>btn</code> and <code>btn-block</code> classes."
|
||||
],
|
||||
"tests": [
|
||||
"assert(new RegExp(\"delete\",\"gi\").test($(\"button\").text()), 'Create a new <code>button</code> element with the text \"delete\".')",
|
||||
"assert(new RegExp(\"Delete\",\"gi\").test($(\"button\").text()), 'Create a new <code>button</code> element with the text \"Delete\".')",
|
||||
"assert($(\"button.btn-block.btn\").length > 2, 'All of your Bootstrap buttons should have the <code>btn</code> and <code>btn-block</code> classes.')",
|
||||
"assert($(\"button\").hasClass(\"btn-danger\"), 'Your new button should have the class <code>btn-danger</code>.')",
|
||||
"assert(editor.match(/<\\/button>/g) && editor.match(/<button/g) && editor.match(/<\\/button>/g).length === editor.match(/<button/g).length, 'Make sure all your <code>button</code> 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 <code>div</code> element.",
|
||||
"Here's a diagram of how Bootstrap's 12-column grid layout works:",
|
||||
"<a href=\"https://www.evernote.com/l/AHTwlE2XCLhGFYJzoye_QfsF3ho6y87via4B/image.png\" target=\"_blank\"><img class=\"img-responsive\" src=\"https://www.evernote.com/l/AHTwlE2XCLhGFYJzoye_QfsF3ho6y87via4B/image.png\"></a>",
|
||||
"<a href=\"http://i.imgur.com/FaYuui8.png\" target=\"_blank\"><img class=\"img-responsive\" src=\"http://i.imgur.com/FaYuui8.png\" alt=\"an image illustrating Bootstrap's grid system\"></a>",
|
||||
"Note that in this illustration, the <code>col-md-*</code> class is being used. Here, <code>md</code> means medium, and <code>*</code> 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 <code>col-xs-*</code>, where <code>xs</code> means extra small (like an extra-small mobile phone screen), and <code>*</code> is the number of columns specifying how many columns wide the element should be.",
|
||||
"Put the <code>Like</code>, <code>Info</code> and <code>Delete</code> buttons side-by-side by nesting all three of them within one <code><div class=\"row\"></code> element, then each of them within a <code><div class=\"col-xs-4\"></code> element.",
|
||||
@ -893,9 +893,9 @@
|
||||
"title": "Use Spans for Inline Elements",
|
||||
"difficulty": 2.105,
|
||||
"description": [
|
||||
"You can use use spans to create inline elements. Remember when we used the <code>btn-block</code> class to make the button grow fill the entire row?",
|
||||
"You can use spans to create inline elements. Remember when we used the <code>btn-block</code> class to make the button fill the entire row?",
|
||||
"This image illustrates the difference between <code>inline</code> elements and <code>block-level</code> elements:",
|
||||
"<img class=\"img-responsive\" src=\"https://www.evernote.com/l/AHTFU358y71AV6mokPeuTEgrZVdUJ4A8v3AB/image.png\" alt=\"An \"inline\" button is as small as the text it contains. In this image, it's centered. Below it is a \"block-level\" button, which stretches to fill the entire horizontal space.'>",
|
||||
"<img class=\"img-responsive\" src=\"http://i.imgur.com/O32cDWE.png\" alt=\"An \"inline\" button is as small as the text it contains. In this image, it's centered. Below it is a \"block-level\" button, which stretches to fill the entire horizontal space.'>",
|
||||
"By using the <code>span</code> 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 <code>span</code> element. Then give that <code>span</code> the class <code>text-danger</code> to make the text red.",
|
||||
"Here's how you would do this with the \"Top 3 things cats hate\" element: <code><p>Top 3 things cats <span class = \"text-danger\">hate</span></p></code>"
|
||||
@ -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 <code>div</code> element.",
|
||||
"Here's a diagram of how Bootstrap's 12-column grid layout works:",
|
||||
"<a href=\"https://www.evernote.com/l/AHTwlE2XCLhGFYJzoye_QfsF3ho6y87via4B/image.png\" target=\"_blank\"><img class=\"img-responsive\" src=\"https://www.evernote.com/l/AHTwlE2XCLhGFYJzoye_QfsF3ho6y87via4B/image.png\"></a>",
|
||||
"<a href=\"http://i.imgur.com/FaYuui8.png\" target=\"_blank\"><img class=\"img-responsive\" src=\"http://i.imgur.com/FaYuui8.png\" alt=\"an image illustrating Bootstrap's grid system\"></a>",
|
||||
"Note that in this illustration, the <code>col-md-*</code> class is being used. Here, <code>md</code> means medium, and <code>*</code> 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 <code>col-xs-*</code>, where <code>xs</code> means extra small (like an extra-small mobile phone screen), and <code>*</code> is the number of columns specifying how many columns wide the element should be.",
|
||||
"Nest your first image and your <code>h2</code> element within a single <code><div class=\"row\"></code> element. Nest your <code>h2</code> text within a <code><div class=\"col-xs-8\"></code> and your image in a <code><div class=\"col-xs-4\"></code> so that they are on the same line.",
|
||||
@ -1532,7 +1532,7 @@
|
||||
"difficulty": 2.17,
|
||||
"description": [
|
||||
"Now let's get your form <code>input</code> and your submission <code>button</code> on the same line. We'll do this the same way we have previously: by using a <code>div</code> element with the class <code>row</code>, and other <code>div</code> elements within it using the <code>col-xs-*</code> class.",
|
||||
"Nest both your form's text <code>input</code> and submit <code>button</code> within a <code>div</code> with the class <code>row</code>. Nest your form's text <code>input</code> within a div with the class of \"col-xs-7\". Nest your form's submit <code>button</code> in a <code>div</code> with the class <code>col-xs-5</code>.",
|
||||
"Nest both your form's text <code>input</code> and submit <code>button</code> within a <code>div</code> with the class <code>row</code>. Nest your form's text <code>input</code> within a div with the class of <code>col-xs-7</code>. Nest your form's submit <code>button</code> in a <code>div</code> with the class <code>col-xs-5</code>.",
|
||||
"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": [
|
||||
@ -1770,7 +1770,7 @@
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"div\").length > 4, 'Add a <code>div</code> element with the class <code>well</code> inside each of your <code>div class=\"col-xs-6\"> elements</code>')",
|
||||
"assert($(\"div.col-xs-6\").children(\"div.well\").length > 1, 'Nest both of your <code>div class=\"col-xs-6\"</code> elements within your <code>div class=\"row\"</code> element.')",
|
||||
"assert($(\"div.col-xs-6 div.well\").length > 1, 'Nest both of your <code>div class=\"col-xs-6\"</code> elements within your <code>div class=\"row\"</code> element.')",
|
||||
"assert(editor.match(/<\\/div>/g) && editor.match(/<div/g) && editor.match(/<\\/div>/g).length === editor.match(/<div/g).length, 'Make sure all your <code>div</code> elements have closing tags.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
|
||||
@ -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 <code>how-to-npm</code> with this command: <code>npm install -g git-it</code>",
|
||||
"Install <code>git-it</code> with this command: <code>npm install -g git-it</code>",
|
||||
"Now start the tutorial by running <code>git-it</code>.",
|
||||
"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: <code>cd ~/workspace</code>.",
|
||||
|
||||
@ -372,7 +372,7 @@
|
||||
"difficulty": 1.09,
|
||||
"description": [
|
||||
"Delete your <code>h2</code> element's style attribute and instead create a CSS <code>style</code> element. Add the necessary CSS to turn all <code>h2</code> elements blue.",
|
||||
"With CSS, there are hundreds of CSS <code>attributes</code> that you can use to change the way an element looks on your page.",
|
||||
"With CSS, there are hundreds of CSS <code>properties</code> that you can use to change the way an element looks on your page.",
|
||||
"When you entered <code><h2 style=\"color: red\">CatPhotoApp</h2></code>, you were giving that individual <code>h2</code> element an <code>inline style</code>.",
|
||||
"That's one way to add style to an element, but a better way is by using <code>CSS</code>, which stands for <code>Cascading Style Sheets</code>.",
|
||||
"At the top of your code, create a <code>style</code> element like this: <code><style></style></code>.",
|
||||
@ -428,8 +428,12 @@
|
||||
"description": [
|
||||
"Create a CSS class called <code>red-text</code> and apply it to your <code>h2</code> element.",
|
||||
"Classes are reusable styles that can be added to HTML elements.",
|
||||
"Here's the anatomy of a CSS class:",
|
||||
"<img class=\"img-responsive\" alt=\"a diagram of how style tags are composed, which is also described in detail on the following lines.\" src=\"https://www.evernote.com/l/AHSCzZV0l_dDLrqD8r9JsHaBWfEzdN0OpRwB/image.png\">",
|
||||
"Here's an example CSS class declaration:",
|
||||
"<code><style></code>",
|
||||
"<code>  .blue-text {</code>",
|
||||
"<code>    color: blue;</code>",
|
||||
"<code>  }</code>",
|
||||
"<code></style></code>",
|
||||
"You can see that we've created a CSS class called <code>blue-text</code> within the <code><style></code> tag.",
|
||||
"You can apply a class to an HTML element like this: <code><h2 class=\"blue-text\">CatPhotoApp</h2></code>.",
|
||||
"Note that in your CSS <code>style</code> element, classes should start with a period. In your HTML elements' class declarations, classes shouldn't start with a period.",
|
||||
@ -540,7 +544,7 @@
|
||||
"description": [
|
||||
"Create a second <code>p</code> element with the following <code>kitty ipsum text</code>: <code>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</code>",
|
||||
"Then, inside your <code><style></code> element, set the <code>font-size</code> of all <code>p</code> elements to 16 pixels.",
|
||||
"Font size is controlled by the <code>font-size</code> CSS attribute, like this: <code>h1 { font-size: 30px; }</code>.",
|
||||
"Font size is controlled by the <code>font-size</code> CSS property, like this: <code>h1 { font-size: 30px; }</code>.",
|
||||
"See if you can figure out how to give both of your <code>p</code> elements the font-size of 16 pixels (<code>16px</code>). You can do this inside the same <code><style></code> tag that we created for your <code>red-text</code> class."
|
||||
],
|
||||
"tests": [
|
||||
@ -591,7 +595,7 @@
|
||||
"difficulty": 1.14,
|
||||
"description": [
|
||||
"Make all of your <code>p</code> elements use the <code>Monospace</code> font.",
|
||||
"You can set an element's font by using the <code>font-family</code> attribute.",
|
||||
"You can set an element's font by using the <code>font-family</code> property.",
|
||||
"For example, if you wanted to set your <code>h2</code> element's font to <code>Sans-serif</code>, you would use the following CSS: <code>h2 { font-family: Sans-serif; }</code>."
|
||||
],
|
||||
"tests": [
|
||||
@ -641,7 +645,7 @@
|
||||
"First, you'll need to make a <code>call</code> to Google to grab the <code>Lobster</code> font and load it into your HTML.",
|
||||
"Copy the following code snippet and paste it into your code editor:",
|
||||
"<code><link href=\"http://fonts.googleapis.com/css?family=Lobster\" rel=\"stylesheet\" type=\"text/css\"></code>.",
|
||||
"Now you can set <code>Lobster</code> as a font-family attribute on your <code>h2</code> element."
|
||||
"Now you can set <code>Lobster</code> as a font-family value on your <code>h2</code> element."
|
||||
],
|
||||
"tests": [
|
||||
"assert(new RegExp(\"googleapis\", \"gi\").test(editor), 'Import the <code>Lobster</code> font.')",
|
||||
@ -750,7 +754,7 @@
|
||||
"difficulty": 1.17,
|
||||
"description": [
|
||||
"You can add images to your website by using the <code>img</code> element, and point to a specific image's URL using the <code>src</code> attribute.",
|
||||
"An example of this would be <code><img src=\"www.your-image-source.com/your-image.jpg\"></code>. Note that in most cases, <code>img</code> elements are self-closing.",
|
||||
"An example of this would be <code><img src=\"http://www.your-image-source.com/your-image.jpg\"></code>. Note that in most cases, <code>img</code> elements are self-closing.",
|
||||
"Try it with this image: <code>https://bit.ly/fcc-relaxing-cat</code>."
|
||||
],
|
||||
"tests": [
|
||||
@ -804,7 +808,7 @@
|
||||
"title": "Size your Images",
|
||||
"difficulty": 1.18,
|
||||
"description": [
|
||||
"CSS has an attribute called <code>width</code> that controls an element's width. Just like with fonts, we'll use <code>px</code> (pixels) to specify the image's width.",
|
||||
"CSS has a property called <code>width</code> that controls an element's width. Just like with fonts, we'll use <code>px</code> (pixels) to specify the image's width.",
|
||||
"For example, if we wanted to create a CSS class called <code>larger-image</code> that gave HTML elements a width of 500 pixels, we'd use: <code><style> .larger-image { width: 500px; } </style></code>.",
|
||||
"Create a class called <code>smaller-image</code> and use it to resize the image so that it's only 100 pixels wide."
|
||||
],
|
||||
@ -860,7 +864,7 @@
|
||||
"title": "Add Borders Around your Elements",
|
||||
"difficulty": 1.19,
|
||||
"description": [
|
||||
"CSS borders have attributes like <code>style</code>, <code>color</code> and <code>width</code>.",
|
||||
"CSS borders have properties like <code>style</code>, <code>color</code> and <code>width</code>.",
|
||||
"For example, if we wanted to create a red, 5 pixel border around an HTML element, we could use this class: <code><style> .thin-red-border { border-color: red; border-width: 5px; border-style: solid; } </style></code>.",
|
||||
"Create a class called <code>thick-green-border</code> that puts a 10-pixel-wide green border with a style of <code>solid</code> around an HTML element, and apply that class to your cat photo."
|
||||
],
|
||||
@ -923,8 +927,8 @@
|
||||
"title": "Add Rounded Corners with a Border Radius",
|
||||
"difficulty": 1.20,
|
||||
"description": [
|
||||
"Your cat photo currently has sharp corners. We can round out those corners with a CSS attribute called <code>border-radius</code>.",
|
||||
"You can specify a <code>border-radius</code> with pixels. This will affect how rounded the corners are. Add this attribute to your <code>thick-green-border</code> class and set it to <code>10px</code>.",
|
||||
"Your cat photo currently has sharp corners. We can round out those corners with a CSS property called <code>border-radius</code>.",
|
||||
"You can specify a <code>border-radius</code> with pixels. This will affect how rounded the corners are. Add this property to your <code>thick-green-border</code> class and set it to <code>10px</code>.",
|
||||
"Give your cat photo a <code>border-radius</code> of <code>10px</code>."
|
||||
],
|
||||
"tests": [
|
||||
@ -1056,13 +1060,13 @@
|
||||
"description": [
|
||||
"<code>a</code> elements, also known as <code>anchor</code> elements, are used to link to content outside of the current page.",
|
||||
"Here's a diagram of an <code>a</code> element. In this case, the <code>a</code> element is used in the middle of a paragraph element, which means the link will appear in the middle of a sentence.",
|
||||
"<img class=\"img-responsive\" alt=\"a diagram of how anchor tags are composed with the same text as on the following line\" src=\"https://www.evernote.com/l/AHSaNaepx_lG9LhhPkVYmagcedpmAeITDsQB/image.png\">",
|
||||
"<img class=\"img-responsive\" alt=\"a diagram of how anchor tags are composed with the same text as on the following line\" src=\"http://i.imgur.com/hviuZwe.png\">",
|
||||
"Here's an example: <code><p>Here's a <a href=\"http://freecodecamp.com\"> link to Free Code Camp</a> for you to follow.</p></code>.",
|
||||
"Create an <code>a</code> element that links to <code>http://catphotoapp.com</code> and has \"cat photos\" as its <code>anchor text</code>."
|
||||
"Create an <code>a</code> element that links to <code>http://freecatphotoapp.com</code> and has \"cat photos\" as its <code>anchor text</code>."
|
||||
],
|
||||
"tests": [
|
||||
"assert((/cat photos/gi).test($(\"a\").text()), 'Your <code>a</code> element should have the <code>anchor text</code> of \"cat photos\"')",
|
||||
"assert(/http:\\/\\/catphotoapp\\.com/gi.test($(\"a\").attr(\"href\")), 'You need an <code>a</code> element that links to <code>http://catphotoapp.com<code>.')",
|
||||
"assert(/http:\\/\\/freecatphotoapp\\.com/gi.test($(\"a\").attr(\"href\")), 'You need an <code>a</code> element that links to <code>http://freecatphotoapp.com</code>.')",
|
||||
"assert(editor.match(/<\\/a>/g) && editor.match(/<\\/a>/g).length === editor.match(/<a/g).length, 'Make sure your <code>a</code> element has a closing tag.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
@ -1114,7 +1118,7 @@
|
||||
"descriptionPt": [],
|
||||
"nameDe": "Waypoint: Verlinke externe Seiten mit Anker Elementen",
|
||||
"descriptionDe": [
|
||||
"Erstelle ein <code>a</code> Element oder \"Anker Element\", das auf http://catphotoapp.com verlinkt und den Link-Text \"cat photos\" oder \"anchor text\" beinhaltet.",
|
||||
"Erstelle ein <code>a</code> Element oder \"Anker Element\", das auf http://freecatphotoapp.com verlinkt und den Link-Text \"cat photos\" oder \"anchor text\" beinhaltet.",
|
||||
"So sieht ein <code>a</code> Element aus. In diesem Fall wird es innerhalb eines Paragraphen Elements verwendet. Das bedeutet dein Link wird innerhalb des Satzes erscheinen.",
|
||||
"<img class=\"img-responsive\" alt=\"Ein Beispiel wie Anker Tags geschrieben werden.\" src=\"https://www.evernote.com/l/AHSaNaepx_lG9LhhPkVYmagcedpmAeITDsQB/image.png\">",
|
||||
"Hier ist ein Beispiel: <code><p>Hier ist ein <a href=\"http://freecodecamp.com\"> Link zum Free Code Camp</a> für dich zum Folgen.</p></code>."
|
||||
@ -1126,16 +1130,16 @@
|
||||
"difficulty": 1.23,
|
||||
"description": [
|
||||
"Again, here's a diagram of an <code>a</code> element for your reference:",
|
||||
"<img class=\"img-responsive\" alt=\"a diagram of how anchor tags are composed with the same text as on the following line\" src=\"https://www.evernote.com/l/AHSaNaepx_lG9LhhPkVYmagcedpmAeITDsQB/image.png\">",
|
||||
"<img class=\"img-responsive\" alt=\"a diagram of how anchor tags are composed with the same text as on the following line\" src=\"http://i.imgur.com/hviuZwe.png\">",
|
||||
"Here's an example: <code><p>Here's a <a href=\"http://freecodecamp.com\"> link to Free Code Camp</a> for you to follow.</p></code>.",
|
||||
"<code>Nesting</code> just means putting one element inside of another element.",
|
||||
"Now nest your <code>a</code> element within a new <code>p</code> element so that the surrounding paragraph says \"click here for cat photos\", but where only \"cat photos\" is a link, and the rest of the text is rest is plain text."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"a\").attr(\"href\").match(/catphotoapp.com/gi).length > 0, 'You need an <code>a</code> element that links to \"catphotoapp.com\".')",
|
||||
"assert($(\"a\").attr(\"href\").match(/freecatphotoapp.com/gi).length > 0, 'You need an <code>a</code> element that links to \"freecatphotoapp.com\".')",
|
||||
"assert($(\"a\").text().match(/cat\\sphotos/gi).length > 0, 'Your <code>a</code> element should have the anchor text of \"cat photos\"')",
|
||||
"assert($(\"p\") && $(\"p\").length > 2, 'Create a new <code>p</code> element around your <code>a</code> element.')",
|
||||
"assert($(\"a[href=\\\"http://www.catphotoapp.com\\\"]\").parent().is(\"p\"), 'Your <code>a</code> element should be nested within your new <code>p</code> element.')",
|
||||
"assert($(\"a[href=\\\"http://www.freecatphotoapp.com\\\"]\").parent().is(\"p\"), 'Your <code>a</code> element should be nested within your new <code>p</code> element.')",
|
||||
"assert($(\"p\").text().match(/click\\shere\\sfor/gi), 'Your <code>p</code> element should have the text \"click here for\".')",
|
||||
"assert(editor.match(/<\\/p>/g) && editor.match(/<p/g) && editor.match(/<\\/p>/g).length === editor.match(/<p/g).length, 'Make sure each of your <code>p</code> elements has a closing tag.')",
|
||||
"assert(editor.match(/<\\/a>/g) && editor.match(/<a/g) && editor.match(/<\\/a>/g).length === editor.match(/<a/g).length, 'Make sure each of your <code>a</code> elements has a closing tag.')"
|
||||
@ -1170,7 +1174,7 @@
|
||||
"",
|
||||
"<h2 class=\"red-text\">CatPhotoApp</h2>",
|
||||
"",
|
||||
"<a href=\"http://www.catphotoapp.com\">cat photos</a>",
|
||||
"<a href=\"http://www.freecatphotoapp.com\">cat photos</a>",
|
||||
"",
|
||||
"<img class=\"smaller-image thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\">",
|
||||
"",
|
||||
@ -1238,7 +1242,7 @@
|
||||
"",
|
||||
"<h2 class=\"red-text\">CatPhotoApp</h2>",
|
||||
"",
|
||||
"<p>Click here for <a href=\"http://www.catphotoapp.com\">cat photos</a>.</p>",
|
||||
"<p>Click here for <a href=\"http://www.freecatphotoapp.com\">cat photos</a>.</p>",
|
||||
"",
|
||||
"<img class=\"smaller-image thick-green-border\" src=\"https://bit.ly/fcc-relaxing-cat\">",
|
||||
"",
|
||||
@ -2351,7 +2355,7 @@
|
||||
"title": "Give a Background Color to a Div Element",
|
||||
"difficulty": 1.39,
|
||||
"description": [
|
||||
"You can set an element's background color with the <code>background-color</code> attribute.",
|
||||
"You can set an element's background color with the <code>background-color</code> property.",
|
||||
"For example, if you wanted an element's background color to be <code>green</code>, you'd use <code>.green-background { background-color: green; }</code> within your <code>style</code> element.",
|
||||
"Create a class called <code>gray-background</code> with the <code>background-color</code> of gray. Assign this class to your <code>div</code> element."
|
||||
],
|
||||
@ -2474,7 +2478,7 @@
|
||||
" width: 100px;",
|
||||
" }",
|
||||
" .gray-background {",
|
||||
" background-color: gray",
|
||||
" background-color: gray;",
|
||||
" }",
|
||||
"</style>",
|
||||
"",
|
||||
@ -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: <code>padding</code>, <code>margin</code>, and <code>border</code>.",
|
||||
"Three important properties control the space that surrounds each HTML element: <code>padding</code>, <code>margin</code>, and <code>border</code>.",
|
||||
"An element's <code>padding</code> controls the amount of space between the element and its <code>border</code>.",
|
||||
"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 <code>padding</code> than the green box.",
|
||||
"When you increase the green box's <code>padding</code>, it will increase the distance between the text <code>padding</code> 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 <code>padding</code> on each of its sides.",
|
||||
"CSS allows you to control the <code>padding</code> of an element on all four sides with <code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code>, and <code>padding-left</code> attributes.",
|
||||
"CSS allows you to control the <code>padding</code> of an element on all four sides with <code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code>, and <code>padding-left</code> properties.",
|
||||
"Give the green box a <code>padding</code> of <code>40px</code> on its top and left side, but only <code>20px</code> on its bottom and right side."
|
||||
],
|
||||
"tests": [
|
||||
@ -2908,7 +2912,7 @@
|
||||
"description": [
|
||||
"Give the green box a <code>margin</code> of <code>40px</code> on its top and left side, but only <code>20px</code> on its bottom and right side.",
|
||||
"Sometimes you will want to customize an element so that it has a different <code>margin</code> on each of its sides.",
|
||||
"CSS allows you to control the <code>margin</code> of an element on all four sides with <code>margin-top</code>, <code>margin-right</code>, <code>margin-bottom</code>, and <code>margin-left</code> attributes."
|
||||
"CSS allows you to control the <code>margin</code> of an element on all four sides with <code>margin-top</code>, <code>margin-right</code>, <code>margin-bottom</code>, and <code>margin-left</code> properties."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\".green-box\").css(\"margin-top\") === \"40px\", 'Your <code>green-box</code> class should give the top of elements <code>40px</code> of <code>margin</code>.')",
|
||||
@ -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 <code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code>, and <code>padding-left</code> attributes, you can specify them all in one line, like this: <code>padding: 10px 20px 10px 20px;</code>.",
|
||||
"Instead of specifying an element's <code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code>, and <code>padding-left</code> properties, you can specify them all in one line, like this: <code>padding: 10px 20px 10px 20px;</code>.",
|
||||
"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 <code>padding</code> of <code>40px</code> on its top and left side, but only <code>20px</code> on its bottom and right side."
|
||||
],
|
||||
@ -3047,7 +3051,7 @@
|
||||
"difficulty": 1.45,
|
||||
"description": [
|
||||
"Let's try this again, but with <code>margin</code> this time.",
|
||||
"Instead of specifying an element's <code>margin-top</code>, <code>margin-right</code>, <code>margin-bottom</code>, and <code>margin-left</code> attributes, you can specify them all in one line, like this: <code>margin: 10px 20px 10px 20px;</code>.",
|
||||
"Instead of specifying an element's <code>margin-top</code>, <code>margin-right</code>, <code>margin-bottom</code>, and <code>margin-left</code> properties, you can specify them all in one line, like this: <code>margin: 10px 20px 10px 20px;</code>.",
|
||||
"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 <code>Clockwise Notation</code> to give an element a margin of <code>40px</code> on its top and left side, but only <code>20px</code> on its bottom and right side."
|
||||
],
|
||||
@ -3159,8 +3163,8 @@
|
||||
"assert(($(\"h1\").length > 0), 'Create an <code>h1</code> element.')",
|
||||
"assert(($(\"h1\").length > 0 && $(\"h1\").text().match(/hello world/i)), 'Your <code>h1</code> element should have the text <code>Hello World</code>.')",
|
||||
"assert(editor.match(/<\\/h1>/g) && editor.match(/<h1/g) && editor.match(/<\\/h1>/g).length === editor.match(/<h1/g).length, 'Make sure your <code>h1</code> element has a closing tag.')",
|
||||
"assert(($(\"body\").css(\"color\") === \"rgb(0, 128, 0)\"), 'Give your <code>body</code> element the <code>color</code> attribute of <code>green</code>.')",
|
||||
"assert(($(\"body\").css(\"font-family\").match(/Monospace/i)), 'Give your <code>body</code> element the <code>font-family</code> attribute of <code>Monospace</code>.')",
|
||||
"assert(($(\"body\").css(\"color\") === \"rgb(0, 128, 0)\"), 'Give your <code>body</code> element the <code>color</code> property of <code>green</code>.')",
|
||||
"assert(($(\"body\").css(\"font-family\").match(/Monospace/i)), 'Give your <code>body</code> element the <code>font-family</code> property of <code>Monospace</code>.')",
|
||||
"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.')",
|
||||
"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.')"
|
||||
],
|
||||
@ -3194,7 +3198,7 @@
|
||||
"description": [
|
||||
"Sometimes your HTML elements will receive multiple styles that conflict with one another.",
|
||||
"For example, your <code>h1</code> 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 <code>override</code> the <code>body</code> element's <code>color: green;</code> 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 <code>override</code> the <code>body</code> element's <code>color: green;</code> CSS property?",
|
||||
"Create a CSS class called <code>pink-text</code> that gives an element the color pink.",
|
||||
"Give your <code>h1</code> element the class of <code>pink-text</code>."
|
||||
],
|
||||
@ -3281,12 +3285,14 @@
|
||||
"Let's override your <code>pink-text</code> and <code>blue-text</code> classes, and make your <code>h1</code> element orange, by giving the <code>h1</code> element an id and then styling that id.",
|
||||
"Give your <code>h1</code> element the <code>id</code> attribute of <code>orange-text</code>. Remember, id styles look like this: <code><h1 id=\"orange-text\"></code>",
|
||||
"Leave the <code>blue-text</code> and <code>pink-text</code> classes on your <code>h1</code> element.",
|
||||
"Create a CSS declaration for your <code>orange-text</code> id in your <code>style</code> element. Here's and example of what this looks like: <code>#brown-text { color: brown; }</code>"
|
||||
"Create a CSS declaration for your <code>orange-text</code> id in your <code>style</code> element. Here's an example of what this looks like: <code>#brown-text { color: brown; }</code>"
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"h1\").hasClass(\"pink-text\"), 'Your <code>h1</code> element should have the class <code>pink-text</code>.')",
|
||||
"assert($(\"h1\").hasClass(\"blue-text\"), 'Your <code>h1</code> element should have the class <code>blue-text</code>.')",
|
||||
"assert($(\"h1\").attr(\"id\") === \"orange-text\", 'Give your <code>h1</code> element the id of <code>orange-text</code>.')",
|
||||
"assert(editor.match(/#orange-text\\s*{/gi), 'Create a CSS declaration for your <code>orange-text</code> id')",
|
||||
"assert(!editor.match(/<h1.*style.*>/gi), 'Do not give your <code>h1</code> any <code>style</code> attributes.')",
|
||||
"assert($(\"h1\").css(\"color\") === \"rgb(255, 165, 0)\", 'Your <code>h1</code> element should be orange.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
],
|
||||
"challengeSeed": [
|
||||
"function sumAll(arr) {",
|
||||
" return(1);",
|
||||
" return 1;",
|
||||
"}",
|
||||
"",
|
||||
"sumAll([1, 4]);"
|
||||
|
||||
@ -138,9 +138,9 @@
|
||||
"id": "bd7158d8c442eddfaeb5bd1c",
|
||||
"title": "Build a Simon Game",
|
||||
"difficulty": 1.07,
|
||||
"challengeSeed": ["126415123"],
|
||||
"challengeSeed": ["137213633"],
|
||||
"description": [
|
||||
"<span class='text-info'>Objective:</span> Build a <a href='http://codepen.io' target='_blank'>CodePen.io</a> app that successfully reverse-engineers this: <a href='http://codepen.io/dting/full/KpJXZV/' target='_blank'>http://codepen.io/dting/full/KpJXZV/</a>.",
|
||||
"<span class='text-info'>Objective:</span> Build a <a href='http://codepen.io' target='_blank'>CodePen.io</a> app that successfully reverse-engineers this: <a href='http://codepen.io/Em-Ant/full/QbRyqq/' target='_blank'>http://codepen.io/dting/full/QbRyqq/</a>.",
|
||||
"<span class='text-info'>Rule #1:</span> Don't look at the example project's code on CodePen. Figure it out for yourself.",
|
||||
"<span class='text-info'>Rule #2:</span> You may use whichever libraries or APIs you need.",
|
||||
"<span class='text-info'>Rule #3:</span> Reverse engineer the example project's functionality, and also feel free to personalize it.",
|
||||
|
||||
@ -16,8 +16,8 @@
|
||||
"tests": [
|
||||
"assert(editor.match(/<script>/g), 'Create a <code>script</code> element.')",
|
||||
"assert(editor.match(/<\\/script>/g) && editor.match(/<script/g) && editor.match(/<\\/script>/g).length === editor.match(/<script/g).length, 'Make sure your <code>script</code> element has a closing tag.')",
|
||||
"assert(editor.match(/\\$\\(document\\)\\.ready\\(function\\(\\)\\s?\\{/g), 'Add <code>$(document).ready(function() {</code> to the beginning of your <code>script</code> element.')",
|
||||
"assert(editor.match(/\\n\\s+?\\}\\);/g), 'Close your <code>$(document).ready(function() {</code> function with <code>});</code>.')"
|
||||
"assert(editor.match(/\\$\\s*?\\(\\s*?document\\)\\.ready\\s*?\\(\\s*?function\\s*?\\(\\s*?\\)\\s*?\\{/g), 'Add <code>$(document).ready(function() {</code> to the beginning of your <code>script</code> element.')",
|
||||
"assert(editor.match(/\\n*?\\s*?\\}\\s*?\\);/g), 'Close your <code>$(document).ready(function() {</code> function with <code>});</code>.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"",
|
||||
@ -58,7 +58,8 @@
|
||||
"This is important because without your <code>document ready function</code>, your code may run before your HTML is rendered, which would cause bugs.",
|
||||
"Now let's write our first jQuery statement. All jQuery functions start with a <code>$</code>, usually referred to as a <code>dollar sign operator</code>, or simply as <code>bling</code>.",
|
||||
"jQuery often selects an HTML element with a <code>selector</code>, then does something to that element.",
|
||||
"For example, let's make all of your <code>button</code> elements bounce. Just add this code inside your <code>document ready function</code>: <code>$(\"button\").addClass(\"animated bounce\")</code>."
|
||||
"For example, let's make all of your <code>button</code> elements bounce. Just add this code inside your <code>document ready function</code>: <code>$(\"button\").addClass(\"animated bounce\")</code>.",
|
||||
"Note that we've already included both the jQuery library and the Animate.css library in your code editor. So you are using jQuery to apply the Animate.css <code>bounce</code> class to your <code>button</code> elements."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"button\").hasClass(\"animated\") && $(\"button\").hasClass(\"bounce\"), 'Use the jQuery <code>addClass()</code> function to give the classes <code>animated</code> and <code>bounce</code> to your <code>button</code> elements.')",
|
||||
@ -212,7 +213,7 @@
|
||||
"assert(!editor.match(/e\"\\);/g) && !editor.match(/t\"\\);/g), 'Delete all three of your jQuery functions from your <code>document ready function</code>.')",
|
||||
"assert(editor.match(/<script>/g), 'Leave your <code>script</code> element intact.')",
|
||||
"assert(editor.match(/\\$\\(document\\)\\.ready\\(function\\(\\)\\s?\\{/g), 'Leave your <code>$(document).ready(function() {</code> to the beginning of your <code>script</code> element.')",
|
||||
"assert(editor.match(/\\n\\s+?\\}\\);/g), 'Leave your your \"document ready function\" closing <code>\\})</code> intact.')",
|
||||
"assert(editor.match(/\\n\\s+?\\}\\);/g), 'Leave your \"document ready function\" closing <code>\\})</code> intact.')",
|
||||
"assert(editor.match(/<\\/script>/g) && editor.match(/<script/g) && editor.match(/<\\/script>/g).length === editor.match(/<script/g).length, 'Leave your <code>script</code> element closing tag intact.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
@ -363,7 +364,7 @@
|
||||
"Select <code>target1</code> and change its color to red.",
|
||||
"jQuery has a function called <code>.css()</code> that allows you to change the CSS of an element.",
|
||||
"Here's how we would change its color to blue: <code>$(\"#target1\").css(\"color\", \"blue\");</code>",
|
||||
"This is slightly different from a normal CSS declaration, because the CSS attribute and its value are in quotes, and separated with a comma instead of a colon."
|
||||
"This is slightly different from a normal CSS declaration, because the CSS property and its value are in quotes, and separated with a comma instead of a colon."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"#target1\").css(\"color\") === 'rgb(255, 0, 0)', 'Your <code>target1</code> element should have red text.')",
|
||||
@ -415,7 +416,7 @@
|
||||
"You can also change the non-CSS properties of HTML elements with jQuery. For example, you can disable buttons.",
|
||||
"When you disable a button, it will become grayed-out and can no longer be clicked.",
|
||||
"jQuery has a function called <code>.prop()</code> that allows you to adjust the properties of elements.",
|
||||
"Here's how you would disable all buttons: <code>$('#button').prop('disabled', true);</code>",
|
||||
"Here's how you would disable all buttons: <code>$(\"button\").prop(\"disabled\", true);</code>",
|
||||
"Disable only the <code>target1</code> button."
|
||||
],
|
||||
"tests": [
|
||||
@ -464,7 +465,8 @@
|
||||
"difficulty": 3.10,
|
||||
"description": [
|
||||
"Now let's remove an HTML element from your page using jQuery.",
|
||||
"jQuery has a function called <code>.remove()</code> that will remove an HTML element entirely."
|
||||
"jQuery has a function called <code>.remove()</code> that will remove an HTML element entirely",
|
||||
"Remove element <code>target4</code> from the page by using the <code>.remove()</code> function."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"#target4\").length === 0, 'Use jQuery to remove your <code>target4</code> element from your page.')",
|
||||
@ -617,7 +619,7 @@
|
||||
"title": "Target the Parent of an Element Using jQuery",
|
||||
"difficulty": 3.13,
|
||||
"description": [
|
||||
"Every HTML elements has a <code>parent</code> element from which it <code>inherits</code> properties.",
|
||||
"Every HTML element has a <code>parent</code> element from which it <code>inherits</code> properties.",
|
||||
"For example, your <code>jQuery Playground</code> <code>h3</code> element has the parent element of <code><div class=\"container-fluid\"></code>, which itself has the parent <code>body</code>.",
|
||||
"jQuery has a function called <code>parent()</code> that allows you to access the parent of whichever element you've selected.",
|
||||
"Give the parent of the <code>#target1</code> element background-color of red.",
|
||||
@ -671,7 +673,7 @@
|
||||
"id": "bad87fee1348bd9aed208826",
|
||||
"title": "Target the Children of an Element Using jQuery",
|
||||
"difficulty": 3.14,
|
||||
"description": [
|
||||
"description": [
|
||||
"Many HTML elements have <code>children</code> elements from which <code>inherit</code> their properties.",
|
||||
"For example, every HTML element is a child of your <code>body</code> element, and your \"jQuery Playground\" <code>h3</code> element is a child of your <code><div class=\"container-fluid\"></code> element.",
|
||||
"jQuery has a function called <code>children()</code> that allows you to access the children of whichever element you've selected.",
|
||||
@ -786,7 +788,7 @@
|
||||
"difficulty": 3.16,
|
||||
"description": [
|
||||
"You can also target all the even-numbered elements.",
|
||||
"Here's how you would target all the odd-numbered elements with class <code>target</code> and give them classes: <code>$('.target:odd').addClass('animated shake');</code>",
|
||||
"Here's how you would target all the odd-numbered elements with class <code>target</code> and give them classes: <code>$(\".target:odd\").addClass(\"animated shake\");</code>",
|
||||
"Try selecting all the even-numbered elements - that is, what your browser will consider even-numbered elements - and giving them the classes of <code>animated</code> and <code>shake</code>."
|
||||
],
|
||||
"tests": [
|
||||
|
||||
@ -42,7 +42,7 @@
|
||||
" // Only change code above this line.",
|
||||
"};",
|
||||
"",
|
||||
"(function() {return(JSON.stringify(motorBike));})();"
|
||||
"(function() {return JSON.stringify(motorBike);})();"
|
||||
],
|
||||
"challengeType":1,
|
||||
"type": "waypoint",
|
||||
@ -81,7 +81,7 @@
|
||||
"var myMotorBike = new MotorBike();",
|
||||
"// Only change code above this line.",
|
||||
"",
|
||||
"(function() {return(JSON.stringify(myMotorBike));})();"
|
||||
"(function() {return JSON.stringify(myMotorBike);})();"
|
||||
],
|
||||
"challengeType":1,
|
||||
"type": "waypoint"
|
||||
@ -107,10 +107,10 @@
|
||||
"var Car = function() {",
|
||||
" this.gear = 1;",
|
||||
" function addStyle(styleMe){",
|
||||
" return('The Current Gear Is: ' + styleMe);",
|
||||
" return 'The Current Gear Is: ' + styleMe;",
|
||||
" }",
|
||||
" this.getGear = function() {",
|
||||
" return(addStyle(this.gear));",
|
||||
" return addStyle(this.gear);",
|
||||
" };",
|
||||
"};",
|
||||
"",
|
||||
@ -118,11 +118,11 @@
|
||||
" // Only change code below this line.",
|
||||
" this.speed = 100;",
|
||||
" function addUnit(value) {",
|
||||
" return(value + \"KM/H\");",
|
||||
" return value + \"KM/H\";",
|
||||
" }",
|
||||
" ",
|
||||
" getSpeed = function () {",
|
||||
" return(addUnit(speed));",
|
||||
" return addUnit(speed);",
|
||||
" };",
|
||||
" ",
|
||||
"};",
|
||||
@ -131,7 +131,7 @@
|
||||
"var myCar = new Car();",
|
||||
"var myBike = new Bike();",
|
||||
"",
|
||||
"if(myBike.hasOwnProperty('getSpeed')){(function() {return(JSON.stringify(myBike.getSpeed()));})();};"
|
||||
"if(myBike.hasOwnProperty('getSpeed')){(function() {return JSON.stringify(myBike.getSpeed());})();};"
|
||||
],
|
||||
"challengeType":1,
|
||||
"type": "waypoint"
|
||||
@ -166,7 +166,7 @@
|
||||
"",
|
||||
"",
|
||||
"// Only change code above this line.",
|
||||
"(function() {return(JSON.stringify(myCar));})();"
|
||||
"(function() {return JSON.stringify(myCar);})();"
|
||||
],
|
||||
"challengeType":1,
|
||||
"type": "waypoint"
|
||||
@ -177,10 +177,11 @@
|
||||
"difficulty":0,
|
||||
"description":[
|
||||
"<code>array = array.map(function(val){</code>",
|
||||
"<code>  return(val+1);</code>",
|
||||
"<code>  return val+1;</code>",
|
||||
"<code>});</code>",
|
||||
"",
|
||||
"The map method is one of the easiest ways to iterate through an array or object there is. Let's use it now."
|
||||
"The map method is one of the easiest ways to iterate through an array or object there is. Let's use it now.",
|
||||
"Use the map function to add 3 to every value in the variable <code>array</code>"
|
||||
],
|
||||
"tests":[
|
||||
"assert.deepEqual(array, [4,5,6,7,8], 'You should have added three to each value in the array');",
|
||||
@ -195,7 +196,7 @@
|
||||
"",
|
||||
"",
|
||||
"// Only change code above this line.",
|
||||
"(function() {return(array);})();"
|
||||
"(function() {return array;})();"
|
||||
],
|
||||
"challengeType":1,
|
||||
"type": "waypoint"
|
||||
@ -207,7 +208,7 @@
|
||||
"description":[
|
||||
"Reduce can be useful for condensing and array or numbers into one value.",
|
||||
"<code>var singleVal = array.reduce(function(previousVal, currentVal){</code>",
|
||||
"<code>  return(previousVal+currentVal);</code>",
|
||||
"<code>  return previousVal+currentVal;</code>",
|
||||
"<code>});</code>"
|
||||
],
|
||||
"tests":[
|
||||
@ -222,7 +223,7 @@
|
||||
"",
|
||||
"",
|
||||
"// Only change code above this line.",
|
||||
"(function() {return(singleVal);})();"
|
||||
"(function() {return singleVal;})();"
|
||||
],
|
||||
"challengeType":1,
|
||||
"type": "waypoint"
|
||||
@ -235,7 +236,7 @@
|
||||
"filter is a useful method that can filter out values that don't match a certain criteria",
|
||||
"Let's remove all the values greater than five",
|
||||
"<code>array = array.filter(function(val) {</code>",
|
||||
"<code>  return(val<4);</code>",
|
||||
"<code>  return val<4;</code>",
|
||||
"<code>});</code>"
|
||||
],
|
||||
"tests":[
|
||||
@ -250,7 +251,7 @@
|
||||
"",
|
||||
"",
|
||||
" // Only change code above this line.",
|
||||
"(function() {return(array);})();"
|
||||
"(function() {return array;})();"
|
||||
],
|
||||
"challengeType":1,
|
||||
"type": "waypoint"
|
||||
@ -277,7 +278,7 @@
|
||||
"",
|
||||
"",
|
||||
" // Only change code above this line.",
|
||||
"(function() {return(array);})();"
|
||||
"(function() {return array;})();"
|
||||
],
|
||||
"challengeType":1,
|
||||
"type": "waypoint"
|
||||
@ -301,7 +302,7 @@
|
||||
"",
|
||||
"",
|
||||
" // Only change code above this line.",
|
||||
"(function() {return(array);})();"
|
||||
"(function() {return array;})();"
|
||||
],
|
||||
"challengeType": 1,
|
||||
"type": "waypoint"
|
||||
@ -328,7 +329,7 @@
|
||||
"",
|
||||
"",
|
||||
"// Only change code above this line.",
|
||||
"(function() {return(array);})();"
|
||||
"(function() {return array;})();"
|
||||
],
|
||||
"challengeType": 1,
|
||||
"type": "waypoint"
|
||||
@ -353,7 +354,7 @@
|
||||
"var array = string;",
|
||||
"",
|
||||
"// Only change code above this line.",
|
||||
"(function() {return(array);})();"
|
||||
"(function() {return array;})();"
|
||||
],
|
||||
"challengeType":1,
|
||||
"type": "waypoint"
|
||||
@ -377,7 +378,7 @@
|
||||
"joinMe = joinMe;",
|
||||
"",
|
||||
"// Only change code above this line.",
|
||||
"(function() {return(joinMe);})();"
|
||||
"(function() {return joinMe;})();"
|
||||
],
|
||||
"challengeType":1,
|
||||
"type": "waypoint"
|
||||
|
||||
@ -9,7 +9,7 @@ MongoClient.connect(secrets.db, function(err, database) {
|
||||
throw err;
|
||||
}
|
||||
|
||||
database.collection('users').aggregate([
|
||||
database.collection('user').aggregate([
|
||||
{$match: { 'email': { $exists: true } } },
|
||||
{$match: { 'email': { $ne: '' } } },
|
||||
{$match: { 'email': { $ne: null } } },
|
||||
|
||||
Reference in New Issue
Block a user