These are chat archives for FreeCodeCamp/HelpFrontEnd

20th
Apr 2017
Bill Hatcher
@billumd
Apr 20 2017 00:30
Hi all, quick question. I am can't seem to get my navbar to stay fixed to the top of my page. Anybody have any ideas?
Vincent Del Vecchio
@DVecc
Apr 20 2017 00:38
does anyone know how to stop your background image from being cut off past the viewport when you resize the browser window?
@billumd You want the navbar to not scroll with the page?
Bill Hatcher
@billumd
Apr 20 2017 00:41
yeah, i would like it to always be visable at the top of the page
i was told to use navbar-fixed-top
but that doesn't seem to do anything
You seem to have it working in your site
Vincent Del Vecchio
@DVecc
Apr 20 2017 00:45
I'm having trouble finding out why yours won't work
my navbar code was taken directly from the bootstrap documentation
Bill Hatcher
@billumd
Apr 20 2017 00:46
I just pasted your code into my editor and it wouldn't work
Vincent Del Vecchio
@DVecc
Apr 20 2017 00:46
The issue is with your bootstrap version
you're working with 4.0
try changing your css import of boot strap to https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
and then fixing up the code
it scrolls correctly with that version of bootstrap however some of the buttons and styles get messed up
Bill Hatcher
@billumd
Apr 20 2017 00:47
yes!
Thanks
It is now fixed, but I will have to clean it up a bit
thanks a ton
been struggling with that for a while
Vincent Del Vecchio
@DVecc
Apr 20 2017 00:48
<nav class="navbar fixed-top navbar-light bg-faded">
that's the code for 4.0
if it's easier to just change the class import
but I would recommend using bootstrap 3.3.7 if you're just beginning like I am
Bill Hatcher
@billumd
Apr 20 2017 00:49
will do
I guess I have some stuff mixed up
appreciate the ansers
answer
here's the documentation for bootstrap
this may help with fixing things up
Bill Hatcher
@billumd
Apr 20 2017 00:53
excellent thanks!
Aizaz Shahid
@aizazshahid
Apr 20 2017 01:02
@DVecc 4.0 is in Alpha version so its better not to use i think !
Robert Arifin
@renkachan
Apr 20 2017 01:10
guys
wanna ask about the twitch api
i got stucked how to get stream information
Robert Arifin
@renkachan
Apr 20 2017 01:16
Vincent Del Vecchio
@DVecc
Apr 20 2017 01:17
@forwebtech yea 4.0 was giving me problems when trying to replicate some of the elements on the example pages so I'm sticking to 3
Robert Arifin
@renkachan
Apr 20 2017 01:17
for the other 2 , I already tried it yesterday and it worked >.<
@jtan3 even i tested the one in twitch documentation using ?game=overwatch, it didnt work
Johnny
@jtan3
Apr 20 2017 01:18
i see the json when i click on the link?
JD Tadlock
@jdtdesigns
Apr 20 2017 01:18
That url works fine
Gulsvi
@gulsvi
Apr 20 2017 01:26
@renkachan The wind-bow server is a mirror provided by Free Code Camp. It does not have all the features mentioned in the Twitch API documentation. To use features like ?game=overwatch, you will need to sign up for an API Key and use the official Twitch API.
It doesn't allow you to specify multiple users in a single URL either, so if you want to use more advanced features of the API, you might just want to sign up for an API key instead: https://devportal.twitch.tv/
Keon Samuel
@keonsam
Apr 20 2017 01:29
the more I research the more someone is telling to learn something new,lol.
Robert Arifin
@renkachan
Apr 20 2017 01:29
@SkyCoder01 oh yeah, i forgot about it. how about the https://wind-bow.glitch.me/twitch-api/streams/ESL_SC2?callback=? is this one wrong? seems correct for me
julien Demarque
@JulienDemarque
Apr 20 2017 01:30
Just finished my porfolio, looking good enough to submit? https://codepen.io/JulienDemarque/pen/GmoYBd
KevinTaylorS
@KevinTaylorS
Apr 20 2017 01:46
@SkyCoder01 Thank you for the help. I'll try what you suggested.
CamperBot
@camperbot
Apr 20 2017 01:46
kevintaylors sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1101 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Vincent Del Vecchio
@DVecc
Apr 20 2017 01:49
Does anyone know how to vertically align something with in a div?
Gulsvi
@gulsvi
Apr 20 2017 01:51
@renkachan That link should work great for getting you basic stream data back. There's also /channels/ and /users/ versions of that link
@DVecc There are a few approaches, but it depends on the content. Sometimes easiest to just use margin-top!
Juan David Corrales
@jdcorrales27
Apr 20 2017 01:57
hi. How to center a img with bootstrap?
Gulsvi
@gulsvi
Apr 20 2017 01:58
Hi @jdcorrales27 Here are some options for centering an image with Bootstrap, depending on the version you are using: http://codepen.io/skycoder/pen/xqbGor
Juan David Corrales
@jdcorrales27
Apr 20 2017 02:01
@SkyCoder01 ty
CamperBot
@camperbot
Apr 20 2017 02:01
jdcorrales27 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1102 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Amit Patel
@AmitP88
Apr 20 2017 02:14
hey guys, is there anyway I can greatly increase the resolution of the parallax image on this website? https://amitp88.github.io/Khmer-Family-Cafe/ The image appears clear on small screensizes, but blurry on laptop/desktop screens
drewwzzy
@drewwzzy
Apr 20 2017 02:15
hey guys two question
how do I widen my margins and secondly how do I create space like an enter button would on my code
Kyle Janka
@EverythingEpi
Apr 20 2017 02:23
Hello everyone, I am working on my tribute page and was wondering if I could get some feedback
Vincent Del Vecchio
@DVecc
Apr 20 2017 02:30
@EverythingEpi Not feeling the color scheme, otherwise it looks good, fills all the user stories!
Robert Arifin
@renkachan
Apr 20 2017 02:30
i used https://wind-bow.glitch.me/twitch-api/streams/ESL_SC2?callback=? but its not working. While the channel and user link are working , i am not sure what is the issue in here
Vincent Del Vecchio
@DVecc
Apr 20 2017 02:31
@EverythingEpi I'd also recommend using Bootstrap 3 instead of 4
Gulsvi
@gulsvi
Apr 20 2017 02:35
@renkachan What isn't working with that link for you?
Kyle Janka
@EverythingEpi
Apr 20 2017 02:35
When I swapped it over bootstrap 3 everything went crazy haha
I was kind of trying to go with a darker theme with the colors as well
JD Tadlock
@jdtdesigns
Apr 20 2017 02:36
@renkachan That url works fine. What are you using to request the data?
Vincent Del Vecchio
@DVecc
Apr 20 2017 02:36
As long as your following bootstrap 4s documentation on their website you should be fine, but I think FCC uses 3s documentation
Kyle Janka
@EverythingEpi
Apr 20 2017 02:37
From what I was told yeah FCC uses 3. That's probably why I had a tough time with a lot of things. I didn't come to find out about it being 4 and not 3 until I was a good portion into the project haha
the border thumbnail why is the size of the page?
Gulsvi
@gulsvi
Apr 20 2017 02:47
@EverythingEpi Good job and a great tribute subject :)
You may want to take a closer look on a smaller screen. The image of Stephen King gets larger and page overflows. It looks like you are using a mix of Bootstrap 3 and Bootstrap 4 classes. Plus you have <style> tags in your HTML along with a <link> tag. The content in the <style> tags should go in the CSS panel and the <link> tag should go in the codepen settings. Looks like you are missing a closing </div> at the end too.
@jdcorrales27 Click the "Settings" button, click "CSS" and use this link to Bootstrap instead: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
You are using Bootstrap 4, which uses different class names
Juan David Corrales
@jdcorrales27
Apr 20 2017 02:49
@SkyCoder01 ty
CamperBot
@camperbot
Apr 20 2017 02:49
jdcorrales27 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:warning: jdcorrales27 already gave skycoder01 points
Robert Arifin
@renkachan
Apr 20 2017 02:49
@SkyCoder01 when i check with console, it return error
@SkyCoder01 http://codepen.io/renkachan/pen/gWOKQp?editors=0110 this is the codepen
Juan David Corrales
@jdcorrales27
Apr 20 2017 02:50
@SkyCoder01 and now , how to center the thumbnail with the iamge?
Robert Arifin
@renkachan
Apr 20 2017 02:51
@SkyCoder01 just realized it worked but it has undefined:1 GET http://s.codepen.io/boomerang/iFrameKey-5dde7c9e-f911-23c3-1379-af9645ef0851/undefined 404 (Not Found) . Should i just ignore this?
Juan David Corrales
@jdcorrales27
Apr 20 2017 02:52
@SkyCoder01 already I could
Gulsvi
@gulsvi
Apr 20 2017 02:54
@renkachan You are getting that error because data.logo doesn't exist, so when it tries to load the image, it gives you a 404 not found error
@renkachan With this URL, there is no 404 error: https://wind-bow.glitch.me/twitch-api/channels/ESL_SC2?callback=?
@jdcorrales27 Looks like you got it working :)
Robert Arifin
@renkachan
Apr 20 2017 02:56
@SkyCoder01 thanks a lot, sorry didnt realize that. Feel so noob lol
CamperBot
@camperbot
Apr 20 2017 02:56
renkachan sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1103 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Gulsvi
@gulsvi
Apr 20 2017 02:56
lol, don't worry about it @renkachan Twitch has a lot to keep track of. It's a complicated project. I spent 2 weeks on it :p
Robert Arifin
@renkachan
Apr 20 2017 02:59
@SkyCoder01 about this project, i can use combination of users,channel, and stream to show it right ? As for the list of streamers, do i need to randomize? i mean each time the code is run, i need to give different streamers?
@SkyCoder01 wikipedia viewer by far the hardest for me. dunno about this one lol
Gulsvi
@gulsvi
Apr 20 2017 03:00
Yes, @renkachan You can use a combination of users, channels, and streams to show it. You probably only need 2 of the 3. You don't need to randomize it, you can give the same list of streamers every time.
I chose my own set of streamers for my project, but you can use the ones they give you too.
Robert Arifin
@renkachan
Apr 20 2017 03:02
@SkyCoder01 k thanks for the explanation . i thought in the stories, there is an array of users. So need to display all of them lol. Let me try again !
CamperBot
@camperbot
Apr 20 2017 03:02
renkachan sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:warning: renkachan already gave skycoder01 points
Robert Arifin
@renkachan
Apr 20 2017 03:02
@SkyCoder01 ooh
Gulsvi
@gulsvi
Apr 20 2017 03:03
I chose 18 different streamers that I like and you get them every time you load the page (if that makes sense). Here's the version that doesn't show the code: http://s.codepen.io/skycoder/full/XpyrYN/
rohitdesigner
@rohitdesigner
Apr 20 2017 03:03
anyone here
how is this
Gulsvi
@gulsvi
Apr 20 2017 03:05
@rohitdesigner Nice :)
rohitdesigner
@rohitdesigner
Apr 20 2017 03:06
@SkyCoder01 X/10 ?
Gulsvi
@gulsvi
Apr 20 2017 03:06
Your JavaScript is what they call a pyramid of doom. I've heard of it but never seen it in action
rohitdesigner
@rohitdesigner
Apr 20 2017 03:06
@SkyCoder01 can u give me a color code which will look good in background
rohitdesigner
@rohitdesigner
Apr 20 2017 03:07
what @SkyCoder01
Gulsvi
@gulsvi
Apr 20 2017 03:07
@rohitdesigner I use http://www.palettable.io for my colors
When your code looks like that, it's called a pyramid of doom. Ideally, you put everything in an array and process it dynamically
rohitdesigner
@rohitdesigner
Apr 20 2017 03:08
@SkyCoder01 how much grade u will give on 10.
Gulsvi
@gulsvi
Apr 20 2017 03:08
For the design, hmmm, 8/10 :)
10/10 means professional, so maybe I'm a difficult grader
rohitdesigner
@rohitdesigner
Apr 20 2017 03:09
what should be done more
Gulsvi
@gulsvi
Apr 20 2017 03:09
Maybe make it responsive so it works on mobile?
rohitdesigner
@rohitdesigner
Apr 20 2017 03:10
@SkyCoder01 how can i make the ROHIT `container' to decrease in width
with screen resize
Gulsvi
@gulsvi
Apr 20 2017 03:11
I think you would have to use transform: scale() or media queries since your letters are a fixed width @rohitdesigner
Give the letters responsive units like vw and maybe it would work too
rohitdesigner
@rohitdesigner
Apr 20 2017 03:12
ok let me try
Dan V
@DV1988
Apr 20 2017 03:13
Hi, anyone know how to make the background image one whole image instead of it repeating until it fills the page?
rohitdesigner
@rohitdesigner
Apr 20 2017 03:13
@DV1988 use background-repeat:no-repeat
Dan V
@DV1988
Apr 20 2017 03:13
Thanks
Gulsvi
@gulsvi
Apr 20 2017 03:13

This is what I use @DV1988

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

From here: https://css-tricks.com/perfect-full-page-background-image/

rohitdesigner
@rohitdesigner
Apr 20 2017 03:13
@DV1988 welcome
Gulsvi
@gulsvi
Apr 20 2017 03:14
@rohitdesigner Try width: 19vw; for your .ltr class instead of 120px?
Actually, 19 is a little better
rohitdesigner
@rohitdesigner
Apr 20 2017 03:15
ok
Paradox5
@Paradox5
Apr 20 2017 03:15
Alright peiple
Talk to me
Whats going on
Gulsvi
@gulsvi
Apr 20 2017 03:15
What's up Paradox
Paradox5
@Paradox5
Apr 20 2017 03:15
Hey Sky
Whats everyone up to
Gulsvi
@gulsvi
Apr 20 2017 03:16
Coding, gaming, chatting, drinking a beer
Paradox5
@Paradox5
Apr 20 2017 03:17
So pretty good
Gulsvi
@gulsvi
Apr 20 2017 03:17
Life is great :)
Paradox5
@Paradox5
Apr 20 2017 03:17
:)
Gulsvi
@gulsvi
Apr 20 2017 03:18
Did you just start FCC?
Paradox5
@Paradox5
Apr 20 2017 03:18
Could you give me some advice on something
Me
No im on wikipedia viewer
Ive just startted chatting recentlu
Gulsvi
@gulsvi
Apr 20 2017 03:19
Yeah, sure
Paradox5
@Paradox5
Apr 20 2017 03:19
My design sense
I struggle finding a combination of colors and font that doesnt look god awful
Gulsvi
@gulsvi
Apr 20 2017 03:20
haha, I'm partially color blind. Not good for advice lol
Paradox5
@Paradox5
Apr 20 2017 03:20
O
Gulsvi
@gulsvi
Apr 20 2017 03:20
This site chooses them for me: http://www.palettable.io
Paradox5
@Paradox5
Apr 20 2017 03:21
How would you say this affects your coding
O a site
I shall bookmark this
Gulsvi
@gulsvi
Apr 20 2017 03:21
Plug in one color that you like and it picks other ones that work
Paradox5
@Paradox5
Apr 20 2017 03:21
Thank you
This is a life saver
Dan V
@DV1988
Apr 20 2017 03:21
didn't work guys, heres the code im tryong to work with <body background="http://www.greendragonsociety.com/images/Pirate%20Ship_Rough%20Seas.jpg">
Gulsvi
@gulsvi
Apr 20 2017 03:21
It isn't that bad, just hard to tell reds and greens apart
Paradox5
@Paradox5
Apr 20 2017 03:21
Thanks @SkyCoder01
CamperBot
@camperbot
Apr 20 2017 03:21
paradox5 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1104 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Paradox5
@Paradox5
Apr 20 2017 03:21
Your a STAR
Gulsvi
@gulsvi
Apr 20 2017 03:21
:star2:
lol
Paradox5
@Paradox5
Apr 20 2017 03:22
:star2:
Also coding on mobile is hard
Dont recommend
Dan V
@DV1988
Apr 20 2017 03:22
so still trying to blow up the background image to all of the page, here is the code I got so far, any help would be great. <body background="http://www.greendragonsociety.com/images/Pirate%20Ship_Rough%20Seas.jpg">
Paradox5
@Paradox5
Apr 20 2017 03:23
Does any picture show up?
Dan V
@DV1988
Apr 20 2017 03:23
yeah, but it repeats
Paradox5
@Paradox5
Apr 20 2017 03:23
You could use js to append the image
Dan V
@DV1988
Apr 20 2017 03:23
js?
Paradox5
@Paradox5
Apr 20 2017 03:23
Javascript
Dan V
@DV1988
Apr 20 2017 03:23
cant, only allowed to use HTML for this project
Paradox5
@Paradox5
Apr 20 2017 03:24
And css?
Or pure html
Dan V
@DV1988
Apr 20 2017 03:24
no just HTML I belive
Gulsvi
@gulsvi
Apr 20 2017 03:24
@DV1988 It's confusing in that video, but Quincy was saying that his project was only HTML with one line of CSS. You can use all the CSS you want.
You could write it in javascript if you wanted :)
Dan V
@DV1988
Apr 20 2017 03:24
oh really, ok cool
Paradox5
@Paradox5
Apr 20 2017 03:24
Js is fun
I love it
Dan V
@DV1988
Apr 20 2017 03:25
im just starting to learn this stuff, I don't think I have used js much
Paradox5
@Paradox5
Apr 20 2017 03:25
Define much
Dan V
@DV1988
Apr 20 2017 03:25
lol, like 3 weeks
Paradox5
@Paradox5
Apr 20 2017 03:26
3 weeks sense you started or 3 weeks of js
Since*
Dan V
@DV1988
Apr 20 2017 03:26
going through the free coder program, 3 weeks sense I started learning to write code, so first web page design
since
Paradox5
@Paradox5
Apr 20 2017 03:26
Ah
Could i see what project your on
Dan V
@DV1988
Apr 20 2017 03:26
yeah, very new at this lol
Paradox5
@Paradox5
Apr 20 2017 03:27
Im gonna try coding on teh mobiles see if my idea works
Dan V
@DV1988
Apr 20 2017 03:27
tribute page
Paradox5
@Paradox5
Apr 20 2017 03:27
May I have the link?
rohitdesigner
@rohitdesigner
Apr 20 2017 03:27
@DV1988 whats the prob.
@SkyCoder01 can u give me a challange to make something with js and css just for fun?
Dan V
@DV1988
Apr 20 2017 03:28
cant get my background image to blow up to the whole page
it keeps repeting
rohitdesigner
@rohitdesigner
Apr 20 2017 03:28
@DV1988 no its not repeating
Dan V
@DV1988
Apr 20 2017 03:29
well yeah, but it looks like its trying to, I just want one whole image
rohitdesigner
@rohitdesigner
Apr 20 2017 03:30
@DV1988 the image is not big enought
Dan V
@DV1988
Apr 20 2017 03:30
huh, I cant make it bigger with width & hight
rohitdesigner
@rohitdesigner
Apr 20 2017 03:31
no
Dan V
@DV1988
Apr 20 2017 03:32
ok, so what are my options here, either I keep it or find a bigger image or use css?
kinda stuck now
Paradox5
@Paradox5
Apr 20 2017 03:33
I apologize
But coding on mobile is impossible
I realized your problem
rohitdesigner
@rohitdesigner
Apr 20 2017 03:33
@DV1988 wait let me give u the solution
Paradox5
@Paradox5
Apr 20 2017 03:33
The image repeats because it needs to fill the whole body
Gulsvi
@gulsvi
Apr 20 2017 03:34
@rohitdesigner I'm not feeling very creative right now lol
Dan V
@DV1988
Apr 20 2017 03:34
I realize that, but I think there is a way to tell it to take up the whole page, I just don't know the coding for that
Gulsvi
@gulsvi
Apr 20 2017 03:34
I made a calculator today and now my creativity is drained: http://codepen.io/skycoder/pen/XRXJJP?editors=1011
Maybe help me make a nicer looking clear button?
Paradox5
@Paradox5
Apr 20 2017 03:34
Top notch work as always from sky
A+
Gulsvi
@gulsvi
Apr 20 2017 03:35
That tear drop with the x is kind of weird looking (and thanks @Paradox5 )
CamperBot
@camperbot
Apr 20 2017 03:35
skycoder01 sends brownie points to @paradox5 :sparkles: :thumbsup: :sparkles:
:cookie: 274 | @paradox5 |http://www.freecodecamp.com/paradox5
Gulsvi
@gulsvi
Apr 20 2017 03:35
It still has lots of work left in the JS
Paradox5
@Paradox5
Apr 20 2017 03:35
But it looks better then anything I could ever make
I gotta learn how to make things look good
And functional at the same time
Gulsvi
@gulsvi
Apr 20 2017 03:36
I search in google images for things and then try to recreate them
Paradox5
@Paradox5
Apr 20 2017 03:36
How hard is the js calculator?
The harder the better
Gulsvi
@gulsvi
Apr 20 2017 03:37
For HTML/CSS it's kind of annoying lol, Twitch was much harder
Paradox5
@Paradox5
Apr 20 2017 03:37
Oh thats my next project
Kate
@purplelip
Apr 20 2017 03:37
This might be a silly question: Aside from fulfilling the user stories, does the tribute page have to look similar to the example (e.g., big picture in center, bulleted text, quote at bottom)?
Dan V
@DV1988
Apr 20 2017 03:37
Thanks Paradox5
Paradox5
@Paradox5
Apr 20 2017 03:38
:)
And no
add your own flair
Make it say I AM KATE AND IM PROUD
Kate
@purplelip
Apr 20 2017 03:40
haha! thanks :smile:
Paradox5
@Paradox5
Apr 20 2017 03:40
YOU ARE KATE AND YOU ARE PROUD
yawn
Sam Houlahan
@Sam-Houlahan
Apr 20 2017 03:44
Hi team is anyone available to assist me? It is to do with twitch api project https://github.com/Sam-Houlahan/Twitch-TV-Api basically it is unreliable when showing whos online and offline i cant figure out if is to do with my calls to the api or the code.
Paradox5
@Paradox5
Apr 20 2017 03:45
Theres a pair programming channel
I recommend you post it there
Bur if your looking for review
Sam Houlahan
@Sam-Houlahan
Apr 20 2017 03:50
im looking for help
rohitdesigner
@rohitdesigner
Apr 20 2017 03:57
@Sam-Houlahan what
Johnny
@jtan3
Apr 20 2017 03:59
@Sam-Houlahan did you compared an offline account to an online account in the browser?
Sam Houlahan
@Sam-Houlahan
Apr 20 2017 04:00
Yes i did.
Sam Houlahan
@Sam-Houlahan
Apr 20 2017 04:00
my app is sometimes showing offline users online etc
Johnny
@jtan3
Apr 20 2017 04:04
@Sam-Houlahan would changing data.stream === null help?
Ming Zhu
@chocobrownie
Apr 20 2017 04:04
Hi I just started the "Intermediate Front End Development" Projects. These projects are nothing like the Basic for me because the knowledge I use is not introduced in detail previously anymore. Any genetic rule on how do I search for the additional information I need? For example now I'm not familiar with api and where to get the quotes.
Sam Houlahan
@Sam-Houlahan
Apr 20 2017 04:05
tried that @jtan3
Branden Ng
@BrandenDaniel
Apr 20 2017 04:09
Hello. I'm having troubles with bootstrap. My pull-right class isnt woking
working
Rid Amsal
@RidAmsal
Apr 20 2017 04:10
Hi all, im in Build a Tribute Page section, do you mind sharing your tribute page so i can learn from it? thanks
Johnny
@jtan3
Apr 20 2017 04:10
Branden Ng
@BrandenDaniel
Apr 20 2017 04:12
success! cheers Johnny
Johnny
@jtan3
Apr 20 2017 04:13
@BrandenDaniel codepen uses bootstrap 4. Freecodecamp teaches in bootstrap 3. https://v4-alpha.getbootstrap.com/migration/ here are the differences if you want to switch to bootstrap 4.
Rid Amsal
@RidAmsal
Apr 20 2017 04:15
welldone @jtan3 !
Pagnito
@Pagnito
Apr 20 2017 04:20
was pretty much braindead all day, figured id download garageband 10 before i go to sleep, i guess that took forever, and its about to be finished and i need to go to sleep, but guess what, im suddenly awake...ffffff
uiharu
@uiharu-s
Apr 20 2017 04:57
... :sunrise:
bilaal-s
@bilaal-s
Apr 20 2017 06:10
Hello everyone ^_^ My understanding of absolute positioning doesn't seem to be helping me here xD the animated sun is "outside" the gray oval div i want it to be in when it is resized, any ideas? https://codepen.io/bilaal-s/pen/dWyrgM
Juan David Corrales
@jdcorrales27
Apr 20 2017 06:10
Hi friends. Why no center de Ul list with text-center? in bootstrap3?
https://codepen.io/jdcorrales27/full/xdZKoL/
Markus Kiili
@Masd925
Apr 20 2017 06:12
@bilaal-s Try using percentages for the top and left styles of the sun instead of px.
bilaal-s
@bilaal-s
Apr 20 2017 06:12
@Masd925 Was about to reply in JS chatroom ^_^ sure will try that
devpaaji
@devpaaji
Apr 20 2017 06:16
@bilaal-s do you understand absolute and fixed positioning
in CSS
Markus Kiili
@Masd925
Apr 20 2017 06:16
@bilaal-s You might also use relative units for the sun height and width.
devpaaji
@devpaaji
Apr 20 2017 06:16
and how are they different from floats
Roger Futrell
@rogfut
Apr 20 2017 06:17
What do you guys think of my first project? https://codepen.io/rogfut/pen/YVypBO
bilaal-s
@bilaal-s
Apr 20 2017 06:17
@devpaaji yes, its why i set the div in which the sun is contained to absolute, so that the sun didnt just stay in the corner, where it would be positioned according to body ^_^
@Masd925 tried relative units for the top and left on sun as well as before and after psuedoclass, that didnt work, will try the width
Markus Kiili
@Masd925
Apr 20 2017 06:19
@bilaal-s You have also the absolute margin set there.
Markus Kiili
@Masd925
Apr 20 2017 06:25
@bilaal-s If after those changes the sun is out of place or size, look at the browser developer tools for how the positioning is calculated and what styles are in effect for the sun.
c0d0er
@c0d0er
Apr 20 2017 06:36
does anybody know how to change this disturbing blue color of atom platformio terminal color?
blob
Henry
@GitHub-Henry
Apr 20 2017 06:58
bilaal-s the display for the icon place holder is block, that means it will not be on the same line as the preceeding three dots
@bilaal-s css coding preference, use the lowest selector possible to get the job done, the id selector is like a huge hammer, yes you'll likely get the target, but it's a bit heavy handed. this tip is helpful for larger projects, not so much these small projects
@bilaal-s the icon was missing (only a place holder was there) when i looked at your project so i can't provide further input
bilaal-s
@bilaal-s
Apr 20 2017 07:03
Thanks @GitHub-Henry, I removed it out of frustration haha
CamperBot
@camperbot
Apr 20 2017 07:03
bilaal-s sends brownie points to @github-henry :sparkles: :thumbsup: :sparkles:
:cookie: 306 | @github-henry |http://www.freecodecamp.com/github-henry
wyattelliott
@wyattwade
Apr 20 2017 07:04
Hey guys
I have some questions regarding ajax and web scraping
bilaal-s
@bilaal-s
Apr 20 2017 07:04
@GitHub-Henry shall I put it back so you can have a look?
Henry
@GitHub-Henry
Apr 20 2017 07:04
sure
In the above example, the ajax request is successfully handled, and therefore, alerts 'success'
Henry
@GitHub-Henry
Apr 20 2017 07:08
@bilaal-s gotta leave in 10 or so minutes
wyattelliott
@wyattwade
Apr 20 2017 07:08
If I attempt to use any other URL other than freecodecamp however, the ajax request is not completed
wyattelliott
@wyattwade
Apr 20 2017 07:09
any idea why?
bilaal-s
@bilaal-s
Apr 20 2017 07:09
@GitHub-Henry sorry I left it so late :'(
@GitHub-Henry interesting effect with the p element though O_O
Henry
@GitHub-Henry
Apr 20 2017 07:11
@bilaal-s what is your goal with the sun?
where do you want it
bilaal-s
@bilaal-s
Apr 20 2017 07:12
@GitHub-Henry to have it in a container within the gray oval shape, right now when resizing it falls outside it
@GitHub-Henry its not centered inside the gray oval shape, i think because of the margins, and the shape of the oval is not accomodating for the sun, hence it feels like its not even inside it
Henry
@GitHub-Henry
Apr 20 2017 07:13
ok you need to learn a few things, are you wanting to learn how to layout your page
bilaal-s
@bilaal-s
Apr 20 2017 07:14
@GitHub-Henry definitely!
Henry
@GitHub-Henry
Apr 20 2017 07:14
@bilaal-s right now you need to learn how to layout your page
and position items
it will teach your about flex and how to layout a page
you will learn about containers and items in a container
basically your gray area is a container
the things inside your grey area would be considered items
bilaal-s
@bilaal-s
Apr 20 2017 07:16
@GitHub-Henry I see, is that standard CSS or a plugin or something?
Henry
@GitHub-Henry
Apr 20 2017 07:16
to layout your items you could use flex to layout items in your container
flex is standard css3
supported by most browsers today
bilaal-s
@bilaal-s
Apr 20 2017 07:16
@GitHub-Henry fantastic, thank you very much!
CamperBot
@camperbot
Apr 20 2017 07:16
bilaal-s sends brownie points to @github-henry :sparkles: :thumbsup: :sparkles:
Henry
@GitHub-Henry
Apr 20 2017 07:16
newer ones at least
CamperBot
@camperbot
Apr 20 2017 07:16
:warning: bilaal-s already gave github-henry points
Henry
@GitHub-Henry
Apr 20 2017 07:17
try the tutorial then try laying out your page using flex, it should be easier
bilaal-s
@bilaal-s
Apr 20 2017 07:17
fantastic! :) thanks again
Henry
@GitHub-Henry
Apr 20 2017 07:17
then you could use RELATIVE position to tweak the items in your container
relative position is good for tweaking
nudge item here or there just a bit
bilaal-s
@bilaal-s
Apr 20 2017 07:20
Sounds good!
Henry
@GitHub-Henry
Apr 20 2017 07:20
@bilaal-s also, as you learn take notes so you can reference them when you work on your page, your notes will be valuable to you for reference
@bilaal-s when you say to yourself, how do i position this or that, look at your notes
the tutorial does a good job of covering flex and how to use it
bilaal-s
@bilaal-s
Apr 20 2017 07:22
@GitHub-Henry Good idea! Will get the pen and paper ready :thumbsup:
Henry
@GitHub-Henry
Apr 20 2017 07:23
@bilaal-s you might consider https://evernote.com/
bilaal-s
@bilaal-s
Apr 20 2017 07:24
@GitHub-Henry Indeed, I should haha!
Henry
@GitHub-Henry
Apr 20 2017 07:25
gotta go, good luck
bilaal-s
@bilaal-s
Apr 20 2017 07:26
@GitHub-Henry chat! Thanks again!
CamperBot
@camperbot
Apr 20 2017 07:26
bilaal-s sends brownie points to @github-henry :sparkles: :thumbsup: :sparkles:
:warning: bilaal-s already gave github-henry points
Branden Ng
@BrandenDaniel
Apr 20 2017 07:26
Can anyone recommend a website with high quality pictures with url?
Edgar Pan
@edgaryp
Apr 20 2017 07:32
anybody uses jekyll?
Branden Ng
@BrandenDaniel
Apr 20 2017 07:33
thanks
Nazar
@IsaakNazar
Apr 20 2017 08:00
how to output an element of an array?
function slasher(arr, howMany) {
  var arr1 = [];
  if (arr.length > howMany) {
     arr1.push(arr.slice(howMany));
  }else {
    return arr1;
  }
  return arr1;
}

console.log(slasher([1, 2, 3], 2));// output [Array(1)]  but it shoud be [3]
Edgar Pan
@edgaryp
Apr 20 2017 08:07
@IsaakNazar what do you want it returns when arr.length is less then howMahy?
@IsaakNazar an empty array of arr1?
Edgar Pan
@edgaryp
Apr 20 2017 08:14
@IsaakNazar arr1.push(arr.slice(howMany)); will return an array so your function is actually returning [[3]].
Darth Skywalker
@adityaparab
Apr 20 2017 08:15
@IsaakNazar you might wanna concat instead of push...
Nazar
@IsaakNazar
Apr 20 2017 08:15
@edgaryp thx
CamperBot
@camperbot
Apr 20 2017 08:15
isaaknazar sends brownie points to @edgaryp :sparkles: :thumbsup: :sparkles:
:cookie: 308 | @edgaryp |http://www.freecodecamp.com/edgaryp
Darth Skywalker
@adityaparab
Apr 20 2017 08:15

so you can do either

arr1 = arr1.concat(arr.slice(howMany));

or

return arr1.concat(arr.slice(howMany));
.slice will return an array. And you're pushing array into an array.
so it makes sense that if your arr1 is an array then you .concat output of .slice to arr1
sai2333
@sai2333
Apr 20 2017 08:31
。。。那个有中国的吗
实在抱歉,我不会英语
luis4flames
@luis4flames
Apr 20 2017 08:59
anyone happen to know how to make all content be pushed down when nav bar extends down...
ive got it down with mobile version, but once I use a media query to adjust to bigger vh size it overlaps content
Nazar
@IsaakNazar
Apr 20 2017 09:19
where am I wrong?
function mutation(arr) {
  for (var i = 0; i < arr.length; i++) {
    for (var j = 0; i < arr[i].length; j++) {
      if( arr[0].toLowerCase().indexOf(arr[i][j]) === arr[1].toLowerCase().indexOf(arr[i][j]) ){
        return true;
      } return false
    }
  }
}

console.log(mutation(["hello", "hey"])); //output true, but it should be false
// return true if all of the letters in the second string are present in the first, ignoring case, false otherwise
Clyde Lobo
@oppiniated
Apr 20 2017 09:20
@IsaakNazar
if( arr[0].toLowerCase().indexOf(arr[i][j]) === arr[1].toLowerCase().indexOf(arr[i][j]) ){
        return true;
      }
Chima Amaike
@daUnborn
Apr 20 2017 09:20
Hello guys, I need an image displayed at the right of my search box. I was able to add the image but I can't get to reduce the size to fit the search box. Below is my css code for the text box. Please, help
input[type=text] {
    width: 130px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    background-color: white;
    background-image: url('http://caffeineclicksllc.com/wp-content/uploads/2013/03/search-50.png');
    background-position: 10px 10px; 
    background-repeat: no-repeat;
    padding: 12px 20px 12px 40px;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
}
Clyde Lobo
@oppiniated
Apr 20 2017 09:20
It returns true for the first charater.
@daUnborn background-size
Chima Amaike
@daUnborn
Apr 20 2017 09:23
Thanks @oppiniated . It worked. I believe I need to find the css documentation and get used to it.
CamperBot
@camperbot
Apr 20 2017 09:23
:cookie: 610 | @oppiniated |http://www.freecodecamp.com/oppiniated
daunborn sends brownie points to @oppiniated :sparkles: :thumbsup: :sparkles:
Nazar
@IsaakNazar
Apr 20 2017 09:24
@oppiniated so how to compare each letter of arr[0] to arr[1]?
Clyde Lobo
@oppiniated
Apr 20 2017 09:29
@IsaakNazar You return false when the characters do not match
So change the condition like
if( arr[0].toLowerCase().indexOf(arr[i][j]) !== arr[1].toLowerCase().indexOf(arr[i][j]) ){
        return false;
 }
and at the end of the second for loop, return true
Nazar
@IsaakNazar
Apr 20 2017 09:41
@oppiniated like this? Because its always outputs false
function mutation(arr) {
  for (var i = 0; i < arr.length; i++) {
    for (var j = 0; i < arr[i].length; j++) {
      if( arr[0].toLowerCase().indexOf(arr[i][j]) !== arr[1].toLowerCase().indexOf(arr[i][j]) ){
        return false;
      }
    }return true;
  }
}
Andy
@Andy189
Apr 20 2017 09:53
http://output.jsbin.com/hakuwiq/19# Please exhibitions, project 1
Jianhao Tan
@jaanhio
Apr 20 2017 10:00
any know how can i make the bootstrap navbar background color to be white?
it seems like to stay slightly greyish even after having set it to white
Andy
@Andy189
Apr 20 2017 10:05
The navigation bar should be a background image, the following is the gradient.
Clyde Lobo
@oppiniated
Apr 20 2017 10:07
@jaanhio Link? Most probably because of some other rule is overriding it
Jianhao Tan
@jaanhio
Apr 20 2017 10:08
@oppiniated do not have the site up yet
@Andy189 @oppiniated i am trying to emulate the navbar seen from this website www.charmainewu.com
@Andy189 bootstrap navbar default is a background image that is grey?
mystique-coder
@mystique-coder
Apr 20 2017 10:15
hey .. how can i smooth scroll in bootstrap v4 ??
mikou-mouad
@mikou-mouad
Apr 20 2017 10:24
Hi guys, pleas i'm trying to use the Twitchtv JSON API, but i think my json call don't succeed, $.getJSON("https://wind-bow.gomix.me/twitch-api/streams/" + streamer[0], function(data) {
html += "<li>moi</li><li>moi</li><li>moi</li><li>moi</li>";
/if(data.stream===null || data.stream===undefined){
html+="<li>"+stream+"</li>";
}
else{
html+="<li>"+stream+"(streaming)</li>";
html+="<span>moi</span>";
}
/
});
sorry here is my json call
$.getJSON("https://wind-bow.gomix.me/twitch-api/streams/" + streamer[0], function(data) {
html += "<li>moi</li><li>moi</li><li>moi</li><li>moi</li>";
}); it's just for a small test but the success function is not execited
and here is the streamer list
var streamer = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];
h1tag
@h1tag
Apr 20 2017 10:28
@mikou-mouad check your browser's console
mikou-mouad
@mikou-mouad
Apr 20 2017 10:29
yes when i'm trying it into browser it's working well
blob
h1tag
@h1tag
Apr 20 2017 10:30
@mikou-mouad no, press ctrl/command + shift + j
where are you developing?
mikou-mouad
@mikou-mouad
Apr 20 2017 10:30
codepen
h1tag
@h1tag
Apr 20 2017 10:30
press ctrl/command + shift + j
in the pen page
this will open up the browser's console
mikou-mouad
@mikou-mouad
Apr 20 2017 10:32
XMLHttpRequest cannot load https://wind-bow.gomix.me/twitch-api/streams/ESL_SC2. Redirect from 'https://wind-bow.gomix.me/twitch-api/streams/ESL_SC2' to 'https://wind-bow.glitch.me/twitch-api/streams/ESL_SC2' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://s.codepen.io' is therefore not allowed access.
h1tag
@h1tag
Apr 20 2017 10:33
and can you link to the pen?
copy-paste the url of ur pen here
Bogdan Gatej
@Bogdan2992
Apr 20 2017 10:35
Hello
mikou-mouad
@mikou-mouad
Apr 20 2017 10:36
hi
h1tag
@h1tag
Apr 20 2017 10:37
@mikou-mouad add ?callback=? at the end of the request URL
mikou-mouad
@mikou-mouad
Apr 20 2017 10:38
still not succeeded
h1tag
@h1tag
Apr 20 2017 10:39
it does, add console.log(data); inside you getJSON callback function
you'll see the returned object in the console
mikou-mouad
@mikou-mouad
Apr 20 2017 10:40
yes ok i see it
so now the problem is just for the string construction
many thanks
h1tag
@h1tag
Apr 20 2017 10:41
why ?callback=? ?
"jsonp": Loads in a JSON block using JSONP. Adds an extra "?callback=?" to the end of your URL to specify the callback
Bogdan Gatej
@Bogdan2992
Apr 20 2017 10:42
any1 can help me with creating a facebook buttton proper way ?
http://codepen.io/Bogdan2992/pen/bgQZYd
this is the project I don't manage to get the right way of creating that button
mikou-mouad
@mikou-mouad
Apr 20 2017 10:43
@fortMaximus many thanks i see now
CamperBot
@camperbot
Apr 20 2017 10:43
mikou-mouad sends brownie points to @fortmaximus :sparkles: :thumbsup: :sparkles:
:cookie: 730 | @fortmaximus |http://www.freecodecamp.com/fortmaximus
Bogdan Gatej
@Bogdan2992
Apr 20 2017 11:05

can any1 explain me why I don't get the correct look of the share on facebook button ?
http://codepen.io/Bogdan2992/pen/bgQZYd

here is the project

Marteize Howard
@martymc21
Apr 20 2017 12:10
can anyone help with the pig latin algorithm? having a complete brain fart
Mike S
@TheMicsmith
Apr 20 2017 12:10
@Bogdan2992 I don't see your CSS defined class 'facebook-share', unless I'm being blind?
@Bogdan2992 unless you're missing the <i> for your share, you have it included in the 'tweet' button code
Simo
@SimoOmis10
Apr 20 2017 12:14
Hello
Mike S
@TheMicsmith
Apr 20 2017 12:14
g'day
Simo
@SimoOmis10
Apr 20 2017 12:15
<div>
      <p id="myP">Un peu de texte, <a>un lien</a> et <strong>une portion en emphase</strong></p>
  </div>

     <script>

       var First = document.getElementById("myP").firstChild;
       var last=document.getElementById("myP").lastChild;
        var ArrayChild = document.getElementById("MyP").childNodes;


           for(var i=0 ; i<ArrayChild.length ; i++){
               alert("\n Le noeud Enfant N°: est: "+ArrayChild[i].nodeName);
           }

     </script>
Why the code doesn't work
Gabriel Karczewski
@nickelghost
Apr 20 2017 12:46
@SimoOmis10 Don't start your variable names with an upper case letter. Just look into your console: TypeError: document.getElementById(...) is null[Learn More]
@SimoOmis10 On line 9, you wrote "MyP" instead of "myP", that's why it didn't work.
Duyali
@Duyali
Apr 20 2017 13:02
Where i can enjoy someone else's work set template, in codepen
Todor Georgiev
@XtraPurpl3
Apr 20 2017 13:04
hello can i get help with this please, how can i make this compatable with all devices not just desktop, i would like it to be nicely visible on a smartphone and tablet but when i resize my window it all gets cramped up please help :) ty
?
Vincent Del Vecchio
@DVecc
Apr 20 2017 13:09
Does anyone know how to change the height of bootstraps wells?
I'm trying to get the well to take up a certain amount of vertical space and not just wrap the contents
never mind, I'm dumb
was changing wrong elements style attributes :X
Todor Georgiev
@XtraPurpl3
Apr 20 2017 13:11
did u try .well-lg
o hahah
:P
kirbyedy
@kirbyedy
Apr 20 2017 13:14
@XtraPurpl3 ermmm well I see you are using bootstrap, but most probably you are not using it properly otherwise your portfolio should be responsive
Bas
@Aliaselias
Apr 20 2017 13:17
@XtraPurpl3 Please never ever use comic sans
Vincent Del Vecchio
@DVecc
Apr 20 2017 13:18
@XtraPurpl3 Try putting your content within rows and columns. ex: <div class="row"><div class="col-xs-12">Content Goes Here</div></div>
Todor Georgiev
@XtraPurpl3
Apr 20 2017 13:23
ok cool beans thanks guys
Keon Samuel
@keonsam
Apr 20 2017 13:45
lol this @keyframe was real dumb down compare to JS.
Benjamin Hike
@BenJess
Apr 20 2017 13:49
hey all. I'm trying a dumbed down version on getting a number and displaying it in a div. doesn't seem to work. can anybody help out?

$(document).ready(function() {
var totalOutput;
var numbers = [''];

function update() {
totalOutput = numbers.join('');
$('#display').html(totalOutput);
}

$("a").on('click', function() {
update();
getValue(this.id);

});

});

Benjamin Hike
@BenJess
Apr 20 2017 13:54
can't seem to fig out what the problem is
Keon Samuel
@keonsam
Apr 20 2017 13:55
what are you doing codepen?
Benjamin Hike
@BenJess
Apr 20 2017 13:55
yes
Keon Samuel
@keonsam
Apr 20 2017 13:55
post the link.
Philipp Scholz
@philipp32
Apr 20 2017 13:56
function dropElements(arr, func) {
  var i = 0;
  while (arr.filter(func).length === 0){
    i++;
    arr.slice(0,i); // not so sure about this line
  }
  return arr;
}

dropElements([1, 2, 3, 9, 2], function(n) {return n > 2;})
This is my code so far. I still have trouble figuring out the errors in this code.
Why doesn't my function drop the first elements of the array but instead returns the whole array?
Benjamin Hike
@BenJess
Apr 20 2017 13:58
@keonsam button is <a class="btn btn-secondary" id="1">1</a>
Irek Romaniuk
@irom77
Apr 20 2017 13:59

Hey guys, I have below functions ```
function getLocation() {
//...
console.log(location.loc);
//41.9980,-71.4941
getWeather(location.loc);
}
function getWeather(loc) {

console.log(loc);
//41.9980,-71.4941
lat = loc.split(",")[0]; //'lat' is not defined no-undef

lon = loc.split(",")[1];
//'lon' is not defined no-undef
console.log(lat, lon)
)
getLocation();
```

getting 'lat','lon' is not defined
Keon Samuel
@keonsam
Apr 20 2017 14:03
the link to your pen.
lol
Benjamin Hike
@BenJess
Apr 20 2017 14:05
@keonsam If you need the link to my pen to fig this out then you have no business being here
This code should be working.
Keon Samuel
@keonsam
Apr 20 2017 14:06
lol
you know that I am on the tic tac toe game right?
deaninous
@deaninous
Apr 20 2017 14:07
lol @keonsam
Benjamin Hike
@BenJess
Apr 20 2017 14:07
@keonsam Wow, you're a coding genius. Thanks for nothing
CamperBot
@camperbot
Apr 20 2017 14:07
:cookie: 331 | @keonsam |http://www.freecodecamp.com/keonsam
benjess sends brownie points to @keonsam :sparkles: :thumbsup: :sparkles:
Keon Samuel
@keonsam
Apr 20 2017 14:08
@BenJess but you are noobing so bad with that code I think I should check out the entire project.
deaninous
@deaninous
Apr 20 2017 14:09
@BenJess look at your totalOuput variable variable seems to remain empty and you want to use it is a content of a div.
Benjamin Hike
@BenJess
Apr 20 2017 14:09
@keonsam I repeat. If you need the link to fig out 16 lines of code and the html button maybe you shouldn't be on the tic tac toe game
Keon Samuel
@keonsam
Apr 20 2017 14:09
$('#var numbers = [ ];
display').html(numbers.join(''));
Benjamin Hike
@BenJess
Apr 20 2017 14:10
awww see? that wasn't so hard
Edward Huang
@edwardGunawan
Apr 20 2017 14:10
are there any good procedures/tutorial on making a static responsive site? is it better to create the HTML, CSS , statically in all devices before creating the template engine on rendering the content of the HTML?
Keon Samuel
@keonsam
Apr 20 2017 14:10
that is more like it lol.
Edward Huang
@edwardGunawan
Apr 20 2017 14:10
sorry to interrupt you guys :worried:
Benjamin Hike
@BenJess
Apr 20 2017 14:12
unfortunately that's wrong. so I guess you're the noob here.
Mike S
@TheMicsmith
Apr 20 2017 14:12
woah
when did this become toxic?
elad ben aderet
@eladonline
Apr 20 2017 14:13
for scss users can u tell me why it tells me "Invalid CSS after ".top ": expected selector, was "10em"" https://codepen.io/eladonline/pen/MmyKrG?editors=1101
elad ben aderet
@eladonline
Apr 20 2017 14:19
@BenJess open console and console.log the totalOutput inside the update function
console (browser console)
i cant see whats wrong here
Augusto Wang
@GusWng
Apr 20 2017 14:22
https://codepen.io/GusWng/pen/EmKKjq can somebody help me with the js here? its about the weather challenge and i cant get the background images to change, or to show the weather at all :(
elad ben aderet
@eladonline
Apr 20 2017 14:25
@GusWng y use switch case with urls ?
Keon Samuel
@keonsam
Apr 20 2017 14:28
@BenJess post your code in the JS section of the chat.
elad ben aderet
@eladonline
Apr 20 2017 14:28
@GusWng your location api dosent get results
Paradox5
@Paradox5
Apr 20 2017 14:32
Hey peeps
@GusWng is that you blu
Lol
Andrés Reverón Molina
@systemallica
Apr 20 2017 14:35
Hey I'm having some problems using $.getJSON in my Wikipedia Viewer project. I'm not getting any data from the API call, even though the link seems to be correct. Could anyone take a look at my code please? https://codepen.io/systemallica/pen/xdVxJW
h1tag
@h1tag
Apr 20 2017 14:41
@systemallica remove the 1st ? from &?callback=?
Anatoliy
@uzrptav
Apr 20 2017 14:42
Hi, please help! How to serialize values from form input elements into JSON?
h1tag
@h1tag
Apr 20 2017 14:44
@uzrptav using forms or standalone?
Sorin Ruse
@sorinr
Apr 20 2017 14:46
@GusWng switch to http when loading your pen
Anatoliy
@uzrptav
Apr 20 2017 14:47
@fortMaximus using form with input elements inside
Augusto Wang
@GusWng
Apr 20 2017 14:47
@eladonline i thought it made the most sense
Augusto Wang
@GusWng
Apr 20 2017 14:48
@sorinr thx that helped with getting the data at all haha
CamperBot
@camperbot
Apr 20 2017 14:48
guswng sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1265 | @sorinr |http://www.freecodecamp.com/sorinr
Andrés Reverón Molina
@systemallica
Apr 20 2017 14:48
@fortMaximus Thank you very much! That was so simple D:
CamperBot
@camperbot
Apr 20 2017 14:48
systemallica sends brownie points to @fortmaximus :sparkles: :thumbsup: :sparkles:
:cookie: 731 | @fortmaximus |http://www.freecodecamp.com/fortmaximus
Sorin Ruse
@sorinr
Apr 20 2017 14:48
@GusWng welcome
h1tag
@h1tag
Apr 20 2017 14:49
@uzrptav why do you need it in this project?
Augusto Wang
@GusWng
Apr 20 2017 14:49
@Paradox5 erm i dont think so haha
Anatoliy
@uzrptav
Apr 20 2017 14:50
@fortMaximus i'm trying to add new qoute.
h1tag
@h1tag
Apr 20 2017 14:51
@uzrptav you mean the user types a quote? Or from the array?
nvm, I see what you want
Anatoliy
@uzrptav
Apr 20 2017 14:52
@fortMaximus yes! User will input new quote
@fortMaximus or i choose wrong approach for this?
h1tag
@h1tag
Apr 20 2017 14:54
it's not required for this project, but if you like to add it, you can
you can do something like on submit or on click and then get the value of the textbox inside the callback function
Jorge
@OrangeKulture
Apr 20 2017 14:58
hey guys, hows it going?
Anatoliy
@uzrptav
Apr 20 2017 14:58
@fortMaximus So, i can get direct values instead call serialize?
Vincent Del Vecchio
@DVecc
Apr 20 2017 14:58
yall need to chill
h1tag
@h1tag
Apr 20 2017 14:58
sorry, I don't understand what do you mean by "call serialize"? @uzrptav
Vincent Del Vecchio
@DVecc
Apr 20 2017 14:59
having the codepen link allows people to check that you're using the correct css and js external links and to modify the code on their own branch in order to help you fix your problem
don't be toxic when asking for help
Anatoliy
@uzrptav
Apr 20 2017 15:00
@fortMaximus sorry for my english. You give me an idea! Tnx a lot!
CamperBot
@camperbot
Apr 20 2017 15:00
uzrptav sends brownie points to @fortmaximus :sparkles: :thumbsup: :sparkles:
:cookie: 732 | @fortmaximus |http://www.freecodecamp.com/fortmaximus
h1tag
@h1tag
Apr 20 2017 15:00
YW :)
Anatoliy
@uzrptav
Apr 20 2017 15:01
@fortMaximus var json = $("#saveContactForm").serializeJSON();
h1tag
@h1tag
Apr 20 2017 15:05
@uzrptav so the serialize turns the input into an object?
Oh, I see what you want to achieve
Chris
@bestintown23
Apr 20 2017 15:10
How to make my images and p elements show in a row? http://codepen.io/bestintown23/pen/PmZazE
CamperBot
@camperbot
Apr 20 2017 15:18
:bulb: to format code use backticks! ``` more info
Vincent Del Vecchio
@DVecc
Apr 20 2017 15:18
@bestintown23
<body class="body">
  <div class="nav">
    <ul>
      <li>About</li>
      <li>Portfolio</li>
      <li class="logo">iCH</li>
      <li>Services</li>
      <li>Contact</li>
    </ul>
  </div>
  <br>
 <div class="container">
  <h1 id="h1">Portfolio</h1>
  </div>

  <div class="container">
    <div class="row">
      <div class="col-sm-4">
        <img src="https://s20.postimg.org/6yyr3wlr1/Capture.jpg" class="mjsite">
        <p>MJ Tribute Site</p>
        <br>
        <p>Created on 11/18/2016.<br>Site Created with: HTML 5 and CSS 3.<br>
          Overview: A Tribute Site to Michael Jordan.
        </p>
      </div>



      <div class="col-sm-4">
        <img src="https://s20.postimg.org/6yyr3wlr1/Capture.jpg" class="mjsite">
        <p>MJ Tribute Site</p>
        <br>
        <p>Created on 11/18/2016.<br>Site Created with: HTML 5 and CSS 3.<br>
          Overview: A Tribute Site to Michael Jordan.
        </p>


  </div>


      <div class="col-sm-4">
        <img src="https://s20.postimg.org/6yyr3wlr1/Capture.jpg" class="mjsite">
        <p>MJ Tribute Site</p>
        <br>
        <p>Created on 11/18/2016.<br>Site Created with: HTML 5 and CSS 3.<br>
          Overview: A Tribute Site to Michael Jordan.
        </p>


  </div>
