These are chat archives for FreeCodeCamp/HelpFrontEnd

10th
Feb 2017
Jean Marco Romero
@volkranium
Feb 10 2017 00:02
Hey guys how can i reduce the width fo each column and keep em centered? http://codepen.io/anon/pen/WRaKaj
Drbathound
@Drbathound
Feb 10 2017 00:03
@eswhy try giving the button the class "blank"
Drbathound
@Drbathound
Feb 10 2017 00:09
@eswhy you might have to give the button a type: the type for submit buttons is
<button type="submit">
jamesjd54
@jamesjd54
Feb 10 2017 00:18
is it normal to feel like you forgot everything about html when starting the intermediate front end projects?
Johnny
@jtan3
Feb 10 2017 00:19
once i started to do the projects it started to stick more
NathanMcSparran
@NathanMcSparran
Feb 10 2017 00:20
@jamesjd54 I pretty much forgot about a lot of the bootstrap information
jamesjd54
@jamesjd54
Feb 10 2017 00:20
im honestly lost right now. im trying to do the quote machine and i cant even get a well to look the way i want it to
Cristopher Encarnacion
@chris0715
Feb 10 2017 01:17
@jamesjd54 Lol that normally happens whenenver you are stududying a different topic or technology. the good thing is that the learning curve is fast because you only need to review the previous topics.
Mrs. Ballard
@mrsballard
Feb 10 2017 01:27
hello world
Mrs. Ballard
@mrsballard
Feb 10 2017 01:35
been browsing looking for non-camp demo projects to get feet wet for the challenges, need a little more experience trying to put things together...thoughts?
Adam Jacks
@AdamHJ123
Feb 10 2017 01:36
Hey guys, can I get some opinions on my Simon game? It's not done yet but I'm feeling proud
Mrs. Ballard
@mrsballard
Feb 10 2017 01:42
love it! I looked for it to give more of a negative tone when I messed up in regular play but it's great! first time on board, need more chat room time to know if that's helpful
Tom
@moT01
Feb 10 2017 01:46
@AdamHJ123 looks pretty good
the reset and strict buttons werent working for me
Adam Jacks
@AdamHJ123
Feb 10 2017 01:46
Haven't implemneted them yet
Tom
@moT01
Feb 10 2017 01:47
it got a little goofy with a real short window
but yea its good
strict button overlaps the other area a bit
Adam Jacks
@AdamHJ123
Feb 10 2017 01:51
Easy enouugh to fix
@mrsballard Only just saw your reply :D
Philip
@Balance17
Feb 10 2017 02:33
Feedback Please? Thank you!
http://codepen.io/Balance17/full/oBQvNB/
Alex
@Sevohan
Feb 10 2017 02:33
Hey guys not a big problem now but I'm wondering my js isn't appending my results to my display area. It works if I put the for loop inside the getJSON but not just before it. I am assuming it doesn't have a reference for i but I don't know why if that is the case.
Adam Jacks
@AdamHJ123
Feb 10 2017 02:37
@Balance17 @Sevohan I actually completed both of those challenges today haha
http://codepen.io/AdamHJacks/pen/YNJeKr
http://codepen.io/AdamHJacks/pen/ygRwpo
Philip
@Balance17
Feb 10 2017 02:38
@AdamHJ123 Nice! I finally made myself finish it..

@Sevohan it is still a Javascript value, hence it isnt showing on your html page. If you console.log or alert it, it will show OBject Object.

if you JSON.stringify(results), you will see the values on your page

You still have to append the value you need from that list.

Quick tip, I love to console.log or alert testing in these situation.

