These are chat archives for FreeCodeCamp/HelpFrontEnd

5th
Oct 2016
Evan W
@Dirtier
Oct 05 2016 00:00
Wdu mean thats all I do is target it with css lol, I wouldn't use this in-line style tags
they kind of make everything messy
So normally I use % or vw (view window)
depends on the situation honestly
DoYouLoveGames
@DoYouLoveGames
Oct 05 2016 00:00
so <div class="container"> is my white background thing right?
Edgar Gil
@EdgarrGil
Oct 05 2016 00:01
Yes
DoYouLoveGames
@DoYouLoveGames
Oct 05 2016 00:01
the <div class="row"> just makes it line up?
Edgar Gil
@EdgarrGil
Oct 05 2016 00:02
Yes
DoYouLoveGames
@DoYouLoveGames
Oct 05 2016 00:02
not sure what the <div class="col-xs-6> does though
Edgar Gil
@EdgarrGil
Oct 05 2016 00:02
Is simple
Evan W
@Dirtier
Oct 05 2016 00:03
thats bootstrap
that means it takes up 6 columns
Edgar Gil
@EdgarrGil
Oct 05 2016 00:03
Col= column, xs= extra small, 6 = take 6 space out of 12
Evan W
@Dirtier
Oct 05 2016 00:03
out of 12
DoYouLoveGames
@DoYouLoveGames
Oct 05 2016 00:03
so its always 12
Edgar Gil
@EdgarrGil
Oct 05 2016 00:03
Bootstrap is build on a 12 column
Evan W
@Dirtier
Oct 05 2016 00:03
dont worry about that until you learn bootstrap
Edgar Gil
@EdgarrGil
Oct 05 2016 00:03
Yes
DoYouLoveGames
@DoYouLoveGames
Oct 05 2016 00:03
6 is just half
Edgar Gil
@EdgarrGil
Oct 05 2016 00:03
Yup
6 is half of 12
DoYouLoveGames
@DoYouLoveGames
Oct 05 2016 00:03
so if i wanted 3 images id do <div class=col-xs-4>
Edgar Gil
@EdgarrGil
Oct 05 2016 00:03
So you using half of the container
Yes!
Evan W
@Dirtier
Oct 05 2016 00:04
Thats why its so easy to position with bootstrap. Each parent element has 12 columns
Edgar Gil
@EdgarrGil
Oct 05 2016 00:04
You got it @DoYouLoveGames
Evan W
@Dirtier
Oct 05 2016 00:04
So 6 columns of the body being max width is 6 columns, 6 columns of a div that's half the width, is roughly like actually 3 columns
DoYouLoveGames
@DoYouLoveGames
Oct 05 2016 00:04
and to think ive been trying to position it with "float-right" for hours -_-
Edgar Gil
@EdgarrGil
Oct 05 2016 00:04
Lmao.
We all been there
DoYouLoveGames
@DoYouLoveGames
Oct 05 2016 00:05
okay well thank you @dirtier and @edgarrgil
CamperBot
@camperbot
Oct 05 2016 00:05
:warning: could not find receiver for edgarrgil
:cookie: 245 | @dirtier |http://www.freecodecamp.com/dirtier
doyoulovegames sends brownie points to @dirtier and @edgarrgil :sparkles: :thumbsup: :sparkles:
DoYouLoveGames
@DoYouLoveGames
Oct 05 2016 00:06
i guess ill go learn bootstrap on w3 or codeacademy before i try and finish this thing
Evan W
@Dirtier
Oct 05 2016 00:08
Omg ok so I'm going to just delete all this shit and just do that one part lol
and then you can insert that into your project
Btw why do you have header
wrapped around your body
lo
crwne1
@crwne1
Oct 05 2016 00:09
How do i center an image in css?
Evan W
@Dirtier
Oct 05 2016 00:11
if its in a container with a set width
margin-left:auto; margin-right:auto;
@DoYouLoveGames Ok got it shit
lol that was annoying
see how it takes 12 times as long, and it wont work nearly as well
@DoYouLoveGames you there
Now copy/paste everything including main and put that into your body. Then copy/paste the CSS
And delete the contents of yours
crwne1
@crwne1
Oct 05 2016 00:28
@Dirtier thanks
CamperBot
@camperbot
Oct 05 2016 00:28
crwne1 sends brownie points to @dirtier :sparkles: :thumbsup: :sparkles:
:cookie: 246 | @dirtier |http://www.freecodecamp.com/dirtier
Evan W
@Dirtier
Oct 05 2016 00:31
@DoYouLoveGames hellloooo
Aaron Bell
@awb715
Oct 05 2016 00:34
is anyone familiar with changing bootstrap grids
Alex
@Sevohan
Oct 05 2016 00:35
Hey everybody I'm working on my Local Weather project and I'm trying to make sure that my geolocation will work so I'm trying to run a test case but it's not working. Could someone explain what I'm doing wrong here? http://codepen.io/Sevohan/pen/QKNQLw
Greg Duncan
@GregatGit
Oct 05 2016 00:38
@Sevohan It looks like you haven't called your functions
Evan W
@Dirtier
Oct 05 2016 00:39
@awb715 Wdu mean
Oh like modifying the stylesheets? Nahh not me
Greg Duncan
@GregatGit
Oct 05 2016 00:39
@awb715 yes - what is your issue
Evan W
@Dirtier
Oct 05 2016 00:40
@Sevohan Just use geoplugin
Trust me
It's really easy to use
It works off of IP and built in GPS if on mobile, so they dont have to give you permission
Alex
@Sevohan
Oct 05 2016 00:40
@GregatGit That would explain why I can't get it to do anything
Evan W
@Dirtier
Oct 05 2016 00:41
Or that
I would still recommend using geoplugin ^.^
It gives you lat long city state country like everything
And you dont need to worry about browsers supporting it
Aaron Bell
@awb715
Oct 05 2016 00:47
@GregatGit http://codepen.io/Aaron-w-Bell/pen/kkxOKW why is in mobile size the first row purple, when in the css i have the col-xs-12 as blue @GregatGit
im just doing an experiment @GregatGit
Evan W
@Dirtier
Oct 05 2016 00:47
@awb715 Oh that isn't really changing bootstrap
you're just overriding it
@awb715 its bc you have that col as having col-md-4 as its first class
so it's taking that one's CSS properties
.col-md-4 {
  background-color: purple;
  height: 100px;
}
Aaron Bell
@awb715
Oct 05 2016 00:50
but shouldnt it detect that its now a larger screen so it changes
Evan W
@Dirtier
Oct 05 2016 00:50
O.o I don't think bootstrap will change classes based on screen size, it just dynamically changes the columns of that class
Greg Duncan
@GregatGit
Oct 05 2016 00:50
@awb715 the css looks at what you are tageting and goes by that
Evan W
@Dirtier
Oct 05 2016 00:51
I dont even think you can have two bootstrap classes conflicting like that
So it just reads the first and ignores the second as far as the columns go
Aaron Bell
@awb715
Oct 05 2016 00:51
ahh okay
my idea was as the size changed, the colors changed as the colums were effected
Evan W
@Dirtier
Oct 05 2016 00:53
actually hold on when I went to a bigger screen it did change to the other one, but only as far as size goes
Aaron Bell
@awb715
Oct 05 2016 00:53
yea the size changes
Evan W
@Dirtier
Oct 05 2016 00:53
maybe that part changes dynamically but it still would inherit the rest of the CSS properties from the first one
Yea I have no idea whats going on here, bc it only did that once
lol the rest of the time it went full screen
Aaron Bell
@awb715
Oct 05 2016 00:54
for me the size is always changing
im just getting the screen to change
trying to atleast
Evan W
@Dirtier
Oct 05 2016 00:55
weird
Why do you even need it to do this lol
Aaron Bell
@awb715
Oct 05 2016 00:55
im literally just testing the concept haha @Dirtier
trying to practice the bootstrap grid
Evan W
@Dirtier
Oct 05 2016 00:55
even if you just use .col-xs-12 it will still take up the entire screen on large monitors lol
Aaron Bell
@awb715
Oct 05 2016 00:55
why? @Dirtier
Evan W
@Dirtier
Oct 05 2016 00:55
it all depends on the width of the parent element
Bc you're using all 12 columns
I'm honestly not even sure what the size in the .col-size-12 is for, bc it will work the same no matter what if you use them right
Aaron Bell
@awb715
Oct 05 2016 00:56
dont you think it would be cool if you changed the window size and then it was all changing colors as the window changes
Evan W
@Dirtier
Oct 05 2016 00:57
Lol I guess yea, but I think you can use @media for that or something
Aaron Bell
@awb715
Oct 05 2016 00:57
yea someone in a other chat told me
idk what media even is
Evan W
@Dirtier
Oct 05 2016 00:57
All I was saying is that if you use the grid right, it will be completely responsive to any screen size no matter what size you use in the .col
@media is a way to change CSS properties based on the view window
like this
@media screen and (min-width: 480px) {
    body {
        background-color: lightgreen;
    }
}
Aaron Bell
@awb715
Oct 05 2016 00:59
okay
hmm
Evan W
@Dirtier
Oct 05 2016 00:59
heres the definition The @media rule is used to define different style rules for different media types/devices.
Aaron Bell
@awb715
Oct 05 2016 00:59
so im confused for the purpose of the grid then
Evan W
@Dirtier
Oct 05 2016 00:59
The grid is for a responsive design as far as positioning and size goes
like here look at one of my codepens
and change your screen size
Aaron Bell
@awb715
Oct 05 2016 01:00
Using a single set of .col-md-* grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns in any .row.
Evan W
@Dirtier
Oct 05 2016 01:00
Yea I mean thats what normal grids do lol
if you shrink the screen enough the stuff will stack on top
I dont think you even have to nest it
the grid is just perfect for responsive design
if you make a div like .col-xs-8, no matter what screen its on
it will always take up 8 columns
Aaron Bell
@awb715
Oct 05 2016 01:02
what if i want to put a picture that takes up 8 columns and text next to it that takes up 4 columns
Evan W
@Dirtier
Oct 05 2016 01:02
then it will always look that way
no matter the screen size
it will just shrink and scale down
Aaron Bell
@awb715
Oct 05 2016 01:03
but when its a iphone, have the text under the picture and when its a computer next to the picture
so columns are relative to the screen size
Evan W
@Dirtier
Oct 05 2016 01:03
So you would wrap the image in a div class='col-xs-8'> and then set the image width to auto
Ahhh, well you could set a min width on the image
so that when its scaled down to a certain point
it wont shrink anymore
then the text will be forced under it
Idk I'm by no means a wizard at bootstrap, but I can make responsive designs with it to where everything will look the same on all screens
Aaron Bell
@awb715
Oct 05 2016 01:05
actually doing this is still kinda over my head
but it was a concept i wanted to test
someone just made this
Evan W
@Dirtier
Oct 05 2016 01:05
these days it doesnt really matter, screens are pretty big
Aaron Bell
@awb715
Oct 05 2016 01:06
i see
so for thatidea you just use media
Evan W
@Dirtier
Oct 05 2016 01:06
Lol Im getting the opposite of what you want in that codepen
oh nvm you wanted it smaller on a big screen
This sounds like a great way to use the codepen cross-browser tester
grantknaver
@grantknaver
Oct 05 2016 01:08
anyone out there know how to select make a placeholder disappear once you click on a input
?
Evan W
@Dirtier
Oct 05 2016 01:08
Mess around with it and see how it changes on different phones and stuff
@grantknaver onfocus="this.placeholder = ''
put that in the <input tag after the placeholder = 'Search...' or w/e
Aaron Bell
@awb715
Oct 05 2016 01:10
@Dirtier the concept was cool but i guess you neeed media
Evan W
@Dirtier
Oct 05 2016 01:11
Yea I wouldnt even worry about it though lol honestly. The grid system itself should be enough
As long as you have the text in a responsive size like
Thomas Mullen
@t-mullen
Oct 05 2016 01:11
Hey anyone ever build something with CodeMirror?
grantknaver
@grantknaver
Oct 05 2016 01:11
@Dirtier you have any idea how to do that with javascript
Evan W
@Dirtier
Oct 05 2016 01:11
@awb715 w/ vw
grantknaver
@grantknaver
Oct 05 2016 01:12
inline will work though sure
Thomas Mullen
@t-mullen
Oct 05 2016 01:12
I'm getting a lot of cursor jump when I edit the doc contents through javascript.
Evan W
@Dirtier
Oct 05 2016 01:12
@grantknaver Yea you could just do it with jquery if you really wanted to
grantknaver
@grantknaver
Oct 05 2016 01:13
how would the selector look in jquery
Evan W
@Dirtier
Oct 05 2016 01:13
@awb715 But what I was saying is that if you have the text set to use vw on font-size, and you shrink the screen down small enough, the font will want to stay big enough to read, but the design of text on left and pic on right wont allow that
@awb715 so it will automatically force the text underneath
@grantknaver $('input).('on',focus(function(){ })
then this.placeholder = ''
grantknaver
@grantknaver
Oct 05 2016 01:15
ok maybe I can piece the javascript together for that thanks
crwne1
@crwne1
Oct 05 2016 01:16
can i get social media icons?
Evan W
@Dirtier
Oct 05 2016 01:16
@grantknaver I would personally just put something like that in-line or do it with CSS
Evan W
@Dirtier
Oct 05 2016 01:16
@crwne1 yea google font-awesome
Aaron Bell
@awb715
Oct 05 2016 01:16
im trying to apply that to this
crwne1
@crwne1
Oct 05 2016 01:16
@Dirtier thanks
CamperBot
@camperbot
Oct 05 2016 01:16
crwne1 sends brownie points to @dirtier :sparkles: :thumbsup: :sparkles:
:warning: crwne1 already gave dirtier points
Evan W
@Dirtier
Oct 05 2016 01:16
@grantknaver You can do it with CSS like this
grantknaver
@grantknaver
Oct 05 2016 01:17
@Dirtier this is what I have for javascript var contactFields = document.getElementsByTagName("input");
contactFields.onfocus = function() {
this.placeholder.style.display = "none";
}
Evan W
@Dirtier
Oct 05 2016 01:17
input[type='text']::-webkit-input-placeholder { }
you would have to set that for all browsers though
grantknaver
@grantknaver
Oct 05 2016 01:19
my java doesnt work you have any ideas?
Evan W
@Dirtier
Oct 05 2016 01:19
are you not using jquery?
grantknaver
@grantknaver
Oct 05 2016 01:20
ya I am try to use javascript solely. At least until I am damn good
Evan W
@Dirtier
Oct 05 2016 01:20
@grantknaver Ok try this one sec
grantknaver
@grantknaver
Oct 05 2016 01:22
Thanks. :) Ya I figured I would have to get that setup for all browsers. With that CSS would I just have to add an :onblur prior to { }
crwne1
@crwne1
Oct 05 2016 01:23
how do i make an animation start when i hover
Evan W
@Dirtier
Oct 05 2016 01:24
@grantknaver hmmm try instead of using that var contactfields, just use the document.getelements statement
@grantknaver Id have to see your pen to mess with it
@crwne1 are you using jquery
here it is
Evan W
@Dirtier
Oct 05 2016 01:26
@grantknaver Oh dude way easier lol
Aaron Bell
@awb715
Oct 05 2016 01:26
is there a way to keep a image a minimum size
when that gets smaller the image almost is non-existent
grantknaver
@grantknaver
Oct 05 2016 01:26
awesome always up for easier lol]
Evan W
@Dirtier
Oct 05 2016 01:26
@grantknaver on those inputs just put placeholder=''
@grantknaver how did you even make those placeholders?
@grantknaver If you set them like that then when you click and start typing it will auto clear the placeholder text
@grantknaver thats how you're supposed to set placeholders now anyway lol
I cant find how you even set the placeholder without doing that
grantknaver
@grantknaver
Oct 05 2016 01:28
OMG wow lets pretend me not ask that
hahahahahaha
Evan W
@Dirtier
Oct 05 2016 01:29
hahahaha sorry man I thought you had already done that and just wanted it to disappear faster or something
grantknaver
@grantknaver
Oct 05 2016 01:30
Na I haven't added on in so long that I forgot that is what there default state is.
Evan W
@Dirtier
Oct 05 2016 01:31
Lol :P I can't remember if clicking on it gets rid of the placeholder or if you actually have to start typing, so I thought you wanted it when you click instead of start typing
How did you even set those though? With their name properties or something?
Oh you probably just put some text in them to start with huh
grantknaver
@grantknaver
Oct 05 2016 01:32
Went through a value attribute lol
Evan W
@Dirtier
Oct 05 2016 01:33
Ahhhh ok I see it now
crwne1
@crwne1
Oct 05 2016 01:34
@Dirtier i am
Evan W
@Dirtier
Oct 05 2016 01:35
@crwne1 Ok what are you trying to make a hover on? what element
@crwne1 You can do it either in CSS or using jquery or javascript
@crwne1 I would do it in css