</body>
Augusto Wang
@GusWng
Apr 20 2017 15:18
can someone tell me why the button doesnt work?
Benjamin Hike
@BenJess
Apr 20 2017 15:20
@eladonline logged the console and it didn't print anything. This is crazy.
Gulsvi
@gulsvi
Apr 20 2017 15:21
@GusWng You seem to be declaring icon_replace before it is defined: var icon_replace = $("#icon").attr("src");
So, when this code runs: $("#icon").attr("src",icon_replace.replace("#","http://openweathermap.org/img/w/"+icon+".png"));
an error occurs.
Augusto Wang
@GusWng
Apr 20 2017 15:27
i thought i declared icon_replace in line 8 or so
@SkyCoder01
Pronod
@Pronod
Apr 20 2017 15:28
Hi all. I have problem with Wikipedia api, can't understand how to get json. Help pls. https://codepen.io/Pronod/pen/BRKozb
Gulsvi
@gulsvi
Apr 20 2017 15:28
@GusWng Do this and you'll see it isn't defined yet - there isn't any src for that img tag:
var icon_replace = $("#icon").attr("src");
alert(icon_replace);
Sludg3
@Sludg3
Apr 20 2017 15:28
Hello people, having trouble with first project. Can't seem to get caption to attach to image. lesson = Build a Tribute page
Vincent Del Vecchio
@DVecc
Apr 20 2017 15:29
@GusWng I'm not seeing anything with the id icon in your project
TiagoGomes
@TiagoGomesDesign
Apr 20 2017 15:29
hi there!
Gulsvi
@gulsvi
Apr 20 2017 15:30
@GusWng Basically, add an alert and you'll see "undefined"
The other issue is that you're using innerHTML with a jQuery selector when switching back to Celsius. $("#temp").innerHTML(temp + "°C");, you can use .text() instead: $("#temp").text(temp + "°C");
Vincent Del Vecchio
@DVecc
Apr 20 2017 15:30
@Sludg3 Check your css external source, is it using bootstrap 4.0?
TiagoGomes
@TiagoGomesDesign
Apr 20 2017 15:31
I am trying to finish the twitcher challenge but right now I a CORS error
Vincent Del Vecchio
@DVecc
Apr 20 2017 15:31
if so you may want to change it to use Bootstrap 3
Augusto Wang
@GusWng
Apr 20 2017 15:31
@DVecc ye i removed the tag in html since i only want it to change the background image
Vincent Del Vecchio
@DVecc
Apr 20 2017 15:34
When you run this $("#icon")
Isn't it looking for something with that id and failing to find it then?
Gulsvi
@gulsvi
Apr 20 2017 15:34