Johnny
@jtan3
Feb 10 2017 02:42
@Sevohan also try adding ?callback=? to the twitch url
Alex
@Sevohan
Feb 10 2017 02:47
@Balance17 Ahh okay that makes more sense. When I was trying to append just the names of streamers eg '''$(".display").append(streamers[i]);''' it didn't work either which is why I thought it couldn't find i. I keep forgetting that I know how to see my console now lol.
CamperBot
@camperbot
Feb 10 2017 02:47
:bulb: to format code use backticks! ``` more info
Alex
@Sevohan
Feb 10 2017 02:47
$(".display").append(streamers[i]);
@jtan3 I forgot about callback but I'm just jumping back in after a long break. I remember I needed it on the last project but not why it's needed really
Johnny
@jtan3
Feb 10 2017 02:50
@Sevohan i'm working on the twitch too.
Philip
@Balance17
Feb 10 2017 02:55
@Sevohan glad to help.
Alex
@Sevohan
Feb 10 2017 02:55
Thanks @Balance17
CamperBot
@camperbot
Feb 10 2017 02:55
sevohan sends brownie points to @balance17 :sparkles: :thumbsup: :sparkles:
:cookie: 333 | @balance17 |http://www.freecodecamp.com/balance17
Alex
@Sevohan
Feb 10 2017 02:55
Thanks @jtan3
CamperBot
@camperbot
Feb 10 2017 02:55
sevohan sends brownie points to @jtan3 :sparkles: :thumbsup: :sparkles:
:cookie: 299 | @jtan3 |http://www.freecodecamp.com/jtan3
not sure why everyone is offline
Karan Nandha
@karann7
Feb 10 2017 02:56
I am building a Todo list in Jquery anyone down to pair program on google hangout
Alex
@Sevohan
Feb 10 2017 03:00
@karannandha I wish I could but I'm currently coding at my night job during breaks from customers.
kanchanachalla
@kanchana9
Feb 10 2017 03:05
any suggestions how to start coding for tribute page?
Drbathound
@Drbathound
Feb 10 2017 03:06
@kanchana9 start with a name in the h1
@kanchana9 now, im going
Johnny
@jtan3
Feb 10 2017 03:08
@kanchana9 if you need more review with html/css i think codecademy does a good job
Alex
@Sevohan
Feb 10 2017 03:10
@kanchana9 I've always found starting to be the hardest part. For my tribute page I outlined what I wanted to do on the page and even drew out a mock-up of what I wanted it to look like. Once that is done you can just make your way through it from the biggest pieces down to the smallest and just solve the challenges on the way.
@kanchana9 I used the codecademy html/css class to fill in the gaps in my knowledge like @jtan3 suggested.
kanchanachalla
@kanchana9
Feb 10 2017 03:12
thanks @Sevohan , @jtan3
CamperBot
@camperbot
Feb 10 2017 03:12
kanchana9 sends brownie points to @sevohan and @jtan3 :sparkles: :thumbsup: :sparkles:
:cookie: 358 | @sevohan |http://www.freecodecamp.com/sevohan
:cookie: 300 | @jtan3 |http://www.freecodecamp.com/jtan3
Gulsvi
@gulsvi
Feb 10 2017 03:30
@jtan3 I can't explain why this is happening, but if you move your var mode; inside the first getJSON callback, you get people online.
$.getJSON("https://wind-bow.gomix.me/twitch-api/streams/" + channel + "?callback=?", function(data){
  var mode;
  channelName=channel;
You can't have global variables when they get set inside a getJSON callback, but I don't know why that causes them to all be offline instead of undefined
and I don't know if .map() is the right method to use there... .map() returns an array. Maybe you want .forEach()?
Johnny
@jtan3
Feb 10 2017 03:33
okay thanks @SkyCoder01
CamperBot
@camperbot
Feb 10 2017 03:33
jtan3 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 165 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Gulsvi
@gulsvi
Feb 10 2017 03:34
I just started Twitch today and all I have is a bullet list lol
don't know what I want it to look like yet
Johnny
@jtan3
Feb 10 2017 03:34
but you got everything to work?
Gulsvi
@gulsvi
Feb 10 2017 03:36
Yes, but no pictures or descriptions or anything. Just status and the user names
Johnny
@jtan3
Feb 10 2017 03:36
Even the accounts that don't exists?
Gulsvi
@gulsvi
Feb 10 2017 03:36
Yes
It just shows:
Not Found: comster404
Not Found: brunofin
Offline: freecodecamp
Offline: cretetion
Online: ESL_SC2
Online: OgamingSC2
Offline: habathcx
Offline: storbeck
Offline: RobotCaleb
Offline: noobs2ninjas
Johnny
@jtan3
Feb 10 2017 03:37
I'm having trouble pushing those names out
The ones that don't exist
Gulsvi
@gulsvi
Feb 10 2017 03:38
I did it a little different than you. I look at /channels/ first, then if they are status = 404, they don't exist
Then I look at /streams/. If there is no stream, they're offline, otherwise they're online
James Moore
@James-N-M
Feb 10 2017 03:38
Anybody got any good courses for css specifically
i wanna get really good at it, ive seen people make some cool stuff on codepen
Gulsvi
@gulsvi
Feb 10 2017 03:40
Yeah, people make video games all out of CSS. No idea how though, haven't tried to learn it yet
Johnny
@jtan3
Feb 10 2017 03:41
thanks @SkyCoder01 . I should try it your way.
CamperBot
@camperbot
Feb 10 2017 03:41
jtan3 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:warning: jtan3 already gave skycoder01 points
Gulsvi
@gulsvi
Feb 10 2017 03:42
I wish I could get them to come back in the same order every time. That's what I'm working on now. Then I'll add the rest of the info
Philip
@Balance17
Feb 10 2017 03:52

Can anyone tryout my 'simon says' to make sure it satisfy the user story? I purposely set 4 steps to victory to be notified.

http://codepen.io/Balance17/full/YNRKoO/

AND my ' TIC Tac Toe'

http://codepen.io/Balance17/full/xgQxbY/

Thanks!

Alex
@Sevohan
Feb 10 2017 04:02
@Balance17 Everything seems to be working for Simon when I try it but I'm not sure about the sounds since my audio is broken at the moment.
Philip
@Balance17
Feb 10 2017 04:05
@Sevohan awesome! thanks.
CamperBot
@camperbot
Feb 10 2017 04:05
:cookie: 359 | @sevohan |http://www.freecodecamp.com/sevohan
balance17 sends brownie points to @sevohan :sparkles: :thumbsup: :sparkles:
Alex
@Sevohan
Feb 10 2017 04:06
@Balance17 BTW your tic tac toe is crushing me every time
Ctiller93
@Ctiller93
Feb 10 2017 04:07
Most of the tic tac toe games I've played here are insane level difficulty. :P
Ends up with me on the ropes and somehow always pulling out a draw.
Ken Haduch
@khaduch
Feb 10 2017 04:08
@James-N-M - I don't know if you are familiar with sitepoint.com, but they just announced a new CSS animation course - not sure if you have to pay, but you might be able to see if it is what interests you? www.sitepoint.com is where you start.
@James-N-M - it might be a "premium" course, though...
Philip
@Balance17
Feb 10 2017 04:12
@Sevohan Hahaha, it is required by user story to win or draw only.
Janina Pohorecki
@janepohorecka
Feb 10 2017 04:15
Hey guys! I want to install a plugin called Lity to play a youtube video really nicely in my website.. What I don't understand is what code I have to include to make it work. Does anyone mind helping me please? http://sorgalla.com/lity/
Ken Haduch
@khaduch
Feb 10 2017 04:21
@janepohorecka - hello... do you have the ability to download code on your server? It looks like they have a .zip file with everything in it, and instructions about what you want to include in your page to load their lity.css and lity.js? Looks pretty straightforward if you can download files to your server? (Not sure if they have a CDN that you can load from?)
maxcodester
@maxcodester
Feb 10 2017 04:22
hey guys please help me with this
i am having trouble generating quote with api
https://codepen.io/maxcodester/pen/qRJqMx?editors=0001
eswhy
@eswhy
Feb 10 2017 04:31
hello anyone familiar with navbars in bootstrap? mine is acting funny its making my whole page a link and also the li elements are not staying in line. Any help would be much appreciated https://codepen.io/eswhy/pen/mRxPpR
Ken Haduch
@khaduch
Feb 10 2017 04:32
@eswhy - you are not putting closing </a> tags on your <a> anchor tags. That might be the reason?

@eswhy - make them look like this:

      <li class="active"><a href="#About">About</a></li> 
      <li><a href="#Portfolio">Portfolio</a></li> 
      <li><a href="#Contact">Contact</a></li> 
    </ul>

add those </a> tags!

Gulsvi
@gulsvi
Feb 10 2017 04:34
@maxcodester Open your codepen with this link, it works fine: http://codepen.io/maxcodester/pen/qRJqMx?editors=0011
Ctiller93
@Ctiller93
Feb 10 2017 04:35
iirc I had the same problem where forismatic's API doesn't work through https.
That was a fun bit of frustration
Can someone help me figure out why my global variable in my javascript is being a butthead and returning null instead of the value I assigned it in the function?
eswhy
@eswhy
Feb 10 2017 04:40
@khaduch I am so dumb, thank you!
CamperBot
@camperbot
Feb 10 2017 04:40
eswhy sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2452 | @khaduch |http://www.freecodecamp.com/khaduch
Ctiller93
@Ctiller93
Feb 10 2017 04:42
lines 7-10 are where the global is declared, line 91 is where I try to place the variable inside of the global, and line 111 is where I'm getting null. https://codepen.io/Ctiller15/pen/vgrVYv?editors=0012
Janina Pohorecki
@janepohorecka
Feb 10 2017 04:43
@khaduch Hi Ken!! Nice to see you here ;)
maxcodester
@maxcodester
Feb 10 2017 04:44
@SkyCoder01 Yeah it works! Can u please tell me the problem?
Janina Pohorecki
@janepohorecka
Feb 10 2017 04:44
@khaduch Yes, I do understand that.. What idk is why when I load the page the video begins playing and not when I click the play button on the video?
Ctiller93
@Ctiller93
Feb 10 2017 04:45
@maxcodester probably http vs https. Forismatic's API doesn't work over https.
maxcodester
@maxcodester
Feb 10 2017 04:47
oh !@Ctiller93 @SkyCoder01 thanks
CamperBot
@camperbot
Feb 10 2017 04:47
maxcodester sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 166 | @skycoder01 |http://www.freecodecamp.com/skycoder01
maxcodester
@maxcodester
Feb 10 2017 04:48
@Ctiller93 thanks
CamperBot
@camperbot
Feb 10 2017 04:48
maxcodester sends brownie points to @ctiller93 :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for ctiller93
Ctiller93
@Ctiller93
Feb 10 2017 04:48
anytime yo.
Ken Haduch
@khaduch
Feb 10 2017 04:51
@eswhy - not a problem. It seems that they have eliminated a lot of the closing tags in HTML5 - but there are still some important ones!
Janina Pohorecki
@janepohorecka
Feb 10 2017 04:56
@khaduch sorry, I forgot to link to the page I applied it to: https://janepohorecka.github.io/Skyline/
Sebastian Flores
@Link5802
Feb 10 2017 05:01
Hello, everybody. i just started the build a personal portfolio webpage and I am completely stocked. Where do you suggest I begin? With images? i am so confused
Ctiller93
@Ctiller93
Feb 10 2017 05:06
Start with your html I'd say. :P
Plan out the structture of your page. Figure out what you want to go where.
Ken Haduch
@khaduch
Feb 10 2017 05:08
@janepohorecka - well, you didn't ask about how to make it not autoplay in the first question... so I am looking at the lity.js code - I see that there are variables or actually object properties autoplay: 1 set in various places. I wonder if you can set that to 0 if it would make a difference in how it works? I don't know if it's legit to just go and edit the javascript - you could try it for whatever video you are loading and see? Although if you are loading it via your HTML code, which might be what it looks like, then the JS code might not make a difference?
of course, that's a wild guess, since I know nothing about this particular code... but good luck with that - I hope it works!
William Rainey
@wrainey
Feb 10 2017 05:13
@IanMacMillan kudos to you on the Bootstrap version. I just made the same discovery after a bit of a struggle. Is there a way to promote your discovery?
Ken Haduch
@khaduch
Feb 10 2017 05:14

@janepohorecka - looking a little further at the JS code, there is a function:

    function Lity(target, options, opener, activeElement) {

And that has an options argument. There isn't any obvious documentation on how it works - perhaps there is a way to set up the "autoplay" in those options?

William Rainey
@wrainey
Feb 10 2017 05:14
Oh yeah... thanks @IanMacMillan
thanks @IanMacMillan sorry, new to this brownie points thing
CamperBot
@camperbot
Feb 10 2017 05:15
wrainey sends brownie points to @ianmacmillan :sparkles: :thumbsup: :sparkles:
:cookie: 118 | @ianmacmillan |http://www.freecodecamp.com/ianmacmillan
Ken Haduch
@khaduch
Feb 10 2017 05:18
@Link5802 - here is something that helped me - if you are planning to use Bootstrap, look at the w3schools.com/bootstrap section, look for the "Themes", where they walk through the design of a page that seems like a suitable model for a portfolio page. It goes through all of the steps for setting up the page in bootstrap, so it would give you some idea of at least how to structure the page?
Janina Pohorecki
@janepohorecka
Feb 10 2017 05:21
@khaduch hmm, I see that too.. There is this documentation: https://github.com/jsor/lity#lityopener
eswhy
@eswhy
Feb 10 2017 05:24
can someone help me get jquery running in codepen? do i simply add the library under settings in the js box? I want to use the animate.css library as well
Ken Haduch
@khaduch
Feb 10 2017 05:27

@janepohorecka - just looked through their issues - there is this one jsor/lity#58 - one answer for youtube videos is there:

Simply append autoplay=0 to the URL.

https://www.youtube.com/watch?v=XSGBVzeBUbk&autoplay=0

Maybe that would do it?

Janina Pohorecki
@janepohorecka
Feb 10 2017 05:29
@khaduch thank you so much for your help :) yes, that did it!
CamperBot
@camperbot
Feb 10 2017 05:29
janepohorecka sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2453 | @khaduch |http://www.freecodecamp.com/khaduch
Ctiller93
@Ctiller93
Feb 10 2017 05:29
Kinda went ahead and did some digging, isolated my issue a bit more, found some examples, etc.
So my question now boils down to: Why doesn't this javascript output to the console?
Ken Haduch
@khaduch
Feb 10 2017 05:30
@janepohorecka - great! good luck with that!
Ctiller93
@Ctiller93
Feb 10 2017 05:31
we're getting undefined despite it being declared globally and then being modified within the document. It should be saving "something" back into MyProject, no?
Ken Haduch
@khaduch
Feb 10 2017 05:31
@Ctiller93 - you are not loading jquery.js?
Ctiller93
@Ctiller93
Feb 10 2017 05:32
just loaded in jquery. Same issue.
Good catch though. :P
I'm having the same issue on my project but jquery is loaded on that one.
Ken Haduch
@khaduch
Feb 10 2017 05:33
@Ctiller93 - and then, you are running that console.log outside of the ready function, try to move it inside?
Ctiller93
@Ctiller93
Feb 10 2017 05:33
Let's see...
This works... kinda?
Ken Haduch
@khaduch
Feb 10 2017 05:34
@Ctiller93 - in fact, if you put one inside the ready function and one outside (where it is now) you'll see "undefined", and then "something"
Ctiller93
@Ctiller93
Feb 10 2017 05:34
Yeah, that's what I was going to say.
That makes less sense to me. Shouldn't "something" show up before "undefined"?
And why don't they both output "something"?
Ken Haduch
@khaduch
Feb 10 2017 05:35
The thing is that one outside of the ready function will run as soon as possible. The $(document).ready() function will only run after the DOM is fully generated. So - that's the reason. @Ctiller93 One runs before the ready function code actually sets the value. Now, if you initialize your object with some other text in the property, and then run it, you'll see both things come out.
Chase
@Athabasco
Feb 10 2017 05:36
why won't my background image change to anything other than the blue clouds
Ctiller93
@Ctiller93
Feb 10 2017 05:36
!!! That explains a loooot. Do other functions do something similar with how they load @khaduch ?
Ken Haduch
@khaduch
Feb 10 2017 05:38
@Ctiller93 - You can put functions outside of the ready block, and as long as you don't invoke them until after the ready is ready, they'll be okay. Anything that is just straight-line code in the JS area will just run as soon as it can - a function that you define and then invoke will run the function. A function that you define and do not invoke will not run (until you invoke it.)
Not sure if that's what you're asking?
@Ctiller93 - another situation where you run into that is with AJAX requests - you have to make sure that you synchronize anything that is dependent on the return of the data to not actually run until after the callback for the AJAX request is fired.
Ctiller93
@Ctiller93
Feb 10 2017 05:40
I think you may have answered my question but I just need a second to process.
So say I declare a bunch of functions at the beginning of my code, then run the ready function, and in that ready function I use all of my functions, everything should be okay, yeah?
Ken Haduch
@khaduch
Feb 10 2017 05:43
@Ctiller93 - I think so - as long as everything has the proper scope - the functions that are declared at the top level of the JS will be global, so it should work?
Ctiller93
@Ctiller93
Feb 10 2017 05:43
So with that in mind does the global variable do something similar? Where say I declared it, and then modified it within a function called by the ready function, does the global variable do anything weird to that function, or would it run as normal?
Ken Haduch
@khaduch
Feb 10 2017 05:47
@Athabasco - I just tried changing the settings of the data.weather[0].id to something like 200, and I get a different picture, so it seems like it is the data that is being returned? I cannot see anything in the API docs actually describing the different values?
Chase
@Athabasco
Feb 10 2017 05:49
@khaduch hmm... ill return it
Ctiller93
@Ctiller93
Feb 10 2017 05:50
I think... I get it...? Thanks a ton @khaduch ! You're awesome man!
CamperBot
@camperbot
Feb 10 2017 05:50
ctiller93 sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2454 | @khaduch |http://www.freecodecamp.com/khaduch
Ctiller93
@Ctiller93
Feb 10 2017 05:50
Lifesaver here. :P
eswhy
@eswhy
Feb 10 2017 05:51
I am trying to change the font color of my nav bar but for some reason when i try to change the color under the id "navigation" nothing changes. any ideas why this is happening? https://codepen.io/eswhy/pen/mRxPpR
Ctiller93
@Ctiller93
Feb 10 2017 05:51
So really all I need to do to fix this is make sure the rest of the junk doesn't run until this one function is finished, then I should be a-ok.
Ken Haduch
@khaduch
Feb 10 2017 05:51
@Athabasco - I have to say that the weather for my location right now is not what is being reported on your page. We have about 10 degrees, and your page is showing 43?
@Ctiller93 - sounds about right. You can just wrap all of your code in the ready function, seems like the simplest thing?
Ctiller93
@Ctiller93
Feb 10 2017 05:58
Well, I'm getting sluggish now and need some sleep. Thanks for all of the help again @khaduch ! I'm going to go pass out and hit this with a good refreshed mind.
CamperBot
@camperbot
Feb 10 2017 05:58
ctiller93 sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:warning: ctiller93 already gave khaduch points
Ken Haduch
@khaduch
Feb 10 2017 05:59
@eswhy - you are not affecting your font color of the link text, it seems? YOu are setting the color on the #navigation it, but I don't think that it is inherited down to the links? If you add the class navbar-inverse to your <nav element, it kind of does what you're trying to do?
Chase
@Athabasco
Feb 10 2017 06:01

@khaduch I fixed it!

I am now FINALLY done my local weather app! Don't view the version in the chat window for the full effect!

http://codepen.io/Athabasco/full/wgXdNJ/

eswhy
@eswhy
Feb 10 2017 06:02
@khaduch okay thanks. any idea on how to add a custom color to the links? in case i didnt want the color to be white. it doesnt seem to work even when i am targeting the li elements specifically
CamperBot
@camperbot
Feb 10 2017 06:02
eswhy sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2455 | @khaduch |http://www.freecodecamp.com/khaduch
Ken Haduch
@khaduch
Feb 10 2017 06:04

@eswhy - if you look into the settings for the font color on those elements - you'll see that there is a selector in bootstrap for the link text that looks like this for the navbar-inverse settings:

.navbar-inverse .navbar-nav > li > a

and it is setting the colors. YOu could override it by adding a similar CSS selector in your CSS panel - you just have to get the correct path to the elements. Like with the navbar-inverse class set, I can add this CSS to get red font:

.navbar-inverse .navbar-nav > li > a {
  color: red;
}

as an example.

you can use the developer's tools in the browser to find those paths, and experiment on the fly, then add it to your CSS.
eswhy
@eswhy
Feb 10 2017 06:05
@khaduch awesome thank you!
CamperBot
@camperbot
Feb 10 2017 06:05
eswhy sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:warning: eswhy already gave khaduch points
Ken Haduch
@khaduch
Feb 10 2017 06:08
@Athabasco - okay - now I'm getting a different background, but my temperature is still off by 40 degrees or so? My outside temperature right now is about 9 degrees Fahrenheit, and the app says 43.89?
@Athabasco - the weather API is returning 279.6 for the temperature, and it looks like if you subtracted the 273.15 from that it would be 6.45, which would be closer to the temp? Maybe there is a bit of confusion in the code?
Chase
@Athabasco
Feb 10 2017 06:14
@khaduch Yup, I'm getting very warm temperatures right now too
@khaduch And it is not my fault, I just did the math. It's on the API
Ken Haduch
@khaduch
Feb 10 2017 06:17
@Athabasco - I guess that your numbers are correct as far as openweather is concerned? I wonder why that is? I just found a kelvin to Fahrenheit converter, and the number that they are returning is converting to 42 degrees F... hmmm
@Athabasco - well, good work, anyway - you can't control the API! :) Nor the weather... have a good night, I'm signing off now! :)
Chase
@Athabasco
Feb 10 2017 06:18
@khaduch My F and C are fine
kirbyedy
@kirbyedy
Feb 10 2017 06:57
@Athabasco would be nicer if you put the background to no repeat
and cover
joopt
@joopt
Feb 10 2017 08:05
anyone know whats wrong with my ajax function?
$(document).ready(function() {
$.ajax( {
    url: 'https://en.wikipedia.org/w/api.php?action=query&titles=Main%20Page&prop=revisions&rvprop=content&format=json&callback=?',

    dataType: 'json',
    type: 'GET',
    headers: { 'Api-User-Agent': 'Example/1.0' },
    success: function(data) {
       console.log(data);
    }
} );
})
kirbyedy
@kirbyedy
Feb 10 2017 08:14
@joopt there is an object logged in your console
so basically its working :)
Dan Ng
@apoc8188
Feb 10 2017 08:22
Can someone take a look at my code on code pen? doing the random quote machine.
joopt
@joopt
Feb 10 2017 08:37
@kirbyedy yeah but the object is empty.. :S
kirbyedy
@kirbyedy
Feb 10 2017 08:37
@joopt ermmm but did you pass any search term to your ajax call ?
cause I dont see it :)
@apoc8188 error: Uncaught SyntaxError: Unexpected token o in JSON at position 1
joopt
@joopt
Feb 10 2017 08:39
@kirbyedy im using the example api call from the help page
kirbyedy
@kirbyedy
Feb 10 2017 08:41
I dont know if that will be enough for your project to work
Johnny
@jtan3
Feb 10 2017 08:42
Can someone explain why my url is not hyperlinked?
Brandon
@bd1887
Feb 10 2017 09:11
@jtan3 Right now you've got the variable url in quotes, so it's being recognized as a string instead of a variable.
$("#streamerInfo").prepend("<div class='row'>"+
     "<div class='col-md-4'>"+"<img src='" + logo + "'>"+"</div>"+
    "<div class='col-md-4'>"+"<a target='_blank' href=" + url + ">" + name + "</a>"+"</div>"+
     "<div class='col-md-4'>" + mode + "</a></div></div>");
Brandon
@bd1887
Feb 10 2017 09:17
(I edited my response to include target='_blank')
Radek
@radekjohn
Feb 10 2017 09:47
hi, please, can somebody here explain why the button with "switchToFahrenheit" function does not work? http://codepen.io/radekjohn/pen/wgEjdj
Brandon
@bd1887
Feb 10 2017 10:06
@radekjohn Well, I can fix it, but I can't really explain why.
@radekjohn The first thing is remove your switchToFahrenheit function from the $(document).ready function
Radek
@radekjohn
Feb 10 2017 10:08
@bd1887 put it behind it?
Brandon
@bd1887
Feb 10 2017 10:09
@radekjohn Yea, outside the function. In the global scope
Radek
@radekjohn
Feb 10 2017 10:09
@bd1887 OK. thanks a lot
CamperBot
@camperbot
Feb 10 2017 10:09
radekjohn sends brownie points to @bd1887 :sparkles: :thumbsup: :sparkles:
:cookie: 334 | @bd1887 |http://www.freecodecamp.com/bd1887
Brandon
@bd1887
Feb 10 2017 10:10
@radekjohn The second thing is, you can't change the background colors of spans
@radekjohn Change it to a div
<div id="fahrenheit">
<p>Fahrenheit temperature is: <span id="temp_f">30.7</span></p>
<p>Feels like Fahrenheit temperature: <span id="feelslike_f">"24"</span></p>
  </div>
@radekjohn And the third thing is, your the .css jquery method takes two parameters
function switchToFahrenheit (){
  $("#fahrenheit").css("background-color", "yellow");
}
Radek
@radekjohn
Feb 10 2017 10:14
@bd1887 i did not know this! thanks
CamperBot
@camperbot
Feb 10 2017 10:14
radekjohn sends brownie points to @bd1887 :sparkles: :thumbsup: :sparkles:
:warning: radekjohn already gave bd1887 points
Brandon
@bd1887
Feb 10 2017 10:15
@radekjohn You're welcome! Is it working now?
Radek
@radekjohn
Feb 10 2017 10:15
@bd1887 i am still changing it
@bd1887 Yes! thamks again. See you
Brandon
@bd1887
Feb 10 2017 10:18
@radekjohn Good luck!
Archit Chandra
@architchandra
Feb 10 2017 10:56
Hi. I am using Bootstrap v4 alpha 6 and created this in Codepen using it: https://codepen.io/architchandra/pen/rjYrMm
The problem I’m facing is that the toggle-menu is not working when the screen size is small or xs. I can’t figure out why that is happening. Can anybody help?
Roberto Di Lillo
@koop4
Feb 10 2017 11:12
hi all
Chris Cullen
@123xylem
Feb 10 2017 11:12
Hi,
I have a site made... And i have made links for other pages on teh navbar.. All the other pages go to another page but for some reason my homepage lInks wont work.. How come!!!
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >

<link rel="stylesheet" type="text/css" href="kora.css">
<link  href="koraFood.html">
<link href="koraGallery.html">
<link href="koraSite.html">



<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <title>Kora </title>


</head>
<body>
<nav class="navbar ">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

 <a class="navbar-brand special" href="koraSite.html">  Kora <i class="fa fa-paw" aria-hidden="true"></i>
</a>  //THIS HOME PAGE LINK
    </div>

    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="koraSite.html">Home <span class="sr-only">(current)</span></a></li>
//AND THIS HOMEPAGE LINK
        <li><a href="koraFood.html">Our Foods</a></li>
        <li><a href="koraGallery.html">Gallery</a></li>
          </ul>
        </li>

  </div>
Meli94
@meli94
Feb 10 2017 11:16
@architchandra I'm having a look wait a bit
Meli94
@meli94
Feb 10 2017 11:23
@architchandra I think you shoud use <div class="container-fluid">
Meli94
@meli94
Feb 10 2017 11:44
http://codepen.io/Meli94/pen/ygRPKP I'm having problems with the for loop for showing the results of the data function. How can I fix it?
Tim Handy
@TimHandy
Feb 10 2017 11:49
Hey all, how are you implementing Bootstrap in React please? Are you using Webpack/NPM to install it? if so, how? I can't find a guide on it that's any good. I can't even understand the basic overview of how to do it? Wasted nearly a day on it now. Tried React-Bootstrap and it's a pain in the arse; it's like learning a whole new syntax. I just want to use normal Bootstrap. :-)
h1tag
@h1tag
Feb 10 2017 11:53
@meli94 when you're calling twitch(n); you're passing it a variable n, you should pass it a value
Radek
@radekjohn
Feb 10 2017 11:55
hi, please, do you see you location in left corner? http://codepen.io/radekjohn/full/wgEjdj/
h1tag
@h1tag
Feb 10 2017 11:55
@radekjohn yes
Radek
@radekjohn
Feb 10 2017 11:56
@fortMaximus thanks! good bye
CamperBot
@camperbot
Feb 10 2017 11:56
radekjohn sends brownie points to @fortmaximus :sparkles: :thumbsup: :sparkles:
:cookie: 311 | @fortmaximus |http://www.freecodecamp.com/fortmaximus
h1tag
@h1tag
Feb 10 2017 11:56
LOL. BB
Meli94
@meli94
Feb 10 2017 12:06
@fortMaximus yes but I'd like to print all channels
h1tag
@h1tag
Feb 10 2017 12:07
@meli94 loop?
Meli94
@meli94
Feb 10 2017 12:09
http://codepen.io/Meli94/pen/ygRPKP @fortMaximus I added it but now I'm having all offline
h1tag
@h1tag
Feb 10 2017 12:10
@meli94 this wrong, it's like passing an array in a place of index
you should do it like this:
for(var i  = 0; i < channels.length; i++){
    twitch(i);
}
EpicTriffid
@EpicTriffid
Feb 10 2017 12:13
Hello all! Im currently trying to create my tribute page, and am trying to nest a blockquote within a panel. But whatever I do, the panel isn't appearing. Am i missing something obvious?
Yoerivw
@Yoerivw
Feb 10 2017 12:14
Good Day campers, I've been stuck with my Simon game for 2 days now and I am struggling with figuring out how to put delays on the upcoming moves, they all happen at once when I input correct moves. I am far from done with the project but I've been stuck on this problem for a while now and can't seem to get past this. I would appreciate it if anyone could just skim through and give me some suggestions on where to look or guidance on what to change. Thank you in advance :) http://codepen.io/yoerivw/pen/BpVbvr?editors=1011
h1tag
@h1tag
Feb 10 2017 12:16
@EpicTriffid post you Codepen pen URL
Its that quote at the bottom that isnt nesting
ignore the well statement. I've corrected that now
Still isn't working though
h1tag
@h1tag
Feb 10 2017 12:19
@EpicTriffid what do you mean by nesting?
EpicTriffid
@EpicTriffid
Feb 10 2017 12:19
@fortMaximus I want to have the quote sit in a panel so it looks distinct from the background
h1tag
@h1tag
Feb 10 2017 12:21
@EpicTriffid so you want to give it a different background?
Meli94
@meli94
Feb 10 2017 12:22
for (var i = 0; i < channels.length; i++) {
var a = twitch(i);
$('#stream').append("<div><p>" + a + "</p></div>");
}
@fortMaximus
@fortMaximus I'm doing something wrong
EpicTriffid
@EpicTriffid
Feb 10 2017 12:23
@fortMaximus Not necessarily. I can give a completely different background color, but I can't get it to sit in its own seperate box like a panel
h1tag
@h1tag
Feb 10 2017 12:24
@meli94 why var a = twitch(i);? twitch(n); doesn't return anything
i.e. there's no return statement inside twitch(n) function
Meli94
@meli94
Feb 10 2017 12:26
var a because I wanted to add div all time that I'm calling twitch
h1tag
@h1tag
Feb 10 2017 12:27
@EpicTriffid do you want a border around it?
EpicTriffid
@EpicTriffid
Feb 10 2017 12:28
@fortMaximus Yup
h1tag
@h1tag
Feb 10 2017 12:28
@meli94 it won't work this way because twitch(n) doesn't return anything
EpicTriffid
@EpicTriffid
Feb 10 2017 12:28
So, i added a default panel code outside of all the current code, and it still doesnt work :(
h1tag
@h1tag
Feb 10 2017 12:30
@EpicTriffid oh, now I got you. I thought you meant something else
EpicTriffid
@EpicTriffid
Feb 10 2017 12:30
@fortMaximus Ah, apologies
h1tag
@h1tag
Feb 10 2017 12:30
because I haven't used panel class before
EpicTriffid
@EpicTriffid
Feb 10 2017 12:30
It's weird that it just doesnt want to work. Bootstrap is activated
Meli94
@meli94
Feb 10 2017 12:30
@fortMaximus I'm getting there but it doesn't create new div
return  $('#stream').append("<div><p>" + game + "</p></div>");
      }
    });
  }
  for (var i = 0; i < channels.length; i++) {
    twitch(i);
  }
EpicTriffid
@EpicTriffid
Feb 10 2017 12:30
Well is the same
h1tag
@h1tag
Feb 10 2017 12:32
@EpicTriffid you have to replace the Bootstrap version by this one: https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css
because the one Codepen is using right now by default is still in alpha
@meli94 what have you done?! :p
you were on the right path before
put append back inside the function twitch(n) like it was before
Meli94
@meli94
Feb 10 2017 12:36
$(document).ready(function() {
  var channels = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];

  function twitch(n) {
    var channel = channels[n];

    var myurl = 'https://wind-bow.gomix.me/twitch-api/streams/' + channel + "?callback=?";
    $.ajax({
      url: myurl,
      dataType: "jsonp",
      data: {
        method: "GET",
        lang: "en",
        format: "json"
      },
      success: function(data) {
        var game,
          status;
        if (data.stream === null) {
          game = "Offline";
          status = "offline";
        } else if (data.stream === undefined) {
          game = "Account Closed";
          status = "offline";
        } else {
          game = data.stream.game;
          status = "online";
        }
        $('#stream').html('');
return  $('#stream').append("<div><p>" + game + "</p></div>");
      }
    });
  }
  for (var i = 0; i < channels.length; i++) {
    twitch(i);

  }   

});
It's inside :)
@fortMaximus
h1tag
@h1tag
Feb 10 2017 12:36
@meli94 then why you put another one outside?
Meli94
@meli94
Feb 10 2017 12:37
No I haven't I think :worried:
h1tag
@h1tag
Feb 10 2017 12:38
I thought I saw one inside the for loop before
Meli94
@meli94
Feb 10 2017 12:38
yes but I took it off
h1tag
@h1tag
Feb 10 2017 12:42
@meli94 you shouldn't be using a return statement
and you don't need $('#stream').html('');
@meli94 now it should work
Meli94
@meli94
Feb 10 2017 12:47
@fortMaximus thank you! http://codepen.io/Meli94/pen/ygRPKP
CamperBot
@camperbot
Feb 10 2017 12:47
meli94 sends brownie points to @fortmaximus :sparkles: :thumbsup: :sparkles:
:cookie: 313 | @fortmaximus |http://www.freecodecamp.com/fortmaximus
Meli94
@meli94
Feb 10 2017 12:47
you are very patient ahah
h1tag
@h1tag
Feb 10 2017 12:47
:+1:
Thank U
Anirudh Ramesh
@anirudhr95
Feb 10 2017 12:51
I cannot make it collapse when screen size gets smaller. Help please?
Clyde Lobo
@oppiniated
Feb 10 2017 12:51
@thiduck It would be easier if you created a pen at codepen
Anirudh Ramesh
@anirudhr95
Feb 10 2017 12:51
oh alright :)
a second ill upload the same thing but using codepen :)
AlejoFCC
@AlejoFCC
Feb 10 2017 12:52
Hello! I am in the 148 challenge, The weather project. But from the 147 challenge, it is difficult to me when we start to mix javascript with html (I haven't seen any of html, use os APIs etc etc). So, my question is, Must I stop and study some html syntaxis before starting 148 challenge? Thank you.
h1tag
@h1tag
Feb 10 2017 12:55
@AlejoFCC No, you don't have to. You already studied JQuery through the challenges, go back and revise that
Anirudh Ramesh
@anirudhr95
Feb 10 2017 12:56
@oppiniated http://codepen.io/thiduck/pen/ggQLXj here is the link man!
also
i intend it to look this way
(picture incoming)
h1tag
@h1tag
Feb 10 2017 12:56
and for the APIs, the API returns a JSON object. You already studied JSON objects through challenges (if I'm not wrong), go back and revise that too.
AlejoFCC
@AlejoFCC
Feb 10 2017 12:57
@fortMaximus Thank you. I don't want to get stuck easily everytime.
CamperBot
@camperbot
Feb 10 2017 12:57
alejofcc sends brownie points to @fortmaximus :sparkles: :thumbsup: :sparkles:
:cookie: 315 | @fortmaximus |http://www.freecodecamp.com/fortmaximus
h1tag
@h1tag
Feb 10 2017 12:57
@AlejoFCC
Anirudh Ramesh
@anirudhr95
Feb 10 2017 12:57
and this collapses
h1tag
@h1tag
Feb 10 2017 12:57
@AlejoFCC Use the read-search-ask method
;)
Martine Ross
@moi238
Feb 10 2017 12:58
@AlejoFCC also there's some good tutorials on using APIs on YouTube
this is how it should be normally..and it should collapse. but i get ^ the pen
Archit Chandra
@architchandra
Feb 10 2017 13:04
@meli94 This is v4 alpha 6. I just added the collapsible navbar inside the jumbotron rather than keep it outside it. Keeping it outside makes it look worse and the problem is not solved even then.
@thiduck I was facing a similar problem earlier. StackOverflow cam to the rescue. Add the jQuery CDN link before the Bootstrap JS CDN link. Should fix it.
Anirudh Ramesh
@anirudhr95
Feb 10 2017 13:08
aw
@architchandra But I have.
Archit Chandra
@architchandra
Feb 10 2017 13:09
@thiduck In your Codepen the Bootstrap link is before jquery
Anirudh Ramesh
@anirudhr95
Feb 10 2017 13:12
oh
@fortMaximus worked. but still i can't get it to collpase.
here
@architchandra your fixed helped as well. but I can't seem to get it to collapse.
Archit Chandra
@architchandra
Feb 10 2017 13:13
@thiduck Also, I noticed that you are using Bootstrap 4 but seem to be using classes from Bootstrap 3’s documentation
h1tag
@h1tag
Feb 10 2017 13:13
and you only need Bootstrap in the CSS section/box, remove from the JavaScript section/box
Anirudh Ramesh
@anirudhr95
Feb 10 2017 13:13
@architchandra you're absolutely right archit. I had no idea I was doing that (I'm a total noob to web dev). @fortMaximus helped me out for that. Even then, I cannot make em collapse
h1tag
@h1tag
Feb 10 2017 13:14
@thiduck what do you mean by collapse?
Anirudh Ramesh
@anirudhr95
Feb 10 2017 13:14
like when you go lower than a windows size..it all collapses into a button..
i cannot quite explain it.. here is an image that explains what i want
that corner collapse box is what I aim to achieve
h1tag
@h1tag
Feb 10 2017 13:17
idk how to do this :worried:
Anirudh Ramesh
@anirudhr95
Feb 10 2017 13:18
:(
you can help me with one thing though - how are bootstrap 4 classes different from bootstrap 3. anything special i should be looking out for?
h1tag
@h1tag
Feb 10 2017 13:19
@thiduck I didn't research this. But the version 4 that Codepen currently uses by default is in alpha stage
Anirudh Ramesh
@anirudhr95
Feb 10 2017 13:20
@fortMaximus thanks man. can I know how you knew I was using the wrong version of bootstrap?
CamperBot
@camperbot
Feb 10 2017 13:20
thiduck sends brownie points to @fortmaximus :sparkles: :thumbsup: :sparkles:
:cookie: 318 | @fortmaximus |http://www.freecodecamp.com/fortmaximus
Anirudh Ramesh
@anirudhr95
Feb 10 2017 13:20
i have no clue what is happening
:(
h1tag
@h1tag
Feb 10 2017 13:21
@thiduck when you use the "quick add" feature it adds this alpha version
Anirudh Ramesh
@anirudhr95
Feb 10 2017 13:21
aw :)
thanks again @fortMaximus
CamperBot
@camperbot
Feb 10 2017 13:21
thiduck sends brownie points to @fortmaximus :sparkles: :thumbsup: :sparkles:
:warning: thiduck already gave fortmaximus points
h1tag
@h1tag
Feb 10 2017 13:21
you know "quick add" on Codepen?
Anirudh Ramesh
@anirudhr95
Feb 10 2017 13:21
@fortMaximus yep
@camperbot ikik:(
h1tag
@h1tag
Feb 10 2017 13:22
you can check which version Codepen added by checking the URL that gets added
Anirudh Ramesh
@anirudhr95
Feb 10 2017 13:23
@fortMaximus yep (Y) understood
Drbathound
@Drbathound
Feb 10 2017 14:40
how would i center an image
Brandon
@bd1887
Feb 10 2017 14:43
@Drbathound Are you working on Codepen? Can you link to your project?
@bd1887 nevermind i found how
viorelfoamete
@viorelfoamete
Feb 10 2017 14:47
what do you guys think about my tribut page ? :D http://codepen.io/viorelfoamete/full/MJzjyX/
Brandon
@bd1887
Feb 10 2017 14:49
@Drbathound Ok cool. Looks like you did it using HTML. You can also use CSS to do it this way:
img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
Drbathound
@Drbathound
Feb 10 2017 14:49
@bd1887 cool thx
CamperBot
@camperbot
Feb 10 2017 14:49
drbathound sends brownie points to @bd1887 :sparkles: :thumbsup: :sparkles:
:cookie: 335 | @bd1887 |http://www.freecodecamp.com/bd1887
h1tag
@h1tag
Feb 10 2017 14:49
@viorelfoamete nice design! :+1:
good choice too
viorelfoamete
@viorelfoamete
Feb 10 2017 14:50
@fortMaximus :D
Ken Haduch
@khaduch
Feb 10 2017 14:59
@Drbathound - looks like you're getting the project together - nice! For some reason, the word "transendentalist" doesn't look like it is correctly spelled? Looks like maybe transcendentalist ? Anyway - looks like it's coming along... A couple other typos in there, but coming along!
h1tag
@h1tag
Feb 10 2017 15:02
@khaduch Hi!
@Drbathound It would be nice if you center the list too
Drbathound
@Drbathound
Feb 10 2017 15:03
@khaduch thx for pointing that out
CamperBot
@camperbot
Feb 10 2017 15:03
drbathound sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2456 | @khaduch |http://www.freecodecamp.com/khaduch
Drbathound
@Drbathound
Feb 10 2017 15:03
@fortMaximus https://codepen.io/DrBathound/pen/ygRWdJ the list is more or less centered now
Ken Haduch
@khaduch
Feb 10 2017 15:05
@fortMaximus - howdy!
alican karalar
@alicankaralar
Feb 10 2017 15:49
hello
i need help guys
my click function doesn'T work
the show online button
however,
when i paste the same line of code into chrome console
then the button works
am i missing something?
h1tag
@h1tag
Feb 10 2017 15:52
@alicankaralar u don't need head and doctype
alican karalar
@alicankaralar
Feb 10 2017 15:52
yes but i am doing it in an editor
then i paste them into codepen
they're not the reasons the button fails eventually
i mean the button fails also in chrome
via localhost etc
jarlnartey
@jarlnartey
Feb 10 2017 15:56
how do i use the opacity property on only the padding and not the text? what happens in the example below is that both the padding and the text gets the opacity value of 0.7, when i only want the padding to get it. been searching around, but haven't found a solution i understand yet. thanks in advance
<div class="fronterPrimary">
      <header style="text-align: center; padding: 10px;">text goes here</header>
      <p style="text-align: center;">text goes her text goes here text goes here</p>
    </div>
.fronterPrimary {
  font-size: 40px;
  background: white;
  width: 30%;
  margin-left: 35%;
  margin-right: 35%;
  padding: 10px;
  text-align: center;
  opacity: 0.7;
}
Mikail Bayram
@mikail1998
Feb 10 2017 16:04
do you have a codepen link?
@jarlnartey
jarlnartey
@jarlnartey
Feb 10 2017 16:07

@mikail1998
https://codepen.io/jarlnartey/pen/dNeVpE

excuse the dodgy code, still learning...

Darren Ho
@darrenho97
Feb 10 2017 16:16
hi can someone review my twitch api project? :)
Gulsvi
@gulsvi
Feb 10 2017 16:17
@jarlnartey opacity applies to everything. If you use rgba colors you can choose a transparent color for the background.
For example, instead of background: white use background-color: rgba(255,255,255,0.2);
That's white with 0.2 opacity.
Mikail Bayram
@mikail1998
Feb 10 2017 16:17
@darrenho97 could do with some aligning
online tab
specifically
Gulsvi
@gulsvi
Feb 10 2017 16:18
For my weather app I used a 0.7 transparent black box to show the weather details with: background-color: rgba(0, 0, 0, .7);
jarlnartey
@jarlnartey
Feb 10 2017 16:19
@SkyCoder01 thanks for the explanation!
CamperBot
@camperbot
Feb 10 2017 16:19
jarlnartey sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 167 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Yoerivw
@Yoerivw
Feb 10 2017 16:19
Good day guys, I've been struggling with my last freecodecamp project the simon game. Can someone look at my code and play the game and give me some guidelines as to what to look out for and do next maybe ? thanks in advance fellow campers http://codepen.io/yoerivw/pen/BpVbvr?editors=1011
alican karalar
@alicankaralar
Feb 10 2017 16:20
@darrenho97 will you add online -offline filters?
Darren Ho
@darrenho97
Feb 10 2017 16:21
@mikail1998 @alicankaralar to be very honest.. i considered it but i dont really know how to start doing it, searched around but to no avail.
Gulsvi
@gulsvi
Feb 10 2017 16:23
@darrenho97 It looks like the status is wrong for some of the channels and you are just making one API call to see who freecodecamp follows. I think you need to follow all the user stories to complete the project.
h1tag
@h1tag
Feb 10 2017 16:24
:point_up: February 10, 2017 5:52 PM @SkyCoder01 can you help him? (I couldn't figure out what the problem is, other than removing <doctype> and stuff (meta, jquery, bootstrap, css & js file links) from <head> and changed on("click" function(){}) it was onclick(function(){}))
alican karalar
@alicankaralar
Feb 10 2017 16:25
neither did i @fortMaximus
i used click() method
on click method
onclick as well
Gulsvi
@gulsvi
Feb 10 2017 16:25
I'll take a look, but I just started the twitch project yesterday :)
alican karalar
@alicankaralar
Feb 10 2017 16:25
i even tried addeventlistener
but, when i paste the same line of code that doesn't work into chrome it works which baffles me
h1tag
@h1tag
Feb 10 2017 16:26
@SkyCoder01 I thought you're more experienced than me :worried:
Yevhen Diachenko
@EugeneDyachenko
Feb 10 2017 16:26

Hi, I'm doing a project "Local weather".
I have a problem, CodePen does not send a request to http.

Codepen want https request, but he dont work

alican karalar
@alicankaralar
Feb 10 2017 16:27
eugene
Gulsvi
@gulsvi
Feb 10 2017 16:27
No, I'm just a beginner still. Just read a lot of about bootstrap and studied their CSS files
Ayush Bahuguna
@relentless-coder
Feb 10 2017 16:28
Hi, I need help with setting up livereload in gulp-connect
gulp.task('connect', function() {
  connect.server({
      livereload: true,
      root: '/home/ayush/Desktop/Starter/'
      });
});

gulp.task('livereload', function () {
  gulp.src('/index.htm')
    .pipe(connect.reload());
});

gulp.task('watch', function () {
  gulp.watch('/index.htm', ['livereload']);
});

gulp.task('serve', ['connect', 'livereload', 'watch']);
Gulsvi
@gulsvi
Feb 10 2017 16:28
Wll, I guess intermediate since I'm on twitch :)
alican karalar
@alicankaralar
Feb 10 2017 16:28
@EugeneDyachenko eugene invalid api key
Gulsvi
@gulsvi
Feb 10 2017 16:33
@alicankaralar Why are you using
document.addEventListener('DOMContentLoaded',function() {
instead of
$(document).ready()?
I've never seen that before, just wondering if there's a reason to use that instead of document.ready
h1tag
@h1tag
Feb 10 2017 16:34
@SkyCoder01 I tried that too
changing his code to document.ready
alican karalar
@alicankaralar
Feb 10 2017 16:38
@SkyCoder01 @fortMaximus be
its the same thing
i lean towards vanilla js in my projects to teach myself js first
so that i can better understand and appreciate jquery :)
originally my button functions were plain js too but then i converted to jquery
in hopes that might show me why the click function didn't work but it didn't
h1tag
@h1tag
Feb 10 2017 16:40
$(document).ready() is jQuery
Adam
@GoingAllTheWayUp
Feb 10 2017 16:42
Well Well, I have to do a Less than (<) or Greater than (>) with the Equality Operator (===), anyone know what I'm talking about? Returning Boolean Values from Functions?
h1tag
@h1tag
Feb 10 2017 16:42
<= or >=
Adam
@GoingAllTheWayUp
Feb 10 2017 16:42
really?
I was doing <==
ugh
h1tag
@h1tag
Feb 10 2017 16:43
yes, it's greater/less than or equal
Adam
@GoingAllTheWayUp
Feb 10 2017 16:43
@fortMaximus tx!
CamperBot
@camperbot
Feb 10 2017 16:43
goingallthewayup sends brownie points to @fortmaximus :sparkles: :thumbsup: :sparkles:
:cookie: 326 | @fortmaximus |http://www.freecodecamp.com/fortmaximus
Adam
@GoingAllTheWayUp
Feb 10 2017 16:43
and returns boolean
h1tag
@h1tag
Feb 10 2017 16:43
YUP
alican karalar
@alicankaralar
Feb 10 2017 16:44
@fortMaximus @SkyCoder01 thanks guys
CamperBot
@camperbot
Feb 10 2017 16:44
alicankaralar sends brownie points to @fortmaximus and @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 168 | @skycoder01 |http://www.freecodecamp.com/skycoder01
:cookie: 327 | @fortmaximus |http://www.freecodecamp.com/fortmaximus
h1tag
@h1tag
Feb 10 2017 16:45
@alicankaralar solved?
alican karalar
@alicankaralar
Feb 10 2017 16:45
i guess im finding a work around now stephenjames from help js hinted out a solution
h1tag
@h1tag
Feb 10 2017 16:45
good
alican karalar
@alicankaralar
Feb 10 2017 16:45
@alicankaralar I moved your two lists below the button divs and it worked.
Also when I disabled the getJSON it worked.
Something with inserting the HTML must be breaking the handler registration
Adam
@GoingAllTheWayUp
Feb 10 2017 16:46
@fortMaximus how long have you been using FCC and what do you gain the most from?
Gulsvi
@gulsvi
Feb 10 2017 16:46
Right, if you get rid of the for loop, it works
h1tag
@h1tag
Feb 10 2017 16:47
@GoingAllTheWayUp not long ago, I think late November
since*
Gulsvi
@gulsvi
Feb 10 2017 16:47
I'm just copying/pasting this all over to figure out where the problem is:
  $('#show-online-button').click(function() {
    alert('clicked')
  });
Adam
@GoingAllTheWayUp
Feb 10 2017 16:47
are you doing a full course or just picking off what you want/need to know
h1tag
@h1tag
Feb 10 2017 16:47
@GoingAllTheWayUp yea, full
I wanted to specialize in web development, especially design
Adam
@GoingAllTheWayUp
Feb 10 2017 16:48
very nice
have you been doing web dev or design for long
h1tag
@h1tag
Feb 10 2017 16:49
no
Adam
@GoingAllTheWayUp
Feb 10 2017 16:50
me neither but I had some programming from school, you?
h1tag
@h1tag
Feb 10 2017 16:50
yes
Adam
@GoingAllTheWayUp
Feb 10 2017 16:50
so like I know what an if/else
h1tag
@h1tag
Feb 10 2017 16:50
:+1:
Bgene
@Bgene
Feb 10 2017 16:51
is it possible for me to just add the entire library to my html so I don't have to get the link for every font that I use?
h1tag
@h1tag
Feb 10 2017 16:52
@GoingAllTheWayUp but your portfolio on github looks nice
David Rowan III
@rowanD72
Feb 10 2017 16:52
Hello everyone
Gulsvi
@gulsvi
Feb 10 2017 16:57

@alicankaralar Move this HTML:

      <div id="show-online-button" class="show-online-button">
          <p id="show-online">online only</p>
      </div>

Outside of the 'channels-list' <ul> and put it right under your wrapper. Everything will work :)

    <div class="wrapper">
      <div id="show-online-button" class="show-online-button">
          <p id="show-online">online only</p>
      </div>
Must be something to do with how you are updating the html inside the chanels-list UL in your for loop
h1tag
@h1tag
Feb 10 2017 16:58
:+1:
Tony
@FreakishLancer
Feb 10 2017 16:58
Hey guys, I am trying to make my Simon sequence/game reset whenever the user turns the power off and then on again, but it is getting weird behavior. I can't pinpoint what in my code is wrong. Can anybody help? https://codepen.io/Freaklancer/pen/BpOEvO
Jean Marco Romero
@volkranium
Feb 10 2017 17:01
Hey guys where can i get cool short videos for full background ???
Gulsvi
@gulsvi
Feb 10 2017 17:01
@Bgene No, it isn't possible to add the font code to your HTML
Just the links that point to the files - I think they are binary files, not text
Bgene
@Bgene
Feb 10 2017 17:09
@SkyCoder01 okay I see
Adam Jacks
@AdamHJ123
Feb 10 2017 17:11
Guys, does this look ok so far?
N
N
@FreakishLancer That looks really good :O
Tony
@FreakishLancer
Feb 10 2017 17:17
@AdamHJ123 Thank you. Now if only I can get it to do what I need it to do!
CamperBot
@camperbot
Feb 10 2017 17:17
freakishlancer sends brownie points to @adamhj123 :sparkles: :thumbsup: :sparkles:
:cookie: 282 | @adamhj123 |http://www.freecodecamp.com/adamhj123
Tony
@FreakishLancer
Feb 10 2017 17:18
Your TTT game looks decent so far. I deduct points for Comic Sans ;) But to each their own.
Gulsvi
@gulsvi
Feb 10 2017 17:34
@volkranium I found a lot of free videos for website backgrounds at https://videos.pexels.com/
Rajat
@rajataudichya
Feb 10 2017 17:43
Guys need helo
I am trying to add a modal popup with image and description
but the code which I am using is showing modal underneath and not poping up

    <head>        
            <link rel="stylesheet" href="css/normalize.min.css">
        <link rel="stylesheet" href="css/reset.css">
        <link rel="stylesheet" href="css/styles.css">
        <link href='https://fonts.googleapis.com/css?family=Roboto+Slab' rel='stylesheet' type='text/css'>

    </head>


         <!--PROJECTS SECTION-->

      <section  id="projects">
           <div class="container">
<div class="row text-center">
                <div class="text-center">
                    <div class="col-md-4 col-sm-4 text-center">
                     <h4>Mount Castle</h4>
                       <p>
                                Bhor is a mesmerizing place near Pune. Known for its natural beauty, 
                                you will be surprised just how quickly you slip into the languid groove. 
                            </p>  
                                &nbsp;&nbsp;  <img class="img-responsive" src="assets/img/mc.jpg" alt="">
                           <div class="project-cls">
                            <button class="button" data-js="open-u-modal">Mount Castle</button>
                           </div>
                    </div>
                    <div class="col-md-4 col-sm-4 text-center">
                     <h4>La Colina</h4>
                       <p>
                                La-Colina is Surrounded by Mountains ranges and beautiful nature views,
                                it is situated at Ambervet which is close to Pirangut.
                            </p>  
                                &nbsp;&nbsp;  <img class="img-responsive" src="assets/img/lc.jpg" alt="">
                           <div class="project-cls">
                            <button class="button" data-js="open-u-modal">La Colina</button>
                           </div>
                    </div>

                   <div class="col-md-4 col-sm-4 text-center">
                     <h4>Country Side</h4>
                       <p>Countryside is elegant Country Estate living present a very limited number of prime homesites.
                          The neighborhood itself is truly an executive enclave
                            </p>  
                                &nbsp;&nbsp;  <img class="img-responsive" src="assets/img/cs.jpg" alt="">
                           <div class="project-cls">
                            <button class="button" data-js="open-u-modal">Country Side</button> 
                           </div>
                    </div>
                </div>
                  </div>
               </div>
      </section>
        <!-- MODAL -->
        <div class="u-modal">
            <div class="u-modal-box"><!-- .modal-box--fullscreen -->
                <div class="tar">
                    <i class="u-modal-close" data-js="close-u-modal">close here</i>
                </div>
                <div class="u-modal-content">
                    <div class="u-modal-column--full u-modal-column--animated" data-effect="slide-up">
                        <h1 class="u-modal-title u-modal-txt--animated">Use this container to place your HTML elements according to your needs</h1>
                        <p class="u-modal-txt u-modal-txt--animated">I'm a text</p>
                        <p class="u-modal-txt u-modal-txt--animated">I'm a text</p>
                    </div>
                </div>
                <div class="tar">
                    <button class="u-modal-btn" data-js="close-u-modal">Understood</button>
                </div>
            </div>
        </div>
        <!-- MODAL -->
          <script src="js/pop-it-1.0.min.js"></script>
        <script>

        (function(){
            var p = new Popit({
                // auto: true,
                // veil: "disabled"
            });
        }());

        </script>
can some what m i missing
Jean Marco Romero
@volkranium
Feb 10 2017 17:48
@SkyCoder01 hey thanks lml
CamperBot
@camperbot
Feb 10 2017 17:48
volkranium sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 169 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Ctiller93
@Ctiller93
Feb 10 2017 17:53
So, I currently have a function that calls another function that calls another function. If I have a callback in the first function, shouldn't it execute only after the last function in the chain is finished, or are there some exceptions to that rule?
Tyler Moeller
@TylerMoeller
Feb 10 2017 18:00
@Ctiller93 I'm not an expert at this, but the callback should run in your first function as soon as it's called unless you tell it to wait with a setTimeout, Promise, etc. Like in a getJSON, it waits for the API call to complete before invoking the callback function
getJSON uses Promises behind the scenes
Ctiller93
@Ctiller93
Feb 10 2017 18:01
Huh, so the function starts, and the callback runs at the same time then unless otherwise specified?
Or wait, I think I'm reading that wrong.
Tyler Moeller
@TylerMoeller
Feb 10 2017 18:03
@Ctiller93 What are you trying to do? Maybe a solution to the problem will help it make more sense.
einsteinIam
@einsteinIam
Feb 10 2017 18:04
I am trying to link my nav links to certain locations on the page. How do I do that?
Ctiller93
@Ctiller93
Feb 10 2017 18:04
I'm working on the weather project and I have a bunch of functions within functions.
I found out after the fact that I wanted some of the data that showed up in a later function, and was trying to find a way to pull that out. The method suggested to me was to declare a global variable.
So I did, but when I console.log the variable it outputs null instead of the information I placed in it in one of the later functions.
Buuuuut it turns out if I console.log it after the fact, the data is right where I want it.
So I'm mostly just trying to figure out how I can get it to output while the script is actually running, as opposed to having to wait.
taltmann42
@taltmann42
Feb 10 2017 18:06
@Ctiller93 how would you get output when the data isn't there yet?
Ctiller93
@Ctiller93
Feb 10 2017 18:07
Well, that's why I'm trying to understand what's going on. I have something like this right now:
$(document).ready(function(){

  //Calling the getLocation function, only when the document is completed.
  $.when(getLocation()).done(function(){
    console.log('blank');
    console.log("this should be the finale!");
  });
});
  console.log(weatherParams.tempF);
  console.log("twice...");
  console.log("words!");
  console.log(weatherParams.tempF);
So from how I understand it, the document ready runs, but the console.logs on the outside run at the same time.
Which makes sense to me right now.
What kills me is the stuff after the getLocation function.
Tyler Moeller
@TylerMoeller
Feb 10 2017 18:09
If you use $.when(), you'll also have to return a deferred ($.Deferred)
or it won't resolve as expected
Ctiller93
@Ctiller93
Feb 10 2017 18:09
I see!
Let's try that out then...
Tyler Moeller
@TylerMoeller
Feb 10 2017 18:09
Fun project actually :)
einsteinIam
@einsteinIam
Feb 10 2017 18:09
I am trying to link my nav links to certain locations on the page. How do I do that?
Ctiller93
@Ctiller93
Feb 10 2017 18:10
I'm learning more from my screwups on this project than anything else, that's for sure. :P
It's like: "Oh hey, here's this really simple mistake."
"Now here's 50 pages of documentation to figure out that simple mistake"
I love it.
taltmann42
@taltmann42
Feb 10 2017 18:11
that's how you learn :P
Tyler Moeller
@TylerMoeller
Feb 10 2017 18:11
haha
Ctiller93
@Ctiller93
Feb 10 2017 18:11
I never said it was a bad thing. :)
Tyler Moeller
@TylerMoeller
Feb 10 2017 18:11
so true... and all the docs are written as if you have a masters degree in computer science :p
Ctiller93
@Ctiller93
Feb 10 2017 18:11
I'd be pretty unsatisfied if I didn't have hiccups that led to me learning crazy junk.
Johnny
@jtan3
Feb 10 2017 18:13
@bd1887 thanks
CamperBot
@camperbot
Feb 10 2017 18:13
jtan3 sends brownie points to @bd1887 :sparkles: :thumbsup: :sparkles:
:cookie: 336 | @bd1887 |http://www.freecodecamp.com/bd1887
Adam
@GoingAllTheWayUp
Feb 10 2017 18:15
anyone remember Counting Cards?
Is the input an array?
einsteinIam
@einsteinIam
Feb 10 2017 18:17
Help would be appreciated...
Johnny
@jtan3
Feb 10 2017 18:24
@einsteinIam <a href="(section you want)"></>
Johnny
@JohnnyBizzel
Feb 10 2017 18:25
I think he's done one
Tyler Moeller
@TylerMoeller
Feb 10 2017 18:34
Or you can wrap them in $.Deferred like:
$.when(firstFunction(2000), secondFunction(500)).then(function() {
  console.log('done')
});

function firstFunction(delay) {
  return $.Deferred(function(promise) {
    setTimeout(function() {
      console.log('First function completed with a delay of: ' + delay);
      promise.resolve();
    }, delay)
  });
}

function secondFunction(delay) {
  return $.Deferred(function(promise) {
    setTimeout(function() {
      console.log('Second function completed with a delay of: ' + delay);
      promise.resolve();
    }, delay)
  });
}
Ctiller93
@Ctiller93
Feb 10 2017 18:49

Woah. That's intense. Thanks @TylerMoeller !

I probably won't be using that method for this project and instead using my amateurish workaround, but I'mma be studying the heck out of it for sure.

CamperBot
@camperbot
Feb 10 2017 18:49
ctiller93 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1480 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
mustimuu
@mustimuu
Feb 10 2017 18:52
Hey
can someone help me out ?
my bootstrap class " <i class="fa fa-thumbs-up"></li> Like" wont work
i want that thumbs up in
somebody?
hello ? ... :D
Johnny
@jtan3
Feb 10 2017 18:55
@mustimuu did you add in the bootstrap?
mustimuu
@mustimuu
Feb 10 2017 18:55
yeh
want to see my code?

@jtan3 <div class="container">
<div class="row">

<div class="col-lg-12">
<h1 class="primary-text text-center"> Welcome to the sandwhich club </h3>
</div>

<h4 class="col-lg-12 text-center"> The sandwhich that saved my life
</h4>

</div>

<div class="row">
<div class="col-lg-12 text-center">

<div class="jumbotron">

<img class="sandwhich" src="http://www.cuisinebydesign.ca/wp-content/uploads/2014/07/sandwhich-300x271.png">
<div class="caption"> <p> Hey ! My name is mr. Sandwhich. Give me a like please or dislike me ! </p>
<button class="btn btn-block btn-primary" id="knap"><i class="fa fa-thumbs-up"></li> Like </button>

</div>

</div> 
     </div> 
   </div> 

</div> 

</div>

</div>

hang on, i will send link
Alot better for you mate. Sorry.
Just run the pen :)
no help to get here :(
Johnny
@jtan3
Feb 10 2017 19:00
you didn't add in bootstrap
click the settings in js and go to quick-add
Gulsvi
@gulsvi
Feb 10 2017 19:01
@mustimuu Look closely at your your closing tag for your icon code :)
and add font awesome to your project: https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css
This is a good refresher: https://www.freecodecamp.com/challenges/add-font-awesome-icons-to-our-buttons
Tyler Moeller
@TylerMoeller
Feb 10 2017 19:03
@Ctiller93 Good practice for me :) here's a pen to play around with: http://s.codepen.io/TylerMoeller/pen/bgQYQe
Ctiller93
@Ctiller93
Feb 10 2017 19:03
Awwwwww yeah. Saving it. :)
Yeah, my workaround does what I want it to, but not as elegantly as I would like for it to. It sort of relies on the fact that a human can't possibly press the button that fast unless they were trying to break it.
I definitely want to revisit this and other earlier projects when I learn a bit more/improve at the whole javascript thing.
mustimuu
@mustimuu
Feb 10 2017 19:12
@SkyCoder01 thank you man
CamperBot
@camperbot
Feb 10 2017 19:12
mustimuu sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 170 | @skycoder01 |http://www.freecodecamp.com/skycoder01
mustimuu
@mustimuu
Feb 10 2017 19:12
@SkyCoder01 was afk sorry mate.
mustimuu
@mustimuu
Feb 10 2017 19:19
@SkyCoder01 i still cant find the problem?
Gulsvi
@gulsvi
Feb 10 2017 19:22
@mustimuu You didn't add font awesome?
Johnny
@jtan3
Feb 10 2017 19:28
@mustimuu your <i> tag closes with an </li> tag
Jose Alejandro Jimenez Rosa
@ajimenezrosa
Feb 10 2017 19:30
Hello
mustimuu
@mustimuu
Feb 10 2017 19:31
i did
Gulsvi
@gulsvi
Feb 10 2017 19:31
I see animate and bootstrap in your CSS settings, but no font awesome
mustimuu
@mustimuu
Feb 10 2017 19:32
i did put it on the top of my htm
html
Gulsvi
@gulsvi
Feb 10 2017 19:32
At the top of your HTML, I see the Lobster font, but no font awesome
mustimuu
@mustimuu
Feb 10 2017 19:32
sec
works now
thank you guys
@SkyCoder01 thank you
CamperBot
@camperbot
Feb 10 2017 19:33
mustimuu sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:warning: mustimuu already gave skycoder01 points
mustimuu
@mustimuu
Feb 10 2017 19:33
i need help with some qjuery
can make it wor
work*
soundestmammal
@soundestmammal
Feb 10 2017 19:33
Hey just a general question here. I am building my first outside project. How do you jump down the screen when a user selects a button on my navbar? For example, the about section is below my jumbotron div, and when they select about i want it to jump down the page.
Jose Alejandro Jimenez Rosa
@ajimenezrosa
Feb 10 2017 19:34
I am trying to post my Work from Pomodoro Clock on CodePen but I have one javaScrip file aditional and I do not know How to Include this File on the page
Johnny
@jtan3
Feb 10 2017 19:36
@soundestmammal anchor tag to the section you want
mustimuu
@mustimuu
Feb 10 2017 19:36
uy
guys i want to make my likebutton toggle on click
But it doesent work
h1tag
@h1tag
Feb 10 2017 19:43
@mustimuu $("#button-id-name").on("click", function(){ //do something });
mustimuu
@mustimuu
Feb 10 2017 19:44
ahhh
@fortMaximus i dont get it
//do something. i want it to do something, but i still have to refer it to a html element?
Gulsvi
@gulsvi
Feb 10 2017 19:46
@mustimuu Have you done this challenge yet? https://www.freecodecamp.com/challenges/change-text-with-click-events
soundestmammal
@soundestmammal
Feb 10 2017 19:46
@jtan3 So anchor tag to the div? because it is one sheet
mustimuu
@mustimuu
Feb 10 2017 19:47
@SkyCoder01 no not really
@SkyCoder01 i dont have that one
Gulsvi
@gulsvi
Feb 10 2017 19:48
@mustimuu You should try it and read about it in the jQuery documentation
Johnny
@jtan3
Feb 10 2017 19:48
@soundestmammal yup. I usually add an id or class to the div so you can link to the class or id.
mustimuu
@mustimuu
Feb 10 2017 19:50
@SkyCoder01 thanks
CamperBot
@camperbot
Feb 10 2017 19:50
mustimuu sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:warning: mustimuu already gave skycoder01 points
Jake
@JakeDVirus
Feb 10 2017 20:06
Hey Guys! Needed help.
Why there appears a scrollbar at bottom if any content is being added after the section with .focus_part class. For instance i added another section beneath the section with .focus_partclass and the scrollbar showed up, remove this section and the scrollbar at bottom will disappear. Can anyone help me in this matter, it will be greatly appreciated
Try to view it in full screen mode, or else the bottom scrollbar will appear by default. moreover the page is not made respondive yet.
http://codepen.io/neel111/pen/ObKVBo
Tyler Moeller
@TylerMoeller
Feb 10 2017 20:14
@NeelDVirus The problem is using 100vw for the width of your sections when you have a vertical scrollbar taking up maybe 1-2vw. Use 100% for your section widths instead.
Jake
@JakeDVirus
Feb 10 2017 20:18
@TylerMoeller Hey You solved it man, it worked. Thanks a lot, it almost fried my brain hehe. btw nice to see you again!
CamperBot
@camperbot
Feb 10 2017 20:18
neeldvirus sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1481 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Feb 10 2017 20:23
@NeelDVirus no problem, good to see again too :+1:
soundestmammal
@soundestmammal
Feb 10 2017 20:24
@jtan3 thank you
CamperBot
@camperbot
Feb 10 2017 20:24
soundestmammal sends brownie points to @jtan3 :sparkles: :thumbsup: :sparkles:
:cookie: 301 | @jtan3 |http://www.freecodecamp.com/jtan3
Jake
@JakeDVirus
Feb 10 2017 20:31
@TylerMoeller when i replaced vw with percentage, i got my background image shrink upward. how will i get it stretch to the full screen
Tyler Moeller
@TylerMoeller
Feb 10 2017 20:33
@NeelDVirus Use background-size: cover; instead of 100% 100% or it will distort on smaller screen sizes. See this article for options: https://css-tricks.com/perfect-full-page-background-image/
You may need to play around with the background-position with media queries to get it the exact way you want.
Jake
@JakeDVirus
Feb 10 2017 20:36
OOps i am going to fix it in that way. thanks again :+1:
alican karalar
@alicankaralar
Feb 10 2017 20:37
@SkyCoder01 THANKS! :)ü
CamperBot
@camperbot
Feb 10 2017 20:37
alicankaralar sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 172 | @skycoder01 |http://www.freecodecamp.com/skycoder01
alican karalar
@alicankaralar
Feb 10 2017 20:38
i was trying a different approach then i just got bored and leaned on my bed and started to cry
jk
but was close
i tried creating html dynamically
probably did something wrong along 100+ lines of code
most of which are comments and empty lines of course
however i have to put it inside there so i get the flexbox working
i'll inspect
eswhy
@eswhy
Feb 10 2017 20:43
hello can someone help me change the color of the text of my navbar? or explain a better way to do than i currently am? selecting via id doesnt seem to be working https://codepen.io/eswhy/pen/mRxPpR
DarkoxD
@DarkoxD
Feb 10 2017 20:43
How do i remove link underline?
Gulsvi
@gulsvi
Feb 10 2017 20:45
@alicankaralar It was your hint from someone else in the other chat room about the html getting created dynamically that helped me figure it out. My twitch app is so ugly lol, don't know how I want to style it yet...but it's only 38 lines of code now :) going to be much more when I make it look nice I guess
@DarkoxD text-decoration: none;?
alican karalar
@alicankaralar
Feb 10 2017 20:46
yeeeh just get it working and the rest is easy :partly_sunny:
thanks by the way for taking the time
DarkoxD
@DarkoxD
Feb 10 2017 20:49
@SkyCoder01 does not work :/
Gulsvi
@gulsvi
Feb 10 2017 20:52
@DarkoxD Can you show your code?
DarkoxD
@DarkoxD
Feb 10 2017 20:52
@SkyCoder01 yeah
Adam
@GoingAllTheWayUp
Feb 10 2017 20:52
So I trying to lookup through an Object (https://www.freecodecamp.com/challenges/using-objects-for-lookups) and I seem to have run into a problem.
Gulsvi
@gulsvi
Feb 10 2017 20:52
I keep trying to finish my Twitch project, but this chat is more fun lol
DarkoxD
@DarkoxD
Feb 10 2017 20:53
When i add it it doesnt work i added it in a link css part
Gulsvi
@gulsvi
Feb 10 2017 20:53
@DarkoxD You want this <a> to have no underline?
<p class="links"><a href="#contact">Contact</a></p>
Adam
@GoingAllTheWayUp
Feb 10 2017 20:53

``` // Setup
function phoneticLookup(val) {
var result = "";

// Only change code below this line
var val = {
"alpha":"Adams",
"bravo":"Boston",
"charlie":"Chicago",
"delta":"Denver",
"echo":"Easy",
"foxtrot":"Frank",
};

// Only change code above this line
return result;
}

