These are chat archives for FreeCodeCamp/HelpFrontEnd

11th
Aug 2016
jrandallhansen
@jrandallhansen
Aug 11 2016 00:02
is there anyone who can help me with an issue i am having using api call? i need to be able to use variables created in my first call in my second call. also i need to use the variables from my second in my third. how do i accomplish this?
Hadouken
@Harry97
Aug 11 2016 00:04
@jrandallhansen if a variable is declared inside of a function It can't be accessed by another function out of the first function
The only for you to make it possible is by including you second function inside your first
and your third inside your second
Greg Duncan
@GregatGit
Aug 11 2016 00:05
@jrandallhansen you should have http:// at the start
@jrandallhansen js doesn't stop when it is waiting for data - it will execute the next function even if that function is needs data from the first - so the the next function will fail
jrandallhansen
@jrandallhansen
Aug 11 2016 00:08
@Harry97 so I have to nest them all? @GregatGit
Greg Duncan
@GregatGit
Aug 11 2016 00:09
yes
jrandallhansen
@jrandallhansen
Aug 11 2016 00:09
once nested i can use assignment like var='something' rather than using the global declarations i tried as well?
Hadouken
@Harry97
Aug 11 2016 00:10
yeah just simply declare the variables like you usually do
Greg Duncan
@GregatGit
Aug 11 2016 00:10
@jrandallhansen this should help you understand https://www.youtube.com/watch?v=obaSQBBWZLk
jrandallhansen
@jrandallhansen
Aug 11 2016 00:12
ok ill take a look. i tried nesting the functions and still not having success
Greg D
@mosaic-greg
Aug 11 2016 00:13
@NCATrumpet when i use inspect element on your text boxes, the form tag is shown, so maybe the form's z-index is above the text boxes currently? @Harry97
Hadouken
@Harry97
Aug 11 2016 00:15
@jrandallhansen in your very first lines
I believe you forgot to add var before ip
@mosaic-greg I don't think @NCATrumpet is online anymore
jrandallhansen
@jrandallhansen
Aug 11 2016 00:18
@Harry97 on line 5? it is on there and still no good
using a console.log test I can tell for sure that the IP address call is coming back correct. i am having an inheritance error though
or scope error is probably more accurate
Hadouken
@Harry97
Aug 11 2016 00:22
@jrandallhansen I forked your code and working on it right now
I'mma get to ya as soon as I figure things out
Stephen James
@sjames1958gm
Aug 11 2016 00:23
@jrandallhansen Make sure all your URLs have http:// at the front.
If you use http://ip-api.com/json you can get the location information in one API call.
jrandallhansen
@jrandallhansen
Aug 11 2016 00:23
@Harry97 thanks man i am getting so frustrated
CamperBot
@camperbot
Aug 11 2016 00:23
jrandallhansen sends brownie points to @harry97 :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for harry97
Stephen James
@sjames1958gm
Aug 11 2016 00:24
@jrandallhansen I added http:// to the middle API call and got weather info in the page.
@jrandallhansen var ipGeo = "http://freegeoip.net/json/" + ip;
it works now
@jrandallhansen I apologize m8 I should've been more clear about nesting
and how you should've nested functions properly inside of each other
there were also some few modifications here and there but everything work beautifully now
also I was all over the place editing your code so your comments are completely out of place
jrandallhansen
@jrandallhansen
Aug 11 2016 00:27
@Harry97 I dont see what you changed except to add http: to the urls?
what did i mess
Hadouken
@Harry97
Aug 11 2016 00:27
so don't bother reading them
jrandallhansen
@jrandallhansen
Aug 11 2016 00:27
miss*
Hadouken
@Harry97
Aug 11 2016 00:28
lol looks like I forked a pretty old version of your code :D
eh regarding http: and https:
It has to do something called "CORS"
jrandallhansen
@jrandallhansen
Aug 11 2016 00:29
What other changes did you make?
and what is "CORS"?
basically when you make other calls in order to grab something from another website you've to take certain measures
It's a bit of a length
like I said ip wasn't declared
so I went ahead and did
also your freegeoip
you forgot to add https:// before it
you've done all of the heavy lifting
jrandallhansen
@jrandallhansen
Aug 11 2016 00:33
https:// was the missing link
Hadouken
@Harry97
Aug 11 2016 00:33
it was just about few things here and there and the nesting too
Patrick Keogh
@patrickkeogh
Aug 11 2016 00:33
@sorinr very nice page. How to get the white-text? I dont see where you declared it
jrandallhansen
@jrandallhansen
Aug 11 2016 00:34
everything else was the same i am almost positive comparing side by side now. http://codepen.io/jrandall/pen/bZOZjb?editors=1011
the only issue now is that it is not accurate enough. my location comes back as United States LOL
Hadouken
@Harry97
Aug 11 2016 00:34
@jrandallhansen I don't know for sure but by your words It looks like I forked a really old version of your code
jrandallhansen
@jrandallhansen
Aug 11 2016 00:35
i linked the new version then maybe. but ya the only thing holding me back once i tried nesting them was the https:// part
nesting them was just a copy and paste job. maybe you forked my pre-nested version
i think i better try that other API mentioned above to get a more accurate read out
Hadouken
@Harry97
Aug 11 2016 00:36
It doesn't matter anyways :D just make sure to understand every piece of code
jrandallhansen
@jrandallhansen
Aug 11 2016 00:37
@Harry97 haha i suppose that is true. thanks so much for the help. earlier i had an issue when i used https:// . I had to switch to http://
CamperBot
@camperbot
Aug 11 2016 00:37
jrandallhansen sends brownie points to @harry97 :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for harry97
jrandallhansen
@jrandallhansen
Aug 11 2016 00:37
so now i am a bit confused
Hadouken
@Harry97
Aug 11 2016 00:37
about what?
CamperBot
@camperbot
Aug 11 2016 00:37
you need to ask about @someone!
Hadouken
@Harry97
Aug 11 2016 00:37
that https:// and http:// part?
jrandallhansen
@jrandallhansen
Aug 11 2016 00:38
yes. when to use which one
i suppose depending on the api's original documentation I might find it?
actually my first API call was totally unnecessary and causing the inaccuracy. i removed it and the second API grabs the user IP automatically. stupid of mehttp://codepen.io/jrandall/pen/bZOZjb?editors=1011
Hadouken
@Harry97
Aug 11 2016 00:40
tbh I'm still trying to figure this out so I'm not gonna bullshit you saying that I know but try watching this video It might help https://www.youtube.com/watch?v=zwLskz4HP44
jrandallhansen
@jrandallhansen
Aug 11 2016 00:40
@Harry97 thanks
CamperBot
@camperbot
Aug 11 2016 00:40
jrandallhansen sends brownie points to @harry97 :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for harry97
Hadouken
@Harry97
Aug 11 2016 00:41
yeah there was completely no need for finding out the user's ip
you only needed the latitude and longtitude
and you could've accomplished that by simply applying what you've learned in freecodecamp api part
they did mention how to get the user's lon and lat by using a built in property of the browser
jrandallhansen
@jrandallhansen
Aug 11 2016 00:43
@Harry97 not on newest version of chrome
otherwise the challenge would be much easier
Hadouken
@Harry97
Aug 11 2016 00:44
lol I used their method when I was doing the challenge
I guess I'm too old now :D'
jrandallhansen
@jrandallhansen
Aug 11 2016 00:45
oh yes! i did a lot of challenges long ago then came back again and the challenges have all been made harder
extra requirements for everything haha
Hadouken
@Harry97
Aug 11 2016 00:48
they just added new challenges
they barely did anything for their existing ones
well pal it was fun talking to ya but I gtg have a nice day ^^
jrandallhansen
@jrandallhansen
Aug 11 2016 00:50
@Harry97 no truly they changed a lot. have a good one
Ken Haduch
@khaduch
Aug 11 2016 00:51
@jrandallhansen - one thing that they did was to change function names in many of the challenges, and made them more "meaningful", but the tests won't run unless you change to the new names (which you can read in the test section.) They did make a few additional updates. I haven't seen a lot of the new ones, is this recent?
Arin
@arinarjani
Aug 11 2016 01:43

Hello all. I am working on the Random Quote Machine challenge and I am having trouble figuring out why my text is not "wrapping" with the box it is in. Here is my code on JSFiddle: https://jsfiddle.net/cxL1rkm7/1/

Also, I am learning Flexbox, so if the CSS is a bit strange, I apologize. I ran into some problems when I had "display: flex" on the container, but it would no be inherited by the other divs inside the container, so I added "display: flex" to each inside container ( "quote-area", "button-area" ).

Sabrina Ferguson
@itsacoyote
Aug 11 2016 01:53

@arinarjani With the way flex works, you want to put a flex: 1 on the direct children of the container that has display: flex.
CSS Tricks has a great guide going over flexbox - https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Also your text will "wrap" if they're broken up into singular words, things will look more normal with a sentence in there. With the long 9.9.9... it's a single word so it won't break it unless you specify so in CSS.

