Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
  • Aug 17 09:32
    User @bjorno43 unbanned @linkin-park
  • Jun 20 21:19
    @bjorno43 banned @shenerd140
  • Apr 25 17:13
    @mstellaluna banned @cmal
  • Jan 08 22:05
    @mstellaluna banned @dertiuss323
  • Nov 07 2018 04:42
    User @texas2010 unbanned @ows-ali
  • Nov 02 2018 16:25
    @texas2010 banned @ows-ali
  • Oct 12 2018 05:50
    @bjorno43 banned @NACH74
  • Oct 05 2018 23:02
    @mstellaluna banned @JomoPipi
  • Sep 16 2018 12:21
    @bjorno43 banned @yash-kedia
  • Sep 16 2018 12:16
    @bjorno43 banned @vnikifirov
  • Sep 05 2018 08:12
    User @bjorno43 unbanned @androuino
  • Sep 05 2018 07:38
    @bjorno43 banned @androuino
  • Aug 23 2018 16:57
    User @bjorno43 unbanned @rahuldkjain
  • Aug 23 2018 16:23
    @bjorno43 banned @rahuldkjain
  • Jul 29 2018 14:13
    User @bjorno43 unbanned @jkyereh
  • Jul 29 2018 01:00
    @bjorno43 banned @jkyereh
  • Jul 10 2018 22:09
    @bjorno43 banned @manafn
  • Jul 06 2018 15:20
    @texas2010 banned @imlegend19
  • Jul 03 2018 12:28
    @bjorno43 banned @vbvmatta
  • Jun 29 2018 13:54
    @bjorno43 banned @OGTechnoBoy
Kaz Baig
@kbaig
@quickspeedy no prob, exact vertical center is not something human eyes like, even though we intuitively think they would
quickspeedy
@quickspeedy
@kbaig Yeah that is true. Something I can learn for UI design.
quickspeedy
@quickspeedy

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
DennisLoska
@DennisLoska
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
quickspeedy
@quickspeedy
Never tried using node js. I'll look further in how to create an ajax request then. Thanks @DennisLoska
CamperBot
@camperbot
quickspeedy sends brownie points to @dennisloska :sparkles: :thumbsup: :sparkles:
:cookie: 187 | @dennisloska |http://www.freecodecamp.com/dennisloska
DennisLoska
@DennisLoska
well its pretty much the same you did already, but instead of the api-request in the URL you would type the path to your script for example /server/getWeather.php <-- API request will be done here
DennisLoska
@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();
}
https://dennisloska.github.io/QuoteMashine/
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
quickspeedy
@quickspeedy
Ok thanks for the advice!
DennisLoska
@DennisLoska
 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();
try to hack it somehow like this maybe it will work :smile:
quickspeedy
@quickspeedy
Ok I'll try it. Thanks @DennisLoska
CamperBot
@camperbot
quickspeedy sends brownie points to @dennisloska :sparkles: :thumbsup: :sparkles:
api offline
korzo
@korzo
@DennisLoska What's the point of location.reload() ?
DennisLoska
@DennisLoska
@korzo if I remember correctly this will reload the page , yes the whole page so it is realy bad actually as I said and I would only use it if you can't effort to host your own stuff
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:
korzo
@korzo
@DennisLoska yeah, I was trying to decipher, why you reload the page after you append the script :)
why you didn't use JSONP?
alpox
@alpox
@korzo i think this was an attemt to use jsonp. Just only followed the way half through :D
korzo
@korzo
@alpox I ask before jsonp works as long as you disable location.reload()
mbpiner
@mbpiner
@alpox Hows it going man? I've got a question about the wiki project
DennisLoska
@DennisLoska
first time hearing of it - yeah use JSONP if this is the actual way to go
Lee
@LeeConnelly12

How do I tell a function in one of my js scripts to wait until another js script has finished loading?

relying on the order of the script tags in my html seems...Careless?

korzo
@korzo
@LeeConnelly12 As long as you don't add async of defer attribute, script tags are loaded in the order they are in html
Lee
@LeeConnelly12
@korzo ok ty
CamperBot
@camperbot
leeconnelly12 sends brownie points to @korzo :sparkles: :thumbsup: :sparkles:
:cookie: 686 | @korzo |http://www.freecodecamp.com/korzo
Rabin Shrestha
@jyapujuju
ul li:after {
  content: "|"; }
ul li:last-child:after {
  content: ""; }
not working on bootstrap
any idea
mbpiner
@mbpiner
Have you tried separating them with commas?
ul and li
Rabin Shrestha
@jyapujuju
this is generate from sass
@mbpiner
ronald
@ronstarcool
folks, how to render a comp in react router on all routes, but the home route? i know we can use regex in react router, but i cant get it to work some how
<div className="router" style={{ width: "100% !important" }}>
            <Header />
            <Route path="/" component={Nav} />
            <Route exact path="/" component={Home} />
            <Route path="/markets" component={Markets} />
            <Route path="/marketnew" component={MarketNew} />
          </div>
i wanna render the Nav only when nót on home
i tried this: "/.*"
so, a slash, and then anything
but no luck there
Pascal Clanget
@Gh05d
Hi guys, I created an app with create-react-app, ejected because I want to use scss, copied the webpack.dev files for development and production from another project and when I start the app, I now get this error:
Module build failed: Error: Node Sass does not yet support your current environment: Linux 64-bit with Unsupported runtime (57)
I took the old files from the trash and made the necessary modifies to use the sass loader, but it still doesn't work.
Also removed the node_modules and reinstalled
Dan Couper
@DanCouper
I assume you're using Node 8.x.x? Older versions of node-sass are not supported on that runtime. you need to upgrade (npm install node-sass@latest or equivalent). I've this constantly since I upgraded node, every project I've touched in has a lockfile with a specific version on node-sass, so I get that error maybe a couple times a day for the last few weeks
As
Pascal Clanget
@Gh05d
@DanCouper Nope, was just me being stupid. Forgot to install the sass-loader :worried:
Works now, obviously. Sorry for the inconvience
Dan Couper
@DanCouper
Ah, makes sense!