{ "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:", "// This is a comment.", "The slash-star-star-slash comment will comment out everything between the /* and the */ characters:", "/* This is also a comment */", "Try creating one of each." ], "tests": [ "assert(editor.getValue().match(/(\\/\\/)...../g), 'message: Create a // style comment that contains at least five letters.');", "assert(editor.getValue().match(/(\\/\\*)[\\w\\W]{5,}(?=\\*\\/)/gm), 'message: Create a /* */ style comment that contains at least five letters.');", "assert(editor.getValue().match(/(\\*\\/)/g), 'message: Make sure that you close the comment with a */.');" ], "challengeSeed": [], "type": "waypoint", "challengeType": 1 }, { "id": "bd7123c9c441eddfaeb5bdef", "title": "Understand Boolean Values", "description": [ "In computer science, data structures are things that hold data. JavaScript has seven of these. For example, the Number data structure holds numbers.", "Let's learn about the most basic data structure of all: the Boolean. Booleans can only hold the value of either true or false. They are basically little on-off switches.", "Let's modify our welcomeToBooleans function so that it will return true instead of false when the run button is clicked." ], "tests": [ "assert(typeof(welcomeToBooleans()) === 'boolean', 'message: The welcomeToBooleans() function should return a boolean (true/false) value.');", "assert(welcomeToBooleans() === true, 'message: welcomeToBooleans() 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 data structure, we call it a variable. 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 myName, we didn't use a space, and that the \"N\" is capitalized. JavaScript variables are written in camel case. An example of camel case is: camelCase.", "Now, use the var keyword to create a variable called myName. Set its value to your name, in double quotes.", "Look at the ourName example if you get stuck." ], "tests": [ "assert((function(){if(typeof(myName) !== \"undefined\" && typeof(myName) === \"string\" && myName.length > 0){return true;}else{return false;}})(), 'message: myName 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 var myName = \"your name\". This is what we call a String 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: myFirstName and myLastName 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: myFirstName 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: myLastName 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": [ "Data structures have properties. For example, strings have a property called .length that will tell you how many characters are in the string.", "For example, if we created a variable var firstName = \"Charles\", we could find out how long the string \"Charles\" is by using the firstName.length property.", "Use the .length property to count the number of characters in the lastName variable." ], "tests": [ "assert((function(){if(typeof(lastNameLength) !== \"undefined\" && typeof(lastNameLength) === \"number\" && lastNameLength === 8){return true;}else{return false;}})(), 'message: lastNameLength should be equal to eight.');", "assert((function(){if(editor.getValue().match(/\\.length/gi) && editor.getValue().match(/\\.length/gi).length >= 2 && editor.getValue().match(/var lastNameLength \\= 0;/gi) && editor.getValue().match(/var lastNameLength \\= 0;/gi).length >= 1){return true;}else{return false;}})(), 'message: You should be getting the length of lastName by using .length like this: lastName.length.');" ], "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": [ "Bracket notation is a way to get a character at a specific index 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 var firstName = \"Charles\", you can get the value of the first letter of the string by using firstName[0].", "Use bracket notation to find the first character in the lastName variable and assign it to firstLetterOfLastName.", "Try looking at the firstLetterOfFirstName 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 firstLetterOfLastName variable should have the value of L.');" ], "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 bracket notation 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 thirdLetterOfLastName to equal the third letter of the lastName variable.", "Try looking at the secondLetterOfFirstName variable declaration if you get stuck." ], "tests": [ "assert(thirdLetterOfLastName === 'v', 'message: The thirdLetterOfLastName variable should have the value of v.');" ], "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 var firstName = \"Charles\", you can get the value of the last letter of the string by using firstName[firstName.length - 1].", "Use bracket notation to find the last character in the lastName variable.", "Try looking at the lastLetterOfFirstName variable declaration if you get stuck." ], "tests": [ "assert(lastLetterOfLastName === \"e\", 'message: lastLetterOfLastName should be \"e\".');", "assert(editor.getValue().match(/\\.length/g).length === 2, 'message: You have to use .length 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 var firstName = \"Charles\" string by using firstName[firstName.length - 3]", "Use bracket notation to find the second-to-last character in the lastName string.", "Try looking at the thirdToLastLetterOfFirstName variable declaration if you get stuck." ], "tests": [ "assert(secondToLastLetterOfLastName === 'c', 'message: secondToLastLetterOfLastName should be \"c\".');", "assert(editor.getValue().match(/\\.length/g).length === 2, 'message: You have to use .length 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 + symbol for addition.", "Change the 0 so that sum will equal 20." ], "tests": [ "assert((function(){if(sum === 20 && editor.getValue().match(/\\+/g).length >= 2){return true;}else{return false;}})(), 'message: Make the variable sum 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 - symbol for subtraction.", "Change the 0 so that difference will equal 12." ], "tests": [ "assert((function(){if(difference === 12 && editor.getValue().match(/\\-/g)){return true;}else{return false;}})(), 'message: Make the variable difference 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 * symbol for multiplication.", "Change the 0 so that product will equal 80." ], "tests": [ "assert((function(){if(product === 80 && editor.getValue().match(/\\*/g)){return true;}else{return false;}})(), 'message: Make the variable product 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 / symbol for division.", "Change the 0 so that quotient will equal 2." ], "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 quotient 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 myDecimal 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: myDecimal 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 0.0 so that product will equal 5.0." ], "tests": [ "assert((function(){if(product === 5.0 && editor.getValue().match(/\\*/g)){return true;}else{return false;}})(), 'message: Make the variable product 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 0.0 so that your quotient will equal 2.2." ], "tests": [ "assert((function(){if(quotient === 2.2 && editor.getValue().match(/\\//g)){return true;}else{return false;}})(), 'message: Make the variable quotient equal 2.2.');" ], "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 array 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: var sandwich = [\"peanut butter\", \"jelly\", \"bread\"].", "Now let's create a new array called myArray that contains both a string and a number (in that order).", "Refer to the commented code in the text editor if you get stuck." ], "tests": [ "assert(typeof(myArray) == 'object', 'message: myArray should be an array.');", "assert(typeof(myArray[0]) !== 'undefined' && typeof(myArray[0]) == 'string', 'message: The first item in myArray should be a string.');", "assert(typeof(myArray[1]) !== 'undefined' && typeof(myArray[1]) == 'number', 'message: The second item in myArray should be a number.');" ], "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: [[\"Bulls\", 23]].", "Let's now go create a nested array called myArray." ], "tests": [ "assert(Array.isArray(myArray) && myArray.some(Array.isArray), 'message: myArray 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 indexes.", "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:", "var array = [1,2,3];", "array[0]; //equals 1", "var data = array[1];", "Create a variable called myData and set it to equal the first value of myArray." ], "tests": [ "assert((function(){if(typeof(myArray) != 'undefined' && typeof(myData) != 'undefined' && myArray[0] == myData){return true;}else{return false;}})(), 'message: The variable myData should equal the first value of myArray.');" ], "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:", "var ourArray = [3,2,1];", "ourArray[0] = 1; // equals [1,2,1]", "Now modify the data stored at index 0 of myArray 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: myArray 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 myArray.');" ], "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 .pop() function.", ".pop() is used to \"pop\" a value off of the end of an array. We can store this \"popped off\" variable by performing pop() within a variable declaration.", "Any type of data structure can be \"popped\" off of an array - numbers, strings, even nested arrays.", "Use the .pop() function to remove the last item from myArray, assigning the \"popped off\" value to removedFromMyArray." ], "tests": [ "assert((function(d){if(d[0] == 'John' && d[1] == 23 && d[2] == undefined){return true;}else{return false;}})(myArray), 'message: myArray should only contain [\"John\", 23].');", "assert((function(d){if(d[0] == 'cat' && d[1] == 2 && d[2] == undefined){return true;}else{return false;}})(removedFromMyArray), 'message: removedFromMyArray should only contain [\"cat\", 2].');" ], "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 pop() data off of the end of an array, you can also push() data onto the end of an array.", "Push [\"dog\", 3] onto the end of the myArray 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: myArray should now equal [\"John\", 23, [\"dog\", 3]].');" ], "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": [ "pop() always removes the last element of an array. What if you want to remove the first?", "That's where .shift() comes in. It works just like .pop(), except it removes the first element instead of the last.", "Use the .shift() function to remove the first item from myArray, assigning the \"shifted off\" value to removedFromMyArray." ], "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: myArray should now equal [23, [\"dog\", 3]].');", "assert((function(d){if(d === 'John' && typeof(removedFromMyArray) === 'string'){return true;}else{return false;}})(removedFromMyArray), 'message: removedFromMyArray should contain \"John\".');" ], "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 shift elements off of the beginning of an array, you can also unshift elements onto the beginning of an array.", "unshift() works exactly like push(), but instead of adding the element at the end of the array, unshift() adds the element at the beginning of the array.", "Add \"Paul\" onto the beginning of the myArray variable using unshift()." ], "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: myArray 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:", "function functionName(a, b) {", "  return a + b;", "}", "After writing the above lines in our code, we can then pass values to our function and the result following the return statement will be returned.", "For example, we can pass numbers 4 and 2 by “calling” the function later in our code like this: functionName(4, 2).", "In this example, the function will return the number 6 as this is the result of 4 + 2.", "Create and call a function called myFunction that returns the sum of a and b." ], "tests": [ "assert((function(){if(typeof(f) !== \"undefined\" && f === a + b){return true;}else{return false;}})(), 'message: Your function should return the value of a + b.');" ], "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 object before.", "Objects are similar to arrays, except that instead of using indexes to access and modify their data, you access the data in objects through what are called properties.", "Here's a sample object:", "var cat = {", "  \"name\": \"Whiskers\",", "  \"legs\": 4,", "  \"tails\": 1,", "  \"enemies\": [\"Water\", \"Dogs\"]", "};", "", "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 myDog which contains the properties \"name\" (a string), \"legs\", \"tails\" and \"friends\".", "You can set these object properties to whatever values you want, as long \"name\" is a string, \"legs\" and \"tails\" are numbers, and \"friends\" 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: 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), 'message: 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), 'message: 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), 'message: myDog should contain the property friends and it should be an array.');" ], "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 ourDog:", "var ourDog = {", "  \"name\": \"Camper\",", "  \"legs\": 4,", "  \"tails\": 1,,", "  \"friends\": [\"everything!\"]", "};", "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:", "ourDog.name = \"Happy Camper\";", "Now when we run return ourDog.name, instead of getting \"Camper\", we'll get his new name, \"Happy Camper\".", "Let's update the myDog object's name property. Let's change her name from \"Coder\" to \"Happy Coder\"." ], "tests": [ "assert(/happy coder/gi.test(myDog.name), 'message: Update myDog's \"name\" 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 \"bark\" property to ourDog:", "ourDog.bark = \"bow-wow\";", "Now when we run return ourDog.bark, we'll get his bark, \"bow-wow\".", "Let's add a \"bark\" property to myDog and set it to a dog sound, such as \"woof\"." ], "tests": [ "assert(myDog.bark !== undefined, 'message: Add the property \"bark\" to myDog.');" ], "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:", "delete ourDog.bark;", "Let's delete the \"tails\" property from myDog." ], "tests": [ "assert(myDog.tails === undefined, 'message: Delete the property \"tails\" from myDog.');" ], "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:", "for ([initialization]; [condition]; [final-expression])", "The initialization statement is executed one time only before the loop starts. It is typically used to define and setup your loop variable.", "The condition statement is evaluated at the beginning of every loop iteration and will continue as long as it evalutes to true. When condition is false at the start of the iteration, the loop will stop executing. This means if condition starts as false, your loop will never execute.", "The final-expression is executed at the end of each loop iteration, prior to the next condition check and is usually used to increment or decrement your loop counter.", "In the following example we initialize with i = 0 and iterate while our condition i < 5 is true. We'll increment i by 1 in each loop iteration with i++ as our final-expression.", "var ourArray = [];", "for (var i = 0; i < 5; i++) {", "  ourArray.push(i);", "}", "ourArray will now contain [0,1,2,3,4].", "Let's use a for loop to work to push the values 1 through 5 onto myArray." ], "tests": [ "assert(editor.getValue().match(/for\\s*\\(/g).length > 1, 'message: You should be using a for loop for this.');", "assert.deepEqual(myArray, [1,2,3,4,5], 'message: myArray should equal [1,2,3,4,5].');" ], "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 final-expression, we can count by even numbers.", "We'll start at i = 0 and loop while i < 10. We'll increment i by 2 each loop with i += 2.", "var ourArray = [];", "for (var i = 0; i < 10; i += 2) {", "  ourArray.push(i);", "}", "ourArray will now contain [0,2,4,6,8].", "Let's change our initialization and final-expression so we can count by odd numbers.", "Push the odd numbers from 1 through 9 to myArray using a for loop." ], "tests":[ "assert(editor.getValue().match(/for\\s*\\(/g).length > 1, 'message: You should be using a for loop for this.');", "assert.deepEqual(myArray, [1,3,5,7,9], 'message: myArray should equal [1,3,5,7,9].');" ], "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 initialization, condition, and final-expression.", "We'll start at i = 10 and loop while i > 0. We'll decrement i by 2 each loop with i -= 2.", "var ourArray = [];", "for (var i = 10; i > 0; i -= 2) {", "  ourArray.push(i);", "}", "ourArray will now contain [10,8,6,4,2].", "Let's change our initialization and final-expression so we can count backward by twos for numbers.", "Push the odd numbers from 9 through 1 to myArray using a for loop." ], "tests":[ "assert(editor.getValue().match(/for\\s*\\(/g).length > 1, 'message: You should be using a for loop for this.');", "assert.deepEqual(myArray, [9,7,5,3,1], 'message: myArray should equal [9,7,5,3,1].');" ], "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.", "var ourArray = [];", "var i = 0;", "while(i < 5) {", "  ourArray.push(i);", "  i++;", "}", "Let's try getting a while loop to work by pushing values to an array.", "Push the numbers 0 through 4 to myArray using a while loop." ], "tests": [ "assert(editor.getValue().match(/while/g), 'message: You should be using a while loop for this.');", "assert.deepEqual(myArray, [0,1,2,3,4], 'message: myArray should equal [0,1,2,3,4].');" ], "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 Math.random() function that generates a random decimal number.", "Change myFunction to return a random number instead of returning 0.", "Note that you can return a function, just like you would return a variable or value." ], "tests": [ "assert(typeof(myFunction()) === \"number\", 'message: myFunction should return a random number.');", "assert((myFunction()+''). match(/\\./g), 'message: The number returned by myFunction should be a decimal.');", "assert(editor.getValue().match(/Math\\.random/g).length >= 0, 'message: You should be using Math.random 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 Math.random() to generate a random decimal.", "Then let's multiply this random decimal by 20.", "Finally, let's use another function, Math.floor() 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:", "Math.floor(Math.random() * 20);", "See how Math.floor takes (Math.random() * 20) 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 myFunction should be a whole number.');", "assert(editor.getValue().match(/Math.random/g).length > 1, 'message: You should be using Math.random 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 Math.random 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 Math.floor 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 min and a maximum number max.", "Here's the formula we'll use. Take a moment to read it and try to understand what this code is doing:", "Math.floor(Math.random() * (max - min + 1)) + min", "Define two variables: myMin and myMax, and set them both equal to numbers.", "Then create a function called myFunction that returns a random number that's greater than or equal to myMin, and is less than or equal to myMax." ], "tests": [ "assert(myFunction() >= myMin, 'message: The random number generated by myFunction should be greater than or equal to your minimum number, myMin.');", "assert(myFunction() <= myMax, 'message: The random number generated by myFunction should be less than or equal to your maximum number, myMax.');", "assert(myFunction() % 1 === 0 , 'message: The random number generated by myFunction 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: myFunction() should use use both myMax and myMin, 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 if statements in JavaScript to only execute code if a certain condition is met.", "if statements require some sort of boolean condition to evaluate.", "For example:", "if (1 === 2) {", "  return true;", "} else {", "  return false;", "}", "Let's use if and else statements to make a coin-flip game.", "Create if and else statements to return the string \"heads\" if the flip variable is zero, or else return the string \"tails\" 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: myFunction should either return heads or tails.');", "assert((function(){var result = myFunction();if(result === 'heads' && flip === 0 || result === 'tails' && flip !== 0){return true;} else {return false;}})(), 'message: myFunction should return heads when flip equals 0 and tails 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": [ "Regular expressions are used to find certain words or patterns inside of strings.", "For example, if we wanted to find the word the in the string The dog chased the cat, we could use the following regular expression: /the/gi", "Let's break this down a bit:", "the is the pattern we want to match.", "g means that we want to search the entire string for this pattern instead of just the first match.", "i means that we want to ignore the case (uppercase or lowercase) when searching for the pattern.", "Regular expressions are written by surrounding the pattern with / symbols.", "Let's try selecting all the occurrences of the word and in the string Ada Lovelace and Charles Babbage designed the first computer and the software that would have run on it.", "We can do this by replacing the . part of our regular expression with the word and." ], "tests": [ "assert(test==2, 'message: Your regular expression should find two occurrences of the word and.');", "assert(editor.getValue().match(/\\/and\\/gi/), 'message: Use regular expressions to find the word and in testString.');" ], "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 Regular Expressions to select a particular type of value.", "One such selector is the digit selector \\d which is used to retrieve the numbers in a string.", "It is used like this: /\\d/g.", "For numbers this is often written as /\\d+/g, where the + following the digit selector allows this regular expression to match multi-digit numbers.", "Use the \\d 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 /\\d+/g regular expression to find the numbers in testString.');", "assert(test === 2, 'message: Your regular expression should find two numbers in testString.');" ], "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 \\s to find whitespace in a string.", "The whitespace characters are \" \" (space), \\r (the carriage return), \\n (newline), \\t (tab), and \\f (the form feed).", "The whitespace regular expression looks like this:", "/\\s+/g", "Use it to select all the whitespace characters in the sentence string." ], "tests": [ "assert(editor.getValue().match(/\\/\\\\s\\+\\//g), 'message: Use the /\\s+/g regular expression to find the spaces in testString.');", "assert(test === 7, 'message: Your regular expression should find seven spaces in testString.');" ], "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, \\s will match any whitespace, and \\S will match anything that isn't whitespace.", "Use /\\S/g to count the number of non-whitespace characters in testString." ], "tests": [ "assert(editor.getValue().match(/\\/\\\\S\\/g/g), 'message: Use the /\\S/g regular expression to find non-space characters in testString.');", "assert(test === 49, 'message: Your regular expression should find forty nine non-space characters in the testString.');" ], "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 1 and 3 to represent the possible values of each individual slot.", "Store the three random numbers in slotOne, slotTwo and slotThree.", "Generate the random numbers by using the system we used earlier (an explanation of the formula can be found here):", "Math.floor(Math.random() * (3 - 1 + 1)) + 1;" ], "tests": [ "assert(typeof(runSlots($(\".slot\"))[0]) === \"number\" && runSlots($(\".slot\"))[0] > 0 && runSlots($(\".slot\"))[0] < 4, 'slotOne should be a random number.')", "assert(typeof(runSlots($(\".slot\"))[1]) === \"number\" && runSlots($(\".slot\"))[1] > 0 && runSlots($(\".slot\"))[1] < 4, 'slotTwo should be a random number.')", "assert(typeof(runSlots($(\".slot\"))[2]) === \"number\" && runSlots($(\".slot\"))[2] > 0 && runSlots($(\".slot\"))[2] < 4, 'slotThree should be a random number.')", "assert((function(){if(editor.match(/Math\\.floor\\(\\s?Math\\.random\\(\\)\\s?\\*\\s?\\(\\s?3\\s?\\-\\s?1\\s?\\+\\s?1\\s?\\)\\s?\\)\\s?\\+\\s?1/gi) !== null){return editor.match(/slot.*?=.*?\\(.*?\\).*?/gi).length >= 3;}else{return false;}})(), 'You should have used Math.floor(Math.random() * (3 - 1 + 1)) + 1; three times to generate your random numbers.')" ], "challengeSeed": [ "fccss", " 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", " ", "
", "
", "
", " \"learn", "

FCC Slot Machine

", "
", "
", "
", " ", "
", "
", " ", "
", "
", " ", "
", "
", "
", "
", " ", "
", "
", "
", " ", "
", "
", "
", "", "" ], "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 null, 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 null.", "Let's create an if statement with multiple conditions in order to check whether all numbers are equal.", "if (slotOne !== slotTwo || slotTwo !== slotThree) {", "  return null;", "}" ], "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 null.')" ], "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", " ", "
", "
", "
", " \"learn", "

