These are chat archives for FreeCodeCamp/HelpFrontEnd

26th
Feb 2017
Prakash Shiwakoti
@pshiwakoti1
Feb 26 2017 00:11
hello I am not able to output display_name
can someone look at my pencode
Prakash Shiwakoti
@pshiwakoti1
Feb 26 2017 00:25
anyone here
Prakash Shiwakoti
@pshiwakoti1
Feb 26 2017 00:35
is everyone offline
Tom
@moT01
Feb 26 2017 00:43
whats up @pshiwakoti1
Prakash Shiwakoti
@pshiwakoti1
Feb 26 2017 00:44
hi @moT01 can u please look at my pencode
Tom
@moT01
Feb 26 2017 00:44
gotta look at how to access display_name
youre close
ESLMiguel
@ESLMiguel
Feb 26 2017 00:45
Good morning all :sunrise:
Tom
@moT01
Feb 26 2017 00:45
i think
ESLMiguel
@ESLMiguel
Feb 26 2017 00:45
I would try to help but I'm just starting on the wikipedia project myself
Tom
@moT01
Feb 26 2017 00:45
i guess i just glanced at the code
Prakash Shiwakoti
@pshiwakoti1
Feb 26 2017 00:45
ok
Tom
@moT01
Feb 26 2017 00:46
isnt it showing the name
Prakash Shiwakoti
@pshiwakoti1
Feb 26 2017 00:46
yes
thats not a channel name is it
how do i display logo
Tom
@moT01
Feb 26 2017 00:48
gotta find the logo image in the object and put it into the html as an image src
Prakash Shiwakoti
@pshiwakoti1
Feb 26 2017 00:48
ok
I wonder how do I get all offline and online followers
do i have to loop
Tom
@moT01
Feb 26 2017 00:50
offline and online followers
the channels or followers?
Prakash Shiwakoti
@pshiwakoti1
Feb 26 2017 00:50
channels
right now Im showing followers i guess
im so confused
Tom
@moT01
Feb 26 2017 00:51
i dont think who the followers are, is in the object data, i think it only shows how many followers the channel has
a loop makes sense, but it might have issues
Prakash Shiwakoti
@pshiwakoti1
Feb 26 2017 00:52
ok
i think that's the way to go
Prakash Shiwakoti
@pshiwakoti1
Feb 26 2017 00:52
ok
Tom
@moT01
Feb 26 2017 00:53
good evening @ESLMiguel
@thodorisanta your switch at the start could probly be a function
@thodorisanta when i push the first # it puts a 0 in front
Tom
@moT01
Feb 26 2017 00:59
@thodorisanta try .2 * .2
i can push the decimal after i hit =, not sure if that's supposed to be like that, probly not
9*9= .
but for the most part it seems to be working pretty good
@thodorisanta there's an analyze option in the little dropdown menu on the right side of each section of codepen (little arrow), ...showing some minor errors there
some can probly be ignored
Prakash Shiwakoti
@pshiwakoti1
Feb 26 2017 02:03
hello guys
so far I got only 1 channel. How do I get all channels? Do I have to loop around some data? if yes which one? please suggest
Cory
@cfirst
Feb 26 2017 02:05
Hm..
Prakash Shiwakoti
@pshiwakoti1
Feb 26 2017 02:06
@moT01 are you there
Tom
@moT01
Feb 26 2017 02:06
you need to make a new url and make another .getJSON call for each channel you want to get data for
Prakash Shiwakoti
@pshiwakoti1
Feb 26 2017 02:07
which api do I call?
Tom
@moT01
Feb 26 2017 02:08
there's three different urls for twitch to get data
so it depends what data you need i guess
Prakash Shiwakoti
@pshiwakoti1
Feb 26 2017 02:09
so for each channel I need to getJSON and aattach to html
Tom
@moT01
Feb 26 2017 02:09
yup
might want to refer to the hint i gave you earlier
Prakash Shiwakoti
@pshiwakoti1
Feb 26 2017 02:10
isn't a list of channels in some json data?
i could look around that and get all channels
Tom
@moT01
Feb 26 2017 02:10
there's an awful lot of channels
not a bad idea
i would maybe just start with two channels
Prakash Shiwakoti
@pshiwakoti1
Feb 26 2017 02:11
ok
Gulsvi
@gulsvi
Feb 26 2017 02:11
@pshiwakoti1 Be sure to read the challenge instructions. They give you the channels to use: https://www.freecodecamp.com/challenges/use-the-twitchtv-json-api
Tom
@moT01
Feb 26 2017 02:12
@SkyCoder01 hows it goin
Gulsvi
@gulsvi
Feb 26 2017 02:12
Good, how about you @moT01 ?
Have a cold actually...and my girlfriend too, so no fun tonight. Staying at home
Tom
@moT01
Feb 26 2017 02:14
not working on my project
Gulsvi
@gulsvi
Feb 26 2017 02:16
I'm doing algorithms in between chat here
DNA pairing now
Binaya Adhikari
@mrbinayadhikari
Feb 26 2017 02:25
hello, i'm new around here
need some help
Tom
@moT01
Feb 26 2017 02:26
@mrbinayadhikari whats up
Binaya Adhikari
@mrbinayadhikari
Feb 26 2017 02:28
i'm building tribute page. I'm using sublime text instead of codepen. It works fine in my browser but the image is not responsive in codepen.
Tom
@moT01
Feb 26 2017 02:29
if you share code, or a pen you would be more likely to get help, ...using bootstrap? did you add bootstrap on codepen?
Tom
@moT01
Feb 26 2017 02:31
so whats the desired result
Binaya Adhikari
@mrbinayadhikari
Feb 26 2017 02:31
The image should be responsive
Agrim
@scooterman751
Feb 26 2017 02:31
just put a class of img-responsive to ur image
ok
Gulsvi
@gulsvi
Feb 26 2017 02:32
@scooterman751 He did :)
Agrim
@scooterman751
Feb 26 2017 02:32
nvm u did
so it should be responsive
Gulsvi
@gulsvi
Feb 26 2017 02:32
Wrong bootstrap version added
Binaya Adhikari
@mrbinayadhikari
Feb 26 2017 02:32
it works well on my browser
Gulsvi
@gulsvi
Feb 26 2017 02:33
It's img-fluid in Bootstrap 4. Or, you can open your codepen settings and use Bootstrap 3 instead. https://www.bootstrapcdn.com/
Tom
@moT01
Feb 26 2017 02:33
that's what i was thinking, wrong sytax for the class, ...ive used about none of bootstrap
Gulsvi
@gulsvi
Feb 26 2017 02:34
I think it's time to just dive in and do everything in Bootstrap 4 now, but I don't know much about flexbox yet
A little confusing...I was getting comfortable with Bootstrap 3
Johnny
@jtan3
Feb 26 2017 02:34
@SkyCoder01 http://flexboxfroggy.com/ try this?
Gulsvi
@gulsvi
Feb 26 2017 02:35
@jtan3 That's cool!! Thanks
CamperBot
@camperbot
Feb 26 2017 02:35
skycoder01 sends brownie points to @jtan3 :sparkles: :thumbsup: :sparkles:
:cookie: 319 | @jtan3 |http://www.freecodecamp.com/jtan3
Gulsvi
@gulsvi
Feb 26 2017 02:35
I saw this the other day, but need to study more: http://www.flexboxdefense.com/
Binaya Adhikari
@mrbinayadhikari
Feb 26 2017 02:36
Yes its working now
thank you so much guys
Gulsvi
@gulsvi
Feb 26 2017 02:36
@moT01 Wow, that link looks very useful. Thanks
CamperBot
@camperbot
Feb 26 2017 02:36
skycoder01 sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 533 | @mot01 |http://www.freecodecamp.com/mot01
Johnny
@jtan3
Feb 26 2017 02:36
@SkyCoder01 cool. thanks
CamperBot
@camperbot
Feb 26 2017 02:36
jtan3 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 348 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Tom
@moT01
Feb 26 2017 02:37
those games are hilarious
but might be good learning tools im not sure
Prakash Shiwakoti
@pshiwakoti1
Feb 26 2017 03:24
hi @moT01 will you please suggest me how to get logo. I tried but didn't know how to attach to html. Can you please look at my pen https://codepen.io/pshiwakoti1/pen/JWoNaE?editors=1111
Prakash Shiwakoti
@pshiwakoti1
Feb 26 2017 03:31
i tried attr but not functional
deaninous
@deaninous
Feb 26 2017 03:31
@pshiwakoti1 i would log the json response and look for it. Also not sure but your if conditions underbthe js tab. Say "if the json response is null then the site is online"
Tom
@moT01
Feb 26 2017 03:31
i tried it
it worked
Prakash Shiwakoti
@pshiwakoti1
Feb 26 2017 03:32
@deaninous it was showing online just a while ago
right now its showing offline
@deaninous are you saying switch my if conditions?
deaninous
@deaninous
Feb 26 2017 03:35
Yes. I would try that. Writing from a phone so i cant double check
@pshiwakoti1
Prakash Shiwakoti
@pshiwakoti1
Feb 26 2017 03:36
ok
emamadordev
@emamadordev
Feb 26 2017 03:39
who uses github?
deaninous
@deaninous
Feb 26 2017 03:41
Is github not a pre_cond to using gitter? @emamador
emamadordev
@emamadordev
Feb 26 2017 03:42
@deaninous yeah lol. I should rephrase my question. Who here frequently uses github?
Robert Richey
@0x0936
Feb 26 2017 03:42
that sounds like a question preceding the real question
wizardMonkie
@wizardMonkie
Feb 26 2017 03:44
what the heck, building a personal portfolio wants navigation? be nice if they went over that first : P silly website after all, without youtube this would be nightmarish
deaninous
@deaninous
Feb 26 2017 03:44
Lol @emamador lol
Frank
@frankg10
Feb 26 2017 03:45
hey can somone help with a css problem
deaninous
@deaninous
Feb 26 2017 03:45
@wizardMonkie You alright there? Use a rubber duckie lol
@frankg10 ask away
Frank
@frankg10
Feb 26 2017 03:45
finally! lol
thanks
but
wizardMonkie
@wizardMonkie
Feb 26 2017 03:46
im alright yea, not my first language. I just find this site silly for beginners. keeps making reference to things not covered
Tom
@moT01
Feb 26 2017 03:46
@wizardMonkie it wants you to figure it out on your own, ...i would say to just make a simple portfolio and move on
Frank
@frankg10
Feb 26 2017 03:47
if you look on this codepen - what im trying to achieve is when you hover over an li a border will appear underneath the entire header
Tom
@moT01
Feb 26 2017 03:47
it
wizardMonkie
@wizardMonkie
Feb 26 2017 03:47
i understand completely what it wants, just making a point if someone really had no idea, this would make them stop dead in tracks
deaninous
@deaninous
Feb 26 2017 03:47
Yea. They make lots of use of RAR
but only when you hover over a list item
deaninous
@deaninous
Feb 26 2017 03:48
One quick sec. @frankg10
Frank
@frankg10
Feb 26 2017 03:48
and when your mouse moves away from the list item the border should go awy
thank you
wizardMonkie
@wizardMonkie
Feb 26 2017 03:48
Most peopel even teachers are not aware of the different way people learn, some are visual, some are tactile bla bla bla, its a one direction approach
Frank
@frankg10
Feb 26 2017 03:49
im almost there but i cant figure out the part where border should disappear when the user hovers away from the list item
its the green border btw
deaninous
@deaninous
Feb 26 2017 03:49
@wizardMonkie maybe you need a short break lol
Tom
@moT01
Feb 26 2017 03:49
@wizardMonkie i really dont like that it doesn't want you to look at the code of the example
wizardMonkie
@wizardMonkie
Feb 26 2017 03:50
dont need a break, my hobby in general is coding, i d it all day long, this is just new to me, and im taking in consideration how peopel would feel if they never looked at anything before
Tom
@moT01
Feb 26 2017 03:50
@frankg10 theres a way on a hover to change the style of something else
Prakash Shiwakoti
@pshiwakoti1
Feb 26 2017 03:51
@moT01 will you please look at my logo. Its showing dead image
Frank
@frankg10
Feb 26 2017 03:51
@moT01 hmm i've tried diffent ways
@moT01 could you elaborate please?
different*
Tom
@moT01
Feb 26 2017 03:52
what are you trying to achieve, ...isnt there a green border there, ...isnt that what you were looking for
what i meant was like on a:hover you can set setting for your .otherclass
Frank
@frankg10
Feb 26 2017 03:53
@moT01 Yes but if you hover over the rest of header the border appears .
Tom
@moT01
Feb 26 2017 03:53
a:hover > .header {
}
something like that
wizardMonkie
@wizardMonkie
Feb 26 2017 03:54
@moT01 thats what i mean by visual learner, some people need to see an end result to keep reminding themselves of the structure
Frank
@frankg10
Feb 26 2017 03:54
@moT01 And what i want is for the green border only to appear when the user hovers on the list item
@moT01 but when they move away from the list item the green border should go away even if the user cursor is still in another area in the header
maybe something like that, @frankg10
Prakash Shiwakoti
@pshiwakoti1
Feb 26 2017 03:56
can u please look at my logo @moT01 ?
Tom
@moT01
Feb 26 2017 03:56
i gave you a link to what you need to use
Frank
@frankg10
Feb 26 2017 03:57
@moT01 thanks i'm going to see how i can make this work with my navigation
Tom
@moT01
Feb 26 2017 03:57
and it worked for me
CamperBot
@camperbot
Feb 26 2017 03:57
:cookie: 534 | @mot01 |http://www.freecodecamp.com/mot01
frankg10 sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
Frank
@frankg10
Feb 26 2017 03:57
@moT01 thanks
CamperBot
@camperbot
Feb 26 2017 03:57
frankg10 sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:warning: frankg10 already gave mot01 points
deaninous
@deaninous
Feb 26 2017 03:59
@pshiwakoti1 check the quotes in your logo src attribute
Prakash Shiwakoti
@pshiwakoti1
Feb 26 2017 03:59
ok
emamadordev
@emamadordev
Feb 26 2017 04:00
@0x0936 it is lol
Prakash Shiwakoti
@pshiwakoti1
Feb 26 2017 04:01
@deaninous I don't think its quotes
I tried using double quotes it didn't work
Tom
@moT01
Feb 26 2017 04:01
now i know
Robert Richey
@0x0936
Feb 26 2017 04:03
@pshiwakoti1 the entire img tag being appended is in a string
data2.logo is a variable
Prakash Shiwakoti
@pshiwakoti1
Feb 26 2017 04:03
ok should i break it
ok
I tried that also but let me try
again
it worked now
thanks
Tom
@moT01
Feb 26 2017 04:08
thanks @moT01
CamperBot
@camperbot
Feb 26 2017 04:08
sorry mot01, you can't send brownie points to yourself! :sparkles: :sparkles:
Prakash Shiwakoti
@pshiwakoti1
Feb 26 2017 04:18
hi @deaninous I got my logo to work but its too big. I tried CSS to make it fit within the same row but didn't work. Can you please check
since Im passing the image from jquery to html I don't know how to resize it
deaninous
@deaninous
Feb 26 2017 04:21
@pshiwakoti1 one sec
Prakash Shiwakoti
@pshiwakoti1
Feb 26 2017 04:21
ok
Frank
@frankg10
Feb 26 2017 04:22
ok ok okok ok ok
this is the closest i've gotten
so how when
@deaninous @moT01 you hover only over the list the border appears under all the links?
deaninous
@deaninous
Feb 26 2017 04:23
Logging on from a laptop
Frank
@frankg10
Feb 26 2017 04:24
@deaninous @moT01 even when your cursor is on the header the border disappears and this is what i wanted EXCEPT
@moT01 @deaninous i just need to black border to appear underneath the ENTIRE header not just the links
@moT01 @deaninous ugh im so close
@deaninous @moT01 been trying to get this effect all day literally. spent the whole time in my room trying to figure this out
and im so close
Prakash Shiwakoti
@pshiwakoti1
Feb 26 2017 04:28
anyone here
Robert Richey
@0x0936
Feb 26 2017 04:28
yep
Prakash Shiwakoti
@pshiwakoti1
Feb 26 2017 04:28
will you please look at my codepen
deaninous
@deaninous
Feb 26 2017 04:28
cool
Prakash Shiwakoti
@pshiwakoti1
Feb 26 2017 04:28
oh @deaninous is here great
i need to resize my logo
how do I do that
i tried css but didn't work
Robert Richey
@0x0936
Feb 26 2017 04:29
give the img a class of something like "logo" and in css target .logo
deaninous
@deaninous
Feb 26 2017 04:29
@pshiwakoti1 did you want the freecodecamp logo where the tv box is?
Prakash Shiwakoti
@pshiwakoti1
Feb 26 2017 04:30
I don't know which one
thats what I got from the url
Robert Richey
@0x0936
Feb 26 2017 04:31
@pshiwakoti1 your current css is targeting the container of #logo but it needs to target the img tag
Prakash Shiwakoti
@pshiwakoti1
Feb 26 2017 04:31
oh ok
let me try that
deaninous
@deaninous
Feb 26 2017 04:32
$('#logo').prepend('<img src =https://static-cdn.jtvnw.net/jtv_user_pictures/freecodecamp-profile_image-d9514f2df0962329-300x300.png>');
Try this and see if that is what you wanted
Prakash Shiwakoti
@pshiwakoti1
Feb 26 2017 04:39
that is what I wanted
but Im still unable to resize my image
Robert Richey
@0x0936
Feb 26 2017 04:41
you wrote the css for .logoImage but your img being appended doesn't have the class logoImage
Prakash Shiwakoti
@pshiwakoti1
Feb 26 2017 04:41
I used the class before but didn't work
I just changed my code, still same
Frank
@frankg10
Feb 26 2017 04:42
OMG I DID IT
i think
Robert Richey
@0x0936
Feb 26 2017 04:43
@pshiwakoti1 I don't see any changes. Did you click save?
@pshiwakoti1 nm, I see the changes
Prakash Shiwakoti
@pshiwakoti1
Feb 26 2017 04:44
i just saved it Robert
Robert Richey
@0x0936
Feb 26 2017 04:44
the img still does not have a class
you've been changing the class and id on the container for the image
Prakash Shiwakoti
@pshiwakoti1
Feb 26 2017 04:44
yes
Robert Richey
@0x0936
Feb 26 2017 04:44
and writing css targeting that container
you need to use css to target the img
Kolkian
@Kolkian
Feb 26 2017 04:44
heya folks
Prakash Shiwakoti
@pshiwakoti1
Feb 26 2017 04:45
Robert do I haveto define separate Img SRC tag
Robert Richey
@0x0936
Feb 26 2017 04:45
no. img tags can have only one src attribute
there are many ways to do this
Prakash Shiwakoti
@pshiwakoti1
Feb 26 2017 04:45
ok
Robert Richey
@0x0936
Feb 26 2017 04:45
I'll show you one way
Prakash Shiwakoti
@pshiwakoti1
Feb 26 2017 04:46
ok
Kolkian
@Kolkian
Feb 26 2017 04:46
can anyone look at my tribute page and tell me what I can do better?
https://codepen.io/Kolkian/pen/RpNKQd
apart from conducting better research
Frank
@frankg10
Feb 26 2017 04:47
@moT01 @deaninous check it!! http://codepen.io/frenchfries/pen/yMyRgZ
@deaninous @moT01 im so happy rn, thanks you guys
CamperBot
@camperbot
Feb 26 2017 04:47
frankg10 sends brownie points to @deaninous and @mot01 :sparkles: :thumbsup: :sparkles:
:warning: frankg10 already gave mot01 points
:cookie: 313 | @deaninous |http://www.freecodecamp.com/deaninous
Robert Richey
@0x0936
Feb 26 2017 04:47
don't change the js. in css, target the container and use the child selector (which is a space) followed by the img selector
#logo img {

  height:10px;
  width:5px:

}
@pshiwakoti1
Prakash Shiwakoti
@pshiwakoti1
Feb 26 2017 04:47
oh isee
Johnny
@jtan3
Feb 26 2017 04:49
@Kolkian you could center your page
Prakash Shiwakoti
@pshiwakoti1
Feb 26 2017 04:49
thanks Robert it worked
@0x0936 thanks
CamperBot
@camperbot
Feb 26 2017 04:49
pshiwakoti1 sends brownie points to @0x0936 :sparkles: :thumbsup: :sparkles:
:star2: 2650 | @0x0936 |http://www.freecodecamp.com/0x0936
Robert Richey
@0x0936
Feb 26 2017 04:50
Cheers
Kolkian
@Kolkian
Feb 26 2017 04:52
@jtan3 how would I do that apart from setting a margin?
Johnny
@jtan3
Feb 26 2017 04:57
@Kolkian in your css body margin: its pushed 500px; to the right
mamun
@fsdmamun
Feb 26 2017 04:57
backspace of js calculator isn't working, help http://codepen.io/fsdmamun/pen/rWqyVz?editors=0010
Johnny
@jtan3
Feb 26 2017 04:58
@Kolkian unless you wanted it that way
Kolkian
@Kolkian
Feb 26 2017 04:59
@jtan3 pretty sure that's both left and right (https://www.w3schools.com/css/css_margin.asp)
Johnny
@jtan3
Feb 26 2017 05:00
@Kolkian if you take it out its pretty center
Gulsvi
@gulsvi
Feb 26 2017 05:00
@fsdmamun To set the text in an element: element.text('text goes here')
To get it's length, element.text().length
mamun
@fsdmamun
Feb 26 2017 05:01
ok, checking
Gulsvi
@gulsvi
Feb 26 2017 05:02
You have your answer with a different selector two lines above
Gulsvi
@gulsvi
Feb 26 2017 05:09
@fsdmamun :+1: Nice work
mamun
@fsdmamun
Feb 26 2017 05:10
it's behaving like clear button, @SkyCoder01 can you pls show your code here
on testing with other places it's working but not in the same input area
Gulsvi
@gulsvi
Feb 26 2017 05:14
@fsdmamun Sorry, was looking at it in isolation. The code is correct, but the function runs several times
mamun
@fsdmamun
Feb 26 2017 05:14
any alternative way?
Gulsvi
@gulsvi
Feb 26 2017 05:15
Add this to the click function: console.log(show.text())
You'll see that it's acting as if it is clicked several times
Any reason you can think of why that would happen?
@fsdmamun move it out of your .forEach function
James Moore
@James-N-M
Feb 26 2017 05:17
does anyone notice any bugs in this code
The code thats not working is the stuff that has to do with the dragging of the box
mamun
@fsdmamun
Feb 26 2017 05:25
i noticed it before coding in different way while final output is zero every time, but I hear about eval() it should avoid either this or that project for evil() behavior, however i didn't know much about this but i use in this work @SkyCoder01
i am surprised for it's working within another element but not self
mamun
@fsdmamun
Feb 26 2017 05:30
however thanks @SkyCoder01 for your time to my project
CamperBot
@camperbot
Feb 26 2017 05:30
fsdmamun sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 350 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Aftab Parvez
@aftabparvez
Feb 26 2017 05:34
Anyone has a good cheat sheet for bootstrap?
mamun
@fsdmamun
Feb 26 2017 05:37
@SkyCoder01 it's working finally, thank you once again
Ken Haduch
@khaduch
Feb 26 2017 05:40
@James-N-M - do you actually have a codepen project that has this in? The link that you posted is just a link to codepen, for a blank project.
mamun
@fsdmamun
Feb 26 2017 05:41
oh! that pen opens for the click person, no user link
Gulsvi
@gulsvi
Feb 26 2017 05:42
@fsdmamun Glad that helped! I think eval() is only evil if you let people put their own text into your calculator. If input is restricted to the buttons on your calculator, it should be fine. At least that's my understanding from reading a few articles :p
mamun
@fsdmamun
Feb 26 2017 05:43
but your last idea works here, i did it
I want to change the background color in the dropdown button when I click on the "more(name of button )" button the color changes to black I don't know how to change it, I am using bootstrap http://haroldgomez777.pythonanywhere.com/
playingwithinfinity
@playingwithinfinity
Feb 26 2017 07:40
Why isn't Navbar Brand working? http://codepen.io/jimpix/pen/vxYOmd
playingwithinfinity
@playingwithinfinity
Feb 26 2017 08:00
Why isn't it wroking?
WhY?
Dany Din
@danydin
Feb 26 2017 08:09
its working whats the problem
it doesnt reszize self just because u called it navbar u've to css it yourself
for the desired outcome
html just display it plain what you write
playingwithinfinity
@playingwithinfinity
Feb 26 2017 08:20
@danydin It's not working.
Dany Din
@danydin
Feb 26 2017 08:23
its working lol
now it changed
wat are u trying to achieve ??
playingwithinfinity
@playingwithinfinity
Feb 26 2017 08:24
It's not working.
I don't see the navbar.
Andro Castor
@AndroCastor
Feb 26 2017 08:30
This is weird. When I make my jumbotron slightly opaque it jumps in front of my unordered-list-navbar on the top.. anyone know why?
https://codepen.io/AndroCastor/pen/RpNLrV
René
@RenevandenHeuvel
Feb 26 2017 08:37
hi everyone, in this code https://codepen.io/freeCodeCamp/pen/YqLyXB of a challenge the html starts with .container. How is that, it looks like a class in html? This confused me because I learned that a container is created with <div class="container"> Can someone clarify this for me?
Hugo
@Yazrihm
Feb 26 2017 08:40
Is there any AJAX course for the Intermediate Front End DEV projects ?
playingwithinfinity
@playingwithinfinity
Feb 26 2017 08:43
Someone help me with the navbar... http://codepen.io/jimpix/pen/XMJQzP
Andro Castor
@AndroCastor
Feb 26 2017 08:46
@playingwithinfinity When I have trouble with bootstrap, it is usually because I've accidently used boostrap4.0.0 .. Have you tried using bootstrap 3 instead?
playingwithinfinity
@playingwithinfinity
Feb 26 2017 08:49
@AndroCastor How do I include 3 instead of 4 in codepen?
Andro Castor
@AndroCastor
Feb 26 2017 08:49
@playingwithinfinity Use this one instead, in settings https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
Under CSS in settings, of course
playingwithinfinity
@playingwithinfinity
Feb 26 2017 08:50
@AndroCastor Thanks!
CamperBot
@camperbot
Feb 26 2017 08:50
playingwithinfinity sends brownie points to @androcastor :sparkles: :thumbsup: :sparkles:
:cookie: 122 | @androcastor |http://www.freecodecamp.com/androcastor
Andro Castor
@AndroCastor
Feb 26 2017 08:51
@playingwithinfinity No problem, did it work?
Well, it works here, at least
playingwithinfinity
@playingwithinfinity
Feb 26 2017 08:54
@AndroCastor still not working!
Andro Castor
@AndroCastor
Feb 26 2017 08:54
Hmm.. just began using it in my portfolio.. works fine here
You're writing <nav class="navbar navbar-light bg-faded">
I'm using div class there in my code
Andro Castor
@AndroCastor
Feb 26 2017 09:00
You're still using bootstrap 4.0.0.
Works fine in 3.3.7
I made a fork and changed bootstrap to 3.3.7.
I don't know much about CodePen, but I suppose that fork is in your account now..
Ooh.. no it isn't. CodePen is awesome really, but I haven't got a clue how it works..
playingwithinfinity
@playingwithinfinity
Feb 26 2017 09:37
Can somebody help me with the portfolio page?
Priyanka
@pd21
Feb 26 2017 10:01
@playingwithinfinity whats the problem
Darth Skywalker
@adityaparab
Feb 26 2017 10:23
@playingwithinfinity Referring to yourself in third person singular on your own webpage is kinda weird.. ;)
@alchermd Yes sir! What do you need help with?
John Alcher
@alchermd
Feb 26 2017 10:25
@adityaparab Hey stewie. So I have my github page CNAMEd to a custom domain (see http://www.johnalcher.me). Now the problem is that SSL installation is not possible in Github Pages, so my projects that interact with external APIs are basically toast. Do you know any way to "exclude" a subpage on the CNAME?
As an example, I would like to exclude http://www.johnalcher.me/weather-app since it requires HTTPS. The original page https://alchermd.github.io/weather-app would be preferable for it to work.
Darth Skywalker
@adityaparab
Feb 26 2017 10:29
I see
you have a redirect from your https://alchermd.github.io to your domain
just to be clean, what you want is not show CNAME page while you're viewing this on github.io?
or do you want it invisible everywhere?
but even in case of github.io you're redirecting to your domain
John Alcher
@alchermd
Feb 26 2017 10:31
I want all my subpages redirected to my domain, except for the weather app since it needs an HTTPS to properly work. @adityaparab
Darth Skywalker
@adityaparab
Feb 26 2017 10:32
I see
first
git clone your alchermd.github.io repo on your local system
then copy the entire folder weather-app from your johnalcher.me host
paste it in a folder where you have cloned alchermd.github.io
then update your index.html in your github.io repo
scratch that...
John Alcher
@alchermd
Feb 26 2017 10:35
Yeah I think that won't work
it will still be served through johnalcher.me/weather-app
Darth Skywalker
@adityaparab
Feb 26 2017 10:36
I see you already have an href that points to github.io page
so how are you redirecting this to your domain
do you have some window.location in your code in weather-app?
John Alcher
@alchermd
Feb 26 2017 10:36
I only have a single CNAME, which is @ alchermd.github.io
Darth Skywalker
@adityaparab
Feb 26 2017 10:37
I see
then no idea
John Alcher
@alchermd
Feb 26 2017 10:37

do you have some window.location in your code in weather-app?

No, why? I only have geoLocation for getting the user's location if that's what you're asking.

@adityaparab Yikes. Thanks anyway! :D
CamperBot
@camperbot
Feb 26 2017 10:38
alchermd sends brownie points to @adityaparab :sparkles: :thumbsup: :sparkles:
:cookie: 962 | @adityaparab |http://www.freecodecamp.com/adityaparab
René
@RenevandenHeuvel
Feb 26 2017 10:40

Challenge: Build a Personal Portfolio Webpage

Question: Why are there no brackets in the html part of the example codepen?

John Alcher
@alchermd
Feb 26 2017 10:54
@RenevandenHeuvel Are you looking at the example source code?
René
@RenevandenHeuvel
Feb 26 2017 11:07
@alchermd Yes
John Alcher
@alchermd
Feb 26 2017 11:10
The author is using pug.
Paulius
@PonasVoras
Feb 26 2017 11:49
gday, i would like to know your thoughts on how to pass javascript variables to css
rugano
@rugano
Feb 26 2017 12:05
Hello campers.i have a problem with the codepen editor,i am new to it.after typing the css and jquery code,i am getting exclamation marks(red) at bottom of the code.what does that mean in my personal portfolio web page project?
Edward Nilsson
@Enilsson9
Feb 26 2017 12:06
Hey! Would you guys mind checking my Wikipedia Viewer? https://codepen.io/enilsson9/pen/NdmZpz Pretty simple design but it works... :)
rugano
@rugano
Feb 26 2017 12:08
do i select the preprocessors in css before typing the code or what happens?
Andrew Nichols
@frenata
Feb 26 2017 12:09
Seems to fulfill the user stories nicely @Enilsson9
Zulfan Hameed
@zlfnhmd
Feb 26 2017 12:10
Hello guys I just started my tribute page and I need a little help. http://codepen.io/zlfnhmd/full/dvPEKv/ is my tribute page and as you can see there is a white background for the text. How do I make it transparent so that only the text is visible on top of the black background? Thank You in advance
Andrew Nichols
@frenata
Feb 26 2017 12:12

Although I have strong preference that input boxes allow the user to press 'enter' in addition to being able to click a submit button.

I need to get on with it and do the wiki viewer myself. A quick glance at the API is all I have done so far.

Or possibly just set the background to black and it'll blend it nicely anyway.
René
@RenevandenHeuvel
Feb 26 2017 12:17
@alchermd is that why (pug) that there are no angle brackets in the html?
@alchermd and how did you see that?
René
@RenevandenHeuvel
Feb 26 2017 12:22
@alchermd i see, it's an html pre-processor. thx
CamperBot
@camperbot
Feb 26 2017 12:22
renevandenheuvel sends brownie points to @alchermd :sparkles: :thumbsup: :sparkles:
:cookie: 310 | @alchermd |http://www.freecodecamp.com/alchermd
Michael J Kusdya
@michael-kusdya
Feb 26 2017 12:26
hello, can anyone help me with my portfolio ? when you scroll to the right there is a small white space below the navbar all the way to the bottom, i've tried using devtools but i'm still not too familiar with it so i still couldn't find the problem
http://codepen.io/mjkno1/pen/EZoEXX
Philipp_Lypniakov
@RAYDENFilipp
Feb 26 2017 12:29
Hello! Why doesn't my Navigation bar scroll-spy work properly??
http://codepen.io/RAYDENFilipp/pen/JWomBR
Veronika Krukovich
@VKrukovich
Feb 26 2017 12:37
how to stop duplicate console.log of e and f in ?
Clip2net_170226151707.png
Clip2net_170226151648.png
Spyrantis Theodoros
@thodorisanta
Feb 26 2017 12:52
@moT01 lol why my calculator gives me "0.04000000000000001" after i do 0.2*0,2= :P
Federico Dente
@fez994
Feb 26 2017 13:07
I'm trying to get a random quote from my object, do you know why is not working? http://codepen.io/fez994/pen/GrbqrN
when i click on the button nothing happen, chrome doesn't give me any error so i don't know what is it
Philipp_Lypniakov
@RAYDENFilipp
Feb 26 2017 13:19
Can anybody help me with Scrollspy, it doesn't works as it should
http://codepen.io/RAYDENFilipp/full/JWomBR/
Ayush Bahuguna
@relentless-coder
Feb 26 2017 13:31
I need to learn how to use Jasmine framework. Can someone give me a short intro on test frameworks? I mean what is the need, and how to start on one
Muhammad Muhktar Musa
@mcube25
Feb 26 2017 13:42
pls i want to know how to parse multi character numbers in my calculator codepen as it stands i get only one number if anyone can help i'll be most obliged this is my codepen https://codepen.io/mcube25/pen/PWxLzg
rugano
@rugano
Feb 26 2017 14:06
look at this: https://codepen.io/Njue/full/vxEdym Why is my codepen editor screaming with red exclamation marks at the bottom of css and jquery code?Why are my contact,portfolio and about buttons disappearing?why don't i have </> sign between my bright/dark lines?how can i upload my photo in the web page?why are my social buttons empty?why is my code not changing according to my preprocessor settings?
Saboor Malik
@MathematicsCoding
Feb 26 2017 14:21
Hey is it possible to add image background?
Aniculaesei
@Aniculaesei
Feb 26 2017 14:24
hello guys!Please help me!I cannot make my images responsive mobile with bootstrap(they are not resizing on mobile).can you help me please?thank you http://codepen.io/Aniculaesei/pen/OpJYqr?editors=1000
Lucian Negru
@MrDevo
Feb 26 2017 14:32
@Aniculaesei <div class="col-xs-6">
<h2>Hi!My name is Paul Aniculaesei!I like to code and to play french horn!!!</h2>
not xl
Aniculaesei
@Aniculaesei
Feb 26 2017 14:33
thank you
@MrDevo thank you!
CamperBot
@camperbot
Feb 26 2017 14:33
aniculaesei sends brownie points to @mrdevo :sparkles: :thumbsup: :sparkles:
:cookie: 242 | @mrdevo |http://www.freecodecamp.com/mrdevo
Saboor Malik
@MathematicsCoding
Feb 26 2017 14:34
Codepen...
Ken Haduch
@khaduch
Feb 26 2017 14:35
@rugano - Did you copy your project to CodePen from another system, like your local system? The formatting is not too good for the CodePen view of things, that why I'm asking. And the URLs for the images seem to be malformed - but it could be that you are using something that just doesn't work. Like this: http://placekitten.com/300*150 seems like it should be like this: http://placekitten.com/300/150 but even that doesn't really seem to work, even on their site? So if you have it working somewhere else, you could really compare the codepen setup and see what's going on. It is hard to determine the problems with the messed up formatting... and I don't have too much more time to delve into it now - sorry I couldn't be of more help?
Aman saxena
@neille2406
Feb 26 2017 14:36
blob
where can i find antimated images like tht
Lucian Negru
@MrDevo
Feb 26 2017 14:38
@rugano I guess you copied the source code from the example :)
playingwithinfinity
@playingwithinfinity
Feb 26 2017 14:47
How do I make a scrollspy for my Portolio page.
Aniculaesei
@Aniculaesei
Feb 26 2017 14:49
@camperbot how?
Icah Banton
@remdata
Feb 26 2017 14:50
Hello. I run into this issue each time I start a new pen. What options do I need to specify so that my page will layout correctly when for example I use
class="row", class ="col-xs-#"
Aniculaesei
@Aniculaesei
Feb 26 2017 14:51
guys!Can somebody give me link where I can see how I can use bootstrap responzive design in rows(when I have to use xs...when md).Thank you
playingwithinfinity
@playingwithinfinity
Feb 26 2017 14:52
Check your version of bootstrap though.
This is version 4
Aniculaesei
@Aniculaesei
Feb 26 2017 14:57
can somebody help me to take off the underline for a link when hover?Because text-decoration it's not usefull or i have broked the code.Thank you http://codepen.io/Aniculaesei/details/OpJYqr/
playingwithinfinity
@playingwithinfinity
Feb 26 2017 14:57
How do I make a scrollspy for my Portolio page? http://codepen.io/jimpix/pen/XMJQzP
René
@RenevandenHeuvel
Feb 26 2017 14:57