element:hover {

#myDiv:hover{
   opacity: .8;
}
marclennis
@marclennis
Oct 05 2016 02:06
progress..hahahahaha
is the picture is that big or i could just make is even smaller?
Evan W
@Dirtier
Oct 05 2016 02:22
is the picture what?
Aaron Bell
@awb715
Oct 05 2016 02:22
@awb715
has anyone started their portfolio page
i dont get how its possible to gret something even close to that quality
Evan W
@Dirtier
Oct 05 2016 02:23
Ehh I personally didn't even really like theres
theirs
Aaron Bell
@awb715
Oct 05 2016 02:24
thats gootta be really hard to make, the tasks before that dont even come close to the stuff done in the sample
Evan W
@Dirtier
Oct 05 2016 02:26
Honestly he only used basic html/css and jquery
the hardest thing he did was to detect the browser size and change the portfolio pics to be stacked if you were on a smaller screen
His menu at the top is just position:fixed so it scrolls with you, and the links change bc they're # links that just link to the related divs
marclennis
@marclennis
Oct 05 2016 02:28
i dont have any background on html
Evan W
@Dirtier
Oct 05 2016 02:29
It just looks more complicated than it is bc he wrote his html w/ Jade and used PostCSS for his CSS
@awb715 But you don't have to make it as good as he did, it just needs to be functionally similar to it
marclennis
@marclennis
Oct 05 2016 02:30
just make something you've learn in here i guess
Aaron Bell
@awb715
Oct 05 2016 02:31
i have no idea to do any of that stuff and id rather not look at his actual code
i may go back and supplement some of what i learned in codeacademy
Evan W
@Dirtier
Oct 05 2016 02:31
Have you done any Bootstrap exercises yet?
Aaron Bell
@awb715
Oct 05 2016 02:31
like from the beginning?
Evan W
@Dirtier
Oct 05 2016 02:32
Yea like how well do you know bootstrap
Aaron Bell
@awb715
Oct 05 2016 02:32
ehh
not too well i mean this is my first week coding ever
Evan W
@Dirtier
Oct 05 2016 02:32
Ahhh
if you know some CSS, learn bootstrap and know basic jquery you can make that easily
Aaron Bell
@awb715
Oct 05 2016 02:33
yea maybe ill do bootstrap and jquery in codeacademy
Evan W
@Dirtier
Oct 05 2016 02:33
good idea
they do it a lot better than FCC imo
If I was you, I would do that and then try to re-create his portfolio page
and try to make it like almost exactly the same
then you'll learn how to do the stuff he did, and then you can make your own
Aaron Bell
@awb715
Oct 05 2016 02:34
i dont wanna look at his code and just copy it
Evan W
@Dirtier
Oct 05 2016 02:34
Dont do that
Aaron Bell
@awb715
Oct 05 2016 02:35
yea
Evan W
@Dirtier
Oct 05 2016 02:35
I'm saying go learn that stuff, then look at his page not the code
Aaron Bell
@awb715
Oct 05 2016 02:35
yea okay
Evan W
@Dirtier
Oct 05 2016 02:35
and try to re-create it with the code you learned
Aaron Bell
@awb715
Oct 05 2016 02:35
okay
Evan W
@Dirtier
Oct 05 2016 02:35
reverse engineering something like that will help you learn a ton
Aaron Bell
@awb715
Oct 05 2016 02:35
@Dirtier i built this on my own without looking at the example at all
@Dirtier then i built this one https://codepen.io/Aaron-w-Bell/pen/QKOJjp and it was more bootstrap based and less CSS
Evan W
@Dirtier
Oct 05 2016 02:36
Not bad lol see you are already using some bootstrap. What he made is really more about time than difficulty
Aaron Bell
@awb715
Oct 05 2016 02:37
i just ewanna get really good at this stufff
its prob so fun to be reallygood at it
Evan W
@Dirtier
Oct 05 2016 02:37
If you just look at this portfolio page, and you break it down into smaller pieces rather than looking at it as a whole, then you'll see its a lot easier than it looks
his*
Aaron Bell
@awb715
Oct 05 2016 02:38
okay
yea its cool how those squares go vertical when the screen is small
Evan W
@Dirtier
Oct 05 2016 02:38
:P he honestly made that part a lot harder than he had to lol
marclennis
@marclennis
Oct 05 2016 02:38
your tribute is much better than mine..
Evan W
@Dirtier
Oct 05 2016 02:38
With bootstrap you can do that part a lot easier
Aaron Bell
@awb715
Oct 05 2016 02:39
which one do you like @marclennis i did 2 haha
Evan W
@Dirtier
Oct 05 2016 02:39
He wrote it in like 40 lines of javascript, when you could do it in 2 lines with bootstrap
Aaron Bell
@awb715
Oct 05 2016 02:39
thats crazy
how can you do that in 2 lines of bootstrap
Evan W
@Dirtier
Oct 05 2016 02:39
setting static widths on images in a responsive width grid
once its shrank, the images will align like that
Aaron Bell
@awb715
Oct 05 2016 02:40
i needa do more exercises of that stuff specially on code academy
bootstrap, responsive fitting, margins, image sizing etc
marclennis
@marclennis
Oct 05 2016 02:40
@awb715 the 2nd one..its simple and classy..hahahaha
Aaron Bell
@awb715
Oct 05 2016 02:41
thanks @marclennis
CamperBot
@camperbot
Oct 05 2016 02:41
awb715 sends brownie points to @marclennis :sparkles: :thumbsup: :sparkles:
:cookie: 116 | @marclennis |http://www.freecodecamp.com/marclennis
marclennis
@marclennis
Oct 05 2016 02:41
i like to know how to put those text in a box
Aaron Bell
@awb715
Oct 05 2016 02:42
columns also @Dirtier
which text @marclennis
marclennis
@marclennis
Oct 05 2016 02:44
wait
this is what i research from the net how to put box your text
Alex
@Sevohan
Oct 05 2016 02:46
Hey Guys I'm having some trouble with figuring out my geolocation on my weather project. Does anyone know if I need to put anything into my getLocation() function declaration?
Aaron Bell
@awb715
Oct 05 2016 02:47
to create a box @marclennis create a class that has a background-color:
marclennis
@marclennis
Oct 05 2016 02:48
how?..hahahah
Aaron Bell
@awb715
Oct 05 2016 02:48
look at my example and the box in css
in this one @marclennis
go to css and look at the characteristics of .box
JD Tadlock
@jdtdesigns
Oct 05 2016 02:51
@Sevohan The navigator is now deprecated on chrome on http. You can use an ip location api like http://ip-api.com/json for chrome and the navigator for other browsers. Start using the browser console and you will see errors. ;)
marclennis
@marclennis
Oct 05 2016 02:57
@awb715 center-block?
Aaron Bell
@awb715
Oct 05 2016 02:57
no
look for .box
Dylan
@dhcodes
Oct 05 2016 02:57
@Sevohan if you change your URL in the address bar to https://yourcodepen, you'll see that your geo is working
Aaron Bell
@awb715
Oct 05 2016 02:57
see that?
in the css tab
@marclennis
Dylan
@dhcodes
Oct 05 2016 02:58
@Sevohan it's just that the openweather api won't work with https:// so if you stick with the https:// location for chrome (instead of IP location) you'll need to use a different weather service like forecast.io or wunderground api
Alex
@Sevohan
Oct 05 2016 03:02
@dhcodes Okay so I should pull the info from http://ip-api.com/json like @jdtdesigns said. If I understand correctly I will need to check for what browser the user is on and use http://ip-api.com/json if they are on chrome but others should work with what I have now?
Dylan
@dhcodes
Oct 05 2016 03:02
@Sevohan if you want to use openweather
if you want to use a different service, you can continue as is
you don't have to use openweather
JD Tadlock
@jdtdesigns
Oct 05 2016 03:03
@Sevohan Correct. It's easy to check for chrome.
if ( window.chrome )  // yep it's chrome
Alex
@Sevohan
Oct 05 2016 03:04
Excellent! Thank you @dhcodes and @jdtdesigns !
CamperBot
@camperbot
Oct 05 2016 03:04
sevohan sends brownie points to @dhcodes and @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 655 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
:star2: 1448 | @dhcodes |http://www.freecodecamp.com/dhcodes
Evan W
@Dirtier
Oct 05 2016 03:22
@Sevohan I told you lol GEOPLUGIN
marclennis
@marclennis
Oct 05 2016 03:28
hahahahaha im lost how to put box into text
Evan W
@Dirtier
Oct 05 2016 03:30
What are you trying to do?
marclennis
@marclennis
Oct 05 2016 03:34
putting a box into the text...hahahahaha experimenting
Roland Shield
@perchslayer
Oct 05 2016 03:34
I have a simple and maybe dumb question?
Evan W
@Dirtier
Oct 05 2016 03:34
@marclennis What do you mean putting a box into the text?
JD Tadlock
@jdtdesigns
Oct 05 2016 03:35
@perchslayer what's the question?
Roland Shield
@perchslayer
Oct 05 2016 03:36
I got a question: I just finished my first "Tribute Page" project and it takes me right into the "Build a Personal Portfolio Webpage" project, of course, right? And so my question is, am I supposed to literally build this "parallax" scroller completely from scratch? Or is is okay to use one of the myriad of Bootstap templates for it and "tweek" and credit it?
JD Tadlock
@jdtdesigns
Oct 05 2016 03:36
@perchslayer You can use any libraries/frameworks you want.
Roland Shield
@perchslayer
Oct 05 2016 03:36
Oh. Okay. Thanks.
JD Tadlock
@jdtdesigns
Oct 05 2016 03:36
As far as paralax, i wouldn't go that far yet unless you already have experience
Roland Shield
@perchslayer
Oct 05 2016 03:36
Cool.
No, I don't want that.
I guess I just meant scroller.
That is still new to me too (ha-ha). I am still warming up to responsive.
JD Tadlock
@jdtdesigns
Oct 05 2016 03:37
that scroll animation is done with jQuery and it's pretty easy @perchslayer
but, it's also something that may not make sense for awhile to you
you don't have to use js on the portfolio
Roland Shield
@perchslayer
Oct 05 2016 03:38
Hey, I saw that there are "challenges" on jQuery. But the idea is that I jump in and explore "first" and then learn by lesson after?
Evan W
@Dirtier
Oct 05 2016 03:39
What scroll animation are you talking about?
JD Tadlock
@jdtdesigns
Oct 05 2016 03:39
@perchslayer FCC is not for learning. It's to challenge and push you to code. The learning is done by research and taking courses/classes ect.
Evan W
@Dirtier
Oct 05 2016 03:39
All he did was fix the menu bar
and set it so it highlights the current div being viewed
JD Tadlock
@jdtdesigns
Oct 05 2016 03:40
@Dirtier When you click a section button on the menu, it slowly scrolls to a section
uses jQuery
Evan W
@Dirtier
Oct 05 2016 03:40
Oh to slowly scroll rather than just take you there
JD Tadlock
@jdtdesigns
Oct 05 2016 03:40
correct @Dirtier
Roland Shield
@perchslayer
Oct 05 2016 03:41
@jdtdesigns - Wow! Thanks! I think I am having an awesome and very profound "A-ha!" moment.
CamperBot
@camperbot
Oct 05 2016 03:41
perchslayer sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 656 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
Roland Shield
@perchslayer
Oct 05 2016 03:42
Okay, okay. I can get there. I will go and do...there is no trying....Do! It is all very Yodaish, yes?
Evan W
@Dirtier
Oct 05 2016 03:43
@marclennis Ohhh you wanted the text in a box? You said box in text lol
JD Tadlock
@jdtdesigns
Oct 05 2016 03:44

