These are chat archives for FreeCodeCamp/HelpFrontEnd

18th
Apr 2016
PK
@arcticfries
Apr 18 2016 00:28
I need some help.. have few issues going on on my portfolio page which are: 1. I can't change the color background for some reason and it's grayish looking.. 2. my portfolio pictures seem to be going one after next and not next to each other in a table like format. Any help is appreciated. http://codepen.io/arcticfries/pen/pyVKJm
Can't figure out why I can't get the pictures to go next to each other... I figured out how to size them to look similar sized but just can't get them next to each other:(
PK
@arcticfries
Apr 18 2016 00:34
anyone in the room?
Juwdohr
@Juwdohr
Apr 18 2016 00:56
@arcticfries Have you put them in col-?
also they are only supposed to be 12 to a col
Anyone know how to get the background image to not scroll with the page?
Bruce Young
@mutantspore
Apr 18 2016 01:00
fixed
@Juwdohr background-attachment: fixed;
Juwdohr
@Juwdohr
Apr 18 2016 01:02
@mutantspore thanks
CamperBot
@camperbot
Apr 18 2016 01:02
juwdohr sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
:star: 1426 | @mutantspore | http://www.freecodecamp.com/mutantspore
Bruce Young
@mutantspore
Apr 18 2016 01:03
you can have fixed or scroll
Francisco Franco
@frenktico
Apr 18 2016 01:08
I have an issue
while using CSS
Bruce Young
@mutantspore
Apr 18 2016 01:08
@frenktico you can get a creame for that
Francisco Franco
@frenktico
Apr 18 2016 01:09
.menu{
    display: inline-block;
}
CamperBot
@camperbot
Apr 18 2016 01:09
type help for a list of things the bot can do
Francisco Franco
@frenktico
Apr 18 2016 01:09
This is my HTML
<div class="menu">
    <p>Tictail</p>
    <ul>
        <li class="btnwhite">Sign up</li>
        <li>Log in</li>
        <li>Menu</li>
    </ul>
</div>
Ademola Adegbuyi
@ooade
Apr 18 2016 01:10
your css is not clear. No class declaration??
Francisco Franco
@frenktico
Apr 18 2016 01:10
Oh the code isn't loading properly on the chat room
Now I corrected the way it was appearing.
Frank XC
@tenkdayz
Apr 18 2016 01:11
@frenktico you have to give the ul li display inlineblock. not the div
PK
@arcticfries
Apr 18 2016 01:14
@Juwdohr hi yes, but not working some how
Juwdohr
@Juwdohr
Apr 18 2016 01:14
@arcticfries are do you have bootstrap and jquery loaded?
AaronCs
@AaronCs
Apr 18 2016 01:20
hey guys, what's a good resource for learning ajax better?
Francisco Franco
@frenktico
Apr 18 2016 01:20
Ok @tenkdayz
But what about the <p> tag that won't be on the same line as the <ul> :/
How could I fix this?
Mark Little
@MarkBLittle
Apr 18 2016 01:29
Make sure your <p> tag has display: block;. If that doesn't work, try adding clear:both; to your <p> tag as well
Francisco Franco
@frenktico
Apr 18 2016 01:30
let me see
Mark Little
@MarkBLittle
Apr 18 2016 01:31
Or are you saying that you WANT them on the same line?
Francisco Franco
@frenktico
Apr 18 2016 01:33

CSS

p{
    display: block;
}
li{
    display: inline;
}

HTML

<div class="menu">
    <p>Tictail</p>
    <ul>
        <li class="btnwhite">Sign up</li>
        <li>Log in</li>
        <li>Menu</li>
    </ul>
</div>
I do want them on the same line
Mark Little
@MarkBLittle
Apr 18 2016 01:34
Oh, change display: block; to display: inline-block; or display: inline;
Francisco Franco
@frenktico
Apr 18 2016 01:37
No it didn't change anything
:'(
Mark Little
@MarkBLittle
Apr 18 2016 01:37
Are you using Bootstrap?
Francisco Franco
@frenktico
Apr 18 2016 01:37
No, this is only CSS and HTML
Mark Little
@MarkBLittle
Apr 18 2016 01:37
Okay, hang on
Francisco Franco
@frenktico
Apr 18 2016 01:37
if was I would use nav
Mark Little
@MarkBLittle
Apr 18 2016 01:38
I'd use nav anyway, to be honest. More semantic.
p, ul, li {display: inline-block;}
Your ul element is still block-level, it needs to be either inline or inline-block
Francisco Franco
@frenktico
Apr 18 2016 01:42
Well I got upset with myself at this moment.
Let me redo the whole code
Before I do that, could you explain something?
Mark Little
@MarkBLittle
Apr 18 2016 01:42
Why the whole code? just switch your ul to display: inline or display inline-block
What's that?
Francisco Franco
@frenktico
Apr 18 2016 01:43
I want to have a nav on the top of the page. On the left I'd like to have the logo and on the right the three options (buttons).
This is what I have:
<header>
    <p class="logo">Tictail</p>
    <nav>
        <li>Sign up</li>
        <li>Log in</li>
        <li>Menu</li>
    </nav>
</header>
Mark Little
@MarkBLittle
Apr 18 2016 01:45
Okay. So you nest <nav> inside your <header>, then in your CSS, put float: right; on your nav element.
Or in your current code, float your ul right
Francisco Franco
@frenktico
Apr 18 2016 01:45
Instead a div shall I use nav*
?
Mark Little
@MarkBLittle
Apr 18 2016 01:47
Well, if you're going for semantics, I'd change <div> to <header>. Also, you're closing your <div> with </nav>, which should be </div>, or </header> if you switch it. Then I'd wrap your <ul>...</ul> in a <nav></nav>
Ah, you changed it as I was typing that.
Francisco Franco
@frenktico
Apr 18 2016 01:48
I changed it again
Mark Little
@MarkBLittle
Apr 18 2016 01:49
Close. You still want your <ul> tags.
Francisco Franco
@frenktico
Apr 18 2016 01:49
<header>
    <p class="logo">Tictail</p>
    <nav>
        <ul>
            <li>Sign up</li>
            <li>Log in</li>
            <li>Menu</li>
        </ul>
    </nav>
