"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>.')"
"When our Click Event happens, we can use Ajax to update an HTML element.",
"Let's make it so that when a user clicks our \"Get Message\" button, we change the text of our <code>div</code> 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), 'You should set te value of the #message box to be the message given in the description.')"
" <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 - Application Interfaces - come into play.",
"Most modern APIs transfer data in a format called JSON. JSON stands for JavaScript Object Notation.",
"You've already been JSON whenever you've created JavaScript objects. JSON is just a bunch of object properties and their current values, sandwiched between a <code>{</code> and a <code>}</code>. You may hear these referred to as \"key-value pairs\".",
"Let's get the JSON from Free Code Camp's Cat API. Here's the code you can put in your Click event to do this:",
"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.')"
"Now that we are getting data from a JSON API, let's display it in HTML.",
"We can use the <code>.map()</code> method to loop through our data and modify HTML elements.",
"First we'll declare an HTML variable. Then we'll loop through our JSON, adding more HTML to that variable. When the loop is finished, we'll render it.",
"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.",
"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.",
"assert(editor.match(/navigator\\.geolocation\\.getCurrentPosition/gi), 'You should make use of the <code>navigator.geolocation</code> to access the users current location.')"