Hi, can someone answer some of my

Questions:

What is @use postcss-nested;?
What is @use autoprefixer;?
" @use postcss-simple-vars;?
" @use postcss-discard-comments;?

Comment:

I did find some information about postcss, but do the words behind it explain?

Lucian Negru
@MrDevo
Feb 26 2017 15:01
@Aniculaesei text-decoration: none
say you have p:hover { text-decoration: none; }
Aniculaesei
@Aniculaesei
Feb 26 2017 15:02
text-decoration none is not working bro.... :(
i have used it
Lucian Negru
@MrDevo
Feb 26 2017 15:03
let me check your pen
Aniculaesei
@Aniculaesei
Feb 26 2017 15:03
thank you
Lucian Negru
@MrDevo
Feb 26 2017 15:05
@Aniculaesei #header, ul, li { text-decoration: none; }
Aniculaesei
@Aniculaesei
Feb 26 2017 15:05
thank you
@MrDevo thank you
CamperBot
@camperbot
Feb 26 2017 15:06
aniculaesei sends brownie points to @mrdevo :sparkles: :thumbsup: :sparkles:
:warning: aniculaesei already gave mrdevo points
Aniculaesei
@Aniculaesei
Feb 26 2017 15:09
@MrDevo still not working....i dont know why
it;s still blue on hover
Christoph Herr
@christophherr
Feb 26 2017 15:09
@Aniculaesei You have to target the :hover state
nav a:hover
Lucian Negru
@MrDevo
Feb 26 2017 15:10
yes ofc :)
:hover
Dany Din
@danydin
Feb 26 2017 15:11
hey guys
differnce between .innerHTML & .textContent ?
Aniculaesei
@Aniculaesei
Feb 26 2017 15:12
@christophherr thank you
CamperBot
@camperbot
Feb 26 2017 15:12
aniculaesei sends brownie points to @christophherr :sparkles: :thumbsup: :sparkles:
:cookie: 510 | @christophherr |http://www.freecodecamp.com/christophherr
Conrad
@conradOU
Feb 26 2017 15:15
when building a website with bootstrap, can I use <br> or should I relay only on bootstrap?
and it's containers etc.
Dany Din
@danydin
Feb 26 2017 15:16
never use br
use div and css
Conrad
@conradOU
Feb 26 2017 15:16
@danydin thanks man
CamperBot
@camperbot
Feb 26 2017 15:16
conradou sends brownie points to @danydin :sparkles: :thumbsup: :sparkles:
:cookie: 340 | @danydin |http://www.freecodecamp.com/danydin
Dany Din
@danydin
Feb 26 2017 15:17
;)
playingwithinfinity
@playingwithinfinity
Feb 26 2017 15:25

