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
mbpiner
@mbpiner
It's a search for the term "philosophy" with callback=? at the end to request the JSON and JSONP
&action=query&generator=search&gsrnamespace=0&gsrlimit=10&prop=pageimages|extracts&pilimit=max&exintro&explaintext&exsentences=1&exlimit=max&gsrsearch=philosophy&callback=?
is good for looking at it in an easier to read format
my problem is I have to get to the data which is at jsonData["query"]["pages"]
Kaz Baig
@kbaig
@mbpiner can you link the api call you're making or a pen
mbpiner
@mbpiner
Oops, sorry thought above was
Kaz Baig
@kbaig
full call
mbpiner
@mbpiner
at jsonData["query"]["pages"], the next element I have to select by to get further in the object is a random ass number
and jsonData["query"]["pages"][0] returns undefined so I cant call it by that
is there a jquery method or some library or something I can use to just return the first child, that would function similarly to jsonData["query"]["pages"][0]?
mbpiner
@mbpiner
I've googled around but i've realized after you and alpox helping me its a lot quicker just to ask someone who knows
Kaz Baig
@kbaig
and then iterate/map over the array
mbpiner
@mbpiner
Shoot that's right! Totally forgot about Object.keys()
Kaz Baig
@kbaig
Honestly, it should really be an array they give us
But it's fine
quickspeedy
@quickspeedy
How do I center the weather box including search bar? I tried using height: 100vh; and it don't work. I tried rearranging positioning but it makes the weather box and searchbar out of place.
Codepen: https://codepen.io/quickspeedy/pen/BmBWoQ
Kaz Baig
@kbaig
@quickspeedy vertical and horizontal you mean?
quickspeedy
@quickspeedy
vertical center
@kbaig
Kaz Baig
@kbaig
@quickspeedy here you go
.centerSection {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
mbpiner
@mbpiner
You could get it further down with margin-top:
quickspeedy
@quickspeedy
Was it necessary to include flex? @kbaig
mbpiner
@mbpiner
@kbaig thank you btw
CamperBot
@camperbot
mbpiner sends brownie points to @kbaig :sparkles: :thumbsup: :sparkles:
:cookie: 387 | @kbaig |http://www.freecodecamp.com/kbaig
Kaz Baig
@kbaig
i mean you could do it using transform: translate and position: relative but why bother
quickspeedy
@quickspeedy
@kbaig Ok all right thanks!
CamperBot
@camperbot
quickspeedy sends brownie points to @kbaig :sparkles: :thumbsup: :sparkles:
:cookie: 388 | @kbaig |http://www.freecodecamp.com/kbaig
Kaz Baig
@kbaig
np friendos
@quickspeedy would prob look better if you did 75vh instead of 100 btw
quickspeedy
@quickspeedy
@kbaig Now that you mentioned it, it actually does look better.
Thanks again!
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