@GusWng Change:

var icon_replace = $("#icon").attr("src");

to:

var icon_replace = "http://openweathermap.org/img/w/"+icon+".png";

And change:

$("#icon").attr("src",icon_replace.replace("#","http://openweathermap.org/img/w/"+icon+".png"));

to:

$("#icon").attr("src",icon_replace);

And don't forget to add a <img id="icon"> to your html :)

TiagoGomes
@TiagoGomesDesign
Apr 20 2017 15:35
I am trying to connect to twitch API but I am getting a CORS error : No 'Access-Control-Allow-Origin'
Gulsvi
@gulsvi
Apr 20 2017 15:36
@Pronod You're getting a Cross Origin error. Add &origin=* to your Wikipedia URL: http://stackoverflow.com/a/42079398
Augusto Wang
@GusWng
Apr 20 2017 15:37
@SkyCoder01 ok wow that worked o.O but how can i change the background image according to the icon/weather?
thx btw @SkyCoder01 :D
CamperBot
@camperbot
Apr 20 2017 15:37
guswng sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1105 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Gulsvi
@gulsvi
Apr 20 2017 15:38
@GusWng You'll need to work on that switch statement, part of the challenge :)
Augusto Wang
@GusWng
Apr 20 2017 15:38
@SkyCoder01 dang haha thank you for your help anyways ^^
CamperBot
@camperbot
Apr 20 2017 15:38
:warning: guswng already gave skycoder01 points
guswng sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
Gulsvi
@gulsvi
Apr 20 2017 15:40
@GusWng If it gets really frustrating, you can always just display a random background image. The main requirement is to show an image related to the weather, and you're doing that now that you have the icon showing up.
In my weather app I used this link to show a random nature background: https://source.unsplash.com/category/nature/1600x900
Augusto Wang
@GusWng
Apr 20 2017 15:42
@SkyCoder01 oh wow thank you again haha shame i cant give you credit 10 times xD
CamperBot
@camperbot
Apr 20 2017 15:42
guswng sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:warning: guswng already gave skycoder01 points
Gulsvi
@gulsvi
Apr 20 2017 15:45
@TiagoGomesDesign You can use JSONP to work around that error, add &callback=? to the end of your url, or ?callback=? after the user name you're searching for.
WJAMAL24
@WJAMAL24
Apr 20 2017 15:48
Morning guys, I'm working on my tribute page project and I'm having trouble getting my bullet points to be aligned in the center. So I tried putting them in a row instead and now they're just on top of each other even though I'm giving them a div-col-*
<p>
Top songs:
<ul>
<div class="row">
<div class="col-xs-4"> <li class="text-center"> I2I </li> </div>
<div class="col-xs-8"> <li> Stand Out </li> </div>
</ul>
Gulsvi
@gulsvi
Apr 20 2017 15:48
@Pronod $("#sr").html(JSON.stringify(json.query.pages));
@WJAMAL24 <div> can't be a child of <ul> and <li> can't be a child of <div>
<ul>
  <li>Stand Out</li>
  <li>Next Item</li>
  <li>Another Item</li>