How do I build the portfolio section of the portfolio page like boxes that are side by side in columns and rows? From here : https://codepen.io/freeCodeCamp/full/YqLyXB

http://codepen.io/jimpix/pen/XMJQzP

Do I use CSS to position them?

Muhammad Hasham
@MohammadHasham
Feb 26 2017 15:25
can anyone help me in understanding this
const slideInAt = (window.scrollY + window.innerHeight) - sliderImage.height / 2;
what this formula would calculate?
_
@playingwithinfinity divide them in two coulmns
6 each
col-md-6
playingwithinfinity
@playingwithinfinity
Feb 26 2017 15:27
@MohammadHasham Ah... I see. How do I do that?
Muhammad Hasham
@MohammadHasham
Feb 26 2017 15:27
<div class="col-md-6">
xs for extra small device
can anyone help me in understanding this
const slideInAt = (window.scrollY + window.innerHeight) - sliderImage.height / 2;
what this formula would calculate?
_
Christoph Herr
@christophherr
Feb 26 2017 15:28
@danydin innerHTML parses HTML, textContent uses just text (no HTML)
Dany Din
@danydin
Feb 26 2017 15:29
hey @MohammadHasham
@christophherr thanks, can you review my code on line 12 i forgot how to look for the description instead of the value property
http://plnkr.co/edit/fgULtyIr8D7ERB15jrPA?p=preview
CamperBot
@camperbot
Feb 26 2017 15:31
danydin sends brownie points to @christophherr :sparkles: :thumbsup: :sparkles:
:cookie: 511 | @christophherr |http://www.freecodecamp.com/christophherr
Christoph Herr
@christophherr
Feb 26 2017 15:32
@MohammadHasham It calculates when to show an image. window.scrollY is how far the window has been scrolled on the y axis (vertically). window.innerheight is the height of the viewport. From that half of the image height is substracted.
Jean Marco Romero
@volkranium
Feb 26 2017 15:49
Do i really need php to make a form work?
alpox
@alpox
Feb 26 2017 15:56
@volkranium Well you need some server when you want to store some data on a safe place.
Else, you can only do what is on your computer
Christoph Herr
@christophherr
Feb 26 2017 15:58
@danydin Do you mean the user input in the textfield or options field?
René
@RenevandenHeuvel
Feb 26 2017 16:01
I have placed the navbar code from the bootstrap site in codepen, why doesn't the navbar appear?
Jean Marco Romero
@volkranium
Feb 26 2017 16:02
Is there any other way for clients to contact me through my webpage without a form
still dont know php
René
@RenevandenHeuvel
Feb 26 2017 16:03
Got the answer, had to add the bootstrap in codepen
Christoph Herr
@christophherr
Feb 26 2017 16:03
@volkranium <a href="mailto:someone@example.com> Contact me by email</a>
Conrad
@conradOU
Feb 26 2017 16:30
Can I ask for feedback on my tribute page website? Although it looks similar to the example, I didn't look up the code, I promise :smile: https://codepen.io/conradOU/pen/MpYNrV
Muhammad Hasham
@MohammadHasham
Feb 26 2017 16:49
@danydin hey!
@christophherr thanks
CamperBot
@camperbot
Feb 26 2017 16:49
mohammadhasham sends brownie points to @christophherr :sparkles: :thumbsup: :sparkles:
:cookie: 513 | @christophherr |http://www.freecodecamp.com/christophherr
playingwithinfinity
@playingwithinfinity
Feb 26 2017 16:51
Hey guys can I improve my Portfolio? http://codepen.io/jimpix/full/XMJQzP/
Conrad
@conradOU
Feb 26 2017 16:54
@playingwithinfinity #contakt doesn't work
playingwithinfinity
@playingwithinfinity
Feb 26 2017 16:54
@conradOU Yeah, I didn't build it yet.
I was asking about the color scheme. I think the colors are bad.
So I was asking for recommendations.
Conrad
@conradOU
Feb 26 2017 16:57
@playingwithinfinity https://www.materialpalette.com/ maybe could help you, I'm not good with design though
playingwithinfinity
@playingwithinfinity
Feb 26 2017 17:00
@conradOU Wait, what does that site do?
So it basically recommends which colors to use.
Conrad
@conradOU
Feb 26 2017 17:02
@playingwithinfinity this one is more advanced : http://paletton.com/#uid=40f0u0kllllaFw0g0qFqFg0w0aF
playingwithinfinity
@playingwithinfinity
Feb 26 2017 17:02
@conradOU Ah.. thanks a lot!
CamperBot
@camperbot
Feb 26 2017 17:02
playingwithinfinity sends brownie points to @conradou :sparkles: :thumbsup: :sparkles:
:cookie: 117 | @conradou |http://www.freecodecamp.com/conradou
joshfer2000
@joshfer2000
Feb 26 2017 17:12
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Carousel indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for carousel items -->
<div class="carousel-inner">
<div class="item active">
<img src="https://static.pexels.com/photos/28756/pexels-photo.jpg" alt="First Slide">
</div>
<div class="item">
<img src="https://blog.cubeacon.com/wp-content/uploads/2016/03/office.jpg" alt="Second Slide">
</div>
<div class="item">
<img src="https://edge.alluremedia.com.au/m/l/2016/02/3-office-space.jpg" alt="Third Slide">
</div>
</div>
</div>
my carousel isn't working
Muhammad Hasham
@MohammadHasham
Feb 26 2017 17:14
const sliderImages = document.querySelectorAll('.slide-in');
    function checkSlide(e) {
      sliderImages.forEach(sliderImage => {
        // half way through the image
        const slideInAt = (window.scrollY + window.innerHeight) - sliderImage.height / 2;
        // bottom of the image
        const imageBottom = sliderImage.offsetTop + sliderImage.height;
        const isHalfShown = slideInAt > sliderImage.offsetTop;
        const isNotScrolledPast = window.scrollY < imageBottom;
        if (isHalfShown && isNotScrolledPast) {
          sliderImage.classList.add('active');
        } else {
          sliderImage.classList.remove('active');
        }
      });
    }
    window.addEventListener('scroll', debounce(checkSlide));
