freeCodeCamp/challenges/basic-javascript.json

1592 lines
66 KiB
JSON

{
"name": "Basic JavaScript",
"order": 0.005,
"challenges": [
{
"id":"bd7123c9c441eddfaeb4bdef",
"name":"Welcome To Comments",
"dashedName":"waypoint-welcome-to-comments",
"difficulty":"9.98",
"description":[
"",
"A comment is a very useful line of code that is not actually ran by the machine executing it. With this property comments are the perfect way of creating notes to yourself or anyone else who reads your code describing what the code does",
"It's an extremely important part in writing good, efficient and maintainable code and a requirement by most employers",
"Let's take a look at the two ways in which we can write a comment in JavaScript",
"<code> //This is a comment </code>",
"These comment out the entire line that they are on",
"<code> /*This is also a comment*/ </code>",
"These comment out everything in between <code> /* </code> and <code> */ </code>",
"Try creating one of each now."
],
"tests":[
"assert(editor.getValue().match(/(\\/\\*)...../g), 'Make sure you have at least one \/\\* \\*\/ style comment that has at least five letters in it');",
"assert(editor.getValue().match(/(\\*\\/)/g), 'Make sure that you close the coment with a \\*\/');",
"assert(editor.getValue().match(/(\\/\\/)...../g), 'Make sure that there is at least one \\/\\/ style comment with at least five letters in it');"
],
"challengeSeed":[
],
"challengeType": 1
},
{
"id": "bd7123c9c441eddfaeb5bdef",
"name": "Unconditionally Loving Booleans",
"dashedName": "waypoint-unconditionally-loving-booleans",
"difficulty": "9.98001",
"description": [
"Return true",
"A boolean is a type of variable that represents either true or false (Named after the British mathematician George Boole).",
"Booleans are often the result of a function or a comparative operation, for example <code> 1==1 </code> is true whereas <code> 1==2 </code> is false.",
"They are most commonly found inside <code> if </code> statements which we shall cover later",
"For now 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', 'The value returned by welcomeToBooleans() should be a boolean value. (true of false)');",
"assert(welcomeToBooleans() == true, 'The value returned by welcomeToBooleans() should be true');"
],
"challengeSeed": [
"function welcomeToBooleans() {",
"// Good luck!",
"return false;",
"}",
"",
"welcomeToBooleans();"
],
"challengeType": 1
},
{
"id": "bd7123c9c443eddfaeb5bdef",
"name": "Start Using Variables",
"dashedName": "waypoint-start-using-variables",
"difficulty": "9.9801",
"description": [
"",
"Now, use the <code>var</code> keyword to create a <code>variable</code> called <code>myName</code>. Set its value to your name.",
"<code>Variables</code> are used to store values.",
"The name variable comes from the fact that it's value, varies!",
"Now Let's create our first variable called myName and because it's a name let's make it a string!",
"Be sure to use lowercase and uppercase letters properly. JavaScript variables are written in <code>camel case</code>. An example of camel case is: camelCase.",
"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');"
],
"challengeSeed": [
"// var ourName = \"Free Code Camp\";",
"",
"// You can ignore this.",
"// We use this to show you the value of your variable in your output box.",
"// We'll learn about functions soon.",
"",
"if(typeof(myName) !== 'undefined'){(function(v){return(v);})(myName);}"
],
"challengeType": 1
},
{
"id": "bd7123c9c444eddfaeb5bdef",
"name": "Define Your First and Last Name",
"dashedName": "waypoint-define-your-first-and-last-name",
"difficulty": "9.9802",
"description": [
"",
"Programs will almost always have several different variables that are used to keep track of several different pieces of data",
"We are now going to go and create two new variables <code> myFirstName </code> and <code> myLastName </code> that are strings",
"You can assign these variables to be equal to your first and last names 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');"
],
"challengeSeed": [
"// ourName = \"Free Code Camp\";",
"// var ourFirstName = \"Free\";",
"// var ourLastName = \"Code Camp\";",
"",
"",
"// You can ignore this.",
"// We use this to show you the value of your variable in your output box.",
"// We'll learn about functions soon.",
"if(typeof(myFirstName) !== 'undefined' && typeof(myLastName) !== 'undefined'){(function(y,z){return(y + ', ' + z);})(myFirstName, myLastName);}"
],
"challengeType": 1
},
{
"id": "bd7123c9c448eddfaeb5bdef",
"name": "Check the Length Property of a String Variable",
"dashedName": "waypoint-check-the-length-property-of-a-string-variable",
"difficulty": "9.9809",
"description": [
"",
"Use the <code>.length</code> property to count the number of characters in the <code>lastNameLength</code> variable.",
"For example, if we created a variable <code>var firstName = \"Julie\"</code>, we could find out how long the string \"Julie\" is by using the <code>firstName.length</code> property."
],
"tests": [
"assert((function(){if(typeof(lastNameLength) != 'undefined' && typeof(lastNameLength) == 'number' && lastNameLength == 4){return(true);}else{return(false);}})(), 'lastNameLength should be equal to four')",
"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;",
"var lastNameLength = 0;",
"var firstName = \"Madeline\";",
"",
"firstNameLength = firstName.length;",
"",
"var lastName = \"Chen\";",
"",
"lastNameLength = lastName;",
"",
"",
"",
"// You can ignore this.",
"// We use this to show you the value of your variable in your output box.",
"// We'll learn about functions soon.",
"if(typeof(lastNameLength) != 'undefined'){(function(v){return(v);})(lastNameLength);}"
],
"challengeType": 1
},
{
"id": "bd7123c9c549eddfaeb5bdef",
"name": "Use Bracket Notation to Find the First Character in a String",
"dashedName": "waypoint-use-bracket-notation-to-find-the-first-character-in-a-string",
"difficulty": "9.9810",
"description": [
"Use <code>bracket notation</code> to find the first character in a the <code>firstLetterOfLastName</code> variable.",
"<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 \"Julie\" is \"J\". So if <code>var firstName = \"Julie\"</code>, you can get the value of the first letter of the string by using <code>firstName[0]</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 == 'C'){return(true);}else{return(false);}})(), 'The first letter of firstLetterOfLastName should be a C');"
],
"challengeSeed": [
"var firstLetterOfLastName = \"\"",
"var firstLetterOfLastName = \"\"",
"",
"var firstName = \"Madeline\";",
"",
"firstLetterOfFirstName = firstName[0];",
"",
"var lastName = \"Chen\";",
"",
"firstLetterOfLastName = lastName;",
"",
"",
"// You can ignore this.",
"// We use this to show you the value of your variable in your output box.",
"// We'll learn about functions soon.",
"(function(v){return(v);})(firstLetterOfLastName);"
],
"challengeType": 1
},
{
"id": "bd7123c9c450eddfaeb5bdef",
"name": "Use Bracket Notation to Find the Nth Character in a String",
"dashedName": "waypoint-use-bracket-notation-to-find-the-nth-character-in-a-string",
"difficulty": "9.9811",
"description": [
"Just like the last lesson where we used <code> Bracket Notation </code> to access the first letter we can use the same method to get the letters ar other positions",
"Don't forget that computers start counting at 0 so the first letter is actually the zeroth one",
"Let's now 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 == 'e', 'The third last letter of lastName should be an e');"
],
"challengeSeed": [
"var firstName = \"Madeline\";",
"",
"var secondLetterOfFirstName = firstName[1];",
"",
"var lastName = \"Chen\";",
"",
"var thirdLetterOfLastName = lastName;",
"",
"",
"// You can ignore this.",
"// We use this to show you the value of your variable in your output box.",
"// We'll learn about functions soon.",
"(function(v){return(v);})(thirdLetterOfLastName);"
],
"challengeType": 1
},
{
"id": "bd7123c9c451eddfaeb5bdef",
"name": "Use Bracket Notation to Find the Last Character in a String",
"dashedName": "waypoint-use-bracket-notation-to-find-the-last-character-in-a-string",
"difficulty": "9.9812",
"description": [
"Use <code>bracket notation</code> to find the last character in the <code>lastName</code> variable.",
"For example, the character at index 0 in the word \"Julie\" is \"J\". So if <code>var firstName = \"Julie\"</code>, you can get the value of the first letter of the string by using <code>firstName[0]</code>.",
"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 = \"Julie\"</code>, you can get the value of the last letter of the string by using <code>firstName[firstName.length - 1]</code>.",
"Try looking at the <code>lastLetterOfLastName</code> variable declaration if you get stuck."
],
"tests": [
"assert(lastLetterOfLastName == 'n', 'lastLetterOfLastName should be <code>n</code>');",
"assert(editor.getValue().match(/\\.length/g), 'You have to use .length to get the last letter');"
],
"challengeSeed": [
"var firstName = \"Madeline\";",
"",
"var lastLetterOfFirstName = firstName[firstName.length - 1];",
"",
"var lastName = \"Chen\";",
"",
"var lastLetterOfLastName = lastName;",
"",
"",
"(function(v){return(v);})(lastLetterOfLastName);"
],
"challengeType": 1
},
{
"id": "bd7123c9c452eddfaeb5bdef",
"name": "Use Bracket Notation to Find the Nth to Last Character in a String",
"dashedName": "waypoint-use-bracket-notation-to-find-the-nth-to-last-character-in-a-string",
"difficulty": "9.9813",
"description": [
"Use <code>bracket notation</code> to find the second-to-last character in the <code>lastName</code> variable.",
"For example, the character at index 0 in the word \"Julie\" is \"J\". So if <code>var firstName = \"Julie\"</code>, you can get the value of the first letter of the string by using <code>firstName[0]</code>.",
"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 = \"Julie\"</code>, you can get the value of the third-to-last letter of the string by using <code>firstName[firstName.length - 3]</code>.",
"Try looking at the <code>lastLetterOfLastName</code> variable declaration if you get stuck."
],
"tests": [
"assert(secondToLastLetterOfLastName == 'e', 'secondToLastLetterOfLastName should be e');",
"assert(editor.getValue().match(/\\.length/g), 'You have to use .length to get the third last letter');"
],
"challengeSeed": [
"var firstName = \"Madeline\";",
"",
"var thirdToLastLetterOfFirstName = firstName[firstName.length - 3];",
"",
"var lastName = \"Chen\";",
"",
"var secondToLastLetterOfLastName = lastName;",
"",
"",
"(function(v){return(v);})(secondToLastLetterOfLastName);"
],
"challengeType": 1
},
{
"id": "cf1111c1c11feddfaeb3bdef",
"name": "Magical Maths Addition",
"dashedName": "waypoint-magical-maths-addition",
"difficulty": "9.98141",
"description": [
"",
"In JavaScript whole numbers (called integers) can be easily used to preform mathematical functions",
"Let's try a few of the most commonly used ones now",
"We use <code> + </code> for addition",
"Replace the <code> 0 </code> with correct number to achieve the result in the comment."
],
"tests": [
"assert((function(){if(add == 20 && editor.getValue().match(/\\+/g)){return(true);}else{return(false);}})(), 'Add should be the result of a sum and be equal to 20');"
],
"challengeSeed": [
"var add = 10 + 0;//equals 20",
"",
"",
"",
"(function(z){return('add='+z);})(add);"
],
"challengeType": 1
},
{
"id": "cf1111c1c11feddfaeb4bdef",
"name": "Magical Maths Subtraction",
"dashedName": "waypoint-magical-maths-subtraction",
"difficulty": "9.98142",
"description": [
"",
"In JavaScript whole numbers (called integers) can be easily used to preform mathematical functions",
"Let's try a few of the most commonly used ones now",
"We use <code> - </code> for subtraction",
"Replace the <code> 0 </code> with correct number to achieve the result in the comment."
],
"tests": [
"assert((function(){if(subtract == 12 && editor.getValue().match(/\\-/g)){return(true);}else{return(false);}})(), 'Subtract should be the result of a sum and be equal to 12');"
],
"challengeSeed": [
"var subtract = 45 - 0;//equals 12",
"",
"",
"",
"(function(z){return('subtract='+z);})(subtract);"
],
"challengeType": 1
},
{
"id": "cf1231c1c11feddfaeb5bdef",
"name": "Magical Maths Multiplication",
"dashedName": "waypoint-magical-maths-multiplication",
"difficulty": "9.98143",
"description": [
"",
"In JavaScript whole numbers (called integers) can be easily used to preform mathematical functions",
"Let's try a few of the most commonly used ones now",
"We use <code> * </code> for multiplication",
"Replace the <code> 0 </code> with correct number to achieve the result in the comment."
],
"tests": [
"assert((function(){if(multiply == 80 && editor.getValue().match(/\\*/g)){return(true);}else{return(false);}})(), 'Multiply should be the result of a sum and be equal to 80');"
],
"challengeSeed": [
"var multiply = 8 * 0;//equals 80",
"",
"",
"",
"(function(z){return('multiply='+z);})(multiply);"
],
"challengeType": 1
},
{
"id": "cf1111c1c11feddfaeb6bdef",
"name": "Magical Maths Division",
"dashedName": "waypoint-magical-maths-division",
"difficulty": "9.9814",
"description": [
"",
"In JavaScript whole numbers (called integers) can be easily used to preform mathematical functions",
"Let's try a few of the most commonly used ones now",
"We use <code> / </code> for division",
"Replace the <code> 0 </code> with correct number to achieve the result in the comment."
],
"tests": [
"assert((function(){if(divide == 2 && editor.getValue().match(/\\//g)){return(true);}else{return(false);}})(), 'Divide should be the result of a sum and be equal to 2');"
],
"challengeSeed": [
"var divide = 66 / 0;//equals 2",
"",
"",
"",
"(function(z){return('divide='+z);})(divide);"
],
"challengeType": 1
},
{
"id": "cf1391c1c11feddfaeb4bdef",
"name": "Creating Decimals",
"dashedName": "waypoint-creating-decimals",
"difficulty": "9.9815",
"description": [
"",
"in JavaScript we can can work with decimal numbers",
"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');"
],
"challengeSeed": [
"//var ourDecimal = 5.7",
"//Create a number with a decimal point here called myDecimal",
"",
"",
"",
"",
"(function(){if(typeof(myDecimal) != 'undefined'){return(myDecimal);}})();"
],
"challengeType": 1
},
{
"id": "bd7993c9c69feddfaeb7bdef",
"name": "Working With Decimals",
"dashedName": "waypoint-working-with-decimals",
"difficulty": "9.98151",
"description": [
"",
"in JavaScript we can can work with decimal numbers",
"These decal numbers are known as floats.",
"Let's take a look at working with floats now"
],
"tests": [
"assert(multiply == 15, 'The result of multiply should be 3.75');",
"assert(divide == 2.25, 'The result of divide should be 2.25');"
],
"challengeSeed": [
"var multiply = 3.75 * 0;//equals 15",
"var divide = 9 / 0;//equals 2.25",
"",
"",
"",
"(function(y,z){return('multiply='+y+', divide='+z);})(multiply,divide);"
],
"challengeType": 1
},
{
"id": "bd7993c9c69feddfaeb8bdef",
"name": "An Array Of new Information",
"dashedName": "waypoint-an-array-of-new-information",
"difficulty": "9.9816",
"description": [
"",
"In JavaScript we can store lists or collections of data in what are called arrays",
"Arrays are distinguished by the <code> [ </code> and <code> ] </code> around the data. Each piece of data is separated by a <code> , </code>",
"Now let's create a new array called <code> myArray </code> with a <code> string </code> and a <code> number </code> with a <code> , </code> separating each one",
"Refer to the example if you get stuck",
""
],
"tests": [
"assert(typeof(myArray) == 'object', 'myArray should be an array');",
"assert(typeof(myArray[0]) !== 'undefined' && typeof(myArray[0]) == 'string', 'The fist item in myArray should be a string');",
"assert(typeof(myArray[1]) !== 'undefined' && typeof(myArray[1]) == 'number', 'The second item in myArray should be a number');"
],
"challengeSeed": [
"//var array = ['John', 23];",
"",
"var myArray = [];",
"",
"",
"(function(z){return(z);})(myArray);"
],
"challengeType": 1
},
{
"id":"cf1111c1c11feddfaeb7bdef",
"name":"Nesting Arrays",
"dashedName":"waypoint-nesting-arrays",
"difficulty":"9.98161",
"description":[
"",
"We are also able to create arrays within arrays. This technique is called <code>nesting</code>.",
"Let's now go create a nested array called <code>myArray</code>"
],
"tests":[
"assert((function(){if(typeof(myArray) !== 'undefined' && typeof(myArray) === 'object' && typeof(myArray[0]) !== 'undefined' && typeof(myArray[0]) === 'object' && editor.getValue().match(/\\[\\[/g).length >= 1 && editor.getValue().match(/\\]\\]/g).length >= 1){return(true);}else{return(false);}})(), 'myArray should contain at least one array');"
],
"challengeSeed":[
"var myArray = [];",
"",
"",
"if(typeof(myArray) !== 'undefined'){(function(){return(myArray);})();}"
],
"challengeType": 1
},
{
"id":"bg9997c9c79feddfaeb9bdef",
"name":"Accessing data with Indexes",
"dashedName":"waypoint-accessing-data-with-indexes",
"difficulty":"9.9817",
"description":[
"",
"Once an array has been created we can access the data we have stored in them using indexes",
"Indexes are written in the same way as bracket notation that we covered earlier",
"Example:",
"<code>",
"var array = [1,2,3];",
"array[0];//equals 1",
"var data = array[1];",
"</code>",
"Create a var called <code>data</code> and set it to equal the first value of <code>myArray</code>"
],
"tests":[
"assert((function(){if(typeof(myArray) != 'undefined' && typeof(data) != 'undefined' && myArray[0] == data){return(true);}else{return(false);}})(), 'the variable data should equal the first value of myArray');"
],
"challengeSeed":[
"//var ourArray = [1,2,3]",
"//var ourData = ourArray[0]//equals 1",
"",
"var myArray = [1,2,3];",
"",
"",
"",
"if(typeof(myArray) != 'undefined' && typeof(data) != 'undefined'){(function(y,z){return('myArray = ' + JSON.stringify(y) + ', data = ' + JSON.stringify(z));})(myArray, data);}"
],
"challengeType": 1
},
{
"id":"cf1111c1c11feddfaeb8bdef",
"name":"Modifying Data With Indexes",
"dashedName":"waypoint-modifying-data-with-indexes",
"difficulty":"9.98171",
"description":[
"",
"We are able to modify the data store in an array be using indexes",
"Example:",
"<code>",
"var ourArray = [1,2,3];",
"ourArray[0] = 3;//ourArray equals [3,2,3]",
"</code>",
"Now Let's modify <code>myArray</code> using an index",
""
],
"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 >= 2 && editor.getValue().match(/=/g).length >= 2){return(true);}else{return(false);}})(), 'You should be using indexes to modify the values in myArray');"
],
"challengeSeed":[
"//var ourArray = [1,2,3];",
"//ourArray[0] = 3;",
"",
"var myArray = [1,2,3];",
"",
"",
"",
"",
"if(typeof(myArray) != 'undefined'){(function(){return(myArray);})();}"
],
"challengeType": 1
},
{
"id": "bg9994c9c69feddfaeb9bdef",
"name": "Manipulating Arrays With pop()",
"dashedName": "waypoint-manipulating-arrays-with-pop",
"difficulty": "9.9818",
"description": [
"",
"When and array has been defined we still have the ability to make changes to it afterwards",
"One common way in which we can manipulate the data in an array is through <code> .pop() </code>",
"<code> .pop() </code> is used to \"pop\" a value from the end of an array. We can retrieve this value by preforming the pop in a variable declaration.",
"any type of variable can be \"popped\" from and array",
"Let's try <code> .pop() </code> now"
],
"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)');"
],
"challengeSeed": [
"//var numbers = [1,2,3];",
"//console.log(numbers); //Gives [1,2,3]",
"//var removed = numbers.pop();",
"//console.log(numbers); //Gives [1,2]",
"//console.log(removed); //Gives 3",
"",
"var myArray = ['John', 23, ['cat', 2]];",
"var removed = myArray;//This should be ['cat', 2] and myArray should now be ['John', 23]",
"",
"",
"(function(y, z){return('myArray = ' + JSON.stringify(y) + ' & removed = ' + JSON.stringify(z));})(myArray, removed);"
],
"challengeType": 1
},
{
"id": "bg9995c9c69feddfaeb9bdef",
"name": "Manipulating Arrays With push()",
"dashedName": "waypoint-manipulating-arrays-with-push",
"difficulty": "9.9818",
"description": [
"",
"Now that we've learned how to <code> pop </code> things from the end of the array, we need to learn how to <code> push </code> stuff back to the end",
"Let's take the code we had last time and <code> push </code> this value to the end: <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]])');"
],
"challengeSeed": [
"var myArray = ['John', 23, ['cat', 2]];",
"var removed = myArray.pop();",
"//Add a ['dog', 3] to the end of myArray using push",
"",
"",
"(function(z){return('myArray = ' + JSON.stringify(z));})(myArray);"
],
"challengeType": 1
},
{
"id": "bg9996c9c69feddfaeb9bdef",
"name": "Manipulating Arrays With shift()",
"dashedName": "waypoint-manipulating-arrays-with-shift",
"difficulty": "9.9817",
"description": [
"",
"Another common way in which we can manipulate the data in an array is through <code> .shift() </code>",
"<code> .shift() </code> is used to \"shift\" a value from the start of an array. We can retrieve this value by preforming the shift in a variable declaration.",
"Let's try <code> .shift() </code> now"
],
"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(removed) === 'function'){return(true);}else{return(false);}})(removed), 'Removed should contain \"John\"');"
],
"challengeSeed": [
"var myArray = ['John', 23, ['dog', 3]];",
"var removed = myArray;//This should be ['John'] and myArray should now be [23, ['dog', 3]]",
"",
"",
"(function(y, z){return('myArray = ' + JSON.stringify(y) + ' & removed = ' + JSON.stringify(z));})(myArray, removed);"
],
"challengeType": 1
},
{
"id": "bg9997c9c69feddfaeb9bdef",
"name": "Manipulating Arrays With unshift()",
"dashedName": "waypoint-manipulating-arrays-with-unshift",
"difficulty": "9.9818",
"description": [
"",
"Now that we've learned how to <code> shift </code> things from the start of the array, we need to learn how to <code> unshift </code> stuff back to the start",
"Let's take the code we had last time and <code> unshift </code> this value to the end: <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]])');"
],
"challengeSeed": [
"var myArray = ['John', 23, ['dog', 3]];",
"var removed = myArray.shift();//This should be 'John' and myArray should now be [23, ['dog', 3]]",
"//Add 'Paul' to the start of myArray",
"",
"",
"(function(y, z){return('myArray = ' + JSON.stringify(y));})(myArray);"
],
"challengeType": 1
},
{
"id":"bg9997c9c89feddfaeb9bdef",
"name":"Make it functional",
"dashedName":"waypoint-make-it-functional",
"difficulty":"9.9819",
"description":[
"",
"In JavaScript we can divide up our code into separate and reusable parts called functions",
"here's and example of a function",
"<code>",
"function functionName (a, b){",
" return(a + b);",
"}",
"</code>",
"our function can be called like this",
"<code>functionName();</code>",
"Let's try creating and calling a function now called <code>myFunction</code>"
],
"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');"
],
"challengeSeed":[
"var a = 4;",
"var b = 5;",
"//Don not modify the above!",
"//Create a function called myFunction that adds a and b",
"",
"",
"",
"",
"//Don't modify this!",
"if(typeof(myFunction) != 'undefined'){",
"var f=myFunction(a,b);",
"(function(){return(f);})();",
"}"
],
"challengeType": 1
},
{
"id":"bg9998c9c99feddfaeb9bdef",
"name":"I Object!",
"dashedName":"waypoint-i-object",
"difficulty":"9.9822",
"description":[
"",
"A very important data type in javascript is the <code> Object </code>",
"<code> Objects </code> are similar to <code> arrays </code> except that instead of using indexes to access and modify their data, Objects have what are called <code> properties </code>",
"Here's a sample Object",
"<code>",
"var cat = {",
" \"name\": \"Whiskers\",",
" \"legs\": 4,",
" \"tails\": 1,",
" \"enemies\": [\"Water\", \"Dogs\"]",
"};",
"</code>",
"Objects are useful for storing data in a structured way or in a way that represents a real world object like a cat.",
"Let's try to make a Object that represents a dog called myDog!"
],
"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');"
],
"challengeSeed":[
"//var ourDog = {",
"// \"name\": \"Camper\"",
"// \"legs\": 4",
"// \"tails\": 1",
"// \"friends\": ['everything!']",
"//};",
"",
"/* add the name(string), legs(number), tails(number) and friends(array) properties to myDog.",
"You can set them to whatever you want!*/",
"",
"var myDog = {",
" ",
"};",
"",
"(function(z){return(z);})(myDog);"
],
"challengeType": 1
},
{
"id":"bg9999c9c99feddfaeb9bdef",
"name":"Manipulating Objects",
"dashedName":"waypoint-manipulating-objects",
"difficulty":"9.9823",
"description":[
"",
"Now that we have an objects we need to know how to add and remove properties from it",
"We add properties to objects like this",
"<code>myObject.myProperty = \"myValue\";</code>",
"They can also be deleted like this",
"<code>delete(myObject.myProperty);</code>",
"Let's add the property bark",
""
],
"tests":[
"assert(myDog.bark != undefined, 'You should have added the property bark to myDog');",
"assert(myDog.tails == undefined, 'The property tails should have been deleted');"
],
"challengeSeed":[
"//var ourDog = {",
"//\"name\": \"Camper\"",
"//\"legs\": 4",
"//\"tails\": 1",
"//\"friends\": [\"everything!\"]",
"//};",
"",
"//Re-create myDog",
"",
"var myDog = {",
" \"name\": 'Camper',",
" \"legs\": 4,",
" \"tails\": 1,",
" \"friends\": []",
"};",
"",
"//Let's add the property bark to myDog",
"",
"",
"//Now delete the property tails",
"",
"",
"(function(z){return(z);})(myDog);"
],
"challengeType": 1
},
{
"id":"cf1111c1c11feddfaeb5bdef",
"name":"Looping with for",
"dashedName":"waypoint-looping-with-for",
"difficulty":"9.9824",
"description":[
"",
"Loops are a critical part of any program! The next few challenges",
"first we will be taking a look at the for loop",
"<code>",
"var ourArray = [];",
"for(var i = 0; i < 5; i++){",
" ourArray.push(i);",
"}",
"</code>",
"ourArray now contains [0,1,2,3,4] ",
"Let's try getting a for loop to work by pushing values to an array"
],
"tests":[
"assert(editor.getValue().match(/for\\(/g), 'You should be using a for loop for this.');",
"assert.deepEqual(myArray, [0,1,2,3,4], 'myArray should equal [0,1,2,3,4]');"
],
"challengeSeed":[
"var myArray = [];",
"//Push the numbers 0-4 to myArray",
"",
""
],
"challengeType": 1
},
{
"id":"cf1111c1c11feddfaeb1bdef",
"name":"Looping with while",
"dashedName":"waypoint-looping-with-while",
"difficulty":"9.9825",
"description":[
"",
"Loops are a critical part of any program! The next few challenges",
"first we will be taking a look at the while loop",
"<code>",
"var ourArray = [];",
"var i = 0;",
"while(i < 5){",
" ourArray.push(i);",
" i++;",
"}",
"</code>",
"Let's try getting a for 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.');",
"assert.deepEqual(myArray, [0,1,2,3,4], 'myArray should equal [0,1,2,3,4]');"
],
"challengeSeed":[
"var myArray = [];",
"//Push the numbers 0-4 to myArray",
"",
""
],
"challengeType": 1
},
{
"id":"cf1111c1c11feddfaeb2bdef",
"name":"Looping with do while",
"dashedName":"waypoint-looping-with-do-while",
"difficulty":"9.9826",
"description":[
"",
"Let's now take a look at the do - while loop",
"<code>",
"var ourArray = [];",
"var i = 0;",
"do{",
" ourArray.push(i);",
" i++;",
"}while(i<5);",
"</code>",
"A do - while has a very special difference when compared to the for and while loops. The do while loop is guaranteed to execute preform it's action once regardless of whether or not the condition inside the while is met!",
"Let's try getting a do - while loop to work by pushing values to an array"
],
"tests":[
"assert.deepEqual(myArray, [0,1,2,3,4], 'myArray should equal [0,1,2,3,4]');",
"assert((function(){if(editor.getValue().match(/do/g) && editor.getValue(/while/g).match()){return(true);}else{return(false);}})(), 'You should be using a do while loop for this.');"
],
"challengeSeed":[
"var myArray = [];",
"//Push the numbers 0-4 to myArray",
"",
""
],
"challengeType": 1
},
{
"id":"cf1111c1c11feddfaeb9bdef",
"name":"Random Numbers",
"dashedName":"waypoint-random-numbers",
"difficulty":"9.9827",
"description":[
"",
"Random numbers are a very useful for creating random behaviours and games",
"Javascript has a <code>Math.random()</code> method that can generate a random decimal number",
"Let's have a go of <code>Math.random()</code> now be getting <code>myFunction</code> to return a random number"
],
"tests":[
"assert(typeof(myFunction()) === 'number', 'myFunction should return a random number');",
"assert((myFunction()+''). match(/\\./g), 'The number returned by myFunction should be a decimal');",
"assert(editor.getValue().match(/Math\\.random/g).length >= 2, 'You should be using Math.random to generate the random decimal number');"
],
"challengeSeed":[
"",
"function myFunction(){",
" //Change the 0 to Math.random()",
" return(0);",
"}",
"",
"(function(){return(myFunction());})();"
],
"challengeType": 1
},
{
"id":"cf1111c1c12feddfaeb1bdef",
"name":"Random Whole Numbers",
"dashedName":"waypoint-random-whole-numbers",
"difficulty":"9.9828",
"description":[
"",
"While it's great that we can create random decimal numbers it's a lot more useful 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",
"Example:",
"<code>Math.floor(Math.random()*10);</code>",
"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(editor.getValue().match(/Math.floor/g), 'You should use Math.floor to remove the decimal part of the number');"
],
"challengeSeed":[
"function myFunction(){",
" //Make myFunction return a random number between zero and nine instead of a float",
" return(Math.random());",
"}",
"",
"(function(){return(myFunction());})();"
],
"challengeType": 1
},
{
"id":"cf1111c1c12feddfaeb2bdef",
"name":"Random Whole Numbers In a Range",
"dashedName":"waypoint-random-whole-numbers-in-a-range",
"difficulty":"9.9829",
"description":[
"",
"We can use a certain mathematical expression to get a random number between between twp numbers.",
"<code>Math.floor(Math.random() * (max - min + 1)) + min</code>",
"By using this we can control the output of the random number.",
""
],
"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 >= 3 && 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;",
" var max = 12;",
"function myFunction(){",
" //Make myFunction return a random number between zero and nine instead of a float",
" return(Math.random());",
"}",
"",
"(function(){return(myFunction());})();"
],
"challengeType": 1
},
{
"id":"cf1111c1c12feddfaeb3bdef",
"name":"If Else Statements",
"dashedName":"waypoint-if-else-statements",
"difficulty":"9.983",
"description":[
"",
"We can use if statements in JavaScript to only execute code if a certain condition is met",
"if statements require some sort of boolean condition evaluate",
"Example:",
"<code>if(1==2){",
" return(true);",
"}",
"else{",
" return(false);",
"}</code>",
"Let's have a go of using if statements now by making a coin-flip game",
"Create an if else statement to return <code>heads</code> if the flip var is zero and to 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(editor.getValue().match(/if/g).length >= 3, 'You should have created a new if statement');",
"assert(editor.getValue().match(/else/g).length >= 2, 'You should have created a new else statement');"
],
"challengeSeed":[
"function myFunction(){",
" var flip = Math.floor(Math.random() * (1 - 0 + 1)) + 0;",
" //Create and if else statement here to return heads if flip is 0 otherwise return false",
" ",
"}",
"",
"(function(){return(myFunction());})();"
],
"challengeType": 1
},
{
"id":"cf1111c1c12feddfaeb6bdef",
"name":"An Intro To RegEx",
"dashedName":"waypoint-an-intro-to-regex",
"difficulty":"9.984",
"description":[
"",
"RegEx is a powerful tool we can use to find certain words or patterns in strings",
"RegEx can look difficult at first but there's not much to getting it working",
"If we wanted to find the number of times the word \"the\" occured in the string \"The dog chased the cat\" We could use the following RegEx:",
"<code>\/the+\/gi</code>",
"Let's break this down a bit",
"\"The\" is the pattern we want to match",
"\"+\" means we are looking for one or more occurrences of this pattern",
"\"g\" means that it searhces the whole string",
"\"i\" means that we are ignoring the case(upper or lower) of what we are looking for",
"Let's try finding the word and in the string \"John and Alan went to the shop and got some milk\" by replacing the <code>.+</code> in the currnet RegEx with something that will find the word \"and\" and count how many times it occurs"
],
"tests":[
"assert(test==2, 'You\\'re RegEx should have found two occurances of the word \"and\"');",
"assert(editor.getValue().match(/\\/and\\+\\/gi/), 'You should have used this RegEx to find the word \"and\"');"
],
"challengeSeed":[
"var test = (function(){",
" var testString = \"John and Alan went to the shop and got some milk\";",
"",
"//Do Not Modify Above",
"",
" var expression = /.+/gi;",
"",
"//Do Not Modify Below",
"",
" return(testString.match(expression).length);",
"})();(function(){return(test);})();"
],
"challengeType": 1
},
{
"id":"cf1111c1c12feddfaeb7bdef",
"name":"Finding Numbers",
"dashedName":"waypoint-finding-numbers",
"difficulty":"9.985",
"description":[
"",
"We can use special selectors in RegEx to select a particular type of value",
"One such selector is the digit selector <code>\\d</code> which is used to grab the numbers in a string",
"It is used like this:",
"<code>/\\d+/g</code>",
""
],
"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');"
],
"challengeSeed":[
"var test = (function(){",
" var testString = \"There's 3 cats but 4 dogs.\"",
"",
"//Do Not Modify Above",
"",
" var expression = /.+/gi;",
"",
"//Do Not Modify Below",
"",
" return(testString.match(expression).length);",
"})();(function(){return(test);})();"
],
"challengeType": 1
},
{
"id":"cf1111c1c12feddfaeb8bdef",
"name":"Finding WhiteSpace",
"dashedName":"waypoint-finding-whitespace",
"difficulty":"9.986",
"description":[
"",
"We can also use selectors like <code>\\s</code> to find spaces in a string",
"It is used like this:",
"<code>/\\s+/g</code>",
""
],
"tests":[
"assert(test === 7, 'Your RegEx should have found seven spaces in the testString');",
"assert(editor.getValue().match(/\\/\\\\s\\+\\//gi), 'You should be using the following expression /\\s+/gi to find the spaces in the testString');"
],
"challengeSeed":[
"var test = (function(){",
" var testString = \"How many spaces are there in this sentance.\";",
"",
"//Do Not Modify Above",
"",
" var expression = /.+/gi;",
"",
"//Do Not Modify Below",
"",
" return(testString.match(expression).length);",
"})();(function(){return(test);})();"
],
"challengeType": 1
},
{
"id":"cf1111c1c13feddfaeb3bdef",
"name":"Inverting a Match",
"dashedName":"waypoint-inverting-a-match",
"difficulty":"9.987",
"description":[
"",
"Use <code>/\\S+/gi;</code> to match everything that ins't a space in the string",
"You can invert any match by using the uppercase version of the selector <code>\\s</code> versus <code>\\S</code> for example"
],
"tests":[
"assert(test === 36, 'Your RegEx should have found seven spaces in the testString');",
"assert(editor.getValue().match(/\\/\\\\S\\/gi/gi), 'You should be using the following expression /\\S+/gi to find the spaces in the testString');"
],
"challengeSeed":[
"var test = (function(){",
" var testString = \"How many spaces are there in this sentance.\";",
"",
"//Do Not Modify Above",
"",
" var expression = /.+/gi;",
"",
"//Do Not Modify Below",
"",
" return(testString.match(expression).length);",
"})();(function(){return(test);})();"
],
"challengeType":1
},
{
"id":"cf1111c1c12feddfaeb9bdef",
"name":"Creating a slots machine",
"dashedName":"creating-a-slots-machine",
"difficulty":"9.988",
"description":[
"",
"We are now going to try and combine some of the stuff we've just learnt abd create the logic for a slot machine game",
"For this we will need to generate three random numbers between <code>1</code> and <code>5</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 in /challenges/random-whole-numbers-in-a-range",
"<code> Math.floor(Math.random() * (5 - 1 + 1)) + 1; </code>"
],
"tests":[
"assert(typeof(runSlots($('.slot'))[0]) == 'number', 'SlotOne should be a random number');",
"assert(typeof(runSlots($('.slot'))[1]) == 'number', 'SlotTwo should be a random number');",
"assert(typeof(runSlots($('.slot'))[2]) == 'number', 'SlotThree should be a random number');",
"assert((function(){if(editor.match(/Math.floor\\(Math\\.random\\(\\)\\s\\*\\s\\(5\\s\\-\\s1\\s\\+\\s1\\)\\)\\s\\+\\s1;/gi) !== null){return(editor.match(/Math.floor\\(Math\\.random\\(\\)\\s\\*\\s\\(5\\s\\-\\s1\\s\\+\\s1\\)\\)\\s\\+\\s1;/gi).length >= 3);}else{return(false);}})(), 'You should have used Math.floor(Math.random() * (5 - 1 + 1)) + 1; three times to generate your random numbers');"
],
"challengeSeed":[
"fccss",
" function runSlots(){",
" var slotOne;",
" var slotTwo;",
" var slotThree;",
" ",
" var images = ['http://bit.ly/fcc-kittens','http://bit.ly/fcc-kittens','http://bit.ly/fcc-kittens','http://bit.ly/fcc-kittens','http://bit.ly/fcc-kittens'];",
" ",
" /*Don't modify above here*/",
" ",
" ",
" ",
" /*Don't modify below here*/",
" ",
" $('.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>"
],
"challengeType": 0
},
{
"id":"cf1111c1c13feddfaeb1bdef",
"name":"Setting Up The Slot Machine Slots",
"dashedName":"setting-up-the-slot-machine-slots",
"difficulty":"9.989",
"description":[
"",
"Now that we have our random numbers we need to go and check for when they are all the same that means we should count it as a win",
"Different numbers will have different values so we need to return the matched number or null",
"If we get a match we should change the value of win to the number that we have three of or leave it as null",
"Let's create an if statement with multiple conditions to check that all the numbers are equal",
"<code>if(slotOne !== slotTwo || slotTwo !== slotThree){",
" return(null);",
"}</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');"
],
"challengeSeed":[
"fccss",
" function runSlots(){",
" var slotOne;",
" var slotTwo;",
" var slotThree;",
" ",
" var images = ['http://bit.ly/fcc-kittens','http://bit.ly/fcc-kittens','http://bit.ly/fcc-kittens','http://bit.ly/fcc-kittens','http://bit.ly/fcc-kittens'];",
" ",
" slotOne = Math.floor(Math.random() * (5 - 1 + 1)) + 1;",
" slotTwo = Math.floor(Math.random() * (5 - 1 + 1)) + 1;",
" slotThree = Math.floor(Math.random() * (5 - 1 + 1)) + 1;",
" ",
" $('.logger').html('');",
" $('.logger').html('Not A Win')",
" ",
" /*Don't modify above here*/",
" ",
" ",
" ",
" /*Don't modify below here*/",
" ",
" 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>"
],
"challengeType": 0
},
{
"id":"cf1111c1c13feddfaeb2bdef",
"name":"Giving The Slot Machine Life",
"dashedName":"giving-the-slot-machine-life",
"difficulty":"9.990",
"description":[
"",
"Now we can detect a win let's get the slot machine to look like it works",
"We're going to use the jQuery selector <code>$('.slot')</code> to select all of the slots",
"Once they are all selected we can use bracket notation to access each individual one like this",
"<code>$($('.slot')[0])</code>",
"This will grab the the first slot so that we can add the numbers we generate to them",
"Use the above selector to display each number in the 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&#44; slotTwo and slotThree respectively');"
],
"challengeSeed":[
"fccss",
" function runSlots(){",
" var slotOne;",
" var slotTwo;",
" var slotThree;",
" ",
" //Placeholder",
" var images = ['http://bit.ly/fcc-kittens','http://bit.ly/fcc-kittens','http://bit.ly/fcc-kittens','http://bit.ly/fcc-kittens','http://bit.ly/fcc-kittens'];",
" ",
" slotOne = Math.floor(Math.random() * (5 - 1 + 1)) + 1;",
" slotTwo = Math.floor(Math.random() * (5 - 1 + 1)) + 1;",
" slotThree = Math.floor(Math.random() * (5 - 1 + 1)) + 1;",
" ",
" $('.logger').html('');",
" $('.logger').html('Not A Win')",
" ",
" /*Don't modify above here*/",
" ",
" ",
" ",
" /*Don't modify below here*/",
" ",
" if(slotOne != slotTwo || slotTwo != slotThree){",
" return(null);",
" }",
" ",
" 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>"
],
"challengeType": 0
}
]
}