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
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
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()