@marclennis

<h2 id="jumbo-text"> Doraemon Japanese: ドラえもん is a Japanese manga series written and illustrated by the manga writing team Fujiko Fujio The series has also been adapted into a successful anime series and media franchise. The story revolves around a robotic cat named Doraemon, who travels back in time from the 22nd century to aid a pre-teen boy named Nobita Nobi 野比のび太 Nobi Nobita.</div>

<div class="box border">
  <h2 style="text-align:center"> Plot

should be this:

<p id="jumbo-text">Doraemon Japanese: ドラえもん is a Japanese manga series written and illustrated by the manga writing team Fujiko Fujio The series has also been adapted into a successful anime series and media franchise. The story revolves around a robotic cat named Doraemon, who travels back in time from the 22nd century to aid a pre-teen boy named Nobita Nobi 野比のび太 Nobi Nobita.</p>

<div class="box border">
  <h2 style="text-align:center">Plot</h2>
</div>
and refrain from adding spaces before and after text in your elements
i've seen that a lot recently and it's bad practice
not sure why people are doing that lol
Evan W
@Dirtier
Oct 05 2016 03:45
I'm convinced a lot of those small things come from how shitty and old the text-editor is in the FCC excercises
It's slow and ugly. You click in one spot and it puts your cursor 3 inches away
JD Tadlock
@jdtdesigns
Oct 05 2016 03:45
@Dirtier he's on codepen ;)
Evan W
@Dirtier
Oct 05 2016 03:46
I know but he probably learned it on FCC lol
When it doesnt indent correctly for you or anything, and its a hassle to change it, people will just type all over the place. I know I did when I went through some of those
marclennis
@marclennis
Oct 05 2016 03:47
where can i get tables of font-family?
Evan W
@Dirtier
Oct 05 2016 03:47
google fonts
JD Tadlock
@jdtdesigns
Oct 05 2016 03:47
@Dirtier hmm, didn't really bother me
it's just strict without any shortcuts
Evan W
@Dirtier
Oct 05 2016 03:47
@marclennis google fonts, select the families you want and it will give you the code to import them
@jdtdesigns Idk I hated it with a passion lol. I honestly couldn't stand using it. Could hardly even keep my place or find anything with that comic sans font and awful color scheme. And every time I went to the next problem, if you would click to type something, it would actually show up like 4 lines above/below it
JD Tadlock
@jdtdesigns
Oct 05 2016 03:50
@Dirtier Seems like a browser specific problem. I'd contact them about it. Other than acting like notepad, it didn't give me any issues.
Evan W
@Dirtier
Oct 05 2016 03:50
Idk maybe its not like that for everyone, but totally sucked for me lol. Other websites have much better feeling/looking editors
Idk, I feel like most people use Chrome right?
JD Tadlock
@jdtdesigns
Oct 05 2016 03:51
i was in chrome
but there are different versions
Evan W
@Dirtier
Oct 05 2016 03:51
Yea so idk what the deal with it was then. Other than the fact that I did most of them on my MacBook instead of my desktop
Most IDEs/editors or w/e like codepen are run locally anyway, so I guess it could be OSX. But that doesn't really explain the weird clicking
JD Tadlock
@jdtdesigns
Oct 05 2016 03:53
@Dirtier Like i said, you should let them know. ;)
Roland Shield
@perchslayer
Oct 05 2016 03:54
@jdtdesigns Hey, just to verify....I was looking at the "Map" and it has lots of stuff on Javascript....many challenge modules....however, they are, curiously after the Portfolio project which has lots of JS in it. How come? https://codepen.io/FreeCodeCamp/pen/YqLyXB
Evan W
@Dirtier
Oct 05 2016 03:54
Ill let them know that they need to update from the 80s to the early 2000s lol :P
I heard that they were actually re-doing everything as we speak
Re-doing it all with React
JD Tadlock
@jdtdesigns
Oct 05 2016 03:55
@perchslayer They start you with html/css challenges then move on to js which is the big thing they push
Roland Shield
@perchslayer
Oct 05 2016 03:55
But you "DO" it before the "challenges"?
Evan W
@Dirtier
Oct 05 2016 03:56
@perchslayer Bc you can accomplish that project without Javascript if you want
Roland Shield
@perchslayer
Oct 05 2016 03:56
Okay.
JD Tadlock
@jdtdesigns
Oct 05 2016 03:56
@perchslayer You will DO it a lot away from the challenges cause you won't know what the heck you're doing lol
Roland Shield
@perchslayer
Oct 05 2016 03:57
Exactly. I guess this is where the "jumping in" starts. Right now.
Evan W
@Dirtier
Oct 05 2016 03:57
@perchslayer Your project just has to be functionally similar to it, meaning display the same stuff his does. It doesn't have to do it in the same way
JD Tadlock
@jdtdesigns
Oct 05 2016 03:57
FCC basically says "do this" and if you don't know one thing about what they are telling you to do, the research begins @perchslayer
Evan W
@Dirtier
Oct 05 2016 03:57
As long as you still accomplish all the 'user stories'
Roland Shield
@perchslayer
Oct 05 2016 03:57
Okey-doke.
Evan W
@Dirtier
Oct 05 2016 03:57
I feel like thats the best way to learn anyway
Like everything I know came from me not knowing how to do something lol
Roland Shield
@perchslayer
Oct 05 2016 03:58
You are very likely right to be sure.
Evan W
@Dirtier
Oct 05 2016 03:58
So I look it up, but the hard part is knowing what to look up
gotta be a Google wizard
Roland Shield
@perchslayer
Oct 05 2016 03:58
Yup. Well, I guess I will go get busy.
JD Tadlock
@jdtdesigns
Oct 05 2016 03:59
@perchslayer You'll get stuck and want to quit and punch baby pandas, but you just have to stick with. You'll 'get' it eventually.
Roland Shield
@perchslayer
Oct 05 2016 03:59
Naw...I am more of a baby seal clubber.
JD Tadlock
@jdtdesigns
Oct 05 2016 03:59
to each his own ;)
Evan W
@Dirtier
Oct 05 2016 03:59
If I had any baby pandas around me they'd all be dead by now
JD Tadlock
@jdtdesigns
Oct 05 2016 03:59
why do you think they're endangered?
i'm the baby panda terminator
Evan W
@Dirtier
Oct 05 2016 04:00
I've found that there are just about 0 good resources out there that teach frameworks very well at all
you have to skip from website to website grasping at fragments
lol the baby panda terminator
speaking of which, @jdtdesigns where did you learn React/Vue/etc? Or have you
Roland Shield
@perchslayer
Oct 05 2016 04:02
Would it be "wrong" of me to grab a "template" from, say, Blaze, and go from there? Is that not with the spirit of what I am trying to learn?
Evan W
@Dirtier
Oct 05 2016 04:03
@perchslayer Lol well I mean if you can't style that same template on your own then probably. But if you can then I cant see why saving yourself some time would hurt anyone
JD Tadlock
@jdtdesigns
Oct 05 2016 04:03
@Dirtier Youtube, teamtreehouse and google
Roland Shield
@perchslayer
Oct 05 2016 04:04
Ahh, okay.
Evan W
@Dirtier
Oct 05 2016 04:04
Lol the first and last I know all too well. The second one though, dont think I've heard of that
JD Tadlock
@jdtdesigns
Oct 05 2016 04:04
laracasts also
Evan W
@Dirtier
Oct 05 2016 04:04
See what I mean though? For everything else there are books on books about it
JD Tadlock
@jdtdesigns
Oct 05 2016 04:04
very good for vue and react @Dirtier
Evan W
@Dirtier
Oct 05 2016 04:04
Thats the problem with JS
Cool thanks
But yea I think thats the problem with JS, they just keep building on top of crap and coming out with flavor of the month frameworks and libs and stuff, so you always have to try and stay on top of it
tis annoying
JD Tadlock
@jdtdesigns
Oct 05 2016 04:08
@Dirtier It'll be the way of the coder world forever. That's our life unfortunately. You can take a more straightforward approach like Java if you don't want to constantly adjust.
Evan W
@Dirtier
Oct 05 2016 04:11
Lol you can only adjust so far though, thats why some people think the JS bubble's gonna pop one of these days
I guess if you've been doing it a while it wouldn't be as much of an adjustment though, does it get easier to keep up with it?
silver537
@silver537
Oct 05 2016 04:16
i wanna have a convo too!
JD Tadlock
@jdtdesigns
Oct 05 2016 04:17
@Dirtier It can be easy or difficult based on the framework. Full MVC's always have a learning curve.
Evan W
@Dirtier
Oct 05 2016 04:18
Yeaaaa I heard angular is a B
silver537
@silver537
Oct 05 2016 04:18
@jdtdesigns @Dirtier what yall talkin about
JD Tadlock
@jdtdesigns
Oct 05 2016 04:19
the whoa's of coding @silver537
Roland Shield
@perchslayer
Oct 05 2016 04:19
I am trying to learn that MVC stuff at the same time. And I have been trying the Dot Net Core 1.0 thingy...It is a good tutorial that MS has, but it seems the Entity Framework model is handy but very brittle and buggy.
Evan W
@Dirtier
Oct 05 2016 04:19
beating baby pandas to death
JD Tadlock
@jdtdesigns
Oct 05 2016 04:19
@perchslayer stick with frontend for now
Roland Shield
@perchslayer
Oct 05 2016 04:20
okay. yea, good idea. That is already nearly overwhealming.
JD Tadlock
@jdtdesigns
Oct 05 2016 04:20
if you're wanting to be a web dev, the frontend should come first
Roland Shield
@perchslayer
Oct 05 2016 04:20
I want to and will do.
JD Tadlock
@jdtdesigns
Oct 05 2016 04:21
the thing about js now is it's both backend and frontend
Evan W
@Dirtier
Oct 05 2016 04:27
Node makes life so much easier though once you get the hang of it
You'll start to realize that no one actually makes entire websites anymore lol they're all monsters thrown together with bits and pieces of other peoples stuff
Sorin Ruse
@sorinr
Oct 05 2016 04:29
@jdtdesigns hi. u no sleeping? :)
JD Tadlock
@jdtdesigns
Oct 05 2016 04:29
@sorinr Not yet :P
Sorin Ruse
@sorinr
Oct 05 2016 04:32
@jdtdesigns i'm on my morning coffee :)
c0d0er
@c0d0er
Oct 05 2016 04:35
does anybody know why $(".offarea").after(".closedarea"); (this code is before the click function close to end of the code) doesnt work in my code ? http://codepen.io/c0d0er/pen/RGLxpQ?editors=0010
JD Tadlock
@jdtdesigns
Oct 05 2016 04:37
@c0d0er The chain of jq events is making my ocd twitch bro
DJ Pelland
@dna113p
Oct 05 2016 04:40
@c0d0er It's very hard to tell what is going on
c0d0er
@c0d0er
Oct 05 2016 04:40