FCC Slot Machine

", "
", "
", "
", " ", "
", "
", " ", "
", "
", " ", "
", "
", "
", "
", " ", "
", "
", "
", " ", "
", "
", "
", "", "" ], "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 selector $(\".slot\") to select all of the slots.", "Once they are all selected, we can use bracket notation to access each individual slot:", "$($(\".slot\")[0]).html(slotOne);", "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 slotOne, slotTwo and slotThree 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", " ", "
", "
", "
", " \"learn", "

FCC Slot Machine

", "
", "
", "
", " ", "
", "
", " ", "
", "
", " ", "
", "
", "
", "
", " ", "
", "
", "
", " ", "
", "
", "
", "", "" ], "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 images. 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:", "$($('.slot')[0]).html('<img src = \"' + images[slotOne-1] + '\">');", "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*?\\'\\\\'\\s*?\\);/gi) && editor.match(/\\$\\s*?\\(\\s*?\\$\\s*?\\(\\s*?(?:'|\")\\s*?\\.slot\\s*?(?:'|\")\\s*?\\)\\[\\d\\]\\s*?\\)\\.html\\(\\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 $('.slot')[0] at least once.')", "assert(editor.match(/\\$\\s*?\\(\\s*?\\$\\s*?\\(\\s*?(?:'|\")\\s*?\\.slot\\s*?(?:'|\")\\s*?\\)\\[1\\]\\s*?\\)/gi), 'You should have used $('.slot')[1] at least once.')", "assert(editor.match(/\\$\\s*?\\(\\s*?\\$\\s*?\\(\\s*?(?:'|\")\\s*?\\.slot\\s*?(?:'|\")\\s*?\\)\\[2\\]\\s*?\\)/gi), 'You should have used $('.slot')[2] at least once.')", "assert(editor.match(/slotOne/gi) && editor.match(/slotOne/gi).length >= 7, 'You should have used the slotOne value at least once.')", "assert(editor.match(/slotTwo/gi) && editor.match(/slotTwo/gi).length >= 8, 'You should have used the slotTwo value at least once.')", "assert(editor.match(/slotThree/gi) && editor.match(/slotThree/gi).length >= 7, 'You should have used the slotThree 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", " ", "
", "
", "
", " ", "

FCC Slot Machine

", "
", "
", "
", " ", "
", "
", " ", "
", "
", " ", "
", "
", "
", "
", " ", "
", "
", "
", " ", "
", "
", "
", "", "" ], "type": "waypoint", "challengeType": 0 } ] }