// Change this value to test
phoneticLookup("delta");```

says I already defined my variable val
DarkoxD
@DarkoxD
Feb 10 2017 20:54
@SkyCoder01 yes, and when i add decoration none in links class it does not do anything
@SkyCoder01 here it is when added http://codepen.io/DarkoxD/pen/MJPqVx
Gulsvi
@gulsvi
Feb 10 2017 20:57

@DarkoxD That would only change the text inside the <p> not inside the <a>, you need to do:

.links a {
  text-decoration: none;
}

I think .links > a would work too but not sure what the difference is, would have to look it up

DarkoxD
@DarkoxD
Feb 10 2017 20:59
@SkyCoder01 Works now, thanks for your time :D
CamperBot
@camperbot
Feb 10 2017 20:59
darkoxd sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 173 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Gulsvi
@gulsvi
Feb 10 2017 21:00
:)
Michael Scott
@MichaelScott50
Feb 10 2017 21:00
i am having trouble with codepen
anyone able to help?
I did my coding in sublime text and pasted it over and it all looked good, and now in code pen only some of my bootstrap classes are applied?
also code pen is so hard to use visually...
Brandon Carlino
@bacarlino
Feb 10 2017 21:02
@MichaelScott50 did you "quick add" bootstrap in the css settings?
Michael Scott
@MichaelScott50
Feb 10 2017 21:02
i did
so like the jumbotron works
and containers work
but other stuff doesnt
like text-center
but those work in a normal browser
Brandon Carlino
@bacarlino
Feb 10 2017 21:03
in the html screen of codepen, did you get rid of everything except for what's inside the <body> tags?
Michael Scott
@MichaelScott50
Feb 10 2017 21:03
i did
Brandon Carlino
@bacarlino
Feb 10 2017 21:03
Not sure what that would do if not...just brainstorming
Michael Scott
@MichaelScott50
Feb 10 2017 21:04
<div class = "jumbotron container">
<div class = "row"">
<div class = "col-xs-12 text-center">
<h1>Walt Witman</h1>
<p>Song of Myself</p>
<div class = "thumbnail">
<img src="https://static1.squarespace.com/static/507dba43c4aabcfd2216a447/t/52cc4d92e4b01ff2d6cbb8fb/1389120917810/Walt+Whitman.jpg" alt="Walt Whitman Photo">
<div class = "caption">"And your very flesh shall be a great poem."
</div>
</div>
</div>
<div class = row>
<div class = "col-md-5 col-md-offset-4">
<h2>Works of Walt Witman</h2>
<p>
<ul></ul>
<li>Franklin Evans <strong>(1842)</strong></li>
<li>Leaves of Grass <strong>(1855, the first of seven editions through 1891)</strong> </li>
<li>Manly Health and Training <strong>(1858)</strong></li>
<li>Drum-Taps <strong>(1865)</strong></li>
<li>Democratic Vistas <strong>(1871)</strong></li>
<li>Memoranda During the War <strong>(1876)</strong></li>
<li>Specimen Days <strong>(1882)</strong></li>
</ul>
</p>
<p><em>“Pleasured equally
In seeking as in finding,
Each detail minding,
Old Walt went seeking
And finding.”</em></p>
<p><strong>― Langston Hughes</strong></p>
<h3>If you have time, you should read more about this incredible human being on his <a href="https://en.wikipedia.org/wiki/Walt_Whitman">Wikipeida Page</a></h3>
</div>
</div>
so here jumbotron works but not thumbnail
both work in a browser from sublime text
Brandon Carlino
@bacarlino
Feb 10 2017 21:05
i see 2 apostrophes in your first row class.... not sure if that's an issue
I'm fairly new too so don't lean on me too much lol
Michael Scott
@MichaelScott50
Feb 10 2017 21:06
oh maybe thats what's happening
Brandon Carlino
@bacarlino
Feb 10 2017 21:06
and no apostrophes on your second row
the row without apostrophes is definitely an issue
Michael Scott
@MichaelScott50
Feb 10 2017 21:07
that actually had no effect
Brandon Carlino
@bacarlino
Feb 10 2017 21:07
always helps to have a second set of eyes :)
Johnny
@jtan3
Feb 10 2017 21:07
post the codpen link
Johnny
@jtan3
Feb 10 2017 21:08
you did not link the bootstrap cdn
Michael Scott
@MichaelScott50
Feb 10 2017 21:08
maybe i did it wrong
Gulsvi
@gulsvi
Feb 10 2017 21:09
@MichaelScott50 In sublime text, what URL did you use for bootstrap? Compare that to the one in your codepen settings
All the links need to be identical for your page to look the same
Michael Scott
@MichaelScott50
Feb 10 2017 21:09
i used the one from getbootstrap
Brandon Carlino
@bacarlino
Feb 10 2017 21:09
using the quick add in settings has always worked for me...
Michael Scott
@MichaelScott50
Feb 10 2017 21:10
thats what i did
it shows in the css portion
Brandon Carlino
@bacarlino
Feb 10 2017 21:10
have you verified it's there?
use this for bootstrap instead
Gulsvi
@gulsvi
Feb 10 2017 21:11
using quick add in settings is screwing everyone up since they changed the version of bootstrap
Michael Scott
@MichaelScott50
Feb 10 2017 21:11
@fortMaximus that worked
h1tag
@h1tag
Feb 10 2017 21:11
the one that gets added on codepen by default is in alpha stage
Brandon Carlino
@bacarlino
Feb 10 2017 21:11
your first row is lacking a </div> i believe
Michael Scott
@MichaelScott50
Feb 10 2017 21:11
its all been cleared up
thanks everyone
Brandon Carlino
@bacarlino
Feb 10 2017 21:12
ok
Michael Scott
@MichaelScott50
Feb 10 2017 21:12
it was an issue with the version of bootstrap it automatically links
Gulsvi
@gulsvi
Feb 10 2017 21:12
And you're closing your <ul> before your <li> elements
<ul></ul>
      <li>Franklin Evans <strong>(1842)</strong></li>
Brandon Carlino
@bacarlino
Feb 10 2017 21:13
you also don't close your top div row before starting another row
Gulsvi
@gulsvi
Feb 10 2017 21:13
bugs :)
Michael Scott
@MichaelScott50
Feb 10 2017 21:13
it looks great now though
Brandon Carlino
@bacarlino
Feb 10 2017 21:13
Hey man, that's all that matters!
Gulsvi
@gulsvi
Feb 10 2017 21:14
If it looks good in your browser, it doesn't mean it looks good in everyone elses ;)
Michael Scott
@MichaelScott50
Feb 10 2017 21:14
well thats what i get for trying to knock it out in my 30 min lunch break
Gulsvi
@gulsvi
Feb 10 2017 21:15
Easy fixes, it looks great for 30 minutes
Walt Whitman (don't forget the 'h')
Michael Scott
@MichaelScott50
Feb 10 2017 21:20
thanks!
sublime text is so much easier to read!
codepen is so smushed :)
thanks for the help everyone
LemuelReyes
@LemuelReyes
Feb 10 2017 21:41
@MichaelScott50 you will love atom
Nothing special, but I made it
NathanMcSparran
@NathanMcSparran
Feb 10 2017 21:53
Nicely done, @thewmh
mustimuu
@mustimuu
Feb 10 2017 22:30
Hey cab someone help me?
Cant make my button slide up
NathanMcSparran
@NathanMcSparran
Feb 10 2017 22:33
Which button? The like and dislike buttons?
mustimuu
@mustimuu
Feb 10 2017 22:33
ye
:)
one of them.
yes*
NathanMcSparran
@NathanMcSparran
Feb 10 2017 22:35
If you're looking to animate them to have them slide up, check out http://www.w3schools.com/css/css3_animations.asp for a little tutorial
mustimuu
@mustimuu
Feb 10 2017 22:36
@NathanMcSparran i know. That is css animation.
But i only want to make it with jquery.
much easier
NathanMcSparran
@NathanMcSparran
Feb 10 2017 22:36
Oh gotcha, I'm no help then, lol. I've only used the standard css animations. Sorry!
mustimuu
@mustimuu
Feb 10 2017 22:38
well then you know standard css
But they did not show css animation in the exercise
mustimuu
@mustimuu
Feb 10 2017 22:58
hey
someone has time to check my code?
Johnny
@JohnnyBizzel
Feb 10 2017 23:02
@mustimuu No idea what you want to do.
mustimuu
@mustimuu
Feb 10 2017 23:03
sec
i want my like button to bounce
only with jquery
it should work but it doesent
Johnny
@JohnnyBizzel
Feb 10 2017 23:04
@mustimuu CSS animations
Johnny
@jtan3
Feb 10 2017 23:05
@mustimuu did you finish the jquery on fcc?
mustimuu
@mustimuu
Feb 10 2017 23:06
yes let me send my code
Johnny
@jtan3
Feb 10 2017 23:07
try codecademy jquery if you want to learn more
mustimuu
@mustimuu
Feb 10 2017 23:07
codeacademy is sht
only syntax
i allready know jquery
but this doesnt seem to work
Bryden Uyehara
@d0peU
Feb 10 2017 23:08
Hello, can anyone help me make my forms look more like the example portfolio? Right now the name, email address, etc. are just white boxes but I would like them to maybe just be lines
Johnny
@jtan3
Feb 10 2017 23:08
you didn't tell the click do anything
mustimuu
@mustimuu
Feb 10 2017 23:09
i did ?
told it to toggle and bounce

$( document ).ready(function() {
$( "#knap2" ).click(function() {
$( this ).toggle( "bounce", { times: 3 }, "slow" );
});

});

Gulsvi
@gulsvi
Feb 10 2017 23:10
@mustimuu You can use animate.css, they have examples on their github page. Maybe this will help give an idea: http://codepen.io/skycoder/pen/dNQKGN?editors=1010
Johnny
@JohnnyBizzel
Feb 10 2017 23:11
@SkyCoder01 :+1:
Gulsvi
@gulsvi
Feb 10 2017 23:12
Anything to keep me from completing twitch :) so much distraction here
mustimuu
@mustimuu
Feb 10 2017 23:12
skycoder
Gulsvi
@gulsvi
Feb 10 2017 23:12
but it's good to learn
mustimuu
@mustimuu
Feb 10 2017 23:12
animation css is a easy way around
but with animations css you cant put timer on things etc
thats why
hmm i see
but ye
it should do it
Gulsvi
@gulsvi
Feb 10 2017 23:14

@mustimuu You can change the duration of the animations in animate.css:

#yourElement {
  -vendor-animation-duration: 3s;
  -vendor-animation-delay: 2s;
  -vendor-animation-iteration-count: infinite;
}

and put the code in a function and call as many times as you want to animate multiple times

Or maybe that's what the iteration-count property is for?
Yeah, if you load it again, the dislike button now bounces 3 times
runnerbill75
@runnerbill75
Feb 10 2017 23:24
hello, I am working on a project using codepen, and have not figured out how to load image to my web page..
does codepen allow user to load images from external sources?
NathanMcSparran
@NathanMcSparran
Feb 10 2017 23:28
Yes, it does. I have rented a small server that I'm using to upload and link to images from. I've seen some people use images they've found from google images, etc. They link directly to those images as well.
runnerbill75
@runnerbill75
Feb 10 2017 23:32
Ok, this is what my code looks like: <img src="https://en.wikipedia.org/wiki/Louis_Zamperini#/media/File:Louis_Zamperini_at_announcement_of_2015_Tournament_of_Roses_Grand_Marshal.JPG"/>
runnerbill75
@runnerbill75
Feb 10 2017 23:34
ok thank you!
NathanMcSparran
@NathanMcSparran
Feb 10 2017 23:34
you're welcome
ADIL KARMOUZI
@mradil16
Feb 10 2017 23:42

Hi everyone . I don't know why jQuery doesn't work when I resize the browser, but it works fine, If I refresh the page.

$(window).bind("resize", listenWidth);

     function listenWidth( e ) {
        if ($(window).width() <= 992) {  

              $(".features > .col-md-2, .features > .col-md-10").addClass("center-block");

       }

        if ($(window).width() >= 1200) {  

              $("#section3 > .col-lg-6:nth-child(1)").css("text-align" , "right");
              $("#section3 hr").css("margin-right" , "0");

       }

       if ($(window).width() <= 1200) {  

              $("#section3 > .col-lg-6:nth-child(1)").css("text-align" , "center");
              $("#section hr").removeAttr("style").addClass("center-block");

       }
    }

    listenWidth();

especially this part of code :

 if ($(window).width() <= 1200) {  

              $("#section3 > .col-lg-6:nth-child(1)").css("text-align" , "center");
              $("#section hr").removeAttr("style").addClass("center-block");

       }

when I resize the browser, the <hr> stay aligned to the right instead of being centered

runnerbill75
@runnerbill75
Feb 10 2017 23:47
i have another question about using images in codepen, can i upload image stored on my own pc? I read it is good practice to resize image first then use in html as opposed to adjusting size in html...
Yevhen Diachenko
@EugeneDyachenko
Feb 10 2017 23:48
Hi all, please can check out my weather project. You see your local weather?
https://codepen.io/EugeneDyachenko/full/JEeGVG/
NathanMcSparran
@NathanMcSparran
Feb 10 2017 23:51
@EugeneDyachenko Sure do
runnerbill75
@runnerbill75
Feb 10 2017 23:52
Hi @NathanMcSparran did you see my other question?
Gulsvi
@gulsvi
Feb 10 2017 23:53
You can upload images to your github profile and access them from there. Create a repository with the name yourusername.github.io and click the "upload file" button. Then you can get them from https://yourusername.github.io/filename
NathanMcSparran
@NathanMcSparran
Feb 10 2017 23:53
@runnerbill75 Sorry, I missed it. I believe CodePen does let you store images on their server, but that's a paid feature.
I think @SkyCoder01 has a better solution though.
runnerbill75
@runnerbill75
Feb 10 2017 23:59
Thank you for your help @SkyCoder01
CamperBot
@camperbot
Feb 10 2017 23:59
runnerbill75 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 174 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Gulsvi
@gulsvi
Feb 10 2017 23:59
@runnerbill75
  1. go to https://github.com/new
  2. name it yourusername.github.io
  3. Select "Initialize this repository with a README"
  4. Click "Create repository"
  5. Go to your new repository and click "Upload Files"
    Access your files at https://yourusername.github.io/filename