@jdtdesigns could you explain more?

@c0d0er The chain of jq events is making my ocd twitch bro

JD Tadlock
@jdtdesigns
Oct 05 2016 04:42
$(".offarea").after(".closedarea");
$("#all").click(function(){
$(".onarea").show();
$(".offarea").show();
$(".closedarea").show();
})
$("#on").click(function(){
$(".offarea").hide();
$(".onarea").show();
$(".closedarea").hide();
})
$("#off").click(function(){ 
$(".onarea").hide();
$(".offarea").show();
$(".closedarea").show();
})
}
DJ Pelland
@dna113p
Oct 05 2016 04:42
@c0d0er What are you trying to do with offarea and closedarea?
JD Tadlock
@jdtdesigns
Oct 05 2016 04:42
that's not good
Sorin Ruse
@sorinr
Oct 05 2016 04:42
@c0d0er use addClass instead
c0d0er
@c0d0er
Oct 05 2016 04:43
@dna113p try to put closedarea channels behind offarea
@jdtdesigns repeat is BAD, not yet figure out
Sorin Ruse
@sorinr
Oct 05 2016 04:44
@c0d0er here is how u can use after: http://www.w3schools.com/jquery/html_after.asp
c0d0er
@c0d0er
Oct 05 2016 04:45
@jdtdesigns still checking your code, a lot to learn
@jdtdesigns @dna113p @sorinr thanks!
CamperBot
@camperbot
Oct 05 2016 04:46
c0d0er sends brownie points to @jdtdesigns and @dna113p and @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 342 | @dna113p |http://www.freecodecamp.com/dna113p
:cookie: 765 | @sorinr |http://www.freecodecamp.com/sorinr
:cookie: 657 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
JD Tadlock
@jdtdesigns
Oct 05 2016 04:46
did you see how i added the closed to the end of the list? @c0d0er
bscyrpt
@bscyrpt
Oct 05 2016 04:49
@c0d0er seems to me that its appends the content but it does so before the .fail function has/grabs the data, so it appends nothing instead of what you want.
c0d0er
@c0d0er
Oct 05 2016 04:50
@jdtdesigns i just checked, whole different idea!!!
@bscyrpt thanks
CamperBot
@camperbot
Oct 05 2016 04:53
:cookie: 38 | @bscyrpt |http://www.freecodecamp.com/bscyrpt
c0d0er sends brownie points to @bscyrpt :sparkles: :thumbsup: :sparkles:
bscyrpt
@bscyrpt
Oct 05 2016 04:54
i moved the .after into the fail function and it seems to work if that is what your going for
grantknaver
@grantknaver
Oct 05 2016 04:58
anyone have any ideas why this javascript is not working
var target = document.getElementById("target");
target.onclick = function() {
alert(window.innerWidth());
}
JD Tadlock
@jdtdesigns
Oct 05 2016 05:01
@grantknaver change window.innerWidth() to window.innerWidth
grantknaver
@grantknaver
Oct 05 2016 05:01
tried that to no avail
works fine
grantknaver
@grantknaver
Oct 05 2016 05:02
must be a code pen thing
JD Tadlock
@jdtdesigns
Oct 05 2016 05:03
:D
grantknaver
@grantknaver
Oct 05 2016 05:05
Hmm probably the libs I am using
JD Tadlock
@jdtdesigns
Oct 05 2016 05:08
works fine @grantknaver
not working for you?
grantknaver
@grantknaver
Oct 05 2016 05:08
ya its not
sucks ok
JD Tadlock
@jdtdesigns
Oct 05 2016 05:09
did you hard refresh or close the browser and reload it?
also, do you see any errors in the browser console?
grantknaver
@grantknaver
Oct 05 2016 05:11
no browser errors. I am doing a hard refresh right now.
damn...nope
@jdtdesigns thanks for the ideas
CamperBot
@camperbot
Oct 05 2016 05:15
grantknaver sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 658 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
JD Tadlock
@jdtdesigns
Oct 05 2016 05:16
@grantknaver try in a different browser
grantknaver
@grantknaver
Oct 05 2016 05:17
yep
mozilla you failed me
lol
Personacode
@Personacode
Oct 05 2016 05:18
I don't want to make a portfolio right now. Should I just skip it for now and come back to it?
JD Tadlock
@jdtdesigns
Oct 05 2016 05:19
@Personacode No harm in skipping it, but learning html/css before moving onto the js apps will make your life easier
Peter Svedman
@petersvedman
Oct 05 2016 05:32
A lot easier indeed
You will comeback and redo it or something like it anyway when you start to grok things @Personacode
Evan W
@Dirtier
Oct 05 2016 06:00
@grantknaver Which element is #target
@grantknaver I got it to work
still need it?
grantknaver
@grantknaver
Oct 05 2016 06:02
@Dirtier
It ended up being mozilla
@jdtdesigns had my back
Evan W
@Dirtier
Oct 05 2016 06:02
Oh it wasnt working for me either on Chrome
grantknaver
@grantknaver
Oct 05 2016 06:03
@Dirtier thanks man
CamperBot
@camperbot
Oct 05 2016 06:03
grantknaver sends brownie points to @dirtier :sparkles: :thumbsup: :sparkles:
:cookie: 247 | @dirtier |http://www.freecodecamp.com/dirtier
Evan W
@Dirtier
Oct 05 2016 06:03
I saw you were using jquery now
so I just changed it to the jquery equivalent
grantknaver
@grantknaver
Oct 05 2016 06:03
na
Evan W
@Dirtier
Oct 05 2016 06:03
I mean you had it linked
grantknaver
@grantknaver
Oct 05 2016 06:03
been doing the lessons involving bootstrap and that needs it
Evan W
@Dirtier
Oct 05 2016 06:04
@grantknaver even if you want to code in vanilla JS I would still at least use jQuery for the selectors haha
ahhh ok
jquery selectors just take so much less writing ^.^
grantknaver
@grantknaver
Oct 05 2016 06:04
so true
I think my browser might be doing something odd again
Evan W
@Dirtier
Oct 05 2016 06:05
You shouldn't need Babel either, I don't see any es6
Robert Ridley
@robertridley1988
Oct 05 2016 06:05

Hey, guys. I'm doing the wikipedia viewer task. I have a style-related question: for some reason my input-button group appears with the input above the button (they should be next to each other). This is not an issue unless I use jQuery to give it animation – as below:

http://codepen.io/robertridley1988/full/YGNVpV/

Not sure why this is happening. Here is my HTML:

