1958 lines
87 KiB
JSON
1958 lines
87 KiB
JSON
{
|
|
"name": "Basic JavaScript",
|
|
"order": 6,
|
|
"time": "3h",
|
|
"challenges": [
|
|
{
|
|
"id": "bd7123c9c441eddfaeb4bdef",
|
|
"title": "Comment your JavaScript Code",
|
|
"description": [
|
|
"Comments are lines of code that your computer will intentionally ignore. Comments are a great way to leave notes to yourself and to other people who will later need to figure out what that code does.",
|
|
"Let's take a look at the two ways you can write comments in JavaScript.",
|
|
"The double-slash comment will comment out the remainder of the text on the current line:",
|
|
"<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."
|
|
],
|
|
"tests": [
|
|
"assert(editor.getValue().match(/(\\/\\/)...../g), 'message: Create a <code>//</code> style comment that contains at least five letters.');",
|
|
"assert(editor.getValue().match(/(\\/\\*)[\\w\\W]{5,}(?=\\*\\/)/gm), 'message: Create a <code>/* */</code> style comment that contains at least five letters.');",
|
|
"assert(editor.getValue().match(/(\\*\\/)/g), 'message: Make sure that you close the comment with a <code>*/</code>.');"
|
|
],
|
|
"challengeSeed": [],
|
|
"type": "waypoint",
|
|
"challengeType": 1
|
|
},
|
|
{
|
|
"id": "bd7123c9c441eddfaeb5bdef",
|
|
"title": "Understand Boolean Values",
|
|
"description": [
|
|
"In computer science, <code>data structures</code> are things that hold data. JavaScript has seven of these. For example, the <code>Number</code> data structure holds numbers.",
|
|
"Let's learn about the most basic data structure of all: the <code>Boolean</code>. Booleans can only hold the value of either true or false. They are basically little on-off switches.",
|
|
"Let's modify our <code>welcomeToBooleans</code> function so that it will return <code>true</code> instead of <code>false</code> when the run button is clicked."
|
|
],
|
|
"tests": [
|
|
"assert(typeof(welcomeToBooleans()) === 'boolean', 'message: The <code>welcomeToBooleans()</code> function should return a boolean (true/false) value.');",
|
|
"assert(welcomeToBooleans() === true, 'message: <code>welcomeToBooleans()</code> should return true.');"
|
|
],
|
|
"challengeSeed": [
|
|
"function welcomeToBooleans() {",
|
|
"",
|
|
"// Only change code below this line.",
|
|
"",
|
|
" return false;",
|
|
"",
|
|
"// Only change code above this line.",
|
|
"}"
|
|
],
|
|
"tail": [
|
|
"welcomeToBooleans();"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 1
|
|
},
|
|
{
|
|
"id": "bd7123c9c443eddfaeb5bdef",
|
|
"title": "Declare JavaScript Variables",
|
|
"description": [
|
|
"When we store data in a <code>data structure</code>, we call it a <code>variable</code>. These variables are no different from the x and y variables you use in math.",
|
|
"Let's create our first variable and call it \"myName\".",
|
|
"You'll notice that in <code>myName</code>, we didn't use a space, and that the \"N\" is capitalized. JavaScript variables are written in <code>camel case</code>. An example of camel case is: camelCase.",
|
|
"Now, use the <code>var</code> keyword to create a variable called <code>myName</code>. Set its value to your name, in double quotes.",
|
|
"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;}})(), 'message: <code>myName</code> should be a string that contains at least one character in it.');"
|
|
],
|
|
"challengeSeed": [
|
|
"var ourName = \"Free Code Camp\";",
|
|
"",
|
|
""
|
|
],
|
|
"tail": [
|
|
"if(typeof(myName) !== \"undefined\"){(function(v){return v;})(myName);}"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 1
|
|
},
|
|
{
|
|
"id": "bd7123c9c444eddfaeb5bdef",
|
|
"title": "Declare String Variables",
|
|
"description": [
|
|
"In the previous challenge, we used the code <code>var myName = \"your name\"</code>. This is what we call a <code>String</code> variable. It is nothing more than a \"string\" of characters. JavaScript strings are always wrapped in quotes.",
|
|
"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;}})(), 'message: <code>myFirstName</code> should be a string with at least one character in it.');",
|
|
"assert((function(){if(typeof(myLastName) !== \"undefined\" && typeof(myLastName) === \"string\" && myLastName.length > 0){return true;}else{return false;}})(), 'message: <code>myLastName</code> should be a string with at least one character in it.');"
|
|
],
|
|
"challengeSeed": [
|
|
"var firstName = \"Alan\";",
|
|
"var lastName = \"Turing\";",
|
|
"",
|
|
"",
|
|
"// Only change code above this line.",
|
|
"",
|
|
"if(typeof(myFirstName) !== \"undefined\" && typeof(myLastName) !== \"undefined\"){(function(){return myFirstName + ', ' + myLastName;})();}"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 1
|
|
},
|
|
{
|
|
"id": "bd7123c9c448eddfaeb5bdef",
|
|
"title": "Check the Length Property of a String Variable",
|
|
"description": [
|
|
"<code>Data structures</code> have <code>properties</code>. For example, <code>strings</code> have a property called <code>.length</code> that will tell you how many characters are in the string.",
|
|
"For example, if we created a variable <code>var firstName = \"Charles\"</code>, we could find out how long the string \"Charles\" is by using the <code>firstName.length</code> property.",
|
|
"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;}})(), 'message: <code>lastNameLength</code> 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;}})(), 'message: 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;",
|
|
"var lastNameLength = 0;",
|
|
"var firstName = \"Ada\";",
|
|
"",
|
|
"firstNameLength = firstName.length;",
|
|
"",
|
|
"var lastName = \"Lovelace\";",
|
|
"",
|
|
"// Only change code below this line.",
|
|
"",
|
|
"lastNameLength = lastName;",
|
|
"",
|
|
"",
|
|
"",
|
|
"// Only change code above this line.",
|
|
"",
|
|
"if(typeof(lastNameLength) !== \"undefined\"){(function(){return lastNameLength;})();}"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 1
|
|
},
|
|
{
|
|
"id": "bd7123c9c549eddfaeb5bdef",
|
|
"title": "Use Bracket Notation to Find the First Character in a String",
|
|
"description": [
|
|
"<code>Bracket notation</code> is a way to get a character at a specific <code>index</code> within a string.",
|
|
"Computers don't start counting at 1 like humans do. They start at 0.",
|
|
"For example, the character at index 0 in the word \"Charles\" is \"C\". So if <code>var firstName = \"Charles\"</code>, you can get the value of the first letter of the string by using <code>firstName[0]</code>.",
|
|
"Use <code>bracket notation</code> to find the first character in the <code>lastName</code> variable and assign it to <code>firstLetterOfLastName</code>.",
|
|
"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;}})(), 'message: The <code>firstLetterOfLastName</code> variable should have the value of <code>L</code>.');"
|
|
],
|
|
"challengeSeed": [
|
|
"var firstLetterOfFirstName = \"\";",
|
|
"var firstLetterOfLastName = \"\";",
|
|
"",
|
|
"var firstName = \"Ada\";",
|
|
"",
|
|
"firstLetterOfFirstName = firstName[0];",
|
|
"",
|
|
"var lastName = \"Lovelace\";",
|
|
"",
|
|
"firstLetterOfLastName = lastName;",
|
|
"",
|
|
"",
|
|
"// Only change code above this line.",
|
|
"",
|
|
"(function(v){return v;})(firstLetterOfLastName);"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 1
|
|
},
|
|
{
|
|
"id": "bd7123c9c450eddfaeb5bdef",
|
|
"title": "Use Bracket Notation to Find the Nth Character in a String",
|
|
"description": [
|
|
"You can also use <code>bracket notation</code> to get the character at other positions within a string.",
|
|
"Remember that computers start counting at 0, so the first character is actually the zeroth character.",
|
|
"Let's try to set <code>thirdLetterOfLastName</code> to equal the <code>third letter</code> of the <code>lastName</code> variable.",
|
|
"Try looking at the <code>secondLetterOfFirstName</code> variable declaration if you get stuck."
|
|
],
|
|
"tests": [
|
|
"assert(thirdLetterOfLastName === 'v', 'message: The <code>thirdLetterOfLastName</code> variable should have the value of <code>v</code>.');"
|
|
],
|
|
"challengeSeed": [
|
|
"var firstName = \"Ada\";",
|
|
"",
|
|
"var secondLetterOfFirstName = firstName[1];",
|
|
"",
|
|
"var lastName = \"Lovelace\";",
|
|
"",
|
|
"var thirdLetterOfLastName = lastName;",
|
|
"",
|
|
"",
|
|
"// Only change code above this line.",
|
|
"",
|
|
"(function(v){return v;})(thirdLetterOfLastName);"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 1
|
|
},
|
|
{
|
|
"id": "bd7123c9c451eddfaeb5bdef",
|
|
"title": "Use Bracket Notation to Find the Last Character in a String",
|
|
"description": [
|
|
"In order to get the last letter of a string, you can subtract one from the string's length.",
|
|
"For example, if <code>var firstName = \"Charles\"</code>, you can get the value of the last letter of the string by using <code>firstName[firstName.length - 1]</code>.",
|
|
"Use <code>bracket notation</code> to find the last character in the <code>lastName</code> variable.",
|
|
"Try looking at the <code>lastLetterOfFirstName</code> variable declaration if you get stuck."
|
|
],
|
|
"tests": [
|
|
"assert(lastLetterOfLastName === \"e\", 'message: <code>lastLetterOfLastName</code> should be \"e\".');",
|
|
"assert(editor.getValue().match(/\\.length/g).length === 2, 'message: You have to use <code>.length</code> to get the last letter.');"
|
|
],
|
|
"challengeSeed": [
|
|
"var firstName = \"Ada\";",
|
|
"",
|
|
"var lastLetterOfFirstName = firstName[firstName.length - 1];",
|
|
"",
|
|
"var lastName = \"Lovelace\";",
|
|
"",
|
|
"var lastLetterOfLastName = lastName;",
|
|
"",
|
|
"",
|
|
"// Only change code above this line.",
|
|
"",
|
|
"(function(v){return v;})(lastLetterOfLastName);"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 1
|
|
},
|
|
{
|
|
"id": "bd7123c9c452eddfaeb5bdef",
|
|
"title": "Use Bracket Notation to Find the Nth-to-Last Character in a String",
|
|
"description": [
|
|
"You can use the same principle we just used to retrieve the last character in a string to retrieve the Nth-to-last character.",
|
|
"For example, you can get the value of the third-to-last letter of the <code>var firstName = \"Charles\"</code> string by using <code>firstName[firstName.length - 3]</code>",
|
|
"Use <code>bracket notation</code> to find the second-to-last character in the <code>lastName</code> string.",
|
|
"Try looking at the <code>thirdToLastLetterOfFirstName</code> variable declaration if you get stuck."
|
|
],
|
|
"tests": [
|
|
"assert(secondToLastLetterOfLastName === 'c', 'message: <code>secondToLastLetterOfLastName</code> should be \"c\".');",
|
|
"assert(editor.getValue().match(/\\.length/g).length === 2, 'message: You have to use <code>.length</code> to get the second last letter.');"
|
|
],
|
|
"challengeSeed": [
|
|
"var firstName = \"Ada\";",
|
|
"",
|
|
"var thirdToLastLetterOfFirstName = firstName[firstName.length - 3];",
|
|
"",
|
|
"var lastName = \"Lovelace\";",
|
|
"",
|
|
"var secondToLastLetterOfLastName = lastName;",
|
|
"",
|
|
"",
|
|
"// Only change code above this line.",
|
|
"",
|
|
"(function(v){return v;})(secondToLastLetterOfLastName);"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 1
|
|
},
|
|
{
|
|
"id": "cf1111c1c11feddfaeb3bdef",
|
|
"title": "Add Two Numbers with JavaScript",
|
|
"description": [
|
|
"Let's try to add two numbers using JavaScript.",
|
|
"JavaScript uses the <code>+</code> symbol for addition.",
|
|
"Change the <code>0</code> so that sum will equal <code>20</code>."
|
|
],
|
|
"tests": [
|
|
"assert((function(){if(sum === 20 && editor.getValue().match(/\\+/g).length >= 2){return true;}else{return false;}})(), 'message: Make the variable <code>sum</code> equal 20.');"
|
|
],
|
|
"challengeSeed": [
|
|
"var sum = 10 + 0;",
|
|
"",
|
|
"// Only change code above this line.",
|
|
"",
|
|
"(function(z){return 'sum='+z;})(sum);"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 1
|
|
},
|
|
{
|
|
"id": "cf1111c1c11feddfaeb4bdef",
|
|
"title": "Subtract One Number from Another with JavaScript",
|
|
"description": [
|
|
"We can also subtract one number from another.",
|
|
"JavaScript uses the <code>-</code> symbol for subtraction.",
|
|
"Change the <code>0</code> so that difference will equal <code>12</code>."
|
|
],
|
|
"tests": [
|
|
"assert((function(){if(difference === 12 && editor.getValue().match(/\\-/g)){return true;}else{return false;}})(), 'message: Make the variable <code>difference</code> equal 12.');"
|
|
],
|
|
"challengeSeed": [
|
|
"var difference = 45 - 0;",
|
|
"",
|
|
"// Only change code above this line.",
|
|
"",
|
|
"(function(z){return 'difference='+z;})(difference);"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 1
|
|
},
|
|
{
|
|
"id": "cf1231c1c11feddfaeb5bdef",
|
|
"title": "Multiply Two Numbers with JavaScript",
|
|
"description": [
|
|
"We can also multiply one number by another.",
|
|
"JavaScript uses the <code>*</code> symbol for multiplication.",
|
|
"Change the <code>0</code> so that product will equal <code>80</code>."
|
|
],
|
|
"tests": [
|
|
"assert((function(){if(product === 80 && editor.getValue().match(/\\*/g)){return true;}else{return false;}})(), 'message: Make the variable <code>product</code> equal 80.');"
|
|
],
|
|
"challengeSeed": [
|
|
"var product = 8 * 0;",
|
|
"",
|
|
"// Only change code above this line.",
|
|
"",
|
|
"(function(z){return 'product='+z;})(product);"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 1
|
|
},
|
|
{
|
|
"id": "cf1111c1c11feddfaeb6bdef",
|
|
"title": "Divide One Number by Another with JavaScript",
|
|
"description": [
|
|
"We can also divide one number by another.",
|
|
"JavaScript uses the <code>/</code> symbol for division.",
|
|
"Change the <code>0</code> so that quotient will equal <code>2</code>."
|
|
],
|
|
"tests": [
|
|
"assert((function(){if(quotient === 2 && editor.getValue().match(/var\\s*?quotient\\s*?\\=\\s*?\\d+\\s*?\\/\\s*?\\d+\\s*?;/g)){return true;}else{return false;}})(), 'message: Make the variable <code>quotient</code> equal 2.');"
|
|
],
|
|
"challengeSeed": [
|
|
"var quotient = 66 / 0;",
|
|
"",
|
|
"// Only change code above this line.",
|
|
"",
|
|
"(function(z){return 'quotient='+z;})(quotient);"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 1
|
|
},
|
|
{
|
|
"id": "cf1391c1c11feddfaeb4bdef",
|
|
"title": "Create Decimal Numbers with JavaScript",
|
|
"description": [
|
|
"JavaScript number variables can also have decimals.",
|
|
"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;}})(), 'message: <code>myDecimal</code> should be a decimal point number.');"
|
|
],
|
|
"challengeSeed": [
|
|
"var ourDecimal = 5.7;",
|
|
"",
|
|
"",
|
|
"// Only change code above this line.",
|
|
"",
|
|
"(function(){if(typeof(myDecimal) !== \"undefined\"){return myDecimal;}})();"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 1
|
|
},
|
|
{
|
|
"id": "bd7993c9c69feddfaeb7bdef",
|
|
"title": "Multiply Two Decimals with JavaScript",
|
|
"description": [
|
|
"In JavaScript, you can also perform calculations with decimal numbers, just like whole numbers.",
|
|
"Let's multiply two decimals together to get their product.",
|
|
"Change the <code>0.0</code> so that product will equal <code>5.0</code>."
|
|
],
|
|
"tests": [
|
|
"assert((function(){if(product === 5.0 && editor.getValue().match(/\\*/g)){return true;}else{return false;}})(), 'message: Make the variable <code>product</code> equal 5.0.');"
|
|
],
|
|
"challengeSeed": [
|
|
"var product = 2.0 * 0.0;",
|
|
"",
|
|
"",
|
|
"// Only change code above this line.",
|
|
"",
|
|
"(function(y){return 'product='+y;})(product);"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 1
|
|
},
|
|
{
|
|
"id": "bd7993c9ca9feddfaeb7bdef",
|
|
"title": "Divide one Decimal by Another with JavaScript",
|
|
"description": [
|
|
"Now let's divide one decimal by another.",
|
|
"Change the <code>0.0</code> so that your quotient will equal <code>2.2</code>."
|
|
],
|
|
"tests": [
|
|
"assert((function(){if(quotient === 2.2 && editor.getValue().match(/\\//g)){return true;}else{return false;}})(), 'message: Make the variable <code>quotient</code> equal <code>2.2</code>.');"
|
|
],
|
|
"challengeSeed": [
|
|
"var quotient = 0.0 / 2.0;",
|
|
"",
|
|
"",
|
|
"// Only change code above this line.",
|
|
"",
|
|
"(function(y){return 'quotient='+y;})(quotient);"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 1
|
|
},
|
|
{
|
|
"id": "bd7993c9c69feddfaeb8bdef",
|
|
"title": "Store Multiple Values in one Variable using JavaScript Arrays",
|
|
"description": [
|
|
"With JavaScript <code>array</code> variables, we can store several pieces of data in one place.",
|
|
"You start an array declaration with an opening square bracket, end it with a closing square bracket, and put a comma between each entry, like this: <code>var sandwich = [\"peanut butter\", \"jelly\", \"bread\"]</code>.",
|
|
"Now let's create a new array called <code>myArray</code> that contains both a <code>string</code> and a <code>number</code> (in that order).",
|
|
"Refer to the commented code in the text editor if you get stuck."
|
|
],
|
|
"tests": [
|
|
"assert(typeof(myArray) == 'object', 'message: <code>myArray</code> should be an <code>array</code>.');",
|
|
"assert(typeof(myArray[0]) !== 'undefined' && typeof(myArray[0]) == 'string', 'message: The first item in <code>myArray</code> should be a <code>string</code>.');",
|
|
"assert(typeof(myArray[1]) !== 'undefined' && typeof(myArray[1]) == 'number', 'message: The second item in <code>myArray</code> should be a <code>number</code>.');"
|
|
],
|
|
"challengeSeed": [
|
|
"var array = [\"John\", 23];",
|
|
"",
|
|
"// Only change code below this line.",
|
|
"",
|
|
"var myArray = [];",
|
|
"",
|
|
"// Only change code above this line.",
|
|
"",
|
|
"(function(z){return z;})(myArray);"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 1
|
|
},
|
|
{
|
|
"id": "cf1111c1c11feddfaeb7bdef",
|
|
"title": "Nest one Array within Another Array",
|
|
"description": [
|
|
"You can also nest arrays within other arrays, like this: <code>[[\"Bulls\", 23]]</code>.",
|
|
"Let's now go create a nested array called <code>myArray</code>."
|
|
],
|
|
"tests": [
|
|
"assert(Array.isArray(myArray) && myArray.some(Array.isArray), 'message: <code>myArray</code> should have at least one array nested within another array.');"
|
|
],
|
|
"challengeSeed": [
|
|
"var ourArray = [[\"the universe\", \"everything\", 42]];",
|
|
"",
|
|
"// Only change code below this line.",
|
|
"",
|
|
"var myArray = [];",
|
|
"",
|
|
"// Only change code above this line.",
|
|
"",
|
|
"if(typeof(myArray) !== \"undefined\"){(function(){return myArray;})();}"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 1
|
|
},
|
|
{
|
|
"id": "bg9997c9c79feddfaeb9bdef",
|
|
"title": "Access Array Data with Indexes",
|
|
"description": [
|
|
"We can access the data inside arrays using <code>indexes</code>.",
|
|
"Array indexes are written in the same bracket notation that strings use, except that instead of specifying a character, they are specifying an entry in the array.",
|
|
"For example:",
|
|
"<code>var array = [1,2,3];</code>",
|
|
"<code>array[0]; //equals 1</code>",
|
|
"<code>var data = array[1];</code>",
|
|
"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;}})(), 'message: The variable <code>myData</code> should equal the first value of <code>myArray</code>.');"
|
|
],
|
|
"challengeSeed": [
|
|
"var ourArray = [1,2,3];",
|
|
"",
|
|
"var ourData = ourArray[0]; // equals 1",
|
|
"",
|
|
"var myArray = [1,2,3];",
|
|
"",
|
|
"// Only change code below this line.",
|
|
"",
|
|
"",
|
|
"// Only change code above this line.",
|
|
"",
|
|
"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
|
|
},
|
|
{
|
|
"id": "cf1111c1c11feddfaeb8bdef",
|
|
"title": "Modify Array Data With Indexes",
|
|
"description": [
|
|
"We can also modify the data stored in arrays by using indexes.",
|
|
"For example:",
|
|
"<code>var ourArray = [3,2,1];</code>",
|
|
"<code>ourArray[0] = 1; // equals [1,2,1]</code>",
|
|
"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;}})(), 'message: <code>myArray</code> should now be [3,2,3].');",
|
|
"assert((function(){if(editor.getValue().match(/myArray\\[0\\]\\s?=\\s?/g)){return true;}else{return false;}})(), 'message: You should be using correct index to modify the value in <code>myArray</code>.');"
|
|
],
|
|
"challengeSeed": [
|
|
"var ourArray = [1,2,3];",
|
|
"",
|
|
"ourArray[1] = 3; // ourArray now equals [1,3,3].",
|
|
"",
|
|
"var myArray = [1,2,3];",
|
|
"",
|
|
"// Only change code below this line.",
|
|
"",
|
|
"",
|
|
"",
|
|
"// Only change code above this line.",
|
|
"",
|
|
"if(typeof(myArray) !== \"undefined\"){(function(){return myArray;})();}"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 1
|
|
},
|
|
{
|
|
"id": "bg9994c9c69feddfaeb9bdef",
|
|
"title": "Manipulate Arrays With pop()",
|
|
"description": [
|
|
"Another way to change the data in an array is with the <code>.pop()</code> function.",
|
|
"<code>.pop()</code> is used to \"pop\" a value off of the end of an array. We can store this \"popped off\" variable by performing <code>pop()</code> within a variable declaration.",
|
|
"Any type of data structure can be \"popped\" off of an array - numbers, strings, even nested arrays.",
|
|
"Use the <code>.pop()</code> function to remove the last item from <code>myArray</code>, assigning the \"popped off\" value to <code>removedFromMyArray</code>."
|
|
],
|
|
"tests": [
|
|
"assert((function(d){if(d[0] == 'John' && d[1] == 23 && d[2] == undefined){return true;}else{return false;}})(myArray), 'message: <code>myArray</code> should only contain <code>[\"John\", 23]</code>.');",
|
|
"assert((function(d){if(d[0] == 'cat' && d[1] == 2 && d[2] == undefined){return true;}else{return false;}})(removedFromMyArray), 'message: <code>removedFromMyArray</code> should only contain <code>[\"cat\", 2]</code>.');"
|
|
],
|
|
"challengeSeed": [
|
|
"var ourArray = [1,2,3];",
|
|
"",
|
|
"var removedFromOurArray = ourArray.pop(); // removedFromOurArray now equals 3, and ourArray now equals [1,2]",
|
|
"",
|
|
"var myArray = [\"John\", 23, [\"cat\", 2]];",
|
|
"",
|
|
"// Only change code below this line.",
|
|
"",
|
|
"var removedFromMyArray;",
|
|
"",
|
|
"// Only change code above this line.",
|
|
"",
|
|
"(function(y, z){return 'myArray = ' + JSON.stringify(y) + ' & removedFromMyArray = ' + JSON.stringify(z);})(myArray, removedFromMyArray);"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 1
|
|
},
|
|
{
|
|
"id": "bg9995c9c69feddfaeb9bdef",
|
|
"title": "Manipulate Arrays With push()",
|
|
"description": [
|
|
"Not only can you <code>pop()</code> data off of the end of an array, you can also <code>push()</code> data onto the end of an array.",
|
|
"Push <code>[\"dog\", 3]</code> onto the end of the <code>myArray</code> variable."
|
|
],
|
|
"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), 'message: <code>myArray</code> should now equal <code>[\"John\", 23, [\"dog\", 3]]</code>.');"
|
|
],
|
|
"challengeSeed": [
|
|
"var ourArray = [\"Stimpson\", \"J\", [\"cat\"]];",
|
|
"",
|
|
"ourArray.pop(); // ourArray now equals [\"Stimpson\", \"J\"]",
|
|
"",
|
|
"ourArray.push([\"happy\", \"joy\"]); // ourArray now equals [\"Stimpson\", \"J\", [\"happy\", \"joy\"]]",
|
|
"",
|
|
"var myArray = [\"John\", 23, [\"cat\", 2]];",
|
|
"",
|
|
"myArray.pop();",
|
|
"",
|
|
"// Only change code below this line.",
|
|
"",
|
|
"",
|
|
"",
|
|
"// Only change code above this line.",
|
|
"",
|
|
"(function(z){return 'myArray = ' + JSON.stringify(z);})(myArray);"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 1
|
|
},
|
|
{
|
|
"id": "bg9996c9c69feddfaeb9bdef",
|
|
"title": "Manipulate Arrays With shift()",
|
|
"description": [
|
|
"<code>pop()</code> always removes the last element of an array. What if you want to remove the first?",
|
|
"That's where <code>.shift()</code> comes in. It works just like <code>.pop()</code>, except it removes the first element instead of the last.",
|
|
"Use the <code>.shift()</code> function to remove the first item from <code>myArray</code>, assigning the \"shifted off\" value to <code>removedFromMyArray</code>."
|
|
],
|
|
"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), 'message: <code>myArray</code> should now equal <code>[23, [\"dog\", 3]]</code>.');",
|
|
"assert((function(d){if(d === 'John' && typeof(removedFromMyArray) === 'string'){return true;}else{return false;}})(removedFromMyArray), 'message: <code>removedFromMyArray</code> should contain <code>\"John\"</code>.');"
|
|
],
|
|
"challengeSeed": [
|
|
"var ourArray = [\"Stimpson\", \"J\", [\"cat\"]];",
|
|
"",
|
|
"removedFromOurArray = ourArray.shift(); // removedFromOurArray now equals \"Stimpson\" and ourArray now equals [\"J\", [\"cat\"]].",
|
|
"",
|
|
"var myArray = [\"John\", 23, [\"dog\", 3]];",
|
|
"",
|
|
"// Only change code below this line.",
|
|
"",
|
|
"var removedFromMyArray;",
|
|
"",
|
|
"// Only change code above this line.",
|
|
"",
|
|
"",
|
|
"(function(y, z){return 'myArray = ' + JSON.stringify(y) + ' & removedFromMyArray = ' + JSON.stringify(z);})(myArray, removedFromMyArray);"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 1
|
|
},
|
|
{
|
|
"id": "bg9997c9c69feddfaeb9bdef",
|
|
"title": "Manipulate Arrays With unshift()",
|
|
"description": [
|
|
"Not only can you <code>shift</code> elements off of the beginning of an array, you can also <code>unshift</code> elements onto the beginning of an array.",
|
|
"<code>unshift()</code> works exactly like <code>push()</code>, but instead of adding the element at the end of the array, <code>unshift()</code> adds the element at the beginning of the array.",
|
|
"Add <code>\"Paul\"</code> onto the beginning of the <code>myArray</code> variable using <code>unshift()</code>."
|
|
],
|
|
"tests": [
|
|
"assert((function(d){if(typeof(d[0]) === \"string\" && 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), 'message: <code>myArray</code> should now have [\"Paul\", 23, [\"dog\", 3]]).');"
|
|
],
|
|
"challengeSeed": [
|
|
"var ourArray = [\"Stimpson\", \"J\", [\"cat\"]];",
|
|
"",
|
|
"ourArray.shift(); // ourArray now equals [\"J\", [\"cat\"]]",
|
|
"",
|
|
"ourArray.unshift(\"happy\"); // ourArray now equals [\"happy\", \"J\", [\"cat\"]]",
|
|
"",
|
|
"var myArray = [\"John\", 23, [\"dog\", 3]];",
|
|
"",
|
|
"myArray.shift();",
|
|
"",
|
|
"// Only change code below this line.",
|
|
"",
|
|
"",
|
|
"",
|
|
"// Only change code above this line.",
|
|
"",
|
|
"(function(y, z){return 'myArray = ' + JSON.stringify(y);})(myArray);"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 1
|
|
},
|
|
{
|
|
"id": "bg9997c9c89feddfaeb9bdef",
|
|
"title": "Write Reusable JavaScript with Functions",
|
|
"description": [
|
|
"In JavaScript, we can divide up our code into reusable parts called functions.",
|
|
"Here's an example of a function:",
|
|
"<code>function functionName(a, b) {</code>",
|
|
"<code> return a + b;</code>",
|
|
"<code>}</code>",
|
|
"After writing the above lines in our code, we can then pass values to our function and the result following the <code>return</code> statement will be returned.",
|
|
"For example, we can pass numbers <code>4</code> and <code>2</code> by “calling” the function later in our code like this: <code>functionName(4, 2)</code>.",
|
|
"In this example, the function will return the number <code>6</code> as this is the result of <code>4 + 2</code>.",
|
|
"Create and call a function called <code>myFunction</code> that returns the sum of <code>a</code> and <code>b</code>."
|
|
],
|
|
"tests": [
|
|
"assert((function(){if(typeof(f) !== \"undefined\" && f === a + b){return true;}else{return false;}})(), 'message: Your function should return the value of <code>a + b</code>.');"
|
|
],
|
|
"challengeSeed": [
|
|
"var a = 4;",
|
|
"var b = 5;",
|
|
"",
|
|
"function ourFunction(a, b) {",
|
|
" return a - b;",
|
|
"}",
|
|
"",
|
|
"// Only change code below this line.",
|
|
"",
|
|
"",
|
|
"",
|
|
"",
|
|
"// Only change code above this line.",
|
|
"",
|
|
"if(typeof(myFunction) !== \"undefined\"){",
|
|
"var f=myFunction(a,b);",
|
|
"(function(){return f;})();",
|
|
"}"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 1
|
|
},
|
|
{
|
|
"id": "bg9998c9c99feddfaeb9bdef",
|
|
"title": "Build JavaScript Objects",
|
|
"description": [
|
|
"You may have heard the term <code>object</code> before.",
|
|
"Objects are similar to <code>arrays</code>, except that instead of using indexes to access and modify their data, you access the data in objects through what are called <code>properties</code>.",
|
|
"Here's a sample object:",
|
|
"<code>var cat = {</code>",
|
|
"<code> \"name\": \"Whiskers\",</code>",
|
|
"<code> \"legs\": 4,</code>",
|
|
"<code> \"tails\": 1,</code>",
|
|
"<code> \"enemies\": [\"Water\", \"Dogs\"]</code>",
|
|
"<code>};</code>",
|
|
"</code>",
|
|
"Objects are useful for storing data in a structured way, and can represent real world objects, like a cat.",
|
|
"Let's try to make an object that represents a dog called <code>myDog</code> which contains the properties <code>\"name\"</code> (a string), <code>\"legs\"</code>, <code>\"tails\"</code> and <code>\"friends\"</code>.",
|
|
"You can set these object properties to whatever values you want, as long <code>\"name\"</code> is a string, <code>\"legs\"</code> and <code>\"tails\"</code> are numbers, and <code>\"friends\"</code> is an array."
|
|
],
|
|
"tests": [
|
|
"assert((function(z){if(z.hasOwnProperty(\"name\") && z.name !== undefined && typeof(z.name) === \"string\"){return true;}else{return false;}})(myDog), 'message: <code>myDog</code> should contain the property <code>name</code> and it should be a <code>string</code>.');",
|
|
"assert((function(z){if(z.hasOwnProperty(\"legs\") && z.legs !== undefined && typeof(z.legs) === \"number\"){return true;}else{return false;}})(myDog), 'message: <code>myDog</code> should contain the property <code>legs</code> and it should be a <code>number</code>.');",
|
|
"assert((function(z){if(z.hasOwnProperty(\"tails\") && z.tails !== undefined && typeof(z.tails) === \"number\"){return true;}else{return false;}})(myDog), 'message: <code>myDog</code> should contain the property <code>tails</code> and it should be a <code>number</code>.');",
|
|
"assert((function(z){if(z.hasOwnProperty(\"friends\") && z.friends !== undefined && Array.isArray(z.friends)){return true;}else{return false;}})(myDog), 'message: <code>myDog</code> should contain the property <code>friends</code> and it should be an <code>array</code>.');"
|
|
],
|
|
"challengeSeed": [
|
|
"var ourDog = {",
|
|
" \"name\": \"Camper\",",
|
|
" \"legs\": 4,",
|
|
" \"tails\": 1,",
|
|
" \"friends\": [\"everything!\"]",
|
|
"};",
|
|
"",
|
|
"// Only change code below this line.",
|
|
"",
|
|
"var myDog = {",
|
|
"",
|
|
"",
|
|
"",
|
|
"",
|
|
"};",
|
|
"",
|
|
"// Only change code above this line.",
|
|
"",
|
|
"(function(z){return z;})(myDog);"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 1
|
|
},
|
|
{
|
|
"id": "bg9999c9c99feddfaeb9bdef",
|
|
"title": "Update the Properties of a JavaScript Object",
|
|
"description": [
|
|
"After you've created a JavaScript object, you can update its properties at any time just like you would update any other variable.",
|
|
"For example, let's look at <code>ourDog</code>:",
|
|
"<code>var ourDog = {</code>",
|
|
"<code> \"name\": \"Camper\",</code>",
|
|
"<code> \"legs\": 4,</code>",
|
|
"<code> \"tails\": 1,</code>,",
|
|
"<code> \"friends\": [\"everything!\"]</code>",
|
|
"<code>};</code>",
|
|
"Since he's a particularly happy dog, let's change his name to \"Happy Camper\". Here's how we update his object's name property:",
|
|
"<code>ourDog.name = \"Happy Camper\";</code>",
|
|
"Now when we run <code>return ourDog.name</code>, instead of getting \"Camper\", we'll get his new name, \"Happy Camper\".",
|
|
"Let's update the <code>myDog</code> object's name property. Let's change her name from \"Coder\" to \"Happy Coder\"."
|
|
],
|
|
"tests": [
|
|
"assert(/happy coder/gi.test(myDog.name), 'message: Update <code>myDog</code>'s <code>\"name\"</code> property to equal \"Happy Coder\".');"
|
|
],
|
|
"challengeSeed": [
|
|
"var ourDog = {",
|
|
" \"name\": \"Camper\",",
|
|
" \"legs\": 4,",
|
|
" \"tails\": 1,",
|
|
" \"friends\": [\"everything!\"]",
|
|
"};",
|
|
"",
|
|
"ourDog.name = \"Happy Camper\";",
|
|
"",
|
|
"var myDog = {",
|
|
" \"name\": \"Coder\",",
|
|
" \"legs\": 4,",
|
|
" \"tails\": 1,",
|
|
" \"friends\": [\"Free Code Camp Campers\"]",
|
|
"};",
|
|
"",
|
|
"// Only change code below this line.",
|
|
"",
|
|
"",
|
|
"",
|
|
"// Only change code above this line.",
|
|
"",
|
|
"(function(z){return z;})(myDog);"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 1
|
|
},
|
|
{
|
|
"id": "bg9999c9c99feedfaeb9bdef",
|
|
"title": "Add New Properties to a JavaScript Object",
|
|
"description": [
|
|
"You can add new properties to existing JavaScript objects the same way you would modify them.",
|
|
"Here's how we would add a <code>\"bark\"</code> property to <code>ourDog</code>:",
|
|
"<code>ourDog.bark = \"bow-wow\";</code>",
|
|
"Now when we run <code>return ourDog.bark</code>, we'll get his bark, \"bow-wow\".",
|
|
"Let's add a <code>\"bark\"</code> property to <code>myDog</code> and set it to a dog sound, such as \"woof\"."
|
|
],
|
|
"tests": [
|
|
"assert(myDog.bark !== undefined, 'message: Add the property <code>\"bark\"</code> to <code>myDog</code>.');"
|
|
],
|
|
"challengeSeed": [
|
|
"var ourDog = {",
|
|
" \"name\": \"Camper\",",
|
|
" \"legs\": 4,",
|
|
" \"tails\": 1,",
|
|
" \"friends\": [\"everything!\"]",
|
|
"};",
|
|
"",
|
|
"ourDog.bark = \"bow-wow\";",
|
|
"",
|
|
"var myDog = {",
|
|
" \"name\": \"Happy Coder\",",
|
|
" \"legs\": 4,",
|
|
" \"tails\": 1,",
|
|
" \"friends\": [\"Free Code Camp Campers\"]",
|
|
"};",
|
|
"",
|
|
"// Only change code below this line.",
|
|
"",
|
|
"",
|
|
"",
|
|
"// Only change code above this line.",
|
|
"",
|
|
"(function(z){return z;})(myDog);"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 1
|
|
},
|
|
{
|
|
"id": "bg9999c9c99fdddfaeb9bdef",
|
|
"title": "Delete Properties from a JavaScript Object",
|
|
"description": [
|
|
"We can also delete properties from objects like this:",
|
|
"<code>delete ourDog.bark;</code>",
|
|
"Let's delete the <code>\"tails\"</code> property from <code>myDog</code>."
|
|
],
|
|
"tests": [
|
|
"assert(myDog.tails === undefined, 'message: Delete the property <code>\"tails\"</code> from <code>myDog</code>.');"
|
|
],
|
|
"challengeSeed": [
|
|
"var ourDog = {",
|
|
" \"name\": \"Camper\",",
|
|
" \"legs\": 4,",
|
|
" \"tails\": 1,",
|
|
" \"friends\": [\"everything!\"],",
|
|
" \"bark\": \"bow-wow\"",
|
|
"};",
|
|
"",
|
|
"delete ourDog.bark;",
|
|
"",
|
|
"var myDog = {",
|
|
" \"name\": \"Happy Coder\",",
|
|
" \"legs\": 4,",
|
|
" \"tails\": 1,",
|
|
" \"friends\": [\"Free Code Camp Campers\"],",
|
|
" \"bark\": \"woof\"",
|
|
"};",
|
|
"",
|
|
"// Only change code below this line.",
|
|
"",
|
|
"",
|
|
"",
|
|
"// Only change code above this line.",
|
|
"",
|
|
"(function(z){return z;})(myDog);"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 1
|
|
},
|
|
{
|
|
"id": "cf1111c1c11feddfaeb5bdef",
|
|
"title": "Iterate with JavaScript For Loops",
|
|
"description": [
|
|
"You can run the same code multiple times by using a loop.",
|
|
"The most common type of JavaScript loop is called a \"for loop\" because it runs \"for\" a specific number of times.",
|
|
"For loops are declared with three optional expressions seperated by semicolons:",
|
|
"<code>for ([initialization]; [condition]; [final-expression])</code>",
|
|
"The <code>initialization</code> statement is executed one time only before the loop starts. It is typically used to define and setup your loop variable.",
|
|
"The <code>condition</code> statement is evaluated at the beginning of every loop iteration and will continue as long as it evalutes to <code>true</code>. When <code>condition</code> is <code>false</code> at the start of the iteration, the loop will stop executing. This means if <code>condition</code> starts as <code>false</code>, your loop will never execute.",
|
|
"The <code>final-expression</code> is executed at the end of each loop iteration, prior to the next <code>condition</code> check and is usually used to increment or decrement your loop counter.",
|
|
"In the following example we initialize with <code>i = 0</code> and iterate while our condition <code>i < 5</code> is true. We'll increment <code>i</code> by <code>1</code> in each loop iteration with <code>i++</code> as our <code>final-expression</code>.",
|
|
"<code>var ourArray = [];</code>",
|
|
"<code>for (var i = 0; i < 5; i++) {</code>",
|
|
"<code> ourArray.push(i);</code>",
|
|
"<code>}</code>",
|
|
"<code>ourArray</code> will now contain <code>[0,1,2,3,4]</code>.",
|
|
"Let's use a <code>for</code> loop to work to push the values 1 through 5 onto <code>myArray</code>."
|
|
],
|
|
"tests": [
|
|
"assert(editor.getValue().match(/for\\s*\\(/g).length > 1, 'message: You should be using a <code>for</code> loop for this.');",
|
|
"assert.deepEqual(myArray, [1,2,3,4,5], 'message: <code>myArray</code> should equal <code>[1,2,3,4,5]</code>.');"
|
|
],
|
|
"challengeSeed": [
|
|
"var ourArray = [];",
|
|
"",
|
|
"for (var i = 0; i < 5; i++) {",
|
|
" ourArray.push(i);",
|
|
"}",
|
|
"",
|
|
"var myArray = [];",
|
|
"",
|
|
"// Only change code below this line.",
|
|
"",
|
|
"",
|
|
"",
|
|
"// Only change code above this line.",
|
|
"",
|
|
"if(typeof(myArray) !== \"undefined\"){(function(){return myArray;})();}",
|
|
""
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 1
|
|
},
|
|
{
|
|
"id":"56104e9e514f539506016a5c",
|
|
"title": "Iterate Odd Numbers With a For Loop",
|
|
"description":[
|
|
"For loops don't have to iterate one at a time. By changing our <code>final-expression</code>, we can count by even numbers.",
|
|
"We'll start at <code>i = 0</code> and loop while <code>i < 10</code>. We'll increment <code>i</code> by 2 each loop with <code>i += 2</code>.",
|
|
"<code>var ourArray = [];</code>",
|
|
"<code>for (var i = 0; i < 10; i += 2) {</code>",
|
|
"<code> ourArray.push(i);</code>",
|
|
"<code>}</code>",
|
|
"<code>ourArray</code> will now contain <code>[0,2,4,6,8]</code>.",
|
|
"Let's change our <code>initialization</code> and <code>final-expression</code> so we can count by odd numbers.",
|
|
"Push the odd numbers from 1 through 9 to <code>myArray</code> using a <code>for</code> loop."
|
|
],
|
|
"tests":[
|
|
"assert(editor.getValue().match(/for\\s*\\(/g).length > 1, 'message: You should be using a <code>for</code> loop for this.');",
|
|
"assert.deepEqual(myArray, [1,3,5,7,9], 'message: <code>myArray</code> should equal <code>[1,3,5,7,9]</code>.');"
|
|
],
|
|
"challengeSeed":[
|
|
"var ourArray = [];",
|
|
"",
|
|
"for (var i = 0; i < 10; i += 2) {",
|
|
" ourArray.push(i);",
|
|
"}",
|
|
"",
|
|
"var myArray = [];",
|
|
"",
|
|
"// Only change code below this line.",
|
|
"",
|
|
"",
|
|
"",
|
|
"// Only change code above this line.",
|
|
"",
|
|
"if(typeof(myArray) !== \"undefined\"){(function(){return myArray;})();}",
|
|
""
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 1
|
|
},
|
|
{
|
|
"id":"56105e7b514f539506016a5e",
|
|
"title": "Count Backwards With a For Loop",
|
|
"description":[
|
|
"A for loop can also count backwards, so long as we can define the right conditions.",
|
|
"In order to count backwards by twos, we'll need to change our <code>initialization</code>, <code>condition</code>, and <code>final-expression</code>.",
|
|
"We'll start at <code>i = 10</code> and loop while <code>i > 0</code>. We'll decrement <code>i</code> by 2 each loop with <code>i -= 2</code>.",
|
|
"<code>var ourArray = [];</code>",
|
|
"<code>for (var i = 10; i > 0; i -= 2) {</code>",
|
|
"<code> ourArray.push(i);</code>",
|
|
"<code>}</code>",
|
|
"<code>ourArray</code> will now contain <code>[10,8,6,4,2]</code>.",
|
|
"Let's change our <code>initialization</code> and <code>final-expression</code> so we can count backward by twos for numbers.",
|
|
"Push the odd numbers from 9 through 1 to <code>myArray</code> using a <code>for</code> loop."
|
|
],
|
|
"tests":[
|
|
"assert(editor.getValue().match(/for\\s*\\(/g).length > 1, 'message: You should be using a <code>for</code> loop for this.');",
|
|
"assert.deepEqual(myArray, [9,7,5,3,1], 'message: <code>myArray</code> should equal <code>[9,7,5,3,1]</code>.');"
|
|
],
|
|
"challengeSeed":[
|
|
"var ourArray = [];",
|
|
"",
|
|
"for (var i = 10; i > 0; i -= 2) {",
|
|
" ourArray.push(i);",
|
|
"}",
|
|
"",
|
|
"var myArray = [];",
|
|
"",
|
|
"// Only change code below this line.",
|
|
"",
|
|
"",
|
|
"",
|
|
"// Only change code above this line.",
|
|
"",
|
|
"if(typeof(myArray) !== \"undefined\"){(function(){return myArray;})();}",
|
|
""
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 1
|
|
},
|
|
{
|
|
"id": "cf1111c1c11feddfaeb1bdef",
|
|
"title": "Iterate with JavaScript While Loops",
|
|
"description": [
|
|
"You can run the same code multiple times by using a loop.",
|
|
"Another type of JavaScript loop is called a \"while loop\", because it runs \"while\" something is true and stops once that something is no longer true.",
|
|
"<code>var ourArray = [];</code>",
|
|
"<code>var i = 0;</code>",
|
|
"<code>while(i < 5) {</code>",
|
|
"<code> ourArray.push(i);</code>",
|
|
"<code> i++;</code>",
|
|
"<code>}</code>",
|
|
"Let's try getting a while loop to work by pushing values to an array.",
|
|
"Push the numbers 0 through 4 to <code>myArray</code> using a <code>while</code> loop."
|
|
],
|
|
"tests": [
|
|
"assert(editor.getValue().match(/while/g), 'message: You should be using a <code>while</code> loop for this.');",
|
|
"assert.deepEqual(myArray, [0,1,2,3,4], 'message: <code>myArray</code> should equal <code>[0,1,2,3,4]</code>.');"
|
|
],
|
|
"challengeSeed": [
|
|
"var myArray = [];",
|
|
"",
|
|
"// Only change code below this line.",
|
|
"",
|
|
"",
|
|
"",
|
|
"// Only change code above this line.",
|
|
"",
|
|
"if(typeof(myArray) !== \"undefined\"){(function(){return myArray;})();}",
|
|
""
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 1
|
|
},
|
|
{
|
|
"id": "cf1111c1c11feddfaeb9bdef",
|
|
"title": "Generate Random Fractions with JavaScript",
|
|
"description": [
|
|
"Random numbers are useful for creating random behavior.",
|
|
"JavaScript has a <code>Math.random()</code> function that generates a random decimal number.",
|
|
"Change <code>myFunction</code> to return a random number instead of returning <code>0</code>.",
|
|
"Note that you can return a function, just like you would return a variable or value."
|
|
],
|
|
"tests": [
|
|
"assert(typeof(myFunction()) === \"number\", 'message: <code>myFunction</code> should return a random number.');",
|
|
"assert((myFunction()+''). match(/\\./g), 'message: The number returned by <code>myFunction</code> should be a decimal.');",
|
|
"assert(editor.getValue().match(/Math\\.random/g).length >= 0, 'message: You should be using <code>Math.random</code> to generate the random decimal number.');"
|
|
],
|
|
"challengeSeed": [
|
|
"function myFunction() {",
|
|
"",
|
|
" // Only change code below this line.",
|
|
"",
|
|
" return 0;",
|
|
"",
|
|
" // Only change code above this line.",
|
|
"}",
|
|
"",
|
|
"(function(){return myFunction();})();"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 1
|
|
},
|
|
{
|
|
"id": "cf1111c1c12feddfaeb1bdef",
|
|
"title": "Generate Random Whole Numbers with JavaScript",
|
|
"description": [
|
|
"It's great that we can generate random decimal numbers, but it's even more useful if we use it to generate random whole numbers.",
|
|
"First, let's use <code>Math.random()</code> to generate a random decimal.",
|
|
"Then let's multiply this random decimal by 20.",
|
|
"Finally, let's use another function, <code>Math.floor()</code> to round the number down to its nearest whole number.",
|
|
"This technique will gives us a whole number between 0 and 19.",
|
|
"Note that because we're rounding down, it's impossible to actually get 20.",
|
|
"Putting everything together, this is what our code looks like:",
|
|
"<code>Math.floor(Math.random() * 20);</code>",
|
|
"See how <code>Math.floor</code> takes <code>(Math.random() * 20)</code> as its argument? That's right - you can pass a function to another function as an argument.",
|
|
"Let's use this technique to generate and return a random whole number between 0 and 9."
|
|
],
|
|
"tests": [
|
|
"assert(typeof(myFunction()) === \"number\" && (function(){var r = myFunction();return Math.floor(r) === r;})(), 'message: The result of <code>myFunction</code> should be a whole number.');",
|
|
"assert(editor.getValue().match(/Math.random/g).length > 1, 'message: You should be using <code>Math.random</code> to generate a random number.');",
|
|
"assert(editor.getValue().match(/\\(\\s*?Math.random\\s*?\\(\\s*?\\)\\s*?\\*\\s*?10\\s*?\\)/g) || editor.getValue().match(/\\(\\s*?10\\s*?\\*\\s*?Math.random\\s*?\\(\\s*?\\)\\s*?\\)/g), 'message: You should have multiplied the result of <code>Math.random</code> by 10 to make it a number that is between zero and nine.');",
|
|
"assert(editor.getValue().match(/Math.floor/g).length > 1, 'message: You should use <code>Math.floor</code> to remove the decimal part of the number.');"
|
|
],
|
|
"challengeSeed": [
|
|
"var randomNumberBetween0and19 = Math.floor(Math.random() * 20);",
|
|
"",
|
|
"function myFunction() {",
|
|
"",
|
|
" // Only change code below this line.",
|
|
"",
|
|
" return Math.random();",
|
|
"",
|
|
" // Only change code above this line.",
|
|
"}"
|
|
],
|
|
"tail":[
|
|
"(function(){return myFunction();})();"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 1
|
|
},
|
|
{
|
|
"id": "cf1111c1c12feddfaeb2bdef",
|
|
"title": "Generate Random Whole Numbers within a Range",
|
|
"description": [
|
|
"Instead of generating a random number between zero and a given number like we did before, we can generate a random number that falls within a range of two specific numbers.",
|
|
"To do this, we'll define a minimum number <code>min</code> and a maximum number <code>max</code>.",
|
|
"Here's the formula we'll use. Take a moment to read it and try to understand what this code is doing:",
|
|
"<code>Math.floor(Math.random() * (max - min + 1)) + min</code>",
|
|
"Define two variables: <code>myMin</code> and <code>myMax</code>, and set them both equal to numbers.",
|
|
"Then create a function called <code>myFunction</code> that returns a random number that's greater than or equal to <code>myMin</code>, and is less than or equal to <code>myMax</code>."
|
|
],
|
|
"tests": [
|
|
"assert(myFunction() >= myMin, 'message: The random number generated by <code>myFunction</code> should be greater than or equal to your minimum number, <code>myMin</code>.');",
|
|
"assert(myFunction() <= myMax, 'message: The random number generated by <code>myFunction</code> should be less than or equal to your maximum number, <code>myMax</code>.');",
|
|
"assert(myFunction() % 1 === 0 , 'message: The random number generated by <code>myFunction</code> should be an integer, not a decimal.');",
|
|
"assert((function(){if(editor.getValue().match(/myMax/g).length > 1 && editor.getValue().match(/myMin/g).length > 2 && editor.getValue().match(/Math.floor/g) && editor.getValue().match(/Math.random/g)){return true;}else{return false;}})(), 'message: <code>myFunction()</code> should use use both <code>myMax</code> and <code>myMin</code>, and return a random number in your range.');"
|
|
],
|
|
"challengeSeed": [
|
|
"var ourMin = 1;",
|
|
"",
|
|
"var ourMax = 9;",
|
|
"",
|
|
"function ourFunction() {",
|
|
"",
|
|
" return Math.floor(Math.random() * (ourMax - ourMin + 1)) + ourMin;",
|
|
"",
|
|
"}",
|
|
"",
|
|
"// Only change code below this line.",
|
|
"",
|
|
"var myMin;",
|
|
"",
|
|
"var myMax;",
|
|
"",
|
|
"function myFunction() {",
|
|
"",
|
|
" return;",
|
|
"",
|
|
"}",
|
|
"",
|
|
"// Only change code above this line.",
|
|
"",
|
|
"",
|
|
"(function(){return myFunction();})();"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 1
|
|
},
|
|
{
|
|
"id": "cf1111c1c12feddfaeb3bdef",
|
|
"title": "Use Conditional Logic with If and Else Statements",
|
|
"description": [
|
|
"We can use <code>if</code> statements in JavaScript to only execute code if a certain condition is met.",
|
|
"<code>if</code> statements require some sort of boolean condition to evaluate.",
|
|
"For example:",
|
|
"<code>if (1 === 2) {</code>",
|
|
"<code> return true;</code>",
|
|
"<code>} else {</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 <code>if</code> and <code>else</code> statements to return the string <code>\"heads\"</code> if the flip variable is zero, or else return the string <code>\"tails\"</code> if the flip variable is not zero."
|
|
],
|
|
"tests": [
|
|
"assert(editor.getValue().match(/if/g).length >= 2, 'message: Create a new if statement.');",
|
|
"assert(editor.getValue().match(/else/g).length >= 1, 'message: Created a new else statement.');",
|
|
"assert((function(){var result = myFunction();if(result === 'heads' || result === 'tails'){return true;} else {return false;}})(), 'message: <code>myFunction</code> should either return <code>heads</code> or <code>tails</code>.');",
|
|
"assert((function(){var result = myFunction();if(result === 'heads' && flip === 0 || result === 'tails' && flip !== 0){return true;} else {return false;}})(), 'message: <code>myFunction</code> should return <code>heads</code> when flip equals 0 and <code>tails</code> when flip equals 1.');"
|
|
],
|
|
"challengeSeed": [
|
|
"var flip = Math.floor(Math.random() * (1 - 0 + 1)) + 0;",
|
|
"",
|
|
"function myFunction() {",
|
|
"",
|
|
" // Only change code below this line.",
|
|
"",
|
|
"",
|
|
"",
|
|
" // Only change code above this line.",
|
|
"",
|
|
"}",
|
|
"",
|
|
"var result = myFunction();if(typeof(flip) !== \"undefined\" && typeof(flip) === \"number\" && typeof(result) !== \"undefined\" && typeof(result) === \"string\"){(function(y,z){return 'flip = ' + y.toString() + ', text = ' + z;})(flip, result);}"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 1
|
|
},
|
|
{
|
|
"id": "cf1111c1c12feddfaeb6bdef",
|
|
"title": "Sift through Text with Regular Expressions",
|
|
"description": [
|
|
"<code>Regular expressions</code> are used to find certain words or patterns inside of <code>strings</code>.",
|
|
"For example, if we wanted to find the word <code>the</code> in the string <code>The dog chased the cat</code>, we could use the following <code>regular expression</code>: <code>/the/gi</code>",
|
|
"Let's break this down a bit:",
|
|
"<code>the</code> is the pattern we want to match.",
|
|
"<code>g</code> means that we want to search the entire string for this pattern instead of just the first match.",
|
|
"<code>i</code> means that we want to ignore the case (uppercase or lowercase) when searching for the pattern.",
|
|
"<code>Regular expressions</code> are written by surrounding the pattern with <code>/</code> symbols.",
|
|
"Let's try selecting all the occurrences of the word <code>and</code> in the string <code>Ada Lovelace and Charles Babbage designed the first computer and the software that would have run on it</code>.",
|
|
"We can do this by replacing the <code>.</code> part of our regular expression with the word <code>and</code>."
|
|
],
|
|
"tests": [
|
|
"assert(test==2, 'message: Your <code>regular expression</code> should find two occurrences of the word <code>and</code>.');",
|
|
"assert(editor.getValue().match(/\\/and\\/gi/), 'message: Use <code>regular expressions</code> to find the word <code>and</code> in <code>testString</code>.');"
|
|
],
|
|
"challengeSeed": [
|
|
"var test = (function() {",
|
|
" var testString = \"Ada Lovelace and Charles Babbage designed the first computer and the software that would have run on it.\";",
|
|
" var expressionToGetSoftware = /software/gi;",
|
|
"",
|
|
" // Only change code below this line.",
|
|
"",
|
|
" var expression = /./gi;",
|
|
"",
|
|
" // Only change code above this line.",
|
|
"",
|
|
" return testString.match(expression).length;",
|
|
"})();(function(){return test;})();"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 1
|
|
},
|
|
{
|
|
"id": "cf1111c1c12feddfaeb7bdef",
|
|
"title": "Find Numbers with Regular Expressions",
|
|
"description": [
|
|
"We can use special selectors in <code>Regular Expressions</code> to select a particular type of value.",
|
|
"One such selector is the digit selector <code>\\d</code> which is used to retrieve the numbers in a string.",
|
|
"It is used like this: <code>/\\d/g</code>.",
|
|
"For numbers this is often written as <code>/\\d+/g</code>, where the <code>+</code> following the digit selector allows this regular expression to match multi-digit numbers.",
|
|
"Use the <code>\\d</code> selector to select the number of numbers in the string, allowing for the possibility of multi-digit numbers."
|
|
],
|
|
"tests": [
|
|
"assert(editor.getValue().match(/\\/\\\\d\\+\\//g), 'message: Use the <code>/\\d+/g</code> regular expression to find the numbers in <code>testString</code>.');",
|
|
"assert(test === 2, 'message: Your regular expression should find two numbers in <code>testString</code>.');"
|
|
],
|
|
"challengeSeed": [
|
|
"var test = (function() {",
|
|
"",
|
|
" var testString = \"There are 3 cats but 4 dogs.\";",
|
|
"",
|
|
" // Only change code below this line.",
|
|
"",
|
|
" var expression = /.+/g;",
|
|
"",
|
|
" // Only change code above this line.",
|
|
"",
|
|
" return testString.match(expression).length;",
|
|
"",
|
|
"})();(function(){return test;})();"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 1
|
|
},
|
|
{
|
|
"id": "cf1111c1c12feddfaeb8bdef",
|
|
"title": "Find Whitespace with Regular Expressions",
|
|
"description": [
|
|
"We can also use regular expression selectors like <code>\\s</code> to find whitespace in a string.",
|
|
"The whitespace characters are <code>\" \"</code> (space), <code>\\r</code> (the carriage return), <code>\\n</code> (newline), <code>\\t</code> (tab), and <code>\\f</code> (the form feed).",
|
|
"The whitespace regular expression looks like this:",
|
|
"<code>/\\s+/g</code>",
|
|
"Use it to select all the whitespace characters in the sentence string."
|
|
],
|
|
"tests": [
|
|
"assert(editor.getValue().match(/\\/\\\\s\\+\\//g), 'message: Use the <code>/\\s+/g</code> regular expression to find the spaces in <code>testString</code>.');",
|
|
"assert(test === 7, 'message: Your regular expression should find seven spaces in <code>testString</code>.');"
|
|
],
|
|
"challengeSeed": [
|
|
"var test = (function(){",
|
|
" var testString = \"How many spaces are there in this sentence?\";",
|
|
"",
|
|
" // Only change code below this line.",
|
|
"",
|
|
" var expression = /.+/g;",
|
|
"",
|
|
" // Only change code above this line.",
|
|
"",
|
|
" return testString.match(expression).length;",
|
|
"",
|
|
"})();(function(){return test;})();"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 1
|
|
},
|
|
{
|
|
"id": "cf1111c1c13feddfaeb3bdef",
|
|
"title": "Invert Regular Expression Matches with JavaScript",
|
|
"description": [
|
|
"You can invert any match by using the uppercase version of the regular expression selector.",
|
|
"For example, <code>\\s</code> will match any whitespace, and <code>\\S</code> will match anything that isn't whitespace.",
|
|
"Use <code>/\\S/g</code> to count the number of non-whitespace characters in <code>testString</code>."
|
|
],
|
|
"tests": [
|
|
"assert(editor.getValue().match(/\\/\\\\S\\/g/g), 'message: Use the <code>/\\S/g</code> regular expression to find non-space characters in <code>testString</code>.');",
|
|
"assert(test === 49, 'message: Your regular expression should find forty nine non-space characters in the <code>testString</code>.');"
|
|
],
|
|
"challengeSeed": [
|
|
"var test = (function(){",
|
|
" var testString = \"How many non-space characters are there in this sentence?\";",
|
|
"",
|
|
" // Only change code below this line.",
|
|
"",
|
|
" var expression = /./g;",
|
|
"",
|
|
" // Only change code above this line.",
|
|
"",
|
|
" return testString.match(expression).length;",
|
|
"})();(function(){return test;})();"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 1
|
|
},
|
|
{
|
|
"id": "cf1111c1c12feddfaeb9bdef",
|
|
"title": "Create a JavaScript Slot Machine",
|
|
"description": [
|
|
"We are now going to try and combine some of the stuff we've just learned and create the logic for a slot machine game.",
|
|
"For this we will need to generate three random numbers between <code>1</code> and <code>3</code> to represent the possible values of each individual slot.",
|
|
"Store the three random numbers in <code>slotOne</code>, <code>slotTwo</code> and <code>slotThree</code>.",
|
|
"Generate the random numbers by using the system we used earlier (an explanation of the formula can be found <a href=\"https://github.com/FreeCodeCamp/FreeCodeCamp/wiki/Waypoint-Generate-Random-Whole-Numbers-within-a-Range#explanation\">here</a>):",
|
|
"<code>Math.floor(Math.random() * (3 - 1 + 1)) + 1;</code>"
|
|
],
|
|
"tests": [
|
|
"assert(typeof(runSlots($(\".slot\"))[0]) === \"number\" && runSlots($(\".slot\"))[0] > 0 && runSlots($(\".slot\"))[0] < 4, '<code>slotOne</code> should be a random number.')",
|
|
"assert(typeof(runSlots($(\".slot\"))[1]) === \"number\" && runSlots($(\".slot\"))[1] > 0 && runSlots($(\".slot\"))[1] < 4, '<code>slotTwo</code> should be a random number.')",
|
|
"assert(typeof(runSlots($(\".slot\"))[2]) === \"number\" && runSlots($(\".slot\"))[2] > 0 && runSlots($(\".slot\"))[2] < 4, '<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(/slot.*?=.*?\\(.*?\\).*?/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",
|
|
" function runSlots() {",
|
|
" var slotOne;",
|
|
" var slotTwo;",
|
|
" var slotThree;",
|
|
" ",
|
|
" var images = [\"http://i.imgur.com/9H17QFk.png\", \"http://i.imgur.com/9RmpXTy.png\", \"http://i.imgur.com/VJnmtt5.png\"];",
|
|
" ",
|
|
" // Only change code below this line.",
|
|
" ",
|
|
" ",
|
|
" ",
|
|
" // Only change code above this line.",
|
|
" ",
|
|
" $(\".logger\").html(\"\");",
|
|
" $(\".logger\").html(\"Not A Win\")",
|
|
" ",
|
|
" if (slotOne !== undefined && slotTwo !== undefined && slotThree !== undefined) {",
|
|
" $(\".logger\").html(slotOne + \" \" + slotTwo + \" \" + slotThree);",
|
|
" }",
|
|
" return [slotOne, slotTwo, slotThree];",
|
|
" }",
|
|
"",
|
|
" $(document).ready(function() {",
|
|
" $(\".go\").click(function() {",
|
|
" runSlots();",
|
|
" });",
|
|
" });",
|
|
"fcces",
|
|
" ",
|
|
"<div>",
|
|
" <div class = \"container inset\">",
|
|
" <div class = \"header inset\">",
|
|
" <img src=\"https://s3.amazonaws.com/freecodecamp/freecodecamp_logo.svg.gz\" alt=\"learn to code javascript at Free Code Camp logo\" class=\"img-responsive nav-logo\">",
|
|
" <h2>FCC Slot Machine</h2>",
|
|
" </div>",
|
|
" <div class = \"slots inset\">",
|
|
" <div class = \"slot inset\">",
|
|
" ",
|
|
" </div>",
|
|
" <div class = \"slot inset\">",
|
|
" ",
|
|
" </div>",
|
|
" <div class = \"slot inset\">",
|
|
" ",
|
|
" </div>",
|
|
" </div>",
|
|
" <br/>",
|
|
" <div class = \"outset\">",
|
|
" <button class = \"go inset\">",
|
|
" Go",
|
|
" </button>",
|
|
" </div>",
|
|
" <br/>",
|
|
" <div class = \"foot inset\">",
|
|
" <span class = \"logger\"></span>",
|
|
" </div>",
|
|
" </div>",
|
|
"</div>",
|
|
"",
|
|
"<style>",
|
|
" .container {",
|
|
" background-color: #4a2b0f;",
|
|
" height: 400px;",
|
|
" width: 260px;",
|
|
" margin: 50px auto;",
|
|
" border-radius: 4px;",
|
|
" }",
|
|
" .header {",
|
|
" border: 2px solid #fff;",
|
|
" border-radius: 4px;",
|
|
" height: 55px;",
|
|
" margin: 14px auto;",
|
|
" background-color: #457f86",
|
|
" }",
|
|
" .header h2 {",
|
|
" height: 30px;",
|
|
" margin: auto;",
|
|
" }",
|
|
" .header h2 {",
|
|
" font-size: 14px;",
|
|
" margin: 0 0;",
|
|
" padding: 0;",
|
|
" color: #fff;",
|
|
" text-align: center;",
|
|
" }",
|
|
" .slots{",
|
|
" display: flex;",
|
|
" background-color: #457f86;",
|
|
" border-radius: 6px;",
|
|
" border: 2px solid #fff;",
|
|
" }",
|
|
" .slot{",
|
|
" flex: 1 0 auto;",
|
|
" background: white;",
|
|
" height: 75px;",
|
|
" margin: 8px;",
|
|
" border: 2px solid #215f1e;",
|
|
" border-radius: 4px;",
|
|
" }",
|
|
" .go {",
|
|
" width: 100%;",
|
|
" color: #fff;",
|
|
" background-color: #457f86;",
|
|
" border: 2px solid #fff;",
|
|
" border-radius: 2px;",
|
|
" box-sizing: none;",
|
|
" outline: none!important;",
|
|
" }",
|
|
" .foot {",
|
|
" height: 150px;",
|
|
" background-color: 457f86;",
|
|
" border: 2px solid #fff;",
|
|
" }",
|
|
" ",
|
|
" .logger {",
|
|
" color: white;",
|
|
" margin: 10px;",
|
|
" }",
|
|
" ",
|
|
" .outset {",
|
|
" -webkit-box-shadow: 0px 0px 15px -2px rgba(0,0,0,0.75);",
|
|
" -moz-box-shadow: 0px 0px 15px -2px rgba(0,0,0,0.75);",
|
|
" box-shadow: 0px 0px 15px -2px rgba(0,0,0,0.75);",
|
|
" }",
|
|
" ",
|
|
" .inset {",
|
|
" -webkit-box-shadow: inset 0px 0px 15px -2px rgba(0,0,0,0.75);",
|
|
" -moz-box-shadow: inset 0px 0px 15px -2px rgba(0,0,0,0.75);",
|
|
" box-shadow: inset 0px 0px 15px -2px rgba(0,0,0,0.75);",
|
|
" }",
|
|
"</style>"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 0
|
|
},
|
|
{
|
|
"id": "cf1111c1c13feddfaeb1bdef",
|
|
"title": "Add your JavaScript Slot Machine Slots",
|
|
"description": [
|
|
"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 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>}</code>"
|
|
],
|
|
"tests": [
|
|
"assert((function(){var data = runSlots();return data === null || data.toString().length === 1;})(), 'If all three of our random numbers are the same we should return that number. Otherwise we should return <code>null</code>.')"
|
|
],
|
|
"challengeSeed": [
|
|
"fccss",
|
|
" function runSlots() {",
|
|
" var slotOne;",
|
|
" var slotTwo;",
|
|
" var slotThree;",
|
|
" ",
|
|
" var images = [\"http://i.imgur.com/9H17QFk.png\", \"http://i.imgur.com/9RmpXTy.png\", \"http://i.imgur.com/VJnmtt5.png\"];",
|
|
" ",
|
|
" slotOne = Math.floor(Math.random() * (3 - 1 + 1)) + 1;",
|
|
" slotTwo = Math.floor(Math.random() * (3 - 1 + 1)) + 1;",
|
|
" slotThree = Math.floor(Math.random() * (3 - 1 + 1)) + 1;",
|
|
" ",
|
|
" $(\".logger\").html(\"\");",
|
|
" $(\".logger\").html(\"Not A Win\");",
|
|
" ",
|
|
" // Only change code below this line.",
|
|
" ",
|
|
" ",
|
|
" ",
|
|
" // Only change code above this line.",
|
|
" ",
|
|
" if (slotOne !== undefined && slotTwo !== undefined && slotThree !== undefined) {",
|
|
" $(\".logger\").html(slotOne);",
|
|
" $(\".logger\").append(\" \" + slotTwo);",
|
|
" $(\".logger\").append(\" \" + slotThree);",
|
|
" }",
|
|
" return [slotOne, slotTwo, slotThree];",
|
|
" }",
|
|
"",
|
|
" $(document).ready(function() {",
|
|
" $(\".go\").click(function() {",
|
|
" runSlots();",
|
|
" });",
|
|
" });",
|
|
"fcces",
|
|
" ",
|
|
"<div>",
|
|
" <div class = \"container inset\">",
|
|
" <div class = \"header inset\">",
|
|
" <img src=\"https://s3.amazonaws.com/freecodecamp/freecodecamp_logo.svg.gz\" alt=\"learn to code javascript at Free Code Camp logo\" class=\"img-responsive nav-logo\">",
|
|
" <h2>FCC Slot Machine</h2>",
|
|
" </div>",
|
|
" <div class = \"slots inset\">",
|
|
" <div class = \"slot inset\">",
|
|
" ",
|
|
" </div>",
|
|
" <div class = \"slot inset\">",
|
|
" ",
|
|
" </div>",
|
|
" <div class = \"slot inset\">",
|
|
" ",
|
|
" </div>",
|
|
" </div>",
|
|
" <br/>",
|
|
" <div class = \"outset\">",
|
|
" <button class = \"go inset\">",
|
|
" Go",
|
|
" </button>",
|
|
" </div>",
|
|
" <br/>",
|
|
" <div class = \"foot inset\">",
|
|
" <span class = \"logger\"></span>",
|
|
" </div>",
|
|
" </div>",
|
|
"</div>",
|
|
"",
|
|
"<style>",
|
|
" .container {",
|
|
" background-color: #4a2b0f;",
|
|
" height: 400px;",
|
|
" width: 260px;",
|
|
" margin: 50px auto;",
|
|
" border-radius: 4px;",
|
|
" }",
|
|
" .header {",
|
|
" border: 2px solid #fff;",
|
|
" border-radius: 4px;",
|
|
" height: 55px;",
|
|
" margin: 14px auto;",
|
|
" background-color: #457f86",
|
|
" }",
|
|
" .header h2 {",
|
|
" height: 30px;",
|
|
" margin: auto;",
|
|
" }",
|
|
" .header h2 {",
|
|
" font-size: 14px;",
|
|
" margin: 0 0;",
|
|
" padding: 0;",
|
|
" color: #fff;",
|
|
" text-align: center;",
|
|
" }",
|
|
" .slots{",
|
|
" display: flex;",
|
|
" background-color: #457f86;",
|
|
" border-radius: 6px;",
|
|
" border: 2px solid #fff;",
|
|
" }",
|
|
" .slot{",
|
|
" flex: 1 0 auto;",
|
|
" background: white;",
|
|
" height: 75px;",
|
|
" margin: 8px;",
|
|
" border: 2px solid #215f1e;",
|
|
" border-radius: 4px;",
|
|
" }",
|
|
" .go {",
|
|
" width: 100%;",
|
|
" color: #fff;",
|
|
" background-color: #457f86;",
|
|
" border: 2px solid #fff;",
|
|
" border-radius: 2px;",
|
|
" box-sizing: none;",
|
|
" outline: none!important;",
|
|
" }",
|
|
" .foot {",
|
|
" height: 150px;",
|
|
" background-color: 457f86;",
|
|
" border: 2px solid #fff;",
|
|
" }",
|
|
" ",
|
|
" .logger {",
|
|
" color: white;",
|
|
" margin: 10px;",
|
|
" }",
|
|
" ",
|
|
" .outset {",
|
|
" -webkit-box-shadow: 0px 0px 15px -2px rgba(0,0,0,0.75);",
|
|
" -moz-box-shadow: 0px 0px 15px -2px rgba(0,0,0,0.75);",
|
|
" box-shadow: 0px 0px 15px -2px rgba(0,0,0,0.75);",
|
|
" }",
|
|
" ",
|
|
" .inset {",
|
|
" -webkit-box-shadow: inset 0px 0px 15px -2px rgba(0,0,0,0.75);",
|
|
" -moz-box-shadow: inset 0px 0px 15px -2px rgba(0,0,0,0.75);",
|
|
" box-shadow: inset 0px 0px 15px -2px rgba(0,0,0,0.75);",
|
|
" }",
|
|
"</style>"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 0
|
|
},
|
|
{
|
|
"id": "cf1111c1c13feddfaeb2bdef",
|
|
"title": "Bring your JavaScript Slot Machine to Life",
|
|
"description": [
|
|
"Now we can detect a win. Let's get this slot machine working.",
|
|
"Let's use the jQuery <code>selector</code> <code>$(\".slot\")</code> to select all of the slots.",
|
|
"Once they are all selected, we can use <code>bracket notation</code> to access each individual slot:",
|
|
"<code>$($(\".slot\")[0]).html(slotOne);</code>",
|
|
"This jQuery will select the first and update the slot's HTML to display the correct number.",
|
|
"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((editor.match( /\\$\\s*?\\(\\s*?\\$\\s*?\\(\\s*?(?:'|\")\\s*?\\.slot\\s*?(?:'|\")\\s*?\\)\\[\\d\\]\\s*?\\)/gi) && editor.match( /\\$\\s*?\\(\\s*?\\$\\s*?\\(\\s*?(?:'|\")\\s*?\\.slot\\s*?(?:'|\")\\s*?\\)\\[\\d\\]\\s*?\\)/gi ).length >= 3 && editor.match( /\\.html\\(slotOne\\)/gi ) && editor.match( /\\.html\\(slotTwo\\)/gi ) && editor.match( /\\.html\\(slotThree\\)/gi )), 'You should have used the the selector given in the description to select each slot and assign it the value of <code>slotOne</code>, <code>slotTwo</code> and <code>slotThree</code> respectively.')"
|
|
],
|
|
"challengeSeed": [
|
|
"fccss",
|
|
" function runSlots() {",
|
|
" var slotOne;",
|
|
" var slotTwo;",
|
|
" var slotThree;",
|
|
" ",
|
|
" var images = [\"http://i.imgur.com/9H17QFk.png\", \"http://i.imgur.com/9RmpXTy.png\", \"http://i.imgur.com/VJnmtt5.png\"];",
|
|
" ",
|
|
" slotOne = Math.floor(Math.random() * (3 - 1 + 1)) + 1;",
|
|
" slotTwo = Math.floor(Math.random() * (3 - 1 + 1)) + 1;",
|
|
" slotThree = Math.floor(Math.random() * (3 - 1 + 1)) + 1;",
|
|
" ",
|
|
" $(\".logger\").html(\"\");",
|
|
" $(\".logger\").html(\"Not A Win\")",
|
|
" ",
|
|
" // Only change code below this line.",
|
|
" ",
|
|
" ",
|
|
" ",
|
|
" // Only change code above this line.",
|
|
" ",
|
|
" if (slotOne === slotTwo && slotTwo === slotThree) {",
|
|
" return slotOne;",
|
|
" }",
|
|
" ",
|
|
" if (slotOne !== undefined && slotTwo !== undefined && slotThree !== undefined) {",
|
|
" $(\".logger\").html(slotOne);",
|
|
" $(\".logger\").append(\" \" + slotTwo);",
|
|
" $(\".logger\").append(\" \" + slotThree);",
|
|
" }",
|
|
" ",
|
|
" return [slotOne, slotTwo, slotThree];",
|
|
" }",
|
|
"",
|
|
" $(document).ready(function() {",
|
|
" $(\".go\").click(function() {",
|
|
" runSlots();",
|
|
" });",
|
|
" });",
|
|
"fcces",
|
|
" ",
|
|
"<div>",
|
|
" <div class = \"container inset\">",
|
|
" <div class = \"header inset\">",
|
|
" <img src=\"https://s3.amazonaws.com/freecodecamp/freecodecamp_logo.svg.gz\" alt=\"learn to code javascript at Free Code Camp logo\" class=\"img-responsive nav-logo\">",
|
|
" <h2>FCC Slot Machine</h2>",
|
|
" </div>",
|
|
" <div class = \"slots inset\">",
|
|
" <div class = \"slot inset\">",
|
|
" ",
|
|
" </div>",
|
|
" <div class = \"slot inset\">",
|
|
" ",
|
|
" </div>",
|
|
" <div class = \"slot inset\">",
|
|
" ",
|
|
" </div>",
|
|
" </div>",
|
|
" <br/>",
|
|
" <div class = \"outset\">",
|
|
" <button class = \"go inset\">",
|
|
" Go",
|
|
" </button>",
|
|
" </div>",
|
|
" <br/>",
|
|
" <div class = \"foot inset\">",
|
|
" <span class = \"logger\"></span>",
|
|
" </div>",
|
|
" </div>",
|
|
"</div>",
|
|
"",
|
|
"<style>",
|
|
" .container {",
|
|
" background-color: #4a2b0f;",
|
|
" height: 400px;",
|
|
" width: 260px;",
|
|
" margin: 50px auto;",
|
|
" border-radius: 4px;",
|
|
" }",
|
|
" .header {",
|
|
" border: 2px solid #fff;",
|
|
" border-radius: 4px;",
|
|
" height: 55px;",
|
|
" margin: 14px auto;",
|
|
" background-color: #457f86",
|
|
" }",
|
|
" .header h2 {",
|
|
" height: 30px;",
|
|
" margin: auto;",
|
|
" }",
|
|
" .header h2 {",
|
|
" font-size: 14px;",
|
|
" margin: 0 0;",
|
|
" padding: 0;",
|
|
" color: #fff;",
|
|
" text-align: center;",
|
|
" }",
|
|
" .slots{",
|
|
" display: flex;",
|
|
" background-color: #457f86;",
|
|
" border-radius: 6px;",
|
|
" border: 2px solid #fff;",
|
|
" }",
|
|
" .slot{",
|
|
" flex: 1 0 auto;",
|
|
" background: white;",
|
|
" height: 75px;",
|
|
" margin: 8px;",
|
|
" border: 2px solid #215f1e;",
|
|
" border-radius: 4px;",
|
|
" text-align: center;",
|
|
" padding-top: 25px;",
|
|
" }",
|
|
" .go {",
|
|
" width: 100%;",
|
|
" color: #fff;",
|
|
" background-color: #457f86;",
|
|
" border: 2px solid #fff;",
|
|
" border-radius: 2px;",
|
|
" box-sizing: none;",
|
|
" outline: none!important;",
|
|
" }",
|
|
" .foot {",
|
|
" height: 150px;",
|
|
" background-color: 457f86;",
|
|
" border: 2px solid #fff;",
|
|
" }",
|
|
" ",
|
|
" .logger {",
|
|
" color: white;",
|
|
" margin: 10px;",
|
|
" }",
|
|
" ",
|
|
" .outset {",
|
|
" -webkit-box-shadow: 0px 0px 15px -2px rgba(0,0,0,0.75);",
|
|
" -moz-box-shadow: 0px 0px 15px -2px rgba(0,0,0,0.75);",
|
|
" box-shadow: 0px 0px 15px -2px rgba(0,0,0,0.75);",
|
|
" }",
|
|
" ",
|
|
" .inset {",
|
|
" -webkit-box-shadow: inset 0px 0px 15px -2px rgba(0,0,0,0.75);",
|
|
" -moz-box-shadow: inset 0px 0px 15px -2px rgba(0,0,0,0.75);",
|
|
" box-shadow: inset 0px 0px 15px -2px rgba(0,0,0,0.75);",
|
|
" }",
|
|
"</style>"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 0
|
|
},
|
|
{
|
|
"id": "cf1111c1c11feddfaeb1bdff",
|
|
"title": "Give your JavaScript Slot Machine some Stylish Images",
|
|
"description": [
|
|
"Now let's add some images to our slots.",
|
|
"We've already set up the images for you in an array called <code>images</code>. We can use different indexes to grab each of these.",
|
|
"Here's how we would set the first slot to show a different image depending on which number its random number generates:",
|
|
"<code>$($('.slot')[0]).html('<img src = \"' + images[slotOne-1] + '\">');</code>",
|
|
"Set up all three slots like this, then click the \"Go\" button to play the slot machine."
|
|
],
|
|
"tests": [
|
|
"assert((editor.match(/\\$\\s*?\\(\\s*?\\$\\s*?\\(\\s*?(?:'|\")\\s*?\\.slot\\s*?(?:'|\")\\s*?\\)\\[\\d\\]\\s*?\\)\\.html\\(\\s*?\\'\\<img\\s?src\\s?=\\s?\"\\'\\s?\\+\\s?images\\[\\w+\\-1\\]\\s?\\+\\s?\\'\"\\>\\'\\s*?\\);/gi) && editor.match(/\\$\\s*?\\(\\s*?\\$\\s*?\\(\\s*?(?:'|\")\\s*?\\.slot\\s*?(?:'|\")\\s*?\\)\\[\\d\\]\\s*?\\)\\.html\\(\\s*?\\'\\<img\\s?src\\s?=\\s?\"\\'\\s?\\+\\s?images\\[\\w+\\-1\\]\\s?\\+\\s?\\'\"\\>\\'\\s*?\\);/gi).length >= 3), 'Use the provided code three times. One for each slot.')",
|
|
"assert(editor.match(/\\$\\s*?\\(\\s*?\\$\\s*?\\(\\s*?(?:'|\")\\s*?\\.slot\\s*?(?:'|\")\\s*?\\)\\[0\\]\\s*?\\)/gi), 'You should have used <code>$('.slot')[0]</code> at least once.')",
|
|
"assert(editor.match(/\\$\\s*?\\(\\s*?\\$\\s*?\\(\\s*?(?:'|\")\\s*?\\.slot\\s*?(?:'|\")\\s*?\\)\\[1\\]\\s*?\\)/gi), 'You should have used <code>$('.slot')[1]</code> at least once.')",
|
|
"assert(editor.match(/\\$\\s*?\\(\\s*?\\$\\s*?\\(\\s*?(?:'|\")\\s*?\\.slot\\s*?(?:'|\")\\s*?\\)\\[2\\]\\s*?\\)/gi), 'You should have used <code>$('.slot')[2]</code> at least once.')",
|
|
"assert(editor.match(/slotOne/gi) && editor.match(/slotOne/gi).length >= 7, 'You should have used the <code>slotOne</code> value at least once.')",
|
|
"assert(editor.match(/slotTwo/gi) && editor.match(/slotTwo/gi).length >= 8, 'You should have used the <code>slotTwo</code> value at least once.')",
|
|
"assert(editor.match(/slotThree/gi) && editor.match(/slotThree/gi).length >= 7, 'You should have used the <code>slotThree</code> value at least once.')"
|
|
],
|
|
"challengeSeed": [
|
|
"fccss",
|
|
" function runSlots() {",
|
|
" var slotOne;",
|
|
" var slotTwo;",
|
|
" var slotThree;",
|
|
" ",
|
|
" var images = [\"http://i.imgur.com/9H17QFk.png\", \"http://i.imgur.com/9RmpXTy.png\", \"http://i.imgur.com/VJnmtt5.png\"];",
|
|
" ",
|
|
" slotOne = Math.floor(Math.random() * (3 - 1 + 1)) + 1;",
|
|
" slotTwo = Math.floor(Math.random() * (3 - 1 + 1)) + 1;",
|
|
" slotThree = Math.floor(Math.random() * (3 - 1 + 1)) + 1;",
|
|
" ",
|
|
" $('.logger').html('');",
|
|
" $('.logger').html('Not A Win');",
|
|
" ",
|
|
" // Only change code below this line.",
|
|
" ",
|
|
" ",
|
|
" ",
|
|
" // Only change code above this line.",
|
|
" ",
|
|
" if (slotOne === slotTwo && slotTwo === slotThree) {",
|
|
" return slotOne;",
|
|
" }",
|
|
" ",
|
|
" if (slotOne !== undefined && slotTwo !== undefined && slotThree !== undefined) {",
|
|
" $('.logger').html(slotOne);",
|
|
" $('.logger').append(' ' + slotTwo);",
|
|
" $('.logger').append(' ' + slotThree);",
|
|
" }",
|
|
" ",
|
|
" return [slotOne, slotTwo, slotThree];",
|
|
" }",
|
|
"",
|
|
" $(document).ready(function() {",
|
|
" $('.go').click(function() {",
|
|
" runSlots();",
|
|
" });",
|
|
" });",
|
|
"fcces",
|
|
" ",
|
|
"<div>",
|
|
" <div class = 'container inset'>",
|
|
" <div class = 'header inset'>",
|
|
" <img src='https://s3.amazonaws.com/freecodecamp/freecodecamp_logo.svg.gz' alt='learn to code javascript at Free Code Camp logo' class='img-responsive nav-logo'>",
|
|
" <h2>FCC Slot Machine</h2>",
|
|
" </div>",
|
|
" <div class = 'slots inset'>",
|
|
" <div class = 'slot inset'>",
|
|
" ",
|
|
" </div>",
|
|
" <div class = 'slot inset'>",
|
|
" ",
|
|
" </div>",
|
|
" <div class = 'slot inset'>",
|
|
" ",
|
|
" </div>",
|
|
" </div>",
|
|
" <br/>",
|
|
" <div class = 'outset'>",
|
|
" <button class = 'go inset'>",
|
|
" Go",
|
|
" </button>",
|
|
" </div>",
|
|
" <br/>",
|
|
" <div class = 'foot inset'>",
|
|
" <span class = 'logger'></span>",
|
|
" </div>",
|
|
" </div>",
|
|
"</div>",
|
|
"",
|
|
"<style>",
|
|
" .slot > img {",
|
|
" margin: 0!important;",
|
|
" height: 71px;",
|
|
" width: 50px;",
|
|
" }",
|
|
" .container {",
|
|
" background-color: #4a2b0f;",
|
|
" height: 400px;",
|
|
" width: 260px;",
|
|
" margin: 50px auto;",
|
|
" border-radius: 4px;",
|
|
" }",
|
|
" .header {",
|
|
" border: 2px solid #fff;",
|
|
" border-radius: 4px;",
|
|
" height: 55px;",
|
|
" margin: 14px auto;",
|
|
" background-color: #457f86",
|
|
" }",
|
|
" .header h2 {",
|
|
" height: 30px;",
|
|
" margin: auto;",
|
|
" }",
|
|
" .header h2 {",
|
|
" font-size: 14px;",
|
|
" margin: 0 0;",
|
|
" padding: 0;",
|
|
" color: #fff;",
|
|
" text-align: center;",
|
|
" }",
|
|
" .slots{",
|
|
" display: flex;",
|
|
" background-color: #457f86;",
|
|
" border-radius: 6px;",
|
|
" border: 2px solid #fff;",
|
|
" }",
|
|
" .slot{",
|
|
" flex: 1 0 auto;",
|
|
" background: white;",
|
|
" height: 75px;",
|
|
" width: 50px;",
|
|
" margin: 8px;",
|
|
" border: 2px solid #215f1e;",
|
|
" border-radius: 4px;",
|
|
" text-align: center;",
|
|
" }",
|
|
" .go {",
|
|
" width: 100%;",
|
|
" color: #fff;",
|
|
" background-color: #457f86;",
|
|
" border: 2px solid #fff;",
|
|
" border-radius: 2px;",
|
|
" box-sizing: none;",
|
|
" outline: none!important;",
|
|
" }",
|
|
" .foot {",
|
|
" height: 150px;",
|
|
" background-color: 457f86;",
|
|
" border: 2px solid #fff;",
|
|
" }",
|
|
" ",
|
|
" .logger {",
|
|
" color: white;",
|
|
" margin: 10px;",
|
|
" }",
|
|
" ",
|
|
" .outset {",
|
|
" -webkit-box-shadow: 0px 0px 15px -2px rgba(0,0,0,0.75);",
|
|
" -moz-box-shadow: 0px 0px 15px -2px rgba(0,0,0,0.75);",
|
|
" box-shadow: 0px 0px 15px -2px rgba(0,0,0,0.75);",
|
|
" }",
|
|
" ",
|
|
" .inset {",
|
|
" -webkit-box-shadow: inset 0px 0px 15px -2px rgba(0,0,0,0.75);",
|
|
" -moz-box-shadow: inset 0px 0px 15px -2px rgba(0,0,0,0.75);",
|
|
" box-shadow: inset 0px 0px 15px -2px rgba(0,0,0,0.75);",
|
|
" }",
|
|
"</style>"
|
|
],
|
|
"type": "waypoint",
|
|
"challengeType": 0
|
|
}
|
|
]
|
|
}
|