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

fix(curriculum): Added necessary variable declarations for JSON APIs and Ajax challenges (#37535)

Browse Source 
* fix: added necessary variable declarations

* fix: added spacing

Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

* fix: added spacing

Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

* fix: added spacing

Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

* fix: added spacing

Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

* fix: added spacing

Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

* fix: added spacing

Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

* fix: added spacing

Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

* fix: added spacing

Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

* fix: added spacing

Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

* fix: added spacing

Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

* fix: added spacing

Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

* fix: added spacing

Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

* fix: added spacing

Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

* fix: added spacing

Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

* fix: added spacing

Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

* fix: deleted unnecessary file

* fix: corrected some spacing

Co-Authored-By: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

* fix: indented code sections
This commit is contained in:
Randell Dawson
2019-11-25 10:21:17 -08:00
committed by Tom
parent 62e1464eb7
commit 4fbe02abba
9 changed files with 426 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -48,22 +48,22 @@ tests:
```html ```html
<script> <script>
document.addEventListener('DOMContentLoaded',function(){ document.addEventListener('DOMContentLoaded', function(){
document.getElementById('getMessage').onclick=function(){ document.getElementById('getMessage').onclick = function(){
req=new XMLHttpRequest(); const req = new XMLHttpRequest();
req.open("GET",'/json/cats.json',true); req.open("GET",'/json/cats.json', true);
req.send(); req.send();
req.onload=function(){ req.onload=function(){
json=JSON.parse(req.responseText); const json = JSON.parse(req.responseText);
document.getElementsByClassName('message')[0].innerHTML=JSON.stringify(json); document.getElementsByClassName('message')[0].innerHTML = JSON.stringify(json);
// Add your code below this line // Add your code below this line
// Add your code above this line // Add your code above this line
}; };
}; };
}); });
</script> </script>
<style> <style>
body { body {
text-align: center; text-align: center;
@ -90,6 +90,7 @@ tests:
border: 1px solid #0F5897; border: 1px solid #0F5897;
} }
</style> </style>
<h1>Cat Photo Finder</h1> <h1>Cat Photo Finder</h1>
<p class="message box"> <p class="message box">
The message will go here The message will go here
@ -110,8 +111,60 @@ tests:
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <script>
document.addEventListener('DOMContentLoaded', function(){
document.getElementById('getMessage').onclick = function(){
const req = new XMLHttpRequest();
req.open("GET",'/json/cats.json', true);
req.send();
req.onload=function(){
const json = JSON.parse(req.responseText);
document.getElementsByClassName('message')[0].innerHTML = JSON.stringify(json);
// Add your code below this line
console.log(json[2].codeNames[1]);
// 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">
The message will go here
</p>
<p>
<button id="getMessage">
Get Message
</button>
</p>
``` ```
</section> </section>

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

@ -37,8 +37,8 @@ tests:
```html ```html
<script> <script>
document.addEventListener('DOMContentLoaded',function(){ document.addEventListener('DOMContentLoaded', function(){
document.getElementById('getMessage').onclick=function(){ document.getElementById('getMessage').onclick = function(){
// Add your code below this line // Add your code below this line
@ -46,6 +46,7 @@ tests:
} }
}); });
</script> </script>
<style> <style>
body { body {
text-align: center; text-align: center;
@ -72,6 +73,7 @@ tests:
border: 1px solid #0F5897; border: 1px solid #0F5897;
} }
</style> </style>
<h1>Cat Photo Finder</h1> <h1>Cat Photo Finder</h1>
<p class="message box"> <p class="message box">
The message will go here The message will go here
@ -92,8 +94,54 @@ tests:
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <script>
document.addEventListener('DOMContentLoaded',function(){
document.getElementById('getMessage').onclick = function(){
// Add your code below this line
document.getElementsByClassName('message')[0].textContent = "Here is the message";
// 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">
The message will go here
</p>
<p>
<button id="getMessage">
Get Message
</button>
</p>
``` ```
</section> </section>

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

@ -14,8 +14,9 @@ Then, loop through the JSON, adding HTML to the variable that wraps the key name
Here's the code that does this: Here's the code that does this:
```js ```js
let html = "";
json.forEach(function(val) { json.forEach(function(val) {
var keys = Object.keys(val); const keys = Object.keys(val);
html += "<div class = 'cat'>"; html += "<div class = 'cat'>";
keys.forEach(function(key) { keys.forEach(function(key) {
html += "<strong>" + key + "</strong>: " + val[key] + "<br>"; html += "<strong>" + key + "</strong>: " + val[key] + "<br>";
@ -68,24 +69,24 @@ tests:
```html ```html
<script> <script>
document.addEventListener('DOMContentLoaded',function(){ document.addEventListener('DOMContentLoaded', function(){
document.getElementById('getMessage').onclick=function(){ document.getElementById('getMessage').onclick = function(){
req=new XMLHttpRequest(); const req = new XMLHttpRequest();
req.open("GET",'/json/cats.json',true); req.open("GET",'/json/cats.json',true);
req.send(); req.send();
req.onload=function(){ req.onload = function(){
json=JSON.parse(req.responseText); const json = JSON.parse(req.responseText);
var html = ""; let html = "";
// Add your code below this line // Add your code below this line
// Add your code above this line // Add your code above this line
document.getElementsByClassName('message')[0].innerHTML=html; document.getElementsByClassName('message')[0].innerHTML = html;
}; };
}; };
}); });
</script> </script>
<style> <style>
body { body {
text-align: center; text-align: center;
@ -112,6 +113,7 @@ tests:
border: 1px solid #0F5897; border: 1px solid #0F5897;
} }
</style> </style>
<h1>Cat Photo Finder</h1> <h1>Cat Photo Finder</h1>
<p class="message box"> <p class="message box">
The message will go here The message will go here
@ -125,15 +127,73 @@ tests:
</div> </div>
</section> </section>
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <script>
document.addEventListener('DOMContentLoaded', function(){
document.getElementById('getMessage').onclick = function(){
const req = new XMLHttpRequest();
req.open("GET",'/json/cats.json',true);
req.send();
req.onload = function(){
const json = JSON.parse(req.responseText);
let html = "";
// Add your code below this line
json.forEach(function(val) {
var keys = Object.keys(val);
html += "<div class = 'cat'>";
keys.forEach(function(key) {
html += "<strong>" + key + "</strong>: " + val[key] + "<br>";
});
html += "</div><br>";
});
// 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">
The message will go here
</p>
<p>
<button id="getMessage">
Get Message
</button>
</p>
``` ```
</section> </section>

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

@ -74,8 +74,19 @@ tests:
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <script>
``` // Add your code below this line
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
document.getElementById('data').innerHTML = "latitude: " + position.coords.latitude + "<br>longitude: " + position.coords.longitude;
});
}
// Add your code above this line
</script>
<h4>You are here:</h4>
<div id="data">
</div>
</section> </section>

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

@ -16,12 +16,12 @@ However, JSON transmitted by APIs are sent as <code>bytes</code>, and your appli
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: 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 ```js
req=new XMLHttpRequest(); const req = new XMLHttpRequest();
req.open("GET",'/json/cats.json',true); req.open("GET",'/json/cats.json',true);
req.send(); req.send();
req.onload=function(){ req.onload = function(){
json=JSON.parse(req.responseText); const json = JSON.parse(req.responseText);
document.getElementsByClassName('message')[0].innerHTML=JSON.stringify(json); document.getElementsByClassName('message')[0].innerHTML = JSON.stringify(json);
}; };
``` ```
@ -64,8 +64,8 @@ tests:
```html ```html
<script> <script>
document.addEventListener('DOMContentLoaded',function(){ document.addEventListener('DOMContentLoaded', function(){
document.getElementById('getMessage').onclick=function(){ document.getElementById('getMessage').onclick = function(){
// Add your code below this line // Add your code below this line
@ -73,6 +73,7 @@ tests:
}; };
}); });
</script> </script>
<style> <style>
body { body {
text-align: center; text-align: center;
@ -99,6 +100,7 @@ tests:
border: 1px solid #0F5897; border: 1px solid #0F5897;
} }
</style> </style>
<h1>Cat Photo Finder</h1> <h1>Cat Photo Finder</h1>
<p class="message box"> <p class="message box">
The message will go here The message will go here
@ -119,11 +121,11 @@ tests:
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required // solution required
<script> <script>
document.addEventListener('DOMContentLoaded',function(){ document.addEventListener('DOMContentLoaded',function(){
document.getElementById('getMessage').onclick=function(){ document.getElementById('getMessage').onclick = function(){
const req = new XMLHttpRequest(); const req = new XMLHttpRequest();
req.open('GET', '/json/cats.json', true); req.open('GET', '/json/cats.json', true);
req.send(); req.send();
@ -134,6 +136,7 @@ tests:
}; };
}); });
</script> </script>
<style> <style>
body { body {
text-align: center; text-align: center;
@ -160,6 +163,7 @@ tests:
border: 1px solid #0F5897; border: 1px solid #0F5897;
} }
</style> </style>
<h1>Cat Photo Finder</h1> <h1>Cat Photo Finder</h1>
<p class="message box"> <p class="message box">
The message will go here The message will go here

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

@ -10,7 +10,7 @@ forumTopicId: 301503
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: 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:
```js ```js
document.addEventListener('DOMContentLoaded',function() { document.addEventListener('DOMContentLoaded', function() {
}); });
``` ```
@ -18,7 +18,7 @@ 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 <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:
```js ```js
document.getElementById('getMessage').onclick=function(){}; document.getElementById('getMessage').onclick = function(){};
``` ```
</section> </section>
@ -49,13 +49,14 @@ tests:
```html ```html
<script> <script>
document.addEventListener('DOMContentLoaded',function(){ document.addEventListener('DOMContentLoaded', function(){
// Add your code below this line // Add your code below this line
// Add your code above this line // Add your code above this line
}); });
</script> </script>
<style> <style>
body { body {
text-align: center; text-align: center;
@ -102,14 +103,15 @@ tests:
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
<script> <script>
document.addEventListener('DOMContentLoaded',function(){ document.addEventListener('DOMContentLoaded', function(){
// Add your code below this line // Add your code below this line
document.getElementById('getMessage').onclick=function(){} document.getElementById('getMessage').onclick = function(){ };
// Add your code above this line // Add your code above this line
}); });
</script> </script>
<style> <style>
body { body {
text-align: center; text-align: center;

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

@ -67,8 +67,8 @@ tests:
document.addEventListener('DOMContentLoaded', function(){ document.addEventListener('DOMContentLoaded', function(){
document.getElementById('sendMessage').onclick = function(){ document.getElementById('sendMessage').onclick = function(){
var userName = document.getElementById('name').value; const userName = document.getElementById('name').value;
var url = 'https://jsonplaceholder.typicode.com/posts'; const url = 'https://jsonplaceholder.typicode.com/posts';
// Add your code below this line // Add your code below this line
@ -76,6 +76,7 @@ tests:
}; };
}); });
</script> </script>
<style> <style>
body { body {
text-align: center; text-align: center;
@ -102,6 +103,7 @@ tests:
border: 1px solid #0F5897; border: 1px solid #0F5897;
} }
</style> </style>
<h1>Cat Friends</h1> <h1>Cat Friends</h1>
<p class="message box"> <p class="message box">
Reply from Server will be here Reply from Server will be here
@ -126,7 +128,68 @@ tests:
<section id='solution'> <section id='solution'>
```js ```js
// solution required <script>
document.addEventListener('DOMContentLoaded', function(){
document.getElementById('sendMessage').onclick = function(){
const userName = document.getElementById('name').value;
const url = 'https://jsonplaceholder.typicode.com/posts';
// Add your code below this line
const xhr = new XMLHttpRequest();
xhr.open('POST', url, true);
xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 201){
const serverResponse = JSON.parse(xhr.response);
document.getElementsByClassName('message')[0].textContent = serverResponse.userName + serverResponse.suffix;
}
};
const body = JSON.stringify({ userName: userName, suffix: ' loves cats!' });
xhr.send(body);
// 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">
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>
``` ```
</section> </section>

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

@ -43,14 +43,14 @@ tests:
```html ```html
<script> <script>
document.addEventListener('DOMContentLoaded',function(){ document.addEventListener('DOMContentLoaded', function(){
document.getElementById('getMessage').onclick=function(){ document.getElementById('getMessage').onclick = function(){
req=new XMLHttpRequest(); const req = new XMLHttpRequest();
req.open("GET",'/json/cats.json',true); req.open("GET",'/json/cats.json', true);
req.send(); req.send();
req.onload=function(){ req.onload=function(){
json=JSON.parse(req.responseText); let json = JSON.parse(req.responseText);
var html = ""; let html = "";
// Add your code below this line // Add your code below this line
@ -62,11 +62,12 @@ tests:
html += "</div>" html += "</div>"
}); });
document.getElementsByClassName('message')[0].innerHTML=html; document.getElementsByClassName('message')[0].innerHTML = html;
}; };
}; };
}); });
</script> </script>
<style> <style>
body { body {
text-align: center; text-align: center;
@ -93,6 +94,7 @@ tests:
border: 1px solid #0F5897; border: 1px solid #0F5897;
} }
</style> </style>
<h1>Cat Photo Finder</h1> <h1>Cat Photo Finder</h1>
<p class="message box"> <p class="message box">
The message will go here The message will go here
@ -113,8 +115,71 @@ tests:
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <script>
document.addEventListener('DOMContentLoaded', function(){
document.getElementById('getMessage').onclick = function(){
const req = new XMLHttpRequest();
req.open("GET",'/json/cats.json', true);
req.send();
req.onload = function(){
let json = JSON.parse(req.responseText);
let html = "";
// Add your code below this line
json = json.filter(function(val) {
return (val.id !== 1);
});
// 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">
The message will go here
</p>
<p>
<button id="getMessage">
Get Message
</button>
</p>
``` ```
</section> </section>

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

@ -37,14 +37,14 @@ tests:
```html ```html
<script> <script>
document.addEventListener('DOMContentLoaded',function(){ document.addEventListener('DOMContentLoaded', function(){
document.getElementById('getMessage').onclick=function(){ document.getElementById('getMessage').onclick = function(){
req=new XMLHttpRequest(); const req=new XMLHttpRequest();
req.open("GET",'/json/cats.json',true); req.open("GET",'/json/cats.json',true);
req.send(); req.send();
req.onload=function(){ req.onload = function(){
json=JSON.parse(req.responseText); const json = JSON.parse(req.responseText);
var html = ""; let html = "";
json.forEach(function(val) { json.forEach(function(val) {
html += "<div class = 'cat'>"; html += "<div class = 'cat'>";
// Add your code below this line // Add your code below this line
@ -58,6 +58,7 @@ tests:
}; };
}); });
</script> </script>
<style> <style>
body { body {
text-align: center; text-align: center;
@ -104,8 +105,64 @@ tests:
## Solution ## Solution
<section id='solution'> <section id='solution'>
```js ```html
// solution required <script>
document.addEventListener('DOMContentLoaded', function(){
document.getElementById('getMessage').onclick = function(){
const req = new XMLHttpRequest();
req.open("GET",'/json/cats.json',true);
req.send();
req.onload = function(){
const json = JSON.parse(req.responseText);
let html = "";
json.forEach(function(val) {
html += "<div class = 'cat'>";
// Add your code below this line
html += "<img src = '" + val.imageLink + "' " + "alt='" + val.altText + "'>";
// 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">
The message will go here
</p>
<p>
<button id="getMessage">
Get Message
</button>
</p>
``` ```
</section> </section>