<div class="container-fluid"><!-- fluid-->
  <div class="jumbotron"><!--jumbo--> 

    <div class="row"><!-- row-->
      <div class="col-md-3"></div>
      <div class="col-md-6">
        <div class="text-center"><!-- text-center -->
          <h1 class="text-center" id="search-icon"><button id="butt"><i class="fa fa-search" aria-hidden="true"></i></button></h1>
          <div class="input-group"><!-- /input-group -->
            <input type="text" class="form-control" placeholder="Search Wikipedia">
              <span class="input-group-btn">
                <button class="btn btn-default" type="button">Go!</button>
              </span>
          </div><!-- /input-group -->
        </div><!-- text-center -->
      </div><!-- col-md-6-->
      </div><!--row-->
   </div> <!--jumbo--> 
 </div> <!-- fluid-->

and here is my jQuery:

$(document).ready(function(){
  $('#search-icon').on('click', function(){
    $('#search-icon').hide();
    $('.input-group').slideDown('slow');
  });  
});

Thanks

grantknaver
@grantknaver
Oct 05 2016 06:06
when I use the display: none the targeted element still takes up the same space, but just goes invisible?
It is like I am using invisibility: hidden. Any ideas anyone
Evan W
@Dirtier
Oct 05 2016 06:07
@robertridley1988 Bc your text input is taking up the space of the entire container
No room for the button to sit next to it
at least thats what it looks like, add class pull-left to the button and then change the screen size, they both move together as if the text input is taking up all the columns
Robert Ridley
@robertridley1988
Oct 05 2016 06:10
@Dirtier But when I don't use jQuery to animate the input-button group (just have it visible from the page load) this isn't happening.
Evan W
@Dirtier
Oct 05 2016 06:11
Oh I was looking at the wrong thing then huh
Sorin Ruse
@sorinr
Oct 05 2016 06:11
@robertridley1988 use $('.input-group').css('display','inline-table'); after slidedown call
grantknaver
@grantknaver
Oct 05 2016 06:16
any ideas?
Robert Ridley
@robertridley1988
Oct 05 2016 06:18
@sorinr So close! It doesn't look quite right; the button separates from the input and then attaches itself again.
Sorin Ruse
@sorinr
Oct 05 2016 06:19
@robertridley1988 i've seen that effect. thinking.... :)
Shyamli
@cshyamli
Oct 05 2016 06:19
http://codepen.io/Shanu22/full/mApJWz/ please review my tribute page
Kartikeya Gupta
@kartikeya100
Oct 05 2016 06:20
hey fellow campers..................am installing nodeJS but its not working any helps??
i.imgsafe.org/49958100d8.png
@cshyamli looks good but I'd preferred a left aligned table
Shyamli
@cshyamli
Oct 05 2016 06:21
ok I'll consider that
thanks @kartikeya100
CamperBot
@camperbot
Oct 05 2016 06:21
cshyamli sends brownie points to @kartikeya100 :sparkles: :thumbsup: :sparkles:
:cookie: 335 | @kartikeya100 |http://www.freecodecamp.com/kartikeya100
Sorin Ruse
@sorinr
Oct 05 2016 07:06
@robertridley1988 i've seen you changed to fadein
Abhishek Saini
@sainiabhi
Oct 05 2016 07:09
@kartikeya100 what you are trying to do ?
Robert Ridley
@robertridley1988
Oct 05 2016 07:13
@sorinr yeah, didn't want to spend so much time on the style. Want to dedicate more time to the wikipedia API call. I may come back to it.
Evan W
@Dirtier
Oct 05 2016 07:28
@jdtdesigns Hey would you mind helping me with Vue for a sec?
Or anyone?
Nvm :P
figured it out
Annu Nirmal
@annunirmal
Oct 05 2016 07:51
so i am finally done with my weather app, suggestions please
https://codepen.io/nirmalannu/full/ORgxjb
Tadas Stasiulionis
@tst11
Oct 05 2016 07:51
Hey can someone help with the wikipedia API? How to get search results together with url? Now it is just search results and no url, using this api
https://en.wikipedia.org/w/api.php?action=query&format=json&prop=&list=search&srsearch=coding&srprop=size%7Cwordcount%7Ctimestamp%7Csnippet%7Ctitlesnippet
Kartikeya Gupta
@kartikeya100
Oct 05 2016 07:57
@sainiabhi to install nodeJS
Abhishek Saini
@sainiabhi
Oct 05 2016 08:09
Esperanza Moreno Cruz
@mi-mina
Oct 05 2016 08:19
@annunirmal Hi! In chrome doesn't work. navigator.geolocation doesn't work anymore from insecure origins. I used this API: http://ip-api.com/json. It's not very accurate and sometimes their servers get stuck. But it works from http. ;)
Annu Nirmal
@annunirmal
Oct 05 2016 08:20
@mi-mina yeah right it does not. it only works for https
Erick Delfin
@Nifled
Oct 05 2016 08:21
Could anyone help out? I'm trying to make the text stretch out horizontally when the screen res is lowered to 600px
Sorin Ruse
@sorinr
Oct 05 2016 08:22
@mi-mina you can use navigator geolocation but you have to load the codepen over https not http
Spyrantis Theodoros
@thodorisanta
Oct 05 2016 08:22

http://codepen.io/oshikurou/pen/LkvoyX

so this is my random quote generator project and i want to make the "p" elements to have the same color as the backgrounds color when the page load. (later when i press the button it does take the same color, but i cant do the same for when the page loads for the very first time)