Arin
@arinarjani
Aug 11 2016 01:55
@itsacoyote Are you saying I need to put "flex: 1" inside the "quote-area" and "button-area" areas? I found that resource, but had some trouble with understanding. They have an example with text at the bottom, but I do not know how they get the text to stay inside the blue area. I have been looking at: http://blog.teamtreehouse.com/responsive-design-of-the-future-with-flexbox, http://flexboxfroggy.com/, and http://flexboxin5.com/ to figure it out
Sabrina Ferguson
@itsacoyote
Aug 11 2016 01:57
@arinarjani I find CSS Tricks should be easy to understand once you read it slowly. Know that there are two "sets" of flex styling, one for the parent div that will hold all children div that will be "flexy" and the children that will have other flexy styling. CSS Tricks has the rules for the parent flex styling on the left column. Children styling on the right side. One will not really work without the other.
Arin
@arinarjani
Aug 11 2016 01:57
@itsacoyote oh, I see with the single word problem. I had no spacing, so it did not want to split it up. How would I split it up in CSS?
Sabrina Ferguson
@itsacoyote
Aug 11 2016 01:57
@arinarjani and for the word breaking for long words like that 9.9.9.... use word-break in css
Arin
@arinarjani
Aug 11 2016 01:58
@itsacoyote Thank you very much!
CamperBot
@camperbot
Aug 11 2016 01:58
arinarjani sends brownie points to @itsacoyote :sparkles: :thumbsup: :sparkles:
:cookie: 341 | @itsacoyote |http://www.freecodecamp.com/itsacoyote
Arin
@arinarjani
Aug 11 2016 01:58
I have been on this for a few days getting better at CSS
thanks again
Sabrina Ferguson
@itsacoyote
Aug 11 2016 01:58
no problem, it takes time to understand and figure it all out!
Arin
@arinarjani
Aug 11 2016 02:00
@itsacoyote now I need to learn how to use an API to get my quotes. Here comes another challenge! lol
Sabrina Ferguson
@itsacoyote
Aug 11 2016 02:02
@arinarjani yeah, that's a bit of a pain to find a good API to use, you may want to look at the code just for the api call, I think it's something-ape for the API service a lot of people use.
Arin
@arinarjani
Aug 11 2016 02:05
I found a few I want to use on the Mashape website ( the on used in the example ), but then after attending my local FCC meetup, someone there used QuotesOnDesign ( https://quotesondesign.com/api-v4-0/ )
I will mess around with it now that I have a responsive quote box
Sabrina Ferguson
@itsacoyote
Aug 11 2016 02:06
ooh very nice
Arin
@arinarjani
Aug 11 2016 02:07
@itsacoyote Do you know why the width's of the green boxes are so long? I never assigned them a width?
Sabrina Ferguson
@itsacoyote
Aug 11 2016 02:08
@arinarjani yep
Arin
@arinarjani
Aug 11 2016 02:57

@itsacoyote It has something to do with the column formatting huh?

I found that if I set "display: inline-block", it sizes things right, but then I lose my "flex-flow: column wrap", so I set that and it went back to being too big.

@itsacoyote I feel like I am making this too hard with flexbox. I see yours using bootstrap, I see others using bootstrap, why do I even need to use flexbox?
Sabrina Ferguson
@itsacoyote
Aug 11 2016 03:05

@arinarjani well, you don't need to do flexbox unless you really want to, haha. For the time being, if you want to switch now, it doesn't hurt to stick with Bootstrap. They have great documentation and easy enough to follow structuring so you don't have to focus too much on the styling. Though pushing through and trying to learn Flexbox is a good thing in that you're learning to try some problem solving issues with styling and learning some new css stuff.

Whether you go with Flexbox or Bootstrap is all up to you. If you go the Bootstrap route, you can always inspect and see how they structure their css styling to do what they do so you can get more familiar with css in general.

Arin
@arinarjani
Aug 11 2016 03:08
@itsacoyote I wanted, and still want to, use it because I read that learning how to create a layout on your own is a good way to start, and then you can use bootstrap, or whatever else is out there. Also, I just found that Bootstrap is switching to flex and deleting floats ( something like that )
@itsacoyote Would you be willing to point me in the direction on figuring out the green box sizing issue? I am trying to get them to be the size of the quote and have the Twitter button and New Quoute button follow that same width.
Sabrina Ferguson
@itsacoyote
Aug 11 2016 03:11
@arinarjani link?
Sabrina Ferguson
@itsacoyote
Aug 11 2016 03:13
@arinarjani and yes, I do understand it's a great way to learn by doing it on your own, it certainly is. However, I would say that it wouldn't hurt to learn the grid system the basic way first with floats and such. It'll help you to get the hang of laying out content and seeing how they align up to each other.
Arin
@arinarjani
Aug 11 2016 03:13
@itsacoyote or were you wanting a different link?
Sabrina Ferguson
@itsacoyote
Aug 11 2016 03:14

@arinarjani and yeah, I took a quick look at that. They are still using the traditional grid system for Bootstrap 4, they just included a toggle to switch over to using flexbox if you want to, it's still an optional thing.

The issue with flex is that it's not fully supported across all browsers and versions, so you need to keep that in mind. With webkit, you need to add the -webkit prefix to flexbox for it to work on certain browsers. Microsoft IE has it's own prefix as well. Flex also doesn't work the same on IE10 or older.
The problem right now is you'd end up troubleshooting more compatibility issues than styling issue with flexbox.

I meant the link for your site so I can see the issue with the green box layout issue
Arin
@arinarjani
Aug 11 2016 03:17
Sabrina Ferguson
@itsacoyote
Aug 11 2016 03:19
@arinarjani okay, so what exactly do you want to do here? Make Twiter button and the Quote button half the size of the quote container?
Arin
@arinarjani
Aug 11 2016 03:21
I am trying to make it so the green box is not so wide and it matches the width of the "testing testing testing.....". I also want to green box with the buttons to match up to the green box with the text.
Sabrina Ferguson
@itsacoyote
Aug 11 2016 03:23
@arinarjani what browser are you using?
Arin
@arinarjani
Aug 11 2016 03:24
firefox developer edition
Sabrina Ferguson
@itsacoyote
Aug 11 2016 03:29
@arinarjani okay, maybe a screenshot might help here, because I have a feeling something with browser compatibility might be causing an issue here
@arinarjani how do you want the green box with the buttons match up to the top green box? By width?
@arinarjani also, the flexbox may be causing the green box to be as wide as it is. Removing the flex may help with the whole thing in general.
Arin
@arinarjani
Aug 11 2016 03:35
I had the feeling that Flexbox is doing the unwanted spacing, so I tried doing display: inline-block;. It did away with the spacing, but i lost the overall formatting of the column layout from flex-flow: column wrap;
jrandallhansen
@jrandallhansen
Aug 11 2016 03:36
anyone have a suggestion for weather themed icons that work with on codepen with a simple CDN? similar to font awesome kind of icons? for the weather challenge?
Sabrina Ferguson
@itsacoyote
Aug 11 2016 03:37
@jrandallhansen are you using the suggested Weather API?
@arinarjani It may be, sorry I wish I could help further, but I have a feeling that the flex may be showing slightly different between the two of us.
@arinarjani to get the somewhat similar column look, you can just remove all display: flex from the div's. Divs are block elements and will not sit next to each other like inline-block will. That can get you the width and column look I think.
Norvin Burrus
@ndburrus
Aug 11 2016 03:39
@jrandallhansen these may be useful: :sparkles:
Arin
@arinarjani
Aug 11 2016 03:40
@itsacoyote I will have to play more. thanks again
CamperBot
@camperbot
Aug 11 2016 03:40
arinarjani sends brownie points to @itsacoyote :sparkles: :thumbsup: :sparkles:
:cookie: 346 | @itsacoyote |http://www.freecodecamp.com/itsacoyote
Sabrina Ferguson
@itsacoyote
Aug 11 2016 03:40
Did you guys know in the Weather API object they return the name of the icon for the related weather and you can use the image url to generate an image from them?
jrandallhansen
@jrandallhansen
Aug 11 2016 03:44
@itsacoyote yes I am
@ndburrus thank you i will check them out now
CamperBot
@camperbot
Aug 11 2016 03:44
jrandallhansen sends brownie points to @ndburrus :sparkles: :thumbsup: :sparkles:
:star2: 1524 | @ndburrus |http://www.freecodecamp.com/ndburrus
Norvin Burrus
@ndburrus
Aug 11 2016 03:44
@jrandallhansen you're welcome! enjoy! :palm_tree:
Sabrina Ferguson
@itsacoyote
Aug 11 2016 03:44
@jrandallhansen if you're getting the object back with data from the Weather API, there should be an icon name that's in there as well. Append that to the Weather API's url and it will generate their icon for you.
jrandallhansen
@jrandallhansen
Aug 11 2016 03:45
@ndburrus that first one is the one i tried but i dont know how to add that CDN to code pen. it has like 10 links i need to add
@itsacoyote i didnt know that! i better check out the returned JSON object
Sabrina Ferguson
@itsacoyote
Aug 11 2016 03:45
@jrandallhansen yep, I believe it's under data.weather[0].icon
And the URL to append to is http://openweathermap.org/img/w/ and you'll need to attach .png to the end of the icon name as well. Not the prettiest, but it works.
Plus I was too lazy to program in logic for which icon to display for each weather :P
jrandallhansen
@jrandallhansen
Aug 11 2016 03:47
@itsacoyote im checking it out now. that sounds perfect. display it using an img tag??
Sabrina Ferguson
@itsacoyote
Aug 11 2016 03:47
@jrandallhansen yep, I simply inserted html into a div somewhere I think, built the img tag in javscript.
jrandallhansen
@jrandallhansen
Aug 11 2016 03:48
perfect. thanks a lot @itsacoyote
CamperBot
@camperbot
Aug 11 2016 03:48
jrandallhansen sends brownie points to @itsacoyote :sparkles: :thumbsup: :sparkles:
:cookie: 347 | @itsacoyote |http://www.freecodecamp.com/itsacoyote
jrandallhansen
@jrandallhansen
Aug 11 2016 04:13
@ndburrus i appreciate your attempt to help but i think the issue was more specific and less general
anyone want to take a look at my non-functional buttons for fahrenheit and celsius ? perhaps give me some ideas to make them work lol
jrandallhansen
@jrandallhansen
Aug 11 2016 04:25
no one?? lol
Meadows1
@Meadows1
Aug 11 2016 04:27
"Use CSS solutions to style elements" Says I did it right, yet, the h2 element (Cat Photo App) is not visible?
@jrandallhansen. I would, but, you probably wouldn't want me to just yet😎
jrandallhansen
@jrandallhansen
Aug 11 2016 04:31
@Meadows1 on those early ones as long as you understand how to apply style rules using CSS dont worry too much and move on
Surbhi Oberoi
@surbhioberoi
Aug 11 2016 04:31
http://codepen.io/surbhioberoi/pen/kXzrLP
can someone please help debug this
buttons aren't working, they were fine yesterday
something i messed up
jrandallhansen
@jrandallhansen
Aug 11 2016 04:32
@surbhioberoi i am not sure there is anyone capable of debugging that for you in here right now
Surbhi Oberoi
@surbhioberoi
Aug 11 2016 04:32
@jrandallhansen why? :O
jrandallhansen
@jrandallhansen
Aug 11 2016 04:32
I had a more simple request and no one is up to the task right now
unless someone is lurking lol
Surbhi Oberoi
@surbhioberoi
Aug 11 2016 04:33
lol
jrandallhansen
@jrandallhansen
Aug 11 2016 04:33
im trying to take a look but i am not sure. i have no experience with the function you are using to scroll left and right with the buttons
@surbhioberoi actually if you scroll up you and i have similar questions. i cant get my buttons to work either lol
Meadows1
@Meadows1
Aug 11 2016 04:35
@jrandallhansen Ok, I will do just that because I have perfectionist tendencies that really do need to be checked sometimes. Good looking!
Surbhi Oberoi
@surbhioberoi
Aug 11 2016 04:35
@jrandallhansen they were working yesterday, i messed something up
jrandallhansen
@jrandallhansen
Aug 11 2016 04:35
@Meadows1 fight those in this process. perfectionism always stalls me out
@surbhioberoi think about what changes you made since then?
identify where issues may have occured
Surbhi Oberoi
@surbhioberoi
Aug 11 2016 04:36
@jrandallhansen been doing that since 2 hours
can't figure out
jrandallhansen
@jrandallhansen
Aug 11 2016 04:37
@surbhioberoi hmmm. take a look at my problem and help me out. maybe once you fix my issue you will come back with fresh perspective lol
need to get my fahrenheit and celsius buttons working
Meadows1
@Meadows1
Aug 11 2016 04:39
@jrandallhansen No doubt...I finished my B.S. with the reaserch of a Ph.d lol later
David
@penguin27
Aug 11 2016 05:23
I have what I think is a dumb question, I am working on my portfolio challenge and just realized, I do not know where I am supposed to park any assets I need (graphics, etc.) when using CodePen.io. I feedback is gratefully welcome.
jrandallhansen
@jrandallhansen
Aug 11 2016 05:32
@penguin27 on codepen you would have to upload them to an online site you can link to using a url
or just select images off google that are easy to link to
David
@penguin27
Aug 11 2016 05:41
What I hear you suggesting is that I need to a place of my own to host those files. Am I understanding you right... other than those I link to on other sites.
jrandallhansen
@jrandallhansen
Aug 11 2016 06:11
@penguin27 yes exactly
Greg Duncan
@GregatGit
Aug 11 2016 06:24
@jrandallhansen when you get the temp - just store them both as variable strings - then when someone clicks on the button it just swaps
Sorin Ruse
@sorinr
Aug 11 2016 06:54
@jrandallhansen or to not make many calls to the api, declare two global vars like fahr and cel , and when you first get the temp in F store it in fahr and same time use the formula cel = Math.round(((fahr- 32)*5/9)); to store the other one. after when you press the buttons you just update the <li id="temp"> accordingly.
jrandallhansen
@jrandallhansen
Aug 11 2016 06:57
@GregatGit @sorinr thank you good ideas
CamperBot
@camperbot
Aug 11 2016 06:57
jrandallhansen sends brownie points to @gregatgit and @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 655 | @sorinr |http://www.freecodecamp.com/sorinr
:cookie: 733 | @gregatgit |http://www.freecodecamp.com/gregatgit
kennyq94
@kennyq94
Aug 11 2016 06:58
Hey guys I am trying to clear my quotes after each click in the random quote generator. This is my JQuery and its not working can I have some tips?
$("#getClick").on('click', $(".message").val(" "),function(){$.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=", function(a) {
$(".message").append(axamarin/xamarin-android@a16673d.content + "<p>— " + axamarin/xamarin-android@a16673d.title + "</p>")
});
});
Sorin Ruse
@sorinr
Aug 11 2016 07:01
@kennyq94 use $(".message").html(bla bla) instead of append
Elbert Cortez
@trip16661
Aug 11 2016 07:01
Holy indentation batman
kennyq94
@kennyq94
Aug 11 2016 07:02
@sorinr oh I did that but the text still wont clear is there a way to clear the text
I changed the function this is what it looks like $("#getClick").on('click',function(){$("message").val(" ")}, function(){$.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=", function(a) {
$(".message").html(a[0].content + "<p>— " + a[0].title + "</p>")
});
});
Elbert Cortez
@trip16661
Aug 11 2016 07:04
var someQuote =  a[0].content ;
var someAuthor =  a[0].title;
$('something').append(
    $('<p/>).text(someQuote ),
    $('<p/>').text(someAuthor)
);
This message was deleted
@kennyq94 that's the cleaner way to do it
kennyq94
@kennyq94
Aug 11 2016 07:08
@trip16661 thanks
CamperBot
@camperbot
Aug 11 2016 07:08
kennyq94 sends brownie points to @trip16661 :sparkles: :thumbsup: :sparkles:
:cookie: 434 | @trip16661 |http://www.freecodecamp.com/trip16661
kennyq94
@kennyq94
Aug 11 2016 07:08
Lol i totally ditched style
Darth Skywalker
@adityaparab
Aug 11 2016 07:08
@kennyq94 : You have &callback= which should be &callback=? (with a ? at the end)
Elbert Cortez
@trip16661
Aug 11 2016 07:08
so if later on u want a h1 tag you can do it
by simplely changing the p for h1
JohnWatsonDev
@johnwatsondev
Aug 11 2016 07:26
Hello~ Should I support the rotation of phone with my site ?
Here is the SNAP-SHOT:
blob
Sorin Ruse
@sorinr
Aug 11 2016 07:32
This message was deleted
Leo Sizaret
@Bungou
Aug 11 2016 08:31
White icons problem.jpg
Hello hello :)
I want to add Icons + Text, stacked on top of each other to the site.
I realize that ague description is useless, here's what I mean:
I thought of adding icons and images as an image of its own, but that feels like a cheaty way out
Screen Shot 2016-08-11 at 10.29.10 AM.png
I'd like it to look something like this, for example. (coolar.co)
Any help is greatly, greatly appreciated! :D
d1sr3
@d1sr3
Aug 11 2016 08:47
Hello background in my portfolio won't stretch when it's full size when I make the window more narrow it stretches fine under my project previews http://s.codepen.io/d1sr3/debug/zByKby
Elbert Cortez
@trip16661
Aug 11 2016 08:54
@d1sr3 what doesnt strech?
you mean that white paddig?
d1sr3
@d1sr3
Aug 11 2016 08:57
@trip16661 The background which is just behind portfolio title should be behind all the previews
dummysite
@dummysite
Aug 11 2016 09:00
hello world
CamperBot
@camperbot
Aug 11 2016 09:00