do i need to really understand this math or just copy paste the stuff where needed.Actually i can't understand this
Eberechi Akoma
@EAkoma
Feb 26 2017 17:22
@moigithub I will try that!
@uriznik Thank You for the advice. I thought so as well lol
CamperBot
@camperbot
Feb 26 2017 17:23
eakoma sends brownie points to @uriznik :sparkles: :thumbsup: :sparkles:
:cookie: 504 | @uriznik |http://www.freecodecamp.com/uriznik
Eberechi Akoma
@EAkoma
Feb 26 2017 17:26
is there a way to go back to your mentions on char?
*chat
rugano
@rugano
Feb 26 2017 17:29
@MohammadHasham i am having the same problem,however,i have typed and deleted the whole project twice.in every project,i have learned a new trick.you can also google or ask.do the same and see whether it works.it doesn't matter which method you use to learn:-)
Willina Clark
@lclc68lclc
Feb 26 2017 17:33
Can someone review my Twitch API code. I can't get the toggle buttons to work. https://codepen.io/lclc68lclc/pen/RKXBKw?editors=0110
elad ben aderet
@eladonline
Feb 26 2017 17:34
Show the Local Weather
api by lat & lon dosent work here is what i call in the url
its my country lat and lon api.openweathermap.org/data/2.5/weather?lat=32.0666&lon=34.765
Muhammad Hasham
@MohammadHasham
Feb 26 2017 17:34
@rugano are you doing js30 as well
i also try to rewrite the code as much as possible
elad ben aderet
@eladonline
Feb 26 2017 17:35
ok nvm folkes i got the problam
Jean Marco Romero
@volkranium
Feb 26 2017 17:36
can someone gimme tips on my website? jeanromero.com
some links still not working yet
Muhammad Hasham
@MohammadHasham
Feb 26 2017 17:39
@volkranium great work
i think that the navbar can be made with links rather than the button.But altogether a nice job.
have you used JS in that
Adam Martin
@adam4813
Feb 26 2017 17:45
@lclc68lclc It looks like you don
you don't have a css class called hidden
Jean Marco Romero
@volkranium
Feb 26 2017 17:46
@MohammadHasham thanks man , i had it that way , but kinda liked it more minimalisitc , but imma try it again and see. Just a bit of jquery
CamperBot
@camperbot
Feb 26 2017 17:46
volkranium sends brownie points to @mohammadhasham :sparkles: :thumbsup: :sparkles:
:cookie: 348 | @mohammadhasham |http://www.freecodecamp.com/mohammadhasham
Jean Marco Romero
@volkranium
Feb 26 2017 17:47
@MohammadHasham Its my first portfolio page , missing some projects to fill my portfolio.
Adam Martin
@adam4813
Feb 26 2017 17:47
@lclc68lclc nevermind I see the bootstrap.
Muhammad Hasham
@MohammadHasham
Feb 26 2017 17:47
@volkranium that's awesome.The color combinations and font selection is really nice.
Adam Martin
@adam4813
Feb 26 2017 17:47
try this when you simple call $(".square).each(...)
Muhammad Hasham
@MohammadHasham
Feb 26 2017 17:48
@volkranium how did you made that red line come really slow
when hovering on icon?
Tyler Moeller
@TylerMoeller
Feb 26 2017 17:49

@lclc68lclc It can be simplified a lot with a .hide() and .show() instead. For example, to show only the offline users:

  $('#offline').on('click', function() {
    $('.online').hide();
    $('.offline').show();
  });

Use that same logic for showing only online and showing all users.

Jean Marco Romero
@volkranium
Feb 26 2017 17:50
@MohammadHasham i made a border using :after pseudo element , then on :hover i scaled the border
Muhammad Hasham
@MohammadHasham
Feb 26 2017 17:51
is that without jquery
Jean Marco Romero
@volkranium
Feb 26 2017 17:51
@MohammadHasham yes
Muhammad Hasham
@MohammadHasham
Feb 26 2017 17:51
@volkranium really nice.
Jean Marco Romero
@volkranium
Feb 26 2017 17:52
@MohammadHasham thanks man , im glad you like it ...
CamperBot
@camperbot
Feb 26 2017 17:52
:warning: volkranium already gave mohammadhasham points
volkranium sends brownie points to @mohammadhasham :sparkles: :thumbsup: :sparkles:
Zhanibek
@zhann1982
Feb 26 2017 17:56
Hello, Everyone! Can someone help me with my twitch.tv project? When I try to apply for loop with ajax it doesn't loop . http://codepen.io/zhann1982/pen/jBEJdr
Tyler Moeller
@TylerMoeller
Feb 26 2017 18:03

@zhann1982 Add this to the top of your first success function to see what's going on:

console.log(nameCh)

Since ajax takes some time to go to the url and come back, it's similar to this:

for(var i = 0; i < 10; i++) {
  var name = i;
  setTimeout(function() {
    console.log(name); 
  }, 100)
}

Fix it by using let instead of var or preferably, by using a .forEach() to loop through the users instead.

Johnny
@jtan3
Feb 26 2017 18:09
Does anyone know why my online/offline button only triggers 1 one account? http://codepen.io/jtan3/pen/GqPgOp
Tyler Moeller
@TylerMoeller
Feb 26 2017 18:11
@jtan3 ID values have to be unique. Use "on" or "off" as class names instead.
Johnny
@jtan3
Feb 26 2017 18:12
@TylerMoeller thanks
CamperBot
@camperbot
Feb 26 2017 18:12
jtan3 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1510 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
René
@RenevandenHeuvel
Feb 26 2017 18:16
Can someone tell me why the navbar isn't appearing as it should? http://codepen.io/FccRene/pen/XMbJzB
@playingwithinfinity I thought the colors were not that bad, but the green in the end felt a bit off.
Zhanibek
@zhann1982
Feb 26 2017 18:20
@TylerMoeller Thanks ! Now it works. I used .forEach
CamperBot
@camperbot
Feb 26 2017 18:20
zhann1982 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1511 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Johnny
@jtan3
Feb 26 2017 18:20
@RenevandenHeuvel did you add bootstrap?
René
@RenevandenHeuvel
Feb 26 2017 18:27
@jtan3 yes, bootstrap4. It was a long long so i made it a tiny url
Johnny
@jtan3
Feb 26 2017 18:28
@RenevandenHeuvel i dont see it in the codepen.
@RenevandenHeuvel you can't use the tiny url
@RenevandenHeuvel there's a quick-add bootstrap in the css settings under the links
René
@RenevandenHeuvel
Feb 26 2017 18:32
@jtan3 , that's what I did the first time and it didn't work. Now it does Off course, because I copied the navbar of bootstrap 3 thx
CamperBot
@camperbot
Feb 26 2017 18:32
renevandenheuvel sends brownie points to @jtan3 :sparkles: :thumbsup: :sparkles:
:cookie: 320 | @jtan3 |http://www.freecodecamp.com/jtan3
Johnny
@jtan3
Feb 26 2017 18:39
@TylerMoeller it doesn't work when I changed to class from id.
Darcy Coffman
@DarcyCoffman
Feb 26 2017 18:44
Hello everyone, I was wondering if someone can help me center an image for my tribute page. I'm using bootstrap 4.0.0, and I've tried using margins and img-responsive to no avail. https://codepen.io/darcyCoffman/pen/qrEGVN
ok it looks centered here
but it doesn't where i'm editing it
Ken Haduch
@khaduch
Feb 26 2017 18:46
@DarcyCoffman - you don't have a closing <\h1> tag, but that's not causing the problem. I don't know if Bootstrap 4 changed the center-block to something else?
@DarcyCoffman - I see something about a change there. - a new mx-auto class?
x3no93
@x3no93
Feb 26 2017 18:49
Hey guys, quick question. I have completed the HTML, CSS, Bootstrap and jQuery challenges as well as the Tribute Page. It seems to me that the portfolio challenge is a lot more advanced. Should I continue with learning Javascript and come back to this challenge later, or is the previous mentioned knowledge sufficient to build the portfolio page? Thanks a lot!
Darcy Coffman
@DarcyCoffman
Feb 26 2017 18:52
Ok, thanks I didn't notice that I improperly closed that! What does the new mx-auto class mean? @khaduch I'm very new
CamperBot
@camperbot
Feb 26 2017 18:52
darcycoffman sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2542 | @khaduch |http://www.freecodecamp.com/khaduch
Ken Haduch
@khaduch
Feb 26 2017 18:52
@DarcyCoffman - supposedly sets the margins to auto... I haven't used V4 yet, just looking at the docs.
Tyler Moeller
@TylerMoeller
Feb 26 2017 18:55

@jtan3 You still have some duplicate IDs:

$("#streamerInfo").append(
  "<div class='row' id='closed' >" +

and:

$("#streamerInfo").append(
  "<div class='row'  id='offAcc' background=" + banner + ">" +

But, just looking at your online accounts - right-click the one that isn't hiding and select "Inspect Element", you'll see that it doesn't have the 'on' class. Let me know if you need help debugging that.

Rather than using .toggle(), you might want to use .show() and .hide() to be more explicit. See the example I gave earlier :point_up: February 26, 2017 9:49 AM
And that can still be .animate()ed if desired
Ken Haduch
@khaduch
Feb 26 2017 18:59
@DarcyCoffman - it is very strange - if you remove the "smaller-image" class, then it look more centered, but not exactly. If you add .smaller-image back in, then it keeps the left edge of the image aligned with the same placement that the large image is set to. Very strange! I don't get it
Darcy Coffman
@DarcyCoffman
Feb 26 2017 19:00
I fixed it!!!! class="rounded mx-auto d-block"
@khaduch
Ken Haduch
@khaduch
Feb 26 2017 19:03
@DarcyCoffman - okay - the d-block must have something to do with it. The container class has a width that is smaller than the full-size image, so that is why the left edge alignment is doing that. What's d-block do?
Tyler Moeller
@TylerMoeller
Feb 26 2017 19:04
d-block is:
.d-block {
  display: block !important;
}
Ken Haduch
@khaduch
Feb 26 2017 19:05
@TylerMoeller - yeah, just found out. I guess that bootstrap 3 center-block must have set display: block; on the element as well. Thanks Tyler!!
Tyler Moeller
@TylerMoeller
Feb 26 2017 19:06
@khaduch center-block in BS3 is the same as mx-auto d-block in BS-4:
.center-block {
  display: block;
  margin-right: auto;
  margin-left: auto;
}
Ken Haduch
@khaduch
Feb 26 2017 19:07
@TylerMoeller - I'm sure that they did that to make it easier... :smile:
Tyler Moeller
@TylerMoeller
Feb 26 2017 19:07
LOL :) They use !important a lot more in BS4 too, not sure if that will stick around for the beta
Everything is more granular it seems
Ken Haduch
@khaduch
Feb 26 2017 19:07
@TylerMoeller - yeah, I thought that !important was frowned upon in general?
Tyler Moeller
@TylerMoeller
Feb 26 2017 19:08
That's what I've learned as well @khaduch, but haven't read into why they're doing it.
Johnny
@jtan3
Feb 26 2017 19:08
@TylerMoeller thanks it works now
CamperBot
@camperbot
Feb 26 2017 19:08
jtan3 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: jtan3 already gave tylermoeller points
Tyler Moeller
@TylerMoeller
Feb 26 2017 19:09
@jtan3 Nice work!
Ken Haduch
@khaduch
Feb 26 2017 19:10
yeah, if everything is !important, then what does it mean? Unless they are trying to override conflicting settings or something?
I guess that it's time to start understanding Bootstrap 4 - since that is the CodePen default. (Although I found that you can just load Bootstrap 3 by going into the CSS resources and typing a 3 in one of the boxes - it brings up the URL for Bootstrap 3.)
alpox
@alpox
Feb 26 2017 19:14
@TylerMoeller @khaduch My guess is that they use the important only on the utility classes which can be seen as final - the classes which stand for only one specific css property to allow adding its functionality through only a classname
Ken Haduch
@khaduch
Feb 26 2017 19:22
@alpox & @TylerMoeller - thanks for the assist on Bootstrap v4 - something new to learn!
CamperBot
@camperbot
Feb 26 2017 19:22
khaduch sends brownie points to @alpox and @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 803 | @alpox |http://www.freecodecamp.com/alpox
:star2: 1512 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Jakumozo
@Jakumozo
Feb 26 2017 19:44

could please someone have a look at my JS code? users[i].name does not get the value? why?

$.ajax({
            type: 'GET',
            url: 'https://wind-bow.gomix.me/twitch-api/channels/' + usernames[i],
            success: function(data){// console.log(data.display_name); 
                             users[i].name = data.display_name; console.log(users[i].name); 
                             users[i].game = data.game; 
                             users[i].url = data.url;
                             users[i].logo = data.logo;               

                             }
       });

http://codepen.io/Kromel/pen/ryaMjr

alpox
@alpox
Feb 26 2017 19:46
@Jakumozo Since the ajax call is asynchronous - comes back late - the for loop will have already finished and the variable i will be set to the equivalent of users.length. That index doesn't exist in users.
You will have to wrap the ajax calls into a function or use .forEach instead of the for loop.
Jakumozo
@Jakumozo
Feb 26 2017 19:48
@alpox thank you. I will try to do it another way.
CamperBot
@camperbot
Feb 26 2017 19:48
jakumozo sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 804 | @alpox |http://www.freecodecamp.com/alpox
Ken Haduch
@khaduch
Feb 26 2017 20:29
@Jakumozo - another way to do this, at least my suggestion, is to key off of the return data, which contains the twitch username in various places - that way you can collect data as it is returned and group it with other data from the player that it applies to.
Cristopher Encarnacion
@chris0715
Feb 26 2017 20:55
I need some help with react
Who can help me
Tom
@moT01
Feb 26 2017 20:56
@chris0715 i can try
no promises
Cristopher Encarnacion
@chris0715
Feb 26 2017 20:58
@moT01 I have a react app I am very new to the react library so I combined it with my expressJs server. So my apps is like this.. It has expressJS as the backend with dedicated Express routes to serve and feed data to the MongoDB database, However as my app is running using react-router. whenenver I refreshh on try to press back I get a cannot get error as if it tries to looking within the express router instead of the react router.
Tom
@moT01
Feb 26 2017 21:00
yea, i cant help ya there
Cristopher Encarnacion
@chris0715
Feb 26 2017 21:01
T_T
some people in there who know some things, ...might be able to help @chris0715
sparklie3
@sparklie3
Feb 26 2017 21:16
general front-end question, is there a way to load another js file in my front-end?
for example, if i have a general js script that i load in my html file
but that js script needs to call another js file, how do i load that into my first js file?
sennator
@sennator2
Feb 26 2017 21:17
hi guys... i have a more of linguistic problem than programming one :D
sparklie3
@sparklie3
Feb 26 2017 21:17

here's an example:
in my index.html, i have

<script src='file location'></script>

that's my primary js script, but i want to call another js file in my js script that i just loaded

how do that i do that?
sennator
@sennator2
Feb 26 2017 21:18
how do you call that text slider which goes infinitely like in the botttom of news channels
sparklie3
@sparklie3
Feb 26 2017 21:18
@sennator2 scrollToBottom?
alpox
@alpox
Feb 26 2017 21:19

@chris0715 you may have to serve the index.html on any route of express:

app.get('*', (req, res) => {
  res.sendFile(path.resolve(__dirname, '..', 'build', 'index.html'));
});

Go sure to add the specific routes for data before this route setup

sennator
@sennator2
Feb 26 2017 21:19
@sparklie3 when text goes to right, like most important news :)
Cristopher Encarnacion
@chris0715
Feb 26 2017 21:20
@alpox Then what do I do with my server side data route.. because once I change to serve html on all request I cannot loger get the others ?
@alpox I will try it out.
alpox
@alpox
Feb 26 2017 21:22
@chris0715 As i said, add them before this route.
Usually, express adds all routes in a chain and call the next callback when one calls next(). As long as you add a route before that one in the chain and don't call next() the * case will never be entered
@alpox Like:
app.get("/foo", (req, res, next) => {
    ....
    // If you call next(); here, `*` would be entered, otherwise not.
});

app.get('*', (req, res) => {
  res.sendFile(path.resolve(__dirname, '..', 'build', 'index.html'));
});
At least i hope that applies for the newest versions still
Cristopher Encarnacion
@chris0715
Feb 26 2017 21:25
@alpox Omg that was so simple .. I asked a silly question. Thanks man. I was already thinking about creating a server only to serve data lol. I appreaciate the help.
CamperBot
@camperbot
Feb 26 2017 21:25
chris0715 sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 805 | @alpox |http://www.freecodecamp.com/alpox
alpox
@alpox
Feb 26 2017 21:26
@chris0715 Sounds like it worked :D you're welcome
Cristopher Encarnacion
@chris0715
Feb 26 2017 21:27
@alpox By the way what do you think about that other thing I've seen many people use a different server to fecth data ..?
alpox
@alpox
Feb 26 2017 21:28
@chris0715 That is an often used approach which is good in certain cases. But for simple apps that makes not much sense.
Usually they do that to split up the workload for the servers
Sometimes the reason is that they are using firebase probably - i don't know enough about that thing to tell much about it. I will in some weeks because i will have to work on a project at university and use firebase there and heroku to deploy the data service
I think it surely is an advantage to split it up for developers where one team works on the frontend and another one on the backend
Vered Rekanati
@veredrec
Feb 26 2017 22:13
@thodorisanta you have a ' by mistake before the C, you can see it here and the end of the second line here:
<div class="container buttons">
<div class="row"><!-- NEW ROW -->`
<input type="button" class="realButtons clean" value="C" id="C"/>
@thodorisanta do you see it, right after the ROW-->
Spyrantis Theodoros
@thodorisanta
Feb 26 2017 22:14
@veredrec thanks :) '
CamperBot
@camperbot
Feb 26 2017 22:14
thodorisanta sends brownie points to @veredrec :sparkles: :thumbsup: :sparkles:
:cookie: 312 | @veredrec |http://www.freecodecamp.com/veredrec
Vered Rekanati
@veredrec
Feb 26 2017 22:15
@thodorisanta No problem!
Niichie
@Niichie
Feb 26 2017 22:42
What exactly does the tribute page project mean by this:
"Fulfill the below user stories. Use whichever libraries you need. Give it your own personal style."
d wilder
@alhazen1
Feb 26 2017 22:51
@Niichie Fulfill the below user stories means fulfill any requirements labeled as User Story.
Use whichever libraries you need means you can use any third party script / style libraries like Bootstrap, jQuery.
Give it your own personal style means it does not have to look like the example, just fulfill the requirements.
Niichie
@Niichie
Feb 26 2017 22:53
@alhazen1 ah okay so I just have to build a tribute page, I got confused looking at the wikipedia link, thank you!
CamperBot
@camperbot
Feb 26 2017 22:53
niichie sends brownie points to @alhazen1 :sparkles: :thumbsup: :sparkles:
:cookie: 421 | @alhazen1 |http://www.freecodecamp.com/alhazen1
Jean Marco Romero
@volkranium
Feb 26 2017 23:00
can someone tell me why my website is laggin on scroll jeanromero.com
bjones2nd
@bjones2nd
Feb 26 2017 23:00
hi all. I'm starting the RANDOM QOUTE MACHINE task...Can anyone tell me how I would know what link to put in the .getJSON function to get quotes from another site. Like, where on the quote site might I find it? Thanks in advance.
Lelio
@LelioHD
Feb 26 2017 23:09
hi there! i need some help with my Tribute Page please!
Does somebody know a way in which i could fix the background-image in order that the header doesn't cut the top of it when it's all scrolled down? Thanks! https://codepen.io/Lelio/pen/ygmqdx/?editors=0100
jassonsgs
@jassonsgs
Feb 26 2017 23:20
guys I need help
my grey column does not blend in with the picture and its too small as well
Anybody available
Gulsvi
@gulsvi
Feb 26 2017 23:25
@jassonsgs Can you show your code?
jassonsgs
@jassonsgs
Feb 26 2017 23:25
surely

<body>
<div class="container">
<div class="jumbotron">
<div class="row">
<div class="col-xs-12">


</div>
</div>
</div>
</div>
<div class="text-center">
<h1>Jesus "chu" Mercedes </h1>
<em><h2>One of the greatest </h2></em>
<div class="img-responsive">
<img src="https://c1.staticflickr.com/3/2869/32549855830_8ef8ab7057_h.jpg" width="400" height="450" alt="jesus mercedes en ofensiva_web">
</div>
</div>
</body>

<div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-8 col-offset-2">
<h3>Here's a timeline of Jesus Mercedes life: </h3>
<ul>
<li><strong>1962</strong>- Born in la vega, Providence of the Dominican Republic.
</li>
</ul>
<blockquote>
<p>"Attitude and dedication is everything"</p>
<footer><cite>Jesus "Chu" Mercedes
<cite></footer>
<h3>The following link will provide you info an acknowledge reveice by <a href="http://elcorodeportivo.blogspot.com/2009/11/fotos-la-vega.html" target="_blank">"Chu" and his family on his native province.<a></h3>
</div>

Gulsvi
@gulsvi
Feb 26 2017 23:26
@jassonsgs Is this in a codepen? Where is your bootstrap?
jassonsgs
@jassonsgs
Feb 26 2017 23:26
yes
codepen
tribute page
Gulsvi
@gulsvi
Feb 26 2017 23:27
Or your CSS?
Oh, just send a link to the codepen - that will help me see how you've set everything up
jassonsgs
@jassonsgs
Feb 26 2017 23:27
cool
one second
Gulsvi
@gulsvi
Feb 26 2017 23:29
@jassonsgs A few things - you are using Bootstrap 3 class names, like img-responsive but you have bootstrap 4 linked in your CSS settings. Click Settings -> CSS and replace the link with this one: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
Also, in codepen, there is no need for the <body> tag - they add it for you
And to answer your original question - your image isn't blending with the grey background because it is outside of the 'jumbotron' div. Put it inside:
    <div class="jumbotron">
      <div class="row">
        <div class="col-xs-12">
          <div class="text-center">
            <h1>Jesus "chu" Mercedes </h1>
            <em><h2>One of the greatest </h2></em>
            <div class="img-responsive">
              <img src="https://c1.staticflickr.com/3/2869/32549855830_8ef8ab7057_h.jpg" width="400" height="450" alt="jesus mercedes en ofensiva_web">
            </div>
          </div>
        </div>
      </div>
    </div>

Finally, if you want your image to be responsive, use the class on the image, not on the div:

<img class="img-responsive" src="https://c1.staticflickr.com/3/2869/32549855830_8ef8ab7057_h.jpg" alt="jesus mercedes en ofensiva_web">

Not:

<div class="img-responsive">
  <img src="https://c1.staticflickr.com/3/2869/32549855830_8ef8ab7057_h.jpg" width="400" height="450" alt="jesus mercedes en ofensiva_web">
</div>
jassonsgs
@jassonsgs
Feb 26 2017 23:34
marvelous, thank you, couldn't have been more clearer
thanks a lot
Gulsvi
@gulsvi
Feb 26 2017 23:36
No problem, happy to help
Tyler Moeller
@TylerMoeller
Feb 26 2017 23:53
@TylerMoeller @khaduch My guess is that they use the important only on the utility classes which can be seen as final - the classes which stand for only one specific css property to allow adding its functionality through only a classname
Thanks @alpox your guess is correct. All utility classes will use !important according to this: https://github.com/twbs/bootstrap/issues/18817#issuecomment-170219063
CamperBot
@camperbot
Feb 26 2017 23:54
tylermoeller sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 806 | @alpox |http://www.freecodecamp.com/alpox