Esperanza Moreno Cruz
@mi-mina
Oct 05 2016 08:25
@sorinr Yes I know... I tried that, but sometimes codepen.io load itself again from http and the app doesn't work anymore.
Sorin Ruse
@sorinr
Oct 05 2016 08:26
@thodorisanta it doesn't work coz u are calling getcolor twice and it returns diff colors each time as u r using math.random :)
Spyrantis Theodoros
@thodorisanta
Oct 05 2016 08:27
@sorinr yeah i know that. and i trying a couple ways to change it but i couldnt do it :P can you suggest a way?
Sorin Ruse
@sorinr
Oct 05 2016 08:29
@thodorisanta here how you can do it: quotes
Spyrantis Theodoros
@thodorisanta
Oct 05 2016 08:32
@sorinr lol, i did the same thing but instead of "var newcolor = colors[getColor()];" i wrote
"var newcolor = getColor(); thanks you :)
CamperBot
@camperbot
Oct 05 2016 08:32
thodorisanta sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 766 | @sorinr |http://www.freecodecamp.com/sorinr
Amit Patel
@AmitP88
Oct 05 2016 08:48
hey guys, I'm applying to various cities all over california for jr dev jobs (I live in cali). how long does it typically take to hear back from an employer? (I've applied to 11 jobs since last friday)
and I'm gonna apply to maybe 6-10 more tonight
Darla Sudheer
@sudheerdarla
Oct 05 2016 08:57
http://codepen.io/sudheer_d/full/NRvvGJ/ my new design! please review
Sorin Ruse
@sorinr
Oct 05 2016 09:06
@sudheerdarla it should befor(var i = 0; i < data[1].length; i++) to display all results
Darla Sudheer
@sudheerdarla
Oct 05 2016 09:09
@sorinr its our choice right?
got it thanks @sorinr
CamperBot
@camperbot
Oct 05 2016 09:10
sudheerdarla sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 767 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Oct 05 2016 09:11
@sudheerdarla nope. just search for laravel your way you don't get the info you want
reg0r
@reg0r
Oct 05 2016 09:16
Can somebody explain me please why I can't assign coordinates to global variables from inside the function?
var latitude;
var longtitude;

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function(position) {
    latitude = position.coords.latitude;
    longtitude = position.coords.longitude;

    $("#data").html("latitude: " + latitude + "<br>longitude: " + longtitude);

  });
}
Stephen James
@sjames1958gm
Oct 05 2016 09:17
@reg0r you should be able to - are you sure the call back function is being called - have you tried a console.log inside the callback?
reg0r
@reg0r
Oct 05 2016 09:17
no, I have not tried console.log yet
Stephen James
@sjames1958gm
Oct 05 2016 09:19
@reg0r If you are using the chrome browser the geolocation only works from a secure site (https://)
reg0r
@reg0r
Oct 05 2016 09:20
@sjames1958gm function definitely has been called, I'm already checked with console.log
Stephen James
@sjames1958gm
Oct 05 2016 09:22
@reg0r Does the #data element not get updated?
reg0r
@reg0r
Oct 05 2016 09:23
@sjames1958gm #data element updated
Stephen James
@sjames1958gm
Oct 05 2016 09:24
@reg0r Then are you trying use the values in latitude and longitude directly after the if (navigator.geolocation) { code?
@reg0r The getLocation function is asynchronous and doesn't execute and call the callback until after the current code is finished, so those values
are not yet available. If you put a console.log in the callback and another after the if you will see that the one after the if executes first.
var latitude;
var longtitude;
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
latitude = position.coords.latitude;
longtitude = position.coords.longitude;
$("#data").html("latitude: " + latitude + "<br>longitude: " + longtitude);
console.log('callback'); // this console.log will happen second
});
}
console.log("after if"); // this console.log will happen first (the globals not yet set
reg0r
@reg0r
Oct 05 2016 09:29
@sjames1958gm So only solution in this situation is put all this in one scope?
Sorin Ruse
@sorinr
Oct 05 2016 09:29
@reg0r as @sjames1958gm said you should be able. another approach will be to define the vars like: var latitude = position.coords.latitude; and after $("#data").html just call a function like: getWeather(latitude, longitude) and pass these two vars
Stephen James
@sjames1958gm
Oct 05 2016 09:30
@reg0r If you need them later you can keep them global, but you cannot use them until the callback has executed. Calling a function from within the callback as @sorinr said above is a solution.
@reg0r This is a timing not a scope issue.
reg0r
@reg0r
Oct 05 2016 09:32
@sorinr @sjames1958gm Thanks guys, I seem to understand
CamperBot
@camperbot
Oct 05 2016 09:32
reg0r sends brownie points to @sorinr and @sjames1958gm :sparkles: :thumbsup: :sparkles:
:cookie: 768 | @sorinr |http://www.freecodecamp.com/sorinr
:star2: 3686 | @sjames1958gm |http://www.freecodecamp.com/sjames1958gm
Stephen James
@sjames1958gm
Oct 05 2016 09:37
@reg0r :+1: good luck
HYM
@hymRedemption
Oct 05 2016 09:40
Hello guys, I just finished 'Build a Random Quote Machine'. My code is here(http://codepen.io/He_ym/pen/bwabjN). But I have a question. The display of the 'author' is later than the 'quote text'. But in the code I change the text at the same time. Anyone could help me figure out why?
Sorin Ruse
@sorinr
Oct 05 2016 09:48
@hymRedemption instead of changeText(".quote--content .text", 500, result.quote); i would call the function just like: changeText(result.quote, result.author) and do all the logic in that function
Arman Vasilyan
@armvas
Oct 05 2016 09:56
Hey everyone,I'm currently working on Personal Portfolio project and I have reached the point of making the contacts form. For it to work it seems like I need a back-end programming language. My question is - do I have to make a working form(with send button really sending the message to email) and how do I do that?
Sorin Ruse
@sorinr
Oct 05 2016 10:01
@hymRedemption or instead of calling changeText function just do $(target here).text(result.quote).fadeIn(500)
Arman Vasilyan
@armvas
Oct 05 2016 10:06
Ok, I'll just drop a mailto: link in my Portfolio page - contact form isn't mandatory at all
HYM
@hymRedemption
Oct 05 2016 10:09
@sorinr OK, I will have a try. Thanks!
CamperBot
@camperbot
Oct 05 2016 10:09
hymredemption sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 769 | @sorinr |http://www.freecodecamp.com/sorinr
nabinsademba
@nabinsademba
Oct 05 2016 10:21
@799arman u can do as your wish...but contact form can be of any tipe static or dinamic
dynamic
Phanindra M
@PhaniMaddi
Oct 05 2016 11:11
I wrote this piece of code to prevent multiple decimal points. But its not working. Can someone tell what is the error.
var curNum = $(this).text();

    if(curNum === '.'){
      counter++;
    }else if(curNum === '+' || curNum === '-' || curNum === '*' || curNum === '/'){
      counter = 0;
    }
    if(counter === 1){
      $('#point').off();
    }else if(counter === 0) {
      $('#point').on();
    }
Amit Patel
@AmitP88
Oct 05 2016 13:01
hey guys, on a scale of 1-10, how good is my site? https://amitp88.github.io/New-Portfolio/
Annu Nirmal
@annunirmal
Oct 05 2016 13:10
so, finally: weather app, reviews please
https://codepen.io/nirmalannu/full/ORgxjb
Sorin Ruse
@sorinr
Oct 05 2016 13:15
@annunirmal :+1:
Priyesh
@priyesh091
Oct 05 2016 13:18

Hey guys, I am upto making a tribute page on the course and I am having a problem.
I want to put two images side by side so have used the code:

<div class="row">

<div class="col-md-4"> (there are 3 images I want to put side by side

However, I put the image file in and then repeat the <div class="col-md-4"> and the second image remains underneath the first.. any ideas?
Sorin Ruse
@sorinr
Oct 05 2016 13:27
@priyesh091 try to scale the imgs
Thaddeus McCleary
@thaddeusm
Oct 05 2016 13:35
@annunirmal I love the styling and the flat colors. That’s my next challenge so I’ll be sure to check it out for reference (though trying to not peek at the code yet).
@annunirmal It’s not loading weather info from the api from my location (I’m based in Vinnytsia, Ukraine).
Rizwan Ahmed
@rizwanahmed19
Oct 05 2016 13:45
This is how you can host your websites on firebase for FREE! https://www.youtube.com/watch?v=Gl-qlxfTJHE
Tony Chen
@TonyChen8
Oct 05 2016 14:09
@priyesh091 check the close tag of your div with class "row". Does your "row" div tag enclose the two "col-md-4" columns? Did you try "img-responsive" class with you images?
Priyesh
@priyesh091
Oct 05 2016 14:12
@TonyChen8 I had nested the two "col-md-4" colums inside the row div tag and still had no luck. I didn't try the "img-responsive" class. I have deleted that code and gone for simpler images with simple URLs. However, now when I am creating a class in CSS and implementing it into the <img> code in HTML.. it doesn't seem to do anything. Any idea?
link to the code pen
nabinsademba
@nabinsademba
Oct 05 2016 14:32
check this now @priyesh091
did it help you
Sorin Ruse
@sorinr
Oct 05 2016 14:40
@priyesh091 this is what u want to achive? anthony
JD Tadlock
@jdtdesigns
Oct 05 2016 14:42
@priyesh091 <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet"> goes in Settings->HTML->Stuff for head, not in the html panel
also, you need to load your page from http not https. You have images that are hosted on http. This will cause errors when running the page over secure https
Sorin Ruse
@sorinr
Oct 05 2016 14:48
@jdtdesigns morning JD :)
JD Tadlock
@jdtdesigns
Oct 05 2016 14:50
@sorinr morning :)
Purnendu Palash Baruah
@purnendupalash
Oct 05 2016 15:09
I just completed building the tribute page. I wanted to know how does it gets reviewed and by whom.
JD Tadlock
@jdtdesigns
Oct 05 2016 15:10
@purnendupalash It doesn't get reviewed by anyone but your fellow FCC coders on code review.
Purnendu Palash Baruah
@purnendupalash
Oct 05 2016 15:12
@jdtdesigns Do i get notified once it is evaluated? I just want to know how did i perform.
JD Tadlock
@jdtdesigns
Oct 05 2016 15:13
@purnendupalash Lol, this is not a teacher review site. That's why it's free. It just gives you challenges.
go to the Code Review channel
people will review it there
Purnendu Palash Baruah
@purnendupalash
Oct 05 2016 15:20
@jdtdesigns Thank you!
CamperBot
@camperbot
Oct 05 2016 15:20
purnendupalash sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 659 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
RayVoldemort
@RayVoldemort
Oct 05 2016 15:21
How to do 127? the guys ?
JD Tadlock
@jdtdesigns
Oct 05 2016 15:22
@RayVoldemort huh?
RayVoldemort
@RayVoldemort
Oct 05 2016 15:26
@jdtdesigns hah
@jdtdesigns i do not know how to start to build a tribute pape (>_<)
JD Tadlock
@jdtdesigns
Oct 05 2016 15:27
@RayVoldemort Watch youtube videos on html/css
RayVoldemort
@RayVoldemort
Oct 05 2016 15:28
@jdtdesigns thank you I will try
CamperBot
@camperbot
Oct 05 2016 15:28
rayvoldemort sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 660 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
risheak
@risheak
Oct 05 2016 15:50
How to give start to a portfolio
Any portfolio examples please ?
Salomon May
@sollymay
Oct 05 2016 16:40
@risheak you can check my website at salomonmay.com
NIKHIL
@nikhil-m
Oct 05 2016 16:54
can anyone tell me how to animate image when I hover over them
@sollymay nice work
Jason Luboff
@JLuboff
Oct 05 2016 16:57
@nikhil-m Animate in what way? You can use jquery or even css depending on what you're trying to accomplish
NIKHIL
@nikhil-m
Oct 05 2016 16:57
I want to use CSS
I just want to zoom my image when user hover over it
but I don't know how to proceed further with CSS
Jason Luboff
@JLuboff
Oct 05 2016 16:58
@nikhil-m Try playing with CSS tranform (http://www.w3schools.com/cssref/css3_pr_transform.asp) and maybe use scale
NIKHIL
@nikhil-m
Oct 05 2016 16:58
@JLuboff
.grow:hover
{
-webkit-transform: scale(1.3);
-ms-transform: scale(1.3);
transform: scale(1.3);
}
is this correct ?
Jason Luboff
@JLuboff
Oct 05 2016 17:00
Seems like it could be lol
Ken Haduch
@khaduch
Oct 05 2016 17:16
@risheak - here's another place to check, especially if you are planning to use Bootstrap, but even just to see some design ideas - w3schools.com/bootstrap - look for the "themes" section, and even review some of the bootstrap topics for another take on it, with "sandbox" examples to play around with. If you are interested in using bootstrap...
tydalious
@tydalious
Oct 05 2016 17:18
Hey all, coming here now that I see the Twitchtv JSON API problem has an issue with the codepen example. Has this been discussed already?
Jason Luboff
@JLuboff
Oct 05 2016 17:19
@tydalious Yes, now you need a client id for it to run
Ken Haduch
@khaduch
Oct 05 2016 17:20
@tydalious - yes, @JLuboff is right. That is a fairly recent change. Maybe someone should update the example project? Or at least note that it is no longer working...
tydalious
@tydalious
Oct 05 2016 17:20
@JLuboff Ah ok, I see the freecodecamp forum post was updated, thanks
CamperBot
@camperbot
Oct 05 2016 17:20
tydalious sends brownie points to @jluboff :sparkles: :thumbsup: :sparkles:
:cookie: 389 | @jluboff |http://www.freecodecamp.com/jluboff
Martijn
@murtijn
Oct 05 2016 18:02
Is there a standard file where I can let a WP site load a new JS file? such as (<script type='text/javascript' src='public_html/main.js'></script>)
Wayne Bunch
@waynebunch
Oct 05 2016 18:13
Hi all - hoping someone can answer a question. I have one functions.js file that is loaded with <script> in two separate .html files (at end of files to allow DOM to load). However, when using document.getElementById in functions.js, I can only access the DOM of one of the files. Is there a way to specify which document getElementById uses?
or do I have to break it up into two .js files? Which I don't want to do haha
Stephen James
@sjames1958gm
Oct 05 2016 18:14
@waynebunch Well the .js file will be loaded in both documents, but only one document is loaded at a time, so it can only access the loaded document.
Wayne Bunch
@waynebunch
Oct 05 2016 18:15
bah
You ever play around with Electron?
JD Tadlock
@jdtdesigns
Oct 05 2016 18:17
@waynebunch You have two pages that load separately?
Stephen James
@sjames1958gm
Oct 05 2016 18:18
@waynebunch Just a little.
JD Tadlock
@jdtdesigns
Oct 05 2016 18:19
@murtijn You need to use wp_enqueue_scripts() with wp_enqueue_script() in a function from within the functions.php to load your css/js files.
Stephen James
@sjames1958gm
Oct 05 2016 18:19
@waynebunch You could have a different element in each page that the js could detect and then know which page was loaded
Wayne Bunch
@waynebunch
Oct 05 2016 18:19
@jdtdesigns I'm trying to grab a div from another page in order to insert some stuff into it.
JD Tadlock
@jdtdesigns
Oct 05 2016 18:20
if the page is loaded seperately, the same id will work, otherwise you can only have 1 id loaded at a time in the browser
Wayne Bunch
@waynebunch
Oct 05 2016 18:21
but it's weird I probably shouldn't be asking here since I didn't give any background. I'm using Electron so it's a bit different.
JD Tadlock
@jdtdesigns
Oct 05 2016 18:21
ah
Wayne Bunch
@waynebunch
Oct 05 2016 18:21
I got my answer, thanks @sjames1958gm @jdtdesigns . I'll just make a separate js file and require them
CamperBot
@camperbot
Oct 05 2016 18:21
waynebunch sends brownie points to @sjames1958gm and @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 661 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
:star2: 3698 | @sjames1958gm |http://www.freecodecamp.com/sjames1958gm
JD Tadlock
@jdtdesigns
Oct 05 2016 18:21
whole different ball game lol @waynebunch
Wayne Bunch
@waynebunch
Oct 05 2016 18:22
@jdtdesigns haha..yes. I've never tried loading one script file into multiple html files before. But makes sense it wouldn't work
@sjames1958gm Wait, so you're saying a litte if/else statement?
I could do that. If this function runs, load script.js in the other html
JD Tadlock
@jdtdesigns
Oct 05 2016 18:26
@waynebunch I think it's due to an id conflict with how electron works
one id per module
A_A
@Otto-AA
Oct 05 2016 18:29
Could anyone help me with a litle css?
The problem is that my 'clear:both' won't work on my floats and I dunno why :/
You can find it there: http://codepen.io/A_A/pen/VKyYqz/
Wayne Bunch
@waynebunch
Oct 05 2016 18:30
interesting. I would think I could get the id of the window I want and then change the DOM
Jakub Adamec
@jadamec16
Oct 05 2016 18:36
Hi guys, help me please. How to "allow" :hover on iOS? Thanks!
Mikail Bayram
@mikail1998
Oct 05 2016 18:54
@Otto-AA what do you mean by stats:after?
Annu Nirmal
@annunirmal
Oct 05 2016 18:54
Mikail Bayram
@mikail1998
Oct 05 2016 18:55
@annunirmal really cool
i like the moving cloud +1
A_A
@Otto-AA
Oct 05 2016 18:57
@mikail1998 I tried to use the pseudo-element of the .stats div for the clearfix (but it didn't work)
@mikail1998 I found out that when I set the display of .container to "display: inline-block" it will work. Do you know why?
Mikail Bayram
@mikail1998
Oct 05 2016 18:59
i am still trying to figure out what are you trying to do
A_A
@Otto-AA
Oct 05 2016 19:00
@annunirmal Looks pretty nice :+1:
Maybe you could fix the day it is showing: For me the Wednesday is over the border O.o
Mikail Bayram
@mikail1998
Oct 05 2016 19:00
when i open the link probably because it wont call the api or something
I just see the html and css
A_A
@Otto-AA
Oct 05 2016 19:01
@mikail1998 There should come a message like 'Do you want to send your location to the website?' and after some time it should fill in the stats
@mikail1998 But the height of the .container doesn't fit to the two floats inside then
Mikail Bayram
@mikail1998
Oct 05 2016 19:02
im still trying to open it
i allowed the page and everything
for example on the gitter iframe of your link i can see
A_A
@Otto-AA
Oct 05 2016 19:03
@mikail1998 Hmmm, so you don't get the temperature and stuff?
Mikail Bayram
@mikail1998
Oct 05 2016 19:03
nothing
http://codepen.io/A_A/pen/VKyYqz/ Would someone please just check if the api requests are working. i mean can you see the temperature and your location
from this link, so we know is the problem with me or the code
Thaddeus McCleary
@thaddeusm
Oct 05 2016 19:05
@mikail1998 no weather information displays for me
Shivam Singh
@Chikuid
Oct 05 2016 19:05
It displays for me
I can see weather here
A_A
@Otto-AA
Oct 05 2016 19:05
@mikail1998 It works for me (firefox)
Shivam Singh
@Chikuid
Oct 05 2016 19:05
I am using firefox too
A_A
@Otto-AA
Oct 05 2016 19:05
Seems like I have to check it again
Mikail Bayram
@mikail1998
Oct 05 2016 19:05
google chrome
A_A
@Otto-AA
Oct 05 2016 19:09
Ok, thanks for your help, I'll look at it tomorrow :)
JD Tadlock
@jdtdesigns
Oct 05 2016 19:11
@Otto-AA You might want to change your class to this:
function Weather() {
    var long = 20;
    var lat = 30;
    // Get Location -> Show Position
    if ( window.chrome ) {
        this.getLocation = () => {
            $.getJSON('http://ip-api.com/json', json => {
                long = json.lon;
                lat = json.lat
            })
        }
    } else {
        // Show Position
        this.showPosition = function(position) {
            long = position.coords.longitude;
            lat = position.coords.latitude;
            // Show Weather
            showWeather();
        };
        // Error when requesting position
        this.errorPosition = function(error) {
            console.log("errorPosition: " + error);
        };
        this.getPos = function() {
            return [lat, long];
        };

        this.getLocation = function() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(this.showPosition, this.errorPosition);
            }
        };
    }
}
this is due to chrome not supporting geolocation on http
JD Tadlock
@jdtdesigns
Oct 05 2016 19:21
@Otto-AA Actually do this instead:
function Weather() {
    var long = 20;
    var lat = 30;
    // Get Location -> Show Position
    if ( window.chrome ) {
        this.showPosition = () => {
            $.getJSON('http://ip-api.com/json', json => {
                long = json.lon;
                lat = json.lat

                // Show Weather
                showWeather();
            })
        };
        // Error when requesting position
        this.errorPosition = function(error) {
            console.log("errorPosition: " + error);
        };
        this.getPos = function() {
            return [lat, long];
        };

        this.getLocation = this.showPosition;        
    } else {
        // Show Position
        this.showPosition = function(position) {
            long = position.coords.longitude;
            lat = position.coords.latitude;
            // Show Weather
            showWeather();
        };
        // Error when requesting position
        this.errorPosition = function(error) {
            console.log("errorPosition: " + error);
        };
        this.getPos = function() {
            return [lat, long];
        };

        this.getLocation = function() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(this.showPosition, this.errorPosition);
            }
        };
    }
}
JD Tadlock
@jdtdesigns
Oct 05 2016 19:30
@Otto-AA I made some css changes. Is this what you're looking for? http://codepen.io/jdtadlock/pen/YGYYwq?editors=0100
Mikail Bayram
@mikail1998
Oct 05 2016 19:59
http://codepen.io/mikail1998/pen/VKmwwE im doing the tic tac toe game and when i click X i am trying to get O immediately but sometimes because X is written on the boxes I cant get O
how can i sort this problem out?
JD Tadlock
@jdtdesigns
Oct 05 2016 20:02
@mikail1998 It's because sometimes the box isn't filled in due to the box having the 'played' class
Mikail Bayram
@mikail1998
Oct 05 2016 20:02
I know why
JD Tadlock
@jdtdesigns
Oct 05 2016 20:02
you can make an algorithm to determine if the box has been played and if so choose another box
is that what you're asking?
Mikail Bayram
@mikail1998
Oct 05 2016 20:03
yes..
not the whole thing
just a hint
JD Tadlock
@jdtdesigns
Oct 05 2016 20:05
var ran = random number
box on click place x
if box doesn't have played class, place o on random box
if random box has played class, ran = random number
place o on random box
@mikail1998 that's the algorithm you need
Mikail Bayram
@mikail1998
Oct 05 2016 20:07
if($(".box").eq(random).hasClass("played")){
console.log("no");
}
else{
$(".box").eq(random).text("O");
}
this is the thing i have
and i thing thats it
but sometimes it tries to write the O on the box with the X
i see no in the console
JD Tadlock
@jdtdesigns
Oct 05 2016 20:08
instead of console.log('no') you need the algorithm i showed you above
if it has the played class, replace the random number with a new one and place the o on the random box
Mikail Bayram
@mikail1998
Oct 05 2016 20:09
so if it has the class
random = (Math.floor(Math.random()*9));
right?
JD Tadlock
@jdtdesigns
Oct 05 2016 20:09
correct
a while loop will work to keep trying until you get an empty box
Mikail Bayram
@mikail1998
Oct 05 2016 20:10
@jdtdesigns thanks for your help
CamperBot
@camperbot
Oct 05 2016 20:10
mikail1998 sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 662 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
Mikail Bayram
@mikail1998
Oct 05 2016 20:10
but it didnt work again
yeah i thought of the while loop too but asked here if someone had some other solution
JD Tadlock
@jdtdesigns
Oct 05 2016 20:12
why another solution when that works?
a while loop is standard for this type of problem
Mikail Bayram
@mikail1998
Oct 05 2016 20:13
maybe an easier solution lets say :smile:
Henrik Helmius
@HankyP
Oct 05 2016 20:13