</header>
Mark Little
@MarkBLittle
Apr 18 2016 01:49
Exactly.
Francisco Franco
@frenktico
Apr 18 2016 01:50
still tricky
Mark Little
@MarkBLittle
Apr 18 2016 01:50
It's not necessary, but it's prettier. Sometimes I'll leave my <nav> and my <header> separate, sometimes I'll have them nested like that. It makes it a little easier to work with if you need to change the layout.
Francisco Franco
@frenktico
Apr 18 2016 01:51
Great
thanks in advance for the clarification @MarkBLittle
CamperBot
@camperbot
Apr 18 2016 01:51
frenktico sends brownie points to @markblittle :sparkles: :thumbsup: :sparkles:
:star: 306 | @markblittle | http://www.freecodecamp.com/markblittle
Francisco Franco
@frenktico
Apr 18 2016 01:51
Okay, now that the HTML is fixed, what about the CSS which still not functional.
And making me cry
Mark Little
@MarkBLittle
Apr 18 2016 01:52
For example, if you want a sticky navigation, so you keep scrolling and you want your nav still visible, I'll put the nav outside of the header, leaving the header as kind of a landing element, set the position to fixed on the nav and style it from there as needed.
Francisco Franco
@frenktico
Apr 18 2016 01:52
sometimes I doubt myself as a programmer
Mark Little
@MarkBLittle
Apr 18 2016 01:52
What've you got on your CSS?
Francisco Franco
@frenktico
Apr 18 2016 01:52
I cleared it out
let me see how I would do all by myself
Mark Little
@MarkBLittle
Apr 18 2016 01:53
Okay, you said you wanted the logo on the left and the nav on the right?
Francisco Franco
@frenktico
Apr 18 2016 01:54
Yes
This is what I've done:
.logo {
    display: inline;
}
li {
    display: inline;
}
clearly didn't work out
Mark Little
@MarkBLittle
Apr 18 2016 01:55
Okay, so your <p> and your list items are all inline, but your logo and your actual list are on separate lines, yes?
Francisco Franco
@frenktico
Apr 18 2016 01:56
uhun
sadly yes
Mark Little
@MarkBLittle
Apr 18 2016 01:56
Okay, just so you can see what's really going on, set background: pink; to .logo and background: blue; to li
The text should just be highlighted, right?
Francisco Franco
@frenktico
Apr 18 2016 01:57
Yes
Mark Little
@MarkBLittle
Apr 18 2016 01:58
Okay, we're going to condense this. Remove both lines that say display: inline;
Francisco Franco
@frenktico
Apr 18 2016 01:58
done
Mark Little
@MarkBLittle
Apr 18 2016 01:59
And set up a list in your CSS of elements. Just like this: .logo, li
Francisco Franco
@frenktico
Apr 18 2016 01:59
I thought this should be set to header or nav tag
?! Sorry I didn't understand
Mark Little
@MarkBLittle
Apr 18 2016 02:00
And then add the display: inline; back one time in those elements.
Francisco Franco
@frenktico
Apr 18 2016 02:00
I have to add all elements of my HTML on the CSS?
Mark Little
@MarkBLittle
Apr 18 2016 02:01
.logo, li {
display: inline;
}
.logo {
background: pink;
}
li {
background: blue;
}
That's what it should look like now, with indentions, of course.
Francisco Franco
@frenktico
Apr 18 2016 02:02
Okay it is there
and still the same
Mark Little
@MarkBLittle
Apr 18 2016 02:02
Now, add nav, ul between .logo and li
All comma separated
Francisco Franco
@frenktico
Apr 18 2016 02:03
Done
On the same line
:)
Thanks @MarkBLittle
Mark Little
@MarkBLittle
Apr 18 2016 02:04
Okay, now you can remove all the colors. I'd add ul {float: right;} or nav{float: right;} after that
CamperBot
@camperbot
Apr 18 2016 02:04
frenktico sends brownie points to @markblittle :sparkles: :thumbsup: :sparkles:
:warning: frenktico already gave markblittle points
Francisco Franco
@frenktico
Apr 18 2016 02:04
uhun
It is working the way I wanted. Thank you so much for patience and support
:D
Mark Little
@MarkBLittle
Apr 18 2016 02:05
That just pushes everything to the right. It may right-align your li items as well due to inheritence, so you can add li{float:left;} under that to push them back to left-aligned within the actual list items.
Francisco Franco
@frenktico
Apr 18 2016 02:05
I still wanted to cry
Mark Little
@MarkBLittle
Apr 18 2016 02:06
No problem! If you have any more questions, PM me. I'm about to run out for a drink or two though :)
Francisco Franco
@frenktico
Apr 18 2016 02:06
hahaha oks
for now I gotta go and study to push myself and keep practing
I need some exercises beyond the FCC course
Mark Little
@MarkBLittle
Apr 18 2016 02:07
codecademy is very similar and teaches more on repetition than on researching on your own and asking questions. Different way of learning, but combined the two sites are very effective.
Francisco Franco
@frenktico
Apr 18 2016 02:08
I'm combining CodeAcademy with FreeCodeCamp and Khan Academy.
Again you were very helpful
Mark Little
@MarkBLittle
Apr 18 2016 02:09
Also, DevTips on YouTube has some great lessons. Some are more advanced, but I think he's got some more basic stuff as well. Got me into using preprocessors and whatnot, so it's really been months since I've written plain old HTML/CSS lol
He's also developing a JS course at the moment. I'm not sure when it will be released, but it is a paid one. He's an incredible teacher though, so I'll probably pay for them if I can afford to.
Francisco Franco
@frenktico
Apr 18 2016 02:10
I just got focused on doing it but the thing is that made me feel so insecure because I can design a layout however when I attempt to build the code oh jezz
This is another monster I have to fear (yet a monster for now but won't be for long).
JS made me slow down the pace here at FCC
Mark Little
@MarkBLittle
Apr 18 2016 02:12
JS is tricky sometimes, man. That's most of what got me using it. And then I realized how much they have to offer, so I'm sticking with it. I'm 15 challenges and 4 projects from getting the FE certification. I'm taking my time because I want to do data visualization before back end, but the courses aren't up yet and I don't know React or D3.
Francisco Franco
@frenktico
Apr 18 2016 02:14
Here at SP we had our first code and coffee where we got to talk more than coding, but we will be doing more meetings around the city
I hope to improve my knowledge through this moments "offline" while meeting new people
Mark Little
@MarkBLittle
Apr 18 2016 02:15
Sass is freaking awesome though, that's how I build my freelance projects these days. It's so much easier than CSS once you get used to the syntax. It's all indention based with no brackets, and depending on if you use Sass or SCSS (both called Sass), no semi-colons. It forces you to write clean code, and I love it.
Yeah, I think we're trying to get one here in Charlotte soon, but the CLT community on here isn't that big, so we'll see what happens lol
Francisco Franco
@frenktico
Apr 18 2016 02:16
Try to set up at least hangouts
that can work as well
Mark Little
@MarkBLittle
Apr 18 2016 02:18
Yeah, I plan to very soon. Fortunately, I have a good handful of friends in the industry, so I've learned a lot from them over the years. But it's beer time. I'll chat with ya later :)
Michael Aubrey
@mca62511
Apr 18 2016 02:39
Hey there, working on the Simon project. I want to make the buttons light up when they're clicked. Any idea why this isn't working?
function lightUp(element) {
    var currentBg = element.css("background-color").replace(/[^0-9$.,]/g, '').split(",");
    var lightBg = currentBg.map(function(value) {
        value = parseInt(value) + 50;
        if (value > 255) value = 255;
        return value;
    });
    var rgbString = "rgb(" + currentBg.join(",") + ")";
    var lightRgbString = "rgb(" + lightBg.join(",") + ")";
    element.css({
        "background-color": lightRgbString
    });
}
Michael Aubrey
@mca62511
Apr 18 2016 02:50
I think I figured it out
I'm using Google's Material Design Light css framework, and I was coloring the buttons using their "mdl-color--red", "mdl-color--blue" classes. Looks like they use "!important" when applying colors in that way.
I'm going to try and create my own classes to color the buttons and see if that fixes things.
Yup, that's what it was.
NickKruger
@NickKruger
Apr 18 2016 02:54
opinions appreciated: [Charles Babbage Site] (http://codepen.io/NKruger/full/yOXKXe/)
Greg D
@mosaic-greg
Apr 18 2016 03:02
@NickKruger looks good, nice coding. To be pedantic bullet points should either all end with a full stop or never end with a full stop (not a mix)
Michael Karpinski
@karpimpski
Apr 18 2016 03:14
I asked earlier about how to see Bootstrap values, and somebody told me to go to dev tools to see Bootstrap classes and what their documentation is. can anybody tell me how to do this?
Jeff
@adzam5
Apr 18 2016 03:17
@karpimpski In most browsers F12 will open dev tools
Michael Karpinski
@karpimpski
Apr 18 2016 03:17
@adzam5 I know how to open dev tools, I just can't operate through it to find Bootstrap's CSS classes
Jeff
@adzam5
Apr 18 2016 03:19
If you use the inspect element tool you can click on an element on the page and it will show you what classes are applied to the element. From there you can also modify class properties and disable classes
NickKruger
@NickKruger
Apr 18 2016 03:20
@mosaic-greg thank you, I'm not sure what you are referencing as pedantic bullet points, I used the Bootstrap guide here http://getbootstrap.com/css/#horizontal-description
CamperBot
@camperbot
Apr 18 2016 03:20
nickkruger sends brownie points to @mosaic-greg :sparkles: :thumbsup: :sparkles:
:star: 345 | @mosaic-greg | http://www.freecodecamp.com/mosaic-greg
Juwdohr
@Juwdohr
Apr 18 2016 05:17
So I created a website on code pen with a dropdown menu. Dropdown works on codepen.io, and on local machine then uploaded onto a server for school and the dropdown does not work. Any ideas?
Ali Amirazizi
@alivera
Apr 18 2016 05:28
Hi there, where can i ask for help for the Pig Latin challenge
Paul Manning
@paulmanning
Apr 18 2016 05:45
@alivera I would think the HelpJavascript area.
Paul Manning
@paulmanning
Apr 18 2016 05:52
@Juwdohr make sure you are referencing the bootstrap and jQuery scripts and css files in the html. codePen does so with a setting.
Juwdohr
@Juwdohr
Apr 18 2016 05:53
@paulmanning I am. Codepen and running it from my local machine work. But it doesn't work from the school server.
Paul Manning
@paulmanning
Apr 18 2016 05:55
@Juwdohr what kind of server?
Juwdohr
@Juwdohr
Apr 18 2016 05:56
Canvas.instructure, not really sure.
Paul Manning
@paulmanning
Apr 18 2016 06:00
Hmm not sure what that is. If it is a standard web server, it should work as the browser itself should request from it the relevant files given the html being valid. Can you post your html? (or at least the head section that has the links)
Ghost
@ghost~56bd2077e610378809c105cd
Apr 18 2016 06:01
im working on my random quote generator...any advice please?
Rada
@Radascript
Apr 18 2016 06:05
@Rogue00 maybe center the text of the fortune vertically within the block?
Ghost
@ghost~56bd2077e610378809c105cd
Apr 18 2016 06:05
if you check the page theyre where i want them
im not sure how to line it up when it becomes responsive for smaller screens
@Radascript
Paul Manning
@paulmanning
Apr 18 2016 06:05
@Rogue00 The site itself looks cool, although in the JavaScript, you have a 100 item array of lucky numbers. I would suggest you just concat “Lucky Number “ + newNum.
Ghost
@ghost~56bd2077e610378809c105cd
Apr 18 2016 06:06
im not sure how to do that but i had that in mind
ive like to do luckynumber + a random generated number between 1-100 but atm im not sure how
@paulmanning
Paul Manning
@paulmanning
Apr 18 2016 06:08

@Rogue00 change the var newNumber=number[newLuckyNumber] to be

var newNumber = “Lucky Number “ + newNum;

then remove the number array entirely

you don’t need it there
Ghost
@ghost~56bd2077e610378809c105cd
Apr 18 2016 06:10
sweet ty @paulmanning :+1: that works :)
i knew there was a way.....
Paul Manning
@paulmanning
Apr 18 2016 06:10
:smile:
Ghost
@ghost~56bd2077e610378809c105cd
Apr 18 2016 06:13
hrm...i broke it :(
bleh...now it doesnt work..
ive got something wrong
hrmm
ajaybti
@ajaybti
Apr 18 2016 06:23
@Rogue00 you should create one another array of lucky numbers also for instance[0,1,2,3,.......equal to your fortune quotes] and access both arrays via random numbers..
Paul Manning
@paulmanning
Apr 18 2016 06:28
@Rogue00 you are getting a “number is not defined” exception on line 8.
instead of that, just multiply by 100
Ghost
@ghost~56bd2077e610378809c105cd
Apr 18 2016 06:29
ive got it all screwed up now...gawd javascript is so hard
ok phew
now its generating random numbers up to fortunes length which atm is 20
but now...hrmm...how can i implement the Lucky Number text with my random number generated with the output?
i suppose i could make an assignment in the html.........
Ghost
@ghost~56bd2077e610378809c105cd
Apr 18 2016 06:35
nvm...i got it :+1:
thanks for looking and the assistance @paulmanning @ajaybti
CamperBot
@camperbot
Apr 18 2016 06:35
rogue00 sends brownie points to @paulmanning and @ajaybti :sparkles: :thumbsup: :sparkles:
:star: 285 | @ajaybti | http://www.freecodecamp.com/ajaybti
:star: 294 | @paulmanning | http://www.freecodecamp.com/paulmanning
ajaybti
@ajaybti
Apr 18 2016 06:37
This message was deleted
:smile:
Ghost
@ghost~56bd2077e610378809c105cd
Apr 18 2016 06:39
yea yea now its going :+1:
is there a way for me to line the output fields with the fortune button in the small responsive view?
kirbyedy
@kirbyedy
Apr 18 2016 06:44
Screen Shot 2016-04-18 at 09.43.30.png
@Rogue00 are you sure you want to have this kind of alignment ?
Ghost
@ghost~56bd2077e610378809c105cd
Apr 18 2016 06:45
i thought it looked good...but it doesnt seem to work right when you look from a small screen @kirbyedy
kirbyedy
@kirbyedy
Apr 18 2016 06:46
this is on the 21"
Ghost
@ghost~56bd2077e610378809c105cd
Apr 18 2016 06:46
on web it looks good
this is for the random quote generator
kirbyedy
@kirbyedy
Apr 18 2016 06:46
as you can see your background is repeating, at least remove that
I do look at it at the web, but on the big screen, so that might be the problem
Ghost
@ghost~56bd2077e610378809c105cd
Apr 18 2016 06:47
ok i seethat now
im using a 22" monitor and it looks ok..i didnt notice the background doubling up tho..thank you for pointing that out @kirbyedy :+1:
CamperBot
@camperbot
Apr 18 2016 06:48
rogue00 sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star: 877 | @kirbyedy | http://www.freecodecamp.com/kirbyedy
kirbyedy
@kirbyedy
Apr 18 2016 06:49
@Rogue00 if you want to check how your project looks on the mobile devices use the chromes devtools
this is how it looks on the samsung for example
Ghost
@ghost~56bd2077e610378809c105cd
Apr 18 2016 06:50
thank you @kirbyedy will do :+1:
CamperBot
@camperbot
Apr 18 2016 06:50
:warning: rogue00 already gave kirbyedy points
rogue00 sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
kirbyedy
@kirbyedy
Apr 18 2016 06:50
Screen Shot 2016-04-18 at 09.50.06.png
Ghost
@ghost~56bd2077e610378809c105cd
Apr 18 2016 06:51
hrmm...
not so good then...
kirbyedy
@kirbyedy
Apr 18 2016 06:51
on the iphone 6 looks ok :D
Ghost
@ghost~56bd2077e610378809c105cd
Apr 18 2016 06:53
:)
Ghost
@ghost~56bd2077e610378809c105cd
Apr 18 2016 07:01
it looks fine on my android tablet too
Justin
@daemedeor
Apr 18 2016 07:02
@Rogue00 just becareful because the emultor is not as good as having the device right infront of you
Ghost
@ghost~56bd2077e610378809c105cd
Apr 18 2016 07:03
ive got a personal device
2 actually @daemedeor :+1:
Justin
@daemedeor
Apr 18 2016 07:03
ik, just letting you know ^.^ unless you have all the devices
Ghost
@ghost~56bd2077e610378809c105cd
Apr 18 2016 07:03
i dont of course lol
:P
but i couldnt figure out how to use the emulator
Justin
@daemedeor
Apr 18 2016 07:04
i like how they changed the emulator XD esp chrome
Ghost
@ghost~56bd2077e610378809c105cd
Apr 18 2016 07:04
i dont know how to access it
Justin
@daemedeor
Apr 18 2016 07:04
do you wanwt to know?
Ghost
@ghost~56bd2077e610378809c105cd
Apr 18 2016 07:05
nvm i found it
thats very cool
:+1:
V Arun Kumar
@arunvkumr
Apr 18 2016 07:09
can i work with react in codepen?
Ghost
@ghost~56bd2077e610378809c105cd
Apr 18 2016 07:09
looks like it works good on everything listed except iphone 5..so now on to the next phase which is getting the twitter share button installed..using the twitter api...shooo thats gonna be a task
Justin
@daemedeor
Apr 18 2016 07:10
@arunkumrv you can... but you reallly shouldn't be using frameworks because that can be really tough to do
@Rogue00 oh thats good ... but just remember my warning ^.^
Ghost
@ghost~56bd2077e610378809c105cd
Apr 18 2016 07:11
i wont @daemedeor :+1:
V Arun Kumar
@arunvkumr
Apr 18 2016 07:11
@daemedeor thanks.. i tried in react but it's not working for some reason. can you suggest me some other site?
CamperBot
@camperbot
Apr 18 2016 07:11
arunkumrv sends brownie points to @daemedeor :sparkles: :thumbsup: :sparkles:
:star: 517 | @daemedeor | http://www.freecodecamp.com/daemedeor
Justin
@daemedeor
Apr 18 2016 07:11
@Rogue00 did you know that you can also change network speeds (at least in chrome) or use 3D emulation in firefox?!!
@arunkumrv just develop locally
V Arun Kumar
@arunvkumr
Apr 18 2016 07:12
Ok..
@daemedeor
Justin
@daemedeor
Apr 18 2016 07:12
anytime you need to do something as powerful as react or angular. might as well just go full on, local
codepen is basically just for snippet
s
Paul Borawski
@iAmNawa
Apr 18 2016 08:11
This message was deleted
This message was deleted
tommy
@tommygebru
Apr 18 2016 08:25

@daemedeor .......

codepen is basically just for snippets

interesting i havent thought of it that way....I need to practice local development :+1:

quanghoang01
@quanghoang01
Apr 18 2016 08:32
Can you guys tell me why the fonts are too big? http://codepen.io/qh01/full/NNMOYV/
Paul Borawski
@iAmNawa
Apr 18 2016 08:33
@quanghoang01 which code do you want to change?
quanghoang01
@quanghoang01
Apr 18 2016 08:34
@iAmNawa the list
kirbyedy
@kirbyedy
Apr 18 2016 08:34
@quanghoang01 why did you put your list under the h3 ?
quanghoang01
@quanghoang01
Apr 18 2016 08:35
@kirbyedy Thank you. I forgot to close the h3 tag
CamperBot
@camperbot
Apr 18 2016 08:35
quanghoang01 sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
kirbyedy
@kirbyedy
Apr 18 2016 08:35
actually you did not close the h3 tag properly
CamperBot
@camperbot
Apr 18 2016 08:35
:star: 879 | @kirbyedy | http://www.freecodecamp.com/kirbyedy
kirbyedy
@kirbyedy
Apr 18 2016 08:35
yep, that was the problem
Marius
@rasmus1610
Apr 18 2016 08:40
hey guys ... I'm trying to build the weather app with react since jquery sucks for dom manipulation :D I got a little problem with the ajax call...
anyone up there for helping me?
componentDidMount: () => {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition((position) => {
        $.ajax({
          url: URL + "lat=" + position.coords.latitude + "&lon=" + position.coords.longitude + "&APPID=" + APIKEY,
          success: function (data) {
            this.setState({data: data})
          }.bind(this)
        });
      })   
    }
  },