welcome to FreeCodeCamp @dummysite!

Filip Tepes-Onea
@tfilip
Aug 11 2016 09:02
any ideas on how to improve this: http://codepen.io/filiphimself/pen/kXzkPG ?
it's the portofolio zipline
Elbert Cortez
@trip16661
Aug 11 2016 09:07
@trip16661 I really don't know about bootstrap
but i fixed it chaning the display
of the container
display: flex;
flex-direction: column;
d1sr3
@d1sr3
Aug 11 2016 09:12
@trip16661 It doesn't seem to work for me. Which container? Did you remove col-md-4 classes?
Elbert Cortez
@trip16661
Aug 11 2016 09:14
this div text-center container
with the classes text-center container
d1sr3
@d1sr3
Aug 11 2016 09:16
@trip16661 Oh it works now, thanks
CamperBot
@camperbot
Aug 11 2016 09:16
d1sr3 sends brownie points to @trip16661 :sparkles: :thumbsup: :sparkles:
:cookie: 436 | @trip16661 |http://www.freecodecamp.com/trip16661
Elbert Cortez
@trip16661
Aug 11 2016 09:17
even though i said that
you should at least check
what the property do
d1sr3
@d1sr3
Aug 11 2016 09:17
@trip16661 sure I was about to google what the flex does
Elbert Cortez
@trip16661
Aug 11 2016 09:18
just saying :)
I seen so many people just take answers and implement them without knowing what it does
and i think thats letal
d1sr3
@d1sr3
Aug 11 2016 09:21
@trip16661 yep it's pointless just copy-pasting answers, I wouldn't learn anything by it
Sorin Ruse
@sorinr
Aug 11 2016 09:22
@tfilip salut. make in your css #abouttext{margin-top: 50%; transform: translateY(-50%);} and it should vertically center your text
Filip Tepes-Onea
@tfilip
Aug 11 2016 09:24
@sorinr thanks, that's something that i was looking to do
CamperBot
@camperbot
Aug 11 2016 09:24
tfilip sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 656 | @sorinr |http://www.freecodecamp.com/sorinr
Filip Tepes-Onea
@tfilip
Aug 11 2016 09:24
beside that is there any way to make the image smaller in bootstrap? currently i use padding it just make the whole div bigger
Sorin Ruse
@sorinr
Aug 11 2016 09:28
@tfilip you can add width="400" to your img tag but you will have to take care of the css to recenter it
Filip Tepes-Onea
@tfilip
Aug 11 2016 09:35
@sornir mersi, i'll try to recenter it now
Sorin Ruse
@sorinr
Aug 11 2016 09:39
@tfilip ofc you can change that 400 to whatever u need. to recenter it you can use same css as for the #abouttext
ayaancoder
@ayaancoder
Aug 11 2016 09:46
hi one of my friend doing this code and he is not getting the back ground image here is the code
adding this line works can some explain us why so.
img{
width: 100%;
}
Rada
@Radascript
Aug 11 2016 09:50
@ayaancoder you need to clean up the code and be more elaborate about which image and which section you are referring to, don't make us spend 10 minutes figuring out what you want :P
ayaancoder
@ayaancoder
Aug 11 2016 10:13
error solved by adding clear
ayaancoder
@ayaancoder
Aug 11 2016 10:32
@Radascript thank you for your response
CamperBot
@camperbot
Aug 11 2016 10:32
ayaancoder sends brownie points to @radascript :sparkles: :thumbsup: :sparkles:
:cookie: 386 | @radascript |http://www.freecodecamp.com/radascript
OLZHAS KURIKOV
@olzhas2102
Aug 11 2016 10:47
Hello everyone, wanted to ask: why we need "@include» in css and how to use it? how it works?
Safbek
@safbek
Aug 11 2016 10:51
hello!!how to make a double border as photo. using the border or box-shadow properties?or btfore /after? http://www.pixic.ru/i/40q1j29250909509.png
@sorinr hi! could you send a link? I lost the link and your last post(
@safbek It’s probably possible to also use box-shadow but only if you have a very specific need
Sarah Chima
@sayrah901
Aug 11 2016 11:06
I get a broken image when I reload my tribute page.. please how can I fix that?
Safbek
@safbek
Aug 11 2016 11:17
@GarySiu Thanks!)
CamperBot
@camperbot
Aug 11 2016 11:17
safbek sends brownie points to @garysiu :sparkles: :thumbsup: :sparkles:
:cookie: 186 | @garysiu |http://www.freecodecamp.com/garysiu
Simmo
@simmosim
Aug 11 2016 11:20
Can anyone help please? I want to make a title for my image to be above the image but I can't move it away from the main text. <p>
<a href="https://en.wikipedia.org/wiki/Martin_Luther_King_Jr."><img class="MLKimage1 white-border" src="http://res.cloudinary.com/simmosim/image/upload/v1470816209/MLK2_pfzsea.jpg" alt="MLK giving speech" hspace="20" align="left">WIKI</a>
</p>
Janine vN
@janine9vn
Aug 11 2016 11:21
You want it to be before the image, correct? Currently it's below the image?
The WIKI, I mean
Simmo
@simmosim
Aug 11 2016 11:22
Hi Janine. Yeah, I can't work out how to keep the "WIKI" text with the image. At the moment it's to the side with the main body of text for the page
I'd like it to be like a caption with the image but can't work out how to do it :/
Darth Skywalker
@adityaparab
Aug 11 2016 11:23
@simmosim : You have codepen that you can share?
Janine vN
@janine9vn
Aug 11 2016 11:23
@simmosim Can you link your codepen?
Simmo
@simmosim
Aug 11 2016 11:24
Sure... hmm, it's my first tast (Tribute page)... how do I share codepen page?
Janine vN
@janine9vn
Aug 11 2016 11:24
@simmosim The link in the browser, just copy and paste
Darth Skywalker
@adityaparab
Aug 11 2016 11:24

meanwhile, here is my wikiviewer, feedback welcome ;)

http://codepen.io/AdityaParab/full/zByGbA/

Simmo
@simmosim
Aug 11 2016 11:26
thanks @janine9vn and @adityaparab
CamperBot
@camperbot
Aug 11 2016 11:26
simmosim sends brownie points to @janine9vn and @adityaparab :sparkles: :thumbsup: :sparkles:
:cookie: 548 | @adityaparab |http://www.freecodecamp.com/adityaparab
:cookie: 329 | @janine9vn |http://www.freecodecamp.com/janine9vn
Darth Skywalker
@adityaparab
Aug 11 2016 11:27
@simmosim : You have eveything in p tags. you might wanna use bootstrap's column classes.
Janine vN
@janine9vn
Aug 11 2016 11:27
@simmosim Okay, so a couple of things. Any of your styles or styling, you generally want to keep in the css portion of codepen. It helps clean it up and make it easier for other people to read.
If you're going to use any bootstrap classes (ie container-fluid) you have to add bootstrap to codepen. You do that by clicking the gear for css and then quickadding bootstrap
@simmosim I would highly suggest using the tribute page and the portfolio page as an opportunity to get familiar with a framework (Bootstrap, Foundation, etc...) . I prefer bootstrap because the documentation is fantastic
@adityaparab The search box being in the top left and not the text or right near the text threw me off >_>
Simmo
@simmosim
Aug 11 2016 11:30
Thanks a lot for the feedback! I'll endeavor to figure out how to do those things!
ahmed ibrahim
@ahmo10
Aug 11 2016 11:30
hy everyone
Janine vN
@janine9vn
Aug 11 2016 11:30
@adityaparab I get why, because of your set up, but I feel like the Please Search Something should somehow be nearer or reference the search box or something
Darth Skywalker
@adityaparab
Aug 11 2016 11:31
@janine9vn : haha! Watch your alcohol consumption. It makes people throw up :P
ahmed ibrahim
@ahmo10
Aug 11 2016 11:31
https://codepen.io/ahmo10/full/obQGzo/ any comments on my portfolio project
Darth Skywalker
@adityaparab
Aug 11 2016 11:31
@janine9vn : Yes, I am going to make some changes where if the user starts typing, the text box will be autofocued. Just the way google does it.
@simmosim : Look into bootstrap grid system
that should get you on the right track
Janine vN
@janine9vn
Aug 11 2016 11:32
@ahmo10 As I scroll part of the image is static and it's... odd.
Darth Skywalker
@adityaparab
Aug 11 2016 11:32
@janine9vn : You'd make a good QA :D
Simmo
@simmosim
Aug 11 2016 11:33
Thanks @adityaparab :)
CamperBot
@camperbot
Aug 11 2016 11:33
:warning: simmosim already gave adityaparab points
simmosim sends brownie points to @adityaparab :sparkles: :thumbsup: :sparkles:
ahmed ibrahim
@ahmo10
Aug 11 2016 11:33
@janine9vn what do you suggest i do about it
Darth Skywalker
@adityaparab
Aug 11 2016 11:34
Simmo
@simmosim
Aug 11 2016 11:35
Nice one!
Janine vN
@janine9vn
Aug 11 2016 11:35
@ahmo10 The obvious solution would be to not have part of the image static but to make the entire thing move as I scroll. Not to mention the static half isn't responsive and the full image underneath is.
Joakim Bajoul Kakaei
@Todai88
Aug 11 2016 11:38

Hi guys. I'm getting close to finishing my portfolio website, but need people with various devices to check my website:
http://portfolio.kimput.com
If you want any part of the source-code or want to review it, simply check my repo: https://github.com/Todai88/profile
Also, if anyone with some free time on their hand can tell me why the website looks 'strange' on xs devices, then please do tell me. (I've set BS to xs, sm and md - but xs doesn't seem to work very well).

Any thoughts and / or advice is very appriciated! Either write here or PM! :)

