Merge pull request #3595 from FreeCodeCamp/curriculum/JSONAndAJAX
Curriculum/json and ajax for QA and copy check
This commit is contained in:
Ben McMahon
@ -41,11 +41,11 @@
|
||||
"challengeSeed": [
|
||||
"function welcomeToBooleans() {",
|
||||
"",
|
||||
"// Only change code below this line.",
|
||||
" // Only change code below this line.",
|
||||
"",
|
||||
" return false;",
|
||||
"",
|
||||
"// Only change code above this line.",
|
||||
" // Only change code above this line.",
|
||||
"}",
|
||||
"",
|
||||
"welcomeToBooleans();"
|
||||
@ -69,10 +69,10 @@
|
||||
"challengeSeed": [
|
||||
"// var ourName = \"Free Code Camp\";",
|
||||
"",
|
||||
"// Only change code below this line.",
|
||||
"",
|
||||
"",
|
||||
"// Only change code above this line.",
|
||||
"// We use this function to show you the value of your variable in your output box.",
|
||||
"// You'll learn about functions soon.",
|
||||
"",
|
||||
"if(typeof(myName) !== \"undefined\"){(function(v){return v;})(myName);}"
|
||||
],
|
||||
|
||||
404
challenges/json-apis-and-ajax.json
Normal file
404
challenges/json-apis-and-ajax.json
Normal file
@ -0,0 +1,404 @@
|
||||
{
|
||||
"name": "JSON APIs and Ajax",
|
||||
"order": 10.5,
|
||||
"time": "30m",
|
||||
"challenges": [
|
||||
{
|
||||
"id": "bb000000000000000000001",
|
||||
"title": "Trigger Click Events with jQuery",
|
||||
"description": [
|
||||
"In this section, we'll learn how to get data from APIs. APIs - or Application Interfaces - are tools that computers use to communicate with one another.",
|
||||
"We'll also learn how to update HTML with the data we get from these APIs using a technology called Ajax.",
|
||||
"First, let's review what the <code>$(document).ready()</code> function does. This function makes it so all code inside of it only runs once our page loads.",
|
||||
"Let's make our \"Get Message\" button change the text of the element with the class <code>message</code>.",
|
||||
"Before we can do this, we need to implement a <code>click event</code> inside of our <code>$(document).ready()</code> function by adding this code:",
|
||||
"<code>$(\"#getMessage\").on(\"click\", function(){</code>",
|
||||
"",
|
||||
"<code>});</code>"
|
||||
],
|
||||
"tests": [
|
||||
"assert(editor.match(/\\$\\s*?\\(\\s*?(?:'|\")\\#getMessage(?:'|\")\\s*?\\)\\s*?\\.on\\s*?\\(\\s*?(?:'|\")click(?:'|\")\\s*?\\,\\s*?function\\s*?\\(\\s*?\\)\\s*?\\{/gi), 'Bind the click event to the button with the ID of <code>getMessage</code>')",
|
||||
"assert(editor.match(/\\n*?\\s*?\\}\\n*?\\s*?\\);/gi) && editor.match(/\\n*?\\s*?\\}\\);/gi).length >= 2, 'Be sure to close your functions with <code>});</code>')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"fccss",
|
||||
" $(document).ready(function() {",
|
||||
" // Only change code below this line.",
|
||||
" ",
|
||||
" // Only change code above this line.",
|
||||
" });",
|
||||
"fcces",
|
||||
"",
|
||||
"",
|
||||
"<div class=\"container-fluid\">",
|
||||
" <div class = \"row text-center\">",
|
||||
" <h2>Cat Photo Finder</h2>",
|
||||
" </div>",
|
||||
" <div class = \"row text-center\">",
|
||||
" <div class = \"col-xs-12 well message\">",
|
||||
" The message will go here",
|
||||
" </div>",
|
||||
" </div>",
|
||||
" <div class = \"row text-center\">",
|
||||
" <div class = \"col-xs-12\">",
|
||||
" <button id = \"getMessage\" class = \"btn btn-primary\">",
|
||||
" Get Message",
|
||||
" </button>",
|
||||
" </div>",
|
||||
" </div>",
|
||||
"</div>"
|
||||
],
|
||||
"challengeType": 0,
|
||||
"type": "waypoint"
|
||||
},
|
||||
{
|
||||
"id": "bc000000000000000000001",
|
||||
"title": "Change Text with Click Events",
|
||||
"description": [
|
||||
"When our click event happens, we can use Ajax to update an HTML element.",
|
||||
"Let's make it so that when a user clicks the \"Get Message\" button, we change the text of the element with the class <code>message</code> to say \"Here is the message\".",
|
||||
"We can do this by adding the following code within our click event:",
|
||||
"<code>  $(\".message\").html(\"Here is the message\");</code>"
|
||||
],
|
||||
"tests": [
|
||||
"assert(editor.match(/\\$\\s*?\\(\\s*?(?:'|\")\\.message(?:'|\")\\s*?\\)\\s*?\\.html\\s*?\\(\\s*?(?:'|\")Here\\sis\\sthe\\smessage(?:'|\")\\s*?\\);/gi), 'Clicking the \"Get Message\" button should give the element with the class <code>message</code> the text \"Here is the message\".')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"fccss",
|
||||
" $(document).ready(function() {",
|
||||
" $(\"#getMessage\").on(\"click\", function(){",
|
||||
" // Only change code below this line.",
|
||||
"",
|
||||
" // Only change code above this line.",
|
||||
" });",
|
||||
" });",
|
||||
"fcces",
|
||||
"",
|
||||
"",
|
||||
|
||||
"<div class=\"container-fluid\">",
|
||||
" <div class = \"row text-center\">",
|
||||
" <h2>Cat Photo Finder</h2>",
|
||||
" </div>",
|
||||
" <div class = \"row text-center\">",
|
||||
" <div class = \"col-xs-12 well message\">",
|
||||
" The message will go here",
|
||||
" </div>",
|
||||
" </div>",
|
||||
" <div class = \"row text-center\">",
|
||||
" <div class = \"col-xs-12\">",
|
||||
" <button id = \"getMessage\" class = \"btn btn-primary\">",
|
||||
" Get Message",
|
||||
" </button>",
|
||||
" </div>",
|
||||
" </div>",
|
||||
"</div>"
|
||||
],
|
||||
"challengeType": 0,
|
||||
"type": "waypoint"
|
||||
},
|
||||
{
|
||||
"id": "bb000000000000000000002",
|
||||
"title": "Get JSON with the jQuery getJSON Method",
|
||||
"description": [
|
||||
"You can also request data from an external source. This is where APIs come into play.",
|
||||
"Remember that APIs - or Application Interfaces - are tools that computers use to communicate with one another.",
|
||||
"Most web APIs transfer data in a format called JSON. JSON stands for JavaScript Object Notation.",
|
||||
"You've already been using JSON whenever you create a JavaScript object. JSON is nothing more than object properties and their current values, sandwiched between a <code>{</code> and a <code>}</code>.",
|
||||
"These properties and their values are often referred to as \"key-value pairs\".",
|
||||
"Let's get the JSON from Free Code Camp's Cat Photo API.",
|
||||
"Here's the code you can put in your click event to do this:",
|
||||
"<code>  $.getJSON(\"/json/cats.json?callback=\", function( json ) {</code>",
|
||||
"<code>    $(\".message\").html(JSON.stringify(json))</code>",
|
||||
"<code>  });</code>",
|
||||
"Once you've added this, click the \"Get Message\" button. Your Ajax function will replace the \"The message will go here\" text with the raw JSON output from the Free Code Camp Cat Photo API."
|
||||
],
|
||||
"tests": [
|
||||
"assert(editor.match(/\\$\\s*?\\(\\s*?(\\\"|\\')\\#getMessage(\\\"|\\')\\s*?\\)\\s*?\\.\\s*?on\\s*?\\(\\s*?(\\\"|\\')click(\\\"|\\')\\s*?\\,\\s*?function\\s*?\\(\\s*?\\)\\s*?\\{/gi), 'You should have a click handler on the getMessage button to trigger the AJAX request.')",
|
||||
"assert(editor.match(/\\s*?\\}\\s*?\\)\\s*?\\;/gi), 'You should have at least on closing set of brackets and parenthesis.')",
|
||||
"assert(editor.match(/\\s*?\\}\\s*?\\)\\s*?\\;/gi) && editor.match(/\\,\\s*?function\\s*?\\(\\s*?\\w*?\\s*?\\)\\s*?\\{/gi) && editor.match(/\\s*?\\}\\s*?\\)\\s*?\\;/gi).length === editor.match(/\\s*?function\\s*?\\(\\s*?\\w*?\\s*?\\)\\s*?\\{/gi).length, 'Each callback function should have a closing set of brackets and parenthesis.')",
|
||||
"assert(editor.match(/\\$\\s*?\\.\\s*?getJSON\\s*?\\(\\s*?\"\\\/json\\\/cats\\.json\\?callback\\=\"\\s*?\\,\\s*?function\\s*?\\(\\s*?json\\s*?\\)\\s*?\\{/gi), 'You should be making use of the getJSON method given in the description to load data from the json file.')",
|
||||
"assert(editor.match(/\\$\\s*?\\(\\s*?\\\"\\.message\\\"\\s*?\\)\\s*?\\.\\s*?html\\s*?\\(\\s*?JSON\\s*?\\.\\s*?stringify\\s*?\\(\\s*?json\\s*?\\)\\s*?\\)/gi), 'Don\\'t forget to make the <code>.html</code> change the contents of the message box so that it contains the result of the getJSON.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"fccss",
|
||||
" $(document).ready(function() {",
|
||||
" ",
|
||||
" $(\"#getMessage\").on(\"click\", function(){",
|
||||
" // Only change code below this line.",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
" // Only change code above this line.",
|
||||
" });",
|
||||
" ",
|
||||
" });",
|
||||
"fcces",
|
||||
"",
|
||||
"<div class=\"container-fluid\">",
|
||||
" <div class = \"row text-center\">",
|
||||
" <h2>Cat Photo Finder</h2>",
|
||||
" </div>",
|
||||
" <div class = \"row text-center\">",
|
||||
" <div class = \"col-xs-12 well message\">",
|
||||
" The message will go here",
|
||||
" </div>",
|
||||
" </div>",
|
||||
" <div class = \"row text-center\">",
|
||||
" <div class = \"col-xs-12\">",
|
||||
" <button id = \"getMessage\" class = \"btn btn-primary\">",
|
||||
" Get Message",
|
||||
" </button>",
|
||||
" </div>",
|
||||
" </div>",
|
||||
"</div>"
|
||||
],
|
||||
"challengeType": 0,
|
||||
"type": "waypoint"
|
||||
},
|
||||
{
|
||||
"id": "bb000000000000000000003",
|
||||
"title": "Convert JSON Data to HTML",
|
||||
"description": [
|
||||
"Now that we're getting data from a JSON API, let's display it in our HTML.",
|
||||
"We can use the <code>.map()</code> method to loop through our data and modify our HTML elements.",
|
||||
"First, let's declare an html variable with <code>var html = \"\";</code>.",
|
||||
"Then, let's loop through our JSON, adding more HTML to that variable. When the loop is finished, we'll render it.",
|
||||
"Here's the code that does this:",
|
||||
"<code>json.map(function(val) {</code>",
|
||||
"<code>  html = html + \"<div class = 'cat'>\"</code>",
|
||||
"<code>  for(var key in val) {</code>",
|
||||
"<code>    html = html + '<div class = \"' + key + '\">' + val[key] + '</div>';</code>",
|
||||
"<code>  }</code>",
|
||||
"<code>  html = html + \"</div><br/>\"</code>",
|
||||
"<code>});</code>"
|
||||
],
|
||||
"tests": [
|
||||
"assert(editor.match(/json\\.map/gi), 'The message box should have something in it.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"fccss",
|
||||
" $(document).ready(function() {",
|
||||
"",
|
||||
" $(\"#getMessage\").on(\"click\", function() {",
|
||||
" $.getJSON(\"/json/cats.json?callback=\", function( json ) {",
|
||||
"",
|
||||
" // Only change code below this line.",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
" // Only change code above this line.",
|
||||
"",
|
||||
" $(\".message\").html(html);",
|
||||
"",
|
||||
" });",
|
||||
" });",
|
||||
" });",
|
||||
"fcces",
|
||||
"",
|
||||
"<div class=\"container-fluid\">",
|
||||
" <div class = \"row text-center\">",
|
||||
" <h2>Cat Photo Finder</h2>",
|
||||
" </div>",
|
||||
" <div class = \"row text-center\">",
|
||||
" <div class = \"col-xs-12 well message\">",
|
||||
" The message will go here"," </div>",
|
||||
" </div>",
|
||||
" <div class = \"row text-center\">",
|
||||
" <div class = \"col-xs-12\">",
|
||||
" <button id = \"getMessage\" class = \"btn btn-primary\">",
|
||||
" Get Message",
|
||||
" </button>",
|
||||
" </div>",
|
||||
" </div>",
|
||||
"</div>"
|
||||
],
|
||||
"challengeType": 0,
|
||||
"type": "waypoint"
|
||||
},
|
||||
{
|
||||
"id": "bb000000000000000000004",
|
||||
"title": "Render Images from Data Sources",
|
||||
"description": [
|
||||
"In the JSON that we receive from Free Code Camp's Cat Photo API, each object has an attribute called \"imageLink\".",
|
||||
"When we're looping through these objects, let's check whether an object attribute (key) is <code>imageLink</code>. If it is, instead of outputing the image link, let's render the image.",
|
||||
"Here's the code that does this:",
|
||||
"<code>if(key === \"imageLink\") {</code>",
|
||||
"<code>  html = html + '<img class = \"' + key + '\"src = \"' + val[key] + '\">';</code>",
|
||||
"<code>} else {</code>",
|
||||
"<code>  html = html + '<div class = \"' + key + '\">' + val[key] + '</div>';</code>",
|
||||
"<code>}</code>"
|
||||
],
|
||||
"tests": [
|
||||
"assert(editor.match(/imageLink/gi), 'You should have accessed the imageLink of each cat object.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"fccss",
|
||||
" $(document).ready(function() {",
|
||||
"",
|
||||
" $(\"#getMessage\").on(\"click\", function() {",
|
||||
" $.getJSON(\"/json/cats.json?callback=\", function( json ) {",
|
||||
"",
|
||||
" var html = \"\";",
|
||||
"",
|
||||
" json.map(function(val) {",
|
||||
"",
|
||||
" html = html + \"<div class = 'cat'>\"",
|
||||
"",
|
||||
" for (var key in val) {",
|
||||
"",
|
||||
" // Only change code below this line.",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
" // Only change code above this line.",
|
||||
"",
|
||||
" }",
|
||||
"",
|
||||
" html = html + \"</div>\"",
|
||||
"",
|
||||
" });",
|
||||
"",
|
||||
" $(\".message\").html(html);",
|
||||
"",
|
||||
" });",
|
||||
" });",
|
||||
" });",
|
||||
"fcces",
|
||||
"",
|
||||
"<div class=\"container-fluid\">",
|
||||
" <div class = \"row text-center\">",
|
||||
" <h2>Cat Photo Finder</h2>",
|
||||
" </div>",
|
||||
" <div class = \"row text-center\">",
|
||||
" <div class = \"col-xs-12 well message\">",
|
||||
" The message will go here",
|
||||
" </div>",
|
||||
" </div>",
|
||||
" <div class = \"row text-center\">",
|
||||
" <div class = \"col-xs-12\">",
|
||||
" <button id = \"getMessage\" class = \"btn btn-primary\">",
|
||||
" Get Message",
|
||||
" </button>",
|
||||
" </div>",
|
||||
" </div>",
|
||||
"</div>"
|
||||
],
|
||||
"challengeType": 0,
|
||||
"type": "waypoint"
|
||||
},
|
||||
{
|
||||
"id": "bb000000000000000000005",
|
||||
"title": "Prefilter JSON",
|
||||
"description": [
|
||||
"If we don't want to render every cat photo we get from our Free Code Camp's Cat Photo JSON API, we can pre-filter the json before we loop through it.",
|
||||
"Let's filter out the cat who's \"id\" key has a value of 1.",
|
||||
"Here's the code to do this:",
|
||||
"<code>json = json.filter(function(val) {</code>",
|
||||
"<code>  return(val.id !== 1);</code>",
|
||||
"<code>});</code>"
|
||||
],
|
||||
"tests": [
|
||||
"assert(editor.match(/filter/gi), 'You should be making use of the .filter method.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"fccss",
|
||||
" $(document).ready(function() {",
|
||||
"",
|
||||
" $(\"#getMessage\").on(\"click\", function() {",
|
||||
" $.getJSON(\"/json/cats.json?callback=\", function( json ) {",
|
||||
"",
|
||||
" var html = \"\";",
|
||||
"",
|
||||
" json.map(function(val){",
|
||||
"",
|
||||
" val = \"<img src = '\" + val.imageLink + \"'/>\" ",
|
||||
"",
|
||||
" html = html + \"<div class = 'cat'>\"",
|
||||
"",
|
||||
" // Only change code below this line.",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
" // Only change code above this line.",
|
||||
"",
|
||||
" for(var key in val){",
|
||||
"",
|
||||
" html = html + '<div class = \"' + key + '\">' + val[key] + '</div>';",
|
||||
"",
|
||||
" }",
|
||||
"",
|
||||
" html = html + \"</div>\"",
|
||||
"",
|
||||
" });",
|
||||
"",
|
||||
" $(\".message\").html(html);",
|
||||
"",
|
||||
" });",
|
||||
" });",
|
||||
" });",
|
||||
"fcces",
|
||||
"",
|
||||
"",
|
||||
"<div class=\"container-fluid\">",
|
||||
" <div class = \"row text-center\">",
|
||||
" <h2>Cat Photo Finder</h2>",
|
||||
" </div>",
|
||||
" <div class = \"row text-center\">",
|
||||
" <div class = \"col-xs-12 well message\">",
|
||||
" The message will go here",
|
||||
" </div>",
|
||||
" </div>",
|
||||
" <div class = \"row text-center\">",
|
||||
" <div class = \"col-xs-12\">",
|
||||
" <button id = \"getMessage\" class = \"btn btn-primary\">",
|
||||
" Get Message",
|
||||
" </button>",
|
||||
" </div>",
|
||||
" </div>",
|
||||
"</div>",
|
||||
""
|
||||
],
|
||||
"challengeType": 0,
|
||||
"type": "waypoint"
|
||||
},
|
||||
{
|
||||
"id": "bb000000000000000000006",
|
||||
"title": "Get Geo-location Data",
|
||||
"description": [
|
||||
"Another cool thing we can do is access our user's current location. Every browser has a built in navigator that can give us this information.",
|
||||
"The navigator will get our user's current longitude and latitude.",
|
||||
"Here's some code that does this:",
|
||||
"<code>if (navigator.geolocation) {</code>",
|
||||
"<code>  navigator.geolocation.getCurrentPosition(function(position) {</code>",
|
||||
"<code>    $(\"#data\").html(\"latitiude\" + position.coords.latitude + \"longitude\" + position.coords.longitude);</code>",
|
||||
"<code>  });</code>",
|
||||
"<code>}</code>"
|
||||
],
|
||||
"tests": [
|
||||
"assert(editor.match(/navigator\\.geolocation\\.getCurrentPosition/gi), 'You should make use of the <code>navigator.geolocation</code> to access the users current location.')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"fccss",
|
||||
" // Only change code below this line.",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
" // Only change code above this line.",
|
||||
"fcces",
|
||||
"<div id = \"data\">",
|
||||
" <h4>You are here:</h4>",
|
||||
" ",
|
||||
"</div>"
|
||||
],
|
||||
"challengeType": 0,
|
||||
"type": "waypoint"
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -1,522 +0,0 @@
|
||||
{
|
||||
"name": "JSON APIs and Ajax",
|
||||
"order": 0.0065,
|
||||
"challenges": [
|
||||
{
|
||||
"id": "bad87fed1348bd9aeca08826",
|
||||
"title": "Trigger on click Events with jQuery",
|
||||
"description": [
|
||||
"With jQuery we are able to get data from APIs via Ajax",
|
||||
"This data normally comes in the form of JSON",
|
||||
"Let's get the <code>Get Message</code> button to set the text of a div",
|
||||
"We will later use this to display the result of out API request",
|
||||
"<code>$(\"#getMessage\").on(\"click\", function(){</code>",
|
||||
"<code>  $(\".message\").html(\"Here is the message\");</code>",
|
||||
"<code>});</code>"
|
||||
],
|
||||
"tests": [
|
||||
"assert(editor.match(/\\$\\(\\s?\\\"\\#getMessage\\\"\\s?\\)\\.on\\s?\\(\\s?\\\"click\\\"\\,\\s?function\\s?\\(\\)\\s?\\{/gi), 'You should have bound the click event to the getMessage button')",
|
||||
"assert(editor.match(/\\$\\(\\s?\\\"\\.message\\\"\\s?\\)\\.html\\(\\s?\\\"Here\\sis\\sthe\\smessage\\\"\\s?\\);/gi), 'You should set te value of the #message box to be the message given in the description')",
|
||||
"assert(editor.match(/\\}\\);/gi) && editor.match(/\\}\\);/gi).length >= 2, 'Make sure that you close off all of your functions')"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"fccss",
|
||||
" $(document).ready(function() {",
|
||||
" ",
|
||||
" });",
|
||||
"fcces",
|
||||
"",
|
||||
"<!-- You shouldn't need to modify code below this line -->",
|
||||
"",
|
||||
"<div class=\"container-fluid\">",
|
||||
" <div class = \"row text-center\">",
|
||||
" <h2>Cat Photo Finder</h2>",
|
||||
" </div>",
|
||||
" <br/>",
|
||||
" <div class = \"row text-center\">",
|
||||
" <div class = \"col-xs-12 well Message\">",
|
||||
" The message will go here",
|
||||
" </div>",
|
||||
" </div>",
|
||||
" <br/>",
|
||||
" <div class = \"row text-center\">",
|
||||
" <div class = \"col-xs-12\">",
|
||||
" <button id = \"getMessage\" class = \"btn btn-primary\">",
|
||||
" Get Message",
|
||||
" </button>",
|
||||
" </div>",
|
||||
" </div>",
|
||||
"</div>"
|
||||
],
|
||||
"challengeType": 0,
|
||||
"type": "waypoint"
|
||||
},
|
||||
{
|
||||
"id": "bad87fee1348bd9aebc08726",
|
||||
"title": "Learn JSON Syntax",
|
||||
"description": [
|
||||
"JSON stands for \"JavaScript Object Notation\". It\"s how you create objects in JavaScript.",
|
||||
"JSON is a series of \"key-value pairs\". Everything on the left of the colon (<code>:</code>) is the \"key\" you use to unlock the \"value\" on the right of the colon."
|
||||
],
|
||||
"tests": [
|
||||
"assert(typeof data != \"undefined\", \"Whoops! It looks like you deleted the <code>data</code> variable!\");",
|
||||
"assert(typeof getAnId != \"undefined\", \"Whoops! It looks like you deleted the <code>getAnId</code> function!\");",
|
||||
"assert(data[0]['id'] === getAnId(), \"The duntion getFirstId should return the id of the first element in the array\");"
|
||||
],
|
||||
"challengeSeed": [
|
||||
"fccss",
|
||||
"var data = [",
|
||||
" {",
|
||||
" \"id\": 0,",
|
||||
" \"imageLink\": \"http://rs611.pbsrc.com/albums/tt194/allypopper423/Funny-Cat-Green-Avacado.jpg~c200\",",
|
||||
" \"codeNames\": [",
|
||||
" \"Juggernaut\",",
|
||||
" \"Mrs. Wallace\",",
|
||||
" \"Buttercup\"",
|
||||
" ]",
|
||||
" },",
|
||||
" {",
|
||||
" \"id\": 1,",
|
||||
" \"imageLink\": \"http://cdn.grumpycats.com/wp-content/uploads/2012/09/GC-Gravatar-copy.png\",",
|
||||
" \"codeNames\": [",
|
||||
" \"Oscar\",",
|
||||
" \"Scrooge\",",
|
||||
" \"Tyrion\"",
|
||||
" ]",
|
||||
" },",
|
||||
" {",
|
||||
" \"id\": 2,",
|
||||
" \"imageLink\": \"http://www.kittenspet.com/wp-content/uploads/2012/08/cat_with_funny_face_3-200x200.jpg\",",
|
||||
" \"codeNames\": [",
|
||||
" \"The Doctor\",",
|
||||
" \"Loki\",",
|
||||
" \"Joker\"",
|
||||
" ]",
|
||||
" }",
|
||||
"]",
|
||||
"function getAnId(){",
|
||||
" return();",
|
||||
"}",
|
||||
"fcces"
|
||||
],
|
||||
"challengeType": 0,
|
||||
"type": "waypoint"
|
||||
},
|
||||
{
|
||||
"id": "bad87fee1348bd9aeca08826",
|
||||
"title": "Displaying JSON data in HTML",
|
||||
"description": [
|
||||
"JSON stands for \"JavaScript Object Notation\". It\"s how you create objects in JavaScript.",
|
||||
"JSON is a series of \"key-value pairs\". Everything on the left of the colon (<code>:</code>) is the \"key\" you use to unlock the \"value\" on the right of the colon."
|
||||
],
|
||||
"tests": [
|
||||
|
||||
],
|
||||
"challengeSeed": [
|
||||
"fccss",
|
||||
" $(document).ready(function() {",
|
||||
" $(\"#getMessage\").on(\"click\", function(){",
|
||||
" $(\".message\").html(\"Here is the message\");",
|
||||
" });",
|
||||
" });",
|
||||
"fcces",
|
||||
"",
|
||||
"<!-- You shouldn't need to modify code below this line -->",
|
||||
"",
|
||||
"<div class=\"container-fluid\">",
|
||||
" <div class = \"row text-center\">",
|
||||
" <h2>Cat Photo Finder</h2>",
|
||||
" </div>",
|
||||
" <br/>",
|
||||
" <div class = \"row text-center\">",
|
||||
" <div class = \"col-xs-12 well Message\">",
|
||||
" The message will go here",
|
||||
" </div>",
|
||||
" </div>",
|
||||
" <br/>",
|
||||
" <div class = \"row text-center\">",
|
||||
" <div class = \"col-xs-12\">",
|
||||
" <button id = \"getMessage\" class = \"btn btn-primary\">",
|
||||
" Get Message",
|
||||
" </button>",
|
||||
" </div>",
|
||||
" </div>",
|
||||
"</div>"
|
||||
],
|
||||
"challengeType": 0,
|
||||
"type": "waypoint"
|
||||
},
|
||||
|
||||
{
|
||||
"id": "bad84fee1348bd9aecc48826",
|
||||
"title": "Read Data from an Element Using jQuery",
|
||||
"dashedName": "waypoint-read-data-from-an-element-using-jquery",
|
||||
"description": [
|
||||
"Let's make everything roll with <code>rollOut</code>."
|
||||
],
|
||||
"tests": [
|
||||
|
||||
],
|
||||
"challengeSeed": [
|
||||
"fccss",
|
||||
" $(document).ready(function() {",
|
||||
" $(\"button\").on(\"click\", function() {",
|
||||
" $(\"#click-me\").addClass(\"animated shake\");",
|
||||
" });",
|
||||
" });",
|
||||
"fcces",
|
||||
"",
|
||||
"<!-- You shouldn't need to modify code below this line -->",
|
||||
"",
|
||||
"<div class=\"container-fluid\">",
|
||||
" <div class=\"row\">",
|
||||
" <div class=\"col-xs-2\">",
|
||||
" <input type=\"checkbox\" id=\"check-me\">",
|
||||
" </div>",
|
||||
" <div class=\"col-xs-10\">",
|
||||
" <p>#check-me</p>",
|
||||
" </div>",
|
||||
" <button class=\"btn btn-block btn-primary\">#click-me</button>",
|
||||
" <span>Is the checkbox checked?</span>",
|
||||
" <span id=\"checked-state\"></span>",
|
||||
"</div>"
|
||||
],
|
||||
"challengeType": 0,
|
||||
"type": "waypoint"
|
||||
},
|
||||
|
||||
{
|
||||
"id": "bad84fee1348bd9aecc38826",
|
||||
"title": "Read Data from an Element Using jQuery",
|
||||
"dashedName": "waypoint-read-data-from-an-element-using-jquery",
|
||||
"description": [
|
||||
"Let's make everything roll with <code>rollOut</code>."
|
||||
],
|
||||
"tests": [
|
||||
|
||||
],
|
||||
"challengeSeed": [
|
||||
"fccss",
|
||||
" $(document).ready(function() {",
|
||||
" $(\"button\").on(\"click\", function() {",
|
||||
" $(\"#click-me\").addClass(\"animated shake\");",
|
||||
" $(\"#checked-state\").text(\"happy text\");",
|
||||
" });",
|
||||
" });",
|
||||
"fcces",
|
||||
"",
|
||||
"<!-- You shouldn't need to modify code below this line -->",
|
||||
"",
|
||||
"<div class=\"container-fluid\">",
|
||||
" <div class=\"row\">",
|
||||
" <div class=\"col-xs-2\">",
|
||||
" <input type=\"checkbox\" id=\"check-me\">",
|
||||
" </div>",
|
||||
" <div class=\"col-xs-10\">",
|
||||
" <p>#check-me</p>",
|
||||
" </div>",
|
||||
" <button class=\"btn btn-block btn-primary\">#click-me</button>",
|
||||
" <span>Is the checkbox checked?</span>",
|
||||
" <span id=\"checked-state\"></span>",
|
||||
"</div>"
|
||||
],
|
||||
"challengeType": 0,
|
||||
"type": "waypoint"
|
||||
},
|
||||
|
||||
{
|
||||
"id": "bad84fee1348bd9aecc28826",
|
||||
"title": "Read Data from an Element Using jQuery",
|
||||
"dashedName": "waypoint-read-data-from-an-element-using-jquery",
|
||||
"description": [
|
||||
"Let's make everything roll with <code>rollOut</code>."
|
||||
],
|
||||
"tests": [
|
||||
|
||||
],
|
||||
"challengeSeed": [
|
||||
"fccss",
|
||||
" $(document).ready(function() {",
|
||||
" $(\"button\").on(\"click\", function() {",
|
||||
" $(\"#click-me\").addClass(\"animated shake\");",
|
||||
" $(\"#checked-state\").text($(\"#check-me\").prop(\"checked\"));",
|
||||
" });",
|
||||
" });",
|
||||
"fcces",
|
||||
"",
|
||||
"<!-- You shouldn't need to modify code below this line -->",
|
||||
"",
|
||||
"<div class=\"container-fluid\">",
|
||||
" <div class=\"row\">",
|
||||
" <div class=\"col-xs-2\">",
|
||||
" <input type=\"checkbox\" id=\"check-me\">",
|
||||
" </div>",
|
||||
" <div class=\"col-xs-10\">",
|
||||
" <p>#check-me</p>",
|
||||
" </div>",
|
||||
" <button class=\"btn btn-block btn-primary\">#click-me</button>",
|
||||
" <span>Is the checkbox checked?</span>",
|
||||
" <span id=\"checked-state\"></span>",
|
||||
"</div>"
|
||||
],
|
||||
"challengeType": 0,
|
||||
"type": "waypoint"
|
||||
},
|
||||
|
||||
{
|
||||
"id": "bad84fee1348bd9aecc18826",
|
||||
"title": "Read Data from an Element Using jQuery",
|
||||
"dashedName": "waypoint-read-data-from-an-element-using-jquery",
|
||||
"description": [
|
||||
|
||||
],
|
||||
"tests": [
|
||||
|
||||
],
|
||||
"challengeSeed": [
|
||||
"fccss",
|
||||
" $(document).ready(function() {",
|
||||
" $(\"button\").on(\"click\", function() {",
|
||||
" $(\"#click-me\").addClass(\"animated shake\");",
|
||||
" $(\"#checked-state\").text($(\"#check-me\").prop(\"checked\"));",
|
||||
" });",
|
||||
" });",
|
||||
"fcces",
|
||||
"",
|
||||
"<!-- You shouldn't need to modify code below this line -->",
|
||||
"",
|
||||
"<div class=\"container-fluid\">",
|
||||
" <div class=\"row\">",
|
||||
" <div class=\"col-xs-2\">",
|
||||
" <input type=\"checkbox\" id=\"check-me\">",
|
||||
" </div>",
|
||||
" <div class=\"col-xs-10\">",
|
||||
" <p>#check-me</p>",
|
||||
" </div>",
|
||||
" <button class=\"btn btn-block btn-primary\">#click-me</button>",
|
||||
" <span>Is the checkbox checked?</span>",
|
||||
" <span id=\"checked-state\"></span>",
|
||||
"</div>"
|
||||
],
|
||||
"challengeType": 0,
|
||||
"type": "waypoint"
|
||||
},
|
||||
|
||||
{
|
||||
"id": "bad87fee1348bd9aecc08826",
|
||||
"title": "Trigger onHover Events with jQuery",
|
||||
"dashedName": "waypoint-trigger-onhover-events-with-jquery",
|
||||
"description": [
|
||||
|
||||
],
|
||||
"tests": [
|
||||
|
||||
],
|
||||
"challengeSeed": [
|
||||
|
||||
],
|
||||
"challengeType": 0,
|
||||
"type": "waypoint"
|
||||
},
|
||||
|
||||
{
|
||||
"id": "bad87fee1348bd9aebc08826",
|
||||
"title": "Get Data from an URL Using jQuery",
|
||||
"dashedName": "waypoint-get-data-from-a-url-using-jquery",
|
||||
"description": [
|
||||
|
||||
],
|
||||
"tests": [
|
||||
|
||||
],
|
||||
"challengeSeed": [
|
||||
"fccss",
|
||||
"",
|
||||
" $(document).ready(function() {",
|
||||
"",
|
||||
" $(\"#cat-button\").on(\"click\", function() {",
|
||||
" $.getJSON(\"/json/cats.json\", function( json ) {",
|
||||
"",
|
||||
" });",
|
||||
" });",
|
||||
"",
|
||||
" });",
|
||||
"fcces",
|
||||
"<div class=\"container-fluid\">",
|
||||
" <button id=\"cat-button\" class=\"btn btn-primary btn-block btn-lg\">#cat-button</button>",
|
||||
" <div class=\"jumbotron\" id=\"output\">",
|
||||
" </div>",
|
||||
"</div>"
|
||||
],
|
||||
"challengeType": 0,
|
||||
"type": "waypoint"
|
||||
},
|
||||
|
||||
{
|
||||
"id": "bad87fee1348bd9ae9c08826",
|
||||
"title": "Loop through JSON Data Using jQuery",
|
||||
"dashedName": "waypoint-loop-through-json-data-using-jquery",
|
||||
"description": [
|
||||
|
||||
],
|
||||
"tests": [
|
||||
|
||||
],
|
||||
"challengeSeed": [
|
||||
"fccss",
|
||||
"",
|
||||
" $(document).ready(function() {",
|
||||
"",
|
||||
" $(\"#cat-button\").on(\"click\", function() {",
|
||||
" $.getJSON(\"/json/cats.json\", function( json ) {",
|
||||
"",
|
||||
" });",
|
||||
" });",
|
||||
"",
|
||||
" });",
|
||||
"fcces",
|
||||
"<div class=\"container-fluid\">",
|
||||
" <button id=\"cat-button\" class=\"btn btn-primary btn-block btn-lg\">#cat-button</button>",
|
||||
" <div class=\"jumbotron\" id=\"output\">",
|
||||
" </div>",
|
||||
"</div>"
|
||||
],
|
||||
"challengeType": 0,
|
||||
"type": "waypoint"
|
||||
},
|
||||
|
||||
{
|
||||
"id": "bad88fee1348bd9ae8c08726",
|
||||
"title": "Wire AJAX Call into a jQuery Click Event",
|
||||
"dashedName": "waypoint-wire-ajax-call-into-a-jquery-click-event",
|
||||
"description": [
|
||||
"<img src=\"https://www.evernote.com/l/AjmAQ5BxGrFGRrWl_j2eSpGZMfrunfse89gB/image.png\">"
|
||||
],
|
||||
"tests": [
|
||||
|
||||
],
|
||||
"challengeSeed": [
|
||||
"fccss",
|
||||
" var random = function() { return Math.floor(Math.random() * 3) }",
|
||||
" $(document).ready(function() {",
|
||||
"",
|
||||
" $(\"#cat-button\").on(\"click\", function() {",
|
||||
" $.getJSON(\"/json/cats.json\", function( json ) {",
|
||||
"",
|
||||
" });",
|
||||
" });",
|
||||
"",
|
||||
" });",
|
||||
"fcces",
|
||||
"<div class=\"container-fluid\">",
|
||||
" <button id=\"cat-button\" class=\"btn btn-primary btn-block btn-lg\">#cat-button</button>",
|
||||
" <div class=\"jumbotron\" id=\"output\">",
|
||||
" </div>",
|
||||
"</div>"
|
||||
],
|
||||
"challengeType": 0,
|
||||
"type": "waypoint"
|
||||
},
|
||||
|
||||
{
|
||||
"id": "bad88fee1348bd9ae8c08626",
|
||||
"title": "Wire AJAX Call into a jQuery Click Event",
|
||||
"dashedName": "waypoint-wire-ajax-call-into-a-jquery-click-event",
|
||||
"description": [
|
||||
"<img src=\"https://www.evernote.com/l/AjmAQ5BxGrFGRrWl_j2eSpGZMfrunfse89gB/image.png\">"
|
||||
],
|
||||
"tests": [
|
||||
|
||||
],
|
||||
"challengeSeed": [
|
||||
"fccss",
|
||||
" var random = function() { return Math.floor(Math.random() * 3) }",
|
||||
" $(document).ready(function() {",
|
||||
"",
|
||||
" $(\"#cat-button\").on(\"click\", function() {",
|
||||
" $.getJSON(\"/json/cats.json\", function( json ) {",
|
||||
" var kitten = json[random()];",
|
||||
" });",
|
||||
" });",
|
||||
"",
|
||||
" });",
|
||||
"fcces",
|
||||
"<div class=\"container-fluid\">",
|
||||
" <button id=\"cat-button\" class=\"btn btn-primary btn-block btn-lg\">#cat-button</button>",
|
||||
" <div class=\"jumbotron\" id=\"output\">",
|
||||
" </div>",
|
||||
"</div>"
|
||||
],
|
||||
"challengeType": 0,
|
||||
"type": "waypoint"
|
||||
},
|
||||
|
||||
{
|
||||
"id": "bad88fee1348bd9ae8c08526",
|
||||
"title": "Wire AJAX Call into a jQuery Click Event",
|
||||
"dashedName": "waypoint-wire-ajax-call-into-a-jquery-click-event",
|
||||
"description": [
|
||||
"<img src=\"https://www.evernote.com/l/AjmAQ5BxGrFGRrWl_j2eSpGZMfrunfse89gB/image.png\">"
|
||||
],
|
||||
"tests": [
|
||||
|
||||
],
|
||||
"challengeSeed": [
|
||||
"fccss",
|
||||
" var random = function() { return Math.floor(Math.random() * 3) }",
|
||||
" $(document).ready(function() {",
|
||||
"",
|
||||
" $(\"#cat-button\").on(\"click\", function() {",
|
||||
" $.getJSON(\"/json/cats.json\", function( json ) {",
|
||||
" var kitten = json[random()];",
|
||||
" $(\"<img src=\"\" + kitten.imageLink + \"\">\").appendTo(\"#output\");",
|
||||
" });",
|
||||
" });",
|
||||
"",
|
||||
" });",
|
||||
"<div class=\"container-fluid\">",
|
||||
" <button id=\"cat-button\" class=\"btn btn-primary btn-block btn-lg\">#cat-button</button>",
|
||||
" <div class=\"jumbotron\" id=\"output\">",
|
||||
" </div>",
|
||||
"</div>"
|
||||
],
|
||||
"challengeType": 0,
|
||||
"type": "waypoint"
|
||||
},
|
||||
|
||||
{
|
||||
"id": "bad88fee1348bd9ae8c08426",
|
||||
"title": "Wire AJAX Call into a jQuery Click Event",
|
||||
"dashedName": "waypoint-wire-ajax-call-into-a-jquery-click-event",
|
||||
"description": [
|
||||
"<img src=\"https://www.evernote.com/l/AjmAQ5BxGrFGRrWl_j2eSpGZMfrunfse89gB/image.png\">"
|
||||
],
|
||||
"tests": [
|
||||
|
||||
],
|
||||
"challengeSeed": [
|
||||
"fccss",
|
||||
" var random = function() { return Math.floor(Math.random() * 3) }",
|
||||
" $(document).ready(function() {",
|
||||
"",
|
||||
" $(\"#cat-button\").on(\"click\", function() {",
|
||||
" $.getJSON(\"/json/cats.json\", function( json ) {",
|
||||
" var kitten = json[random()];",
|
||||
" $(\"<img src=\"\" + kitten.imageLink + \"\">\").appendTo(\"#output\");",
|
||||
" $(\"<h3>Code name: \" + kitten.codeNames[random()] + \"</h3>\").appendTo(\"#output\");",
|
||||
" });",
|
||||
" });",
|
||||
"",
|
||||
" });",
|
||||
"fcces",
|
||||
"<div class=\"container-fluid\">",
|
||||
" <button id=\"cat-button\" class=\"btn btn-primary btn-block btn-lg\">#cat-button</button>",
|
||||
" <div class=\"jumbotron\" id=\"output\">",
|
||||
" </div>",
|
||||
"</div>"
|
||||
],
|
||||
"challengeType": 0,
|
||||
"type": "waypoint"
|
||||
}
|
||||
]
|
||||
}
|
||||
Reference in New Issue
Block a user