@kbaig
:cookie: 387 | @kbaig |http://www.freecodecamp.com/kbaig
:cookie: 388 | @kbaig |http://www.freecodecamp.com/kbaig
@quickspeedy would prob look better if you did 75vh instead of 100 btw
Thanks again!
After trying to call the api when a user type in the location, I get this error:
Failed to load https://autocomplete.wunderground.com/aq?query=San%20F&c=US: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://s.codepen.io' is therefore not allowed access.
Anyone know how to solve this?
Here is the link to codepen: https://codepen.io/quickspeedy/pen/BmBWoQ
Cross site scripting is not allowed, therefore you get this error, you can solve this by using specific service providers, who try to get around that. Normally the backend of your site is requesting data from other servers, and then sends it to the client, so basically the browser/client only talks to your server. What you are trying to do is to make him talk with the API of wunderground at the same time, which because of security is not allowed.
if you have a server create an ajax request to your own php/nodejs/rails whatever backend, where you then make the api request, after processing the request send it back to your client
:cookie: 187 | @dennisloska |http://www.freecodecamp.com/dennisloska
@quickspeedy here is a bit of code I did some months a go for the quote mashine, the request works without a server - XSS still of course won't work but I found a hacky way around it by reloading the whole page, so that it works on hosts where I cant setup a server like github pages
var main = document.getElementsByTagName("main")[0];
/*
* Method not used but works, if forismatic would enable CORS-compatibility :(
*/
/*
function getQuote() {
var xhttp = new XMLHttpRequest();
xhttp.open("POST",
"https://api.forismatic.com/api/1.0/?method=getQuote&key=457653&format=json&lang=en",
true);
if ('withCredentials' in xhttp) {
xhttp.onreadystatechange = function () {
if (this.readyState == 4 && this.status ==
200) {
var quote = JSON.parse(this.responseText);
document.getElementById("quoteField").innerHTML = quote.quoteText + "</br></br>" +
quote.quoteAuthor;
} else {
document.getElementById("quoteField").innerHTML =
"Sorry, something went wrong there." + "</br></br>" + "Dennis, Web-Rookie"
}
};
xhttp.send();
}
}
*/
//dynamically loads in a new script-tag, when the quote-button is clicked
function createJSONPScriptTag() {
//This does not work for some reason with THIS API, so I have to reload the page...
/*
var script_element = document.createElement('script'),
url = "https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&_jsonp=parseQuote"
script_element.setAttribute('src', url);
document.head.appendChild(script_element);
*/
location.reload();
}
the first function is XSS-way and won't work, the second function works but is of course horrible when it comes to performance, but still better than having to buy a server I guess if you want it to work on github
you could try to make something similiar with your weatherApp
var script_element = document.createElement('script'),
url = "https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&_jsonp=parseQuote"
script_element.setAttribute('src', url);
document.head.appendChild(script_element);
location.reload();
api offline
since the project was a random quote mashine i needed to reload the whole page for a new quote
but if you realy only need to make 1 request you dont have to reload the whole page. When you have to do many requests you have a big problem anyway :smile:
:cookie: 686 | @korzo |http://www.freecodecamp.com/korzo