Safbek
@safbek
Aug 11 2016 11:39
@sorinr hi! could you send a link? I lost the link and your last post(
ahmed ibrahim
@ahmo10
Aug 11 2016 11:42
@janine9vn lemme workout on it
Sorin Ruse
@sorinr
Aug 11 2016 12:26
@safbek what was about?
Susan
@tmmggmmdld
Aug 11 2016 12:30
@Todai88 I'm using an iPhone and your main info is very narrow. Probably due to the cards section being so wide in comparison.
Sorin Ruse
@sorinr
Aug 11 2016 12:37
@Todai88 hi. something happened to the background of the back face of the portfolio hen you hover
Joakim Bajoul Kakaei
@Todai88
Aug 11 2016 12:41
@sorinr You mean something that isn't supposed to happen? The cards are supposed to 'flip' when you hover over the
them*
Brandon
@multi-maniac
Aug 11 2016 13:08
Hello World! I am Brandon. I stumbled upon Quora (website) in the search for HTML, CSS and Javascript projects to improve my skill set, then I saw the link to freeCodeCamp. I would like to become a Front-end Developer in the near future, and freeCodeCamp seems to be the right place!
CamperBot
@camperbot
Aug 11 2016 13:08

welcome to FreeCodeCamp @multi-maniac!

Sorin Ruse
@sorinr
Aug 11 2016 13:28
@Todai88 yes but all the background should be black semitransparent only it is black at top and below fully transparent so the text being white its very hard to read
Joakim Bajoul Kakaei
@Todai88
Aug 11 2016 13:29
@sorinr Could you post a screenshot in PM? And please tell me what device you are using
Sorin Ruse
@sorinr
Aug 11 2016 13:30
desk on chrome
just a sec
Dany Din
@danydin
Aug 11 2016 13:30
hey what is the best tutorial u used to learn bootstrap navbar [each attribute and tag there]
Norvin Burrus
@ndburrus
Aug 11 2016 13:39
@multi-maniac welcome aboard!
Brandon
@multi-maniac
Aug 11 2016 13:41
Thanks Norvin!
jrandallhansen
@jrandallhansen
Aug 11 2016 13:42
anyone interested in helping debug my non-working jQuery functions assigned to a click handler? i need my buttons to alternate between imperial and metric
Sorin Ruse
@sorinr
Aug 11 2016 13:42
@Todai88 sent you pic by pm
Joakim Bajoul Kakaei
@Todai88
Aug 11 2016 13:44
@jrandallhansen I won't tell you exactly how to do it
@jrandallhansen But you don't really catch the event correctly
Sorin Ruse
@sorinr
Aug 11 2016 13:45
@jrandallhansen make your var imperial and metric global and move the two onclick functions out of $.getJSON function
Joakim Bajoul Kakaei
@Todai88
Aug 11 2016 13:45
@jrandallhansen Your functions seems fine (might want to fix some rounding on the float-numbers), but the clicks aren't registered ;)
@sorinr He doesn't even have to do that. It's simply that his functions as they are now aren't catching the clicks because he is missing something
@jrandallhansen So to re-iterate. The functions are fine, but somehow they aren't firing because you are missing a crucial part. An advice would be to look at your buttons (on the html) and see why they aren't getting picked up by your function
@jrandallhansen Tell me if you need any further help with it and I'll tell you. But it will probably be better for you if you think about the solution yourself rather than me telling you exactly how to do it :)
jrandallhansen
@jrandallhansen
Aug 11 2016 13:49
@Todai88 Im not sure youre helping at all TBH
it sounds like i am just missing something in my code by the way you are answering.
Joakim Bajoul Kakaei
@Todai88
Aug 11 2016 13:49
@jrandallhansen That's because you are missing something
Sorin Ruse
@sorinr
Aug 11 2016 13:49
@Todai88 because they are into the getjson function
jrandallhansen
@jrandallhansen
Aug 11 2016 13:49
class vs ID
Joakim Bajoul Kakaei
@Todai88
Aug 11 2016 13:50
@jrandallhansen exactly
jrandallhansen
@jrandallhansen
Aug 11 2016 13:50
thats not hard to just say lol. nothing to 'figure out for yourself' just an easy mistake to point out lol
Joakim Bajoul Kakaei
@Todai88
Aug 11 2016 13:50
@jrandallhansen Set the ID's of the buttons and the functions will fire off
@jrandallhansen Well you'd be surprised how many people simply take functions off of google
Brandon
@multi-maniac
Aug 11 2016 13:50
You missing the ID's in html buttons
Joakim Bajoul Kakaei
@Todai88
Aug 11 2016 13:50
@jrandallhansen And don't understand how the underlying concept of jQuery works
@jrandallhansen I could have told you excatly how to solve it. I can also tell you a few ways of improving it, but the best way of not making the same misstake again is to figure out the error yourself, with some guidance if necessary
jrandallhansen
@jrandallhansen
Aug 11 2016 13:52
@Todai88 fair point i suppose. i just think the 'figure it out yourself' response is better for issues that have to do with understanding the underlying concept
if someone clearly doesnt understand they need to learn it themselves. if it is a simple mistake sometimes it just helps to have other eyes look and help find. it is working now thank you so much @Todai88
CamperBot
@camperbot
Aug 11 2016 13:52
jrandallhansen sends brownie points to @todai88 :sparkles: :thumbsup: :sparkles:
:cookie: 127 | @todai88 |http://www.freecodecamp.com/todai88
jrandallhansen
@jrandallhansen
Aug 11 2016 13:53
one question i have is how to make the variables global and remove them from the nested .getJSON functions
Joakim Bajoul Kakaei
@Todai88
Aug 11 2016 13:53
@jrandallhansen I'm not too hot on js
jrandallhansen
@jrandallhansen
Aug 11 2016 13:53
after working with help in here yesterday i was under the impression there is no way to make global variable from .getJSON function. it would be way better if we could..
Joakim Bajoul Kakaei
@Todai88
Aug 11 2016 13:53
@jrandallhansen but I'd assume you could just declare them in the .js'files body?
jrandallhansen
@jrandallhansen
Aug 11 2016 13:54
@Todai88 it is a problem of scope. unfortunately any variables you set in a .getJSON function are only available in the scope of that function.
Joakim Bajoul Kakaei
@Todai88
Aug 11 2016 13:55
@jrandallhansen Ah
jrandallhansen
@jrandallhansen
Aug 11 2016 13:56
@Todai88 if you arent strong with JS you did one heck of a job debugging mine. haha
now to decide if i style this widget or leave it looking like trash and move on hahaha
Joakim Bajoul Kakaei
@Todai88
Aug 11 2016 13:59

@jrandallhansen it's simply because the .getjson is asynchroneous. This is taken from SO.
Assume this:

a();

$.getJSON("url", function() {
    b();
});

c();

Bacause the .getjson function is asynchroneous there is no way of telling just how this will work sequentially. Most likely this body will perform a,b,c. But depending on how much data you are getting (your getJson) you would maybe get something like this: a, c, b.
The data inside the getJson is most likely muted which is probably why it is inaccessible.
I might be absolutely wrong on this, but from reading like 2 minutes that is what I can understand from the code.
Basically you will most likely NOT be able to access the variables you set inside the function in any other scope.

Sorin Ruse
@sorinr
Aug 11 2016 13:59
@jrandallhansen here it is weather
Joakim Bajoul Kakaei
@Todai88
Aug 11 2016 13:59
@jrandallhansen AAAAND here is a solution to how to make it synchroneous (accessible):
a();

$.getJSON("url", function() {
    b();

    c();
});
jrandallhansen
@jrandallhansen
Aug 11 2016 14:00
@sorinr thanks Ill take a look at how you did it but we got it fixed over here already too. @Todai88 yes exactly. if you want the variables available you need to 'nest' them within the function
CamperBot
@camperbot
Aug 11 2016 14:00
jrandallhansen sends brownie points to @sorinr and @todai88 :sparkles: :thumbsup: :sparkles:
:warning: jrandallhansen already gave todai88 points
:cookie: 657 | @sorinr |http://www.freecodecamp.com/sorinr
jrandallhansen
@jrandallhansen
Aug 11 2016 14:01
and you are exactly right as to why
Joakim Bajoul Kakaei
@Todai88
Aug 11 2016 14:01
Anyways, if you have any questions you can always pm me. I've gotten more than enough help from this community when working on my portfolio. :)
jrandallhansen
@jrandallhansen
Aug 11 2016 14:02
@sorinr wow you are able to declare the variables globally on yours??
i tried that and was having problems but now if i remember correctly maybe something else was causing the errors. writing it your way is more clean. maybe i could remove my nested call altogether by globally declaring all my variables
Sorin Ruse
@sorinr
Aug 11 2016 14:04
@jrandallhansen probably you declared them without assigning an implicit value
jrandallhansen
@jrandallhansen
Aug 11 2016 14:06
implicit value?
Joakim Bajoul Kakaei
@Todai88
Aug 11 2016 14:06
@jrandallhansen I'm assuming he means that you didn't initialize them with a value
jrandallhansen
@jrandallhansen
Aug 11 2016 14:07
i had them assigned correct like you name = "value"; and was hoping to use them outside the scope of their originating function. i think the error i was having was actually just adding https: to my URL.
i should have tried the global variables again after getting that squared away. ill probably rewrite this to use all global vars
Joakim Bajoul Kakaei
@Todai88
Aug 11 2016 14:09

@jrandallhansen Different languages have different syntax. What would work in core java

String name;

Might require you to fully initialize with a value if you wish for it to work globally:

String name = "foo";

Again, I ain't no ninja at JS. But I'm assuming you might have missed to properly initialize them

jrandallhansen
@jrandallhansen
Aug 11 2016 14:13
@Todai88 no i properly initialized them i am pretty sure. i tried to rewrite my second API call to be outside the first and it isnt working now. care to take a look maybe @sorinr
tried to remove the nesting and make the variables global; broke everything lol
Joakim Bajoul Kakaei
@Todai88
Aug 11 2016 14:16
So what happens if you move your vars to outside the getjson and inside the document.rrady?
Sorin Ruse
@sorinr
Aug 11 2016 14:16
@Todai88 the purpose of a global var is to be able to use it in more functions. if you just deal with a var only into one function you only declare it local
Joakim Bajoul Kakaei
@Todai88
Aug 11 2016 14:16
@sorinr haha, I know about scope, yo
Sorin Ruse
@sorinr
Aug 11 2016 14:17
lol. was intended for @jrandallhansen
sorry
jrandallhansen
@jrandallhansen
Aug 11 2016 14:17
@sorinr I know that too. I want to use the variables created in my first .getJSON function in the second .getJSON function
the way I had it written was just to nest the functions and allow me to use local variables. seeing your other solution made me want to use global but my attempt didnt work. see any reason why?
Sorin Ruse
@sorinr
Aug 11 2016 14:19
@jrandallhansen $(document).ready(function() { var lat, lon, api, ..... = '';
jrandallhansen
@jrandallhansen
Aug 11 2016 14:20
@sorinr i dont understand at all what you are saying
Diego Mayer
@Chrono79
Aug 11 2016 14:20

Hi, I have a css (mediaqueries) question:

#banner-mobile { display: none };

@media (min-width:500px){
  #banner-mobile { display: none };
}
@media (max-width:499px){
  #banner-desktop { display: none };  
  #banner-mobile { display: block };
}

I want to hide a <p> by default and show it if mediaqueries are supported when the width is less than 500px, but it's not working, any idea why?

Sorin Ruse
@sorinr
Aug 11 2016 14:20
@jrandallhansen imediately as you open docready function declare your global variables
jrandallhansen
@jrandallhansen
Aug 11 2016 14:21
initialize them all with initial value of ="";?
then i can use them in all functions?
shoot i may just stay nested instead lol
Manoj
@Manoj-Fernando
Aug 11 2016 14:22
guys what is the difference in validating a form by using pattern attribute and validating using java script....can anyone help?
Sorin Ruse
@sorinr
Aug 11 2016 14:22
@jrandallhansen yes. but you should use them api='http....' not var api='http'
jrandallhansen
@jrandallhansen
Aug 11 2016 14:23
it seemed like by just removing the var keyword you were able to make the imperial and metric variables available outside the scope of the local function. i wonder why it isnt working the same on my long and lat variables
i feel like if it worked for you without declaring them all first then the same should be true
Sorin Ruse
@sorinr
Aug 11 2016 14:25
@jrandallhansen i haven't changed the nested functions. probably in the meantime you have reorganized your code. just compare "mine" with yours now. you will see the diff
Arin
@arinarjani
Aug 11 2016 14:26
@Chrono79 I do not know much about media queries, but is there a link for me to play around and see if I can come up with a solution? I also found some stuff on stackoverflow, but I bet you probably saw that already. ( http://stackoverflow.com/questions/12517449/how-to-show-hide-elements-using-media-query ) and ( http://stackoverflow.com/questions/17904018/show-hide-div-based-on-browser-size-using-only-css )
Manoj
@Manoj-Fernando
Aug 11 2016 14:26
guys what is the difference in validating a form by using pattern attribute and validating using java script....can anyone help?
can anyone clarify pls
Sorin Ruse
@sorinr
Aug 11 2016 14:26
@jrandallhansen its better to not nest functions unless necessary coz each function has its purpose
Marks Polakovs
@markspolakovs
Aug 11 2016 14:26
@Manoj-Fernando Pattern validation is done by the browser, with JS you code it yourself
jrandallhansen
@jrandallhansen
Aug 11 2016 14:27
@sorinr http://codepen.io/sorinr/pen/xOmzbN?editors=1010 look at the code you wrote. you removed the two functions for the buttons to outside of the .getJSON function it looks like to me
Marks Polakovs
@markspolakovs
Aug 11 2016 14:27
Pattern validation is "Better", but not supported by all browsers
jrandallhansen
@jrandallhansen
Aug 11 2016 14:27
it looked to me like you were able to do that by declaring imperial and metric without using the var keyword. am i mistaken? @sorinr
Manoj
@Manoj-Fernando
Aug 11 2016 14:30
@markspolakovs is there any other advantage rather than writing codes while using pattern
Sorin Ruse
@sorinr
Aug 11 2016 14:30
@jrandallhansen i took out that two functions from the nested $.getJSON and just put them outside but still in the docready and declared that two vars globally just to use them in this two functions.
Marks Polakovs
@markspolakovs
Aug 11 2016 14:30
@Manoj-Fernando Writing JS is more complex and error-prone, pattern validation is much simpler. It's really personal preference though.
Sorin Ruse
@sorinr
Aug 11 2016 14:31
@jrandallhansen i left all your other nested functions as you wrote them
jrandallhansen
@jrandallhansen
Aug 11 2016 14:31
@sorinr exactly! thats what i thought. seeing that I decided to try and declare all my variables globally and remove the nesting. however it didnt work
Manoj
@Manoj-Fernando
Aug 11 2016 14:31
@markspolakovs both are client side validations right?
Marks Polakovs
@markspolakovs
Aug 11 2016 14:32
@Manoj-Fernando yes.
jrandallhansen
@jrandallhansen
Aug 11 2016 14:32
@sorinr take a look at this and see how i tried to copy what you did for the long and lat variables in my first .getJSON function. http://codepen.io/jrandall/pen/bZOZjb?editors=0110
Manoj
@Manoj-Fernando
Aug 11 2016 14:32
@markspolakovs Thank you very much bro:)
CamperBot
@camperbot
Aug 11 2016 14:32
manoj-fernando sends brownie points to @markspolakovs :sparkles: :thumbsup: :sparkles:
:cookie: 46 | @markspolakovs |http://www.freecodecamp.com/markspolakovs
Marks Polakovs
@markspolakovs
Aug 11 2016 14:32
No problem @Manoj-Fernando :tada:
Diego Mayer
@Chrono79
Aug 11 2016 14:33
@arinarjani https://jsfiddle.net/pqx5ctzz/ If I comment the line outside the mediaqueries it works, but in IE8 for example it shows both paragraphs (because it doesn't support MQ)
jrandallhansen
@jrandallhansen
Aug 11 2016 14:33
lmao for some reason it shows as working in the chat but it definitely doesnt work
Sorin Ruse
@sorinr
Aug 11 2016 14:38
@jrandallhansen what is not working? the pen i showed you?
greg
@wearenotgroot
Aug 11 2016 14:41
@Chrono79 the semicolon might be the issue?
#banner-mobile { display: none; }

@media (min-width:500px){
  #banner-mobile { display: none; }
}
@media (max-width:499px){
  #banner-desktop { display: none; }  
  #banner-mobile { display: block; }
}
jrandallhansen
@jrandallhansen
Aug 11 2016 14:44
@sorinr no the one i just sent you back. scroll up and read the problem if still interested
i tried to follow the pattern of what you did and separate all my .getJSON functions but it didnt work. im trying to remove the nesting
Diego Mayer
@Chrono79
Aug 11 2016 14:44
@wearenotgroot yes, it was, thanks
CamperBot
@camperbot
Aug 11 2016 14:44
chrono79 sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
:star2: 1320 | @wearenotgroot |http://www.freecodecamp.com/wearenotgroot
greg
@wearenotgroot
Aug 11 2016 14:45
@Chrono79 :+1:
Sorin Ruse
@sorinr
Aug 11 2016 14:45
This message was deleted
jrandallhansen
@jrandallhansen
Aug 11 2016 14:46
@sorinr it is totally broken. doesnt work at all. if you follow the link into a new window you will see
it just looks like it works in our chat for some reason lmao
Sorin Ruse
@sorinr
Aug 11 2016 14:47
@jrandallhansen give me 10 min and i'll show you
jrandallhansen
@jrandallhansen
Aug 11 2016 14:47
@sorinr thank you so much. i am breaking something in the formatting
CamperBot
@camperbot
Aug 11 2016 14:47
jrandallhansen sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:warning: jrandallhansen already gave sorinr points
Sarah Chima
@sayrah901
Aug 11 2016 14:51
I get a broken image when I reload my tribute page.. please how can I fix that?
jrandallhansen
@jrandallhansen
Aug 11 2016 14:52
@sayrah901 link your project here so we can look at the code
Tyler Conoff
@Yoplay8
Aug 11 2016 15:01
is their a way I can open other websites through codepen??? The page just turns white. Is their a way to display the other website page through "A" tags.
Michal Kozlowski
@McBiggos
Aug 11 2016 15:02
hey guys, could you tell me what is wrong with first 5 lines of my JS? I don't know why it doesn't change text in my <p>
https://codepen.io/McBiggos/pen/NALxRY
Tyler Roberts
@teachtyler
Aug 11 2016 15:03
@McBiggos which <p> ? city-coords?
greg
@wearenotgroot
Aug 11 2016 15:03
@McBiggos change the connection of your codepen to http instead of https
Michal Kozlowski
@McBiggos
Aug 11 2016 15:04
@wearenotgroot thanks it helped
CamperBot
@camperbot
Aug 11 2016 15:04
mcbiggos sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
:star2: 1322 | @wearenotgroot |http://www.freecodecamp.com/wearenotgroot
jrandallhansen
@jrandallhansen
Aug 11 2016 15:06
@McBiggos that is super well designed
Adam Jacks
@AdamHJ123
Aug 11 2016 15:06
Guys, any idea how I can add a link to the div which says "Click here to see more of my artwork" WITHOUT the up arrow getting in the way?
http://codepen.io/AdamHJacks/pen/jAQbJy
jrandallhansen
@jrandallhansen
Aug 11 2016 15:08
it's not in the way on my screen. try changing to full screen view
Adam Jacks
@AdamHJ123
Aug 11 2016 15:08
On debug it is
Michal Kozlowski
@McBiggos
Aug 11 2016 15:09
@jrandallhansen you ment that seriously? Because I am not entirely satisfied
jrandallhansen
@jrandallhansen
Aug 11 2016 15:09
end user wont be viewing it in debug mode
@McBiggos definitely. the aesthetics are on point
Adam Jacks
@AdamHJ123
Aug 11 2016 15:11
@jrandallhansen I'm not going to keep it on CodePen
jrandallhansen
@jrandallhansen
Aug 11 2016 15:12
@AdamHJ123 right so the important thing is how it looks in full screen. if something comes out weird just in debug mode who cares?
maybe there is an issue but on my screen it looks fine
Michal Kozlowski
@McBiggos
Aug 11 2016 15:13
@jrandallhansen thanks, it's meant to look like this finally:
image
ofc with data in rows on the right
CamperBot
@camperbot
Aug 11 2016 15:13
mcbiggos sends brownie points to @jrandallhansen :sparkles: :thumbsup: :sparkles:
:cookie: 318 | @jrandallhansen |http://www.freecodecamp.com/jrandallhansen
jrandallhansen
@jrandallhansen
Aug 11 2016 15:14
i was wondering if you had inspiration for the design lol
it looks good
Sorin Ruse
@sorinr
Aug 11 2016 15:15
@jrandallhansen sent you a pm
Adam Jacks
@AdamHJ123
Aug 11 2016 15:16
Can I use an <a> anchor over a whole div?
Jason Luboff
@JLuboff
Aug 11 2016 15:16
@AdamHJ123 Yes
Adam Jacks
@AdamHJ123
Aug 11 2016 15:16
Woop :D
@JLuboff Thank you
CamperBot
@camperbot
Aug 11 2016 15:16
adamhj123 sends brownie points to @jluboff :sparkles: :thumbsup: :sparkles:
:cookie: 276 | @jluboff |http://www.freecodecamp.com/jluboff
Michal Kozlowski
@McBiggos
Aug 11 2016 15:16
@jrandallhansen not really, i've just looked at few weather apps and data returned by api to know what I can implement
decided I also want hourly and daily weather
and started drawing something in illustrator
Adam Jacks
@AdamHJ123
Aug 11 2016 15:17
@McBiggos I kept mine really simple
Tyler Roberts
@teachtyler
Aug 11 2016 15:18
@McBiggos does illustrator generate html/css?
Michal Kozlowski
@McBiggos
Aug 11 2016 15:19
@teachtyler no, but it is easier for me to write code when I have built app in illustrator first, because you can simply check size of elements, margins, font size etc. and whole process of writing it takes much less
@AdamHJ123 for me it shows not city name but voivodeship's - province, region, something like that :D
kengiro
@kengiro
Aug 11 2016 15:21
that is a good practice!
Tyler Roberts
@teachtyler
Aug 11 2016 15:21
@McBiggos that's cool, I didn't realize illustrator could do that, only used photoshop. Should've known :P
Adam Jacks
@AdamHJ123
Aug 11 2016 15:22
@McBiggos Ah haha
Michal Kozlowski
@McBiggos
Aug 11 2016 15:22
but there is one Adobe tool that can convert .psd to html
it is called Adobe Muse
Tyler Roberts
@teachtyler
Aug 11 2016 15:22
speaking of weather apps, I have weather bot
https://lynclabsweatherbot.azurewebsites.net/ ( wip, say "whats weather in location " )
@McBiggos i'll definitely check that out
Michal Kozlowski
@McBiggos
Aug 11 2016 15:24
The point of it is to give designers tool to make websites without knowing html/css
it is pretty limited
but still great tool for those who don't like coding
Tyler Roberts
@teachtyler
Aug 11 2016 15:24
i'll probably just stick to chrome dev tools, but it's cool to see what else is out there if it makes things faster
Michal Kozlowski
@McBiggos
Aug 11 2016 15:25
and want to have demo of their layout for showing it to client/whatever
Adam Jacks
@AdamHJ123
Aug 11 2016 15:25
@teachtyler Bit of work and that could be damn cool haha
I get this issue: 8/11/2016 :: 404NOT_FOUND_LUISSERVICEENTITIES
Tyler Roberts
@teachtyler
Aug 11 2016 15:25
@AdamHJ123 yea i need an opener message, you can type "whats the weather in seattle" for now..
working on conditionals, like "is it raining in seattle"
Adam Jacks
@AdamHJ123
Aug 11 2016 15:26
@teachtyler Ye that would be good
Michal Kozlowski
@McBiggos
Aug 11 2016 15:26
@teachtyler i came up with using it mostly because I do graphic design for living so the hardest part is just to write code :D
but I will definitely try chrome dev tools
because haven't tried it yet
Adam Jacks
@AdamHJ123
Aug 11 2016 15:32
What do you guys think of the project my girlfriend and I are currently working on? http://s.codepen.io/AdamHJacks/debug/jAQbJy/
kengiro
@kengiro
Aug 11 2016 15:32
illutrator is great for make a rapid design when a need to show a prototype work
very cool @AdamHJ123
Adam Jacks
@AdamHJ123
Aug 11 2016 15:35
:D
jrandallhansen
@jrandallhansen
Aug 11 2016 15:37
@McBiggos i had a feeling you had a design background
im glad you said that too. i almost quit looking at that thing haha
Gary Siu
@GarySiu
Aug 11 2016 15:40
@AdamHJ123 I think although the transition is cool, I’d like to be able to scroll a page normally too
I see a down arrow but I can’t scroll down. Makes the page feel broken.
DJPo3eTkA
@DJPo3eTkA
Aug 11 2016 15:40
hello world:) I'm from Russia) Greet everyone here
CamperBot
@camperbot
Aug 11 2016 15:40

welcome to FreeCodeCamp @DJPo3eTkA!

Gary Siu
@GarySiu
Aug 11 2016 15:41
Hiya
Adam Jacks
@AdamHJ123
Aug 11 2016 15:41
@GarySiu I'm going to add a bit of an animation on the arrows to make them more obvious
@GarySiu Gonna be hard for me to work it out though because I have no experience with CSS only animation
Gary Siu
@GarySiu
Aug 11 2016 15:42
@AdamHJ123 It’s not a question of being able to find the arrow, it’s just you break the basic usability of the page and limit it to what the author (you) anticipate
For example there’s actually 3 sections to your page but it’s very difficult to link someone to the bottom
Adam Jacks
@AdamHJ123
Aug 11 2016 15:43
I'll consider it but I don't really want scrolling
Gary Siu
@GarySiu
Aug 11 2016 15:44
You also break the shortcut to open different pages in new tabs
Adam Jacks
@AdamHJ123
Aug 11 2016 15:44
What do you mean?
Gary Siu
@GarySiu
Aug 11 2016 15:45
Well… this is subjective but a lot of people open multiple tabs as they browse by middle/ctrl clicking links
Maybe this isn’t something you personally do so you’re not aware of it?
Adam Jacks
@AdamHJ123
Aug 11 2016 15:46
To check different areas without going back on yourself?
Gary Siu
@GarySiu
Aug 11 2016 15:47
I do it a lot when I’m shopping, looking at artwork, reading news...
Sometimes it’s to show someone else some stuff. I know my gf has about 100 tabs open at a time.
Adam Jacks
@AdamHJ123
Aug 11 2016 15:47
I get you haha
Dragoon555
@Dragoon555
Aug 11 2016 15:48
I need some help with a portfolio I'm making on codepen. How can I share what I have been working on so people can see what I need help with?
jrandallhansen
@jrandallhansen
Aug 11 2016 15:48
just copy and paste the URL into the chat
and describe your issue
Dragoon555
@Dragoon555
Aug 11 2016 15:49
Ok, thanks
Benjam Wondafrash
@BenjamWondafrash
Aug 11 2016 15:49
Hi all. Embarrassingly noob question. Started my Tribute page. The example page uses .thumbnail for the image. Is that OK for large pictures? Thumbnail seems to scale nicely. I tried <figure> but get annoying overflows.
Using bootsrap. Forgort.
jrandallhansen
@jrandallhansen
Aug 11 2016 15:49
@BenjamWondafrash .thumbnail is a built in class from bootstrap
it takes any image and gives it certain formatting
you can still override that styling or add to it in the CSS section of your project
Dragoon555
@Dragoon555
Aug 11 2016 15:50
I new at coding. I'm on the lesson that makes you build your own personal portfolio. I'm on the part where you build the static navigation bar. I made a sample paragraph for the home page, but I don't see it on the page. I think it is hiding behind the navigation bar. Any help fixing that?
Jason Luboff
@JLuboff
Aug 11 2016 15:51
@BenjamWondafrash Keep in mind that your page does not need to look like the example page, and try and work up your own page without letting at the examples code to help teach yourself by asking others/googling/researching/etc
Benjam Wondafrash
@BenjamWondafrash
Aug 11 2016 15:51
@jrandallhansen I was just concerned cause i associate thumbnail with tiny preview images.
Tyler Roberts
@teachtyler
Aug 11 2016 15:51
@Dragoon555 add margin: 20px; to body class
Dragoon555
@Dragoon555
Aug 11 2016 15:51
I'll try it.
Benjam Wondafrash
@BenjamWondafrash
Aug 11 2016 15:52
@JLuboff Yeah. I did try my own stuff. But had to take a peek cause could not get the image to behave.
jrandallhansen
@jrandallhansen
Aug 11 2016 15:52
@Dragoon555 ya add margin to body.
Meadows1
@Meadows1
Aug 11 2016 15:53
CSS class to style an element.
Dragoon555
@Dragoon555
Aug 11 2016 15:53
It worked, thanks. Now I just have to figure out why when I click my links, it cuts off what is supposed to be the first sentence. Do you think it is a margin issue as well?
Meadows1
@Meadows1
Aug 11 2016 15:54

<h2>
2

<style> .red-text {color: red;}</style><h/2>
3

4

<h2>CatPhotoApp</h2>
5

6

<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
7

Benjam Wondafrash
@BenjamWondafrash
Aug 11 2016 15:54
Problem with Bstrap is that if i add an element inside Bstrap element and add styles, I have no idea what happens because of parent element and what is my own doing.
Tyler Roberts
@teachtyler
Aug 11 2016 15:54
@Dragoon555 it's just an html5 # link, it's just scrolling down the page to the div id, which means the nav is static as you said
Meadows1
@Meadows1
Aug 11 2016 15:54
Anyone willing to offer assistance on this?
kat-mag
@kat-mag
Aug 11 2016 15:55
@Meadows1 nobody knows what you want
Dragoon555
@Dragoon555
Aug 11 2016 15:55
@teachtyler Ok, I see what you mean.
kat-mag
@kat-mag
Aug 11 2016 15:55
@BenjamWondafrash That's why you should learn CSS first. Then add any frameworks after you're comfortable with it
Tyler Conoff
@Yoplay8
Aug 11 2016 15:58
Look I finally made my project :D https://codepen.io/yoplay8/pen/AXmZod
Benjam Wondafrash
@BenjamWondafrash
Aug 11 2016 15:58
@kat-mag Really? The task just tells u to use any library. So I took Bstrap. I thought that i coild hit the ground running. Learning css first would take forever...
Adam Jacks
@AdamHJ123
Aug 11 2016 15:58
@Dragoon555 This is my portfolio: http://s.codepen.io/AdamHJacks/debug/bZaWKK
Meadows1
@Meadows1
Aug 11 2016 15:58
@kat-mag to complete CSS class to style an element. My various attempts not working. Here is the latest incorrect code above.
jrandallhansen
@jrandallhansen
Aug 11 2016 15:59
@BenjamWondafrash she is right you need to learn basics of CSS first. remember you can over ride existing style rules of course
Adam Jacks
@AdamHJ123
Aug 11 2016 16:00
Guys, any idea why the images have stopped working on my website? http://codepen.io/AdamHJacks/pen/bZaWKK
Jason Luboff
@JLuboff
Aug 11 2016 16:00
@AdamHJ123 imgur links aren't supported
Dragoon555
@Dragoon555
Aug 11 2016 16:01
@AdamHJ123 Looking good to begin with. If you figure out how to click a link and have that element appear at the top of the page without cutting off, let me know.
Adam Jacks
@AdamHJ123
Aug 11 2016 16:01
@JLuboff Oh damn, any idea what I could use instead?
Benjam Wondafrash
@BenjamWondafrash
Aug 11 2016 16:01
@Meadows1 Some element should have that class name red-text
Jason Luboff
@JLuboff
Aug 11 2016 16:01
Use a different image host like photobucket
Adam Jacks
@AdamHJ123
Aug 11 2016 16:01
@Dragoon555 What do you mean?
Dragoon555
@Dragoon555
Aug 11 2016 16:02
@AdamHJ123 I actually just figure it out. If you look at my old pen, when you click the items on the navbar, the words clip into the nav bar. I just added a class for all the pages, and then gave every page with that class a padding top of 20px. Now the words don't clip.
Meadows1
@Meadows1
Aug 11 2016 16:02
@BenjamWondafrash.
Dragoon555
@Dragoon555
Aug 11 2016 16:03
Meadows1
@Meadows1
Aug 11 2016 16:05
@BenjamWondafrash. I thought I was doing that with <style>.red-text {color;red] </style> ??
Benjam Wondafrash
@BenjamWondafrash
Aug 11 2016 16:05
@Meadows1 You set the style to any element with class='red-text'.
@Meadows1 So your element should have that class='red-text' inside the tag. You have two elements h2 and p. Which one should be red?
Meadows1
@Meadows1
Aug 11 2016 16:07
@BenjamWondafrash I see, will do. Thx! @BenjamWondafrash h2
CamperBot
@camperbot
Aug 11 2016 16:07
meadows1 sends brownie points to @benjamwondafrash :sparkles: :thumbsup: :sparkles:
:cookie: 317 | @benjamwondafrash |http://www.freecodecamp.com/benjamwondafrash
Benjam Wondafrash
@BenjamWondafrash
Aug 11 2016 16:10
@Meadows1 We have different ways to set the style to an element by id, by class, by element. Re-read the previous examples.
Meadows1
@Meadows1
Aug 11 2016 16:11
@BenjamWondafrash. Ok will do!
Benjam Wondafrash
@BenjamWondafrash
Aug 11 2016 16:13
Hmm. Is this chat always this quiet? Javascript chat is quite busy.
kat-mag
@kat-mag
Aug 11 2016 16:17
@BenjamWondafrash maybe weekend came early xD But it's pretty busy most of the time
@BenjamWondafrash JS one is busy because coders don't sleep ;d
Benjam Wondafrash
@BenjamWondafrash
Aug 11 2016 16:19
@kat-mag Should i come here with really beginner Qs or do ppl get frustrated. Some folks at HelpJs are saints with endless patience😇
kat-mag
@kat-mag
Aug 11 2016 16:21
@BenjamWondafrash nobody gets frustrated over begginer questions here. But if we do... we'll just link you the resources you need anyways
Benjam Wondafrash
@BenjamWondafrash
Aug 11 2016 16:24
@kat-mag good to know
kat-mag
@kat-mag
Aug 11 2016 16:31
Saints. Saints everywhere xD
Carole Nissen
@callyb
Aug 11 2016 16:36
@BenjamWondafrash Hi - I just had a look - if you define the width of the img you'll find it works -if you put: width = "100%" after the alt tag then it works...I don't know why but I often find you have to do that in bootstrap - it doesn't work if you put it in the css!
Benjam Wondafrash
@BenjamWondafrash
Aug 11 2016 16:37
@callyb so simple :smile: Thanks
CamperBot
@camperbot
Aug 11 2016 16:37
benjamwondafrash sends brownie points to @callyb :sparkles: :thumbsup: :sparkles:
:warning: benjamwondafrash already gave callyb points
Carole Nissen
@callyb
Aug 11 2016 16:38
@BenjamWondafrash - it often is when you know it!! You're welcome and good luck!
georgialeigh
@georgialeigh
Aug 11 2016 16:38
@AdamHJ123
Johnathan Devaney
@johnathandevaney
Aug 11 2016 16:40
@holmesrm23 I was actually talking to my wife about your answer when I got home last night! I was saying that your answer really helped drive it home for me. Once I understand why I'm doing something it just makes more sense. This is actually one reason I'm so glad that the front end course is going over jQuery before JS. I've tried learning JS a few times but it's tough when you don't know what the end result is going to be. I think that once I'm used to jQuery and what it does, it'll be easier for me to learn JS. Thanks again for your answer! :D
CamperBot
@camperbot
Aug 11 2016 16:40
johnathandevaney sends brownie points to @holmesrm23 :sparkles: :thumbsup: :sparkles:
:cookie: 114 | @holmesrm23 |http://www.freecodecamp.com/holmesrm23
Dragoon555
@Dragoon555
Aug 11 2016 17:19
Can anyone tell me why my nav bar goes all the way right, but not left, even though I put the body margins at 20% for both right and left?
Just figured it out I think.
abhijith shenoy
@shenoyabhijith
Aug 11 2016 17:23
need some how to search in website works i tried googling but did not find satisfactory results it would be very helpful if any 1 gives me some reference
Dragoon555
@Dragoon555
Aug 11 2016 17:37
Ok, didn't figure it out. Can anyone tell me why my navigation bar will not fill 100% of the screen's width?
Zelite
@zelite
Aug 11 2016 17:38
i need some help in my wikipedia viewer
I'm trying to use Animate.css to make the search results come one by one, but at the moment they appear all at once. Check the website here: https://zelite.github.io/A-Wikipedia-Viewer/
when you search something, it should come from the left side.
The javascript is here if you want to have a look: https://github.com/zelite/A-Wikipedia-Viewer/blob/gh-pages/js/searchWiki.js
Tyler Moeller
@TylerMoeller
Aug 11 2016 17:42
@shenoyabhijith Unless you run a server and want to install something like Xapian or Lucene , your easiest front-end-only solution will be google's custom search: https://cse.google.com/cse/
@Dragoon555 The margin on your body needs to be adjusted for the navbar. This is what you're doing now:
body {
    position: relative;
    margin: 50px 10% 0% 10%;
    background-color: gray;
}
Dragoon555
@Dragoon555
Aug 11 2016 17:45
@TylerMoeller How do you suggest I do that?
I set the right and left margin to 10%, which works for the left side, but not the right.
Tyler Moeller
@TylerMoeller
Aug 11 2016 17:47
@Dragoon555 Remove position: fixed from your #navbar css and your right/left margins should work
Dragoon555
@Dragoon555
Aug 11 2016 17:50
@TylerMoeller That's the thing, though. I fixed it to the top so it can still be seen if you scroll the page, like a navigation bar.
Tyler Roberts
@teachtyler
Aug 11 2016 17:51
Tyler Moeller
@TylerMoeller
Aug 11 2016 17:53
@Dragoon555 You can still fix your navbar to the top without position: fixed. It's not stuck to the top now because you have a margin-top applied to your body. Apply the margin-top to your first "Test paragraph" section to separate it from the navbar instead. Ideally, just use the bootstrap navbar and it will make your life a little easier :) https://getbootstrap.com/components/#navbar
Dragoon555
@Dragoon555
Aug 11 2016 17:55
@TylerMoeller Ok, I see what you mean.
@TylerMoeller I'm trying not to use bootstrap to really understand the relationship between CSS and HTML. Once I have a good grasp, then I will start using bootstrap.
Tyler Moeller
@TylerMoeller
Aug 11 2016 17:57
@Dragoon555 In that case, I'd recommend removing bootstrap from the CSS settings in your codepen until you are more familiar with the various classes. It may conflict with classes you define in your non-bootstrap html/css
Dragoon555
@Dragoon555
Aug 11 2016 18:00
@TylerMoeller Wow, that changes a lot. Back to the drawing board for me...
Tyler Moeller
@TylerMoeller
Aug 11 2016 18:01
Yeah :) going to make it harder to understand what your CSS is doing when Bootstrap is already modifying the page in the background.
@zelite animate.css won't give you the js needed to sequentially animate specific elements one at a time. You could use a setTimeout() or move your animations to jQuery to use with callbacks or promise chains.
Arin
@arinarjani
Aug 11 2016 18:05

guys, I goofed up. I was messing around with the tabs on JSFiddle and now I cannot see my CSS, or even resize the CSS/Results tab. Any hints on how to get things working again. Thankfully I have my CSS. Here is my JSfiddle: https://jsfiddle.net/arinarjani/g0vppjdz/4/

Also, all the JSFiddle's I create now are messed up with the spacing.

I figured it out. Run: Layout.setWindowSizes(null) through the console.
Artis Raudive
@ar14059
Aug 11 2016 18:18
Hi everyone! I almost finished my TWITCH project, i just need to solve one problem - when i click on channel title link, it opens new tab, where should load channel profile page on TWITCHTV, but it didn't load it (link to this page works, when i open it in new tab), any ideas? Here is my project in CodePen: http://codepen.io/artisraudive/pen/pbqjJz?editors=0100
the doer
@ewathedoer
Aug 11 2016 18:19
@ar14059 try in debug mode, it should work then, I had similar problem
if it opens in debug mode, just provide it as a link to live preview
Artis Raudive
@ar14059
Aug 11 2016 18:23
@ewathedoer In debug mode works perfectly but how can i provide it as a link to live preview?
the doer
@ewathedoer
Aug 11 2016 18:23
Just when you give a link in a portfolio or wherever you want to share it give the one with debug inside url @ar14059
I think it’s the problem of codepen
Dylan
@dhcodes
Aug 11 2016 18:24
@ar14059 codepen issue
share the debug link as recommended
Artis Raudive
@ar14059
Aug 11 2016 18:30
@ewathedoer @dhcodes Thanks, i will do that. :smile:
CamperBot
@camperbot
Aug 11 2016 18:30
ar14059 sends brownie points to @ewathedoer and @dhcodes :sparkles: :thumbsup: :sparkles:
:cookie: 446 | @ewathedoer |http://www.freecodecamp.com/ewathedoer
:star2: 1323 | @dhcodes |http://www.freecodecamp.com/dhcodes
Baku
@musiqe31
Aug 11 2016 19:06
Anyone learning angularjs?
Tyler Roberts
@teachtyler
Aug 11 2016 19:09
@musiqe31 yep
kat-mag
@kat-mag
Aug 11 2016 19:09
@musiqe31 Everything that's better than react... xD
ivanposavec
@ivanposavec
Aug 11 2016 19:12
can someone help me?
kat-mag
@kat-mag
Aug 11 2016 19:12
That is not very specific @ivanposavec
Baku
@musiqe31
Aug 11 2016 19:12
@kat-mag you don't like react?
kat-mag
@kat-mag
Aug 11 2016 19:13
@musiqe31 yeah, syntax looks like barf
Baku
@musiqe31
Aug 11 2016 19:13
Can't argue with that @kat-mag
ivanposavec
@ivanposavec
Aug 11 2016 19:13
i have a problem with thumbnail in html, it is a lot bigger then my picture, but i want it to be just around picture
kat-mag
@kat-mag
Aug 11 2016 19:14
@musiqe31 Sometimes you hate something for weird reasons. That's one thing ;D
Baku
@musiqe31
Aug 11 2016 19:16
Ha yea I agree @kat-mag come on google.....do better 😂
kat-mag
@kat-mag
Aug 11 2016 19:16
@musiqe31 Google is doing better. It has Angular & Polymer. Also Dart <3
@musiqe31 But that facebook-react cr*p.. Can't stand looking at it.
Baku
@musiqe31
Aug 11 2016 19:18
Have you tried angular 2 @kat-mag ?
kat-mag
@kat-mag
Aug 11 2016 19:20
@musiqe31 Not yet. Watched some tuts and I am trying to make myself code something in A2... But first TypeScript.
Baku
@musiqe31
Aug 11 2016 19:20
@kat-mag gotcha
Safbek
@safbek
Aug 11 2016 19:25
@sorinr you wrote that made changes to the div experience and awards
Sabrina Ferguson
@itsacoyote
Aug 11 2016 19:29
@musiqe31 love me some angular, and I agree with @kat-mag I am not a fan of React
kat-mag
@kat-mag
Aug 11 2016 19:35
@itsacoyote Yeah. Believe me, I've tried to like React. Really... But. Failed miserably
Sabrina Ferguson
@itsacoyote
Aug 11 2016 19:36
@kat-mag if you come from the server/developer side, I can see why some like it possibly more than Angular. From the designer side, I find it a little odd with its quirks.
And sure, comparing to Angular, Ang1 does have it's own quirks and slightly messy style of structure, but I'm loving Ang2 over anything else so far. They're doing things good with Ang2 now lol
kat-mag
@kat-mag
Aug 11 2016 19:38
@itsacoyote Yeah, I
I've seen some tuts on Angular 2 and I need to get into it
@kat-mag besides, angular-material is almost done too, so it'll even look pretty ;D
Sabrina Ferguson
@itsacoyote
Aug 11 2016 19:41
Check out John Papa's Angular 2 guides, he's got some greaaat stuff for Ang in general
kat-mag
@kat-mag
Aug 11 2016 19:45
@itsacoyote I prefer to watch (or read) Misko Hevery, Todd Motto & Kara Erickson ;)
Baku
@musiqe31
Aug 11 2016 19:52
@itsacoyote yea it is definitely a headache
massendoping
@massendoping
Aug 11 2016 20:33
Can anyone help me with my carousel?
Tyler Moeller
@TylerMoeller
Aug 11 2016 20:36
@massendoping make sure you have both jQuery and Bootstrap.min.js in your codepen's JavaScript settings. jQuery needs to be the first one listed, like in this image: http://i.imgur.com/ZOIn7mv.png
massendoping
@massendoping
Aug 11 2016 20:40
thanks, I didn't have the first one added
massendoping
@massendoping
Aug 11 2016 20:45
hmm...that didn't help :(
Tyler Moeller
@TylerMoeller
Aug 11 2016 20:49

