gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Feat: add new Markdown parser (#39800)

Browse Source 
and change all the challenges to new `md` format.
This commit is contained in:
Oliver Eyton-Williams
2020-11-27 19:02:05 +01:00
committed by GitHub
parent a07f84c8ec
commit 0bd52f8bd1
2580 changed files with 113436 additions and 111979 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
curriculum/challenges/english/04-data-visualization/json-apis-and-ajax/access-the-json-data-from-an-api.md
View File

@ -5,46 +5,50 @@ challengeType: 6
forumTopicId: 301499
---
## Description
<section id='description'>
# --description--
In the previous challenge, you saw how to get JSON data from the freeCodeCamp 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 freeCodeCamp 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>:
The first and last character you see in the JSON data are square brackets `[ ]`. This means that the returned data is an array. The second character in the JSON data is a curly `{` 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 `"id":0` 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 `"codeNames":["Juggernaut","Mrs. Wallace","ButterCup"]`. 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 `json`:
```js
console.log(json[0].altText);
// Prints "A white cat wearing a green helmet shaped melon on its head."
```
</section>
# --instructions--
## Instructions
<section id='instructions'>
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.
</section>
For the cat with the "id" of 2, print to the console the second value in the `codeNames` array. You should use bracket and dot notation on the object (which is saved in the variable `json`) to access the value.
## Tests
<section id='tests'>
# --hints--
```yml
tests:
- text: Your code should use bracket and dot notation to access the proper code name, and print "Loki" to the console.
testString: assert(code.match(/console\s*\.\s*log\s*\(\s*json\s*\[2\]\s*(\.\s*codeNames|\[\s*('|`|")codeNames\2\s*\])\s*\[\s*1\s*\]\s*\)/g));
Your code should use bracket and dot notation to access the proper code name, and print "Loki" to the console.
```js
assert(
code.match(
/console\s*\.\s*log\s*\(\s*json\s*\[2\]\s*(\.\s*codeNames|\[\s*('|`|")codeNames\2\s*\])\s*\[\s*1\s*\]\s*\)/g
)
);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<script>
@ -102,14 +106,7 @@ tests:
</p>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<script>
@ -166,5 +163,3 @@ tests:
</button>
</p>
```
</section>

52
curriculum/challenges/english/04-data-visualization/json-apis-and-ajax/change-text-with-click-events.md
View File

@ -5,35 +5,35 @@ challengeType: 6
forumTopicId: 301500
---
## Description
<section id='description'>
# --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".
For example, when a user clicks the "Get Message" button, it changes the text of the element with the class `message` to say "Here is the message".
This works by adding the following code within the click event:
<code>document.getElementsByClassName('message')[0].textContent="Here is the message";</code>
</section>
## Instructions
<section id='instructions'>
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".
</section>
`document.getElementsByClassName('message')[0].textContent="Here is the message";`
## Tests
<section id='tests'>
# --instructions--
```yml
tests:
- text: Your code should use the <code>document.getElementsByClassName</code> method to select the element with class <code>message</code> and set its <code>textContent</code> to the given string.
testString: assert(code.match(/document\s*\.getElementsByClassName\(\s*?('|")message\1\s*?\)\[0\]\s*\.textContent\s*?=\s*?('|")Here is the message\2/g));
Add code inside the `onclick` event handler to change the text inside the `message` element to say "Here is the message".
# --hints--
Your code should use the `document.getElementsByClassName` method to select the element with class `message` and set its `textContent` to the given string.
```js
assert(
code.match(
/document\s*\.getElementsByClassName\(\s*?('|")message\1\s*?\)\[0\]\s*\.textContent\s*?=\s*?('|")Here is the message\2/g
)
);
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<script>
@ -85,14 +85,7 @@ tests:
</p>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<script>
@ -141,7 +134,4 @@ tests:
Get Message
</button>
</p>
```
</section>

66
curriculum/challenges/english/04-data-visualization/json-apis-and-ajax/convert-json-data-to-html.md
View File

@ -5,12 +5,16 @@ challengeType: 6
forumTopicId: 16807
---
## Description
<section id='description'>
# --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>let 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.
You can use a `forEach` 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 `let html = "";`.
Then, loop through the JSON, adding HTML to the variable that wraps the key names in `strong` tags, followed by the value. When the loop is finished, you render it.
Here's the code that does this:
```js
@ -25,12 +29,12 @@ json.forEach(function(val) {
});
```
<strong>Note:</strong> For this challenge, you need to add new HTML elements to the page, so you cannot rely on `textContent`. Instead, you need to use `innerHTML`, which can make a site vulnerable to Cross-site scripting attacks.
</section>
**Note:** For this challenge, you need to add new HTML elements to the page, so you cannot rely on `textContent`. Instead, you need to use `innerHTML`, which can make a site vulnerable to Cross-site scripting attacks.
# --instructions--
Add a `forEach` method to loop over the JSON data and create the HTML elements to display it.
## Instructions
<section id='instructions'>
Add a <code>forEach</code> method to loop over the JSON data and create the HTML elements to display it.
Here is some example JSON
```json
@ -45,28 +49,29 @@ Here is some example JSON
]
```
</section>
# --hints--
## Tests
<section id='tests'>
```yml
tests:
- text: Your code should store the data in the <code>html</code> variable
testString: assert(code.match(/html\s+?(\+=|=\shtml\s\+)/g));
- text: Your code should use a <code>forEach</code> method to loop over the JSON data from the API.
testString: assert(code.match(/json\.forEach/g));
- text: Your code should wrap the key names in <code>strong</code> tags.
testString: assert(code.match(/<strong>.+<\/strong>/g));
Your code should store the data in the `html` variable
```js
assert(code.match(/html\s+?(\+=|=\shtml\s\+)/g));
```
</section>
Your code should use a `forEach` method to loop over the JSON data from the API.
## Challenge Seed
<section id='challengeSeed'>
```js
assert(code.match(/json\.forEach/g));
```
<div id='html-seed'>
Your code should wrap the key names in `strong` tags.
```js
assert(code.match(/<strong>.+<\/strong>/g));
```
# --seed--
## --seed-contents--
```html
<script>
@ -126,12 +131,7 @@ tests:
</p>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<script>
@ -196,5 +196,3 @@ tests:
</button>
</p>
```
</section>

69
curriculum/challenges/english/04-data-visualization/json-apis-and-ajax/get-geolocation-data-to-find-a-users-gps-coordinates.md
View File

@ -5,12 +5,16 @@ challengeType: 6
forumTopicId: 18188
---
## Description
<section id='description'>
# --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:
```js
@ -21,36 +25,43 @@ if (navigator.geolocation){
}
```
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.
</section>
First, it checks if the `navigator.geolocation` object exists. If it does, the `getCurrentPosition` 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 `position` object's values for latitude and longitude using dot notation and updates the HTML.
## Instructions
<section id='instructions'>
Add the example code inside the <code>script</code> tags to check a user's current location and insert it into the HTML.
</section>
# --instructions--
## Tests
<section id='tests'>
Add the example code inside the `script` tags to check a user's current location and insert it into the HTML.
```yml
tests:
- text: Your code should use <code>navigator.geolocation</code> to access the user&#39;s current location.
testString: assert(code.match(/navigator\.geolocation\.getCurrentPosition/g));
- text: Your code should use <code>position.coords.latitude</code> to display the user&#39;s latitudinal location.
testString: assert(code.match(/position\.coords\.latitude/g));
- text: Your code should use <code>position.coords.longitude</code> to display the user&#39;s longitudinal location.
testString: assert(code.match(/position\.coords\.longitude/g));
- text: You should display the user&#39;s position within the <code>data</code> div element.
testString: assert(code.match(/document\.getElementById\(\s*?('|")data\1\s*?\)\.innerHTML/g));
# --hints--
Your code should use `navigator.geolocation` to access the user's current location.
```js
assert(code.match(/navigator\.geolocation\.getCurrentPosition/g));
```
</section>
Your code should use `position.coords.latitude` to display the user's latitudinal location.
## Challenge Seed
<section id='challengeSeed'>
```js
assert(code.match(/position\.coords\.latitude/g));
```
<div id='html-seed'>
Your code should use `position.coords.longitude` to display the user's longitudinal location.
```js
assert(code.match(/position\.coords\.longitude/g));
```
You should display the user's position within the `data` div element.
```js
assert(
code.match(/document\.getElementById\(\s*?('|")data\1\s*?\)\.innerHTML/g)
);
```
# --seed--
## --seed-contents--
```html
<script>
@ -65,14 +76,7 @@ tests:
</div>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<script>
@ -90,3 +94,4 @@ tests:
</div>
</section>
```

85
curriculum/challenges/english/04-data-visualization/json-apis-and-ajax/get-json-with-the-javascript-fetch-method.md
View File

@ -5,10 +5,11 @@ challengeType: 6
forumTopicId: 301501
---
## Description
<section id='description'>
Another way to request external data is to use the JavaScript <code>fetch()</code> method. It is equivalent to XMLHttpRequest, but the syntax is considered easier to understand.
Here is the code for making a GET request to <code>/json/cats.json</code>
# --description--
Another way to request external data is to use the JavaScript `fetch()` method. It is equivalent to XMLHttpRequest, but the syntax is considered easier to understand.
Here is the code for making a GET request to `/json/cats.json`
```js
@ -20,44 +21,57 @@ fetch('/json/cats.json')
```
Take a look at each piece of this code.
Take a look at each piece of this code.
The first line is the one that makes the request. So, <code>fetch(URL)</code> makes a GET request to the URL specified. The method returns a Promise.
The first line is the one that makes the request. So, `fetch(URL)` makes a GET request to the URL specified. The method returns a Promise.
After a Promise is returned, if the request was successful, the <code>then</code> method is executed, which takes the response and converts it to JSON format.
After a Promise is returned, if the request was successful, the `then` method is executed, which takes the response and converts it to JSON format.
The <code>then</code> method also returns a Promise, which is handled by the next <code>then</code> method. The argument in the second <code>then</code> is the JSON object you are looking for!
The `then` method also returns a Promise, which is handled by the next `then` method. The argument in the second `then` is the JSON object you are looking for!
Now, it selects the element that will receive the data by using <code>document.getElementById()</code>. Then it modifies the HTML code of the element by inserting a string created from the JSON object returned from the request.
</section>
Now, it selects the element that will receive the data by using `document.getElementById()`. Then it modifies the HTML code of the element by inserting a string created from the JSON object returned from the request.
## Instructions
<section id='instructions'>
Update the code to create and send a "GET" request to the freeCodeCamp Cat Photo API. But this time, using the <code>fetch</code> method instead of <code>XMLHttpRequest</code>.
</section>
# --instructions--
## Tests
<section id='tests'>
Update the code to create and send a "GET" request to the freeCodeCamp Cat Photo API. But this time, using the `fetch` method instead of `XMLHttpRequest`.
```yml
tests:
- text: Your code should make a GET request with <code>fetch</code>.
testString: assert(code.match(/fetch\s*\(\s*('|")\/json\/cats\.json\1\s*\)/g));
- text: Your code should use <code>then</code> to convert the response to JSON.
testString: assert(code.match(/\.then\s*\(\s*(response|\(\s*response\s*\))\s*=>\s*response\s*\.json\s*\(\s*\)\s*\)/g))
- text: Your code should use <code>then</code> to handle the data converted to JSON by the other <code>then</code>.
testString: assert(code.match(/\.then\s*\(\s*(data|\(\s*data\s*\))\s*=>\s*{[^}]*}\s*\)/g))
- text: Your code should get the element with id <code>message</code> and change its inner HTML to the string of JSON data.
testString: assert(code.match(/document\s*\.getElementById\s*\(\s*('|")message\1\s*\)\s*\.innerHTML\s*=\s*JSON\s*\.\s*stringify\s*\(\s*data\s*\)/g));
# --hints--
Your code should make a GET request with `fetch`.
```js
assert(code.match(/fetch\s*\(\s*('|")\/json\/cats\.json\1\s*\)/g));
```
</section>
Your code should use `then` to convert the response to JSON.
## Challenge Seed
<section id='challengeSeed'>
```js
assert(
code.match(
/\.then\s*\(\s*(response|\(\s*response\s*\))\s*=>\s*response\s*\.json\s*\(\s*\)\s*\)/g
)
);
```
<div id='html-seed'>
Your code should use `then` to handle the data converted to JSON by the other `then`.
```js
assert(code.match(/\.then\s*\(\s*(data|\(\s*data\s*\))\s*=>\s*{[^}]*}\s*\)/g));
```
Your code should get the element with id `message` and change its inner HTML to the string of JSON data.
```js
assert(
code.match(
/document\s*\.getElementById\s*\(\s*('|")message\1\s*\)\s*\.innerHTML\s*=\s*JSON\s*\.\s*stringify\s*\(\s*data\s*\)/g
)
);
```
# --seed--
## --seed-contents--
```html
<script>
@ -107,14 +121,7 @@ tests:
</p>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<script>
@ -164,5 +171,3 @@ tests:
</button>
</p>
```
</section>

100
curriculum/challenges/english/04-data-visualization/json-apis-and-ajax/get-json-with-the-javascript-xmlhttprequest-method.md
View File

@ -5,14 +5,20 @@ challengeType: 6
forumTopicId: 301502
---
## Description
<section id='description'>
# --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. You'll learn how to update HTML with the data we get from APIs using a technology called AJAX.
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>.
JSON syntax looks very similar to JavaScript object literal notation. JSON has object properties and their current values, sandwiched between a `{` and a `}`.
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.
However, JSON transmitted by APIs are sent as `bytes`, and your application receives it as a `string`. These can be converted into JavaScript objects, but they are not JavaScript objects by default. The `JSON.parse` method parses the string and constructs the JavaScript object described by it.
You can request the JSON from freeCodeCamp's Cat Photo API. Here's the code you can put in your click event to do this:
```js
@ -25,42 +31,63 @@ req.onload = function(){
};
```
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.
</section>
Here's a review of what each piece is doing. The JavaScript `XMLHttpRequest` object has a number of properties and methods that are used to transfer data. First, an instance of the `XMLHttpRequest` object is created and saved in the `req` variable. Next, the `open` method initializes a request - this example is requesting data from an API, therefore is a "GET" request. The second argument for `open` is the URL of the API you are requesting data from. The third argument is a Boolean value where `true` makes it an asynchronous request. The `send` method sends the request. Finally, the `onload` event handler parses the returned data and applies the `JSON.stringify` method to convert the JavaScript object into a string. This string is then inserted as the message text.
# --instructions--
## Instructions
<section id='instructions'>
Update the code to create and send a "GET" request to the freeCodeCamp 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.
</section>
## Tests
<section id='tests'>
# --hints--
```yml
tests:
- text: Your code should create a new <code>XMLHttpRequest</code>.
testString: assert(code.match(/new\s+?XMLHttpRequest\(\s*?\)/g));
- text: Your code should use the <code>open</code> method to initialize a "GET" request to the freeCodeCamp Cat Photo API.
testString: assert(code.match(/\.open\(\s*?('|")GET\1\s*?,\s*?('|")\/json\/cats\.json\2\s*?,\s*?true\s*?\)/g));
- text: Your code should use the <code>send</code> method to send the request.
testString: assert(code.match(/\.send\(\s*\)/g));
- text: Your code should have an <code>onload</code> event handler set to a function.
testString: assert(code.match(/\.onload\s*=\s*(function|\(\s*?\))\s*?(\(\s*?\)|\=\>)\s*?{/g));
- text: Your code should use the <code>JSON.parse</code> method to parse the <code>responseText</code>.
testString: assert(code.match(/JSON\s*\.parse\(\s*.*\.responseText\s*\)/g));
- text: Your code should get the element with class <code>message</code> and change its inner HTML to the string of JSON data.
testString: assert(code.match(/document\s*\.getElementsByClassName\(\s*?('|")message\1\s*?\)\[0\]\s*\.innerHTML\s*?=\s*?JSON\.stringify\(.+?\)/g));
Your code should create a new `XMLHttpRequest`.
```js
assert(code.match(/new\s+?XMLHttpRequest\(\s*?\)/g));
```
</section>
Your code should use the `open` method to initialize a "GET" request to the freeCodeCamp Cat Photo API.
## Challenge Seed
<section id='challengeSeed'>
```js
assert(
code.match(
/\.open\(\s*?('|")GET\1\s*?,\s*?('|")\/json\/cats\.json\2\s*?,\s*?true\s*?\)/g
)
);
```
<div id='html-seed'>
Your code should use the `send` method to send the request.
```js
assert(code.match(/\.send\(\s*\)/g));
```
Your code should have an `onload` event handler set to a function.
```js
assert(
code.match(/\.onload\s*=\s*(function|\(\s*?\))\s*?(\(\s*?\)|\=\>)\s*?{/g)
);
```
Your code should use the `JSON.parse` method to parse the `responseText`.
```js
assert(code.match(/JSON\s*\.parse\(\s*.*\.responseText\s*\)/g));
```
Your code should get the element with class `message` and change its inner HTML to the string of JSON data.
```js
assert(
code.match(
/document\s*\.getElementsByClassName\(\s*?('|")message\1\s*?\)\[0\]\s*\.innerHTML\s*?=\s*?JSON\.stringify\(.+?\)/g
)
);
```
# --seed--
## --seed-contents--
```html
<script>
@ -112,14 +139,7 @@ tests:
</p>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<script>
@ -173,5 +193,3 @@ tests:
</button>
</p>
```
</section>

49
curriculum/challenges/english/04-data-visualization/json-apis-and-ajax/handle-click-events-with-javascript-using-the-onclick-property.md
View File

@ -5,9 +5,9 @@ challengeType: 6
forumTopicId: 301503
---
## Description
<section id='description'>
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:
# --description--
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 `DOMContentLoaded`. Here's the code that does this:
```js
document.addEventListener('DOMContentLoaded', function() {
@ -15,37 +15,33 @@ document.addEventListener('DOMContentLoaded', function() {
});
```
You can implement event handlers that go inside of the <code>DOMContentLoaded</code> function. You can implement an <code>onclick</code> event handler which triggers when the user clicks on the element with id <code>getMessage</code>, by adding the following code:
You can implement event handlers that go inside of the `DOMContentLoaded` function. You can implement an `onclick` event handler which triggers when the user clicks on the element with id `getMessage`, by adding the following code:
```js
document.getElementById('getMessage').onclick = function(){};
```
</section>
# --instructions--
## Instructions
<section id='instructions'>
Add a click event handler inside of the <code>DOMContentLoaded</code> function for the element with id of <code>getMessage</code>.
</section>
Add a click event handler inside of the `DOMContentLoaded` function for the element with id of `getMessage`.
## Tests
<section id='tests'>
# --hints--
```yml
tests:
- text: Your code should use the <code>document.getElementById</code> method to select the <code>getMessage</code> element.
testString: assert(code.match(/document\s*\.getElementById\(\s*?('|")getMessage\1\s*?\)/g));
- text: Your code should add an <code>onclick</code> event handler.
testString: assert(typeof document.getElementById('getMessage').onclick === 'function');
Your code should use the `document.getElementById` method to select the `getMessage` element.
```js
assert(code.match(/document\s*\.getElementById\(\s*?('|")getMessage\1\s*?\)/g));
```
</section>
Your code should add an `onclick` event handler.
## Challenge Seed
<section id='challengeSeed'>
```js
assert(typeof document.getElementById('getMessage').onclick === 'function');
```
<div id='html-seed'>
# --seed--
## --seed-contents--
```html
<script>
@ -94,14 +90,7 @@ tests:
</p>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<script>
@ -148,5 +137,3 @@ tests:
</button>
</p>
```
</section>

92
curriculum/challenges/english/04-data-visualization/json-apis-and-ajax/post-data-with-the-javascript-xmlhttprequest-method.md
View File

@ -5,10 +5,11 @@ challengeType: 6
forumTopicId: 301504
---
## Description
<section id='description'>
# --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:
JavaScript's `XMLHttpRequest` method is also used to post data to a server. Here's an example:
```js
const xhr = new XMLHttpRequest();
@ -24,43 +25,61 @@ const body = JSON.stringify({ userName: userName, suffix: ' loves cats!' });
xhr.send(body);
```
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 201 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>body</code> value, which the <code>userName</code> key was given by the user in the <code>input</code> field.
</section>
You've seen several of these methods before. Here the `open` method initializes the request as a "POST" to the given URL of the external resource, and uses the `true` Boolean to make it asynchronous. The `setRequestHeader` method sets the value of an HTTP request header, which contains information about the sender and the request. It must be called after the `open` method, but before the `send` method. The two parameters are the name of the header and the value to set as the body of that header. Next, the `onreadystatechange` event listener handles a change in the state of the request. A `readyState` of 4 means the operation is complete, and a `status` of 201 means it was a successful request. The document's HTML can be updated. Finally, the `send` method sends the request with the `body` value, which the `userName` key was given by the user in the `input` field.
# --instructions--
## Instructions
<section id='instructions'>
Update the code so it makes a "POST" request to the API endpoint. Then type your name in the input field and click "Send Message". Your AJAX function should replace "Reply from Server will be here." with data from the server. Format the response to display your name appended with " loves cats".
</section>
## Tests
<section id='tests'>
# --hints--
```yml
tests:
- text: Your code should create a new <code>XMLHttpRequest</code>.
testString: assert(code.match(/new\s+?XMLHttpRequest\(\s*?\)/g));
- text: Your code should use the <code>open</code> method to initialize a "POST" request to the server.
testString: assert(code.match(/\.open\(\s*?('|")POST\1\s*?,\s*?url\s*?,\s*?true\s*?\)/g));
- text: Your code should use the <code>setRequestHeader</code> method.
testString: assert(code.match(/\.setRequestHeader\(\s*?('|")Content-Type\1\s*?,\s*?('|")application\/json;\s*charset=UTF-8\2\s*?\)/g));
- text: Your code should have an <code>onreadystatechange</code> event handler set to a function.
testString: assert(code.match(/\.onreadystatechange\s*?=/g));
- text: Your code should get the element with class <code>message</code> and change its <code>textContent</code> to "<code>userName</code> loves cats"
testString: assert(code.match(/document\.getElementsByClassName\(\s*?('|")message\1\s*?\)\[0\]\.textContent\s*?=\s*?.+?\.userName\s*?\+\s*?.+?\.suffix/g));
- text: Your code should use the <code>send</code> method.
testString: assert(code.match(/\.send\(\s*?body\s*?\)/g));
Your code should create a new `XMLHttpRequest`.
```js
assert(code.match(/new\s+?XMLHttpRequest\(\s*?\)/g));
```
</section>
Your code should use the `open` method to initialize a "POST" request to the server.
## Challenge Seed
<section id='challengeSeed'>
```js
assert(code.match(/\.open\(\s*?('|")POST\1\s*?,\s*?url\s*?,\s*?true\s*?\)/g));
```
<div id='html-seed'>
Your code should use the `setRequestHeader` method.
```js
assert(
code.match(
/\.setRequestHeader\(\s*?('|")Content-Type\1\s*?,\s*?('|")application\/json;\s*charset=UTF-8\2\s*?\)/g
)
);
```
Your code should have an `onreadystatechange` event handler set to a function.
```js
assert(code.match(/\.onreadystatechange\s*?=/g));
```
Your code should get the element with class `message` and change its `textContent` to "`userName` loves cats"
```js
assert(
code.match(
/document\.getElementsByClassName\(\s*?('|")message\1\s*?\)\[0\]\.textContent\s*?=\s*?.+?\.userName\s*?\+\s*?.+?\.suffix/g
)
);
```
Your code should use the `send` method.
```js
assert(code.match(/\.send\(\s*?body\s*?\)/g));
```
# --seed--
## --seed-contents--
```html
<script>
@ -118,14 +137,7 @@ tests:
</p>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<script>
@ -191,5 +203,3 @@ tests:
</button>
</p>
```
</section>

43
curriculum/challenges/english/04-data-visualization/json-apis-and-ajax/pre-filter-json-to-get-the-data-you-need.md
View File

@ -5,10 +5,12 @@ challengeType: 6
forumTopicId: 18257
---
## Description
<section id='description'>
# --description--
If you don't want to render every cat photo you get from the freeCodeCamp 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.
Given that the JSON data is stored in an array, you can use the `filter` method to filter out the cat whose "id" key has a value of 1.
Here's the code to do this:
```js
@ -17,29 +19,21 @@ json = json.filter(function(val) {
});
```
</section>
# --instructions--
## Instructions
<section id='instructions'>
Add code to <code>filter</code> the json data to remove the cat with the "id" value of 1.
</section>
Add code to `filter` the json data to remove the cat with the "id" value of 1.
## Tests
<section id='tests'>
# --hints--
```yml
tests:
- text: Your code should use the <code>filter</code> method.
testString: assert(code.match(/json\.filter/g));
Your code should use the `filter` method.
```js
assert(code.match(/json\.filter/g));
```
</section>
# --seed--
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
## --seed-contents--
```html
<script>
@ -106,14 +100,7 @@ tests:
</p>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<script>
@ -181,5 +168,3 @@ tests:
</button>
</p>
```
</section>

56
curriculum/challenges/english/04-data-visualization/json-apis-and-ajax/render-images-from-data-sources.md
View File

@ -5,37 +5,37 @@ challengeType: 6
forumTopicId: 18265
---
## Description
<section id='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.
# --description--
The last few challenges showed that each object in the JSON array contains an `imageLink` key with a value that is the URL of a cat's image.
When you're looping through these objects, you can use this `imageLink` property to display this image in an `img` element.
Here's the code that does this:
<code>html += "&lt;img src = '" + val.imageLink + "' " + "alt='" + val.altText + "'&gt;";</code>
</section>
## Instructions
<section id='instructions'>
Add code to use the <code>imageLink</code> and <code>altText</code> properties in an <code>img</code> tag.
</section>
`html += "<img src = '" + val.imageLink + "' " + "alt='" + val.altText + "'>";`
## Tests
<section id='tests'>
# --instructions--
```yml
tests:
- text: You should use the <code>imageLink</code> property to display the images.
testString: assert(code.match(/val\.imageLink/g));
- text: You should use the <code>altText</code> for the alt attribute values of the images.
testString: assert(code.match(/val\.altText/g));
Add code to use the `imageLink` and `altText` properties in an `img` tag.
# --hints--
You should use the `imageLink` property to display the images.
```js
assert(code.match(/val\.imageLink/g));
```
</section>
You should use the `altText` for the alt attribute values of the images.
## Challenge Seed
<section id='challengeSeed'>
```js
assert(code.match(/val\.altText/g));
```
<div id='html-seed'>
# --seed--
## --seed-contents--
```html
<script>
@ -98,14 +98,7 @@ tests:
</p>
```
</div>
</section>
## Solution
<section id='solution'>
# --solutions--
```html
<script>
@ -164,7 +157,4 @@ tests:
Get Message
</button>
</p>
```
</section>