Im just starting with the front end development projects and am trying to figure out the quote machine app. I'm running into problems though. I'm currently just trying to change the text of a div to "Hello World" by pressing a button but nothing happens. The code looks like this

HTML:

<div class="quote">
  Quote goes here
</div>
<div class="button-div">
  <button id ="getQuote" class="btn btn-primary">
    Get new quote
  </button>
</div>

JS

$(document).ready(function() {
    $("#getQuote").on("click", function() {
       $(".quote").html("Hello World"); 
    });
 });
Mikail Bayram
@mikail1998
Oct 05 2016 20:13
can we see the codepen link
@HankyP
Henrik Helmius
@HankyP
Oct 05 2016 20:13
Mikail Bayram
@mikail1998
Oct 05 2016 20:15
first of all
you didnt add jquery in the js tab
@HankyP do you need assistance for that? Im willing to help
second of all put the quote goes here into <p> tags
@HankyP thats all of "alls" :D
Henrik Helmius
@HankyP
Oct 05 2016 20:17
@mikail1998 Thanks a lot
CamperBot
@camperbot
Oct 05 2016 20:17
hankyp sends brownie points to @mikail1998 :sparkles: :thumbsup: :sparkles:
:cookie: 244 | @mikail1998 |http://www.freecodecamp.com/mikail1998
Mikail Bayram
@mikail1998
Oct 05 2016 20:18
@HankyP for anything else dont hesitate to send a PM :D
JD Tadlock
@jdtdesigns
Oct 05 2016 20:26
@mikail1998 Here's a solution:
var openSlots, random;

    $(this).text('X');
    $(this).addClass("played");

    openSlots = $('.box').not('.played');
    random = Math.floor(Math.random() * openSlots.length);

    openSlots.eq(random).text('O');
    openSlots.eq(random).addClass('played');
Mikail Bayram
@mikail1998
Oct 05 2016 20:28
didnt know for this :
openSlots = $('.box').not('.played');
xSnowpeltx
@xSnowpeltx
Oct 05 2016 20:28
So I'm working on the wikipedia viewer and I'm getting the error message "No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access." on calling the json and I'm not sure what an access-control-allow-origin header is and the stuff I found googling all seemed really complicated. Any ideas what this means?
JD Tadlock
@jdtdesigns
Oct 05 2016 20:30
@xSnowpeltx You need to return jsonp by adding '&callback=?' to the end of the api url ;)
xSnowpeltx
@xSnowpeltx
Oct 05 2016 20:32
@jdtdesigns thanks! that fixed it
CamperBot
@camperbot
Oct 05 2016 20:32
xsnowpeltx sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 663 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
reg0r
@reg0r
Oct 05 2016 20:36
Hi everyone! I'm almost finish my weather app but I can't make it to work on Chrome. Can somebody give me some advice how to handle this issue?
https://codepen.io/reg0r/full/pEdBGr/
JD Tadlock
@jdtdesigns
Oct 05 2016 20:40
@reg0r I would first separate your functionality into separate functions (getLocation, getWeather). Then you'll need to check for chrome and use an ip locator api if user is using chrome and use navigator for other browsers. You can no longer use http with navigator in chrome.
Personacode
@Personacode
Oct 05 2016 20:41
How long should I spend on the portfolio? It's been two days and I can't seem to get anywhere. All I've done is added a few buttons
JD Tadlock
@jdtdesigns
Oct 05 2016 20:41
people have spent a year lol @Personacode
this stuff isn't easy at all
Personacode
@Personacode
Oct 05 2016 20:42
that's too long :D I'm going to skip it and come back to it
JD Tadlock
@jdtdesigns
Oct 05 2016 20:42
you've probably been fooled by the youtube ads
@Personacode Just know the portfolio/tribute are the easiest things you will do.
Personacode
@Personacode
Oct 05 2016 20:42
no I haven't. I have adblock plus
haha
JD Tadlock
@jdtdesigns
Oct 05 2016 20:43
So moving forward will only put up more walls that you will get stuck on.
Personacode
@Personacode
Oct 05 2016 20:43
noted. I might take the html and css courses again
JD Tadlock
@jdtdesigns
Oct 05 2016 20:43
It's what it takes to learn this
Personacode
@Personacode
Oct 05 2016 20:43
maybe that will help keep it in my head
well I'm doing the js part now and it's not hard
JD Tadlock
@jdtdesigns
Oct 05 2016 20:45
lol
good luck with that
Personacode
@Personacode
Oct 05 2016 20:46
good luck with restarting the html/css courses or with continuing js?
JD Tadlock
@jdtdesigns
Oct 05 2016 20:46
good luck with "it's easy"
Personacode
@Personacode
Oct 05 2016 20:47
well right now it is, and i can always go back to my portfolio. Like you said some people have been working on it for a year
so i don't see what the big deal is
xSnowpeltx
@xSnowpeltx
Oct 05 2016 20:47
... i think all of the twitch streamers have closed their accounts for that project. And the user stories are a little confusingly worded
JD Tadlock
@jdtdesigns
Oct 05 2016 20:48
@xSnowpeltx The ones I used are still up.
xSnowpeltx
@xSnowpeltx
Oct 05 2016 20:50
the ones on the example pen are all closed. can I get a look at yours?
JD Tadlock
@jdtdesigns
Oct 05 2016 20:52
here's an example app I made recently https://codepen.io/jdtadlock/pen/gwXBaQ
@xSnowpeltx The example only shows closed because their code is failing. ;)
xSnowpeltx
@xSnowpeltx
Oct 05 2016 20:53
Thanks! I'll use your list
JD Tadlock
@jdtdesigns
Oct 05 2016 20:54
@xSnowpeltx You can use the example list lol. They still work. ;)
xSnowpeltx
@xSnowpeltx
Oct 05 2016 20:54
oh alrigh
Mikail Bayram
@mikail1998
Oct 05 2016 20:56
@EldarT90 thank you for your help (in pm) :D
CamperBot
@camperbot
Oct 05 2016 20:56
mikail1998 sends brownie points to @eldart90 :sparkles: :thumbsup: :sparkles:
:cookie: 391 | @eldart90 |http://www.freecodecamp.com/eldart90
crwne1
@crwne1
Oct 05 2016 21:18
How in the world am i gonna make a website as good as that example...
JD Tadlock
@jdtdesigns
Oct 05 2016 21:22
@crwne1 It'll take time, but if you stick with it you'll get there. ;)
It took me about 3 years to get to a professional level with html/css
bobmane
@bobmane
Oct 05 2016 21:33
Can anyone check my code? Scrollspy is not working here: http://codepen.io/jon-kagi/pen/rrYWqw
JD Tadlock
@jdtdesigns
Oct 05 2016 21:34
@bobmane works for me
bobmane
@bobmane
Oct 05 2016 21:35
@jdtdesigns you mean bottons change highlight on scroll?
JD Tadlock
@jdtdesigns
Oct 05 2016 21:50
@bobmane sorry, that's not working
I have to run, but i can try to give you an answer in a little bit if no one else has.
bobmane
@bobmane
Oct 05 2016 21:51
@jdtdesigns ok thanks…i cant figure it out so if you can it would be great
CamperBot
@camperbot
Oct 05 2016 21:51
bobmane sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 664 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
xSnowpeltx
@xSnowpeltx
Oct 05 2016 21:57
I have divs with divs inside them and i want the outer div to end lower than the bottom of the last child div but adjusting margin or margin-bottom does nothing, any ideas?
nevermind, padding fixed it
Rafael J. Rodriguez
@Rafase282
Oct 05 2016 21:58
Hello, anyone farily familiar with positioning on css around? I'm trying to the far right side of this collapsible to align properly.
http://codepen.io/Rafase282/pen/ALxaKw?editors=1010
Aaron Bell
@awb715
Oct 05 2016 22:20
can anyone find my error?
the recent projects was supposed to be a completely different seperate block in red
Ananay
@ananaymital
Oct 05 2016 22:23
@Rafase282
.icon p 
  max-width: 3px
  padding-top: 9px