@massendoping You are getting these errors in the browser's developer tools console:

Mixed Content: The page at 'codepen.io/massendoping/pen/AXmZqa/' was loaded over HTTPS, but requested an insecure script 'http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'. This request has been blocked; the content must be served over HTTPS.

Change your links to bootstrap.js to use https instead of http

the doer
@ewathedoer
Aug 11 2016 20:50
@massendoping maybe that’s the reason 'http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'. This request has been blocked; the content must be served over HTTPS.
this is what you have in the console now
mnghm
@mnghm
Aug 11 2016 20:57
Hi guys, stuck on convert Celsius to Fahrenheit challenge. Any tips please?
Rakesh Kumar
@infinitasweb
Aug 11 2016 20:59
@nghm use the formula mentioned right side
@miles celsius is the already given variable use it like x calculating y
@miles sorry man. typo
mnghm
@mnghm
Aug 11 2016 21:01
@infinitasweb Ok, I will give it another try!
Rakesh Kumar
@infinitasweb
Aug 11 2016 21:05
you know the formula right @nghm
mnghm
@mnghm
Aug 11 2016 21:07
@infinitasweb Thank you! I just broke it down, and read it line by line and have now completed it.
CamperBot
@camperbot
Aug 11 2016 21:07
nghm sends brownie points to @infinitasweb :sparkles: :thumbsup: :sparkles:
:cookie: 187 | @infinitasweb |http://www.freecodecamp.com/infinitasweb
Rakesh Kumar
@infinitasweb
Aug 11 2016 21:07
@nghm :thumbsup:
Fabien Lenoir
@flenoir
Aug 11 2016 21:10
hi all
i am strating the Twitch TV api challange and i want to append the object i get from the api with the array of user but i can't get the users inside my getJSON. how can i send this information, my code is ```
````
 var twitchUsersArray = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];

