add new challenges
This commit is contained in:
Quincy Larson
committed by
Berkeley Martinez
Berkeley Martinez
parent
426ff2175f
commit
6f9fab3043
@ -0,0 +1,108 @@
|
||||
{
|
||||
"name": "Claim Your Data Visualization Certificate",
|
||||
"order": 13,
|
||||
"time": "5 minutes",
|
||||
"challenges": [
|
||||
{
|
||||
"id": "587d7fa5367417b2b2512bbe",
|
||||
"title": "Claim Your Data Visualization Certificate",
|
||||
"description": [
|
||||
[
|
||||
"//i.imgur.com/k8btNUB.jpg",
|
||||
"An image of our Data Visualization Certificate",
|
||||
"This challenge will give you your verified Data Visualization Certificate. Before we issue your certificate, we must verify that you have completed all of our basic and intermediate algorithm scripting challenges, and all our basic, intermediate, and advanced front end development projects. You must also accept our Academic Honesty Pledge. Click the button below to start this process.",
|
||||
""
|
||||
],
|
||||
[
|
||||
"//i.imgur.com/uLPsUko.jpg",
|
||||
"The definition of plagiarism: Plagiarism (noun) - copying someone else’s work and presenting it as your own without crediting them",
|
||||
"By clicking below, you pledge that all of your submitted code A) is code you or your pair personally wrote, or B) comes from open source libraries like jQuery, or C) has been clearly attributed to its original authors. You also give us permission to audit your challenge solutions and revoke your certificate if we discover evidence of plagiarism.",
|
||||
"#"
|
||||
],
|
||||
[
|
||||
"//i.imgur.com/UedoV2G.jpg",
|
||||
"An image of the text \"Front End Development Certificate requirements\"",
|
||||
"Let's confirm that you have completed all of our basic and intermediate algorithm scripting challenges, and all our basic, intermediate, and advanced front end development projects. Click the button below to verify this.",
|
||||
"#"
|
||||
],
|
||||
[
|
||||
"//i.imgur.com/Q5Za9U6.jpg",
|
||||
"An image of the word \"Congratulations\"",
|
||||
"Congratulations! We've added your Data Visualization Certificate to your portfolio page. Unless you choose to hide your solutions, this certificate will remain publicly visible and verifiable.",
|
||||
""
|
||||
]
|
||||
],
|
||||
"challengeSeed": [
|
||||
{
|
||||
"properties": [
|
||||
"isHonest",
|
||||
"isFrontEndCert"
|
||||
],
|
||||
"apis": [
|
||||
"/certificate/honest",
|
||||
"/certificate/verify/front-end"
|
||||
],
|
||||
"stepIndex": [
|
||||
1,
|
||||
2
|
||||
]
|
||||
}
|
||||
],
|
||||
"tests": [
|
||||
{
|
||||
"id": "587d7fa6367417b2b2512bc0",
|
||||
"title": "Visualize Data with a Treemap Diagram"
|
||||
},
|
||||
{
|
||||
"id": "587d7fa6367417b2b2512bbf",
|
||||
"title": "Visualize Data with a Choropleth Map"
|
||||
},
|
||||
{
|
||||
"id": "bd7188d8c242eddfaeb5bd13",
|
||||
"title": "Visualize Data with a Heat Map"
|
||||
},
|
||||
{
|
||||
"id": "bd7178d8c242eddfaeb5bd13",
|
||||
"title": "Visualize Data with a Scatterplot Graph"
|
||||
},
|
||||
{
|
||||
"id": "bd7168d8c242eddfaeb5bd13",
|
||||
"title": "Visualize Data with a Bar Chart"
|
||||
}
|
||||
],
|
||||
"type": "Waypoint",
|
||||
"challengeType": 7,
|
||||
"translations": {
|
||||
"es": {
|
||||
"title": "Reclama tu certificado de Desarrollo de interfaces",
|
||||
"description": [
|
||||
[
|
||||
"//i.imgur.com/k8btNUB.jpg",
|
||||
"Una imagen que muestra nuestro certificado de Desarrollo de interfaces",
|
||||
"Este desafío te otorga tu certificado autenticado de Desarrollo de interfaces. Antes de que podamos emitir tu certificado, debemos verificar que has completado todos los desafíos básicos e intermedios de diseño de algoritmos, y todos los proyectos básicos e intermedios de desarrollo de interfaces. También debes aceptar nuestro Juramento de honestidad académica. Pulsa el botón siguiente para iniciar este proceso.",
|
||||
""
|
||||
],
|
||||
[
|
||||
"//i.imgur.com/HArFfMN.jpg",
|
||||
"Plagio (nombre): acción y efecto de plagiar. Plagiar (verbo) - copiar en lo sustancial obras ajenas, dándolas como propias.",
|
||||
"Al pulsar el botón siguiente, juras que todo el código en tus soluciones a los desafíos A) es código que tú o tu compañero escribieron personalmente, o B) proviene de librerías de código abierto como jQuery, o C) ha sido claramente atribuido a sus autores originales. También nos otorgas el permiso para auditar tus soluciones a los desafíos y revocar tu certificado si encontramos evidencia de plagio.",
|
||||
"#"
|
||||
],
|
||||
[
|
||||
"//i.imgur.com/14F2Van.jpg",
|
||||
"Una imagen del texto \"Front End Development Certificate requirements\"",
|
||||
"Confirmemos que has completado todos nuestros desafíos básicos e intermedios de diseño de algoritmos, y todos nuestros proyectos básicos e intermedios de desarrollo de interfaces. Pulsa el botón siguiente para hacer la verificación.",
|
||||
"#"
|
||||
],
|
||||
[
|
||||
"//i.imgur.com/16SIhHO.jpg",
|
||||
"Una imagen de la palabra \"Congratulations\"",
|
||||
"¡Felicitaciones! Hemos agregado tu certificado de Desarrollo de interfaces a tu portafolio. A menos que elijas no mostrar tus soluciones, este certificado será públicamente visible y verificable.",
|
||||
""
|
||||
]
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -0,0 +1,134 @@
|
||||
{
|
||||
"name": "Data Visualization Projects",
|
||||
"order": 3,
|
||||
"time": "150 hours",
|
||||
"helpRoom": "Help",
|
||||
"challenges": [
|
||||
{
|
||||
"id": "bd7168d8c242eddfaeb5bd13",
|
||||
"title": "Visualize Data with a Bar Chart",
|
||||
"description": [
|
||||
"Fulfill the user stories by getting all of the tests to pass. Use whichever libraries you need. Give it your own personal style.",
|
||||
"Here's a <a href='http://codepen.io/freeCodeCamp/full/GrZVaM' target='_blank'>working example</a>. Try not to look at its code.",
|
||||
"You can build your project by forking <a href='http://codepen.io/FCC_test_suites/pen/JbgXab' target='_blank'>this CodePen pen</a>. Or you can use this CDN link to run the tests in any environment you like: <code>https://gitcdn.link/repo/no-stack-dub-sack/testable-projects-fcc/master/build/bundle.js</code>",
|
||||
"Once you're done, submit below the URL to your working project with all its tests passing.",
|
||||
"Remember to use the <a href='https://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask method if you get stuck."
|
||||
],
|
||||
"challengeSeed": [
|
||||
"G6iPE6W"
|
||||
],
|
||||
"tests": [],
|
||||
"isRequired": true,
|
||||
"releasedOn": "January 1, 2016",
|
||||
"type": "zipline",
|
||||
"challengeType": 3,
|
||||
"translations": {
|
||||
"es": {
|
||||
"title": "Visualiza datos utilizando un gráfico de barras",
|
||||
"description": []
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "bd7178d8c242eddfaeb5bd13",
|
||||
"title": "Visualize Data with a Scatterplot Graph",
|
||||
"description": [
|
||||
"Fulfill the user stories by getting all of the tests to pass. Use whichever libraries you need. Give it your own personal style.",
|
||||
"Here's a <a href='http://codepen.io/freeCodeCamp/full/bgpXyK' target='_blank'>working example</a>. Try not to look at its code.",
|
||||
"You can build your project by forking <a href='http://codepen.io/FCC_test_suites/pen/JbgXab' target='_blank'>this CodePen pen</a>. Or you can use this CDN link to run the tests in any environment you like: <code>https://gitcdn.link/repo/no-stack-dub-sack/testable-projects-fcc/master/build/bundle.js</code>",
|
||||
"Once you're done, submit below the URL to your working project with all its tests passing.",
|
||||
"Remember to use the <a href='https://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask method if you get stuck."
|
||||
],
|
||||
"challengeSeed": [
|
||||
"opubu3f"
|
||||
],
|
||||
"tests": [],
|
||||
"isRequired": true,
|
||||
"releasedOn": "January 1, 2016",
|
||||
"type": "zipline",
|
||||
"challengeType": 3,
|
||||
"translations": {
|
||||
"es": {
|
||||
"title": "Visualiza datos utilizando un gráfico de dispersión",
|
||||
"description": []
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "bd7188d8c242eddfaeb5bd13",
|
||||
"title": "Visualize Data with a Heat Map",
|
||||
"description": [
|
||||
"Fulfill the user stories by getting all of the tests to pass. Use whichever libraries you need. Give it your own personal style.",
|
||||
"Here's a <a href='http://codepen.io/freeCodeCamp/full/JEXgeY' target='_blank'>working example</a>. Try not to look at its code.",
|
||||
"You can build your project by forking <a href='http://codepen.io/FCC_test_suites/pen/JbgXab' target='_blank'>this CodePen pen</a>. Or you can use this CDN link to run the tests in any environment you like: <code>https://gitcdn.link/repo/no-stack-dub-sack/testable-projects-fcc/master/build/bundle.js</code>",
|
||||
"Once you're done, submit below the URL to your working project with all its tests passing.",
|
||||
"Remember to use the <a href='https://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask method if you get stuck."
|
||||
],
|
||||
"challengeSeed": [
|
||||
"s4XtjKa"
|
||||
],
|
||||
"tests": [],
|
||||
"isRequired": true,
|
||||
"releasedOn": "January 1, 2016",
|
||||
"type": "zipline",
|
||||
"challengeType": 3,
|
||||
"translations": {
|
||||
"es": {
|
||||
"title": "Visualiza datos utilizando un mapa de calor",
|
||||
"description": []
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "587d7fa6367417b2b2512bbf",
|
||||
"title": "Visualize Data with a Choropleth Map",
|
||||
"description": [
|
||||
"Fulfill the user stories by getting all of the tests to pass. Use whichever libraries you need. Give it your own personal style.",
|
||||
"Here's a <a href='http://codepen.io/freeCodeCamp/full/EZKqza' target='_blank'>working example</a>. Try not to look at its code.",
|
||||
"You can build your project by forking <a href='http://codepen.io/FCC_test_suites/pen/JbgXab' target='_blank'>this CodePen pen</a>. Or you can use this CDN link to run the tests in any environment you like: <code>https://gitcdn.link/repo/no-stack-dub-sack/testable-projects-fcc/master/build/bundle.js</code>",
|
||||
"Once you're done, submit below the URL to your working project with all its tests passing.",
|
||||
"Remember to use the <a href='https://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask method if you get stuck."
|
||||
],
|
||||
"challengeSeed": [
|
||||
"K3qqL7U"
|
||||
],
|
||||
"tests": [],
|
||||
"isRequired": true,
|
||||
"releasedOn": "January 15, 2017",
|
||||
"type": "zipline",
|
||||
"challengeType": 3,
|
||||
"translations": {
|
||||
"es": {
|
||||
"title": "",
|
||||
"description": []
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "587d7fa6367417b2b2512bc0",
|
||||
"title": "Visualize Data with a Treemap Diagram",
|
||||
"description": [
|
||||
"This isn't ready yet. Here's the issue: https://github.com/freeCodeCamp/CurriculumExpansion/issues/65",
|
||||
"Fulfill the user stories by getting all of the tests to pass. Use whichever libraries you need. Give it your own personal style.",
|
||||
"Here's a <a href='' target='_blank'>working example</a>. Try not to look at its code.",
|
||||
"You can build your project by forking <a href='http://codepen.io/FCC_test_suites/pen/JbgXab' target='_blank'>this CodePen pen</a>. Or you can use this CDN link to run the tests in any environment you like: <code>https://gitcdn.link/repo/no-stack-dub-sack/testable-projects-fcc/master/build/bundle.js</code>",
|
||||
"Once you're done, submit below the URL to your working project with all its tests passing.",
|
||||
"Remember to use the <a href='https://forum.freecodecamp.com/t/how-to-get-help-when-you-are-stuck/19514' target='_blank'>Read-Search-Ask method if you get stuck."
|
||||
],
|
||||
"challengeSeed": [
|
||||
""
|
||||
],
|
||||
"tests": [],
|
||||
"isRequired": true,
|
||||
"releasedOn": "January 15, 2017",
|
||||
"type": "zipline",
|
||||
"challengeType": 3,
|
||||
"translations": {
|
||||
"es": {
|
||||
"title": "",
|
||||
"description": []
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
2279
challenges/04-data-visualization/data-visualization-with-d3.json
Normal file
2279
challenges/04-data-visualization/data-visualization-with-d3.json
Normal file
File diff suppressed because it is too large
Load Diff
849
challenges/04-data-visualization/json-apis-and-ajax.json
Normal file
849
challenges/04-data-visualization/json-apis-and-ajax.json
Normal file
@ -0,0 +1,849 @@
|
||||
{
|
||||
"name": "JSON APIs and Ajax",
|
||||
"order": 2,
|
||||
"time": "2 hours",
|
||||
"helpRoom": "Help",
|
||||
"required": [
|
||||
{
|
||||
"link": "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css"
|
||||
}
|
||||
],
|
||||
"challenges": [
|
||||
{
|
||||
"id": "587d7fad367417b2b2512be0",
|
||||
"title": "Introduction to the JSON APIs and Ajax Challenges",
|
||||
"description": [
|
||||
[
|
||||
"http://imgs.xkcd.com/comics/api.png",
|
||||
"XKCD web comic with a user sitting at a computer reading the instructions for an API Guide for a site. The text below notes \"If you do things right, it can take people awhile to realize that your 'API documentation' is just instructions for how to look at your website.\"",
|
||||
"Similar to how User Interfaces help people use programs, Application Programming Interfaces (APIs) help programs interact with other programs. APIs are tools that computers use to communicate with one another, in part to send and receive data. You can use API functionality in your page once you understand how to make requests and process data from it. Programmers often use Ajax technologies when working with APIs.<br><br>The term Ajax originated as an acronym for Asynchronous JavaScript And XML. It refers to a group of technologies that make asynchronous requests to a server to transfer data, then load any returned data into the page. An asynchronous process has a couple key properties. The browser does not stop loading a page to wait for the server's response. Also, the browser inserts updated data into part of the page without having to refresh the entire page.<br><br>User experience benefits from asynchronous processes in several ways. Pages load faster since the browser isn't waiting for the server to respond in the middle of a page render. Requests and transfers happen in the background, without interrupting what the user is doing. When the browser receives new data, only the necessary area of the page refreshes. These qualities especially enhance the user experience for single page applications.<br><br>The data transferred between the browser and server is often in a format called JavaScript Object Notation (JSON). JSON resembles JavaScript object literal syntax, except that it's transferred as a string. Once received, it can be converted into an object and used in a script.<br><br>This section covers how to transfer and use data using Ajax technologies with a Free Code Camp API.",
|
||||
""
|
||||
]
|
||||
],
|
||||
"releasedOn": "",
|
||||
"challengeSeed": [],
|
||||
"tests": [],
|
||||
"type": "Waypoint",
|
||||
"challengeType": 7,
|
||||
"isRequired": false,
|
||||
"titleEs": "",
|
||||
"descriptionEs": [
|
||||
[]
|
||||
],
|
||||
"titleFr": "",
|
||||
"descriptionFr": [
|
||||
[]
|
||||
],
|
||||
"titleDe": "",
|
||||
"descriptionDe": [
|
||||
[]
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "587d7fad367417b2b2512be1",
|
||||
"title": "Trigger Click Events with JavaScript",
|
||||
"description": [
|
||||
"This section covers how to get data from APIs. APIs - or Application Programming Interfaces - are tools that computers use to communicate with one another.",
|
||||
"You'll learn how to update HTML with the data we get from these APIs using a technology called Ajax.",
|
||||
"You want your code to execute only once your page has finished loading. For that purpose, you can attach a JavaScript event to the document called <code>DOMContentLoaded</code>. Here's the code that does this:",
|
||||
"<blockquote>document.addEventListener('DOMContentLoaded',function() {<br><br>});</blockquote>",
|
||||
"Next, you can implement a click event handler that goes inside of the <code>DOMContentLoaded</code> function by adding the following code:",
|
||||
"<code>document.getElementById('getMessage').onclick=function(){};</code>",
|
||||
"<h4>Instructions</h4>",
|
||||
"Add a click event handler inside of the <code>DOMContentLoaded</code> function for the element with id of <code>getMessage</code>."
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<script>",
|
||||
" document.addEventListener('DOMContentLoaded',function(){",
|
||||
" // Add your code below this line",
|
||||
" ",
|
||||
" ",
|
||||
" // Add your code above this line",
|
||||
" });",
|
||||
"</script>",
|
||||
"<style>",
|
||||
" body {",
|
||||
" text-align: center;",
|
||||
" font-family: \"Helvetica\", sans-serif;",
|
||||
" }",
|
||||
" h1 {",
|
||||
" font-size: 2em;",
|
||||
" font-weight: bold;",
|
||||
" }",
|
||||
" .box {",
|
||||
" border-radius: 5px;",
|
||||
" background-color: #eee;",
|
||||
" padding: 20px 5px;",
|
||||
" }",
|
||||
" button {",
|
||||
" color: white;",
|
||||
" background-color: #4791d0;",
|
||||
" border-radius: 5px;",
|
||||
" border: 1px solid #4791d0;",
|
||||
" padding: 5px 10px 8px 10px;",
|
||||
" }",
|
||||
" button:hover {",
|
||||
" background-color: #0F5897;",
|
||||
" border: 1px solid #0F5897;",
|
||||
" }",
|
||||
"</style>",
|
||||
"<h1>Cat Photo Finder</h1> ",
|
||||
"<p class=\"message box\">",
|
||||
" The message will go here",
|
||||
"</p>",
|
||||
"<p>",
|
||||
" <button id=\"getMessage\">",
|
||||
" Get Message",
|
||||
" </button>",
|
||||
"</p>"
|
||||
],
|
||||
"tests": [
|
||||
"assert(code.match(/document\\.getElementById\\(\\s*?('|\")getMessage\\1\\s*?\\)/g), 'message: Your code should use the <code>document.getElementById</code> method to select the <code>getMessage</code> element.');",
|
||||
"assert(code.match(/\\.onclick=function\\(\\s*?\\)\\s*?{\\s*?};/g), 'message: Your code should add an <code>onclick</code> event handler.');"
|
||||
],
|
||||
"solutions": [],
|
||||
"hints": [],
|
||||
"type": "waypoint",
|
||||
"challengeType": 0,
|
||||
"translations": {
|
||||
"de": {
|
||||
"description": [],
|
||||
"title": ""
|
||||
},
|
||||
"fr": {
|
||||
"description": [],
|
||||
"title": ""
|
||||
},
|
||||
"pt-br": {
|
||||
"description": [],
|
||||
"title": ""
|
||||
},
|
||||
"ru": {
|
||||
"description": [],
|
||||
"title": ""
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "587d7fad367417b2b2512be2",
|
||||
"title": "Change Text with Click Events",
|
||||
"description": [
|
||||
"When the click event happens, you can use JavaScript to update an HTML element.",
|
||||
"For example, when a user clicks the \"Get Message\" button, it changes the text of the element with the class <code>message</code> to say \"Here is the message\".",
|
||||
"This works by adding the following code within the click event:",
|
||||
"<code>document.getElementsByClassName('message')[0].innerHTML=\"Here is the message\";</code>",
|
||||
"<h4>Instructions</h4>",
|
||||
"Add code inside the <code>onclick</code> event handler to change the text inside the <code>message</code> element to say \"Here is the message\"."
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<script>",
|
||||
" document.addEventListener('DOMContentLoaded',function(){",
|
||||
" document.getElementById('getMessage').onclick=function(){",
|
||||
" // Add your code below this line",
|
||||
" ",
|
||||
" ",
|
||||
" // Add your code above this line",
|
||||
" }",
|
||||
" });",
|
||||
"</script>",
|
||||
"<style>",
|
||||
" body {",
|
||||
" text-align: center;",
|
||||
" font-family: \"Helvetica\", sans-serif;",
|
||||
" }",
|
||||
" h1 {",
|
||||
" font-size: 2em;",
|
||||
" font-weight: bold;",
|
||||
" }",
|
||||
" .box {",
|
||||
" border-radius: 5px;",
|
||||
" background-color: #eee;",
|
||||
" padding: 20px 5px;",
|
||||
" }",
|
||||
" button {",
|
||||
" color: white;",
|
||||
" background-color: #4791d0;",
|
||||
" border-radius: 5px;",
|
||||
" border: 1px solid #4791d0;",
|
||||
" padding: 5px 10px 8px 10px;",
|
||||
" }",
|
||||
" button:hover {",
|
||||
" background-color: #0F5897;",
|
||||
" border: 1px solid #0F5897;",
|
||||
" }",
|
||||
"</style>",
|
||||
"<h1>Cat Photo Finder</h1> ",
|
||||
"<p class=\"message box\">",
|
||||
" The message will go here",
|
||||
"</p>",
|
||||
"<p>",
|
||||
" <button id=\"getMessage\">",
|
||||
" Get Message",
|
||||
" </button>",
|
||||
"</p>"
|
||||
],
|
||||
"tests": [
|
||||
"assert(code.match(/document\\.getElementsByClassName\\(\\s*?('|\")message\\1\\s*?\\)\\[0\\]\\.innerHTML\\s*?=\\s*?('|\")Here is the message\\2/g), 'message: Your code should use the <code>document.getElementsByClassName</code> method to select the element with class <code>message</code> and set its <code>innerHTML</code> to the given string.');"
|
||||
],
|
||||
"solutions": [],
|
||||
"hints": [],
|
||||
"type": "waypoint",
|
||||
"challengeType": 0,
|
||||
"translations": {
|
||||
"de": {
|
||||
"description": [],
|
||||
"title": ""
|
||||
},
|
||||
"fr": {
|
||||
"description": [],
|
||||
"title": ""
|
||||
},
|
||||
"pt-br": {
|
||||
"description": [],
|
||||
"title": ""
|
||||
},
|
||||
"ru": {
|
||||
"description": [],
|
||||
"title": ""
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "587d7fae367417b2b2512be3",
|
||||
"title": "Get JSON with the JavaScript XMLHttpRequest Method",
|
||||
"description": [
|
||||
"You can also request data from an external source. This is where APIs come into play.",
|
||||
"Remember that APIs - or Application Programming 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.",
|
||||
"JSON syntax looks very similar to JavaScript object literal notation. JSON has 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\".",
|
||||
"However, JSON transmitted by APIs are sent as <code>bytes</code>, and your application receives it as a <code>string</code>. These can be converted into JavaScript objects, but they are not JavaScript objects by default. The <code>JSON.parse</code> method parses the string and constructs the JavaScript object described by it.",
|
||||
"You can request the JSON from Free Code Camp's Cat Photo API. Here's the code you can put in your click event to do this:",
|
||||
"<blockquote>req=new XMLHttpRequest();<br>req.open(\"GET\",'/json/cats.json',true);<br>req.send();<br>req.onload=function(){<br> json=JSON.parse(req.responseText);<br> document.getElementsByClassName('message')[0].innerHTML=JSON.stringify(json);<br>};</blockquote>",
|
||||
"Here's a review of what each piece is doing. The JavaScript <code>XMLHttpRequest</code> object has a number of properties and methods that are used to transfer data. First, an instance of the <code>XMLHttpRequest</code> object is created and saved in the <code>req</code> variable.",
|
||||
"Next, the <code>open</code> method initializes a request - this example is requesting data from an API, therefore is a \"GET\" request. The second argument for <code>open</code> is the URL of the API you are requesting data from. The third argument is a Boolean value where <code>true</code> makes it an asynchronous request.",
|
||||
"The <code>send</code> method sends the request. Finally, the <code>onload</code> event handler parses the returned data and applies the <code>JSON.stringify</code> method to convert the JavaScript object into a string. This string is then inserted as the message text.",
|
||||
"<h4>Instructions</h4>",
|
||||
"Update the code to create and send a \"GET\" request to the Free Code Camp Cat Photo API. Then click the \"Get Message\" button. Your Ajax function will replace the \"The message will go here\" text with the raw JSON output from the API."
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<script>",
|
||||
" document.addEventListener('DOMContentLoaded',function(){",
|
||||
" document.getElementById('getMessage').onclick=function(){",
|
||||
" // Add your code below this line",
|
||||
" ",
|
||||
" ",
|
||||
" // Add your code above this line",
|
||||
" };",
|
||||
" });",
|
||||
"</script>",
|
||||
"<style>",
|
||||
" body {",
|
||||
" text-align: center;",
|
||||
" font-family: \"Helvetica\", sans-serif;",
|
||||
" }",
|
||||
" h1 {",
|
||||
" font-size: 2em;",
|
||||
" font-weight: bold;",
|
||||
" }",
|
||||
" .box {",
|
||||
" border-radius: 5px;",
|
||||
" background-color: #eee;",
|
||||
" padding: 20px 5px;",
|
||||
" }",
|
||||
" button {",
|
||||
" color: white;",
|
||||
" background-color: #4791d0;",
|
||||
" border-radius: 5px;",
|
||||
" border: 1px solid #4791d0;",
|
||||
" padding: 5px 10px 8px 10px;",
|
||||
" }",
|
||||
" button:hover {",
|
||||
" background-color: #0F5897;",
|
||||
" border: 1px solid #0F5897;",
|
||||
" }",
|
||||
"</style>",
|
||||
"<h1>Cat Photo Finder</h1> ",
|
||||
"<p class=\"message box\">",
|
||||
" The message will go here",
|
||||
"</p>",
|
||||
"<p>",
|
||||
" <button id=\"getMessage\">",
|
||||
" Get Message",
|
||||
" </button>",
|
||||
"</p>"
|
||||
],
|
||||
"tests": [
|
||||
"assert(code.match(/new\\s+?XMLHttpRequest\\(\\s*?\\)/g), 'message: Your code should create a new <code>XMLHttpRequest</code>.');",
|
||||
"assert(code.match(/\\.open\\(\\s*?('|\")GET\\1\\s*?,\\s*?('|\")\\/json\\/cats\\.json\\2\\s*?,\\s*?true\\s*?\\)/g), 'message: Your code should use the <code>open</code> method to initialize a \"GET\" request to the Free Code Camp Cat Photo API.');",
|
||||
"assert(code.match(/\\.send\\(\\s*\\)/g), 'message: Your code should use the <code>send</code> method to send the request.');",
|
||||
"assert(code.match(/\\.onload=function\\(\\s*?\\)\\s*?{/g), 'message: Your code should have an <code>onload</code> event handler set to a function.');",
|
||||
"assert(code.match(/JSON\\.parse\\(.*\\.responseText\\)/g), 'message: Your code should use the <code>JSON.parse</code> method to parse the <code>responseText</code>.');",
|
||||
"assert(code.match(/document\\.getElementsByClassName\\(\\s*?('|\")message\\1\\s*?\\)\\[0\\]\\.innerHTML\\s*?=\\s*?JSON\\.stringify\\(.+?\\)/g), 'message: Your code should get the element with class <code>message</code> and change its inner HTML to the string of JSON data.');"
|
||||
],
|
||||
"solutions": [
|
||||
|
||||
],
|
||||
"hints": [],
|
||||
"type": "waypoint",
|
||||
"challengeType": 0,
|
||||
"translations": {
|
||||
"de": {
|
||||
"description": [],
|
||||
"title": ""
|
||||
},
|
||||
"fr": {
|
||||
"description": [],
|
||||
"title": ""
|
||||
},
|
||||
"pt-br": {
|
||||
"description": [],
|
||||
"title": ""
|
||||
},
|
||||
"ru": {
|
||||
"description": [],
|
||||
"title": ""
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "587d7fae367417b2b2512be4",
|
||||
"title": "Access the JSON Data from an API",
|
||||
"description": [
|
||||
"In the previous challenge, you saw how to get JSON data from the Free Code Camp Cat Photo API.",
|
||||
"Now you'll take a closer look at the returned data to better understand the JSON format. Recall some notation in JavaScript:",
|
||||
"<blockquote>[ ] -> Square brackets represent an array<br>{ } -> Curly brackets represent an object<br>\" \" -> Double quotes represent a string. They are also used for key names in JSON</blockquote>",
|
||||
"Understanding the structure of the data that an API returns is important because it influences how you retrieve the values you need.",
|
||||
"On the right, click the \"Get Message\" button to load the Free Code Camp Cat Photo API JSON into the HTML.",
|
||||
"The first and last character you see in the JSON data are square brackets <code>[ ]</code>. This means that the returned data is an array. The second character in the JSON data is a curly <code>{</code> bracket, which starts an object. Looking closely, you can see that there are three separate objects. The JSON data is an array of three objects, where each object contains information about a cat photo.",
|
||||
"You learned earlier that objects contain \"key-value pairs\" that are separated by commas. In the Cat Photo example, the first object has <code>\"id\":0</code> where \"id\" is a key and 0 is its corresponding value. Similarly, there are keys for \"imageLink\", \"altText\", and \"codeNames\". Each cat photo object has these same keys, but with different values.",
|
||||
"Another interesting \"key-value pair\" in the first object is <code>\"codeNames\":[\"Juggernaut\",\"Mrs. Wallace\",\"ButterCup\"]</code>. Here \"codeNames\" is the key and its value is an array of three strings. It's possible to have arrays of objects as well as a key with an array as a value.",
|
||||
"Remember how to access data in arrays and objects. Arrays use bracket notation to access a specific index of an item. Objects use either bracket or dot notation to access the value of a given property. Here's an example that prints the \"altText\" of the first cat photo - note that the parsed JSON data in the editor is saved in a variable called <code>json</code>:",
|
||||
"<blockquote>console.log(json[0].altText);<br>// Prints \"A white cat wearing a green helmet shaped melon on it's head.\"</blockquote>",
|
||||
"<h4>Instructions</h4>",
|
||||
"For the cat with the \"id\" of 2, print to the console the second value in the <code>codeNames</code> array. You should use bracket and dot notation on the object (which is saved in the variable <code>json</code>) to access the value."
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<script>",
|
||||
" document.addEventListener('DOMContentLoaded',function(){",
|
||||
" document.getElementById('getMessage').onclick=function(){",
|
||||
" req=new XMLHttpRequest();",
|
||||
" req.open(\"GET\",'/json/cats.json',true);",
|
||||
" req.send();",
|
||||
" req.onload=function(){",
|
||||
" json=JSON.parse(req.responseText);",
|
||||
" document.getElementsByClassName('message')[0].innerHTML=JSON.stringify(json);",
|
||||
" // Add your code below this line",
|
||||
" ",
|
||||
" ",
|
||||
" // Add your code above this line",
|
||||
" };",
|
||||
" };",
|
||||
" });",
|
||||
"</script>",
|
||||
"<style>",
|
||||
" body {",
|
||||
" text-align: center;",
|
||||
" font-family: \"Helvetica\", sans-serif;",
|
||||
" }",
|
||||
" h1 {",
|
||||
" font-size: 2em;",
|
||||
" font-weight: bold;",
|
||||
" }",
|
||||
" .box {",
|
||||
" border-radius: 5px;",
|
||||
" background-color: #eee;",
|
||||
" padding: 20px 5px;",
|
||||
" }",
|
||||
" button {",
|
||||
" color: white;",
|
||||
" background-color: #4791d0;",
|
||||
" border-radius: 5px;",
|
||||
" border: 1px solid #4791d0;",
|
||||
" padding: 5px 10px 8px 10px;",
|
||||
" }",
|
||||
" button:hover {",
|
||||
" background-color: #0F5897;",
|
||||
" border: 1px solid #0F5897;",
|
||||
" }",
|
||||
"</style>",
|
||||
"<h1>Cat Photo Finder</h1> ",
|
||||
"<p class=\"message box\">",
|
||||
" The message will go here",
|
||||
"</p>",
|
||||
"<p>",
|
||||
" <button id=\"getMessage\">",
|
||||
" Get Message",
|
||||
" </button>",
|
||||
"</p>"
|
||||
],
|
||||
"tests": [
|
||||
"assert(code.match(/(?:json\\[2\\]\\.codeNames\\[1\\]|json\\[2\\]\\[('|\")codeNames\\1\\]\\[1\\])/g), 'message: Your code should use bracket and dot notation to access the proper code name, and print \"Loki\" to the console.');"
|
||||
],
|
||||
"solutions": [],
|
||||
"hints": [],
|
||||
"type": "waypoint",
|
||||
"challengeType": 0,
|
||||
"translations": {
|
||||
"de": {
|
||||
"description": [],
|
||||
"title": ""
|
||||
},
|
||||
"fr": {
|
||||
"description": [],
|
||||
"title": ""
|
||||
},
|
||||
"pt-br": {
|
||||
"description": [],
|
||||
"title": ""
|
||||
},
|
||||
"ru": {
|
||||
"description": [],
|
||||
"title": ""
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "587d7fae367417b2b2512be5",
|
||||
"title": "Convert JSON Data to HTML",
|
||||
"description": [
|
||||
"Now that you're getting data from a JSON API, you can display it in the HTML.",
|
||||
"You can use a <code>forEach</code> method to loop through the data since the cat photo objects are held in an array. As you get to each item, you can modify the HTML elements.",
|
||||
"First, declare an html variable with <code>var html = \"\";</code>.",
|
||||
"Then, loop through the JSON, adding HTML to the variable that wraps the key names in <code>strong</code> tags, followed by the value. When the loop is finished, you render it.",
|
||||
"Here's the code that does this:",
|
||||
"<blockquote>json.forEach(function(val) {</br> var keys = Object.keys(val);</br> html += \"<div class = 'cat'>\";</br> keys.forEach(function(key) {</br> html += \"<strong>\" + key + \"</strong>: \" + val[key] + \"<br>\";</br> });</br> html += \"</div><br>\";</br>});</blockquote>",
|
||||
"<h4>Instructions</h4>",
|
||||
"Add a <code>forEach</code> method to loop over the JSON data and create the HTML elements to display it."
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<script>",
|
||||
" document.addEventListener('DOMContentLoaded',function(){",
|
||||
" document.getElementById('getMessage').onclick=function(){",
|
||||
" req=new XMLHttpRequest();",
|
||||
" req.open(\"GET\",'/json/cats.json',true);",
|
||||
" req.send();",
|
||||
" req.onload=function(){",
|
||||
" json=JSON.parse(req.responseText);",
|
||||
" var html = \"\";",
|
||||
" // Add your code below this line",
|
||||
" ",
|
||||
" ",
|
||||
" ",
|
||||
" // Add your code above this line",
|
||||
" document.getElementsByClassName('message')[0].innerHTML=html;",
|
||||
" };",
|
||||
" };",
|
||||
" });",
|
||||
"</script>",
|
||||
"<style>",
|
||||
" body {",
|
||||
" text-align: center;",
|
||||
" font-family: \"Helvetica\", sans-serif;",
|
||||
" }",
|
||||
" h1 {",
|
||||
" font-size: 2em;",
|
||||
" font-weight: bold;",
|
||||
" }",
|
||||
" .box {",
|
||||
" border-radius: 5px;",
|
||||
" background-color: #eee;",
|
||||
" padding: 20px 5px;",
|
||||
" }",
|
||||
" button {",
|
||||
" color: white;",
|
||||
" background-color: #4791d0;",
|
||||
" border-radius: 5px;",
|
||||
" border: 1px solid #4791d0;",
|
||||
" padding: 5px 10px 8px 10px;",
|
||||
" }",
|
||||
" button:hover {",
|
||||
" background-color: #0F5897;",
|
||||
" border: 1px solid #0F5897;",
|
||||
" }",
|
||||
"</style>",
|
||||
"<h1>Cat Photo Finder</h1> ",
|
||||
"<p class=\"message box\">",
|
||||
" The message will go here",
|
||||
"</p>",
|
||||
"<p>",
|
||||
" <button id=\"getMessage\">",
|
||||
" Get Message",
|
||||
" </button>",
|
||||
"</p>"
|
||||
],
|
||||
"tests": [
|
||||
"assert(code.match(/json\\.forEach/g), 'message: Your code should use a <code>forEach</code> method to loop over the JSON data from the API.');"
|
||||
],
|
||||
"solutions": [],
|
||||
"hints": [],
|
||||
"type": "waypoint",
|
||||
"challengeType": 0,
|
||||
"translations": {
|
||||
"de": {
|
||||
"description": [],
|
||||
"title": ""
|
||||
},
|
||||
"fr": {
|
||||
"description": [],
|
||||
"title": ""
|
||||
},
|
||||
"pt-br": {
|
||||
"description": [],
|
||||
"title": ""
|
||||
},
|
||||
"ru": {
|
||||
"description": [],
|
||||
"title": ""
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "587d7fae367417b2b2512be6",
|
||||
"title": "Render Images from Data Sources",
|
||||
"description": [
|
||||
"The last few challenges showed that each object in the JSON array contains an <code>imageLink</code> key with a value that is the URL of a cat's image.",
|
||||
"When you're looping through these objects, you can use this <code>imageLink</code> property to display this image in an <code>img</code> element.",
|
||||
"Here's the code that does this:",
|
||||
"<code>html += \"<img src = '\" + val.imageLink + \"' \" + \"alt='\" + val.altText + \"'>\";</code>",
|
||||
"<h4>Instructions</h4>",
|
||||
"Add code to use the <code>imageLink</code> and <code>altText</code> properties in an <code>img</code> tag."
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<script>",
|
||||
" document.addEventListener('DOMContentLoaded',function(){",
|
||||
" document.getElementById('getMessage').onclick=function(){",
|
||||
" req=new XMLHttpRequest();",
|
||||
" req.open(\"GET\",'/json/cats.json',true);",
|
||||
" req.send();",
|
||||
" req.onload=function(){",
|
||||
" json=JSON.parse(req.responseText);",
|
||||
" var html = \"\";",
|
||||
" json.forEach(function(val) {",
|
||||
" html += \"<div class = 'cat'>\";",
|
||||
" // Add your code below this line",
|
||||
" ",
|
||||
" ",
|
||||
" // Add your code above this line",
|
||||
" html += \"</div><br>\";",
|
||||
" });",
|
||||
" document.getElementsByClassName('message')[0].innerHTML=html;",
|
||||
" };",
|
||||
" };",
|
||||
" });",
|
||||
"</script>",
|
||||
"<style>",
|
||||
" body {",
|
||||
" text-align: center;",
|
||||
" font-family: \"Helvetica\", sans-serif;",
|
||||
" }",
|
||||
" h1 {",
|
||||
" font-size: 2em;",
|
||||
" font-weight: bold;",
|
||||
" }",
|
||||
" .box {",
|
||||
" border-radius: 5px;",
|
||||
" background-color: #eee;",
|
||||
" padding: 20px 5px;",
|
||||
" }",
|
||||
" button {",
|
||||
" color: white;",
|
||||
" background-color: #4791d0;",
|
||||
" border-radius: 5px;",
|
||||
" border: 1px solid #4791d0;",
|
||||
" padding: 5px 10px 8px 10px;",
|
||||
" }",
|
||||
" button:hover {",
|
||||
" background-color: #0F5897;",
|
||||
" border: 1px solid #0F5897;",
|
||||
" }",
|
||||
"</style>",
|
||||
"<h1>Cat Photo Finder</h1> ",
|
||||
"<p class=\"message box\">",
|
||||
" The message will go here",
|
||||
"</p>",
|
||||
"<p>",
|
||||
" <button id=\"getMessage\">",
|
||||
" Get Message",
|
||||
" </button>",
|
||||
"</p>"
|
||||
],
|
||||
"tests": [
|
||||
"assert(code.match(/val\\.imageLink/g), 'message: You should use the <code>imageLink</code> property to display the images.');"
|
||||
],
|
||||
"solutions": [],
|
||||
"hints": [],
|
||||
"type": "waypoint",
|
||||
"challengeType": 0,
|
||||
"translations": {
|
||||
"de": {
|
||||
"description": [],
|
||||
"title": ""
|
||||
},
|
||||
"fr": {
|
||||
"description": [],
|
||||
"title": ""
|
||||
},
|
||||
"pt-br": {
|
||||
"description": [],
|
||||
"title": ""
|
||||
},
|
||||
"ru": {
|
||||
"description": [],
|
||||
"title": ""
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "587d7fae367417b2b2512be7",
|
||||
"title": "Pre-filter JSON",
|
||||
"description": [
|
||||
"If you don't want to render every cat photo you get from the Free Code Camp Cat Photo API, you can pre-filter the JSON before looping through it.",
|
||||
"Given that the JSON data is stored in an array, you can use the <code>filter</code> method to filter out the cat whose \"id\" key has a value of 1.",
|
||||
"Here's the code to do this:",
|
||||
"<blockquote>json = json.filter(function(val) {<br> return (val.id !== 1);<br>});</blockquote>",
|
||||
"<h4>Instructions</h4>",
|
||||
"Add code to <code>filter</code> the json data to remove the cat with the \"id\" value of 1."
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<script>",
|
||||
" document.addEventListener('DOMContentLoaded',function(){",
|
||||
" document.getElementById('getMessage').onclick=function(){",
|
||||
" req=new XMLHttpRequest();",
|
||||
" req.open(\"GET\",'/json/cats.json',true);",
|
||||
" req.send();",
|
||||
" req.onload=function(){",
|
||||
" json=JSON.parse(req.responseText);",
|
||||
" var html = \"\";",
|
||||
" // Add your code below this line",
|
||||
" ",
|
||||
" ",
|
||||
" // Add your code above this line",
|
||||
" json.forEach(function(val) {",
|
||||
" html += \"<div class = 'cat'>\"",
|
||||
" ",
|
||||
" html += \"<img src = '\" + val.imageLink + \"' \" + \"alt='\" + val.altText + \"'>\"",
|
||||
" ",
|
||||
" html += \"</div>\"",
|
||||
" });",
|
||||
" document.getElementsByClassName('message')[0].innerHTML=html;",
|
||||
" };",
|
||||
" }; ",
|
||||
" });",
|
||||
"</script>",
|
||||
"<style>",
|
||||
" body {",
|
||||
" text-align: center;",
|
||||
" font-family: \"Helvetica\", sans-serif;",
|
||||
" }",
|
||||
" h1 {",
|
||||
" font-size: 2em;",
|
||||
" font-weight: bold;",
|
||||
" }",
|
||||
" .box {",
|
||||
" border-radius: 5px;",
|
||||
" background-color: #eee;",
|
||||
" padding: 20px 5px;",
|
||||
" }",
|
||||
" button {",
|
||||
" color: white;",
|
||||
" background-color: #4791d0;",
|
||||
" border-radius: 5px;",
|
||||
" border: 1px solid #4791d0;",
|
||||
" padding: 5px 10px 8px 10px;",
|
||||
" }",
|
||||
" button:hover {",
|
||||
" background-color: #0F5897;",
|
||||
" border: 1px solid #0F5897;",
|
||||
" }",
|
||||
"</style>",
|
||||
"<h1>Cat Photo Finder</h1> ",
|
||||
"<p class=\"message box\">",
|
||||
" The message will go here",
|
||||
"</p>",
|
||||
"<p>",
|
||||
" <button id=\"getMessage\">",
|
||||
" Get Message",
|
||||
" </button>",
|
||||
"</p>"
|
||||
],
|
||||
"tests": [
|
||||
"assert(code.match(/json\\.filter/g), 'message: Your code should use the <code>filter</code> method.');"
|
||||
],
|
||||
"solutions": [],
|
||||
"hints": [],
|
||||
"type": "waypoint",
|
||||
"challengeType": 0,
|
||||
"translations": {
|
||||
"de": {
|
||||
"description": [],
|
||||
"title": ""
|
||||
},
|
||||
"fr": {
|
||||
"description": [],
|
||||
"title": ""
|
||||
},
|
||||
"pt-br": {
|
||||
"description": [],
|
||||
"title": ""
|
||||
},
|
||||
"ru": {
|
||||
"description": [],
|
||||
"title": ""
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "587d7faf367417b2b2512be8",
|
||||
"title": "Get Geolocation Data",
|
||||
"description": [
|
||||
"Another cool thing you can do is access your user's current location. Every browser has a built in navigator that can give you this information.",
|
||||
"The navigator will get the user's current longitude and latitude.",
|
||||
"You will see a prompt to allow or block this site from knowing your current location. The challenge can be completed either way, as long as the code is correct.",
|
||||
"By selecting allow, you will see the text on the output phone change to your latitude and longitude.",
|
||||
"Here's code that does this:",
|
||||
"<blockquote>if (navigator.geolocation){<br> navigator.geolocation.getCurrentPosition(function(position) {<br> document.getElementById('data').innerHTML=\"latitude: \"+ position.coords.latitude + \"<br>longitude: \" + position.coords.longitude;<br> });<br>}</blockquote>",
|
||||
"First, it checks if the <code>navigator.geolocation</code> object exists. If it does, the <code>getCurrentPosition</code> method on that object is called, which initiates an asynchronous request for the user's position. If the request is successful, the callback function in the method runs. This function accesses the <code>position</code> object's values for latitude and longitude using dot notation and updates the HTML.",
|
||||
"<h4>Instructions</h4>",
|
||||
"Add the example code inside the <code>script</code> tags to check a user's current location and insert it into the HTML."
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<script>",
|
||||
" // Add your code below this line",
|
||||
" ",
|
||||
" ",
|
||||
" // Add your code above this line",
|
||||
"</script>",
|
||||
"<h4>You are here:</h4>",
|
||||
"<div id=\"data\">",
|
||||
"",
|
||||
"</div>"
|
||||
],
|
||||
"tests": [
|
||||
"assert(code.match(/navigator\\.geolocation\\.getCurrentPosition/g), 'message: Your code should use <code>navigator.geolocation</code> to access the user's current location.');",
|
||||
"assert(code.match(/position\\.coords\\.latitude/g), 'message: Your code should use <code>position.coords.latitude</code> to display the user's latitudinal location.');",
|
||||
"assert(code.match(/position\\.coords\\.longitude/g), 'message: Your code should use <code>position.coords.longitude</code> to display the user's longitudinal location.');",
|
||||
"assert(code.match(/document\\.getElementById\\(\\s*?('|\")data\\1\\s*?\\)\\.innerHTML/g), 'message: You should display the user's position within the <code>data</code> div element.');"
|
||||
],
|
||||
"solutions": [],
|
||||
"hints": [],
|
||||
"type": "waypoint",
|
||||
"challengeType": 0,
|
||||
"translations": {
|
||||
"de": {
|
||||
"description": [],
|
||||
"title": ""
|
||||
},
|
||||
"fr": {
|
||||
"description": [],
|
||||
"title": ""
|
||||
},
|
||||
"pt-br": {
|
||||
"description": [],
|
||||
"title": ""
|
||||
},
|
||||
"ru": {
|
||||
"description": [],
|
||||
"title": ""
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "587d7faf367417b2b2512be9",
|
||||
"title": "Post Data with the JavaScript XMLHttpRequest Method",
|
||||
"description": [
|
||||
"In the previous examples, you received data from an external resource. You can also send data to an external resource, as long as that resource supports Ajax requests and you know the URL.",
|
||||
"JavaScript's <code>XMLHttpRequest</code> method is also used to post data to a server. Here's an example:",
|
||||
"<blockquote>req=new XMLHttpRequest();<br>req.open(\"POST\",url,true);<br>req.setRequestHeader('Content-Type','text/plain');<br>req.onreadystatechange=function(){<br> if(req.readyState==4 && req.status==200){<br> document.getElementsByClassName('message')[0].innerHTML=req.responseText;<br> }<br>};<br>req.send(userName);</blockquote>",
|
||||
"You've seen several of these methods before. Here the <code>open</code> method initializes the request as a \"POST\" to the given URL of the external resource, and uses the <code>true</code> Boolean to make it asynchronous.",
|
||||
"The <code>setRequestHeader</code> method sets the value of an HTTP request header, which contains information about the sender and the request. It must be called after the <code>open</code> method, but before the <code>send</code> method. The two parameters are the name of the header and the value to set as the body of that header.",
|
||||
"Next, the <code>onreadystatechange</code> event listener handles a change in the state of the request. A <code>readyState</code> of 4 means the operation is complete, and a <code>status</code> of 200 means it was a successful request. The document's HTML can be updated.",
|
||||
"Finally, the <code>send</code> method sends the request with the <code>userName</code> value, which was given by the user in the <code>input</code> field.",
|
||||
"<h4>Instructions</h4>",
|
||||
"Update the code to create and send a \"POST\" request. Then enter your name in input box and click \"Send Message\". Your Ajax function will replace \"Reply from Server will be here.\" with the reply of the server. In this case, it is your name appended with \" loves cats\"."
|
||||
],
|
||||
"challengeSeed": [
|
||||
"<script>",
|
||||
" document.addEventListener('DOMContentLoaded',function(){",
|
||||
" document.getElementById('sendMessage').onclick=function(){",
|
||||
" ",
|
||||
" var userName=document.getElementById('name').value;",
|
||||
" // Add your code below this line",
|
||||
" ",
|
||||
" ",
|
||||
" // Add your code above this line",
|
||||
" };",
|
||||
" });",
|
||||
"</script>",
|
||||
"<style>",
|
||||
" body {",
|
||||
" text-align: center;",
|
||||
" font-family: \"Helvetica\", sans-serif;",
|
||||
" }",
|
||||
" h1 {",
|
||||
" font-size: 2em;",
|
||||
" font-weight: bold;",
|
||||
" }",
|
||||
" .box {",
|
||||
" border-radius: 5px;",
|
||||
" background-color: #eee;",
|
||||
" padding: 20px 5px;",
|
||||
" }",
|
||||
" button {",
|
||||
" color: white;",
|
||||
" background-color: #4791d0;",
|
||||
" border-radius: 5px;",
|
||||
" border: 1px solid #4791d0;",
|
||||
" padding: 5px 10px 8px 10px;",
|
||||
" }",
|
||||
" button:hover {",
|
||||
" background-color: #0F5897;",
|
||||
" border: 1px solid #0F5897;",
|
||||
" }",
|
||||
"</style>",
|
||||
"<h1>Cat Friends</h1> ",
|
||||
"<p class=\"message box\">",
|
||||
" Reply from Server will be here",
|
||||
"</p>",
|
||||
"<p>",
|
||||
" <label for=\"name\">Your name:",
|
||||
" <input type=\"text\" id=\"name\"/>",
|
||||
" </label>",
|
||||
" <button id=\"sendMessage\">",
|
||||
" Send Message",
|
||||
" </button>",
|
||||
"</p>"
|
||||
],
|
||||
"tests": [
|
||||
"assert(code.match(/new\\s+?XMLHttpRequest\\(\\s*?\\)/g), 'message: Your code should create a new <code>XMLHttpRequest</code>.');",
|
||||
"assert(code.match(/\\.open\\(\\s*?('|\")POST\\1\\s*?,\\s*?url\\s*?,\\s*?true\\s*?\\)/g), 'message: Your code should use the <code>open</code> method to initialize a \"POST\" request to the server.');",
|
||||
"assert(code.match(/\\.setRequestHeader\\(\\s*?('|\")Content-Type\\1\\s*?,\\s*?('|\")text\\/plain\\2\\s*?\\)/g), 'message: Your code should use the <code>setRequestHeader</code> method.');",
|
||||
"assert(code.match(/\\.onreadystatechange\\s*?=/g), 'message: Your code should have an <code>onreadystatechange</code> event handler set to a function.');",
|
||||
"assert(code.match(/document\\.getElementsByClassName\\(\\s*?('|\")message\\1\\s*?\\)\\[0\\]\\.innerHTML\\s*?=\\s*?.+?\\.responseText/g), 'message: Your code should get the element with class <code>message</code> and change its inner HTML to the <code>responseText</code>.');",
|
||||
"assert(code.match(/\\.send\\(\\s*?userName\\s*?\\)/g), 'message: Your code should use the <code>send</code> method.');"
|
||||
],
|
||||
"solutions": [],
|
||||
"hints": [],
|
||||
"type": "waypoint",
|
||||
"challengeType": 0,
|
||||
"translations": {
|
||||
"de": {
|
||||
"description": [],
|
||||
"title": ""
|
||||
},
|
||||
"fr": {
|
||||
"description": [],
|
||||
"title": ""
|
||||
},
|
||||
"pt-br": {
|
||||
"description": [],
|
||||
"title": ""
|
||||
},
|
||||
"ru": {
|
||||
"description": [],
|
||||
"title": ""
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
Reference in New Issue
Block a user