408 lines
17 KiB
JSON
408 lines
17 KiB
JSON
{
|
||
"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 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 Click event 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 - 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 using JSON whenever you create a JavaScript objects. JSON is just a bunch of 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>"
|
||
],
|
||
"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 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.",
|
||
"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(/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 ) {",
|
||
" ",
|
||
" var html = \"\";",
|
||
" ",
|
||
" // 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 = \"\";",
|
||
" ",
|
||
" //Add you code to modify the data here. It should add it to the html sting for use in the view",
|
||
" ",
|
||
" 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 = \"\";",
|
||
" ",
|
||
" //Add you code to modify the data here. It should add it to the html sting for use in the view",
|
||
" ",
|
||
" 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>    // Do something in here with the coordinates</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"
|
||
}
|
||
]
|
||
}
|