finish jquery and start modifying javascript
This commit is contained in:
Quincy Larson
parent
7c5d5cc51a
commit
edf9959fc9
@ -7,19 +7,19 @@
|
||||
"title": "Comment your JavaScript Code",
|
||||
"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",
|
||||
"Comment are lines of code that the computer intentionally ignores. Comments are a great way leave notes to yourself and other people who will later need to maintain your code and figure out what it does.",
|
||||
"Employers will expect you to be able to writing readable code, and comments are a great way to improve readability.",
|
||||
"Let's take a look at the two ways in which we can write a comment in JavaScript.",
|
||||
"The double-slash comment will comment out all the text on the line that follows:",
|
||||
"<code>//This is a comment. </code>",
|
||||
"The slash-star-star-slash comment will comment out everything the <code>/*</code>and <code>*/</code> characters:",
|
||||
"<code>/*This is also a comment*/ </code>",
|
||||
"These comment out everything in between <code>/*</code>and <code>*/</code>",
|
||||
"Try creating one of each now."
|
||||
"Try creating one of each."
|
||||
],
|
||||
"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');"
|
||||
"assert(editor.getValue().match(/(\\/\\*)...../g), 'Create a <code>\/\\* \\*\/</code> style comment that contains at least five letters.');",
|
||||
"assert(editor.getValue().match(/(\\*\\/)/g), 'Make sure that you close the comment with a <code>\\*\/</code>');",
|
||||
"assert(editor.getValue().match(/(\\/\\/)...../g), 'Create a <code>\\/\\/</code> style comment that contains at least five letters');"
|
||||
],
|
||||
"challengeSeed":[
|
||||
],
|
||||
@ -31,20 +31,22 @@
|
||||
"title": "Understand Boolean Values",
|
||||
"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"
|
||||
"In computer science, \"data structures\" are variables that hold data. JavaScript has seven of these. For example, the <code>Number</code> data structure holds numbers.",
|
||||
"Let's learn about the most basic data structure of all: the <code>Boolean</code>. Booleans can only hold the value of either true or false. They are basically little on-off switches.",
|
||||
"Let's modify our <code>welcomeToBooleans</code>function so that it will return <code>true</code>instead of <code>false</code>when the run button is clicked."
|
||||
],
|
||||
"tests": [
|
||||
"assert(typeof(welcomeToBooleans())==\"boolean\", 'The value returned by welcomeToBooleans() should be a boolean value. (true of false)');",
|
||||
"assert(welcomeToBooleans() == true, 'The value returned by welcomeToBooleans() should be true');"
|
||||
"assert(typeof(welcomeToBooleans())==\"boolean\", 'The <code>welcomeToBooleans()</code> function should return a boolean (true/false) value.')",
|
||||
"assert(welcomeToBooleans() == true, '<code>welcomeToBooleans()</code> should return true.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"function welcomeToBooleans() {",
|
||||
"// Good luck!",
|
||||
"",
|
||||
"// don't change code above here",
|
||||
"",
|
||||
"return false;",
|
||||
"",
|
||||
"// don't change code below here",
|
||||
"}",
|
||||
"",
|
||||
"welcomeToBooleans();"
|
||||
@ -57,11 +59,10 @@
|
||||
"title": "Declare JavaScript 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 its 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.",
|
||||
"When we store data in a <code>data structure</code>, we call it a <code>variables</code>. These variables are no different from the x and y variables you use in basic math.",
|
||||
"Let's create our first variable and call it \"myName\".",
|
||||
"You'll notice that in <code>myName</code>, we didn't use a space, and that the \"N\" is capitalized. JavaScript variables are written in <code>camel case</code>. An example of camel case is: camelCase.",
|
||||
"Now, use the <code>var</code> keyword to create a variable called <code>myName</code>. Set its value to your name, in double quotes.",
|
||||
"Look at the <code>ourName</code> example if you get stuck."
|
||||
],
|
||||
"tests": [
|
||||
@ -70,9 +71,10 @@
|
||||
"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.",
|
||||
"",
|
||||
"// You can ignore everything below this line.",
|
||||
"// We use this function to show you the value of your variable in your output box.",
|
||||
"// You'll learn about functions soon.",
|
||||
"",
|
||||
"if(typeof(myName) !== \"undefined\"){(function(v){return(v);})(myName);}"
|
||||
],
|
||||
@ -84,9 +86,9 @@
|
||||
"title": "Declare String Variables",
|
||||
"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."
|
||||
"In the past challenge, we used the code <code>var myName = \"your name\"</code>. This is what we call a <code>String</code> data structure (variable). It is just a \"string\" of characters. JavaScript strings are always wrapped in quotes.",
|
||||
"Now let's create two new string variables: <code>myFirstName</code>and <code>myLastName</code>.",
|
||||
"Assign these variables to 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');",
|
||||
@ -98,9 +100,9 @@
|
||||
"// 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.",
|
||||
"// You can ignore everything below this line.",
|
||||
"// We use this function to show you the value of your variable in your output box.",
|
||||
"// You'll learn about functions soon.",
|
||||
"if(typeof(myFirstName) !== \"undefined\" && typeof(myLastName) !== \"undefined\"){(function(y,z){return(y + ', ' + z);})(myFirstName, myLastName);}"
|
||||
],
|
||||
"type": "waypoint",
|
||||
@ -131,9 +133,9 @@
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"// 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.",
|
||||
"// You can ignore everything below this line.",
|
||||
"// We use this function to show you the value of your variable in your output box.",
|
||||
"// You'll learn about functions soon.",
|
||||
"if(typeof(lastNameLength) != \"undefined\"){(function(v){return(v);})(lastNameLength);}"
|
||||
],
|
||||
"type": "waypoint",
|
||||
@ -166,9 +168,9 @@
|
||||
"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.",
|
||||
"// You can ignore everything below this line.",
|
||||
"// We use this function to show you the value of your variable in your output box.",
|
||||
"// You'll learn about functions soon.",
|
||||
"(function(v){return(v);})(firstLetterOfLastName);"
|
||||
],
|
||||
"type": "waypoint",
|
||||
@ -197,9 +199,9 @@
|
||||
"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.",
|
||||
"// You can ignore everything below this line.",
|
||||
"// We use this function to show you the value of your variable in your output box.",
|
||||
"// You'll learn about functions soon.",
|
||||
"(function(v){return(v);})(thirdLetterOfLastName);"
|
||||
],
|
||||
"type": "waypoint",
|
||||
@ -230,6 +232,9 @@
|
||||
"var lastLetterOfLastName = lastName;",
|
||||
"",
|
||||
"",
|
||||
"// You can ignore everything below this line.",
|
||||
"// We use this function to show you the value of your variable in your output box.",
|
||||
"// You'll learn about functions soon.",
|
||||
"(function(v){return(v);})(lastLetterOfLastName);"
|
||||
],
|
||||
"type": "waypoint",
|
||||
@ -260,6 +265,9 @@
|
||||
"var secondToLastLetterOfLastName = lastName;",
|
||||
"",
|
||||
"",
|
||||
"// You can ignore everything below this line.",
|
||||
"// We use this function to show you the value of your variable in your output box.",
|
||||
"// You'll learn about functions soon.",
|
||||
"(function(v){return(v);})(secondToLastLetterOfLastName);"
|
||||
],
|
||||
"type": "waypoint",
|
||||
@ -283,6 +291,9 @@
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"// You can ignore everything below this line.",
|
||||
"// We use this function to show you the value of your variable in your output box.",
|
||||
"// You'll learn about functions soon.",
|
||||
"(function(z){return('add='+z);})(add);"
|
||||
],
|
||||
"type": "waypoint",
|
||||
@ -306,6 +317,9 @@
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"// You can ignore everything below this line.",
|
||||
"// We use this function to show you the value of your variable in your output box.",
|
||||
"// You'll learn about functions soon.",
|
||||
"(function(z){return('subtract='+z);})(subtract);"
|
||||
],
|
||||
"type": "waypoint",
|
||||
@ -329,6 +343,9 @@
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"// You can ignore everything below this line.",
|
||||
"// We use this function to show you the value of your variable in your output box.",
|
||||
"// You'll learn about functions soon.",
|
||||
"(function(z){return('multiply='+z);})(multiply);"
|
||||
],
|
||||
"type": "waypoint",
|
||||
@ -352,6 +369,9 @@
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"// You can ignore everything below this line.",
|
||||
"// We use this function to show you the value of your variable in your output box.",
|
||||
"// You'll learn about functions soon.",
|
||||
"(function(z){return('divide='+z);})(divide);"
|
||||
],
|
||||
"type": "waypoint",
|
||||
@ -375,6 +395,9 @@
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"// You can ignore everything below this line.",
|
||||
"// We use this function to show you the value of your variable in your output box.",
|
||||
"// You'll learn about functions soon.",
|
||||
"(function(){if(typeof(myDecimal) != \"undefined\"){return(myDecimal);}})();"
|
||||
],
|
||||
"type": "waypoint",
|
||||
@ -397,6 +420,9 @@
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"// You can ignore everything below this line.",
|
||||
"// We use this function to show you the value of your variable in your output box.",
|
||||
"// You'll learn about functions soon.",
|
||||
"(function(y,z){return('multiply='+y+', divide='+z);})(multiply,divide);"
|
||||
],
|
||||
"type": "waypoint",
|
||||
@ -410,8 +436,7 @@
|
||||
"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",
|
||||
""
|
||||
"Refer to the example if you get stuck."
|
||||
],
|
||||
"tests": [
|
||||
"assert(typeof(myArray) == \"object\", 'myArray should be an array');",
|
||||
@ -424,6 +449,9 @@
|
||||
"var myArray = [];",
|
||||
"",
|
||||
"",
|
||||
"// You can ignore everything below this line.",
|
||||
"// We use this function to show you the value of your variable in your output box.",
|
||||
"// You'll learn about functions soon.",
|
||||
"(function(z){return(z);})(myArray);"
|
||||
],
|
||||
"type": "waypoint",
|
||||
@ -444,6 +472,9 @@
|
||||
"var myArray = [];",
|
||||
"",
|
||||
"",
|
||||
"// You can ignore everything below this line.",
|
||||
"// We use this function to show you the value of your variable in your output box.",
|
||||
"// You'll learn about functions soon.",
|
||||
"if(typeof(myArray) !== \"undefined\"){(function(){return(myArray);})();}"
|
||||
],
|
||||
"type": "waypoint",
|
||||
@ -474,6 +505,9 @@
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"// You can ignore everything below this line.",
|
||||
"// We use this function to show you the value of your variable in your output box.",
|
||||
"// You'll learn about functions soon.",
|
||||
"if(typeof(myArray) != \"undefined\" && typeof(data) != \"undefined\"){(function(y,z){return('myArray = ' + JSON.stringify(y) + ', data = ' + JSON.stringify(z));})(myArray, data);}"
|
||||
],
|
||||
"type": "waypoint",
|
||||
@ -490,8 +524,7 @@
|
||||
"var ourArray = [1,2,3];",
|
||||
"ourArray[0] = 3;//ourArray equals [3,2,3]",
|
||||
"</code>",
|
||||
"Now Let's modify <code>myArray</code> using an index",
|
||||
""
|
||||
"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]');",
|
||||
@ -506,6 +539,9 @@
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"// You can ignore everything below this line.",
|
||||
"// We use this function to show you the value of your variable in your output box.",
|
||||
"// You'll learn about functions soon.",
|
||||
"if(typeof(myArray) != \"undefined\"){(function(){return(myArray);})();}"
|
||||
],
|
||||
"type": "waypoint",
|
||||
@ -537,6 +573,9 @@
|
||||
"var removed = myArray;//This should be [\"cat\", 2] and myArray should now be [\"John\", 23]",
|
||||
"",
|
||||
"",
|
||||
"// You can ignore everything below this line.",
|
||||
"// We use this function to show you the value of your variable in your output box.",
|
||||
"// You'll learn about functions soon.",
|
||||
"(function(y, z){return('myArray = ' + JSON.stringify(y) + ' & removed = ' + JSON.stringify(z));})(myArray, removed);"
|
||||
],
|
||||
"type": "waypoint",
|
||||
@ -559,6 +598,9 @@
|
||||
"//Add a [\"dog\", 3] to the end of myArray using push",
|
||||
"",
|
||||
"",
|
||||
"// You can ignore everything below this line.",
|
||||
"// We use this function to show you the value of your variable in your output box.",
|
||||
"// You'll learn about functions soon.",
|
||||
"(function(z){return('myArray = ' + JSON.stringify(z));})(myArray);"
|
||||
],
|
||||
"type": "waypoint",
|
||||
@ -582,6 +624,9 @@
|
||||
"var removed = myArray;//This should be [\"John\"] and myArray should now be [23, [\"dog\", 3]]",
|
||||
"",
|
||||
"",
|
||||
"// You can ignore everything below this line.",
|
||||
"// We use this function to show you the value of your variable in your output box.",
|
||||
"// You'll learn about functions soon.",
|
||||
"(function(y, z){return('myArray = ' + JSON.stringify(y) + ' & removed = ' + JSON.stringify(z));})(myArray, removed);"
|
||||
],
|
||||
"type": "waypoint",
|
||||
@ -604,6 +649,9 @@
|
||||
"//Add \"Paul\" to the start of myArray",
|
||||
"",
|
||||
"",
|
||||
"// You can ignore everything below this line.",
|
||||
"// We use this function to show you the value of your variable in your output box.",
|
||||
"// You'll learn about functions soon.",
|
||||
"(function(y, z){return('myArray = ' + JSON.stringify(y));})(myArray);"
|
||||
],
|
||||
"type": "waypoint",
|
||||
@ -637,7 +685,9 @@
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"//Don't modify this!",
|
||||
"// You can ignore everything below this line.",
|
||||
"// We use this function to show you the value of your variable in your output box.",
|
||||
"// You'll learn about functions soon.",
|
||||
"if(typeof(myFunction) != \"undefined\"){",
|
||||
"var f=myFunction(a,b);",
|
||||
"(function(){return(f);})();",
|
||||
@ -686,6 +736,8 @@
|
||||
" ",
|
||||
"};",
|
||||
"",
|
||||
"// You can ignore everything below this line.",
|
||||
"// We use this function to show you the value of your variable in your output box.",
|
||||
"(function(z){return(z);})(myDog);"
|
||||
],
|
||||
"type": "waypoint",
|
||||
@ -731,6 +783,8 @@
|
||||
"//Now delete the property tails",
|
||||
"",
|
||||
"",
|
||||
"// You can ignore everything below this line.",
|
||||
"// We use this function to show you the value of your variable in your output box.",
|
||||
"(function(z){return(z);})(myDog);"
|
||||
],
|
||||
"type": "waypoint",
|
||||
@ -846,6 +900,8 @@
|
||||
" return(0);",
|
||||
"}",
|
||||
"",
|
||||
"// You can ignore everything below this line.",
|
||||
"// We use this function to show you the value of your variable in your output box.",
|
||||
"(function(){return(myFunction());})();"
|
||||
],
|
||||
"type": "waypoint",
|
||||
@ -875,6 +931,8 @@
|
||||
" return(Math.random());",
|
||||
"}",
|
||||
"",
|
||||
"// You can ignore everything below this line.",
|
||||
"// We use this function to show you the value of your variable in your output box.",
|
||||
"(function(){return(myFunction());})();"
|
||||
],
|
||||
"type": "waypoint",
|
||||
@ -903,6 +961,8 @@
|
||||
" return(Math.random());",
|
||||
"}",
|
||||
"",
|
||||
"// You can ignore everything below this line.",
|
||||
"// We use this function to show you the value of your variable in your output box.",
|
||||
"(function(){return(myFunction());})();"
|
||||
],
|
||||
"type": "waypoint",
|
||||
@ -937,6 +997,8 @@
|
||||
" ",
|
||||
"}",
|
||||
"",
|
||||
"// You can ignore everything below this line.",
|
||||
"// We use this function to show you the value of your variable in your output box.",
|
||||
"(function(){return(myFunction());})();"
|
||||
],
|
||||
"type": "waypoint",
|
||||
@ -966,12 +1028,12 @@
|
||||
"var test = (function(){",
|
||||
" var testString = \"John and Alan went to the shop and got some milk\";",
|
||||
"",
|
||||
"//Do Not Modify Above",
|
||||
"//Do not modify above this line.",
|
||||
"",
|
||||
" var expression = /.+/gi;",
|
||||
"",
|
||||
"//Do Not Modify Below",
|
||||
"",
|
||||
"// You can ignore everything below this line.",
|
||||
"// We use this function to show you the value of your variable in your output box.",
|
||||
" return(testString.match(expression).length);",
|
||||
"})();(function(){return(test);})();"
|
||||
],
|
||||
@ -1000,8 +1062,8 @@
|
||||
"",
|
||||
" var expression = /.+/gi;",
|
||||
"",
|
||||
"//Do Not Modify Below",
|
||||
"",
|
||||
"// You can ignore everything below this line.",
|
||||
"// We use this function to show you the value of your variable in your output box.",
|
||||
" return(testString.match(expression).length);",
|
||||
"})();(function(){return(test);})();"
|
||||
],
|
||||
@ -1029,8 +1091,8 @@
|
||||
"",
|
||||
" var expression = /.+/gi;",
|
||||
"",
|
||||
"//Do Not Modify Below",
|
||||
"",
|
||||
"// You can ignore everything below this line.",
|
||||
"// We use this function to show you the value of your variable in your output box.",
|
||||
" return(testString.match(expression).length);",
|
||||
"})();(function(){return(test);})();"
|
||||
],
|
||||
@ -1057,8 +1119,8 @@
|
||||
"",
|
||||
" var expression = /.+/gi;",
|
||||
"",
|
||||
"//Do Not Modify Below",
|
||||
"",
|
||||
"// You can ignore everything below this line.",
|
||||
"// We use this function to show you the value of your variable in your output box.",
|
||||
" return(testString.match(expression).length);",
|
||||
"})();(function(){return(test);})();"
|
||||
],
|
||||
@ -1091,11 +1153,11 @@
|
||||
" ",
|
||||
" var images = [\"https://bit.ly/fcc-relaxing-cat\",\"https://bit.ly/fcc-relaxing-cat\",\"https://bit.ly/fcc-relaxing-cat\",\"https://bit.ly/fcc-relaxing-cat\",\"https://bit.ly/fcc-relaxing-cat\"];",
|
||||
" ",
|
||||
" /*Don't modify above here*/",
|
||||
" /*Don't modify above this line*/",
|
||||
" ",
|
||||
" ",
|
||||
" ",
|
||||
" /*Don't modify below here*/",
|
||||
" /*Don't modify below this line*/",
|
||||
" ",
|
||||
" $(\".logger\").html(\"\");",
|
||||
" $(\".logger\").html(\"Not A Win\")",
|
||||
@ -1251,11 +1313,11 @@
|
||||
" $(\".logger\").html(\"\");",
|
||||
" $(\".logger\").html(\"Not A Win\")",
|
||||
" ",
|
||||
" /*Don\"t modify above here*/",
|
||||
" /*Don't modify above this line*/",
|
||||
" ",
|
||||
" ",
|
||||
" ",
|
||||
" /*Don\"t modify below here*/",
|
||||
" /*Don't modify below this line*/",
|
||||
" ",
|
||||
" if(slotOne !== undefined && slotTwo !== undefined && slotThree !== undefined){",
|
||||
" $(\".logger\").html(slotOne);",
|
||||
@ -1411,11 +1473,11 @@
|
||||
" $(\".logger\").html(\"\");",
|
||||
" $(\".logger\").html(\"Not A Win\")",
|
||||
" ",
|
||||
" /*Don't modify above here*/",
|
||||
" /*Don't modify above this line*/",
|
||||
" ",
|
||||
" ",
|
||||
" ",
|
||||
" /*Don't modify below here*/",
|
||||
" /*Don't modify below this line*/",
|
||||
" ",
|
||||
" if(slotOne != slotTwo || slotTwo != slotThree){",
|
||||
" return(null);",
|
||||
@ -1560,157 +1622,157 @@
|
||||
"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;",
|
||||
" ",
|
||||
" //Placeholder",
|
||||
" var images = ['https://www.evernote.com/l/AlxaOC8QrXlBjpTdGMe3mBwLN3Yjm-KB5yQB/image.png','https://www.evernote.com/l/AlyXbeIS8axEspbwXD8RzmsaCUIf10snmzgB/image.png','https://www.evernote.com/l/AlxMveeWtopKaajUmTVrnv92mqA_s2uzW-8B/image.png','https://www.evernote.com/l/AlyyRP_Kh_dCG7t8b4JRnwMNCa1JThI_5gQB/image.png', 'https://www.evernote.com/l/Alx64952qUxEhJnBteZvJgxib1qlwQcw9G0B/image.png'];",
|
||||
" ",
|
||||
" 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>",
|
||||
" .slot > img {",
|
||||
" margin: 0!important;",
|
||||
" height: 71px;",
|
||||
" width: 50px;",
|
||||
" }",
|
||||
" .container {",
|
||||
" background-color: #4a2b0f;",
|
||||
" height: 400px;",
|
||||
" width: 260px;",
|
||||
" margin: 50px auto;",
|
||||
" border-radius: 4px;",
|
||||
" }",
|
||||
" .header {",
|
||||
" border: 2px solid #fff;",
|
||||
" border-radius: 4px;",
|
||||
" height: 55px;",
|
||||
" margin: 14px auto;",
|
||||
" background-color: #457f86",
|
||||
" }",
|
||||
" .header h2 {",
|
||||
" height: 30px;",
|
||||
" margin: auto;",
|
||||
" }",
|
||||
" .header h2 {",
|
||||
" font-size: 14px;",
|
||||
" margin: 0 0;",
|
||||
" padding: 0;",
|
||||
" color: #fff;",
|
||||
" text-align: center;",
|
||||
" }",
|
||||
" .slots{",
|
||||
" display: flex;",
|
||||
" background-color: #457f86;",
|
||||
" border-radius: 6px;",
|
||||
" border: 2px solid #fff;",
|
||||
" }",
|
||||
" .slot{",
|
||||
" flex: 1 0 auto;",
|
||||
" background: white;",
|
||||
" height: 75px;",
|
||||
" width: 50px;",
|
||||
" margin: 8px;",
|
||||
" border: 2px solid #215f1e;",
|
||||
" border-radius: 4px;",
|
||||
" text-align: center;",
|
||||
" }",
|
||||
" .go {",
|
||||
" width: 100%;",
|
||||
" color: #fff;",
|
||||
" background-color: #457f86;",
|
||||
" border: 2px solid #fff;",
|
||||
" border-radius: 2px;",
|
||||
" box-sizing: none;",
|
||||
" outline: none!important;",
|
||||
" }",
|
||||
" .foot {",
|
||||
" height: 150px;",
|
||||
" background-color: 457f86;",
|
||||
" border: 2px solid #fff;",
|
||||
" }",
|
||||
" ",
|
||||
" .logger {",
|
||||
" color: white;",
|
||||
" margin: 10px;",
|
||||
" }",
|
||||
" ",
|
||||
" .outset {",
|
||||
" -webkit-box-shadow: 0px 0px 15px -2px rgba(0,0,0,0.75);",
|
||||
" -moz-box-shadow: 0px 0px 15px -2px rgba(0,0,0,0.75);",
|
||||
" box-shadow: 0px 0px 15px -2px rgba(0,0,0,0.75);",
|
||||
" }",
|
||||
" ",
|
||||
" .inset {",
|
||||
" -webkit-box-shadow: inset 0px 0px 15px -2px rgba(0,0,0,0.75);",
|
||||
" -moz-box-shadow: inset 0px 0px 15px -2px rgba(0,0,0,0.75);",
|
||||
" box-shadow: inset 0px 0px 15px -2px rgba(0,0,0,0.75);",
|
||||
" }",
|
||||
"</style>"
|
||||
"fccss",
|
||||
" function runSlots(){",
|
||||
" var slotOne;",
|
||||
" var slotTwo;",
|
||||
" var slotThree;",
|
||||
" ",
|
||||
" //Placeholder",
|
||||
" var images = ['https://www.evernote.com/l/AlxaOC8QrXlBjpTdGMe3mBwLN3Yjm-KB5yQB/image.png','https://www.evernote.com/l/AlyXbeIS8axEspbwXD8RzmsaCUIf10snmzgB/image.png','https://www.evernote.com/l/AlxMveeWtopKaajUmTVrnv92mqA_s2uzW-8B/image.png','https://www.evernote.com/l/AlyyRP_Kh_dCG7t8b4JRnwMNCa1JThI_5gQB/image.png', 'https://www.evernote.com/l/Alx64952qUxEhJnBteZvJgxib1qlwQcw9G0B/image.png'];",
|
||||
" ",
|
||||
" 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 this line*/",
|
||||
" ",
|
||||
" ",
|
||||
" ",
|
||||
" /*Don't modify below this line*/",
|
||||
" ",
|
||||
" 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>",
|
||||
" .slot > img {",
|
||||
" margin: 0!important;",
|
||||
" height: 71px;",
|
||||
" width: 50px;",
|
||||
" }",
|
||||
" .container {",
|
||||
" background-color: #4a2b0f;",
|
||||
" height: 400px;",
|
||||
" width: 260px;",
|
||||
" margin: 50px auto;",
|
||||
" border-radius: 4px;",
|
||||
" }",
|
||||
" .header {",
|
||||
" border: 2px solid #fff;",
|
||||
" border-radius: 4px;",
|
||||
" height: 55px;",
|
||||
" margin: 14px auto;",
|
||||
" background-color: #457f86",
|
||||
" }",
|
||||
" .header h2 {",
|
||||
" height: 30px;",
|
||||
" margin: auto;",
|
||||
" }",
|
||||
" .header h2 {",
|
||||
" font-size: 14px;",
|
||||
" margin: 0 0;",
|
||||
" padding: 0;",
|
||||
" color: #fff;",
|
||||
" text-align: center;",
|
||||
" }",
|
||||
" .slots{",
|
||||
" display: flex;",
|
||||
" background-color: #457f86;",
|
||||
" border-radius: 6px;",
|
||||
" border: 2px solid #fff;",
|
||||
" }",
|
||||
" .slot{",
|
||||
" flex: 1 0 auto;",
|
||||
" background: white;",
|
||||
" height: 75px;",
|
||||
" width: 50px;",
|
||||
" margin: 8px;",
|
||||
" border: 2px solid #215f1e;",
|
||||
" border-radius: 4px;",
|
||||
" text-align: center;",
|
||||
" }",
|
||||
" .go {",
|
||||
" width: 100%;",
|
||||
" color: #fff;",
|
||||
" background-color: #457f86;",
|
||||
" border: 2px solid #fff;",
|
||||
" border-radius: 2px;",
|
||||
" box-sizing: none;",
|
||||
" outline: none!important;",
|
||||
" }",
|
||||
" .foot {",
|
||||
" height: 150px;",
|
||||
" background-color: 457f86;",
|
||||
" border: 2px solid #fff;",
|
||||
" }",
|
||||
" ",
|
||||
" .logger {",
|
||||
" color: white;",
|
||||
" margin: 10px;",
|
||||
" }",
|
||||
" ",
|
||||
" .outset {",
|
||||
" -webkit-box-shadow: 0px 0px 15px -2px rgba(0,0,0,0.75);",
|
||||
" -moz-box-shadow: 0px 0px 15px -2px rgba(0,0,0,0.75);",
|
||||
" box-shadow: 0px 0px 15px -2px rgba(0,0,0,0.75);",
|
||||
" }",
|
||||
" ",
|
||||
" .inset {",
|
||||
" -webkit-box-shadow: inset 0px 0px 15px -2px rgba(0,0,0,0.75);",
|
||||
" -moz-box-shadow: inset 0px 0px 15px -2px rgba(0,0,0,0.75);",
|
||||
" box-shadow: inset 0px 0px 15px -2px rgba(0,0,0,0.75);",
|
||||
" }",
|
||||
"</style>"
|
||||
],
|
||||
"type": "waypoint",
|
||||
"challengeType": 0
|
||||
|
||||
@ -61,7 +61,7 @@
|
||||
"For example, let's make all of your <code>button</code> elements bounce. Just add this code inside your \"document ready function\": <code>$(\"button\").addClass(\"animated bounce\")</code>."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"button\").hasClass(\"animated\") && $(\"button\").hasClass(\"bounce\"), 'Use the jQuery <code>addClass()</code> function to give the classes \"animated\" and \"bounce\" to your <code>button</code> element.')",
|
||||
"assert($(\"button\").hasClass(\"animated\") && $(\"button\").hasClass(\"bounce\"), 'Use the jQuery <code>addClass()</code> function to give the classes \"animated\" and \"bounce\" to your <code>button</code> elements.')",
|
||||
"assert(!editor.match(/class.*animated/g), 'Only use jQuery to add these classes to the element.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
@ -108,7 +108,7 @@
|
||||
"First, let's target your <code>div</code> elements with the class \"well\" by using the <code>$(\".well\")</code> selector.",
|
||||
"Note that, just like with CSS declarations, you type a <code>.</code> before the class's name.",
|
||||
"Then use jQuery's <code>.addClass()</code> function to add the classes \"animated\" and \"shake\".",
|
||||
"Here's the full code that you'll want to type into your \"document ready function\": <code>$(\".well\").addClass(\"animated shake\");</code>"
|
||||
"For example, you could make all the elements with the class \"text-primary\" shake by adding the following to your \"document ready function\": <code>$(\".text-primary\").addClass(\"animated shake\");</code>"
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\".well\").hasClass(\"animated\") && $(\".well\").hasClass(\"shake\"), 'Use the jQuery <code>addClass()</code> function to give the classes \"animated\" and \"shake\" to all your elements with the class \"well\".')",
|
||||
@ -157,12 +157,12 @@
|
||||
"First target your <code>div</code> element with the id \"target3\" by using the <code>$(\"#target3\")</code> selector.",
|
||||
"Note that, just like with CSS declarations, you type a <code>#</code> before the id's name.",
|
||||
"Then use jQuery's <code>.addClass()</code> function to add the classes \"animated\" and \"fadeOut\".",
|
||||
"Make all the <code>button</code> element with the id \"target3\" fadeOut. <code>$(\"#target3\").addClass(\"animated fadeOut\")</code>."
|
||||
"Here's how you'd make the <code>button</code> element with the id \"target6\" fade out: <code>$(\"#target6\").addClass(\"animated fadeOut\")</code>."
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"#target3\").hasClass(\"animated\"), 'Select the <code>button</code>element with the <code>id</code> of \"target3\" and use the jQuery <code>addClass()</code> function to give it the class of \"animated\".');",
|
||||
"assert($(\"#target3\").hasClass(\"fadeOut\"), 'Target the element with the id <code>target3</code> and use the jQuery <code>addClass()</code> function to give it the class \"fadeOut\".')",
|
||||
"assert(!editor.match(/class.*animated/g), 'Only use jQuery to add these classes to the element.');"
|
||||
"assert($(\"#target3\").hasClass(\"fadeOut\") || $(\"#target3\").hasClass(\"fadeout\"), 'Target the element with the id <code>target3</code> and use the jQuery <code>addClass()</code> function to give it the class \"fadeOut\".')",
|
||||
"assert(!editor.match(/class.*animated/g), 'Only use jQuery to add these classes to the element.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"fccss",
|
||||
@ -262,9 +262,9 @@
|
||||
"Use the <code>addClass()</code> jQuery function to give the element one new class for each selector: \"animated\", \"shake\", and \"btn-primary\"."
|
||||
],
|
||||
"tests": [
|
||||
"assert(editor.match(/\\$\\((\"button\"\\)/g), 'Use the <code>$(\"button\")</code> selector.')",
|
||||
"assert(editor.match(/\\$\\(\"\\.btn\"\\)/g), 'Use the <code>$(\".btn\"\\)</code> selector.')",
|
||||
"assert(editor.match(/\\$\\(\"#target1\"\\)/g), 'Use the <code>$(\"#target1\")</code> selector.')",
|
||||
"assert(editor.match(/\\$\\(.*button/g), 'Use the <code>$(\"button\")</code> selector.')",
|
||||
"assert(editor.match(/\\$\\(.*.btn/g), 'Use the <code>$(\".btn\")</code> selector.')",
|
||||
"assert(editor.match(/\\$\\(.*#target1/g), 'Use the <code>$(\"#target1\")</code> selector.')",
|
||||
"assert(editor.match(/addClass/g) && editor.match(/addClass/g).length > 2, 'Only add one class with each of your three selectors.')",
|
||||
"assert($(\"#target1\").hasClass(\"animated\") && $(\"#target1\").hasClass(\"shake\") && $(\"#target1\").hasClass(\"btn-primary\"), 'Your \"#target1\" element should have the classes \"animated\"‚ \"shake\" and \"btn-primary\".')",
|
||||
"assert(!editor.match(/class.*animated/g), 'Only use jQuery to add these classes to the element.')"
|
||||
@ -624,7 +624,7 @@
|
||||
"Here's an example of how you would use the <code>parent()</code> function: <code>$(\"#left-well\").parent().css(\"background-color\", \"blue\")</code>"
|
||||
],
|
||||
"tests": [
|
||||
"assert($(\"#left-well\").css(\"background-color\") === 'rgb(255, 0, 0)', 'Your \"target1\" element should have a red background.')",
|
||||
"assert($(\"#left-well\").css(\"background-color\") === 'rgb(255, 0, 0)', 'Your \"left-well\" element should have a red background.')",
|
||||
"assert(editor.match(/\\.parent\\(\\)\\.css/g), 'You should use the <code>parent()</code> function to modify this element.')",
|
||||
"assert(editor.match(/<div class=\"well\" id=\"left-well\">/g), 'Only use jQuery to add these classes to the element.')"
|
||||
],
|
||||
@ -672,7 +672,7 @@
|
||||
"title": "Target the Children of an Element Using jQuery",
|
||||
"difficulty": 3.14,
|
||||
"description": [
|
||||
"Many HTML elements has a \"children\" element from which they \"inherits\" properties.",
|
||||
"Many HTML elements have \"children\" elements from which they \"inherit\" properties.",
|
||||
"For example, every HTML element is a child of your <code>body</code> element, and your \"jQuery Playground\" <code>h3</code> element is a child of your <code><div class=\"container-fluid\"></code> element.",
|
||||
"jQuery has a function called <code>children()</code> that allows you to access the children of whichever element you've selected.",
|
||||
"Give all the children of your <code>#right-well</code> element a color of green.",
|
||||
@ -792,7 +792,7 @@
|
||||
"tests": [
|
||||
"assert($('.target:even').hasClass('animated') && $('.target:even').hasClass('shake'), 'All the \"target\" elements that computer considers even should shake.')",
|
||||
"assert(editor.match(/\\:even/g), 'You should use the <code>:even</code> function to modify these elements.')",
|
||||
"assert(editor.match(/<button class=\\'btn btn-default target\\' id=\\'target3\\'>/g), 'Only use jQuery to add these classes to the element.')"
|
||||
"assert(editor.match(/<button class=\"btn btn-default target\" id=\"target3\">/g), 'Only use jQuery to add these classes to the element.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"fccss",
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user