that's my call right now. I guess the problem is that I'm not refering to the right object with this.... the error is that he cant read setState of undefined...
this whole thing with the scope of "this" is so confusing
kirbyedy
@kirbyedy
Apr 18 2016 08:50
@rasmus1610 well I dont know react, but looking at the ajax call, I dont see where is your url defined
do you have anything else ?
Marius
@rasmus1610
Apr 18 2016 08:51
I got the URL defined in a const at the top
kirbyedy
@kirbyedy
Apr 18 2016 08:51
is your console returning something or...
Marius
@rasmus1610
Apr 18 2016 08:51
yeah the url is not the problem
the problem is that I cant set the state to the data I'm receiving
because "this" is not the react obj
kirbyedy
@kirbyedy
Apr 18 2016 08:52
do you have a link to your pen
Marius
@rasmus1610
Apr 18 2016 08:52
because it's so nested I guess
I can log the data I'm receiving to the console. that's no problem
kirbyedy
@kirbyedy
Apr 18 2016 08:57
so there is a response from the weather api then
the only problem is that "state" error that I see
Marius
@rasmus1610
Apr 18 2016 08:57
exactly
kirbyedy
@kirbyedy
Apr 18 2016 08:57
Uncaught TypeError: Cannot read property 'state' of undefined
Marius
@rasmus1610
Apr 18 2016 08:58
yeah right
kirbyedy
@kirbyedy
Apr 18 2016 08:58
I guess you will have to wait for someone experienced in react
Marius
@rasmus1610
Apr 18 2016 08:58
that's exactly the problem
or I just post it to stackoverflow
kirbyedy
@kirbyedy
Apr 18 2016 08:59
thats an option, cause I dont recall many people here know react
at least the ones who are regular on the chat
I should really start learning that bloody react :)
Marius
@rasmus1610
Apr 18 2016 09:01
it's actually not that hard. And for anything bigger than the easier frondend projects jquery get's a bloody mess
gets*
frontend* :D
Denis
@snexus
Apr 18 2016 09:02
can you use regular jquery ajax and then the rest to do with react?
perhaps it is a noob suggestion, but with regular jquery ajax call there aren't any problems
Zoher Ali
@Zoher-ali
Apr 18 2016 09:04
can any1 point out error in my pen... where got wrong? :worried:
kirbyedy
@kirbyedy
Apr 18 2016 09:05
@Zoher-ali how about embedding the jquery in your pen for start :)
alpox
@alpox
Apr 18 2016 09:07

@Zoher-ali as @kirbyedy said, add jQuery in the settings panel.
btw.

 else {
          document.getElementById("logo" + i).setAttribute("src", data.stream.channel.logo);
          document.getElementById("name" + i).innerHTML = data.stream.channel.display_name;
          document.getElementById("status" + i).innerHTML = "Account Closed";
        }

will not work, since you get the information that the account is closed only through that jQuery calls fail instead of success (you did this is in the success callback)

Zoher Ali
@Zoher-ali
Apr 18 2016 09:08
@kirbyedy actually i was doing in dreamweaver it was not working there also... so to just show code copy paste my code on pen
@kirbyedy so should i add callback=? in string?
but its also not working
@alpox
added jquery
Marius
@rasmus1610
Apr 18 2016 09:11
@snexus the ajax call is plain jquery ajax ;) that's not the problem :) but thanks for the suggestion
CamperBot
@camperbot
Apr 18 2016 09:11
rasmus1610 sends brownie points to @snexus :sparkles: :thumbsup: :sparkles:
:star: 300 | @snexus | http://www.freecodecamp.com/snexus
alpox
@alpox
Apr 18 2016 09:14
@Zoher-ali Well two things:
data.stream.channel.logo you access this (as example) in an if block where you test for if data.stream is null. data.stream does not exist but you want to access its properties?
@Zoher-ali you access the kraken/streams endpoint of the api, which only gives you data about the stream if its actually online. This is the endpoint you test for online/offline, but for the data of all the streams, you have to call the kraken/channels/ endpoint
Zoher Ali
@Zoher-ali
Apr 18 2016 09:17
@alpox yeah point
@alpox but den how will i get logo of user who is offline?
Bharat
@BharatKalluri
Apr 18 2016 09:22
Hello Guys! Can anybody help me out by telling how to implement the search dropdown functionality in wikipedia viewer?
Bharat
@BharatKalluri
Apr 18 2016 09:27
here is the link and code for reference
alpox
@alpox
Apr 18 2016 09:30
@Zoher-ali As i said, you have to use the kraken/channels endpoint
for that
Zoher Ali
@Zoher-ali
Apr 18 2016 09:30
@alpox ya i got ur point its done
bt i still have 2 doubts @alpox
1) how to check if api call is successful or not?
2)why in example code freecode camp user seems offline while in my code its having some status(not null)
alpox
@alpox
Apr 18 2016 09:33
@Zoher-ali Its successful when your method was called. Let me show you a reference.
Well the status is always set in channels, but they also test if they are online/offline and if they are offline, the example shows just offline and show the real status only when they are online.

@Zoher-ali http://api.jquery.com/jquery.getjson/

Query.getJSON( url [, data ] [, success ] )
So your method given as argument, gets only called on success.
As of jQuery 1.5, all of jQuery's Ajax methods return a superset of the XMLHTTPRequest object. This jQuery XHR object, or "jqXHR," returned by $.getJSON() implements the Promise interface, giving it all the properties, methods, and behavior of a Promise (see Deferred object for more information). The jqXHR.done() (for success), jqXHR.fail() (for error), and jqXHR.always() (for completion, whether success or error) methods take a function argument that is called when the request terminates. For information about the arguments this function receives, see the jqXHR Object section of the $.ajax() documentation.

The Promise interface in jQuery 1.5 also allows jQuery's Ajax methods, including $.getJSON(), to chain multiple .done(), .always(), and .fail() callbacks on a single request, and even to assign these callbacks after the request may have completed. If the request is already complete, the callback is fired immediately.

// Assign handlers immediately after making the request,
// and remember the jqxhr object for this request
var jqxhr = $.getJSON( "example.json", function() {
  console.log( "success" );
})
  .done(function() {
    console.log( "second success" );
  })
  .fail(function() {
    console.log( "error" );
  })
  .always(function() {
    console.log( "complete" );
  });

// Perform other work here ...

// Set another completion function for the request above
jqxhr.complete(function() {
  console.log( "second complete" );
});
Bit lot of text, i just copied from the jQuery docs.
alpox
@alpox
Apr 18 2016 09:47
@Bharat-Kalluri You overwrite the jquery-ui component with your header
@Bharat-Kalluri Also, your input has id "search" so -> $("#search").autocomplete

@Bharat-Kalluri And i get a message:

jquery.min.js:4 Mixed Content: The page at 'https://s.codepen.io/boomerang/be82c2714c4f3555b8c547321a40e0871460973021478/index.html?editors=0010' was loaded over HTTPS, but requested an insecure script 'http://en.wikipedia.org/w/api.php?callback=jQuery222038534981747355657_1460973022871&action=opensearch&format=json&search=Te&_=1460973022874'. This request has been blocked; the content must be served over HTTPS.

So you have to use https:// for the autocomplete request
Shivam Arora
@shivamarora13
Apr 18 2016 10:38
need help
Islam Ibakaev
@dagman
Apr 18 2016 10:40
@shivamarora13 :worried:
Shivam Arora
@shivamarora13
Apr 18 2016 10:42
@dagman sorry was trying to find solution by my own
actually, the problem is, I have done this, count++, but its doing this, count+count
:|
this is the link to my pen, please see to it.
Jose Dzireh Chong
@CodingDucky
Apr 18 2016 10:45
Here's my codepen
I have a list of quotes, and have randomly chosen a number which i use to pick out a quote
Then I assigned the quote and speaker to their own separate variables.
However I have no idea how to actually get it on the page.
Help.
CamperBot
@camperbot
Apr 18 2016 10:46

Hi, I'm CamperBot! I can help you in this chatroom :smile:

Basic Commands:

  • find TOPIC find all entries about topic. ex: find js
  • wiki TOPIC show contents of topic page
  • thanks @username send brownie points to another user
  • about @username shows info on that user
  • Algorithm BONFIRENAME info on a Algorithm

:speech_balloon: meet CamperBot in this room!

:pencil: read more about camperbot on the FCC Wiki

ottomahn
@ottomahn
Apr 18 2016 10:59
ottomahn
@ottomahn
Apr 18 2016 11:05
any room for improvement?
Islam Ibakaev
@dagman
Apr 18 2016 11:18
@ottomahn
<img src='https://upload.wikimedia.org/wikipedia/en/e/e4/Salk-child-Karsh.jpg' class="img-rounded img-responsive">
@ottomahn add img-responsive
Shivam Arora
@shivamarora13
Apr 18 2016 11:35
can anyone help?
Samson Alajede
@ajesamson
Apr 18 2016 11:35
@shivamarora13 how can we help?
see the method, startControl
and open ur console, while running the game
u will see how it is misbehaving
want to know, how to stop it.
@ajesamson
alpox
@alpox
Apr 18 2016 11:43
@shivamarora13 What exactly is the misbehaviour?
I don't know the state of your work and what is meant to work already and what is not
Samson Alajede
@ajesamson
Apr 18 2016 11:44
i am also finding it difficult to understand @shivamarora13
can you state your expectation and what is happening
Shivam Arora
@shivamarora13
Apr 18 2016 11:47
@alpox @ajesamson Sorted! Still one more problem, let me state that to you, the problem is, I have done count++ in one of my method, but it still increases like 1, 3,7, 15, don't know why?
if u can tell?
alpox
@alpox
Apr 18 2016 11:48
@shivamarora13 You have a serious problem with your click event handlers.
@shivamarora13 You should define click event handlers only once, when the page is loaded. Otherwise on each rightClick() call, there will be added a new eventhandler. Means you get on each click multiple calls to the click callback
so count++ will be called multiple times
I think the same problem with understanding of the click event occurred for you in startControl
Shivam Arora
@shivamarora13
Apr 18 2016 11:53
@alpox no startControl had some other problem, but thanks for telling me about this problem. I will try to improve it surely. thanks :)
CamperBot
@camperbot
Apr 18 2016 11:53
shivamarora13 sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star: 548 | @alpox | http://www.freecodecamp.com/alpox
alpox
@alpox
Apr 18 2016 11:54
@shivamarora13 Not really, you will run in that problem when switching on/off multiple times too ;-) there will be multiple event handlers defined too
@shivamarora13 Just don't put click event handlers anywhere in any code which runs multiple times.
There are some use-cases where one does that, but you have to understand why and when you can do that
Just clear your console, switch on/off multiple times and then press start ;-) you will see the effect
Shivam Arora
@shivamarora13
Apr 18 2016 11:56
@alpox hahaha, Ok, lemme improve it first thn
@alpox How should I define them, I just wrote the code, and as I felt the need of function, I introduced it. Tell me some ways to imrpove my code, will be beneficial for me.
alpox
@alpox
Apr 18 2016 12:07
Mom i'll rework it a bit
alpox
@alpox
Apr 18 2016 12:14
Hmm thats quite a problem the way you designed that :D since you want to have some random square being used, you will have to rework the click function for the squares for that it doesnt take just one single random square. You will have to make an array of them to be played.
@shivamarora13 http://codepen.io/alpox/pen/RayEJK?editors=0011 I forked from you and reworked a bit - you may want to change things in this direction. But its not yet the way the game works :-) just the technic is like that
Shivam Arora
@shivamarora13
Apr 18 2016 12:33
@alpox numOfBox === $(this).data('square')
what is this exactly doing, can you tell me, I have read and saw the difference, but can't understand this piece of code
alpox
@alpox
Apr 18 2016 12:34
This tests if the right box has been clicked
.data gets the value out of the attribute i set in the html
data-square=1 as example
Shivam Arora
@shivamarora13
Apr 18 2016 12:35
@alpox Ok ok, you have structured it in an efficient manner, I will make an array to play further, thanks :)
CamperBot
@camperbot
Apr 18 2016 12:35
shivamarora13 sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
alpox
@alpox
Apr 18 2016 12:35
I test for that, because this click event is raised for all squares on click. So you have to determine which one of the squares was actually clickef
CamperBot
@camperbot
Apr 18 2016 12:35
:warning: shivamarora13 already gave alpox points
alpox
@alpox
Apr 18 2016 12:35
Youre welcome :-)
Shivam Arora
@shivamarora13
Apr 18 2016 12:38
@alpox yes, that I can do, thanks once again. :)
CamperBot
@camperbot
Apr 18 2016 12:38
shivamarora13 sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:warning: shivamarora13 already gave alpox points
codercooooder
@codercooooder
Apr 18 2016 12:44
guys, no one has yet been able to figure out a way to get this footer to have a max-height of -30%, ( to see it expand past the undesirable level the screen has to be wide), can any of you figure this out: http://codepen.io/ihatecoding/pen/KzRQWO
I mean 30%, not -30%. :)
iigmir
@iigmir
Apr 18 2016 12:50
@codercooooder You mean you want .footer fill whole width in screen? Or you want .footer is always in bottom?
alpox
@alpox
Apr 18 2016 12:51
@codercooooder I don't quite understand what you mean with the expanding :D
codercooooder
@codercooooder
Apr 18 2016 12:54
@iigmir i believe it fills the whole widith already..i just want the height to stop at 30%... when teh display gets wide, the footer can get huge..I actually like the placement...it serves my needs for what I am doing, I know it seems weird
alpox
@alpox
Apr 18 2016 12:54
@codercooooder Or just that?
#footer {
  text-align: center;
  position: absolute;
  vertical-align: middle;
  bottom: 0;
  z-index: 5000;
  width: 100%;
  padding-bottom: 5%;
  max-height: 30%;
}
codercooooder
@codercooooder
Apr 18 2016 12:54
@alpox what do you mean?
btw thanks @aplox and @iigmir for helping
CamperBot
@camperbot
Apr 18 2016 12:54
codercooooder sends brownie points to @aplox and @iigmir :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for aplox
:star: 315 | @iigmir | http://www.freecodecamp.com/iigmir
alpox
@alpox
Apr 18 2016 12:56
@codercooooder well if you want the footer to take a max-height 30% just write it like that :D
max-height: 30%;
codercooooder
@codercooooder
Apr 18 2016 12:57
@alpox sorry, yes, i tried that but you see what happens, i resaved--if I apply that the footer goes beyond the bottom.
@alpox I didn't realize my saved code pen didn't have this setting, but yes, I tried it.
alpox
@alpox
Apr 18 2016 12:58
@codercooooder btw. your padding is messing things up
@codercooooder you should consider to take it out
codercooooder
@codercooooder
Apr 18 2016 12:58
@alpox please tell me
iigmir
@iigmir
Apr 18 2016 12:58
@codercooooder Well, I think you need a positioned called fixed. Read this article first, I try to check how to help you.
http://learnlayout.com/position-example.html
alpox
@alpox
Apr 18 2016 12:59

@codercooooder

#footer {
  text-align: center;
  position: fixed;
  vertical-align: middle;
  bottom: 0;
  left: 0;
  z-index: 5000;
  width: 100%;
  max-height: 30%;
}

thats how i would do it then

codercooooder
@codercooooder
Apr 18 2016 13:04
@alpox you are helping me to to realize what I need...what I want is actually for the padding of the svgs to start to resize at large widths, rather than the height.
wait let me think
hold on
bascially, what I want at all times if four the svgs to always be visible with the text on the bottom, right- and for that footer to occupy about 30% of the height.
iigmir
@iigmir
Apr 18 2016 13:10
@codercooooder I don't know is this footer what you want or not...... http://codepen.io/iigmir/pen/jqxdrR
Zubair Ali
@03aliz
Apr 18 2016 13:11
Hi guys i'm on the twitch API, and I'm calling the api with the getJSON method using this URL:https://api.twitch.tv/kraken/streams/ESL_SC2. The problem is I don't get the full list of objects. rather I get only two : the stream object and links objects. I want the channel object which has all the data I need. Is there something wrong with my URL?
alpox
@alpox
Apr 18 2016 13:17
@codercooooder I don't quite understand :D
codercooooder
@codercooooder
Apr 18 2016 13:18
@iigmir @alpox let me think about this again, I'm starting to understand some of the problems. I don't want to use media queries, but I think i might. will you both be around a bit. thanks again.
CamperBot
@camperbot
Apr 18 2016 13:18
codercooooder sends brownie points to @iigmir and @alpox :sparkles: :thumbsup: :sparkles:
:warning: codercooooder already gave iigmir points
:star: 549 | @alpox | http://www.freecodecamp.com/alpox
iigmir
@iigmir
Apr 18 2016 13:19
Hi, have a question. I found that I can use :checked selector to show something by click so I try to do that once I click somewhere, it will shows note. In this pen, I expect once I click #note, #ref will popup. However this pen cannot works......is that possible?
http://codepen.io/iigmir/pen/jqxXjX
codercooooder
@codercooooder
Apr 18 2016 13:19
@iigmir @alpox sorry that was a question - will you both be around?
iigmir
@iigmir
Apr 18 2016 13:20
@codercooooder well I think I can, it's 21:21 in my timezone.
rouje
@rouje
Apr 18 2016 13:24
@03aliz channel is a property of stream according to your link
alpox
@alpox
Apr 18 2016 13:29
@codercooooder I am around ^^
Adam Lichter
@spot1000
Apr 18 2016 13:29
Hey everyone, I'm having trouble getting my tweet button working... it seems that If i right click and open a new tyab it takes me to the right spot, but I'm getting a frame-ancestors: self error in the consol log. any help?https://codepen.io/spot1000/pen/vGRKpO
Marc Vesper
@marcvesper
Apr 18 2016 13:30
completely stumped for an idea for a tribute page. what's the minimum really you need to demonstrate you can handle the html/ css to move onto something more interesting?
Zubair Ali
@03aliz
Apr 18 2016 13:30
@rouje thanks just saw that, it looked different in the browser when I could see a channel object, but on the console it was a property of stream which I missed.
CamperBot
@camperbot
Apr 18 2016 13:30
03aliz sends brownie points to @rouje :sparkles: :thumbsup: :sparkles:
:star: 328 | @rouje | http://www.freecodecamp.com/rouje
negyvenketto
@negyvenketto
Apr 18 2016 13:31
@spot1000 codepen doesn't allow you to open links in the same tab. use target="_blank"
rouje
@rouje
Apr 18 2016 13:32
@03aliz if you're using chrome, you can use this extension so the json would look pretty :smile:
Zubair Ali
@03aliz
Apr 18 2016 13:33
Thanks will do, will also make alot easier i guess so i won't get confused.
Adam Lichter
@spot1000
Apr 18 2016 13:34
thanks @negyvenketto! works like a charm
CamperBot
@camperbot
Apr 18 2016 13:34
spot1000 sends brownie points to @negyvenketto :sparkles: :thumbsup: :sparkles:
:star: 373 | @negyvenketto | http://www.freecodecamp.com/negyvenketto
negyvenketto
@negyvenketto
Apr 18 2016 13:34
@spot1000 np :)
Adam Lichter
@spot1000
Apr 18 2016 13:35
any other suggestions on how it lkooks before I submit it?
negyvenketto
@negyvenketto
Apr 18 2016 13:39
@spot1000 i'm no expert, but it looks good to me. maybe you could try showing it in the code review room?
Marius
@rasmus1610
Apr 18 2016 13:40
anyone here who has some experience with react?
im so frustrated with it right now :D
kirbyedy
@kirbyedy
Apr 18 2016 13:43
this is just great, my quote generator stopped working after a month :D
was loaded over HTTPS, but requested an insecure script 'http://api.forismatic.com/api/1.0/?jsonp=jQuery21308796677901228094_1460986720133&lang=en&method=getQuote&format=jsonp&_=1460986720139'. This request has been blocked; the content must be served over HTTPS.
this is the error
I see other peoples code working fine with the same call
Clem
@ctataru
Apr 18 2016 13:45
hi guys. quick question. how can i resize my input bar so that it fits into the white box behind it? i can't get the left side to fill in properly.
http://codepen.io/wise/pen/redjRo
vínαч puppαl
@vinaypuppal
Apr 18 2016 13:47
@kirbyedy i think you loaded your page on HTTPS, reload with just http://.... then this error would be gone.
Ghost
@ghost~56ef2a8b85d51f252ab9dec9
Apr 18 2016 13:49
Hi, I have a problem on my wikipedia viewer, my results are not really relevant... do you know why?
http://codepen.io/thomlom/pen/yOpbPo
rouje
@rouje
Apr 18 2016 13:55
@thomlom change "" to "+" for your replace method
Ghost
@ghost~56ef2a8b85d51f252ab9dec9
Apr 18 2016 13:57
@rouje Results are still the same :/
rouje
@rouje
Apr 18 2016 13:59
hmm may I know what values you are using to test the search?
Ghost
@ghost~56ef2a8b85d51f252ab9dec9
Apr 18 2016 14:01
For example, If i search "computer" with this wikipedia viewer : http://codepen.io/elsquash/pen/MadeMZ
it's far more relevant than mine!
For example, instead of getting relevant results, I get: Wikipedia:WikiProject Computing
kirbyedy
@kirbyedy
Apr 18 2016 14:06
@vinaypuppal never touched that, it was always on http
but its working now !?
rouje
@rouje
Apr 18 2016 14:16
@thomlom here's one of the example from generator=search
vínαч puppαl
@vinaypuppal
Apr 18 2016 14:20
@kirbyedy :+1:
Robert Friedman
@robfr77
Apr 18 2016 14:25
how can you use jquery to loop through nth-of-type from 1st element to last element of parent? thanks
or should i just append elements dynamically instead of looping through and adding content?
Robert Friedman
@robfr77
Apr 18 2016 14:40
this is frustrating i don't know why this is so hard
Lanitta
@DivaWeb
Apr 18 2016 14:42
@robfr77 take a deep break
@robfr77 I watch a lot of youtube to try to see how people how are doing different things and research a lot
Robert Friedman
@robfr77
Apr 18 2016 14:45
thanks, yeah i got to youtube and finally figured it out...
it ends up looking like this
for (var i = 0; i < 5; i++) {
 $('div:nth-child('+(i+2)+') p').html(data.channels[i].display_name);
}
was raging so hard
Lanitta
@DivaWeb
Apr 18 2016 14:46
@robfr77 I know the lessons hear do not always cover what you need or are skipping a vital step or explanation to a vital step
Robert Friedman
@robfr77
Apr 18 2016 14:47
yeah i was just being impatient i forgot about my favorite web teacher who covers jquery nth selectors on youtube :(
Kietil
@Kietil
Apr 18 2016 14:48
Can someone explain ---> " image size is bumped to 1080px by 1080px, it is still scaled down to 640px by 640px using CSS on their website. Which means that these images will look better on high-resolution displays such as Retina (HiDPI)." - Does it mean, image-size 1080x1080 will be better looking ONLY on DiDPI (Retina) displays or on all displays ?
Lanitta
@DivaWeb
Apr 18 2016 14:50
@Sivilll I wish I had the techinal answer for you
Jas K
@jask84
Apr 18 2016 14:54
Hi all. Just on the Tic Tac Toe game. I have made my board using a canvas element and used a function that will determine the coordinate of a user click in a 'square'. However, before I go further, I can foresee problems writing a function that will draw an X or O in a 'square' automatically and then determining whether there are 3 in a row using just the canvas and a coordinate system. Would it make more sense to get rid of the canvas and use square divs instead? Thanks
Kietil
@Kietil
Apr 18 2016 14:55
@DivaWeb A practical one would be enough ^^ should one scale images in Photoshop for 640x640 if css scales them down, or is 1080x1080 scaled down (with css) better...
Lanitta
@DivaWeb
Apr 18 2016 14:57
@Sivilll ok so when you are dealing with photos you will want them to be able to be enlarged to the largest size without distortion. So I would change the size of your photo in css to a smaller size than in photo shop.
@Sivilll specialy if you are trying to create a responsive web page because you make it only 640 px in photo shop you are not allowing it to enlarge without distortion on a bigger screen
Kietil
@Kietil
Apr 18 2016 15:03
@DivaWeb I thought so too.. thats 2-0 in favor of css scaling.. :)
kirbyedy
@kirbyedy
Apr 18 2016 15:12
@jask84 it is totally up to you how are you going to make it
Josh Bivens
@joshbivens
Apr 18 2016 15:16
I have a question about the Twitch.tv zipline. I have an array of all the channels. I'm using a forEach to make to separate $.get requests (one for streams, the other for channels) and pushing those results to a player object. The channels request always works, but the stream request barely works. What am I doing wrong?
alpox
@alpox
Apr 18 2016 15:17
@joshbivens Can you show your codpen?
Josh Bivens
@joshbivens
Apr 18 2016 15:17
@alpox Sure
alpox
@alpox
Apr 18 2016 15:21
@joshbivens You are adding the information about the streams to the dom in the callback of the channels request. Requests are asynchronous and you run them all in parallel, what means they can come back in an unsorted matter.
The response to the channels request may be back faster than the one for the streams
@joshbivens If that happens, you don't have the data for player.game and player.state available when you want to add them to the dom
Josh Bivens
@joshbivens
Apr 18 2016 15:21
@alpox Ah ok...So can I do the DOM manipulation outside the $.gets ?
alpox
@alpox
Apr 18 2016 15:22
@joshbivens Not really. you have to go sure that you got all the data from both requests and then add it to the dom.
Josh Bivens
@joshbivens
Apr 18 2016 15:23
@alpox Hmm. Ok. I don't know how but I will figure it out. Thank you! :thumbsup:
CamperBot
@camperbot
Apr 18 2016 15:23
joshbivens sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
alpox
@alpox
Apr 18 2016 15:23

@joshbivens You can work with the $.when jQuery function for that, which waits for both requests to be done. Snipped of my code:

$.when(
      requestChannel(user),
      requestStream(user)
      ).done((userData, streamData) => {
        let ob = createDataObject(user, userData[0], streamData[0])
        addStreamToDOM(ob)
      }).fail(() => {
        let ob = createDataObject(user)
        addStreamToDOM(ob)
      })

maybe that gives you the picture

CamperBot
@camperbot
Apr 18 2016 15:24
:star: 550 | @alpox | http://www.freecodecamp.com/alpox
Josh Bivens
@joshbivens
Apr 18 2016 15:24
@alpox Ah! .when! Thank you so much :)
CamperBot
@camperbot
Apr 18 2016 15:24
joshbivens sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:warning: joshbivens already gave alpox points
alpox
@alpox
Apr 18 2016 15:24
@joshbivens The return values of requestChannel and requestStream are the return values of the $.get
Np :-)
Josh Bivens
@joshbivens
Apr 18 2016 15:24
@alpox Awesome.
Vamshi Gudipati
@vamshikrishna144
Apr 18 2016 15:46
anyone knows react?
Arminas
@ArminasBek
Apr 18 2016 15:54
Hello! I am coding Wiki viewer APP, can someone help me to find out how can I automate console.log part? and is my approach is rational? Thank You!
$("button#search").on("click", function(){
    var inputVal = $("input#text").val();
    $.getJSON("https://en.wikipedia.org/w/api.php?action=opensearch&search=" + inputVal +"&limit=5&namespace=0&format=json&callback=?", function(json) {
        var itemName = $.each(json[1], function(i, val){    
        })
        var itemDescription = $.each(json[2], function(i, val){    
        })
        var itemLink = $.each(json[3], function(i, val){
        })
        console.log(itemName[0] + " " + itemDescription[0] + " " + itemLink[0]);
        console.log(itemName[1] + " " + itemDescription[1] + " " + itemLink[1]);
        console.log(itemName[2] + " " + itemDescription[2] + " " + itemLink[2]);
        console.log(itemName[3] + " " + itemDescription[3] + " " + itemLink[3]);
        console.log(itemName[4] + " " + itemDescription[4] + " " + itemLink[4]);

        })//EOF getJSON
});//EOF button click
codercooooder
@codercooooder
Apr 18 2016 15:56
@iigmir @alpox ok, so you have helped me to figure out the problem. what i really want is for .areaSVG to have a percentage based height (say 30% right now it won't take, it only responds to pixels or auto)
@alpox @iigmir here is my new codepen http://codepen.io/ihatecoding/pen/JXvVKQ?editors=1100
Jas K
@jask84
Apr 18 2016 16:03
@kirbyedy hey. Just saw your reply now. I guess I am asking if anyone else made the tic tac toe game using the canvas as I am wondering whether or not I am making it more difficult in this case.
Ankit bhatnagar
@noisyankit
Apr 18 2016 16:07
I just completed the portfolio page but getting some issues with the webpage. It have been completed in bootsrap, css html and is not working when checked for responsiveness for smaller devises. When clicked on the button to expand the menu. Please help me with that.
UDAY PRAPHULLA MALANGAVE
@malangaveuday
Apr 18 2016 16:07

http://codepen.io/malangaveuday/pen/aNYreq?editors=1010

this is my code pen for quote machine. I am trying to provide animation to text but its applying only at first time only.
I tried to use toggleClass () and remove and add animation class bit its not working for me.
please guys help me. . .

Torrence Cole
@trcwrx78
Apr 18 2016 16:09
@noisyankit Make sure you have jQuery linked up.
Ankit bhatnagar
@noisyankit
Apr 18 2016 16:09
in the cdn for bootstrap ?
Torrence Cole
@trcwrx78
Apr 18 2016 16:12
Screen Shot 2016-04-18 at 12.11.50 PM.png
for the dropdown menu to work it will require jQuery.
i ran into the same problem when I was doing my portfolio and that fixed the drop down.
alpox
@alpox
Apr 18 2016 16:15
@codercooooder Well you can try to take away the max-height: 40% of the footer and set height: 100% to the .areaSVG, But it will just grow unlikely then. Sadly, with the max-height on the footer, it would grow out of the page
Ghost
@ghost~56bd2077e610378809c105cd
Apr 18 2016 16:17
can i get input or/and advice for my random quote project
codercooooder
@codercooooder
Apr 18 2016 16:20
@alpox hmm so you can't think of a way to make the height of the svg fix to a percentage?
Islam Ibakaev
@dagman
Apr 18 2016 16:33
almost done with simon game still need to add audio. need your feedback guys :smile:
http://codepen.io/dagman/pen/oxdYgWv
Ghost
@ghost~56bd2077e610378809c105cd
Apr 18 2016 16:35
404 error @dagman
Clem
@ctataru
Apr 18 2016 16:36
quick question, guys. i've been looking back at my local weather app and i can't seem to make the clause in my "if statement" on line 32 be executed. it's always the else clause getting executed, unless i do something like if(tempNumber !== 0)
http://codepen.io/wise/pen/NNdXaB?editors=0010
Coy Sanders
@coymeetsworld
Apr 18 2016 16:51
you're missing a semicolon after you declare your appid variable @ctataru
and after your getJSON call
and onClick function :)
alpox
@alpox
Apr 18 2016 16:53
@codercooooder I think it would be much easier, if you take out the svg object in a single file, then import it with the img tag for that it gets treated like an image. That makes things much simpler.
@codercooooder An inline-svg object like this is hard to scale right with the page. An image isnt
Clem
@ctataru
Apr 18 2016 16:55
@coymeetsworld haha woops. added them
@coymeetsworld i was secretly hoping that would solve the background pic issue
alas, it didn't
codercooooder
@codercooooder
Apr 18 2016 16:56
@alpox but im sooooo close, you think it can't be done?
Coy Sanders
@coymeetsworld
Apr 18 2016 16:56
i see a background image now @ctataru
alpox
@alpox
Apr 18 2016 16:57
@codercooooder I think it could be done with a lot of effort... the only thing i can think of is to put there an invisible spaceholder div which takes up the space and the svg as overlay
Clem
@ctataru
Apr 18 2016 16:57
@coymeetsworld yeah, the "ice" background image always stays there, though. even if i change line 32 to tempNumber < 18
Coy Sanders
@coymeetsworld
Apr 18 2016 16:58
you're not setting tempNumber anywhere
codercooooder
@codercooooder
Apr 18 2016 16:59
@alpox i don't want to make you do a lot of work but i mean - how would that be implemented..absolute postiioning? isn't it hard/impossible to make an empty div - and how would the html be strctured?
@alpox lets see if anyone in stack comes up with something.
Clem
@ctataru
Apr 18 2016 17:00
@coymeetsworld does line 17 not set it?
Coy Sanders
@coymeetsworld
Apr 18 2016 17:01
oh nvm i see that
think you should put your code modifying the background into your getJSON call
codercooooder
@codercooooder
Apr 18 2016 17:03
@alpox but thanks again for hanging in there with me.
CamperBot
@camperbot
Apr 18 2016 17:03
codercooooder sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star: 551 | @alpox | http://www.freecodecamp.com/alpox
Coy Sanders
@coymeetsworld
Apr 18 2016 17:03
inside that call is where you set your tempNumber variable, and then you refer to it outside of it
Clem
@ctataru
Apr 18 2016 17:04
@coymeetsworld yeah i was just about to ask if it was a scope issue
alright
Coy Sanders
@coymeetsworld
Apr 18 2016 17:04
not a scope issue, a timing issue
getJSON is asynchronous
Clem
@ctataru
Apr 18 2016 17:04
oh
Coy Sanders
@coymeetsworld
Apr 18 2016 17:04
code after will run and may get executed before getJSON finishes
Clem
@ctataru
Apr 18 2016 17:05
so i should put the if/else inside the getjson call?
alpox
@alpox
Apr 18 2016 17:06

@codercooooder Yeah, you make a div which takes up the full space and which is responsive. It will be in the background and visibility set to hidden. That one is the responsive one which takes up the space you need for the area.
Then you set the parent of the area to position: relative; and the area itself to

position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;

What should do the trick (in theory :-) )

Timothy Davis
@timothycdavis
Apr 18 2016 17:07
Does this portfolio page look alright? http://codepen.io/timothycdavis17/full/RayQOq/
Coy Sanders
@coymeetsworld
Apr 18 2016 17:10
yes @ctataru
Clem
@ctataru
Apr 18 2016 17:11
@coymeetsworld that worked! thanks a lot
CamperBot
@camperbot
Apr 18 2016 17:11
ctataru sends brownie points to @coymeetsworld :sparkles: :thumbsup: :sparkles:
:star: 588 | @coymeetsworld | http://www.freecodecamp.com/coymeetsworld
Diki Ananta
@dikiaap
Apr 18 2016 17:11
@timothycdavis yeah, like that. adding contact button on navbar would be great again.
Coy Sanders
@coymeetsworld
Apr 18 2016 17:13
np @ctataru
Timothy Davis
@timothycdavis
Apr 18 2016 17:14
@dikiaap Do you know if there is a way to shrink the navbar brand when on a mobile?
ranyehushua
@ranyehushua
Apr 18 2016 18:11
Is anybody able o help me with the Local Weather app?
Bruce Young
@mutantspore
Apr 18 2016 18:13
@ranyehushua show us your stuff :)
Frank XC
@tenkdayz
Apr 18 2016 18:13
@ranyehushua which part do you need help with
ranyehushua
@ranyehushua
Apr 18 2016 18:18
@mutantspore I haven't even started the actual layout, just playing around with the JS to understand the ajax call. It looks like my call should be working right, I am not sure why my callback function in the $.getJSON is not printing the desired result to the console. Here is my pen: http://codepen.io/yehoosh/pen/JXvVmd
@mutantspore you can pretty much ignore that commented out code above the geolocation function, I just copied and pasted that for reference from my random quote project
Bruce Young
@mutantspore
Apr 18 2016 18:19
@ranyehushua works fine .. just add in http:// into your URL
ranyehushua
@ranyehushua
Apr 18 2016 18:20
@mutantspore LOL!!!! Thank you. It is always the smallest over-sites isn't it?.
CamperBot
@camperbot
Apr 18 2016 18:20
ranyehushua sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
:star: 1427 | @mutantspore | http://www.freecodecamp.com/mutantspore
Bruce Young
@mutantspore
Apr 18 2016 18:20
:)
Janaya
@Janaya425
Apr 18 2016 18:22
Hello all! Hope everyones having an awesome day. I had a question regarding freelancing. I am hoping to do it but I read that specializing is important to being successful in freelance? Is anyone aware of this? :)
Norman Benbrahim
@NormanBenbrahim
Apr 18 2016 18:31
hey everyone. i'm having trouble with my Make A Person bonfire. it keeps telling me bob.getFullName is not a function. what's going on??: https://gist.github.com/NormanBenbrahim/94b66dedeb00e87dc2ab1719ae0c2dc9
davidfw1866
@davidfw1866
Apr 18 2016 18:31
What's wrong with this?
<script>
var firstNumber = prompt("Enter the first number","");
var secondNumber = prompt("Enter the second number","");
var theTotal = firstNumber + secondNumber;
document.write(parseInt(firstNumber, 10) + " added to " + parseInt(secondNumber, 10) +
" equals " + theTotal);
</script>
dposse
@dposse
Apr 18 2016 18:32
@davidfw1866 i believe firstNumber and secondNumber would be saved as strings, so firstNumber+secondNumber would concatenate strings, i.e. "1" + "2" = "12"
@dposse should do Number(firstNumber) + Number(secondNumber)
davidfw1866
@davidfw1866
Apr 18 2016 18:32
yeah..that's why I used parseInt
dposse
@dposse
Apr 18 2016 18:33
but on var theTotal
it will give you "12" instead of 3
Marius
@rasmus1610
Apr 18 2016 18:33
oh dammit it's so helpful that weathericons.io has a API classes for openweathermap ... I would hate to link all the icons to the different weather conditions :D
cmf89
@cmf89
Apr 18 2016 18:49
@rasmus1610 wait really... omg that would have made my life so much easier
Marius
@rasmus1610
Apr 18 2016 18:50
@ yeah really :) just use the class "wi wi-omw-" + data.weather[0].id
and its automagicall
y
davidfw1866
@davidfw1866
Apr 18 2016 18:51
What's wrong with this syntax?

<script>
var firstNumber = prompt("Enter the first number");
var secondNumber = prompt("Enter the second number");
var theTotal = firstNumber + secondNumber;

document.write(parseInt(firstNumber, 10) + " added to " + parseInt(secondNumber, 10) + " equals " +
parseInt(theTotal, 10));

cmf89
@cmf89
Apr 18 2016 18:54
@rasmus1610 thank you, I had already recreated a subset of that lookup table within my javascript code for the weather page, but with this information now I'm going to go back, improve, and resubmit my page
CamperBot
@camperbot
Apr 18 2016 18:54
cmf89 sends brownie points to @rasmus1610 :sparkles: :thumbsup: :sparkles:
:star: 63 | @rasmus1610 | http://www.freecodecamp.com/rasmus1610
Marius
@rasmus1610
Apr 18 2016 18:55
its "wi-owm-<whatever id>" btw :D owm = openweathermap not omw=onmyway :D
cmf89
@cmf89
Apr 18 2016 18:55
cmf89
@cmf89
Apr 18 2016 19:02
that looks much better now :)
Marius
@rasmus1610
Apr 18 2016 19:22
have a search function now :)
oh dear that was challenging but fun in the end
Javier
@sh1g
Apr 18 2016 19:25
@rasmus1610 that looks amazing. =D I was also thinking of adding a search function, which i might do after I finished the wikipedia challenge
Marius
@rasmus1610
Apr 18 2016 19:25
:)
it's not that difficult
took me about 10 minutes
if you structure your code right it's easy because you can reuse so much
thats the beauty of a good code structure
ranyehushua
@ranyehushua
Apr 18 2016 19:27
Quick question regarding the Local Weather project... Has anyone else had issues with the API not being totally accurate with the city location? My code should be right, but it is showing that I am in a town about 3-4 miles from here. Same with my friend testing it in San Diego, it is showing the weather of a town a few miles away (but still in San Diego county). Is this just due to inaccuracy in the openweather API or is this an issue with my code? Here is my pen: http://codepen.io/yehoosh/pen/JXvVmd
Marius
@rasmus1610
Apr 18 2016 19:31
well the api is so accurate that it recognizes the even the right neighborhood for me :D and this neighborhood has 6k citizen :D
ranyehushua
@ranyehushua
Apr 18 2016 19:31
@rasmus1610 are you seeing any obvious issues in my code?
cmf89
@cmf89
Apr 18 2016 19:32
@ranyehushua it is not necessarily the weather API, but might be the GPS location. Unless your device has GPS built in (like a mobile phone), the coordinates are going to be estimates
ranyehushua
@ranyehushua
Apr 18 2016 19:32
well both my iphone safari browser and my chrome on my windows desktop are showing the same city... Are you able to view it on your end? Is it showing the accurate location for you?
cmf89
@cmf89
Apr 18 2016 19:35
@ranyehushua it shows the correct location for me.
ranyehushua
@ranyehushua
Apr 18 2016 19:36
@cmf89 good to know! It's not terribly inaccurate on my end, just 2 or 3 miles off... strange.
Bruce Young
@mutantspore
Apr 18 2016 19:36
@ranyehushua with my wi-fi on the actual lat and lon the geolocate returns is my actual house. The place name from OWM returned is 2 different names (though your’s is the same) but they are really just 2 names for the same area.
ranyehushua
@ranyehushua
Apr 18 2016 19:36
Does anyone know a good place to source the icons for cloudy, sunny, rainy, etc...?
@mutantspore right. That's pretty much what I am getting, it's returning a neighborhood name to me that no one ever uses... like maybe it's being too specific trying to match a town name?
vínαч puppαl
@vinaypuppal
Apr 18 2016 19:39
Bruce Young
@mutantspore
Apr 18 2016 19:39
@ranyehushua these are popular https://erikflowers.github.io/weather-icons/
ranyehushua
@ranyehushua
Apr 18 2016 19:40
@vinaypuppal @mutantspore Thanks guys! I will check out both. Otherwise, does the code look alright?
CamperBot
@camperbot
Apr 18 2016 19:40
ranyehushua sends brownie points to @vinaypuppal and @mutantspore :sparkles: :thumbsup: :sparkles:
:star: 318 | @vinaypuppal | http://www.freecodecamp.com/vinaypuppal
:star: 1428 | @mutantspore | http://www.freecodecamp.com/mutantspore
Marius
@rasmus1610
Apr 18 2016 20:01
@ranyehushua no your api call looks correct
alpox
@alpox
Apr 18 2016 20:09
@ranyehushua Funny, first i have 40°F, then i change to degree and back to °F and suddenly have 39°F :D
Bruce Young
@mutantspore
Apr 18 2016 20:09
@alpox airconditioner kicked in
door open?
alpox
@alpox
Apr 18 2016 20:10
@ranyehushua Did you try
geo.getCurrentPosition(function(position) {
  var lat = position.coords.latitude;
  var long = position.coords.longitude;
  //set a variable 'call' to a string with the url for the API call including the API key
  var call = "http://api.openweathermap.org/data/2.5/weather?lat=" + lat + "&lon=" + long + "&APPID=07eefbd2e6c647e255b4aed25da0d955";

  //make ajax request and have the call back function set the location and weather on the page
  $.getJSON(call, populateWeather);
}, null, { enableHighAccuracy: true });
Take a look at the last line
@mutantspore Window open :D
Bruce Young
@mutantspore
Apr 18 2016 20:11
it’s over 40F hotter here
zackluckyf
@zackluckyf
Apr 18 2016 20:23
If someone could help me with my Simon game I would really appreciate it! Ive posted to stack overflow and reddit unsuccessfully so far. Summary of the problem: It works correctly the first time through when the user matches the move. Then it moves to turn two. And clears the player array (good), then it makes a move (good), then it ignores whether the player clicks a button (bad) and checks if the now empty array is equal to the simon array. This fails. The only calls for playerInput are in the buttons function. Somehow it is being called without being clicked? I used .off() right before so I'm not sure how it is entering without being clicked. I'm 95% sure the issue is in the function buttons or playerInput. Console log might be helpful for visualizing what I'm saying
https://jsfiddle.net/uoyg2jx9/2/
To make it run hit the power button and then the start button.
ranyehushua
@ranyehushua
Apr 18 2016 20:28
@mutantspore do you know whether I am able to link to the icon pack you sent me with codepen? I have it working on my personal website and local PC, but not sure how to link the icon pack to codepen. Is it possible?
ranyehushua
@ranyehushua
Apr 18 2016 20:34
Do I just link to that specific url @mutantspore ? Or do I link to 1 of the url's i see when I click that link?
Bruce Young
@mutantspore
Apr 18 2016 20:35
no you’ll have to link to each of the things you’ll need @ranyehushua
if you have it running on your personal site perhaps you can read them from codepen though you may end up with CORS issues
Bruce Young
@mutantspore
Apr 18 2016 20:42
@ranyehushua you could just cut/paste the icons css text into your own css and use a dataURL in your CSS for the .tff file (probably the only one you’ll need) . http://dataurl.net/#dataurlmaker
lots of ways lol
alpox
@alpox
Apr 18 2016 20:45
@zackluckyf while (j < simon.length) --> if(j < simon.length)
Otherwise the playerinput gets run multiple times just firing the whole queue up
@zackluckyf First line in playerInput :-)
ranyehushua
@ranyehushua
Apr 18 2016 20:52
@mutantspore I just added it to my own site, my hosting is slow though so the loading takes a minute. What do you think? http://www.yehoosh.com/LocalWeatherApp/
Bruce Young
@mutantspore
Apr 18 2016 20:56
@ranyehushua it’s fine.. loaded quickly for me.
Jared Blumer
@jaredblumer
Apr 18 2016 20:57

Does anyone happen to know why this wouldn't result in my geolocated city and state? (It returns nothing.)
[code]
var city = "", state = "";

jQuery(document).ready(function() {
$.getJSON("http://ip-api.com/json/?callback=?", function(data){
city = data.city;
state = data.region;
});

$("#weather").text(city + ", ");

});
[/code]

CamperBot
@camperbot
Apr 18 2016 20:57
:bulb: to format code use backticks! ``` more info
ranyehushua
@ranyehushua
Apr 18 2016 20:57
cool! Is the C/F button visible on your end too? It is acting strange on my iphone...
alpox
@alpox
Apr 18 2016 20:57
@jaredgblumer since $.getJSON is an asynchronous request, you won't have the data outside of its callback function.
Erik Villoria
@kire73
Apr 18 2016 20:58

hello all, working on twitch.tv.

$.getJSON('https://api.twitch.tv/kraken/streams/' + channels[i] + '?callback=?', function(data) {
 //   console.log(data.stream)


    if (data.stream === null) {
      mark = ": offline"
 //     console.log(channels)

    }

wondering why I can't use channels[i] inside this if statement. It always returns the final value in my for loop, but still does it the correct amount of times

alpox
@alpox
Apr 18 2016 20:58
@jaredgblumer the variable city didn't get defined yet when you run the code $("#weather").text(city + ", ");
@kire73 Maybe my last post is meant for you too :D
@kire73 Since you get the response of this request later, when the for loop already finished, the variable i will already be the highest index of the array
Bruce Young
@mutantspore
Apr 18 2016 21:01
@ranyehushua the button is ok on Safari/Mac
alpox
@alpox
Apr 18 2016 21:01
@kire73 You can work around that with:
$.getJSON('https://api.twitch.tv/kraken/streams/' + channels[i] + '?callback=?',
    function(index) {
        return function(data) {
            if (data.stream === null) {
                mark = ": offline";
                console.log(channels[index]);
            }
        }
    }(i));
Jared Blumer
@jaredblumer
Apr 18 2016 21:02
@alpox so there's no way to access the data?
alpox
@alpox
Apr 18 2016 21:02
@jaredgblumer There is a way to access the data. Just work on it when you have it. :-)
@jaredgblumer
var city = "",
    state = "";
jQuery(document).ready(function() {
    $.getJSON("http://ip-api.com/json/?callback=?", function(data) {
        city = data.city;
        state = data.region;
        // Here you have your data!
    });
   // Here you don't have your data yet...
    $("#weather").text(city + ", ");
});
Bruce Young
@mutantspore
Apr 18 2016 21:03
ranyehushua
@ranyehushua
Apr 18 2016 21:10
@mutantspore just fixed for iphone as well. Seems like, with the iphone safari at least, the button background color was being inherited from the body background. I had also forgot to use the sweet "btn" class built in to bootstrap. Much cleaner now. Is the icon coming in accurately for you as well?
Bruce Young
@mutantspore
Apr 18 2016 21:12
@ranyehushua yes the icon is correct. perhaps you can put the conditions text under it?
Jared Blumer
@jaredblumer
Apr 18 2016 21:13
@alpox I thought I made the variable accessible in the global scope. I don't get why city isn't defined.
Bruce Young
@mutantspore
Apr 18 2016 21:14
@jaredgblumer because the api process is asynchronous, the api goes off to do it’s thing but the code races ahead and tries to print out the city .. which it doesn’t actually have yet
Islam Ibakaev
@dagman
Apr 18 2016 21:14
i have several .mp3 sounds that i want to use it simon game. How can i use them where to upload them in order i get an opportunity to use them?
Jared Blumer
@jaredblumer
Apr 18 2016 21:15
@mutantspore Oh that makes. Thank you for the clear description of the problem
CamperBot
@camperbot
Apr 18 2016 21:15
jaredgblumer sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
Bruce Young
@mutantspore
Apr 18 2016 21:15
@dagman do you have a dropbox account
CamperBot
@camperbot
Apr 18 2016 21:15
:star: 1429 | @mutantspore | http://www.freecodecamp.com/mutantspore
Islam Ibakaev
@dagman
Apr 18 2016 21:16
@mutantspore nope i have google drive but it doesn't give me a link which ends as .mp3
Bruce Young
@mutantspore
Apr 18 2016 21:17
@jaredgblumer so you’ll have to wrap the weather api call in a function and call it from within the ip locate function
Mehrdad Karami
@metao1
Apr 18 2016 21:17
Hi guys
I don't know why the freecodecamp rooms says 404
I have question
Bruce Young
@mutantspore
Apr 18 2016 21:18
@dagman ok wel I have heard that it’s possible but google doesn’t like it and stops it if it’s called too many times.
Mehrdad Karami
@metao1
Apr 18 2016 21:18
Does anyone knows why this animation doesn't work?
Islam Ibakaev
@dagman
Apr 18 2016 21:18
@mutantspore so what should i do?
Bruce Young
@mutantspore
Apr 18 2016 21:19
@dagman could always make a dropbox account? I’m not sure if using a github repository will work.. give it a try
Islam Ibakaev
@dagman
Apr 18 2016 21:20
@mutantspore ok thx for help
CamperBot
@camperbot
Apr 18 2016 21:20
dagman sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
:star: 1430 | @mutantspore | http://www.freecodecamp.com/mutantspore
Bruce Young
@mutantspore
Apr 18 2016 21:20
@dagman didn’t FCC give links to suggested mp3’s?
alpox
@alpox
Apr 18 2016 21:20
@jaredgblumer Well yeah, it is defined but set to "". It doesnt get assigned to data.city yet, because the code isnt synchronous (with calling $.getJSON the flow of your application isnt from top to bottom. The function you pass to $.getJSON gets called later, when the response from the API comes back. Until then, the browser just continues with the program. So the callback of $.getJSON gets called some time after $("#weather").text(city + ", ");
Erik Villoria
@kire73
Apr 18 2016 21:20
@alpox thanks, I'm gonna have to play around with this in the web of code and conditions ive created
CamperBot
@camperbot
Apr 18 2016 21:21
kire73 sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star: 552 | @alpox | http://www.freecodecamp.com/alpox
Bruce Young
@mutantspore
Apr 18 2016 21:21
also @dagman you can work with the HTML5 audio api and make your own tones
Islam Ibakaev
@dagman
Apr 18 2016 21:21
@mutantspore no mp3 for error :smile:
@mutantspore audio api native sounds makes my cry :smile:
i don't want use them
alpox
@alpox
Apr 18 2016 21:22
@kire73 There is actually a simpler solution which i just thought of:
channels.forEach(function(channel) {
   $.getJSON('https://api.twitch.tv/kraken/streams/' + channel + '?callback=?',
        function(data) {
            if (data.stream === null) {
                mark = ": offline";
                console.log(channel);
            }
        });
});
Bruce Young
@mutantspore
Apr 18 2016 21:22
@alpox @kire73 yes I always use .forEach in that situation.
alpox
@alpox
Apr 18 2016 21:22
@mutantspore Yeah i did that too in my twitch
Bruce Young
@mutantspore
Apr 18 2016 21:22
@dagman well look at github perhaps
alpox
@alpox
Apr 18 2016 21:22
Just didnt remember at the moment :D
Bruce Young
@mutantspore
Apr 18 2016 21:23
@dagman and you can’t just make a dropbox account?
@dagman it works
Islam Ibakaev
@dagman
Apr 18 2016 21:32
@mutantspore i already sign up to dropbox :smile:
Bruce Young
@mutantspore
Apr 18 2016 21:33
@dagman note the URL host name I’m using to make it work though https://dl.dropboxusercontent.com/
dposse
@dposse
Apr 18 2016 22:16
@metao1 the animation is working? I'd like to know what part of the code makes the balls bounce a different height, I don't see it...
Jackson Bates
@JacksonBates
Apr 18 2016 22:21
@dposse is it the way they are nested in divs, maybe? I haven't seen animation tricks like this in css before. Fun!
dposse
@dposse
Apr 18 2016 22:21
@JacksonBates Yeah I was just about to say that, I haven't played with any animations so this is completely alien to me
yeah it's nested divs, something with the z-index, and if you play with the keyframes bottom: 10% it changes the bounce height
the nested div makes it so the padding between the balls is from the parent div instead of between the divs... I think... if that makes sense
Javier
@sh1g
Apr 18 2016 22:29
$(".titles").append("<div>").addClass("title").append(getTitle).append("</div>");
is the reason all the values from my for loop being written to this one DIV is because I am using append?
I hope that made sense...
Javier
@sh1g
Apr 18 2016 22:37
okay I realized my error xD
Islam Ibakaev
@dagman
Apr 18 2016 22:52
looks like i've done with simon game. What do u think about it? https://codepen.io/dagman/pen/oxdYgW
Greg Duncan
@GregatGit
Apr 18 2016 22:55
@dagman Wow - well done. My suggestion would be to make the green color a bit greener. But great work!
Reginald Davis
@madblkman
Apr 18 2016 22:55
Does anyone have any ideas on how to get a picture to display depending on the weather for the local weather challenge?
Greg Duncan
@GregatGit
Apr 18 2016 22:58
@madblkman If you look at all the possible outcomes broken clould/ rain /light rain etc - then you use a switch that takes checks which condition then puts to the screen the appropriate pic
Brandon
@Daxo
Apr 18 2016 23:00
Hey everyone! Almost done with my weather app but I'm running into an issue where data.weather.id is coming back as undefined so I can't get the conditions to display the right icon http://codepen.io/apeiron/pen/XdVxyY/?editors=1011
Reginald Davis
@madblkman
Apr 18 2016 23:00
@greg I've tried taking that route but when my switch case keeps defaulting. Yet, if I were to put in the icon code manually the picture comes up just fine. It's really weird.
Brandon
@Daxo
Apr 18 2016 23:00
anyone have this happen to them before?
Javier
@sh1g
Apr 18 2016 23:00
@dagman awesome work! The only issue I see is that if people click in the black areas between buttons, it actually takes in a response for a button.
Greg Duncan
@GregatGit
Apr 18 2016 23:00
@madblkman can you put your pen up?
Brandon
@Daxo
Apr 18 2016 23:01
It looks like the data.weather is a different data structure based on the highlighting but I can't figure out how to access it
Reginald Davis
@madblkman
Apr 18 2016 23:01
@bleafman it looks good on my end!
Stephen James
@sjames1958gm
Apr 18 2016 23:01
@bleafman data.weather is an array use data.weather[0].id
Brandon
@Daxo
Apr 18 2016 23:02
@sjames1958gm YESSSSS thanks
CamperBot
@camperbot
Apr 18 2016 23:02
bleafman sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star: 694 | @sjames1958gm | http://www.freecodecamp.com/sjames1958gm
Stephen James
@sjames1958gm
Apr 18 2016 23:02
@bleafman :+1:
Brandon
@Daxo
Apr 18 2016 23:03
All done with my weather app if anyone wants to check it out :) http://codepen.io/apeiron/full/XdVxyY/
Greg Duncan
@GregatGit
Apr 18 2016 23:04
@madblkman did you remember to put breaks; in your switch conditions?
greg
@wearenotgroot
Apr 18 2016 23:05
@bleafman not but one use case was to have a button to switch from metric and imperial units
@bleafman otherwise :+1: looks good
Brandon
@Daxo
Apr 18 2016 23:06
@wearenotgroot oh damn!
@wearenotgroot thanks for pointing that out, I didn't see that use case until just now...
greg
@wearenotgroot
Apr 18 2016 23:08
@bleafman well you done most of the important stuff, so it just an easy fix :smile:
Greg Duncan
@GregatGit
Apr 18 2016 23:11
@madblkman you a have to fix your syntax so '<img src="http://openweathermap.org/img/w/' + json.weather[0].icon + '.png"/>'
@madblkman you have "<img src=https... you need to have ' after the =
Javier
@sh1g
Apr 18 2016 23:15
I'm working on my Wiki Viewer. How would I go about clearing the contents I just displayed in HTML if a new search is made.
Greg Duncan
@GregatGit
Apr 18 2016 23:15
@madblkman your urls are not working - you should be able to cut and paste them in the browser and see them
Javier
@sh1g
Apr 18 2016 23:16
nvm DXx just figured it out. my bad
Reginald Davis
@madblkman
Apr 18 2016 23:17
@GregatGit sighs they were working the other day. I'm having a hard time finding icons that work. Everything I find is broken.
Greg Duncan
@GregatGit
Apr 18 2016 23:18
@madblkman you can use the icons at open weather
Will be back in 20 mins
Reginald Davis
@madblkman
Apr 18 2016 23:19
@GregatGit I'll give it a whirl
Robert Friedman
@robfr77
Apr 18 2016 23:33
I'm trying to make my weather app say "Loading weather" while the app is retreiving the weather and then take the text away. I'm doing this with jquery by adding to the html of a p which works but if I try to take away the text it won't display it at the beginning then
Help why won't this work to show and remove "loading weather" text
$(document).ready(function() {
 // Hide the weather box and display loading text
  $(".loading").text("Loading your local weather...");
  $(".wrapper").hide();
//to end
});
//after weather call is complete, display weather box with results and hide the loading text
$(".wrapper").show();
$(".loading").hide();
CamperBot
@camperbot
Apr 18 2016 23:37
no wiki entry for: why wont this work to show and remove loading weather textdocumentreadyfunction hide the weather box and display loading text loadingtextloading your local weather wrapperhideto endafter weather call is complete display weather box with results and hide the loading textwrappershowloadinghide
Robert Friedman
@robfr77
Apr 18 2016 23:41
Okay it works with .remove and putting it deeper within the function
Brandon
@Daxo
Apr 18 2016 23:58
Okay! Now actually done with the weather app! http://codepen.io/apeiron/pen/XdVxyY?editors=1011
Robert Friedman
@robfr77
Apr 18 2016 23:58
nice @bleafman
Brandon
@Daxo
Apr 18 2016 23:59
The only issue I ran into is making the degree switch button ("F"/"C") appear inline
anyone know how to do that?
I think something my CSS is blocking it