</ul>
WJAMAL24
@WJAMAL24
Apr 20 2017 15:52
Got it, would there be a better way to put bullet points in a row? or does putting them in a <ul> and <li> element make the bullet point stay left aligned?
Pronod
@Pronod
Apr 20 2017 15:53
@SkyCoder01 I can get only one page this way as I understand. How can I search for some amount of pages with similar title?
Gulsvi
@gulsvi
Apr 20 2017 15:54
@WJAMAL24 To put the list in a row, do:
<div class="row">
  <ul>
    <li>Stand Out</li>
    <li>Next Item</li>
    <li>Another Item</li>
  </ul>
</div>
TiagoGomes
@TiagoGomesDesign
Apr 20 2017 15:55
@SkyCoder01 thanks! I will try that.
CamperBot
@camperbot
Apr 20 2017 15:55
tiagogomesdesign sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1106 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Gulsvi
@gulsvi
Apr 20 2017 15:55
@Pronod Your query is currently returning ten different results from what I see
Good luck, Tiago!
@Pronod Oh....never mind, I just looked closer in the debug console. It's giving you a list of related articles, but not the content of the articles. That API is really complicated, takes a few hours to figure out how to get the search right. You could go with the easy OpenSearch method if you want instead: https://www.mediawiki.org/wiki/API:Opensearch
WJAMAL24
@WJAMAL24
Apr 20 2017 15:58
@SkyCoder01 I did try that before but it didn't seem to work. Thanks SkyCoder!
CamperBot
@camperbot
Apr 20 2017 15:58
wjamal24 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1107 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Gulsvi
@gulsvi
Apr 20 2017 15:59
@WJAMAL24 It won't center your list - you'll need to use CSS or put the list in a column with offsets instead: https://v4-alpha.getbootstrap.com/layout/grid/#offsetting-columns
Sorin Ruse
@sorinr
Apr 20 2017 16:02