crwne1
@crwne1
Oct 05 2016 22:27
@jdtdesigns Thanks for the advice dude :)
CamperBot
@camperbot
Oct 05 2016 22:27
crwne1 sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 665 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
Ananay
@ananaymital
Oct 05 2016 22:27
@Rafase282 it makes it better
still trying to bring the numbers to the left or the icons to the right
Rafael J. Rodriguez
@Rafase282
Oct 05 2016 22:33
@Deadpool37 currently trying to get it to work on small mobile devices
http://codepen.io/Rafase282/pen/ALxaKw
but the alignment is set
Ananay
@ananaymital
Oct 05 2016 22:37
@Rafase282 smart use of span. Nice :+1:
Rafael J. Rodriguez
@Rafase282
Oct 05 2016 22:39

@Deadpool37 it was thanks to @storbeck

@storbeck my son likes your avatar.

CamperBot
@camperbot
Oct 05 2016 22:39
rafase282 sends brownie points to @deadpool37 and @storbeck :sparkles: :thumbsup: :sparkles:
:cookie: 350 | @deadpool37 |http://www.freecodecamp.com/deadpool37
:star2: 1775 | @storbeck |http://www.freecodecamp.com/storbeck
storbeck
@storbeck
Oct 05 2016 22:48
lol @Rafase282
Rafael J. Rodriguez
@Rafase282
Oct 05 2016 22:50
@storbeck Looks good, I will try to adapt it with the library and see if it works
storbeck
@storbeck
Oct 05 2016 22:50
ok cool
Rafael J. Rodriguez
@Rafase282
Oct 05 2016 22:50
This project is making me learn about positioning and animations
storbeck @storbeck nods
xSnowpeltx
@xSnowpeltx
Oct 05 2016 22:50
I don't want to bother with $.ajax when $.getJSON is much simpler and I understand it, but I need to add a header (because twitch needs a user id). Is there a way to add a header to a $.getJSON or do I have to use the $.ajax? If the second, wheres a good place to learn how to format the $.ajax
storbeck
@storbeck
Oct 05 2016 22:51
I never really liked the actual material library very much but I do believe in the material philosphy 100%
i just write my own css to match it
@xSnowpeltx
$.ajax({
  url: 'your url',
  method: 'GET',
  dataType: 'json',
  headers: {
    'header key': 'header value'
  },
  success: function(response) {
    console.log(response);
  }
});
xSnowpeltx
@xSnowpeltx
Oct 05 2016 22:57
weird. I'm getting a 400 bad request
storbeck
@storbeck
Oct 05 2016 22:57
what are you sending
xSnowpeltx
@xSnowpeltx
Oct 05 2016 23:00
i think i mightve figured it out
turns out i wasnt using the whole client id
crwne1
@crwne1
Oct 05 2016 23:05
how do i change color of links?
Rafael J. Rodriguez
@Rafase282
Oct 05 2016 23:20
@crwne1
a { color: blue;}
Aaron Bell
@awb715
Oct 05 2016 23:23
</a>
oops
can someone explain why my page got all linky
and the page jumps arent working
Mark
@vinarius
Oct 05 2016 23:32
Hey friends, can someone explain why http://codepen.io/vinarius/pen/QKbZRp works, but https://codepen.io/vinarius/pen/QKbZRp (https) does not work here?
storbeck
@storbeck
Oct 05 2016 23:32
          <A NAME="#about">
      Entrepreneur & World Traveler
    </h3>
you have a few things like that which you didn't close
@awb715 ^
@vinarius you can't make an ajax call to http if you're on https

if you open the developer console it says

Mixed Content: The page at 'https://codepen.io/vinarius/pen/QKbZRp' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://ip-api.com/json'. This request has been blocked; the content must be served over HTTPS.

Mark
@vinarius
Oct 05 2016 23:34
@storbeck when you say ajax call are you referring to $.getJSON ?
storbeck
@storbeck
Oct 05 2016 23:34
yes
Mark
@vinarius
Oct 05 2016 23:35
is there a way to have it work for both?
or do i just have to add in the extra code
i.e. if(not on http){ do something for https instead}
storbeck
@storbeck
Oct 05 2016 23:36
you can remove the http: from your link and just start them with //
but openweathermap doesn't support https
Mark
@vinarius
Oct 05 2016 23:36
oh ok
Aaron Bell
@awb715
Oct 05 2016 23:37
you have to close those with a </a>?
@storbeck
storbeck
@storbeck
Oct 05 2016 23:37
yeah but i'm not clear why you are using <a name='something'>
vínαч puppαl
@vinaypuppal
Oct 05 2016 23:37

@vinarius
is there a way to have it work for both?
or do i just have to add in the extra code
i.e. if(not on http){ do something for https instead}

@vinarius Weather Underground's autoip weather url which works over HTTP/HTTPS and gives you ip-based location + weather_data+icon_img_url all in one URL. https://api.wunderground.com/api/<API KEY>/conditions/q/autoip.json

Aaron Bell
@awb715
Oct 05 2016 23:37
some websitetold me to
thats how you link it
or how do i
xSnowpeltx
@xSnowpeltx
Oct 05 2016 23:38
.... I cant seem to figure out how to give my <img> elements new srcs in the js. my code is$(box + " .profimg").attr("src", data.logo); where box is a variable holding the string for the id of the div im working in\
i can call data.logo just fine
Mark
@vinarius
Oct 05 2016 23:38
@vinaypuppal nice, thanks
CamperBot
@camperbot
Oct 05 2016 23:38
vinarius sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 597 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
xSnowpeltx
@xSnowpeltx
Oct 05 2016 23:41
also im trying to modify an array with a $.getJSON that I set and want to call outside of it (for the twitch project, putting offline users in an array so I can call a different api to get their info) but it doesnt seem to modify it.
Aaron Bell
@awb715
Oct 05 2016 23:41
@storbeck
vínαч puppαl
@vinaypuppal
Oct 05 2016 23:41
@xSnowpeltx that code should work , if not do you see any errors in chrome/browser console
Aaron Bell
@awb715
Oct 05 2016 23:41
how do you properly link it
xSnowpeltx
@xSnowpeltx
Oct 05 2016 23:42
oh wait the second thing is probably fine
im not getting any errors
storbeck
@storbeck
Oct 05 2016 23:42
@awb715 <h3 id='#youranchor">
Aaron Bell
@awb715
Oct 05 2016 23:43
is the top part right
vínαч puppαl
@vinaypuppal
Oct 05 2016 23:43
@xSnowpeltx can you provide a link to your pen
Aaron Bell
@awb715
Oct 05 2016 23:45
@storbeck not working for me
xSnowpeltx
@xSnowpeltx
Oct 05 2016 23:45
actually for some reason variables modified within the $.getJSON dont remain modified outside of them
storbeck
@storbeck
Oct 05 2016 23:49
@awb715
<a href='#content'>Content</a>

<div id='content'>Your Content</div>
The link will bring you to the element with the same ID
that's how anchor tags work when using IDs
using name on an anchor tag is obsolete and shouldn't be used
vínαч puppαl
@vinaypuppal
Oct 05 2016 23:53

@xSnowpeltx Some suggestion, instead of predefining HTML divs streamers you can do that in JS with data you got from API like below and append it to some container in HTML

var channel = '<div class="user'+ offline+'" id="box1"> <img class="profImg" src="'+img-url+'" alt="Profile Image"> <div class="status">'+offline+'</div><div class="username">'+username+'</div> <div class="info">'+info+'</div></div>'
$('.streamers').append(channel);

where offline, img-url ...etc are variables.
I think what your doing now is hard to track and extend.

@xSnowpeltx and console.log(offline); is not accessible because $.getJSON is Asynchronous so since you placed after $.getJSON it gets executed before getJSON API call is complete, so offline is [] only
Aaron Bell
@awb715
Oct 05 2016 23:56
@storbeck its working now but not perfectly
@storbeck thanks
CamperBot
@camperbot
Oct 05 2016 23:56
awb715 sends brownie points to @storbeck :sparkles: :thumbsup: :sparkles:
:star2: 1776 | @storbeck |http://www.freecodecamp.com/storbeck
storbeck
@storbeck
Oct 05 2016 23:56
yw
Aaron Bell
@awb715
Oct 05 2016 23:57
is there a way to make it work better or no
xSnowpeltx
@xSnowpeltx
Oct 05 2016 23:57
So how do I fix it and make it so I can access it?
vínαч puppαl
@vinaypuppal
Oct 05 2016 23:59
@xSnowpeltx the reason why images are not working is
$(box + " .profimg").attr("src", data.logo); in html you have profImg so change to $(box + " .profImg").attr("src", data.logo); images will work :smile: