These are chat archives for FreeCodeCamp/HelpFrontEnd

27th
Apr 2016
John Sevilla
@jsevilla274
Apr 27 2016 00:14
This message was deleted
Ryan Hanks
@RyanHanks1
Apr 27 2016 00:16
This message was deleted
Charlotte N.
@clnquacky
Apr 27 2016 01:12
Still struggling with getting this search field to clear after a search is submitted so a second+ search can be done..http://codepen.io/clnquacky/pen/zqLKVQ
I have thought about trying a function.. But not sure how to set it up.. I have tried a form of .reset, I have tried resetting the variable to 0. But I think I am missing something simple. .. Any suggestions.
Bobby McDonald
@BobbyMcWho
Apr 27 2016 01:33
Can anyone suggest a good tutorial on using JSON API's?
Jeff
@adzam5
Apr 27 2016 01:37
@clnquacky You can add the following to your getJSON function
$('input[name=frame]').val('');
Bruce Young
@mutantspore
Apr 27 2016 01:38
Charlotte N.
@clnquacky
Apr 27 2016 01:39
@adzam5 That clears the search field, but kept the old search results there. I will have to look and see where else I need to clear old data.. Possibly in the same area.
Javier
@sh1g
Apr 27 2016 01:39
hello everyone! quick question. why does the image start to shift everything when the size is increased. Sorry about the colors. It just helps me to see what each thing is doing before I start to add design to it http://codepen.io/sh1g/pen/grKqmo?editors=0100
Javier
@sh1g
Apr 27 2016 01:44
nvm figured it out. just had to add a vertical-align: top to the parent element. cheers
Bobby McDonald
@BobbyMcWho
Apr 27 2016 01:46
Thanks @mutantspore
CamperBot
@camperbot
Apr 27 2016 01:46
bobbymcwho sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
:star: 1464 | @mutantspore | http://www.freecodecamp.com/mutantspore
Dominic Lobban
@alkapwn3d
Apr 27 2016 01:56
can you add jquery to a js file instead of the head?
Dylan
@dhcodes
Apr 27 2016 02:00
@alkapwn3d as long as you referenced the js file you probably could
you mean the CDN?
Frank XC
@tenkdayz
Apr 27 2016 02:01
@alkapwn3d jquery has to be on top of the js src
Dominic Lobban
@alkapwn3d
Apr 27 2016 02:03
i have the scripts like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="js/main.js"></script>
want to add this in a separate js file:
$(document).ready(function(){
$("div").fadeToggle("slow");
});
only works if i put it under the first 2 scripts
Dylan
@dhcodes
Apr 27 2016 02:05
@alkapwn3d right, because it needs to call jquery before you use it
you could also put it between the tags probably
ie. between the opening and closing script tags
Dominic Lobban
@alkapwn3d
Apr 27 2016 02:06
i got that, but is there a way to put it in a separate js file on its own
Dylan
@dhcodes
Apr 27 2016 02:09
@alkapwn3d which part? jquery or your code?
Dominic Lobban
@alkapwn3d
Apr 27 2016 02:09
sry i meant the code
Dylan
@dhcodes
Apr 27 2016 02:10
if you make a separate .js file and then put your code in it, and then reference it below your other two lines, does it not work
Dominic Lobban
@alkapwn3d
Apr 27 2016 02:10
sure doesnt
Dylan
@dhcodes
Apr 27 2016 02:10
ex. <script src="js/yourcodefile.js"></script>
are you putting it in the js folder?
Dominic Lobban
@alkapwn3d
Apr 27 2016 02:11
<script src="js/main.js"></script>
and yes
Dylan
@dhcodes
Apr 27 2016 02:11
you probably still need to reference the CDN in your file
Dominic Lobban
@alkapwn3d
Apr 27 2016 02:11

you mean this?

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

Dylan
@dhcodes
Apr 27 2016 02:13
yeah
Dominic Lobban
@alkapwn3d
Apr 27 2016 02:16
well then
Dominic Lobban
@alkapwn3d
Apr 27 2016 02:22
k now it works. I have no idea why
code life
Dylan
@dhcodes
Apr 27 2016 02:24
@alkapwn3d I'm guessing because it doesn't call them in sequence
it calls them asynchronously
Javier
@sh1g
Apr 27 2016 02:43
http://codepen.io/sh1g/pen/grKqmo why is it adding both classes online and offline on my if else statement?
erica-dawn
@erica-dawn
Apr 27 2016 02:45
Hello, all! I'm going nuts over the Random Quote Machine. All I need now is the tweet functionality. Tweeting the URL is easy enough but can't for the life of me figure out how to tweet the quote itself
Dylan
@dhcodes
Apr 27 2016 02:46
@sh1g read your if statements again
Blake Harris
@bharris62
Apr 27 2016 02:46
I am about to start my Quote generator project, does anyone know of a good API to use, instead of hard coding some JSON
Dylan
@dhcodes
Apr 27 2016 02:47
you say essentially, if stream is null, add this class, then you change stream to offline. And then say "if stream isn't null, add another class
@sh1g
so when you change stream in-between, it makes the else statement true too
@bharris62 just hard-code it. You'll avoid cross-origin errors and learn more
;)
Blake Harris
@bharris62
Apr 27 2016 02:48
I honestly feel like hard coding it is taking the easy way out
and will limit my results
Javier
@sh1g
Apr 27 2016 02:48
@bharris62 I did what @dhcodes and hardcoded my quotes. It helped out a lot to figure out API's on the next project
Dylan
@dhcodes
Apr 27 2016 02:48
@bharris62 I've seen a lot of people use this: http://www.icndb.com/api/
@sh1g did what I said help you/
Blake Harris
@bharris62
Apr 27 2016 02:49
i know I will learn API's more next project, but I'm just a little jumpy to go ahead lol
Dylan
@dhcodes
Apr 27 2016 02:49
@sh1g I think that's why they're both being applied. You can double-check by console-logging your stream var in each statement
Javier
@sh1g
Apr 27 2016 02:49
@dhcodes I think I see what you mean. I thought though that it would skip to the next value after it triggered the first if.
Dylan
@dhcodes
Apr 27 2016 02:50
cool
I gotta go ya'll. @bharris62 who doesn't need more practice with making an object or array and then calling a random set from it though? lol
Javier
@sh1g
Apr 27 2016 02:50
@dhcodes I just though of a work around. I'll see if it works xD
Dylan
@dhcodes
Apr 27 2016 02:50
ok, cya all later
let me know if it works @sh1g
Blake Harris
@bharris62
Apr 27 2016 02:51
i dunno, don't see that much value in hard coding one, because I will just pull a random value. so whats the difference in pulling a random value in my object or there object. My object will just be more limited than theirs lol....but I will prob just write my own. Might make an insult generator that insults my friends ha
Javier
@sh1g
Apr 27 2016 02:52
@dhcodes what was confusing was that it was appending the Online and Offline correctly. I think that's what tripped me up
Javier
@sh1g
Apr 27 2016 03:03
@dhcodes Did not work DX I'm going to take a break. Been coding for about 4 hours. Hopefully when I come back it will make sense...
Alex Swiontek
@alexswiontek
Apr 27 2016 03:04
Have any of you guys finished the local weather app? Looking for some ideas on how to get it all up and running
Frank XC
@tenkdayz
Apr 27 2016 03:10
how can i shift the margin of an image when the screen is a certain size?
Andrew Charlebois
@andrewchar
Apr 27 2016 03:23
@tenkdayz media queries
Frank XC
@tenkdayz
Apr 27 2016 03:26
@andrewchar @lcassettai is there a way to do it using bootstrap ?
Nicolas May
@hynso
Apr 27 2016 03:27
Why does my iphone not consistently/predictably play sounds in <audio> elements?
Andrew Charlebois
@andrewchar
Apr 27 2016 03:28
@tenkdayz yeah, read this http://getbootstrap.com/css/#grid
lcassettai
@lcassettai
Apr 27 2016 03:35

@hynso Audio files cannot be auto-played on page load in mobile Safari. Audio files can only be loaded from a user-triggered touch (click) event. If the autoplay attribute is used in the HTML markup, mobile Safari will ignore the attribute and not play the file on page load, like so:

<audio id="audio" src="audio_file.mp3" autoplay></audio>

Nicolas May
@hynso
Apr 27 2016 03:35
Thanks @lcassettai
CamperBot
@camperbot
Apr 27 2016 03:35
hynso sends brownie points to @lcassettai :sparkles: :thumbsup: :sparkles:
:star: 44 | @lcassettai | http://www.freecodecamp.com/lcassettai
lcassettai
@lcassettai
Apr 27 2016 03:37
@hynso :D
Frank XC
@tenkdayz
Apr 27 2016 03:37
@andrewchar @lcassettai thanks!
CamperBot
@camperbot
Apr 27 2016 03:37
tenkdayz sends brownie points to @andrewchar and @lcassettai :sparkles: :thumbsup: :sparkles:
:star: 45 | @lcassettai | http://www.freecodecamp.com/lcassettai
:star: 408 | @andrewchar | http://www.freecodecamp.com/andrewchar
Andrew Charlebois
@andrewchar
Apr 27 2016 03:37
@tenkdayz figure it out?
Frank XC
@tenkdayz
Apr 27 2016 03:38
@andrewchar I have an idea how to make it work.
I know about the grid system... but i have a set of 7 images which margins have to shift according to the size of the page but using plain col-md-4 for example makes them all stay on the same col instead of making them look like their in different cols ... idk if that makes sense. I'm sure I can make it work now though
Spas
@Spasmochi
Apr 27 2016 03:47
Hey guys! I'm stuck on twitch API project. It's coming along but having some problems with my javascript. The pen is at http://codepen.io/Spas/pen/PNdKqM I think my ajax is fine, it's the setPage function that's the problem. I'm just looking for a poke in the direction of where I've gone wrong.
Andrew Charlebois
@andrewchar
Apr 27 2016 03:48
@tenkdayz you could use display: flex
Bruce Young
@mutantspore
Apr 27 2016 03:48
@Spasmochi says this in console pen.js:22 Uncaught ReferenceError: channelAr is not defined
Salomon May
@sollymay
Apr 27 2016 03:49
guys, I am a little bit confused with the random quotes twitter share button
Andrew Charlebois
@andrewchar
Apr 27 2016 03:49
@Spasmochi i think you need to put your array outside of the document ready
Frank XC
@tenkdayz
Apr 27 2016 03:50
@andrewchar I'll read that. thanks again.
CamperBot
@camperbot
Apr 27 2016 03:50
tenkdayz sends brownie points to @andrewchar :sparkles: :thumbsup: :sparkles:
:warning: tenkdayz already gave andrewchar points
Salomon May
@sollymay
Apr 27 2016 03:50
all what I’ve seen actually asks me to also use like PHP and we have not used PHP in the past
Spas
@Spasmochi
Apr 27 2016 03:50
@andrewchar okay, I'll try that
@mutantspore I'll check on that
Salomon May
@sollymay
Apr 27 2016 03:54
any help with that?
Andrew Charlebois
@andrewchar
Apr 27 2016 03:55
what asks you to use php?
Salomon May
@sollymay
Apr 27 2016 03:55
I understand that the twitter API should be a POST to twitter, right?
Andrew Charlebois
@andrewchar
Apr 27 2016 03:56
not sure
Bruce Young
@mutantspore
Apr 27 2016 03:56
@sollymay just needs a couple of lines if you make your own button. Do not try the twitter widget.
https://dev.twitter.com/web/intents
Spas
@Spasmochi
Apr 27 2016 03:59
@andrewchar hmmm, still not working for me.
Andrew Charlebois
@andrewchar
Apr 27 2016 04:00
@Spasmochi try doing something like using the .foreach
@Spasmochi make a function like..
function buildList() {
 your variable name for the array of twitch streamers here.forEach(function() {
    $.getJSON('the url you need to use for the api here', function(data) {
      //code here
}
Spas
@Spasmochi
Apr 27 2016 04:03
@andrewchar Ok, I'll try that. thanks
CamperBot
@camperbot
Apr 27 2016 04:03
spasmochi sends brownie points to @andrewchar :sparkles: :thumbsup: :sparkles:
:star: 409 | @andrewchar | http://www.freecodecamp.com/andrewchar
Salomon May
@sollymay
Apr 27 2016 04:05
@mutantspore thank you! now wanted to ask you. is there a way to avoid this being a pop-up?
CamperBot
@camperbot
Apr 27 2016 04:05
sollymay sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
:star: 1467 | @mutantspore | http://www.freecodecamp.com/mutantspore
Bruce Young
@mutantspore
Apr 27 2016 04:06
@Spasmochi you’ll end up having to make 2 api calls to get all the info
@sollymay well it will have to open another window target=“_blank”
Spas
@Spasmochi
Apr 27 2016 04:08
@mutantspore Yeah, at least one for the online streams and one for the offline.
Salomon May
@sollymay
Apr 27 2016 04:09
@mutantspore thank you! I think I am just too tired and asking some things that I knew but the twitter explanation helped me a lot!
CamperBot
@camperbot
Apr 27 2016 04:09
sollymay sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
:warning: sollymay already gave mutantspore points
Bruce Young
@mutantspore
Apr 27 2016 04:09
@Spasmochi and yes, using a .forEach is a way to get each users’s info
TrashyTown
@TrashyTown
Apr 27 2016 04:11
having trouble with the record collection challege, does anyone understand
V Arun Kumar
@arunvkumr
Apr 27 2016 04:40
Hey, guys.. i'm working on calculator app. it's not complete yet, but works for almost all of the operations. i would like to get some feedback on this. like design, bugs, calculation problems, anythings. here the link. http://codepen.io/arunkumrv/full/JXarKg
kirbyedy
@kirbyedy
Apr 27 2016 04:54
@arunkumrv maybe to fix rounding
0.04000000000000001
if I do 0.2 x 0.2
V Arun Kumar
@arunvkumr
Apr 27 2016 04:56
@kirbyedy thanks.. i'm working on it.
CamperBot
@camperbot
Apr 27 2016 04:56
arunkumrv sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star: 926 | @kirbyedy | http://www.freecodecamp.com/kirbyedy
Evan Pendergraft
@espdesign
Apr 27 2016 05:20
hello, I was wondering if someone could help me with an issue im having. Im trying to keep an img inside of a menu bar. I want the menu bar to resize with window size, and the img with the menu bar. how would I best go about this.
what I have so far.
I dont want the image to be so large it is bigger than the menu bar.
Michael Karpinski
@karpimpski
Apr 27 2016 05:34
@espdesign have you given your image the class "img-responsive"?
Evan Pendergraft
@espdesign
Apr 27 2016 05:35
is that a bootstrap class?
I was trying to do it without bootstrap.
Michael Karpinski
@karpimpski
Apr 27 2016 05:35
@espdesign oh, yeah I just looked in your code and saw that
@espdesign hm, have you tried messing around with manually adjusting the size? I know that won't work for a responsive site, but it's a start. why don't you want to use bootstrap?
I really just use it for its amazing grid system. other than that I make custom styles, as Bootstrap allows for that too
Evan Pendergraft
@espdesign
Apr 27 2016 05:37
I just wanted to get the main CSS down.
Michael Karpinski
@karpimpski
Apr 27 2016 05:37
@espdesign well for that particular issue I think you need to use manual sizing or Bootstrap. I'm sorry, I'm not an expert with CSS. but manual sizing should work if you're just trying to get the CSS down for now
Evan Pendergraft
@espdesign
Apr 27 2016 05:39
I think I got it figured out how I want now. I do appreciate the input @karpimpski , thank you.
CamperBot
@camperbot
Apr 27 2016 05:39
espdesign sends brownie points to @karpimpski :sparkles: :thumbsup: :sparkles:
:star: 349 | @karpimpski | http://www.freecodecamp.com/karpimpski
Frank XC
@tenkdayz
Apr 27 2016 05:39
why can the navbar just * get the color i give it!?
kirbyedy
@kirbyedy
Apr 27 2016 05:40
@espdesign you have to use media query
Evan Pendergraft
@espdesign
Apr 27 2016 05:41
@kirbyedy ohhh hmmm.
Sergio
@smendoza787
Apr 27 2016 05:52
such a nub at coding
Javier
@sh1g
Apr 27 2016 05:55
This message was deleted
          if (stream === null) {
            stream = "Offline";
          } else if (stream != null) {
            stream = "Online";
          }
having trouble with this logic right here
When I do this, it replaces the contents fine. Except that if I add something else, like adding a class, it executes both statements
Javier
@sh1g
Apr 27 2016 07:13
meh just did it a different way.
works now
tushar3112
@tushar3112
Apr 27 2016 07:51
Hey guys, I was wondering if you guys could help me with my tic-tac-toe zipline. i am stuck really bad. I think there's some problem with my "Ai()" function. I have all my functions in a "game()" function at the end of the js file which will be triggered when a user clicks on the game-board. I would really appreciate your help. http://codepen.io/tushar_13/pen/zqPQOp
Nishanth Mane
@ngmgit
Apr 27 2016 09:25
iam trying to make a horizontal image vertical. I know that we can just use rotate proerty and set it to 90. But in my case ill be using rotate property again using Jquery events which is making rotation changes based on the original image not from the changed alignment done in the above line.
here is what iam working on https://jsfiddle.net/nishu_uhsin/h5nsutww/7/
Zerka1982
@Zerka1982
Apr 27 2016 09:36
hello guys !
I need your help
I have 2 buttons , one on the top of the other ...I wanna make both to be clickabale
any suggestion please !
Marcel Schulz
@MarcelSchulz
Apr 27 2016 10:02
how would the lower one be clickable?
are they both visible in some way?
Stephen James
@sjames1958gm
Apr 27 2016 10:21
@tushar3112 After the computer turn do you switch pturn back to player value?
tushar3112
@tushar3112
Apr 27 2016 10:30
@sjames1958gm oh thanks I did that, everything is fine now except, it dosen't let the user win, what I mean is wincheck() function is not working for the user input why???
And sometimes, the game changes the symbol automatically ;/
Stephen James
@sjames1958gm
Apr 27 2016 10:40
@tushar3112 I put a console.log at start of winCheck and pTurn is always computer value
tushar3112
@tushar3112
Apr 27 2016 10:41
Ah! but how? why?
You can check, in the starting of the js file, there's a funtion for that
Stephen James
@sjames1958gm
Apr 27 2016 10:42
symbDisp before winCheck symbDisp swaps player / computer
@tushar3112
symbDisp before winCheck symbDisp swaps player / computer
tushar3112
@tushar3112
Apr 27 2016 10:43
How do I fix this?
Stephen James
@sjames1958gm
Apr 27 2016 10:43
pass player / computer into winCheck and don't use global there.
Stephen James
@sjames1958gm
Apr 27 2016 10:45
@tushar3112 You can call the var pTurn in function winCheck(pTurn) will save some changes for testing.
@findname newstr = str.replace(/\W|_/, "")
Davi Nakano
@daviycnakano
Apr 27 2016 10:47
hello there! is anyone available to tackle a noobish issue here? Ive got some problems with toggleClass :(
prashant
@findname
Apr 27 2016 10:48
@sjames1958gm can you explain that
Stephen James
@sjames1958gm
Apr 27 2016 10:49
@findname Wrong person, \W matches all non-alphanumeric | adds in a match for _ (regexp in js include in alpha numeric). \w matches non-alphanumeric \W matches the opposite. replace with "" will remove all that match
@daviycnakano Throw up your question.
Davi Nakano
@daviycnakano
Apr 27 2016 10:53
@sjames1958gm so, I am not sure if I am doing this correctly... but I am trying to toggle the CSS 'display' property from 'none' to 'flex' (I have also tried with changing the width from 100% to 60%)
the initial value for my div is display: none, but then I have created another class (for the toggle) with display: flex
Stephen James
@sjames1958gm
Apr 27 2016 10:54
@daviycnakano Do you do addClass and removeClass?
Davi Nakano
@daviycnakano
Apr 27 2016 10:55
@sjames1958gm no, I am using $(".right-container").toggleClass("right-container-show");
Stephen James
@sjames1958gm
Apr 27 2016 10:57
@daviycnakano Have you used the devtools inspector to see what classes are on the elements.
Davi Nakano
@daviycnakano
Apr 27 2016 10:58
@sjames1958gm yes, it seems to be toggling the classes correctly although the css property itself is not changing (would you mind if I send you the codepen link?)
Stephen James
@sjames1958gm
Apr 27 2016 11:00
ok
@findname You need to use newstr for all your ops after the replace. including newstr = newstr.toLowerCase() also for replace (/\W|_/g, "") - the g means repeat the check across the whole input not stop at the first match
@findname Remember strings are immutable - so all functions return the new string.
prashant
@findname
Apr 27 2016 11:16
@sjames1958gm still not working i used var newstr = str.toLowerCase().replace(/\W|_/g, ""); for newstr to be the given string devoid of all punctuation and spaces, also i dont get what '|' and '_' stand for
Ankit Panwar
@coderNoob
Apr 27 2016 11:27
This is my finished Simon. What do you guys think?
http://codepen.io/coderNoob/full/wGmbqZ/
Marcel Schulz
@MarcelSchulz
Apr 27 2016 11:45
it’s nice!
Davi Nakano
@daviycnakano
Apr 27 2016 11:48
@coderNoob wow! great job!
Ankit Panwar
@coderNoob
Apr 27 2016 11:49
@daviycnakano Thanks ! :smile:
CamperBot
@camperbot
Apr 27 2016 11:49
:star: 311 | @daviycnakano | http://www.freecodecamp.com/daviycnakano
codernoob sends brownie points to @daviycnakano :sparkles: :thumbsup: :sparkles:
Marcel Schulz
@MarcelSchulz
Apr 27 2016 11:50
how do you send those brownie points?
Ankit Panwar
@coderNoob
Apr 27 2016 11:50
@MarcelSchulz Just write thanks followed with @ and then username
CamperBot
@camperbot
Apr 27 2016 11:50
codernoob sends brownie points to @marcelschulz :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for marcelschulz
Marcel Schulz
@MarcelSchulz
Apr 27 2016 11:50
ah got it, thanks!
and what’s the could not find receiver for marcelschulz?
AnnasLab
@AnnasLab
Apr 27 2016 12:15
Hello guys, should I write my CSS for mobile first or desktop ? thanks
Marcel Schulz
@MarcelSchulz
Apr 27 2016 12:15
That’s up to your personal preference or/and depends on the scope of the project
If it’s likely to be used mobile-first I’d start off with mobile
AnnasLab
@AnnasLab
Apr 27 2016 12:17
So there's no problem if I started with desktop (I'm using bootstrap for personal portfoio project)
Marcel Schulz
@MarcelSchulz
Apr 27 2016 12:18
Not at all, I’d say most people still start off with desktop and then drill down to mobile
AnnasLab
@AnnasLab
Apr 27 2016 12:19
you mean start with desktop than drill down to mobile ?
Samuel Cupidon
@Zerazera
Apr 27 2016 12:19
Hi all, looking for feedback on my Pomodoro clock. http://codepen.io/Zeratul/full/aNKYZL/
Marcel Schulz
@MarcelSchulz
Apr 27 2016 12:19
oh yeah, sorry :D
AnnasLab
@AnnasLab
Apr 27 2016 12:19
thanks @MarcelSchulz have a great day ^^
CamperBot
@camperbot
Apr 27 2016 12:19
annaslab sends brownie points to @marcelschulz :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for marcelschulz
Ken Bellows
@kenbellows
Apr 27 2016 13:18
@AnnasLab If you're using Bootstrap 3, it's designed with mobile/desktop responsiveness in mind; for example, if you're not familiar already, I'd take a look at the Bootstrap grid system and how to use multiple .col-xx-n classes to make your content look good on different screen sizes with very little work
Stuart Taylor
@Bouncey
Apr 27 2016 13:29

Hi guys, I'm building the local weather app, but its hit or miss if the script runs, I'm all out of ideas and would appreciate some feedback

http://codepen.io/Bouncey/pen/VaBOOz

many thanks

Matthew Boland
@mattboland
Apr 27 2016 13:45
@Bouncey it is running for me. it just took a few moments before any location specific info showed up
Stuart Taylor
@Bouncey
Apr 27 2016 13:48
It works for me also, sometimes. Could it just be the server? I get a lot of recursion errors, but I have no idea where the problem is. Sometimes the api gets blocked for 'mixed content'??
Vikas Lalwani
@lalwanivikas
Apr 27 2016 13:51
I am currently on Twitch API project
But multiple JSONP requests are not working :( http://codepen.io/lalwanivikas/pen/RaYmjG
Nishanth Mane
@ngmgit
Apr 27 2016 13:52
can anyone help me understand this animation in the second section of this page. https://onlycoin.com/
I have trying to implement it and this what i did so far, can anyone tell me what more of the properties are in play which are making the animation possible in the original onr.
Here is the link to what i tried so far. https://jsfiddle.net/nishu_uhsin/h5nsutww/25/
Stuart Taylor
@Bouncey
Apr 27 2016 14:01
@nishugit that is a pretty animation, have a read up on CSS3 transform and transition. If you use something like firebug, you can see the transform happen in the html. Is will have a scroll trigger to control it too
Matthew Boland
@mattboland
Apr 27 2016 14:02
@Bouncey yeah i am not sure, but i think i had a lot of recursion errors while i had my code wrapped in an if statement, similar to your set up.
Stuart Taylor
@Bouncey
Apr 27 2016 14:03
is it possible to move it out of the if statement?
Matthew Boland
@mattboland
Apr 27 2016 14:05
 $(document).ready(function(){ navigator.geolocation.getCurrentPosition(function(position) {
      var lat = position.coords.latitude;
      var lon = position.coords.longitude;
is what i did for mine to start.
Stuart Taylor
@Bouncey
Apr 27 2016 14:06
@mattboland thanks, I'll see if it helps
CamperBot
@camperbot
Apr 27 2016 14:06
bouncey sends brownie points to @mattboland :sparkles: :thumbsup: :sparkles:
:star: 363 | @mattboland | http://www.freecodecamp.com/mattboland
Matthew Boland
@mattboland
Apr 27 2016 14:07
i tried it on your pen and it seems that if you get rid of the if statement wrapper it still works http://codepen.io/MattBoland/pen/RaYXQz?editors=1010
Mooli
@Mooli88
Apr 27 2016 14:40
hi,
i'm trying to prepare myself for employment asap. so
should i learn angularjs 1 / 2 / react ?
Marcel Schulz
@MarcelSchulz
Apr 27 2016 14:47
They are two different things and are hard to compare, it’s good to know the basics and concepts of both
current positions tend to require react a lot lately, though
James Sral
@jamessral
Apr 27 2016 14:48
Having trouble with the local weather app :/
http://codepen.io/jamessral/pen/ZWMdPO?editors=0010
I've even tried using a proxy
for jsonp that is
Marcel Schulz
@MarcelSchulz
Apr 27 2016 14:50
jQuery2220424158332357053_1461768609621,({"cod":401, "message": "Invalid API key. Please see http://openweathermap.org/faq#error401 for more info."});
James Sral
@jamessral
Apr 27 2016 14:51
You need to put an api key into the url
Marcel Schulz
@MarcelSchulz
Apr 27 2016 14:53
yeah, that’s your code’s request
James Sral
@jamessral
Apr 27 2016 14:54
hmm
Marcel Schulz
@MarcelSchulz
Apr 27 2016 14:54
well, now it seems to work, let me see
James Sral
@jamessral
Apr 27 2016 14:55
I removed the proxy
Looks like the proxy is down :/
James Sral
@jamessral
Apr 27 2016 15:03
Part of the problem is that I'm just getting [object Object], which is a problem that I solved with the proxy for the random quote machine
Marcel Schulz
@MarcelSchulz
Apr 27 2016 15:08
where are you getting [object Object]
that simply occurs when you try to access an object as a string
James Sral
@jamessral
Apr 27 2016 15:09
oh, I was trying to alert(json) to see the results
Marcel Schulz
@MarcelSchulz
Apr 27 2016 15:09
try to console.log() ist, that will format the object nicely
or alternatively you can use JSON.stringify() to turn the returned object into a JSON string
James Sral
@jamessral
Apr 27 2016 15:11
So I am returning the correct object now, I suppose now the problem is just in displaying the info
Marcel Schulz
@MarcelSchulz
Apr 27 2016 15:13
what do you want to display?
James Sral
@jamessral
Apr 27 2016 15:14
I'm trying to display the city and country name
I can see that when I alert with JSON.stringify though
Marcel Schulz
@MarcelSchulz
Apr 27 2016 15:17
ok, so do you know how to display the data now or do you need further help?
alpox
@alpox
Apr 27 2016 15:18
@jamessral Okay your only problem: $.getJSON is 'Asynchronous', what means, at the place in your code, in which you set the values to the DOM, the values don't exist yet.
James Sral
@jamessral
Apr 27 2016 15:18
ooh. That makes sense
alpox
@alpox
Apr 27 2016 15:18

@jamessral Move the code to add them:

$("#location").text(city + ", " + country);
$("#temperature").text(temp);

Inside the callback of $.getJSON

And you're fine
James Sral
@jamessral
Apr 27 2016 15:18
Thanks @alpox
CamperBot
@camperbot
Apr 27 2016 15:18
jamessral sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star: 613 | @alpox | http://www.freecodecamp.com/alpox
James Sral
@jamessral
Apr 27 2016 15:18
Thanks @MarcelSchulz
CamperBot
@camperbot
Apr 27 2016 15:18
jamessral sends brownie points to @marcelschulz :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for marcelschulz
lcassettai
@lcassettai
Apr 27 2016 15:20
@arunkumrv i like it! :D
V Arun Kumar
@arunvkumr
Apr 27 2016 16:03
@lcassettai thanks. :smile:
CamperBot
@camperbot
Apr 27 2016 16:03
arunkumrv sends brownie points to @lcassettai :sparkles: :thumbsup: :sparkles:
:star: 48 | @lcassettai | http://www.freecodecamp.com/lcassettai
Tulio Natale
@tuliodnw
Apr 27 2016 16:20
@tuliodnw
hi, i did my portafolio, tips? also iheard some pics are broken but they are not to me can you tell me which ones
http://codepen.io/tuliodnw/full/ZWoPaX/
Alex Coder
@jkid314159
Apr 27 2016 16:38
hello world
CamperBot
@camperbot
Apr 27 2016 16:38

welcome to FreeCodeCamp @jkid314159!

Alex Coder
@jkid314159
Apr 27 2016 16:38
Hello World
CamperBot
@camperbot
Apr 27 2016 16:38

welcome to FreeCodeCamp @jkid314159!

Matthew Boland
@mattboland
Apr 27 2016 16:48
@tuliodnw your pictures work for me.
@tuliodnw by that i mean they are there and the pictures on the level and below the cursor all toggle a bit.
jadoo1989
@jadoo1989
Apr 27 2016 16:55
Hi guys. So, this is my first intermediate project and I'm finding that although I've had a crap ton of exposure to javascript, not so much to CSS and HTML so I can't make things as pretty as I want them. Basically. I have a div that contains two more divs: one for the text and one for the buttons. How do I make it so that the button row is always at the bottom of the content div and that nothing spills out of the content div?
Paul Borawski
@iAmNawa
Apr 27 2016 17:13
@jadoo1989 quote it is a little large
@jadoo1989 change #content to width: 100%;
jadoo1989
@jadoo1989
Apr 27 2016 17:21
K, I've done that, what's the best way to move the button row to the bottom of the content box and keep it there? css margin properties?
Alex Coder
@jkid314159
Apr 27 2016 17:21
Hello World
CamperBot
@camperbot
Apr 27 2016 17:21

welcome to FreeCodeCamp @jkid314159!

jadoo1989
@jadoo1989
Apr 27 2016 17:23
hi @jkid314159
Alex Coder
@jkid314159
Apr 27 2016 17:25
hello world
CamperBot
@camperbot
Apr 27 2016 17:25

welcome to FreeCodeCamp @jkid314159!

Diki Ananta
@dikiaap
Apr 27 2016 17:25
Welcome @jkid314159
Javier
@sh1g
Apr 27 2016 17:25
@tuliodnw I would use an image hosting service for images. Some sites don't allow direct linking to images. I would suggest Cloudinary.com to host images
Alex Coder
@jkid314159
Apr 27 2016 17:25
@jadoo1989 hi
@sh1g cool! thank you.
CamperBot
@camperbot
Apr 27 2016 17:27
jkid314159 sends brownie points to @sh1g :sparkles: :thumbsup: :sparkles:
:star: 300 | @sh1g | http://www.freecodecamp.com/sh1g
Alex Coder
@jkid314159
Apr 27 2016 17:27
@dikiaap hello
I have a question about JSON in my js will load when my connection is good
$( document ).ready( function() {

 var JSONObj =
    {
        "1": "one",
        "2": "two",
        "3": "three",
        "4": "four",
        "5": "five",
        "6": "six",
        "7": "seven",
        "8": "eight",
        "9": "nine",
        "10": "ten"

    };//end

  //random int: min-included to max-included 
$( "#quote" ).on( "click", function( JSONObj ) {  
    $( ".insertHere" ).html( JSONObj );

});//function() end

});//$(document).ready() end
Alex Coder
@jkid314159
Apr 27 2016 17:33
I want to get key and insert value
Zain Ul Haq
@drsherlock
Apr 27 2016 17:49
hi, the background color of the anchor tags on navbar turns white on clicking, what should i do? http://codepen.io/drsherlock/pen/QbebgQ
Mark Howard
@iheartkode
Apr 27 2016 17:49
@drsherlock a:visited { }
that will modify the links attributes when visited or clicked
@drsherlock I would consider sticking to one main color and two other matching colors :)
Thomas G.
@CaptainMurphey
Apr 27 2016 17:50
Hey guys so im having a weird problem, just setting up an image in bootstrap and for some reason its getting a margin on the left and not being responsive http://codepen.io/CaptainMurphey/pen/QNVoLJ
Mark Howard
@iheartkode
Apr 27 2016 17:51
and dropshadow on a lot of text looks hard on the eyes
@CaptainMurphey ill look
Zain Ul Haq
@drsherlock
Apr 27 2016 17:51
@iheartkode i have used this, .nav li a:visited {
color: #7077e2;
background-color: rgba(177, 65, 65, 0.8);
}
Thomas G.
@CaptainMurphey
Apr 27 2016 17:51
@iheartkode thanks mark, it is a large image but i dont see why that should matter
CamperBot
@camperbot
Apr 27 2016 17:51
captainmurphey sends brownie points to @iheartkode :sparkles: :thumbsup: :sparkles:
:star: 655 | @iheartkode | http://www.freecodecamp.com/iheartkode
Zain Ul Haq
@drsherlock
Apr 27 2016 17:52
it is not having any effect
Mark Howard
@iheartkode
Apr 27 2016 17:52

@CaptainMurphey

img {
 max-width: 100%;
}

works

Joseph
@revisualize
Apr 27 2016 17:52
@CaptainMurphey <img class="img-respongsive center-block" ... I think you have an extra g
Edd Yerburgh
@eddyerburgh
Apr 27 2016 17:52
Does my tic tac toe game work for you guys in hard mode? Should be impossible to beat. Implemented a minimax algorithm http://codepen.io/eddyerburgh/full/PNdBxV/
Mark Howard
@iheartkode
Apr 27 2016 17:53
@drsherlock looking now
Thomas G.
@CaptainMurphey
Apr 27 2016 17:53
@revisualize holy crap im dumb thanks man, its always my typing
CamperBot
@camperbot
Apr 27 2016 17:53
captainmurphey sends brownie points to @revisualize :sparkles: :thumbsup: :sparkles:
:star: 998 | @revisualize | http://www.freecodecamp.com/revisualize
Joseph
@revisualize
Apr 27 2016 17:54
@eddyerburgh The computer just kicked my ass a few times.
Edd Yerburgh
@eddyerburgh
Apr 27 2016 17:54
@revisualize cool thanks :D
CamperBot
@camperbot
Apr 27 2016 17:54
eddyerburgh sends brownie points to @revisualize :sparkles: :thumbsup: :sparkles:
:star: 999 | @revisualize | http://www.freecodecamp.com/revisualize
Mark Howard
@iheartkode
Apr 27 2016 17:54
you must have something in your css that is overidding it, go through your code and make sure nothing else is changing it
Thomas G.
@CaptainMurphey
Apr 27 2016 17:55
@iheartkode got it thanks man
CamperBot
@camperbot
Apr 27 2016 17:55
:warning: captainmurphey already gave iheartkode points
captainmurphey sends brownie points to @iheartkode :sparkles: :thumbsup: :sparkles:
Mark Howard
@iheartkode
Apr 27 2016 17:55
@CaptainMurphey anytime :)
Thomas G.
@CaptainMurphey
Apr 27 2016 17:58
ok heres another question, does anyone know know how to put elementes i.e buttons, paragraphs, what have you, on top of an image with out using the image in css property background-image?
Edd Yerburgh
@eddyerburgh
Apr 27 2016 17:58
@CaptainMurphey you have control of the CSS?
Thomas G.
@CaptainMurphey
Apr 27 2016 17:59
@eddyerburgh what do you mean?
Edd Yerburgh
@eddyerburgh
Apr 27 2016 17:59
@CaptainMurphey can you put whatevr HTML you want
Jarrett Copeland
@CruDiablo
Apr 27 2016 17:59
is this the place if im having trouble on challenge 87?
Thomas G.
@CaptainMurphey
Apr 27 2016 18:00
well i was planning on putting a few buttons in and a linkbreak
Cezar Antônio
@cezarant
Apr 27 2016 18:01
Hi people..are u fine? I'm brazilian, sorry for my bad english
Edd Yerburgh
@eddyerburgh
Apr 27 2016 18:01
Cezar Antônio
@cezarant
Apr 27 2016 18:02
I need help with a simple question : is there any command to reload .Jade files?
Thomas G.
@CaptainMurphey
Apr 27 2016 18:02
@eddyerburgh ahhh awesome thanks man, i knew there was a way to do it
CamperBot
@camperbot
Apr 27 2016 18:02
captainmurphey sends brownie points to @eddyerburgh :sparkles: :thumbsup: :sparkles:
:star: 376 | @eddyerburgh | http://www.freecodecamp.com/eddyerburgh
Thomas G.
@CaptainMurphey
Apr 27 2016 18:04
@eddyerburgh is that the actual purpose of a span, every tutorial kind of glosses over what they are for.
Edd Yerburgh
@eddyerburgh
Apr 27 2016 18:05
@CaptainMurphey nah, there are better tags like fig and fig caption for that. I think spans mainly used for styling parts of a paragraph. so if you wanted a phrase to be a different color or something.
Thomas G.
@CaptainMurphey
Apr 27 2016 18:07
@eddyerburgh ahh i see so instead of span should I just do a <div and then add buttons inside, then add those span attributes you showed to the div, and the div attributs to a container for all of it?
Edd Yerburgh
@eddyerburgh
Apr 27 2016 18:07
@CaptainMurphey yep excactly
Thomas G.
@CaptainMurphey
Apr 27 2016 18:07
@eddyerburgh awesome thanks man
CamperBot
@camperbot
Apr 27 2016 18:07
captainmurphey sends brownie points to @eddyerburgh :sparkles: :thumbsup: :sparkles:
:warning: captainmurphey already gave eddyerburgh points
Edd Yerburgh
@eddyerburgh
Apr 27 2016 18:08
also to get it dead center, add transform: translate(-50%, -50%) to the absolutely positioned element
Thomas G.
@CaptainMurphey
Apr 27 2016 18:08
@eddyerburgh ok cool
kuldeep
@Guru89
Apr 27 2016 18:25
@eddyerburgh i won in hard option. actually there are certain pattern that computer playing with me. Good work.
Alican
@flowfelis
Apr 27 2016 18:27
This message was deleted
Edd Yerburgh
@eddyerburgh
Apr 27 2016 18:33
@Guru89 what were the moves please?
Alican
@flowfelis
Apr 27 2016 18:42

@jadoo1989 hey jadoo1989. I checked your code, noticed a small mistake: <div class="title-bar row"> was missing a closing tag.

K, I've done that, what's the best way to move the button row to the bottom of the content box and keep it there? css margin properties? So, To keep them at the bottom, I've done something like this. First, collect 2 buttons in a div id="bottom"; Secondly, in css, add "position: relative" to #content; thirdly, use position: absolute to keep those buttons down; Also its responsive like this. Check the css below:

bottom {

position: absolute;
bottom: 10px;
width: 100%;
}

gen-btn-ctr {

float: left;
margin-left: 20px;
width: 300px;
}

tweet-btn-ctr {

float: right;
margin-right: 20px;
width: 300px;
}

Islam Ibakaev
@dagman
Apr 27 2016 19:01
have added off-canvas menu to my portfolio. Check it out and give a feedback guys!
http://codepen.io/dagman/full/WwKrgX/
Alex Coder
@jkid314159
Apr 27 2016 19:07
hello world
CamperBot
@camperbot
Apr 27 2016 19:07

welcome to FreeCodeCamp @jkid314159!

Alican
@flowfelis
Apr 27 2016 19:11
@dagman It looks subtle. good job :+1:
Islam Ibakaev
@dagman
Apr 27 2016 19:14
@flowfelis :smile: thx
CamperBot
@camperbot
Apr 27 2016 19:14
dagman sends brownie points to @flowfelis :sparkles: :thumbsup: :sparkles:
:star: 284 | @flowfelis | http://www.freecodecamp.com/flowfelis
DG
@galatzan
Apr 27 2016 19:14
Hi everyone, maybe someone can help a rookie with a question: has anyone experienced issues with the geolocation api? I wrote a simple snippet to test it and seems to work fine on most browsers, but it doesn't work on Chrome http://codepen.io/galatzan/pen/mPxXQo?editors=1011
Brian
@sludge256
Apr 27 2016 19:16
@galatzan Read this FreeCodeCamp/FreeCodeCamp#7853
They discuss Chrome v50 at the bottom.
Mary
@mapruter
Apr 27 2016 19:24

I'm trying to vertically center text on a page and I found the following website: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

I used their code and for some reason, the text that I want to be vertically center (I build websites....) moves to the top of the page and no longer sits withing the parent div.

Does the parent div need to be set to a different position or I don't know. Halp!
http://codepen.io/marypruter/pen/BKdMLR?editors=1100

Ken Bellows
@kenbellows
Apr 27 2016 19:24
<opinion>
Regarding the "Override Styles in Subsequent CSS" lesson, which talks about how classes declared later in a style block will override classes declared earlier, this is a really bad way to override CSS. There are lots of reasons to reorganize your CSS code; you shouldn't be relying on the order that classes are defined to determine the behavior of your class. IIf you want to use all the properties of a class except one, you should either remove that property and put it in another class, use !important to override, or add a style="" attribute directly to the element in question.
</opinion>
@mapruter Do you want the text centered on the whole page, or just centered within its parent?
Mary
@mapruter
Apr 27 2016 19:27
@kenbellows just within the div with the classrow
Ken Bellows
@kenbellows
Apr 27 2016 19:34

@mapruter gotcha. In that case, you best bet (IMHO) would be something like this:

  1. One way or another, give that row position: relative; probably best to write a little class to do this, e.g.
    .relative-block {
     position: relative;
    }
    ...
    <div class="row relative-block">...</div>
  2. Change .vert-center to something like this:
    .vert-center {
     position: absolute;
     top: 50%;
    }
    The position: absolute rule will cause the position of the block and its contents to be relative to its parent's top left corner. (Technical note: actually, it will be relative to it nearest parent whose position is not position: static, which is the default; this is why we gave the row position: relative.)

That should do it; the only thing that might be weird is that by default the top of the .vert-center block will be 50% down from its parent's top, so your text will actually sit a little below center; you might want to mess around with the vertical-align CSS rule and see what you can find.

Islam Ibakaev
@dagman
Apr 27 2016 19:35
@mapruter is it what u were asking?http://codepen.io/dagman/pen/vGVOZG?editors=1100
Ken Bellows
@kenbellows
Apr 27 2016 19:36
@dagman what did you change?
Mary
@mapruter
Apr 27 2016 19:37
@dagman kind of. but when i use absolute position like that, the text completely disappears for mobile sized screens.
Rory Avant
@roryavant8
Apr 27 2016 19:39

Hey guys, I am working on the Twitch App, and am having a complication. When I click on the link which takes you to the users stream, I am getting this error message: Refused to display 'https://www.twitch.tv/ESL_SC2' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.

Is there a work around for this error?

Robert Uivarosi
@URobert
Apr 27 2016 19:47
@roryavant8 From what I recall, linking directly to streams from codepen won't work.
Rory Avant
@roryavant8
Apr 27 2016 19:48
They somehow have it working in the example pen though. @URobert
Robert Uivarosi
@URobert
Apr 27 2016 19:48
@roryavant8 the right stream is opened, but the stream won't play
in my project
I got SecurityError: Failed to set the 'domain' property on 'Document': Assignment is forbidden for sandboxed iframes.
@roryavant8 you get the same stuff going on in the example. The stream won;t play
@roryavant8 however. In order to test it, you can take the url from your redirect and paste it into a new tab. The stream should load there.
Mary
@mapruter
Apr 27 2016 19:55
@dagman @kenbellows i've decided just to scrap centering it. i can't figure it out and i think it looks find without it
Islam Ibakaev
@dagman
Apr 27 2016 19:56
@mapruter to be honest your html structure is a bit messy :worried: so u d better restructure it :smile:
Anthony Ho
@chiho13
Apr 27 2016 19:57
I've hit a wall with the weather app
Robert Uivarosi
@URobert
Apr 27 2016 19:58
@chiho13 break down the wall
@chiho13 what's the problem?
Mark Howard
@iheartkode
Apr 27 2016 19:58
Take a break and approach it with fresh eyes
Anthony Ho
@chiho13
Apr 27 2016 20:00
@URobert i don't know how to get the json data for the location - i found an api that helps http://ip-api.com/json
Lucas Frutig
@lucasfrutig
Apr 27 2016 20:00
hi guys, i want to post my code in code format, how do i do?
Mark Howard
@iheartkode
Apr 27 2016 20:01
help code
CamperBot
@camperbot
Apr 27 2016 20:01

:point_right: 10 steps to plan better so you can write less code [wiki]

Learn how to plan your future project!

Blog post written by BiancaMihai - GitHub / Twitter

An ounce of preparation is worth a pound of cure. That's true in medicine, and that's definitely true in software development.

Here's a structured 10-step workflow that will guide you through the app planning process, with the goal of saving you from writing a lot of unnecessary code.

Together, we'll plan out a simple "To-do" single-page web app. We'll also plan for an API backend for a future mobile app.

:pencil: read more about 10 steps to plan better so you can write less code on the FCC Wiki

Mark Howard
@iheartkode
Apr 27 2016 20:01
opps
explain code
CamperBot
@camperbot
Apr 27 2016 20:01

:point_right: 10 steps to plan better so you can write less code [wiki]

Learn how to plan your future project!

Blog post written by BiancaMihai - GitHub / Twitter

An ounce of preparation is worth a pound of cure. That's true in medicine, and that's definitely true in software development.

Here's a structured 10-step workflow that will guide you through the app planning process, with the goal of saving you from writing a lot of unnecessary code.

Together, we'll plan out a simple "To-do" single-page web app. We'll also plan for an API backend for a future mobile app.

:pencil: read more about 10 steps to plan better so you can write less code on the FCC Wiki

Mark Howard
@iheartkode
Apr 27 2016 20:01
I always forget this so:
Mary
@mapruter
Apr 27 2016 20:01
@dagman , what do you mean?
@dagman can you give an specific example about the messy html structure because i'm not sure what you mean.
Lucas Frutig
@lucasfrutig
Apr 27 2016 20:03

Guys, i'm in trouble in project Show Local Weather, my request doesn't work!
My code:

$(document).ready(function () {
  var getLocation = function () {
      if("geolocation" in navigator) {
        var lat, lon;
        navigator.geolocation.getCurrentPosition(function (pos) {
          console.log(pos);
          lat = pos.coords.latitude;
          lon = pos.coords.longitude;
          $.ajax({
            url:'http://api.openweathermap.org/data/2.5/weather?lat=' + lat + '&lon=' + lon + '&units=metric&APPID=6b9abf290d00205b395de237ae93535d',
            type:'GET',
            success: function (weather) {
              console.log(weather);
            }
          });
        });
      } else {
        $('#result').html('Seu navegador não suporta GeoLocation API');
      }
  };
  getLocation();
});

Anyone can help me, please?

Dustin
@Key-Banger
Apr 27 2016 20:09
I'm having an issue with scope. I basically want my timers to run to 0 and bounce back and forth. Could someone take look?
http://codepen.io/Key-Banger/pen/oxPavK?editors=0011
Islam Ibakaev
@dagman
Apr 27 2016 20:09
Mary
@mapruter
Apr 27 2016 20:13
@dagman when i shrink the screen for smaller mobile sizes, the text starts to move behind the image instead of stack on top
Islam Ibakaev
@dagman
Apr 27 2016 20:15
@mapruter check now
@mapruter added media query at 650px
Mary
@mapruter
Apr 27 2016 20:25
@dagman , that's really close to what i'd ideally want. but i don't want to lose the text. i'd rather it stack. i'm trying to play around with the media query. but so far no luck
thakns for helping me @dagman
Islam Ibakaev
@dagman
Apr 27 2016 20:28
@mapruter yw
Mary
@mapruter
Apr 27 2016 20:28
thanks * @dagman
CamperBot
@camperbot
Apr 27 2016 20:28
mapruter sends brownie points to @dagman :sparkles: :thumbsup: :sparkles:
:star: 446 | @dagman | http://www.freecodecamp.com/dagman
Brandon
@Daxo
Apr 27 2016 20:29
I’m getting some really weird issues using flexbox in codepen… It doesn’t seem to respond properly when I try to make it into columns http://codepen.io/apeiron/pen/GZYJvN?editors=1100
Anyone had this issue or am I just a total noob?
Islam Ibakaev
@dagman
Apr 27 2016 20:35
Mary
@mapruter
Apr 27 2016 20:36
oh yeah, that looks like it works perfectly. thanks so much @dagman
CamperBot
@camperbot
Apr 27 2016 20:36
mapruter sends brownie points to @dagman :sparkles: :thumbsup: :sparkles:
:warning: mapruter already gave dagman points
Mary
@mapruter
Apr 27 2016 20:36
i'm going to read over your code to see what you did.
Islam Ibakaev
@dagman
Apr 27 2016 20:37
@mapruter yw
@mapruter is it what u were asking?
alpox
@alpox
Apr 27 2016 20:38
@Daxo What exactly doesnt?
Mary
@mapruter
Apr 27 2016 20:38
yeah it is.
Brandon
@Daxo
Apr 27 2016 20:38
@alpox Well I’m trying to get it to look like this: https://philipwalton.github.io/solved-by-flexbox/demos/holy-grail/
basically Holy Grail layout, i.e. fluid center column with fixed edges
but its displaying rows not columns
and I can’t figure out why
alpox
@alpox
Apr 27 2016 20:41
@Daxo Looks fine for me since flex-direction: column does what it does.. it orders the element in a column instead of in a row
If you remove that line of css it orders them in a row like default (Maybe what you wanted?)
Mary
@mapruter
Apr 27 2016 20:42
@dagman , so you basically created them with an absolute position and floated the image right. and when the screen reaches a certain size, you removed those properties and added a top, right to keep the text centered. how the hell did you figure that all out?
and thanks man, i don't know how long it would've taken me to figure it out @dagman
CamperBot
@camperbot
Apr 27 2016 20:43
mapruter sends brownie points to @dagman :sparkles: :thumbsup: :sparkles:
:warning: mapruter already gave dagman points
Islam Ibakaev
@dagman
Apr 27 2016 20:44
@mapruter look what i figured out for my personal portfolio http://codepen.io/dagman/full/WwKrgX/
crazy stuff
alpox
@alpox
Apr 27 2016 20:45
@Daxo If you want to get familiar with the flexbox properties, i highly recommend to go through this:
http://flexboxfroggy.com/
Islam Ibakaev
@dagman
Apr 27 2016 20:46
@alpox interesting tutorial :smile:
Mary
@mapruter
Apr 27 2016 20:46
@dagman , is that what you submitted for it? i am barely functioning in js. i plan to upgrade my portfolio as i learn though.
alpox
@alpox
Apr 27 2016 20:46
@dagman I still think the text in the second part is muuuch too big :D
But the rest looks really cool!
Islam Ibakaev
@dagman
Apr 27 2016 20:47
@alpox yep thinking about it :smile: added off-canvas menu
@mapruter yep fcc task
Mary
@mapruter
Apr 27 2016 20:48
fcc?
alpox
@alpox
Apr 27 2016 20:48
@dagman I think i have to roll my scrollwheel around about 10 times until i've read the whole text :D or maybe 20 times?
@mapruter Free Code Camp
Islam Ibakaev
@dagman
Apr 27 2016 20:50
@alpox it is not done yet(changes will be added in future :smile: )
i also find this tutorial interesting - http://www.flexboxdefense.com/
Tulio Natale
@tuliodnw
Apr 27 2016 20:51
@jadoo1989 the page doesnt work on tablet and phones
alpox
@alpox
Apr 27 2016 20:53
@dagman Also funny thing :D
Mary
@mapruter
Apr 27 2016 20:53
@dagman so the only change i had to do to the last code you sent was wrapping the jumbotron row at the top in another div and adding it to the selector so the jumbotron in the footer didn't mess up
Islam Ibakaev
@dagman
Apr 27 2016 20:53
@alpox i was thinking about elegant solutions for bonfires so i created a repo for it check it out https://github.com/dagman/Elegant-Bonfires/wiki
@mapruter i just put your text and image in one .col-xs-12 div
Brandon
@Daxo
Apr 27 2016 20:55
@alpox Thanks!
CamperBot
@camperbot
Apr 27 2016 20:55
:star: 617 | @alpox | http://www.freecodecamp.com/alpox
daxo sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
Brandon
@Daxo
Apr 27 2016 20:56
@alpox I’ve been looking fora good resource
Islam Ibakaev
@dagman
Apr 27 2016 20:56
@Daxo check this out too http://www.flexboxdefense.com/
@mapruter cos u had them separate in .col-sm-6 div every
Mary
@mapruter
Apr 27 2016 20:57
ah i didn't notice that. is there an advantage to doing that then to keeping it in .col-sm-6 ? bc it seems to work keeping itin there. http://codepen.io/marypruter/pen/BKdMLR?editors=1100
Islam Ibakaev
@dagman
Apr 27 2016 20:58
@mapruter yep this works too
@mapruter there is more than one aproach exists :smile:
Mary
@mapruter
Apr 27 2016 20:59
cool. just wanted to make sure there wasn't a reason one way would work better over another or if that's just the route you took. :)
Islam Ibakaev
@dagman
Apr 27 2016 21:01
@mapruter u can do either way :smile:
alpox
@alpox
Apr 27 2016 21:10
@dagman Nice :-)

@dagman Seek and destroy:

var destroyer=(a,...b)=>a.filter(i=>!b.includes(i));

:-)

Islam Ibakaev
@dagman
Apr 27 2016 21:12
@alpox es6
@alpox i used just old plain javascript :smile:
alpox
@alpox
Apr 27 2016 21:14
@dagman Ah okay :D
Islam Ibakaev
@dagman
Apr 27 2016 21:14
Achilleas Papakonstantinou
@AchiPapakon
Apr 27 2016 21:15
Hi, can someone help me center my button? :/
http://codepen.io/AchiPapakon/pen/wGEmpO
Mary
@mapruter
Apr 27 2016 21:18
for my portfolio, if i make a form, should it be functional? because i'm not sure how to actually create a functioning form
Clark Arnold
@clarkarnold
Apr 27 2016 21:21
Hey all, I am having some trouble with my simon game.. anyone care to take a look?
I can't figure out why when you click it registers more than one time
Achilleas Papakonstantinou
@AchiPapakon
Apr 27 2016 21:23
@clarkarnold when you click start?
Clark Arnold
@clarkarnold
Apr 27 2016 21:24
@AchiPapakon when you click on one of the colors during the gameplay..
click start, it will play sequence of one, then when you click the same tile it registers as 2 clicks and things get out of control
alpox
@alpox
Apr 27 2016 21:26
@dagman Not bad, onliner... but its still too much with recursion i think :D that can go easier
@dagman
function chunk(arr, size) {
  var narr = [];
  while(arr.length) narr.push(arr.splice(0, size));
  return narr;
}
Achilleas Papakonstantinou
@AchiPapakon
Apr 27 2016 21:28
@clarkarnold you haven't written any comments in your code which makes it very time consuming to read
alpox
@alpox
Apr 27 2016 21:31
@AchiPapakon
.container
    text-align: center
Clark Arnold
@clarkarnold
Apr 27 2016 21:31
@AchiPapakon I guess that's something I need to work on.. I can go write some in and try again later.
alpox
@alpox
Apr 27 2016 21:33

@clarkarnold

function userTurn() {
   $(".n").on("click", function() {
    //console.log(this.dataset.tile);

    var selection = parseInt(this.dataset.tile);
    console.log(selection);
    userArr.push(selection);
      $(this).on("mousedown", function() {
        $(this).addClass('lit');
      });
      $(this).on("mouseup", function() {
        $(this).removeClass("lit");
      });

That part gives you serious problems!
If you add click events each time on userTurn(); these event handlers stack! If you then click on a button again there are 2 then 3 then 4 etc. event calls on your stack

@clarkarnold I can read your code without many problems yet :-) its not that complicated yet
Clark Arnold
@clarkarnold
Apr 27 2016 21:38
@alpox Is there a way to fix that?
alpox
@alpox
Apr 27 2016 21:43
@clarkarnold Sure... but i cannot tell you an easy and fast solution. You have to declare all click events only once. Go sure they are not declared in any code which gets run multiple times.
Clark Arnold
@clarkarnold
Apr 27 2016 21:44
@alpox Thanks for the help!
CamperBot
@camperbot
Apr 27 2016 21:44
clarkarnold sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star: 619 | @alpox | http://www.freecodecamp.com/alpox
alpox
@alpox
Apr 27 2016 21:44
@clarkarnold Np
Patrick
@pwcsquared
Apr 27 2016 21:46
hey guys, I need some help debugging my tic tac toe game
It's not finished, but there's an issue with the winMove function that I can't figure out
I pass the function the list of playerMoves which it is supposed to compare to winConditions to figure out where the computer needs to play next to block a player win
but it doesn't always block correctly, and I think it has something to do with the loops not working the way I think they are, or some variables sticking around
to replicate, play as X and go center, center left, and center bottom
the computer should block at the top but instead it plays the bottom left corner.
I added a console.log that shows where it think it should block
Achilleas Papakonstantinou
@AchiPapakon
Apr 27 2016 21:52
@alpox thanks!
CamperBot
@camperbot
Apr 27 2016 21:52
achipapakon sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star: 620 | @alpox | http://www.freecodecamp.com/alpox
alpox
@alpox
Apr 27 2016 21:52
@pwcsquared var tempArr = winConditions[i]; --> var tempArr = winConditions[i].slice(); Line 36
Patrick
@pwcsquared
Apr 27 2016 21:53
@alpox WOW how did that fix it? Amazing!
give this man some brownie points
@alpox thanks!
CamperBot
@camperbot
Apr 27 2016 21:53
pwcsquared sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star: 621 | @alpox | http://www.freecodecamp.com/alpox
alpox
@alpox
Apr 27 2016 21:53
@pwcsquared :D If you set var tempArr = winConditions[i];
tempArr is not really temporary
its the actual array in memory
if you change it (.splice) It changes the actual array in winConditions
Patrick
@pwcsquared
Apr 27 2016 21:54
ah so it was altering the winConditions array
alpox
@alpox
Apr 27 2016 21:54
yeah
with .slice() you can create a real copy
Patrick
@pwcsquared
Apr 27 2016 21:55
as you guessed by the variable name, that's what I meant to do all along lol
alpox
@alpox
Apr 27 2016 21:55
Yup :-) i would have had a hard time without that variable name ;-) thats how you set them :thumbsup:
Clark Arnold
@clarkarnold
Apr 27 2016 22:14
@alpox Here's what i got now..
I think I have everything working except the "hard mode"
alpox
@alpox
Apr 27 2016 22:27
@clarkarnold Good :-) but you should maybe not use on/off all time. I think it would be better to only set a boolean variable or something to activated/deactivated and test for it in the click function:
$(".n").on("click", function() {
  if(!activated) return;
  userTurn():
});
Something like that

@clarkarnold

$(this).on("mousedown", function() {
        $(this).addClass('lit');
      });
      $(this).on("mouseup", function() {
        $(this).removeClass("lit");
      });

These are still not good. You set them still each time userTurn() is called. You just don't notice much that there is a big stack of them because .addClass cannot add multiple time.

Clark Arnold
@clarkarnold
Apr 27 2016 22:32
Ok thanks again for the help I will look into that!
alpox
@alpox
Apr 27 2016 22:32
@pwcsquared I broke your tic tac toe :-/ choose X and set:
  1. Middle
  2. Right bottom
  3. Middle left
  4. Right top
    And the AI has no idea what to do anymore...
@clarkarnold You're welcome :-)
Alican
@flowfelis
Apr 27 2016 22:44

Hello guys, can someone help me with Wikipeadia Viewer.
I'm trying to pull api from Wikipedia, but there is an error regarding "Access-Control-Allow-Origin"
I see error in console.log like this:

XMLHttpRequest cannot load https://en.wikipedia.org/w/api.php?action=query&generator=search&gsrprop=sn…=max&exintro=true&exsentences=1&explaintext=true&format=json&gsrsearch=ads. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://s.codepen.io' is therefore not allowed access.

I just wanna write raw json api data with json.stringify
http://codepen.io/flowfelis/pen/mPGyBd?editors=1010

alpox
@alpox
Apr 27 2016 22:49
@flowfelis you dont need json.stringify.. i dont know what for ^^
Add: callback=? To your query string
pgjones72
@pgjones72
Apr 27 2016 22:59
Hello peeps. I'm struggling with the weather report zipline thingy. Particularly, calling the weather API (5 day forecast) and dispersing it between 5 "day" divs. I know I'm not even close, but could I get a pointer or two?
This message was deleted
OK. forget the posted code. No use.
This is a better indication of my current position.
Anthony Ho
@chiho13
Apr 27 2016 23:06
i find developing locally is easier to debug
Islam Ibakaev
@dagman
Apr 27 2016 23:08
why when i scroll past skills section the page kind of scrolls hard like getting stuck?
http://codepen.io/dagman/full/WwKrgX/
i am having difficulty to set timeout.pls help..