@WJAMAL24 using

ul {
    list-style-position: inside;
}

will transform ur ul list into a block that can be manipulated as a whole

Pronod
@Pronod
Apr 20 2017 16:11
@SkyCoder01 Something is wrong again... Can you look, pls?
Gulsvi
@gulsvi
Apr 20 2017 16:11
Sure, @Pronod
You got rid of origin=* from your URL @Pronod :)
XMLHttpRequest cannot load https://en.wikipedia.org/w/api.php?action=opensearch&search=test&limit=10&namespace=0&format=json&redirects=return. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://s.codepen.io' is therefore not allowed access.
^^ Use your Browser's debugger to see these errors. Ctrl + Shift + J

It's from the sandbox instructions:

origin
For non-authenticated requests, specify the value *. This will cause the Access-Control-Allow-Origin header to be set, but Access-Control-Allow-Credentials will be false and all user-specific data will be restricted.

Pronod
@Pronod
Apr 20 2017 16:14
@SkyCoder01 Ok. Thank you
CamperBot
@camperbot
Apr 20 2017 16:14
pronod sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1108 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Gulsvi
@gulsvi
Apr 20 2017 16:14
No problem, that API call will be much easier to use.
TiagoGomes
@TiagoGomesDesign
Apr 20 2017 16:15
@SkyCoder01 so I tried that and the url is something like that https://wind-bow.gomix.me/twitch-api/channels/freecodecamp&callback=?
but even with your trick still have that error
Gulsvi
@gulsvi
Apr 20 2017 16:16
@TiagoGomesDesign It should be https://wind-bow.gomix.me/twitch-api/channels/freecodecamp?callback=?
Url parameters start with a question mark, then additional ones get added with ampersands. so, http://url?parameter1&parameter2&parameter3
I wasn't sure what URL you were using, so gave two options earlier.
TiagoGomes
@TiagoGomesDesign
Apr 20 2017 16:18
https://wind-bow.gomix.me/twitch-api/ this one is the base url
Tamas Csonka
@csnktms
Apr 20 2017 16:18
hey anyone
experienced here with react?
Gulsvi
@gulsvi
Apr 20 2017 16:19
I think they cover react-related projects in dataviz room https://gitter.im/FreeCodeCamp/HelpDataViz
Looks quiet in there though...
TiagoGomes
@TiagoGomesDesign
Apr 20 2017 16:19
and then I passe it in a XMLHttpRequest function
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
      if(xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200){
        return JSON.parse(xhr.response);
      }
    }
    xhr.open('GET',channel,true)
    xhr.send();
  }`
Gulsvi
@gulsvi
Apr 20 2017 16:21
@TiagoGomesDesign That callback=? is intended for a jQuery getJSON call
Helps to see the code, sorry.... lots of available solutions for the error :)
I would maybe use fetch() instead of XMLHttpRequest if you don't want to use jQuery.
TiagoGomes
@TiagoGomesDesign
Apr 20 2017 16:22

````const url = 'https://wind-bow.gomix.me/twitch-api';
const myChannels = ['freecodecamp', 'natalie_moore','wr4thtv','koshkamoroshka','esl_sc2'];

class ChannelList extends React.Component{
constructor(props){
super(props);
this.state = {
channel:[{
info:{},
stream:{}
}]
};
this.componentWillMount = this.componentWillMount.bind(this);
this.xhrReq = this.xhrReq.bind(this);
}
xhrReq(channel){
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if(xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200){
return JSON.parse(xhr.response);
}
}
xhr.open('GET',channel,true)
xhr.send();
}
componentWillMount(){
const channel = myChannels.forEach(ch =>{
console.log(this.xhrReq(${url}/channels/${ch}/?callback=?));
});

}
render(){
return(
<div>
{this.state.channel.map((ch,i) => {

    })}
  </div>
)

}
}

this is my all code
Usama Mahmood
@usamacjs
Apr 20 2017 16:22
how to add an image to my message?
uiharu
@uiharu-s
Apr 20 2017 16:23
@usamacjs you mean here?
drag and drop
Gulsvi
@gulsvi
Apr 20 2017 16:23
function getChannelsData(user) {
  const url = 'https://wind-bow.glitch.me/twitch-api/channels/' + user;
  return fetch(url).then(res => res.json());
}

getChannelsData('freeCodeCamp').then(function(data) {
  console.log(data);
});
@TiagoGomesDesign
Usama Mahmood
@usamacjs
Apr 20 2017 16:24
Screen Shot 2017-04-20 at 7.18.54 PM.png
Gulsvi
@gulsvi
Apr 20 2017 16:24
I'm not very good with react.js, if that's what you're using above :/
TiagoGomes
@TiagoGomesDesign
Apr 20 2017 16:24
yes I am trying to get use it
I am just a beginner at react
Usama Mahmood
@usamacjs
Apr 20 2017 16:25
i have been stuck since a few hours, i copied a component's code from bootstrap but the navigation bar is not working
TiagoGomes
@TiagoGomesDesign
Apr 20 2017 16:25
but thanks anyway
you where very helpfull
Gulsvi
@gulsvi
Apr 20 2017 16:25
@TiagoGomesDesign Be sure to use glitch.me instead of gomix.me that may help, gomix.me is a redirect
Usama Mahmood
@usamacjs
Apr 20 2017 16:26
Screen Shot 2017-04-20 at 7.18.54 PM.png
h1tag
@h1tag
Apr 20 2017 16:26
@usamacjs did you add Bootstrap CSS + JQuery + Bootstrap JS?
TiagoGomes
@TiagoGomesDesign
Apr 20 2017 16:27
I just copy that base url from freecodecamp twitch challenge
Usama Mahmood
@usamacjs
Apr 20 2017 16:27
yesss
i did
@fortMaximus
Gulsvi
@gulsvi
Apr 20 2017 16:27
@TiagoGomesDesign If you navigate to it directly in your browser, you'll see it redirects to .glitch.me domain. I think XMLHttpRequest won't like that
h1tag
@h1tag
Apr 20 2017 16:28
can u link to the pen here @usamacjs ?
Screen Shot 2017-04-20 at 7.28.05 PM.png
Screen Shot 2017-04-20 at 7.28.15 PM.png
h1tag
@h1tag
Apr 20 2017 16:30
@usamacjs where did you get the code from?
Usama Mahmood
@usamacjs
Apr 20 2017 16:30
getbootstrap.com
h1tag
@h1tag
Apr 20 2017 16:31
can you give me the exact link?
h1tag
@h1tag
Apr 20 2017 16:32
@usamacjs this code is using Bootstrap 3
Usama Mahmood
@usamacjs
Apr 20 2017 16:33
ohhh, i see
what should i do?
use the links in this link
for Bootstrap css and js
Usama Mahmood
@usamacjs
Apr 20 2017 16:35
thank you so much :)
h1tag
@h1tag
Apr 20 2017 16:35
YW :)
Gulsvi
@gulsvi
Apr 20 2017 16:37
Hello @fortMaximus How are you?
h1tag
@h1tag
Apr 20 2017 16:37
@SkyCoder01 Hi! Good! Thank you!
CamperBot
@camperbot
Apr 20 2017 16:37
fortmaximus sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1109 | @skycoder01 |http://www.freecodecamp.com/skycoder01
h1tag
@h1tag
Apr 20 2017 16:37
what about you?
Gulsvi
@gulsvi
Apr 20 2017 16:37
Tomorrow is Friday, finally :) :sunglasses:
h1tag
@h1tag
Apr 20 2017 16:37
:cool: ;)
Gulsvi
@gulsvi
Apr 20 2017 16:38
Thank you as well @fortMaximus
CamperBot
@camperbot
Apr 20 2017 16:38
skycoder01 sends brownie points to @fortmaximus :sparkles: :thumbsup: :sparkles:
:cookie: 733 | @fortmaximus |http://www.freecodecamp.com/fortmaximus
h1tag
@h1tag
Apr 20 2017 16:38
like my new avatar? ;)
Gulsvi
@gulsvi
Apr 20 2017 16:38
Yes! Reminds me of this shirt my brother has
h1tag
@h1tag
Apr 20 2017 16:38
wolves <3
h1tag
@h1tag
Apr 20 2017 16:39
wooow!
Gulsvi
@gulsvi
Apr 20 2017 16:39
can't believe it has its own wikipedia page haha
TiagoGomes
@TiagoGomesDesign
Apr 20 2017 16:41
Many thanks @SkyCoder01 for all your inputs
CamperBot
@camperbot
Apr 20 2017 16:41
tiagogomesdesign sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:warning: tiagogomesdesign already gave skycoder01 points
TiagoGomes
@TiagoGomesDesign
Apr 20 2017 16:41
it works
now the next thing is trying chained that inside a loop
Gulsvi
@gulsvi
Apr 20 2017 16:41
@TiagoGomesDesign Good news! happy to help. Did you get it working with xmlhttp? I'm curious what the code looks like
I learned fetch() but I know that doesn't work in older browsers like xmlhttp... trying to get better at vanilla js
h1tag
@h1tag
Apr 20 2017 16:43
@SkyCoder01 I hate that the on hover picture gets stuck on gitter :/
Gulsvi
@gulsvi
Apr 20 2017 16:44
@fortMaximus Oh yeah, weird. It may take a couple of days to sort itself out
h1tag
@h1tag
Apr 20 2017 16:44
it's annoying, especially for us web devs
everything has to be and look consistent
Gulsvi
@gulsvi
Apr 20 2017 16:45
Very true :)
I want to make a chrome plugin for my own use, maybe I can make that one that always updates the hover image to the latest one lol
h1tag
@h1tag
Apr 20 2017 16:46

Oh yeah, weird. It may take a couple of days to sort itself out

the previous one stayed the same for weeks :/ ... so, no hope

Gulsvi
@gulsvi
Apr 20 2017 16:46
at least then you'll know I see the updated one on hover
h1tag
@h1tag
Apr 20 2017 16:46
that's good :+1:
Gulsvi
@gulsvi
Apr 20 2017 16:47
Or a plugin that hides comments from people on gitter, since we can't block the trolls
h1tag
@h1tag
Apr 20 2017 16:47
haha
Gulsvi
@gulsvi
Apr 20 2017 16:48
They can troll all they want, I don't see it. Right-click, ignore
CamperBot
@camperbot
Apr 20 2017 16:48
:trollface: troll problems? notify admins here
h1tag
@h1tag
Apr 20 2017 16:48
yea, like twitch
TiagoGomes
@TiagoGomesDesign
Apr 20 2017 16:51
@SkyCoder01 I use it your solution with fetch(), but I will try with axios beacuse it works in a way very similar
Keon Samuel
@keonsam
Apr 20 2017 16:51
html5 changed the game.
Gulsvi
@gulsvi
Apr 20 2017 16:51
okay, good to know! I've heard about axios, will have to check it out.
Hi Keon
what game did it change? :p
h1tag
@h1tag
Apr 20 2017 16:53
@SkyCoder01 what was the song name that shows when you type rollem?
Gulsvi
@gulsvi
Apr 20 2017 16:53
I think it's "Never gonna give you up"
h1tag
@h1tag
Apr 20 2017 16:53
yes
Sorin Ruse
@sorinr
Apr 20 2017 16:53
html5 just made it more semantically not too much change
Gulsvi
@gulsvi
Apr 20 2017 16:53
Rick Astley (spelling?)
Keon Samuel
@keonsam
Apr 20 2017 16:53
get rid of a lot of the div .
Gulsvi
@gulsvi
Apr 20 2017 16:53
Yeah, I thought it was more about helping search engines understand the content better
Keon Samuel
@keonsam
Apr 20 2017 16:54
well that too.
Gulsvi
@gulsvi
Apr 20 2017 16:54
semantic markup, <main>, <article>, <section>
Sorin Ruse
@sorinr
Apr 20 2017 16:54
yep. @SkyCoder01 that is i'm thinking too
h1tag
@h1tag
Apr 20 2017 16:54
@SkyCoder01 the "running for president" joke was a good one
@sorinr Hey!
Gulsvi
@gulsvi
Apr 20 2017 16:55
haha, never gonna let me down or desert me
Sorin Ruse
@sorinr
Apr 20 2017 16:55
@fortMaximus hi there
Gulsvi
@gulsvi
Apr 20 2017 16:56
The calculator project is a real pain. I enjoy working with APIs a lot more...
h1tag
@h1tag
Apr 20 2017 16:56
@SkyCoder01 although the lyrics and the video is a joke, but the song is a good one to listen to
yea, especially the design for the calculator
Sorin Ruse
@sorinr
Apr 20 2017 16:57
the calculator its more on logic and js functions
Gulsvi
@gulsvi
Apr 20 2017 16:57
I liked the design! don't like the JS though...
Gulsvi
@gulsvi
Apr 20 2017 16:58
Spent a couple days making it look pretty and now just head deep in regexes validating input and keeping multiple decimals out lol
Thanks @alpox I haven't even looked at the floating point stuff yet :)
CamperBot
@camperbot
Apr 20 2017 16:58
skycoder01 sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 955 | @alpox |http://www.freecodecamp.com/alpox
h1tag
@h1tag
Apr 20 2017 16:59
I used eval as a way to procrastinate working on it using regex :trollface:
alpox
@alpox
Apr 20 2017 16:59
@SkyCoder01 look closer. Its not just about them xD
Keon Samuel
@keonsam
Apr 20 2017 16:59
you could go the lazy way and get it done in the next couple hours.
Sorin Ruse
@sorinr
Apr 20 2017 16:59
first a calculator musst be functional. i would not care much about how it looks. i'm in the accountancy :)
Gulsvi
@gulsvi
Apr 20 2017 16:59
Oh cool! math.add() :)
alpox
@alpox
Apr 20 2017 17:00
@SkyCoder01 and more closer. Look at their eval
Keon Samuel
@keonsam
Apr 20 2017 17:00
@sorinr welcome to the party,
Gulsvi
@gulsvi
Apr 20 2017 17:02
@alpox I think it's a bit over my head, tbh :) It does look very helpful though
Sorin Ruse
@sorinr
Apr 20 2017 17:02
@keonsam i was in tthe party most of the time :)
h1tag
@h1tag
Apr 20 2017 17:03
@alpox so this one is not evil?
Gulsvi
@gulsvi
Apr 20 2017 17:03
so, math.eval() is a safer form of eval()? with the added benefit of handling really big numbers without round-off errrors?
alpox
@alpox
Apr 20 2017 17:03
@fortMaximus yes because it does not evaluate plain javascript and executes it. It parses special mathematical expressions instead
Gulsvi
@gulsvi
Apr 20 2017 17:04
I was going to limit input from the user to numbers and +*/-. to help make eval() safer, not sure if that's being ignorant though
alpox
@alpox
Apr 20 2017 17:04
Normal eval evaluates just plain javascript which is a major security risk
Also math.eval has a slightly different syntax
Sorin Ruse
@sorinr
Apr 20 2017 17:05
@SkyCoder01 math.eval() has its own limitations. like working with negative numbers
h1tag
@h1tag
Apr 20 2017 17:06
so it doesn't work with negative numbers?
there's this example from the doc: math.eval('sqrt(-4)');
Sorin Ruse
@sorinr
Apr 20 2017 17:07
@fortMaximus try to eval 5*-5
@fortMaximus and alsso try to eval -5*5
h1tag
@h1tag
Apr 20 2017 17:08
you mean math.eval?
Sorin Ruse
@sorinr
Apr 20 2017 17:08
yep
Gulsvi
@gulsvi
Apr 20 2017 17:08
I'm being really lazy with the +- button, just taking the equation and multiplying it by -1
5*-1*5 instead of 5*-5
Sorin Ruse
@sorinr
Apr 20 2017 17:09
@SkyCoder01 tthats a good choise
Gulsvi
@gulsvi
Apr 20 2017 17:09
$('#plusminus').on('click', () => updateEquationText('*-1'));
I'd like to make the equation on the screen show -5 but the internal equation have the *-1, that's the next challenge...
Sorin Ruse
@sorinr
Apr 20 2017 17:10
thats why i said eval has its own limitations. u have to improvise :)
h1tag
@h1tag
Apr 20 2017 17:10
@sorinr it's the same -25 in both
Chris
@bestintown23
Apr 20 2017 17:16
how to upload video to page, i prefer not to use youtube. https://codepen.io/bestintown23/pen/ZKWBVE
Sorin Ruse
@sorinr
Apr 20 2017 17:27
@fortMaximus sorry i was meaning that an expression like -5--5 will not be evaluated
h1tag
@h1tag
Apr 20 2017 17:29
@sorinr even the JS editor on codepen shows this error Invalid left-hand side in assignment when u type -5--5
so, i guess it has something to do with js in general
Csaba Balogh
@JasonCorp84
Apr 20 2017 17:30
Hello everyone
this is my first challenge: http://codepen.io/JasonCorp/full/wdMPYK/
I miss couple of things....
how do you resize pictures from a link ? Plus how can I use local pictures at codepen.io ?
How do you center the ul points ? The text is centered, but.. the bullet points aligned on the left
h1tag
@h1tag
Apr 20 2017 17:34
@JasonCorp84 the same u resize any other image in CSS
you have to host the images on some website first
Csaba Balogh
@JasonCorp84
Apr 20 2017 17:35
and how do you keep the ratio of the pic ?
The picture is deformed after I touch it
h1tag
@h1tag
Apr 20 2017 17:37
try to keep the original ratio when resizing it
Csaba Balogh
@JasonCorp84
Apr 20 2017 17:38
@fortMaximus thank you
CamperBot
@camperbot
Apr 20 2017 17:38
jasoncorp84 sends brownie points to @fortmaximus :sparkles: :thumbsup: :sparkles:
:cookie: 734 | @fortmaximus |http://www.freecodecamp.com/fortmaximus
Csaba Balogh
@JasonCorp84
Apr 20 2017 17:39
On the other hand I wanted to use bootstrap only. These guys are using css
Gulsvi
@gulsvi
Apr 20 2017 17:40

@JasonCorp84 Use column offsets to center your list, for example:

        <div class="col col-sm-10 offset-sm-1 col-md-6 offset-md-3 text-left">
          <ul>
            <li>Szoveg  </li>
            <li>Szoveg Szoveg  </li>
            <li>Szoveg Szoveg Szoveg  </li>
            <li>Szoveg Szoveg Szoveg Szoveg  </li>
            <li>Szoveg Szoveg Szoveg Szoveg Szoveg  </li>
          </ul> 
        </div>

Adjust the numbers as desired. https://v4-alpha.getbootstrap.com/layout/grid/#offsetting-columns

Also, be sure you're using the right documentation for the version of bootstrap you have. The quick-add menu in your codepen settings is Bootstrap 4.
Csaba Balogh
@JasonCorp84
Apr 20 2017 17:43
@SkyCoder01 lolol nice thnak you !!!!
@SkyCoder01 thanks
CamperBot
@camperbot
Apr 20 2017 17:43
jasoncorp84 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1110 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Gulsvi
@gulsvi
Apr 20 2017 17:44
Szívesen :)
Csaba Balogh
@JasonCorp84
Apr 20 2017 17:45
magyar vagy ? :P or you find out that I am hungarian via google translate ? :D
Gulsvi
@gulsvi
Apr 20 2017 17:46
Google translate :p
Keon Samuel
@keonsam
Apr 20 2017 17:46
@JasonCorp84 add some applied accessibility to that.
Gulsvi
@gulsvi
Apr 20 2017 17:46
I studied hungarian language history the other day in school though :)
Anthony Contreras
@AmazeCPK
Apr 20 2017 17:58
I am trying to create a window pop up when a user clicks a buttton. This window should have a form. is this typically done through a modal?
Keon Samuel
@keonsam
Apr 20 2017 17:59
is it a date form?
date input?
Paradox5
@Paradox5
Apr 20 2017 18:04
Heyllo
Heyllo
I like that
Im gonna use that
Keon Samuel
@keonsam
Apr 20 2017 18:05
use what? <input type="date">?
Paradox5
@Paradox5
Apr 20 2017 18:06
No heyllo
As my new greeting
Keon Samuel
@keonsam
Apr 20 2017 18:06
it is hello
lol
Paradox5
@Paradox5
Apr 20 2017 18:07
I know what its supposed to be lol
Hey and helll
Hello
Heyllo
You pronounce it like halo
Keon Samuel
@keonsam
Apr 20 2017 18:07
well I am going to use heyllo for my new greeting.
Paradox5
@Paradox5
Apr 20 2017 18:08
whispers to myself ive started something
Keon Samuel
@keonsam
Apr 20 2017 18:08
:+1:
Paradox5
@Paradox5
Apr 20 2017 18:08
:+1:
Sorin Ruse
@sorinr
Apr 20 2017 18:10
@fortMaximus yes i think so too. thats why i said eval has its own limits.
Pagnito
@Pagnito
Apr 20 2017 18:11
@SkyCoder01 just redone all my api calls, mannn, for real the way jd showed me to do it so much simpler, and now i fully understand what u were teaching about handling events, puts me at such ease right now
Sorin Ruse
@sorinr
Apr 20 2017 18:11
@fortMaximus dont remember right now but there are also other situations i've encountered where eval is failing
Ramesh
@rnallu
Apr 20 2017 18:12
Can anyone explain me about the pig Latin challenge especially for the test case of Glove
Gulsvi
@gulsvi
Apr 20 2017 18:12
@Pagnito Glad you got it figured out :)
I think it just takes time, practice, looking at it from different angles, etc...
Pagnito
@Pagnito
Apr 20 2017 18:12
@SkyCoder01 thanks hehe
CamperBot
@camperbot
Apr 20 2017 18:12
pagnito sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1111 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Gulsvi
@gulsvi
Apr 20 2017 18:12
Gave me an a-ha moment too when I hit it for the first time
Pagnito
@Pagnito
Apr 20 2017 18:13
@SkyCoder01 absolutely, when i first had to look at what he showed me, i was like ffffffck, i have to do all this code, but after doing a seperate copy then applyin it to the original code it made sense
Icah Banton
@remdata
Apr 20 2017 18:13
Hello All. I am working on the tic-tac-toe game and have a few questions. How do you handle the game flow? I don't know how to make the script wait for the player to make his move before proceeding to the AI making its move. I may be way in over my head here. Any help, comments or advice is greatly appreciated. https://codepen.io/ibanton/pen/RpGore
Gulsvi
@gulsvi
Apr 20 2017 18:15
@Pagnito is your twitch app finished now?
Pagnito
@Pagnito
Apr 20 2017 18:16
@SkyCoder01 nah, not yet, i think ill finish it today tho
Gulsvi
@gulsvi
Apr 20 2017 18:16
@remdata Isn't it all based on click functions? The user clicks, marks a square, the computer goes. Repeat.
No need to wait, I would think, but I haven't built that app yet. Just thought a lot about it as I hang out here.
Pagnito
@Pagnito
Apr 20 2017 18:16
is tic tac toe kind of like a AI?
Gulsvi
@gulsvi
Apr 20 2017 18:17
"AI" seems a bit strong for it, but yeah I guess so.
I mean, you would click to mark a square, then the computer has too look at what squares are open and choose either a win, a block, a corner, or the center square I'm guessing.
Pagnito
@Pagnito
Apr 20 2017 18:18
true true, tho there is gotta be a way to make the computer more than just a player, but a good player
Gulsvi
@gulsvi
Apr 20 2017 18:18
4 or 5 choices to make every time you click
Pagnito
@Pagnito
Apr 20 2017 18:18
tho tic tac toe is a pretty limited game, still i think u can b good at it
Gulsvi
@gulsvi
Apr 20 2017 18:19
Yeah, if you play perfectly, you'll get a draw every time
Pagnito
@Pagnito
Apr 20 2017 18:19
ah
h1tag
@h1tag
Apr 20 2017 18:19
there will be a lot of if's in the code
Sorin Ruse
@sorinr
Apr 20 2017 18:20
@Pagnito if you wanna develop an advanced AI for tic tac toe read this http://neverstopbuilding.com/minimax
Pagnito
@Pagnito
Apr 20 2017 18:21
@sorinr sweet thanks, ill bookmark it, im still 100 hours away from it hehe
CamperBot
@camperbot
Apr 20 2017 18:21
pagnito sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1266 | @sorinr |http://www.freecodecamp.com/sorinr
Gulsvi
@gulsvi
Apr 20 2017 18:21
Classic tic tac toe computer program :p
Icah Banton
@remdata
Apr 20 2017 18:23
@Pagnito . thanks I looked at the minmax approach and decided against it for now. @SkyCoder01 . I am trying to do what you stated but I am not sure to do that.
CamperBot
@camperbot
Apr 20 2017 18:23
remdata sends brownie points to @pagnito and @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1112 | @skycoder01 |http://www.freecodecamp.com/skycoder01
:cookie: 215 | @pagnito |http://www.freecodecamp.com/pagnito
Icah Banton
@remdata
Apr 20 2017 18:25
@SkyCoder01 . How do I make the script wait for the user to click on a square?
Gulsvi
@gulsvi
Apr 20 2017 18:26
@remdata I don't think there's any waiting. The computer just acts when the user clicks, that is, you run a function when the user clicks.
  1. User clicks to mark a square
  2. Function runs telling the computer to choose a square.
The user can then go again after that, repeating the sequence. It's like the c/f convert button in the weather app. You click to get a new temp. A function runs, converts the temp, and displays it on the page.
Icah Banton
@remdata
Apr 20 2017 18:32
@SkyCoder01 . Thanks, maybe I am making this more complex than it should be. I am basically used to programming sequentially, Not event driven.
CamperBot
@camperbot
Apr 20 2017 18:32
remdata sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:warning: remdata already gave skycoder01 points
max#237
@maximilientoumi
Apr 20 2017 18:38
hello guys this is my first chal
rank my work :)
Dalton Escoe
@Alenero129
Apr 20 2017 18:41
@maximilientoumi Really simple, clean and nice. A+.
Sorin Ruse
@sorinr
Apr 20 2017 18:51

@maximilientoumi why do you close ur ul tag like

</li>
      <div>
        <p class="text-center " style="padding-top: 70px;"><strong>Get more about Jack Ma</strong> <a href="https://en.wikipedia.org/wiki/Jack_Ma">here</a>
      </div>    
     </ul>

?

@maximilientoumi what has to do the div with the ul structure?
Mike S
@TheMicsmith
Apr 20 2017 19:07
Hi, would anyone be so kind as to please take a minute or two to look over my 'tribute page' challenge?
thanks :)
I achieved close to what I wanted, but I have no idea how well it's actually written
Not sure what constitutes bad practice with html
mystique-coder
@mystique-coder
Apr 20 2017 19:35
$('a').click(function(){
$('html, body').animate({
scrollTop: $( $(this).attr('href') ).offset().top
}, 500);
var a_href=$(this).attr('href');
alert ("Href is: "+a_href);
return false;
});
Paradox5
@Paradox5
Apr 20 2017 19:35
Hey
mystique-coder
@mystique-coder
Apr 20 2017 19:35
can anyone make me understand this code ??
Paul Borawski
@iAmNawa
Apr 20 2017 19:35
@TheMicsmith It looks good but the div with text under the photo isn’t the same widt
@mystique-coder When someone clicks on an <a> tag the page should scroll 500 pixels
mystique-coder
@mystique-coder
Apr 20 2017 19:37
@Paradox5 i was seeing your personal portfolio page.. but i was not able to understand the js code..
@iAmNawa i understood that much, but what is the use of attr('href') here??
Paul Borawski
@iAmNawa
Apr 20 2017 19:39
It’s telling you the base url for the page in an alert
It looks like the person was trying to figure out the href of the <a> tag so they were alerting the url to themself so they could figure out what they were clicking on @mystique-coder
WHat’s the context on the code?
mystique-coder
@mystique-coder
Apr 20 2017 19:44
@iAmNawa i tried finding the value of attr('href'). In this case , it returns the href value , which is #linkName. I am confused , because , scrollTop , shows the vertical position of scrollbar..If the attr('href') returns #linkName, then the value of attr('href') should be 0, but it is not the case..
here is the link
Paul Borawski
@iAmNawa
Apr 20 2017 19:49
Why should the value be zero? @mystique-coder
Gulsvi
@gulsvi
Apr 20 2017 19:51
nvm, this is what I get for not reading all the way up lol
Paul Borawski
@iAmNawa
Apr 20 2017 19:52
@SkyCoder01 huh?
Gulsvi
@gulsvi
Apr 20 2017 19:53
@iAmNawa I gave the fix to make the scroll animation work in that pen that @mystique-coder sent above. They just wanted the code explained not fixed :laughing:
mystique-coder
@mystique-coder
Apr 20 2017 19:54
@iAmNawa the attr('href') returns #linkName.. the linkName is on the top of page and therefore , the scrollbar is on the top of page making the value 0
@SkyCoder01 i tried that before .. and code is working fine..I just want an explanation..
caseym94
@caseym94
Apr 20 2017 19:55
yo does someone mind explaining this error in the console when you hit on the options menu? you'll have to go to the link and open console to view the error "Uncaught TypeError: Cannot read property 'state' of undefined"
https://codepen.io/caseym/pen/MmymRg
Charlie Zhu 木匠
@goodgoodwish
Apr 20 2017 19:56
Howdy, how to put photo in center ?
Gulsvi
@gulsvi
Apr 20 2017 19:57
@mystique-coder maybe this helps?
// when an <a> tag is clicked
$('a').click(function() {

  // select <html> and <body> elements and animate them
  $('html, body').animate({
    // scrollTop sets the position on the page to scroll to
    // $(this).attr('href') refers to the specific <a href> that was clicked
    // offset().top is the coordinates of the top of the link that was clicked
    scrollTop: $($(this).attr('href')).offset().top

    // animate the scroll effect over 500 ms
  }, 500);

  // don't do anything else after clicking on the link
  return false;
});
So, basically, find where that href links to in the page. Calculate the number of pixels the target is down the page, scroll to that position over 500ms
Vincent Del Vecchio
@DVecc
Apr 20 2017 19:58
I'm having an issue with my page where two columns overlap when the page is resized smally
In the about section
Gulsvi
@gulsvi
Apr 20 2017 19:59
@goodgoodwish This might help: http://codepen.io/skycoder/pen/xqbGor
Paul Borawski
@iAmNawa
Apr 20 2017 20:02
@mystique-coder I don’t use codepen but the console keeps throwing out that $ is not defined
Gulsvi
@gulsvi
Apr 20 2017 20:02
@DVecc I think it's because your font size is to large and overflows the column. You could use a media query to make the font size smaller on smaller screens.
Mike S
@TheMicsmith
Apr 20 2017 20:05
@iAmNawa Thanks, I think I need to set it so it automatically sizes somehow, I'll try to change it I think
CamperBot
@camperbot
Apr 20 2017 20:05
themicsmith sends brownie points to @iamnawa :sparkles: :thumbsup: :sparkles:
:cookie: 589 | @iamnawa |http://www.freecodecamp.com/iamnawa
mystique-coder
@mystique-coder
Apr 20 2017 20:08
@SkyCoder01 i have the problem , in the $(this).attr('href'). you said that $(this).attr('href') refers to the specific <a href> that was clicked.. in this case, the <a> tag.. The attr('href') returns the value of href , which is , in this case the value we put in the href tag in html.. and it's position is top of the page.
@SkyCoder01 try logging the value of attr('href').. i used this.. var a_href=$(this).attr('href');
alert ("Href is: "+a_href);
@iAmNawa
Gulsvi
@gulsvi
Apr 20 2017 20:12
@mystique-coder Yes, it logs #working, for example. When wrapped like $('#working') it finds the element with the ID of "working"
$( $(this).attr('href') ) === $('#working') === <div class= "top text-center " id="working">
mystique-coder
@mystique-coder
Apr 20 2017 20:15
@SkyCoder01 ok.. what you mean to say that, #working === id="working"...
Gulsvi
@gulsvi
Apr 20 2017 20:15
@mystique-coder Yes, that's how to select an element by ID in jQuery - a # in front of the ID name.
by ID: $('#idName')
by Class: $('.className')
by Element $('elementName')
There is a small amount of "magic" that goes into calculating the distances with that scrollTop: that I can't really explain :p but hopefully that helps show what jQuery is using to figure it all out
mystique-coder
@mystique-coder
Apr 20 2017 20:18
@SkyCoder01 wow.. thanks buddy.... i was taking it literally as the value of attr('href')..
CamperBot
@camperbot
Apr 20 2017 20:18
mystique-coder sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1114 | @skycoder01 |http://www.freecodecamp.com/skycoder01
mystique-coder
@mystique-coder
Apr 20 2017 20:19
@iAmNawa thank you too for the help..
CamperBot
@camperbot
Apr 20 2017 20:19
mystique-coder sends brownie points to @iamnawa :sparkles: :thumbsup: :sparkles:
:cookie: 590 | @iamnawa |http://www.freecodecamp.com/iamnawa
Sorin Ruse
@sorinr
Apr 20 2017 20:22
@DVecc i do not recommend using inline styling. i would move all inline existing styling to css part of the codepen
Keon Samuel
@keonsam
Apr 20 2017 20:30
how to do guys determine what pixel to put?
Pagnito
@Pagnito
Apr 20 2017 20:47
@SkyCoder01 hey r u online?
Sorin Ruse
@sorinr
Apr 20 2017 20:47
@keonsam what do u mean by "pixel"?
Dalton Escoe
@Alenero129
Apr 20 2017 20:51
Anyone know a easy way to center a div vertically?
Gulsvi
@gulsvi
Apr 20 2017 21:00
@Pagnito Back now
Ramesh
@rnallu
Apr 20 2017 21:04
whats wrong in this DNA pairing challenge? TypeError: cannot read property '0' of undefined
function pairElement(str) {

var objDna = {A:["A","T"], T:["T","A"], C:["C","G"], G:["G","C"]};
  str = str.replace(/['"]+/g,'');
  str = str.split("");
  var newArr = [];

  for (var i=0; i<str.length;i++){
    newArr.push(objDna.str[i]);  
  }

  return newArr;
}
Gulsvi
@gulsvi
Apr 20 2017 21:08
@Alenero129 Unfortunately, no easy way to center items vertically without seeing how to it fits into the rest of your HTML. Here are a few techniques: http://stackoverflow.com/questions/59309/how-to-vertically-center-content-with-variable-height-within-a-div
Dalton Escoe
@Alenero129
Apr 20 2017 21:12
@SkyCoder01 Thanks, Sky.
CamperBot
@camperbot
Apr 20 2017 21:12
alenero129 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1115 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Amit Patel
@AmitP88
Apr 20 2017 21:15
hey guys, I'm finalizing my client's website and I need a little help with the design. Is anyone here good with colors? https://amitp88.github.io/Khmer-Family-Cafe/
Sorin Ruse
@sorinr
Apr 20 2017 21:25
@Alenero129 @SkyCoder01 it all depends on the type of html elements (if they are block or inline) and ofc of the parent container :)
vertical alignment will always be an issue :)
Rimi.
@Codevotee
Apr 20 2017 21:27
@AmitP88 here are two issues that I would suggest may require improvements:
  • title "daily specials" is too close to image, similarly the contact us title with the map
  • the gaps between the different sections are too big
Pagnito
@Pagnito
Apr 20 2017 21:28
@SkyCoder01 hey r u still online, had to step away
Amit Patel
@AmitP88
Apr 20 2017 21:29
@APRim05 I see. Yeah, I did that so that when the user clicks on the nav , there would be enough space between sections
Gulsvi
@gulsvi
Apr 20 2017 21:31
@Pagnito Yep, back again :)
Pagnito
@Pagnito
Apr 20 2017 21:34
@SkyCoder01 i redone my calls and made sure my minu function get binded after the call. Tho my minus function still has that flaw, and it makes NO SENSE to me lol, cuz it works perfect if i check the streams going from bottom up, so if i select the second streamer THEN the 1st on the list, the loop will go thru perfect and remove al the copies , but if i select 1st then 2nd, the loop never goes past the first element in the array. array being the streamers that get pushed when u press checkbox
and the crazy thing is, when i console.log the array, it CLEARLY shows the streamers that got pushed into it, but it doesnt loop thru them, unless i do the checking form bottom up
form*
Gulsvi
@gulsvi
Apr 20 2017 21:36
@Pagnito I haven't studied your app functionality enough to know what's going on - can you tell me the steps, like in 1,2,3
ELI5 :)
Pagnito
@Pagnito
Apr 20 2017 21:37
ok
so, i press trash can and it toggles the checkboxes
or are u talking about code?
Gulsvi
@gulsvi
Apr 20 2017 21:38
I'm talking about the UI
Pagnito
@Pagnito
Apr 20 2017 21:38
ok cool
so i press the trashcan, it toggles checkboxes
i check the first streamer, and the second streamer. i click minus
oh wait no, forget that ill start over
so the checkboxes got toggled
now i press the checkbox on the first streamer on the list then second
each chkbox click
pushes that streamer into an array
when i click minus
it starts to loop thru that array
on each index
it starts another loop
thru the hidden copies of all the streamers
when match is found, remove that streamer
thats the way it should work
but
what happens is
when i click minus it only loops thru the index 0 of the array
but it loops thru index 0, 2 times
as if both elements are the same
but they arent
Gulsvi
@gulsvi
Apr 20 2017 21:43
Okay, but if I mark the checkbox next to two streamers they get removed. What's the end problem in the UI?
Pagnito
@Pagnito
Apr 20 2017 21:43
yea but if u click offline they show up again
because the offline copies are stil in the dom
try removing all of them then clicking offline
to see what i mean
Gulsvi
@gulsvi
Apr 20 2017 21:44
ahh, okay. I'll take a look.
  1. Click the trash can icon
  2. Mark the checkbox next to all the streamers listed
  3. Click minus (This pushes them into an array and removes them)
  4. Click "Offline" and they appear again
Pagnito
@Pagnito
Apr 20 2017 21:44
yea
because those are copies, for offline display
thats why i make the loop to make sure it removes them
and it works
but
TomClarke93
@TomClarke93
Apr 20 2017 21:45
Good Evening all. I am new to FCC and have been working on the tribute page project (https://codepen.io/TomClarke93/full/PmZBKv/). I have used Bootstrap 4 instead of 3 as used in the example so my image is in a card rather than a thumbnail. I am not sure if this is causing it to be stretched disproportionately. Also I am having figuring out the best way to increase the gap between the card and the row under it. Can anybody help?
Pagnito
@Pagnito
Apr 20 2017 21:45
ther is a problem looping thru the first loop
aftere u try that
try this
1)press trash
2)check all boxes startin from the bottom of the list
3
3)click minus
4) click offline
and ull see that everything worked
its a mindfck
and u can see in the console what i mean
Gulsvi
@gulsvi
Apr 20 2017 21:47
Yeah, it's hard to get started because it's 640 lines of code. I don't know what array to look at or what loop.
Pagnito
@Pagnito
Apr 20 2017 21:48
u only need to look at code startin at 476
ending at 522
466 my bad
everything else is irrelevant besides minus() being called at the end of getStreamApi()
Gulsvi
@gulsvi
Apr 20 2017 21:51
Okay, will see if I can help with this. IN general, from what you're telling me, it sounds like there should be a simpler approach. Just hide the user with .hide() when you remove them. Clicking on 'online', 'offline', 'all' would just toggle the elements that aren't hidden with the class name of 'online' and 'offline'
Pagnito
@Pagnito
Apr 20 2017 21:52
yea but the point of minus function is to remove the users from the DOM completely
Gulsvi
@gulsvi
Apr 20 2017 21:52