for (var i = 0; i <  twitchUsersArray.length; i++){

    $.getJSON('https://api.twitch.tv/kraken/streams/' + twitchUsersArray[i], function(data){
      //console.log(data);
       data.user = twitchUsersArray[i];
       console.log(data);
  })  

}
Irina
@2Irina2
Aug 11 2016 21:14
Heeyy!
Fabien Lenoir
@flenoir
Aug 11 2016 21:14
hi
Irina
@2Irina2
Aug 11 2016 21:14
Again with the weather app fml :joy:
Stephen James
@sjames1958gm
Aug 11 2016 21:14
@flenoir http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example
When your callback runs i has been incremented to twitchUsersArray.length
There is something i am doing wrong at the bottom of my JS code but i can't figure it out
why is it not working?
Stephen James
@sjames1958gm
Aug 11 2016 21:15
@flenoir Also you don't want to be setting values in the data from the API.
@2Irina2 What is not working?
Jason Luboff
@JLuboff
Aug 11 2016 21:15
@2Irina2 your background?
Irina
@2Irina2
Aug 11 2016 21:16
@JLuboff @sjames1958gm yeah, the background wouldn't change depending on the weather
i made an object and i used the css method to change the background
Fabien Lenoir
@flenoir
Aug 11 2016 21:17
@sjames1958gm yes i can update the data value coming from api, so i wanted to create a new object from the "data" and append my users array to it
Stephen James
@sjames1958gm
Aug 11 2016 21:17
@2Irina2 Your code to set the background needs to happen when you retrieve the weather not when the page is loaded.
Put in a function and call when you weather API returns
@flenoir You mean create an object with the user and the data together?
Irina
@2Irina2
Aug 11 2016 21:19
@sjames1958gm Well, once the weather is retrieved, i save it in the variable currentWeather..
@sjames1958gm then currentWeather is a string with the weather description.. that i am planning to use later for background[currentWeather]
Fabien Lenoir
@flenoir
Aug 11 2016 21:20
@sjames1958gm yes exactly, is that a good solution or not ,
Stephen James
@sjames1958gm
Aug 11 2016 21:22
@2Irina2 You need to set the background in the callback, when you have the current weather
@2Irina2 After you set your html and your current weather
$('html').css("background-image", 'url(' + background[currentWeather] + ')');
It's not perfect but something to work from.
Btw, the string for clear is "Clear"-
@flenoir That is fine probably need to create an empty object first.
for (var i = 0; i < twitchUsersArray.length; i++){ Change this to
twitchUsersArray.forEach(function(user) {
   //Then inside this forEach use user instead of `twitchUsersArray[i]`
)};
Irina
@2Irina2
Aug 11 2016 21:27
@sjames1958gm ah THANK YOU
CamperBot
@camperbot
Aug 11 2016 21:27
2irina2 sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 2518 | @sjames1958gm |http://www.freecodecamp.com/sjames1958gm
Jason Luboff
@JLuboff
Aug 11 2016 21:28
hey @sjames1958gm you've helped me before and I'm hoping you can offer me a good suggestion. On my wikipedia viewer, I have a Css hover effect (transform: scale), I don't want it to be present while on a touch device (mobile/tablet) as it only activates when tapped on and then stays active until tapped away which looks bad. Any suggestions on how to handle it?
Stephen James
@sjames1958gm
Aug 11 2016 21:30
@JLuboff Not my area of expertise, but there is a value called navigator.userAgent
that contains the word Mobile when on mobile browsers.
http://www.w3schools.com/jsref/prop_nav_useragent.asp
@JLuboff You can test it with chrome devtools by setting your mode to say iphone 5 and in the console
"Mozilla/5.0 (iPhone; CPU iPhone OS 9_1 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13B143 Safari/601.1"
Jason Luboff
@JLuboff
Aug 11 2016 21:32
I'll take a look, thanks!
Fabien Lenoir
@flenoir
Aug 11 2016 21:41
@sjames1958gm thank you, it's working
CamperBot
@camperbot
Aug 11 2016 21:41
flenoir sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 2519 | @sjames1958gm |http://www.freecodecamp.com/sjames1958gm
Stephen James
@sjames1958gm
Aug 11 2016 21:41
@flenoir :)
Hadouken
@Harry97
Aug 11 2016 21:48
as of right I'm working on the pomodoro clock challenge
now for those of you guys who have finished it how did you guys handle the count down?
did you guys resort to vanilla javascript or jquery?
and which one is better?
Ken Haduch
@khaduch
Aug 11 2016 21:54
@Harry97 - used jQuery for the DOM transactions, and (I guess no other choice) javascript code for the timer code and logic. jQuery makes DOM access a lot easier, in my opinion, but maybe because I've never focused on the javascript DOM interaction functions.
Joel Santos
@St3ps
Aug 11 2016 21:54
@Harry97 I used jquery
I also used the clock in the three.js library as reference
massendoping
@massendoping
Aug 11 2016 21:58
thanks @TylerMoeller and @ewathedoer for introducing me to the console :smile:
CamperBot
@camperbot
Aug 11 2016 21:58
massendoping sends brownie points to @tylermoeller and @ewathedoer :sparkles: :thumbsup: :sparkles:
:cookie: 452 | @ewathedoer |http://www.freecodecamp.com/ewathedoer
:cookie: 733 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
massendoping
@massendoping
Aug 11 2016 21:58
it works now
Damian Collier
@damianpcollier
Aug 11 2016 21:59

