Foundation fo AJAX stuff is done. Going to move on to process fetched data and creating a UI generating function for each individual object
benmcmahon100
parent
1ada40ead5
commit
e2459fa869
|
|
@ -0,0 +1,116 @@
|
|||
{
|
||||
"name": "JSON APIs and Ajax",
|
||||
"order": 0.0065,
|
||||
"challenges": [
|
||||
{
|
||||
"id": "bad87fed1348bd9aeca08826",
|
||||
"title": "Trigger on click Events with jQuery",
|
||||
"difficulty": 3.19,
|
||||
"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*?\\(\\s*?(?:'|\")\\#getMessage(?:'|\")\\s*?\\)\\s*?\\.on\\s*?\\(\\s*?(?:'|\")click(?:'|\")\\s*?\\,\\s*?function\\s*?\\(\\s*?\\)\\s*?\\{/gi), 'You should have bound the click event to the getMessage button')",
|
||||
"assert(editor.match(/\\$\\s*?\\(\\s*?(?:'|\")\\.message(?:'|\")\\s*?\\)\\s*?\\.html\\s*?\\(\\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(/\\n*?\\s*?\\}\\n*?\\s*?\\);/gi) && editor.match(/\\n*?\\s*?\\}\\);/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": "bad87fee1348bd9aebc08826",
|
||||
"title": "Get Data from an URL Using jQuery",
|
||||
"dashedName": "waypoint-get-data-from-a-url-using-jquery",
|
||||
"difficulty": 3.21,
|
||||
"description": [
|
||||
"",
|
||||
"We are now going to request data from an external source. (a file on FCC for the purposes of this exercise) The request will load in the data an run the code in the function we provide the data to which is known as the callback.",
|
||||
"<code>$(\"#getMessage\").on(\"click\", function() {",
|
||||
"  $.getJSON(\"/json/cats.json?callback=?\", function( json ) {",
|
||||
"    //Code to run when request is complete",
|
||||
"    $(\".message\").html(JSON.stringify(json))",
|
||||
"  });",
|
||||
"});</code>",
|
||||
"Let's make it so that the data sent from the request is appended to the .message div",
|
||||
""
|
||||
],
|
||||
"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(){",
|
||||
" $(\".message\").html(\"Make the result of the getJSON request appear here\")",
|
||||
" });",
|
||||
" ",
|
||||
" });",
|
||||
"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"
|
||||
}
|
||||
]
|
||||
}
|
||||
Loading…
Reference in New Issue