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

fix(guide) add stubs, update spellings and prepare for move (#36531)

Browse Source 
* fix(guide) add stubs and correct file path misspellings and pr… (#36528)

* fix: corrected file path to match curriculum

* fix: renamed to newer challenge name

* fix: added solutions to articles from challenge files

* fix: added missing .english to file name

* fix: added missing title to guide article

* fix: correct solution for guide article

* fix: replaced stub with hint

* fix: added space in Hint headers

* fix: added solution to guide article

* fix: added solution to guide article

* test: replaced stub with hint and solution

* fix: add Problem number: to title

* fix: changed generatorexponential to correct name

* fix: renamed knight's tour to knights-tour

* fix: updated guide article
This commit is contained in:
mrugesh
2019-07-30 00:25:58 +05:30
committed by GitHub
parent e23c80a021
commit 91df817cfe
89 changed files with 3074 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
guide/english/certifications/data-visualization/json-apis-and-ajax/get-geolocation-data-to-find-a-users-gps-coordinates/index.md
View File

@@ -3,8 +3,28 @@ title: Get Geolocation Data to Find A User's GPS Coordinates
---
# Get Geolocation Data to Find A User's GPS Coordinates
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/data-visualization/json-apis-and-ajax/get-geolocation-data-to-find-a-users-gps-coordinates/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
--
## Hints
<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
### Hint 1
Every browser has a built in navigator that can give us this information.
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
The navigator will get our 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 some code that does this:
```javascript
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
$("#data").html("latitude: " + position.coords.latitude + "<br>longitude: " + position.coords.longitude);
});
}
```

60
guide/english/certifications/data-visualization/json-apis-and-ajax/get-json-with-the-javascript-fetch-method/index.md Normal file
View File

@@ -0,0 +1,60 @@
---
title: Get JSON with the JavaScript fetch method
---
# Get JSON with the JavaScript fetch method
---
## Solutions
<details><summary>Solution 1 (Click to Show/Hide)</summary>
```html
<script>
document.addEventListener('DOMContentLoaded',function(){
document.getElementById('getMessage').onclick= () => {
fetch('/json/cats.json')
.then(response => response.json())
.then(data => {
document.getElementById('message').innerHTML=JSON.stringify(data);
})
};
});
</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 id="message">
The message will go here
</p>
<p>
<button id="getMessage">
Get Message
</button>
</p>
```
</details>

72
guide/english/certifications/data-visualization/json-apis-and-ajax/pre-filter-json-to-get-the-data-you-need/index.md
View File

@@ -3,8 +3,74 @@ title: Pre-filter JSON to Get the Data You Need
---
# Pre-filter JSON to Get the Data You Need
This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/data-visualization/json-apis-and-ajax/pre-filter-json-to-get-the-data-you-need/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
---
## Solutions
<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
<details><summary>Solution 1 (Click to Show/Hide)</summary>
<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds -->
```html
<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
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 box">
The message will go here
</p>
<p>
<button id="getMessage">
Get Message
</button>
</p>
```
</details>