Hello All.

Having completed the task, this might seem like an odd question.
Take a look at my random quote machine codepen.
Appreciate the background does not change as I am using local images ( I will amend)

My question is, how does this actually launch and display a random quote and background after displaying the initial html.

I'm on with the weather task and trying to get a simple message via Javascript but all im getting is a blank page

https://codepen.io/collierd/pen/grkBNv

Jason Luboff
@JLuboff
Aug 11 2016 22:03
@damianpcollier Not sure I understand your question?
Brandon Gottschling
@bgottschling
Aug 11 2016 22:05
Hello I need help calling my Open Weather Map API. My response just looks like Object, and when I try to access it using dot notation I get undefined properties.
Damian Collier
@damianpcollier
Aug 11 2016 22:05
When I launch this, it goes straight in, pulls back a quote and displays it. I don't need to click on generate new quote
so having just generated something that works without any interaction, I now can't quite work out how i've done it!
Jason Luboff
@JLuboff
Aug 11 2016 22:08
@damianpcollier Gotcha. I'm going to let someone else chime in since I'm not sure.
@bgottschling Can you post your codepen? I found the dot notation to be a bit tricky myself with it
Brandon Gottschling
@bgottschling
Aug 11 2016 22:11
@JLuboff How do I post code snippets here?
Jason Luboff
@JLuboff
Aug 11 2016 22:11
@bgottschling You can just post the link to your codepen
Brandon Gottschling
@bgottschling
Aug 11 2016 22:12
@JLuboff I don't use codepen, but you can view the project here: http://bgottschling.github.io/weatherapp.html
``` testing
@JLuboff
//necessary global variables for selector caching.
var $tempMode = $("#tempMode");
var $tempText = $("#temp-text");
var $windText = $("#wind-text");
//$(document).ready(function() {

//function for instruction dialog
  $(function() {
    $("#dialog").dialog();
  });

  // this function takes the temperature from the dataHandler and displays the temperature according to the correct temperature unit, and colors the temperature hot or cold.
  function formatTemperature(kelvin) {


    var clicked = false;
    var fahr = ((kelvin * 9 / 5) - 459.67).toFixed(0);
    var cels = (kelvin - 273.15).toFixed(1);
    //initial temperature display
    $tempText.html(fahr);

    var firstClick = false;
    //click handler to update the temperature unit of measurement.
    $tempMode.off("click").on("click", function() {
      firstClick = true;
      console.log(clicked);
      clicked === false ? clicked = true : clicked = false;
      clicked === true ? $tempMode.html("C&deg") : $tempMode.html("F&deg");
      if (clicked) {
        $tempText.html(cels);
      } else
        $tempText.html(fahr);
    });

    if (cels > 24) {
      $("#temp-text").css("color", "red");
    } else if (cels < 18) {
      $("#temp-text").css("color", "blue");
    }
  }
  //handles response data and formats it accordingly since it is an asynchronous response object all data handling and formatting must be done within this function.
  function dataHandler(data) {

    console.log(data);
    console.log(data.main);
    console.log(data.main.temp);

    formatTemperature(data.main.temp);

    if (data.main.temp && data.name && data.sys) {
      // display location name
      $("#city-text").html(data.name + ", " + data.sys.country);
      // display icon
      if (data.weather) {
        var imgURL = "http://openweathermap.org/img/w/" + data.weather[0].icon + ".png";
        $("#weatherImg").attr("src", imgURL);
        $("#weather-text").html(data.weather[0].description);
      }
      // display wind speed
      if (data.wind) {
        var knots = data.wind.speed * 1.9438445;
        $windText.html(knots.toFixed(1) + " Knots");
      }
    }
  }
  //This calls the api with the correct coordinates provided by the getLocation function
  function getWeather(data) {
    var lat = data.lat;
    var lon = data.lon;
    var apiURI = "http://api.openweathermap.org/data/2.5/weather?lat=" + lat + "&lon=" + lon + "&appid=06170c100199dbae1e223cc3dfad960b";

    console.log("success getWeather");
    console.log(apiURI);
    return $.ajax({
      url: apiURI,
      dataType: "json",
      type: "GET",
      async: "true",
    });
  }

  //Passes the browser's geolocation into the getWeather function once its done the response from the getWeather call will be passed to the data handler for formatting.
  var counter = 0;

  function getLocation() {
    console.log("Update# " + counter++);

    return $.ajax({
      url: "http://ip-api.com/json",
      dataType: "json",
      type: "GET",
      async: "true",
    });
  }

    /*
    if ("geolocation" in navigator) {
      navigator.geolocation.getCurrentPosition(function(position) {
        console.log("test");
        getWeather(position.coords.latitude, position.coords.longitude).done(dataHandler);
      })
    } else {
      alert("geolocation not available");
    }
  }
    */
  var updateInterval = setInterval(getLocation().done(getWeather).done(dataHandler), 300000);
//});
Adam Jacks
@AdamHJ123
Aug 11 2016 22:16
Guys, any idea how I can make all these images the same height? https://s.codepen.io/AdamHJacks/debug/jAQbJy#main
Brandon Gottschling
@bgottschling
Aug 11 2016 22:18
@AdamHJ123 Create a css property with specific dimensions.
@AdamHJ123 CSS class, or ID I mean then use that class or ID on the Images.
Jason Luboff
@JLuboff
Aug 11 2016 22:19
@bgottschling It seems that you're calling to the results outside of the function. I used geolocator and .getJSON, so mines a little different but I had my .getJSON within my geolocator and then all results fed within the .getJSON function
Adam Jacks
@AdamHJ123
Aug 11 2016 22:19
@bgottschling I've already done that haven't I?
Brandon Gottschling
@bgottschling
Aug 11 2016 22:21
@AdamHJ123 You're using % based units of measurment which will stretch the picture relative to its source size.
measurement*
@JLuboff I use a promise to call a function using the data returned from the async call.
Specifically datahandler is called. I will look into a little more. Thanks for your input.
Adam Jacks
@AdamHJ123
Aug 11 2016 22:23
@bgottschling Ah, how can I do it relative to it's parent div?
Jason Luboff
@JLuboff
Aug 11 2016 22:23
@bgottschling I think someone with more knowledge will have to step in, sorry I couldn't be more help!
Brandon Gottschling
@bgottschling
Aug 11 2016 22:28
@AdamHJ123 Can you post the editor view of your codepen?
Adam Jacks
@AdamHJ123
Aug 11 2016 22:28
vínαч puppαl
@vinaypuppal
Aug 11 2016 22:34

@AdamHJ123 instead of max-width and max-height 100% try

width: 100%;
height: 100%;

for .fitimage

Brandon Gottschling
@bgottschling
Aug 11 2016 22:35
@AdamHJ123 You are also trying to reinvent the built in bootstrap class of img-responsive. Check my forked revision which should be closer to what you are aiming for. http://codepen.io/brandon-gottschling/full/grkqLm/
Tyler Moeller
@TylerMoeller
Aug 11 2016 22:53
@bgottschling You have some async issues with your weather app. You can use .done() on .ajax calls as you were trying to do with your setInterval() call. Start with this and then try adding your temperature conversion code again.
$(document).ready(function() {
  getLocation()
});

function getWeather(data) {
  var lat = data.lat;
  var lon = data.lon;
  var apiURI = "http://api.openweathermap.org/data/2.5/weather?lat=" + lat + "&lon=" + lon + "&appid=06170c100199dbae1e223cc3dfad960b";
  $.ajax({
    url: apiURI,
    dataType: "json",
    type: "GET",
    async: "true",
  }).done(function(weatherData) {
    console.log(weatherData);
    // do more here as needed now that you have your locData + weatherData
  });
}

function getLocation() {
  $.ajax({
    url: "http://ip-api.com/json",
    dataType: "json",
    type: "GET",
    async: "true",
  }).done(function(locData) {
    console.log(locData);
    getWeather(locData);
  });
}
Brandon Gottschling
@bgottschling
Aug 11 2016 22:58
@TylerMoeller I will try that and see what I get.
Tyler Moeller
@TylerMoeller
Aug 11 2016 22:58
@bgottschling Another thing, just in case, that location url is blocked by adblock in case you have it enabled.
What do you think?
Jason Luboff
@JLuboff
Aug 11 2016 23:07
@2Irina2 Looks good, although it thinks I'm in a location ~180 miles away....I'm guessing you're using IP based location?
Irina
@2Irina2
Aug 11 2016 23:08
Jason Luboff
@JLuboff
Aug 11 2016 23:10
@2Irina2 interesting, I had originally played around with using ip-api.com which does accurately get my city from my IP but I was unhappy with how it worked over mobile data (thinking I'm in different states due to cell provider IP registration)
Irina
@2Irina2
Aug 11 2016 23:11
Oh, I understand.. Well, thank you! :)
Brandon Gottschling
@bgottschling
Aug 11 2016 23:13
@TylerMoeller Thanks for your suggestion. It seems to be working now. http://bgottschling.github.io/weatherapp.html
CamperBot
@camperbot
Aug 11 2016 23:13
bgottschling sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 734 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Aug 11 2016 23:13
@bgottschling glad it helped, yes, it's working for me too.
Brandon Gottschling
@bgottschling
Aug 11 2016 23:14
@TylerMoeller Could you elaborate more on why my async call did not work even though I was getting a response on my second call?
Tyler Moeller
@TylerMoeller
Aug 11 2016 23:15
@bgottschling You were calling your dataHandler() function before you had the weather data, so everything was erroring out when you tried to access data.main.temp because that data wasn't available to the function yet
Brandon Gottschling
@bgottschling
Aug 11 2016 23:20
I see, that makes sense. Its hard to follow code execution with async calls. Have any suggestions for that?
Tyler Moeller
@TylerMoeller
Aug 11 2016 23:22
@bgottschling I just use console.log everywhere. Wish I had a better suggestion
Jason Luboff
@JLuboff
Aug 11 2016 23:23
@TylerMoeller I love console.log :)
Tyler Moeller
@TylerMoeller
Aug 11 2016 23:23
Lol :)
That and a rubber duck to help with the debugging
Brandon Gottschling
@bgottschling
Aug 11 2016 23:24
@TylerMoeller No worries. I just came back after a 4+ month hiatus, and I wish I never took the time off, so rusty. I chained my .done() calls, so after the first one data handler was being called too soon huh?
@TylerMoeller I appreciate you going over the nuances with me.
Tyler Moeller
@TylerMoeller
Aug 11 2016 23:25
@bgottschling It seems that was the case, I hadn't seen setInterval used like that for serializing function calls, but I'm here to keep learning. Seems it should work, but promise() is the best practice now. The .done(), .fail(), .always() implements promise() under the hood from what I understand.
Dan Logajan
@hiltydiggs
Aug 11 2016 23:25
@bgottschling @TylerMoeller slightly relevant, ES2015 fetch
Tyler Moeller
@TylerMoeller
Aug 11 2016 23:27
@hiltydiggs Very nice, another one that uses promise() under the hood
Brandon Gottschling
@bgottschling
Aug 11 2016 23:38
@TylerMoeller I found that as long as I don't chain my done calls that I can still call an outside function to handle the data. I will need to learn more on using promises. I am actually wanting to learn angular2 altogether, but its a bit daunting.
Dan Logajan
@hiltydiggs
Aug 11 2016 23:40
I've gotten as far as the Angular 2 documentation. It's enough to realize you're opening up a whole new can of worms.
Brandon Gottschling
@bgottschling
Aug 11 2016 23:45
Oh yeah, its so weird, but awesome.