finish editing ajax challenges
This commit is contained in:
Quincy Larson
@ -42,11 +42,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();"
|
||||
@ -70,10 +70,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);}"
|
||||
],
|
||||
|
||||
@ -7,11 +7,11 @@
|
||||
"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.",
|
||||
"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 Click event inside of our <code>$(document).ready()</code> function by adding this 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>"
|
||||
@ -55,9 +55,9 @@
|
||||
"id": "bc000000000000000000001",
|
||||
"title": "Change Text with Click Events",
|
||||
"description": [
|
||||
"When our Click Event happens, we can use Ajax to update an HTML element.",
|
||||
"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:",
|
||||
"We can do this by adding the following code within our click event:",
|
||||
"<code>  $(\".message\").html(\"Here is the message\");</code>"
|
||||
],
|
||||
"tests": [
|
||||
@ -75,6 +75,7 @@
|
||||
"fcces",
|
||||
"",
|
||||
"",
|
||||
|
||||
"<div class=\"container-fluid\">",
|
||||
" <div class = \"row text-center\">",
|
||||
" <h2>Cat Photo Finder</h2>",
|
||||
@ -100,15 +101,17 @@
|
||||
"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>.",
|
||||
"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:",
|
||||
"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>"
|
||||
"<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.')",
|
||||
@ -157,9 +160,10 @@
|
||||
"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.",
|
||||
"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>",
|
||||
@ -170,30 +174,32 @@
|
||||
"<code>});</code>"
|
||||
],
|
||||
"tests": [
|
||||
"assert(/json\\.map/gi, 'The message box should have something in it.')"
|
||||
"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 ) {",
|
||||
" ",
|
||||
" var html = \"\";",
|
||||
" ",
|
||||
" // Only change code below this line.",
|
||||
" ",
|
||||
" ",
|
||||
" ",
|
||||
" ",
|
||||
" // Only change code above this line.",
|
||||
" ",
|
||||
" $(\".message\").html(html);",
|
||||
" ",
|
||||
" });",
|
||||
" });",
|
||||
" ",
|
||||
" });",
|
||||
" $(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\">",
|
||||
@ -234,39 +240,36 @@
|
||||
],
|
||||
"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){",
|
||||
" $(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){",
|
||||
" for (var key in val) {",
|
||||
"",
|
||||
" // Only change code below this line.",
|
||||
" ",
|
||||
" ",
|
||||
" ",
|
||||
" // Only change code above this line.",
|
||||
" // Only change code below this line.",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
" // Only change code above this line.",
|
||||
"",
|
||||
" }",
|
||||
" ",
|
||||
"",
|
||||
" html = html + \"</div>\"",
|
||||
"",
|
||||
" });",
|
||||
" ",
|
||||
" $(\".message\").html(html);",
|
||||
" ",
|
||||
" });",
|
||||
" });",
|
||||
" ",
|
||||
" });",
|
||||
"",
|
||||
" $(\".message\").html(html);",
|
||||
"",
|
||||
" });",
|
||||
" });",
|
||||
" });",
|
||||
"fcces",
|
||||
"",
|
||||
"<div class=\"container-fluid\">",
|
||||
@ -285,8 +288,7 @@
|
||||
" </button>",
|
||||
" </div>",
|
||||
" </div>",
|
||||
"</div>",
|
||||
""
|
||||
"</div>"
|
||||
],
|
||||
"challengeType": 0,
|
||||
"type": "waypoint"
|
||||
@ -307,26 +309,24 @@
|
||||
],
|
||||
"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){",
|
||||
" $(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.",
|
||||
" // Only change code below this line.",
|
||||
"",
|
||||
"",
|
||||
"",
|
||||
" // Only change code above this line.",
|
||||
"",
|
||||
" for(var key in val){",
|
||||
"",
|
||||
@ -334,17 +334,15 @@
|
||||
"",
|
||||
" }",
|
||||
"",
|
||||
" ",
|
||||
" html = html + \"</div>\"",
|
||||
"",
|
||||
" });",
|
||||
" ",
|
||||
" $(\".message\").html(html);",
|
||||
" ",
|
||||
" });",
|
||||
" });",
|
||||
" ",
|
||||
" });",
|
||||
"",
|
||||
" $(\".message\").html(html);",
|
||||
"",
|
||||
" });",
|
||||
" });",
|
||||
" });",
|
||||
"fcces",
|
||||
"",
|
||||
"",
|
||||
@ -379,7 +377,6 @@
|
||||
"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>"
|
||||
|
||||
Reference in New Issue
Block a user