These are chat archives for FreeCodeCamp/HelpFrontEnd

27th
Feb 2017
Jakumozo
@Jakumozo
Feb 27 2017 00:20
could someone help me? Why do I have an orange line on the top and on the left?
http://codepen.io/Kromel/pen/jBOLZK
Waqas Abbasi
@Waqas909
Feb 27 2017 00:22

Hello Can someone help.

var numbers = [0,".",3];

console.log(numbers.join("")+3);

I know this doesn't work because the " . " converts it into a string. How can i convert what it is in the numbers array so I can get output of 3.3

Alex
@alee216
Feb 27 2017 00:25
@Jakumozo Could you please clarify, I don't see an orange line
Waqas Abbasi
@Waqas909
Feb 27 2017 00:25
@moT01 Thank you
CamperBot
@camperbot
Feb 27 2017 00:25
waqas909 sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 535 | @mot01 |http://www.freecodecamp.com/mot01
Jakumozo
@Jakumozo
Feb 27 2017 00:29
@alee216 I mean I have an orange background and I want to have a green line in the middle, that comes from very left to very right, so that no orange color was on the sides
Daniel Aguila
@MxLooney
Feb 27 2017 00:30
Hey guys I am confuse when I try to put nagivation inputs
```<html lang="en">
<head>
<meta charset="UTF-8">
<link href="style.css" rel="stylesheet" />
<title>Portfolio Collapsing Effect</title>
</head>
<body>
<div id="container">
  <header>
    <h1>Header</h1>
  </header>
       <ul>
   <li><a href="#Home">Home</a></li>
   <li><a href="#contact">Contact</a></li>
   <li><a href="#about">About</a></li>
</ul>
<div id="<banner">
  <h2>banner</h2>
  </div>
  <div id="content">
    <p></p>
  </div>
</div>

     </body>

</html>```
it only shows the option "About" but it does not show "Home" or "Contact"
Alex
@alee216
Feb 27 2017 00:32
@Jakumozo Sorry, but I don't see any background at all. The pen you linked only has HTML and JS, the CSS is empty
Daniel Aguila
@MxLooney
Feb 27 2017 00:32

```body {
text-align: center;
}
header {
heigh 100px;
background-color: lightblue;
width: 100%;
z-index: 10;
position: fixed;

}

banner {

width: 100%;
height: 500px;
position: fixed;
top: 100px;
background-color: darkblue;

}

content {

width: 100%;
position: relative;
top: 400px;
background-color: lightgray;
height: 1500px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;

}
li a {
display: block;
width: 60px;
}```

and that is the css
actually this is easier... (puting the portfolio)
Jakumozo
@Jakumozo
Feb 27 2017 00:33
@alee216 ohhh! sorry! I didnt save it :( my fault. could you have a look now?
Gulsvi
@gulsvi
Feb 27 2017 00:34

@MxLooney since your <header> has a position of "fixed" it is sitting on top of the Home/Contact links. Try this:

ul {
  list-style-type: none;
  margin: 0;
  padding-top: 50px;
}

Or, just use the navbar component in bootstrap: https://v4-alpha.getbootstrap.com/components/navbar/#nav

But even the bootstrap fixed navbar requires some padding added to the body I think - or the top 50-70px of your page will be hidden behind it
Daniel Aguila
@MxLooney
Feb 27 2017 00:35
@SkyCoder01 thank you, had forgotten that that can happen :)
CamperBot
@camperbot
Feb 27 2017 00:35
mxlooney sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 351 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Gulsvi
@gulsvi
Feb 27 2017 00:38
@Jakumozo That's the default margin from your browser. Open your settings in Codepen, Click "CSS", and the select the "Reset" radio button or "Normalize". You can also just use "margin: 0" on your body in CSS
Alex
@alee216
Feb 27 2017 00:38
@Jakumozo I could be wrong, but you could nest the layer 1 div inside a row and set the width of the div to 100%
Jakumozo
@Jakumozo
Feb 27 2017 00:39
@SkyCoder01 great! thank you! @alee216 thanks, the problem is solved!
CamperBot
@camperbot
Feb 27 2017 00:39
jakumozo sends brownie points to @skycoder01 and @alee216 :sparkles: :thumbsup: :sparkles:
:cookie: 120 | @alee216 |http://www.freecodecamp.com/alee216
:cookie: 352 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Zack Richardson
@ZackRich12
Feb 27 2017 00:41
Anyone have any good videos for learning the bootstrap grid system??
Alex
@alee216
Feb 27 2017 00:42
http://codepen.io/alee216/pen/gmpaOj?editors=1100 Hey guys, when I change the position of my header to "fixed" the header completely disappears, what can I do to resolve this?
Gulsvi
@gulsvi
Feb 27 2017 00:46
@alee216 It doesn't disappear for me, it just gets narrower. You can adjust the width in your CSS, but maybe I'm not seeing the same thing
Alex
@alee216
Feb 27 2017 00:53
@SkyCoder01 Really? I'm not seeing it at all. I can see that the element is still there in the inspector but it's not visibly showing up. And when I change the width, the element gets wider in the inspector, but its still not there
Jakumozo
@Jakumozo
Feb 27 2017 00:57
I am trying to vertically align a green div in the black one, I have used positions and display properties, but it does not work ( why?
http://codepen.io/Kromel/pen/jBOLZK
Is it possible to use somehow margin in they way it is margined relatively to an element's center?
Gulsvi
@gulsvi
Feb 27 2017 01:05
@alee216 Yeah, with width: 100% It works fine. Without that, it looks like:
image.png
Alex
@alee216
Feb 27 2017 01:07
@SkyCoder01 Gotcha, thanks! Is there a way to make the background image viewable in all browsers? I can see it when Im on chrome but not on safari
CamperBot
@camperbot
Feb 27 2017 01:07
alee216 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 353 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Gulsvi
@gulsvi
Feb 27 2017 01:08
@alee216 Hmmm, I don't have a background image in firefox either. I'll see if I can figure it out.
Alex
@alee216
Feb 27 2017 01:13
@SkyCoder01 Could it be a codepen issue?
Gulsvi
@gulsvi
Feb 27 2017 01:13
@alee216 I get a message that your URL has expired. Maybe try a different one?
Alex
@alee216
Feb 27 2017 01:14
@SkyCoder01 http://codepen.io/alee216/pen/gmpaOj How about this one?
Gulsvi
@gulsvi
Feb 27 2017 01:16
@alee216 Nothing in either firefox or chrome for me...
Alex
@alee216
Feb 27 2017 01:16
@SkyCoder01 Hmmm that is weird
@SkyCoder01 should I put the image url into a background attribute or a background-image attribute?
Gulsvi
@gulsvi
Feb 27 2017 01:17
That URL also leads me to a page that says This URL is invalid or has expired.
@alee216 Try it with CSS like this (I used a different image because yours won't display for me):
  background: url('https://placehold.it/800'), linear-gradient( rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25) );
  background-image: url('https://placehold.it/800');
That shows the image for me on both Firefox and Chrome
alexnowak06
@alexnowak06
Feb 27 2017 01:22
how do i get help on building out a tribute page?
Ive only been coding for a few weeks now and it just wants me to write my own code for a tribute page?
I dont need someone to do it for me but i dont even know where to start haha
Alex
@alee216
Feb 27 2017 01:25
@SkyCoder01 for some reason, when I do that, the linear gradient effect goes away
Gulsvi
@gulsvi
Feb 27 2017 01:27
@alee216 I'm not sure..I think the picture is just covering it.
:(
Alex
@alee216
Feb 27 2017 01:27
@alexnowak06 I felt the exact same way last week, you kind of just start with what you know and build off of that. Like you get a mental picture of what you want to do, and try to get it there, and whatever you don't know you could either look back on the lessons or ask here!
Albert L. C.
@sirus3020
Feb 27 2017 01:28
guys. anyone know about image carousels?
Alex
@alee216
Feb 27 2017 01:29
@SkyCoder01 Yeah, that would make sense, is there another way to apply a darkening effect to the image?
Gulsvi
@gulsvi
Feb 27 2017 01:30
Just not sure how to do it with a linear-gradient...
Alex
@alee216
Feb 27 2017 01:36
@SkyCoder01 I think I found the issue: some images do not show up in safari when they meet specific requirements (did not really look to see what those were yet), and Firefox would only work if the -moz vendor prefix is added
alexnowak06
@alexnowak06
Feb 27 2017 01:44
@alee216 did you end up finishing the tribute page!?
thats pretty impressive if you did and know as little as i do
Alex
@alee216
Feb 27 2017 01:45
@alexnowak06 I did! It doesn't look great by any means, but it really helped me get a feel for building something from the ground up
alexnowak06
@alexnowak06
Feb 27 2017 01:50
@alee216 ok im super excited to give it ago.. Ill start with the header... lol
Icah Banton
@remdata
Feb 27 2017 02:16
Hello. Can some please tell me why I am not getting 3 columns with the following:
Christoph Herr
@christophherr
Feb 27 2017 02:21
@remdata switch from bootstrap 4 alpha back to bootstrap 3
Icah Banton
@remdata
Feb 27 2017 02:23
@christophherr . How do I do that?
Christoph Herr
@christophherr
Feb 27 2017 02:24
Alternatively, change the bootstrap 3 classes to bootstrap 4 classes https://v4-alpha.getbootstrap.com/migration/#grid-system
Zack Richardson
@ZackRich12
Feb 27 2017 02:26
Anyone here used bootstrap studio??
Amit Patel
@AmitP88
Feb 27 2017 02:28
Hey guys, I have a plan for a mobile app game similar to candy crush, but it will also have an adventure game element with boss battles, and rpg elements as well. my training is in front end development, but I want to make this app in hopes that I can impress an employer for a job or internship. My question is, would it be feasable to create this app by myself or would it be a better idea to get some help and create a team that I can work with on this?
Icah Banton
@remdata
Feb 27 2017 02:31
@christophherr . Thanks
CamperBot
@camperbot
Feb 27 2017 02:32
remdata sends brownie points to @christophherr :sparkles: :thumbsup: :sparkles:
:cookie: 514 | @christophherr |http://www.freecodecamp.com/christophherr
Kent Saeteurn
@sansae
Feb 27 2017 02:37

Hi all, can anyone help me figure out how to split a div horizontally multiple times and have the splits stay within that one div?

I was able to do this for vertical splits, but I don't know how to do this horizontally. If anyone wants to help me figure this out, let me know and I'll set up a private chat with you. I'll also share a link to my pen. Thanks in advance

Sorin Ruse
@sorinr
Feb 27 2017 02:44
@sansae if u r using bootstrap use div class="row" and within it define divs class="col-xx-xx" for col-xx-xx read more here: http://getbootstrap.com/css/#grid
Sara
@skd726
Feb 27 2017 02:44
Hi guys. I"m making my portfolio page, does anyone know how to align my buttons on the right side of the page?
Johnny
@jtan3
Feb 27 2017 02:47
@skd726 do you mind linking your page?
Kent Saeteurn
@sansae
Feb 27 2017 02:52

@sorinr Hello Sorin, thank you for the response. I used class "row" within the div that I am performing my split on, but it didn't work.

Perhaps I should have been more clear. I'm actually performing a split of the div dynamically via javascript. Basically, the user clicks on a button and it splits the div in half, and if the user wants to split each half div in half, they click the button again, and if they want to split the other split divs, they click again, and so on... I got this to work vertically, but I don't know how to do this horizontally.

(the single div on my page, which looks like a square, is, itself, nested inside a div of class "col-xs-3"; I'm not sure how applying the column class to the inner div would help me with the horizontal split; I don't think it'll help)

CamperBot
@camperbot
Feb 27 2017 02:52
sansae sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1187 | @sorinr |http://www.freecodecamp.com/sorinr
Johnny
@jtan3
Feb 27 2017 02:56
@skd726 you didn't close your header tag
@skd726 i can't see your css anymore after i refreshed the page. i guess you saved your codepen.
@skd726 <div id="header" its not clsoed
Tien Anh Nguyen
@tienanh2007
Feb 27 2017 03:01
Hi, so I have a folder of html files and I want to serve them using express automatically, as in if I add another html file into that folder another page will be generate. I also want to know if I could modify the html file inside nodejs as in adding header and footer. How would I do it ?
Johnny
@jtan3
Feb 27 2017 03:01
joshfer2000
@joshfer2000
Feb 27 2017 03:04
http://codepen.io/joshfer2000/pen/QpbKdd In editor mode, my images are perfectly aligned and u can see the indicators or little buttons on my carousel. In full screen however, my indicators disappear because the image doesn't fit the page. Help would be appreciated.
c0d0er
@c0d0er
Feb 27 2017 03:28
@toianw thanks
CamperBot
@camperbot
Feb 27 2017 03:28
c0d0er sends brownie points to @toianw :sparkles: :thumbsup: :sparkles:
:cookie: 494 | @toianw |http://www.freecodecamp.com/toianw
Bashir Harrell
@bookofbash
Feb 27 2017 04:05
help/
help/
/help

// Setup
var myObj = {
gift: "pony",
pet: "kitten",
bed: "sleigh",

};

function checkObj(checkProp) {
// Your Code Here
if (myObj.hasOwnProperty){
return myObj[checkProp];
}
else return "Not found";

}

// Test your code by modifying these values
checkObj("house");

I cant get this to return "Not Found"
else {return "Not Found;
}
Ken Haduch
@khaduch
Feb 27 2017 04:07
@bookofbash - the .hasOwnProperty() method needs parentheses and a value inside of them - checkProp in this case.
Sara
@skd726
Feb 27 2017 04:08
@jtan3 thanks!
CamperBot
@camperbot
Feb 27 2017 04:08
:cookie: 321 | @jtan3 |http://www.freecodecamp.com/jtan3
skd726 sends brownie points to @jtan3 :sparkles: :thumbsup: :sparkles:
Ken Haduch
@khaduch
Feb 27 2017 04:09

@joshfer2000 - I commented out all of the classes that you have for the various named images, and just changed your selector that you defined to this:

#myCarousel img {
margin: 0 auto;
  height: 80vh;
}

Adding that height property changes the percentage of the viewport height that is used. See if that works for what you need?
But you have to take out those classes that are setting the widths to make it work the way I'm seeing it. The .josh, .daniel, etc.

Bashir Harrell
@bookofbash
Feb 27 2017 04:10
@khaduch Wow that is exactly what I was missing. I went to sleep on it last night. Woke up today with fresh eyes, and still couldn't figure it out. Thanks.
CamperBot
@camperbot
Feb 27 2017 04:10
bookofbash sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2545 | @khaduch |http://www.freecodecamp.com/khaduch
Jean Marco Romero
@volkranium
Feb 27 2017 04:17
why does my main page height shrunk? http://codepen.io/anon/pen/OpVbbx
Ken Haduch
@khaduch
Feb 27 2017 04:17
@bookofbash - it is always a good idea to follow the links that they have in the lessons for some of those methods, or to google "MDN hasOwnProperty" and go to the Mozilla Developer Network and read up on the methods. Even though I've been getting used to these, I frequently go and check the documentation because I'm getting old and I forget things too quickly! But I was happy to help...
@volkranium - what do you mean? I don't understand what problem you are asking about? I think that the page looks great, but I don't know what you are expecting.
Jean Marco Romero
@volkranium
Feb 27 2017 04:21
@khaduch its supposed to be 100% height
Ken Haduch
@khaduch
Feb 27 2017 04:21
@volkranium - which part? Each section?
Jean Marco Romero
@volkranium
Feb 27 2017 04:22
just .main-page section , check my website and youlls see what im talking about , the link is on my bio
SuryaKavutarapu
@SuryaKavutarapu
Feb 27 2017 04:37
@volkranium make .main-page c lass height to 100vh (visual height) ie. it will automatically adjust height based on screen height
Ken Haduch
@khaduch
Feb 27 2017 04:39
@volkranium - I cannot get a full-page view in CodePen right now - it seems that they are doing some site maintenance? You do have differences between your website and the CodePen page, though, correct? There are social icons on the top of the CodePen page, your image isn't there, your navbar doesn't drop down? Looks like you have bootstrap loading on your website, not on CodePen? (Although I just added them - I thought that maybe it would make the navbar work? It didn't seem to) You also have some relative addresses for things like <img src="img/project1.jpg" alt=""> that aren't going to work. Maybe some missing javascript? Like "app.js"? Oh, and I see that you are loading jquery.js near the footer... I think that there are just things that you have missing on CodePen?
Jean Marco Romero
@volkranium
Feb 27 2017 04:40
@SuryaKavutarapu @khaduch http://codepen.io/anon/pen/OpVbbx Got it
@khaduch yes imma fix the url thing..thanks.
CamperBot
@camperbot
Feb 27 2017 04:41
volkranium sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2546 | @khaduch |http://www.freecodecamp.com/khaduch
Jean Marco Romero
@volkranium
Feb 27 2017 04:41
Do you guys have any tip on what to put in your portfolio??
Ken Haduch
@khaduch
Feb 27 2017 04:44
@volkranium - I don't know what you should put in there - it's such a great page, you must have some projects that you've worked on? You could always put freeCodeCamp projects on there if you have them - but you might already have some other great things. I guess for the freeCodeCamp version, you might want to highlight some of the projects?
Jean Marco Romero
@volkranium
Feb 27 2017 04:46
@khaduch not really this is my first big thing ive focused on
@khaduch ive never worked in any project for client
Ken Haduch
@khaduch
Feb 27 2017 04:47
Oops - one thing that I see that you might be able to adjust is when your sections scroll up, the headings scroll under the navbar? Maybe add a little margin-top or padding-top to the sections?
SuryaKavutarapu
@SuryaKavutarapu
Feb 27 2017 04:47
my best suggestion for your portfolio. don't use bootstrap or someother frameworks. for custom design becasue ur ideation may differ from their grid system or other components they might confuse u a bit in code. Hand Code every thing in css that might be a greate thing for you to learn more code @volkranium
Jean Marco Romero
@volkranium
Feb 27 2017 04:48
@khaduch hmm , imma substract the nav height with jquery
Ken Haduch
@khaduch
Feb 27 2017 04:48
@volkranium - well, with work like this page, you'll probably come up with some great projects through doing the freecodecamp projects - you have a good design style!
gmr90
@gmr90
Feb 27 2017 04:48
blob
any one facing the same problem for signup ?
any alternatives
Jean Marco Romero
@volkranium
Feb 27 2017 04:50
@SuryaKavutarapu Yes I agree , i only use bootstrap when i want to use their grid system. I always learn to do things with html, css and js before using frameworks.
@SuryaKavutarapu I saw your website , great animation and design !! im currently sharpening my animation skills.
@khaduch thanks Ken , i check out the fcc projects.
CamperBot
@camperbot
Feb 27 2017 04:53
volkranium sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:warning: volkranium already gave khaduch points
SuryaKavutarapu
@SuryaKavutarapu
Feb 27 2017 05:07
thank you @volkranium and you said u use bootstrap only for grid system. then go with skeleton css it's only grid system with no other components or I created my own grid system based on flex box if you like take a look , https://github.com/SuryaKavutarapu/flexboxgrid.css/blob/master/css/flexgrid.auto.css
CamperBot
@camperbot
Feb 27 2017 05:07
suryakavutarapu sends brownie points to @volkranium :sparkles: :thumbsup: :sparkles:
:warning: @volkranium's account is not linked with freeCodeCamp. Please visit the settings and link your GitHub account.
Niichie
@Niichie
Feb 27 2017 05:57
So are we supposed to have learned enough to do the porfolio page without looking at the source code at all D:
Stephen
@stephepush
Feb 27 2017 06:26
Well you have to go and find the answers to all of your questions on your own
you can use bootstrap for some of the stuff you probably want to do with your portfolio
look through the bootstrap documentation
Niichie
@Niichie
Feb 27 2017 06:55
So were allowed to use CSS that this hasn't taught us correct, or should we focus on using bootstrap.
aims-khan
@aims-khan
Feb 27 2017 07:22
hello guyz
I did'nt get any thing what the freecodecamp says about the task "Show local weather"
can any one help me, my problem is that there is no sample site given for this as it is given for previous tasks
1. Objective
@Niichie You are allowed and enforced to use whatever fits you for the portfolio page. You can look for information all over the internet.
aims-khan
@aims-khan
Feb 27 2017 07:28
okay thanks alot @Niichie , @alpox
CamperBot
@camperbot
Feb 27 2017 07:28
aims-khan sends brownie points to @niichie and @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 120 | @niichie |http://www.freecodecamp.com/niichie
:cookie: 807 | @alpox |http://www.freecodecamp.com/alpox
Ad17T
@Ad17T
Feb 27 2017 08:17
Hello !! Please take a look at my project. Can you tell if it's good?
Thanks
My project link:
http://codepen.io/Kascooo/pen/vxEZLa
Johnny
@jtan3
Feb 27 2017 08:22
@Ad17T that's pretty good
@Ad17T i've been trying to add the banner picture as the background but haven't figure it out
Ad17T
@Ad17T
Feb 27 2017 08:25
where?
Johnny
@jtan3
Feb 27 2017 08:26
https://wind-bow.gomix.me/twitch-api/channels/OgamingSC2 if you look under video_banner there's a img
i just don't know how to add it
@Ad17T i think you could have used an array for your accounts and looped through it
Ad17T
@Ad17T
Feb 27 2017 08:28
you can create a img element in html, then write this code in javascript:
document.getElementById("the_id_of_the_image").src = "the url of the banner";
Johnny
@jtan3
Feb 27 2017 08:28
other than that, it looks cool
Ad17T
@Ad17T
Feb 27 2017 08:28
okay, thanks :) i will improve it
i was seeing if could combine it with my append
Darcy Coffman
@DarcyCoffman
Feb 27 2017 08:30
Does anyone know how to put a form and a paragraph next to each other?
Ad17T
@Ad17T
Feb 27 2017 08:30
hmm...
your app looks so good johnny :+1:
Johnny
@jtan3
Feb 27 2017 08:30
i need to redesign it. looks ugly currently
Ad17T
@Ad17T
Feb 27 2017 08:31
i personally like it, i think that with a good background image it will look better
Johnny
@jtan3
Feb 27 2017 08:33
i want to add their individual video banner instead of the teal background
just trying to figure that out at the moment
Ad17T
@Ad17T
Feb 27 2017 08:34
hmmm... good, i suggest you to ask the campers in the main chat, they always help me
The FreeCodeCamp/FreeCodeCamp chat
Johnny
@jtan3
Feb 27 2017 08:36
@DarcyCoffman ill try to help if you can post your page
its definitely a work in progress :)
Alwin George
@siliconchild
Feb 27 2017 08:58
Guys I'm passionate about making a tiny dent in our education system. I'm from India and afer learning html and css from freecodecamp i set out to create a Website that provides information on Homeschooling and Alternative Schools. I'm trying to incorporate user ratings for schools. The website i made is a static website and i don't know anything about php and mysql. What is the fastest way in which i can incorporate user ratings and launch the webiste as soon as possible
devpaaji
@devpaaji
Feb 27 2017 09:33
Fabio Di Pane
@saylos
Feb 27 2017 09:49
hi guys, finaly I figure out how make it work the asyncronous requests in my code, but I'm having this kind of issue, chrome console says: "Mixed Content: The page at 'https://s.codepen.io/saylos/debug/EZJwap/LQMExPYeqezk' was loaded over HTTPS, but requested an insecure image 'http://codepen.io/saylos/debug/EZJwap/auth'. This content should also be served over HTTPS."
https://codepen.io/saylos/pen/EZJwap?editors=1010
pls help
Aftab Parvez
@aftabparvez
Feb 27 2017 09:51
http://codepen.io/aftabparvez/pen/MpwmxN Can someone help me push the menu out of the viewport without being visible. I have alreay tried adding the display: none property to the class, however, it cancels the animation for some reason.
Matthew
@Krimsonmedic
Feb 27 2017 09:52
oh the twitch API project...in the array of data returned by the API... what does mature mean? is that if they are streaming or not?
Dany Din
@danydin
Feb 27 2017 10:07
@christophherr optinos filed
Fabio Di Pane
@saylos
Feb 27 2017 10:21
@Krimsonmedic not, beacause if you check on an online channel, eg. ESL_SC2, mature is still false. But actually I don't know what it is.
Matthew
@Krimsonmedic
Feb 27 2017 10:30
@saylos yeah... I think I'm just going to have to use the /stream call..and if it's null, show offline...else show what's streaming
Clyde Lobo
@oppiniated
Feb 27 2017 10:31
@Krimsonmedic mature content : Adult content
Matthew
@Krimsonmedic
Feb 27 2017 10:32
ah
makes senses
if (streaming === null){$("#freecode").html(Offline);}
else
{$("#freecode").html(streaming);}
Fabio Di Pane
@saylos
Feb 27 2017 10:32
@Krimsonmedic yep, and remember that there's the 3rd possibility, that the channel doesn't exist or has been closed
Matthew
@Krimsonmedic
Feb 27 2017 10:33
crap...
Fabio Di Pane
@saylos
Feb 27 2017 10:34
@Krimsonmedic you have to work on that, it's better a loop that checks all the channels in your array
Dany Din
@danydin
Feb 27 2017 10:38
can someone review my code on line 12 i forgot how to look for the description instead of the value property
http://plnkr.co/edit/fgULtyIr8D7ERB15jrPA?p=preview
Matthew
@Krimsonmedic
Feb 27 2017 10:39
but how would I incorporate a json api call into that loop. Wouldn't it have to be like function "blank" for (x=0; x< channels; x++) and then the api call?
Fabio Di Pane
@saylos
Feb 27 2017 10:52
@Krimsonmedic that way you can't have infos on the channels. You incorporate the json request and jquery code into the loop. I'm working on it too so I can't tell you more, I'm experiencing other kind of issues :)
elad ben aderet
@eladonline
Feb 27 2017 10:58
how to write $.getJASON("url",function) in codepen ? it dosent seem to work for me
alpox
@alpox
Feb 27 2017 11:01
@eladonline its called $.getJSON - maybe thats why :-)
Matthew
@Krimsonmedic
Feb 27 2017 11:05
can you call two api's with one JSON call
Marianissimus
@Marianissimus
Feb 27 2017 11:07
@Krimsonmedic you can nest one call inside the other, as far as I know...
Mhiel Napoles
@mhiel063
Feb 27 2017 11:08
please help :( my image are on the left side when its on full screen. It starts to go in the center when i resize my screen. What should i do?
Marianissimus
@Marianissimus
Feb 27 2017 11:09
@mhiel063 where's your code?
Mhiel Napoles
@mhiel063
Feb 27 2017 11:11
<div class="container">
<div class="row">
<div class="col-xs-12">
<!-------------------------------------------------div1-------------------------------------------->
<!------------bro eli icon-------------->
<div>
<img class="img-fluid" src="https://scontent.fmel3-1.fna.fbcdn.net/v/t1.0-9/13754559_1147787835259395_7679448441226156134_n.jpg?oh=ac63009b4ea178a1922ac0d389c949b5&oe=5945DC21" alt="img1">
</div>
<div>
<h1> Sample 1 </h1>
</div>
<!-------------------------------------------------div2------------------------------------------>
<div>
<img class="https://scontent.fmel3-1.fna.fbcdn.net/v/t1.0-9/13754559_1147787835259395_7679448441226156134_n.jpg?oh=ac63009b4ea178a1922ac0d389c949b5&oe=5945DC21" alt="img2">
</div>
<!--bro eli image 2-->
<div>
<img class="img-fluid" src="https://scontent.fmel3-1.fna.fbcdn.net/v/t1.0-9/13754559_1147787835259395_7679448441226156134_n.jpg?oh=ac63009b4ea178a1922ac0d389c949b5&oe=5945DC21" alt="img3">
</div>
<!--bro eli image 3-->
<div>
<img class="img-fluid" src="https://scontent.fmel3-1.fna.fbcdn.net/v/t1.0-9/13754559_1147787835259395_7679448441226156134_n.jpg?oh=ac63009b4ea178a1922ac0d389c949b5&oe=5945DC21" alt="img3">
</div>
</div>
</div>
</div>
Marianissimus
@Marianissimus
Feb 27 2017 11:14
@mhiel063 they are centered, just make sure you properly add bootstrap in your html
Mhiel Napoles
@mhiel063
Feb 27 2017 11:16
thanks :)
Marianissimus
@Marianissimus
Feb 27 2017 11:17
you're welcome
unicorncaterpillar
@unicorncaterpillar
Feb 27 2017 11:18
hello i need help
Matthew
@Krimsonmedic
Feb 27 2017 11:19
@Marianissimus nesting worked, i don't know why I forgot that..that's what I did for the weather api
Marianissimus
@Marianissimus
Feb 27 2017 11:20
@Krimsonmedic yeah, nesting works. However it's not an elegant solution, since you'll end up with a lot of code. I can't get around the promises and callbacks yet for a more elegant solution... :(
Matthew
@Krimsonmedic
Feb 27 2017 11:22
cluttered and working > elegant and not working
Marianissimus
@Marianissimus
Feb 27 2017 11:25
@Krimsonmedic :) not working yet, but I guess we have to learn them, eventually. c'est la vie...
Conrad
@conradOU
Feb 27 2017 11:30
style="margin-bottom: 20px" if I write something like that - will it be responsive - mobile devices etc. or is it better to use something else e.g. bootstrap?
Marianissimus
@Marianissimus
Feb 27 2017 11:33
@conradOU you can style it to make it responsive, but you need a lot more than margin-bottom. you need media querries, adaptive images, and many others
Aman saxena
@neille2406
Feb 27 2017 11:35
blob
how to get the images and text below it in one line?
can anyone help me?
Conrad
@conradOU
Feb 27 2017 11:39
@Marianissimus thanks
CamperBot
@camperbot
Feb 27 2017 11:39
conradou sends brownie points to @marianissimus :sparkles: :thumbsup: :sparkles:
:cookie: 356 | @marianissimus |http://www.freecodecamp.com/marianissimus
Marianissimus
@Marianissimus
Feb 27 2017 11:41
@neille2406 I don't think anyone can help you with only a screenshot. we need to see some code. and i don't really know where the problem is...
@conradOU you're welcome
Mhiel Napoles
@mhiel063
Feb 27 2017 12:02
may I ask what is the difference between the class="row" and the class="col"
alpox
@alpox
Feb 27 2017 12:11
@mhiel063 You usually wrap cols into rows - rows are stacked vertically where cols stack horizontally
col = column
Aman saxena
@neille2406
Feb 27 2017 12:26
@Marianissimus never mind i got it
Icah Banton
@remdata
Feb 27 2017 13:04
Hello. What do you use to avoid using coding endless div's to layout a page?
alpox
@alpox
Feb 27 2017 13:08
@remdata Its quite usual to need that. If you want to avoid it as much as possible, you have to try hard with own css and not with bootstrap
Icah Banton
@remdata
Feb 27 2017 13:12
@alpox . thanks.
CamperBot
@camperbot
Feb 27 2017 13:12
remdata sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 812 | @alpox |http://www.freecodecamp.com/alpox
Matthew
@Krimsonmedic
Feb 27 2017 13:19
ok, so.... every time I add this code var status= data.stream.game;
it makes the rest of my code stop working
its the twitch api challenge
wut do
h1tag
@h1tag
Feb 27 2017 13:27
@Krimsonmedic check the console
Matthew
@Krimsonmedic
Feb 27 2017 13:32
nothing
no errors
h1tag
@h1tag
Feb 27 2017 13:33
Can you give your pen link?

$.getJSON(apiChannel0, function(data){
var error = data.error;

 if (error == "Not Found"){$("#freecode").html(error)};

$.getJSON(apiStream0, function(data){

var streaming= data.stream;
var statu= data.stream.game;
this part
that's not the right channle, but still
h1tag
@h1tag
Feb 27 2017 13:38
I'm getting this error: TypeError: data.stream is null on line 57
did you check the browser console?
(not the codepen console)
Matthew
@Krimsonmedic
Feb 27 2017 13:43
i was looking at the codepend one
h1tag
@h1tag
Feb 27 2017 13:43
because the value of stream is null
Matthew
@Krimsonmedic
Feb 27 2017 13:43
it's going to be null if they aren't streaming
h1tag
@h1tag
Feb 27 2017 13:44
I meangame
because when the stream is null, there's no key called game
line 27 in the editor
js editor*
and you're trying to access game when the stream is null
Matthew
@Krimsonmedic
Feb 27 2017 13:57
So... how do I access the game that they are playing, if it's screw everything up if they aren't actually playing anything
h1tag
@h1tag
Feb 27 2017 14:00
read the documentation for the API, I'm not sure which one, maybe channels instead of streams in the URL
Matthew
@Krimsonmedic
Feb 27 2017 14:01
yeah, i'm looking through a live channel and one that's offline.. looks like they both have status.
ty
lmlicerio
@lmlicerio
Feb 27 2017 14:26
I want to include caption in the image which I added the class for it class="caption text-center" but I want to separate the caption from the actual information. I tried a div element but it's still coming up with the caption... I'm On he tribute page
Christoph Herr
@christophherr
Feb 27 2017 14:57
@danydin You can access it with the options element. https://msdn.microsoft.com/en-us/library/ms535877(v=vs.85).aspx
WiseKodama
@WiseKodama
Feb 27 2017 15:02
Can anyone tell me why I keep getting an error message of:"out of memory" when I try to run my code on FCC challenge INventory update
Anuj
@anuj2017
Feb 27 2017 15:03
so very basic web page but not sure what else I should add. Any suggestions http://codepen.io/Anujp2017/full/mRvQdp/
singleincome
@singleincome
Feb 27 2017 15:14
Morning
I'm trying to use flexbox to create a grid of four squares in my Portfolio DIV element. I have 1 giant box.. not sure how to turn it into a grid.
René
@RenevandenHeuvel
Feb 27 2017 15:23
Hi everyone, should every image in codepen have an jpg, png, (or something like that) extension?
kirbyedy
@kirbyedy
Feb 27 2017 15:24
@singleincome http://flexboxgrid.com/
René
@RenevandenHeuvel
Feb 27 2017 15:24
Because I can't upload photo's of foto stock sites.
singleincome
@singleincome
Feb 27 2017 15:25
@kirbyedy What's that :O
kirbyedy
@kirbyedy
Feb 27 2017 15:25
@singleincome you said you want to make a flexbox grid
I think you should use flex-basis
singleincome
@singleincome
Feb 27 2017 15:31
@kirbyedy Hm, doesn't solve the issue.
Got it :3
badalsaibo
@heyDante
Feb 27 2017 15:40
Does anyone use illustrator here?
ESLMiguel
@ESLMiguel
Feb 27 2017 15:42
you need to give a credit card number to sign up for cloud9???
alpox
@alpox
Feb 27 2017 15:44
@ESLMiguel Sadly, yes
ESLMiguel
@ESLMiguel
Feb 27 2017 15:45
@alpox thats absolutely insane
alpox
@alpox
Feb 27 2017 15:45
@ESLMiguel Its not exactly nice yea
I would prefer it without
But at least they didn't yet make the attempt to charge me something ^^
ESLMiguel
@ESLMiguel
Feb 27 2017 15:45
@alpox why hasnt the coding community burned them to the ground for such a shady move
alpox
@alpox
Feb 27 2017 15:46
@ESLMiguel Maybe because they are a too useful tool
ESLMiguel
@ESLMiguel
Feb 27 2017 15:46
so theyre just holding onto thousands of coders cc info?
Ken Haduch
@khaduch
Feb 27 2017 15:47
@RenevandenHeuvel - do you have an example? Typically images do have extensions like .jpg, etc.?
ESLMiguel
@ESLMiguel
Feb 27 2017 15:47
thats wild
kirbyedy
@kirbyedy
Feb 27 2017 15:47
@heyDante yes
badalsaibo
@heyDante
Feb 27 2017 15:48
@kirbyedy Cool. I'm just starting out. You have any guides for practical beginners new to designs and stuff.
kirbyedy
@kirbyedy
Feb 27 2017 15:48
@ESLMiguel its the amazon who wants to put the hand in your pocket, or at least to know your personal data :)
Ken Haduch
@khaduch
Feb 27 2017 15:48
@RenevandenHeuvel - some stock photo sites "hide" their images with different techniques - so it's hard to get to them, at least for the average user.
alpox
@alpox
Feb 27 2017 15:48
@ESLMiguel I'm not exactly sure if it used to be like this. I made my account some years ago and i cannot remember if i gave them my credit card. Nevertheless, i don't find any credit card on my account on c9
kirbyedy
@kirbyedy
Feb 27 2017 15:49
@heyDante pheh, well learn the tools, then check the youtube for some how to...
ESLMiguel
@ESLMiguel
Feb 27 2017 15:49
@kirbyedy so amazon owns c9?
kirbyedy
@kirbyedy
Feb 27 2017 15:49
yep
they bought them recently
ESLMiguel
@ESLMiguel
Feb 27 2017 15:49
that is so anti open community
badalsaibo
@heyDante
Feb 27 2017 15:50
@kirbyedy you professional.
Ken Haduch
@khaduch
Feb 27 2017 15:50
@ESLMiguel - amazon is open - to getting your credit card number... ;)
kirbyedy
@kirbyedy
Feb 27 2017 15:50
@heyDante https://www.google.com.cy/url?sa=t&rct=j&q=&esrc=s&source=web&cd=14&cad=rja&uact=8&ved=0ahUKEwiE5Y-60LDSAhXnNJoKHUTaCwcQtwIIVjAN&url=https%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DBTaH_Y5dSM0&usg=AFQjCNEpeapQUuVu5Tfxm1MUO-k01Vq98g&bvm=bv.148073327,d.bGs
@heyDante I dont consider myself professional, although I have been using adobe package for more than 15 years
at work
ESLMiguel
@ESLMiguel
Feb 27 2017 15:51
@khaduch I'm assuming I can do the entire FCC program without using c9, that's correct?
alpox
@alpox
Feb 27 2017 15:52
@ESLMiguel Correct
Ken Haduch
@khaduch
Feb 27 2017 15:53
@ESLMiguel - I don't know, I haven't gotten that far. What do they have you use it for? The Node.js part?
alpox
@alpox
Feb 27 2017 15:53
@ESLMiguel Except that noone can see what node stuff you do (serverside) not sure if they accept github
ESLMiguel
@ESLMiguel
Feb 27 2017 15:53
@alpox ok then not gonna worry about it. that was just quite a surprise
badalsaibo
@heyDante
Feb 27 2017 15:53
@kirbyedy Can I PM you for a brief second?
ESLMiguel
@ESLMiguel
Feb 27 2017 15:53
@khaduch back end stuff
kirbyedy
@kirbyedy
Feb 27 2017 15:54
ok
Ken Haduch
@khaduch
Feb 27 2017 15:54
@ESLMiguel - yeah, as @alpox said, it will be hard to show your work, but I'm not sure how the people who are interested in checking it (if they actually do, I mean through freeCodeCamp) will be able to see it.
ESLMiguel
@ESLMiguel
Feb 27 2017 15:55
I assumed they could see it through github, maybe I was wrong @khaduch
René
@RenevandenHeuvel
Feb 27 2017 15:55
Can somebody help me with this: Is there a simple way to upload pictures in codepen, or do you always have to download with the complete link?
Not all the links with images have an png extension and that's and then the picture can't be uploaded.
Ken Haduch
@khaduch
Feb 27 2017 15:56
@RenevandenHeuvel - if you pay for CodePen's premium service, you can upload. Otherwise you need a full url. You can use dropbox for your picture, or sites like postimg.org
kirbyedy
@kirbyedy
Feb 27 2017 15:56
@RenevandenHeuvel directly in codepen no, you have to host your images somewhere else, then link to your pen
alpox
@alpox
Feb 27 2017 15:56
@ESLMiguel They should be able to but maybe they are lazy to setup your environment locally to test it :D
René
@RenevandenHeuvel
Feb 27 2017 15:57
@khaduch that was what i am looking for, thanks as well @kirbyedy
CamperBot
@camperbot
Feb 27 2017 15:57
renevandenheuvel sends brownie points to @khaduch and @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 2547 | @khaduch |http://www.freecodecamp.com/khaduch
:star2: 1857 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
Ken Haduch
@khaduch
Feb 27 2017 15:58
@ESLMiguel - it's definitely a hurdle to have someone be able to examine your site if it isn't hosted somewhere - just reading code, or downloading it to their own system and running it probably won't fly. My experience with node.js is that you just cannot run it on a typical hosting service (using shared hosting) because of the resources that it uses - so that's a problem, too.
singleincome
@singleincome
Feb 27 2017 16:01

Hi, I have this css code:

.container img {
    position: aboslute;
    margin-left: -45px;
    margin-top: -15px;
    margin-right: 25px;
    width: 300px;
    border-radius: 85%;
    z-index: -1;
    float: left;
}

that manipulates the image in my first div. But.. it also manipulates all images on the page. What can I do to separate the first image from the image in the DIV titled Portfolio?

ESLMiguel
@ESLMiguel
Feb 27 2017 16:02
@khaduch looks like several of the back end lessons require c9 too. gonna have to investigate a bit more
singleincome
@singleincome
Feb 27 2017 16:02
I tried turning it into a class and applying it to the div/img but it didn't work.
Ken Haduch
@khaduch
Feb 27 2017 16:02
@singleincome - you can put a different class on it... but you just said that didn't work - it should?
ESLMiguel
@ESLMiguel
Feb 27 2017 16:02
not the end of the world to give them cc info, just somewhat shocking that they would require it (although less so, knowing that amazon bought them)
Ken Haduch
@khaduch
Feb 27 2017 16:03
@RenevandenHeuvel - you're welcome.
singleincome
@singleincome
Feb 27 2017 16:03
@khaduch Should I apply the class to the <img src = ""../> or the <div>?
ESLMiguel
@ESLMiguel
Feb 27 2017 16:03
anyways, thanks for the info @khaduch @alpox
CamperBot
@camperbot
Feb 27 2017 16:03
eslmiguel sends brownie points to @khaduch and @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 813 | @alpox |http://www.freecodecamp.com/alpox
:star2: 2548 | @khaduch |http://www.freecodecamp.com/khaduch
Ken Haduch
@khaduch
Feb 27 2017 16:05
@singleincome - I would say to the img element itself, since your "general" selector for images is what is affecting the image. It could also be a problem where your general selector is more specific than a class would be? Put the class on the image that you want to change, and don't write a selector that will select multiple images?
singleincome
@singleincome
Feb 27 2017 16:06
@khaduch Yeah, I think the issue is that I'm applying the "container" class to all of my divs. So the container img selector is going to manipulate any images in the subsequent containres
containers*
But if I adjust the container image and apply it as a class to just <img> then it breaks...
See here:
facepalm
Never mind I got it. Haha
Ken Haduch
@khaduch
Feb 27 2017 16:08

@singleincome - so make the class for your top-level image, and just apply it there. Remove the .container img selector because it will....

Strike that - you named your class .container-img and used .container-image in the img attribute... maybe you fixed that...

singleincome
@singleincome
Feb 27 2017 16:08
I thought the selector (container img) could be changed to .container-image and that would be enough. Had to remove container
Voila
Ken Haduch
@khaduch
Feb 27 2017 16:15
@singleincome - I don't think that there is a problem with naming the class .img, but that might be confusing somewhere down the line? Just might be a bit confusing to have a class with the same exact name as an HTML element? You should name it something like .header-image or something? It should work? But that's good that you got it working.
WiseKodama
@WiseKodama
Feb 27 2017 16:19
@Blauelf How would I do that? That would have to happen once I exit the inner for loop
Blauelf
@Blauelf
Feb 27 2017 16:21
@WiseKodama Wrong channel, also I'm not sure what you're referring to.
Martijn
@martinopino
Feb 27 2017 16:28
Hi all!
I sometimes forget to write all the necessary <div>'s on the top rows of my code so that I have to add one in a later stage. If this happens I still like to keep my code readable, so then each time I add a <div>, I manually push all the lines below 1 tab to the right.
However, if I have a lot of code below I have to go through many lines of code.
Is there a faster/automatic way to push all the lines below to the right?
Hope it's clear :-)
singleincome
@singleincome
Feb 27 2017 16:40
Ok y'all. I'm at a break-point -- feeling good. Does anyone want to provide feedback on my code so far? How it's written, formatting, etc. Would appreciate it!
David Castillo
@djames1109
Feb 27 2017 16:41
Hi Everyone. I need help, How can I add some attributes on the body tag in Codepen?
singleincome
@singleincome
Feb 27 2017 16:42
@djames1109 How do you mean? Using in-line styling or using css?

You could write a style sheet in css like so:

body {
}

That would effect the body element.

body {
background-color: tomato;
background-image: url("pictureofcat.jpg");
}
David Castillo
@djames1109
Feb 27 2017 16:43
@singleincome In HTML code itself. I wanted to add these things data-spy="scroll" data-target=".navbar" data-offset="50"
singleincome
@singleincome
Feb 27 2017 16:44
Can you link your codepen?
David Castillo
@djames1109
Feb 27 2017 16:45
@singleincome http://codepen.io/djames1109/pen/qrdyVP
Here, Thanks.
CamperBot
@camperbot
Feb 27 2017 16:45
djames1109 sends brownie points to @singleincome :sparkles: :thumbsup: :sparkles:
:warning: @singleincome's account is not linked with freeCodeCamp. Please visit the settings and link your GitHub account.
singleincome
@singleincome
Feb 27 2017 16:45
@djames1109 ugh Grave of the Fireflies :'(
Simon Bryatov
@SimonBryatov
Feb 27 2017 16:46
Guys, I'm coding ad codepen.io the random quote site. I have two pages with this project, which have the same code. One page shows .json message, another don't. What's wrong?
David Castillo
@djames1109
Feb 27 2017 16:46
Yeah. hahaha. I don't have projects to share, that's why I shared my favorite Ghibli movies instead. :D
Gulsvi
@gulsvi
Feb 27 2017 16:48
@SimonBryatov Do you know how to view messages in your browser's debug console?
On my computer, if I press Ctrl+Shift+J, I get to see error messages that don't show up in the codepen console
Simon Bryatov
@SimonBryatov
Feb 27 2017 16:49
Hmm, nope, but i'll try
Zhanibek
@zhann1982
Feb 27 2017 16:53
Hello, Everyone! Can someone help me with my twitch.tv project? Sometimes some logos of channels shift and move to the next channel's logo place. http://codepen.io/zhann1982/pen/jBEJdr
Simon Bryatov
@SimonBryatov
Feb 27 2017 16:53
Okay, i forgot to include jQuery, hahahaha
THanks
Gulsvi
@gulsvi
Feb 27 2017 16:53
@SimonBryatov You're welcome - glad you were able to figure it out!

@djames1109 Bootstrap 3 and Bootstrap 4 are not compatible with each other and you have both included in your project. Go into your codepen settings and choose one, and then make sure you're using the right HTML for that version.

Here's how I did scroll spy with bootstrap 3: http://codepen.io/skycoder/pen/KaYQoQ

I basically added this code to add the attributes to the <body> tag: $('body').attr('data-spy', 'scroll').scrollspy({target: '.navbar'});
David Castillo
@djames1109
Feb 27 2017 16:54
@SkyCoder01 Thank you so much.
CamperBot
@camperbot
Feb 27 2017 16:54
djames1109 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 354 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Gulsvi
@gulsvi
Feb 27 2017 16:55
No problem, good luck :+1:
Simon Bryatov
@SimonBryatov
Feb 27 2017 16:56
How to send brownies?
Gulsvi
@gulsvi
Feb 27 2017 16:57
@zhann1982 This one is tough to explain :) but the quick fix is to put your second ajax call inside the success function of your fist ajax call
Simon Bryatov
@SimonBryatov
Feb 27 2017 16:57
By the way
Gulsvi
@gulsvi
Feb 27 2017 16:57
You just say thanks to the person :cookie: :)
cbot explain brownies
CamperBot
@camperbot
Feb 27 2017 16:57
you called?
Simon Bryatov
@SimonBryatov
Feb 27 2017 16:58
@SkyCoder01 thanks!
CamperBot
@camperbot
Feb 27 2017 16:58
simonbryatov sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 355 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Simon Bryatov
@SimonBryatov
Feb 27 2017 16:58
Yeeeeeeeah
Gulsvi
@gulsvi
Feb 27 2017 16:58
LOL :) Now, how to get camperbot to explain :)
Simon Bryatov
@SimonBryatov
Feb 27 2017 16:58
Ahaha
Gulsvi
@gulsvi
Feb 27 2017 16:58
explain brownies
CamperBot
@camperbot
Feb 27 2017 16:58

freeCodeCamp Wiki:

:point_right: The freeCodeCamp wiki can be found on our forum.
Please follow the link and search there.
Gulsvi
@gulsvi
Feb 27 2017 16:58
lazy robot
Simon Bryatov
@SimonBryatov
Feb 27 2017 16:59
+1
Spyrantis Theodoros
@thodorisanta
Feb 27 2017 17:00
can you tell me why my pen is not working please?
https://codepen.io/oshikurou/pen/NpqLrN
singleincome
@singleincome
Feb 27 2017 17:00
Silly question -- not sure how to ask it correctly. But how do I specify where contact requests go with a contact form?
If someone wants to reach out to me through my website and they submit their email address... where does that information go O_o
Gulsvi
@gulsvi
Feb 27 2017 17:02
@singleincome I think you can have the contact form send all the info to an email address with a service
singleincome
@singleincome
Feb 27 2017 17:02
@thodorisanta Gotta figure out how to autoplay :trollface:
Gulsvi
@gulsvi
Feb 27 2017 17:03
I saw someone mention this here the other day: https://formspree.io/
singleincome
@singleincome
Feb 27 2017 17:04
@_@
Oh boy; but that gets into creating a database, maintaining a server, and all that jazz
Gulsvi
@gulsvi
Feb 27 2017 17:04
Don't know if I'd put my email address out there though...maybe the idea is to make it all work with your own server once you finish the back-end certification
With formspree, no database, server, etc. is needed, just a burner email address
singleincome
@singleincome
Feb 27 2017 17:05
Ya, taking a look now.
Storing other people's email addresses sounds kinda sketch...
But at least they only keep the 100 most recent form submissions...
Spyrantis Theodoros
@thodorisanta
Feb 27 2017 17:06
@singleincome i cant make it autoplay :/ i put the ?autoplay=1 in the end but it doesnt work :/
Zhanibek
@zhann1982
Feb 27 2017 17:06
@SkyCoder01 It didn't help
Gulsvi
@gulsvi
Feb 27 2017 17:07
@zhann1982 I'll take another look, it worked for me :/
Zhanibek
@zhann1982
Feb 27 2017 17:07
@SkyCoder01 I've removed second ajax from first ajax, because the result is same
Gulsvi
@gulsvi
Feb 27 2017 17:09
Okay, I should have hit "run" a couple more times - I see it works sometimes but not always
Annetta Ives
@IvesNoIdea
Feb 27 2017 17:10

Hi all, I've got an interesting little problem and I'm hoping you can help me with it.
It's over at my CodePen

As you can see, I'm working on the Twitch.tv API thing. I've set up a for loop to go through the array of channels and create a result <div> for each one, populating the first column of each row with the channel name, and establishing <div>s for the status (live / offline / not found) and summary (what they're streaming, of anything).

The first bit - populating the channel names - works fine. But once I call the API and try to populate the newly created status <div>, I'm getting an error in the browser console saying:

Error: Syntax error, unrecognized expression: #status${i}

Now, #status${i} is the <div> I just created earlier in the loop...so why can't I put anything into it?

David Castillo
@djames1109
Feb 27 2017 17:10
@SkyCoder01 I already did it. Thanks a lot. http://codepen.io/djames1109/pen/qrdyVP
CamperBot
@camperbot
Feb 27 2017 17:10
djames1109 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:warning: djames1109 already gave skycoder01 points
Zhanibek
@zhann1982
Feb 27 2017 17:11
@SkyCoder01 I think i should use only one ajax call. I 'll try that
Gulsvi
@gulsvi
Feb 27 2017 17:12
@zhann1982 I used getJSON, but put one inside the other.
I did it like this:
users.forEach(function(user) {

  var Url1 = 'First URL I used' + user,
      Url2 = 'Second URL I used' + user;

  $.getJSON(Url1, function(data1) {
    $.getJSON(Url2, function(data2) {

      if ( /* test for nonExistent User */ ) {
        // process nonexistent users
      } else if ( /* Test for Offline User */ ) {
        // process offline users
      } else {
        // process online users
      }

    });
  });
});
Gulsvi
@gulsvi
Feb 27 2017 17:17
@djames1109 Nice work - it looks good!
Zhanibek
@zhann1982
Feb 27 2017 17:22
@SkyCoder01 Using one ajax is wrong way :)
@SkyCoder01 let me try your method
Hey!!! What's wrong with codepen.io? There are some strange voices
Uros Tadic
@urketadic
Feb 27 2017 17:26
can someone tell me why player.stopVideo doesn't work on https://codepen.io/urketadic/pen/vxOKjV
I want the player not to play iframe youtube video unless i click on a button.
Tyler Moeller
@TylerMoeller
Feb 27 2017 17:44
@urketadic If you don't want to do anything when the youtube video is ready to play, remove the onReady event listener
Ken Haduch
@khaduch
Feb 27 2017 17:47
@urketadic - another thing that you can do, if it is automatically starting is to add &autoplay=0 to the URL.
Gulsvi
@gulsvi
Feb 27 2017 17:52
@fortMaximus That's a way to avoid having to do '#status ' + i they're called template literals. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
Martijn
@martinopino
Feb 27 2017 17:58
Hi guys, I'm working on a tribute page but I can't get my image to become responsive and remain within a container. Can anyone tell me what I should change about my code?
http://codepen.io/martinopino/pen/yMNjoo
h1tag
@h1tag
Feb 27 2017 17:58
@SkyCoder01 Thanks. Always here to help correct my mistakes ;) :) :p
CamperBot
@camperbot
Feb 27 2017 17:58
fortmaximus sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 357 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Surbhi Oberoi
@surbhioberoi
Feb 27 2017 17:58
@surbhioberoi
Hi, I created data visualization maps to highlight inequalities around the world, would love some feedback. https://equality.website
Here's the writeup https://medium.com/@thesurbhioberoi/the-equality-project-355fc3193377#.amssoonqa
Gulsvi
@gulsvi
Feb 27 2017 18:00
@fortMaximus lol, sorry :)
h1tag
@h1tag
Feb 27 2017 18:08
it's not a bad thing
Larry Hawkins
@HawkinsLJ
Feb 27 2017 18:11
hey all, is it me or does freecodecamp hockey stick in difficulty with the personal portfolio project?
ive been racking my brain looking at the examples PostCSS code.
Zack Richardson
@ZackRich12
Feb 27 2017 18:15
how do i place picture next to text using bootstrap grid??
Ken Haduch
@khaduch
Feb 27 2017 18:16
@martinopino - you are using Bootstrap v4, many things have changed. If you want to go back to v3, which is what the lessons are all about - go to your CSS config panel, delete the bootstrap that you have there. type a 3 in the textbox, and select the bootstrap link that comes up. Or visit the Bootstrap v4 documentation and find out what changed...
@HawkinsLJ - it is kind of a leap. This happens several times throughout the lessons.

@ZackRich12 - using Bootstrap V3 - which is not the current default for CodePen, you can do something like this:

<div class="row">
    <div class="col-md-6">
        <img src="your_url_here">
    </div>
    <div class="col-md-6">
        <p>Some text that you want</p>
    </div>
</div>

That should work for medium size screens and up - for smaller sizes, it will go to image over text. Your actual mileage may vary...
You can change to Bootstrap V3 in CodePen by going to the CSS panel, remove the Bootstrap V4 URL. In a blank text box in the config area, type a 3, and select the Bootstrap 3 link

Zack Richardson
@ZackRich12
Feb 27 2017 18:23
@khaduch if i want the image to be smaller and on the left i put it first and change "col-md-6" to 3 and the other to 9 right?
because it must sum up to 12??
Ken Haduch
@khaduch
Feb 27 2017 18:24
@ZackRich12 - yes, it will proportion the column widths differently with that setting. Any row should add up to 12, as you already know.
Zack Richardson
@ZackRich12
Feb 27 2017 18:26
@khaduch http://codepen.io/ZackRich12/pen/oZXQXW i want them to display on the same line, do i use inline??
Ken Haduch
@khaduch
Feb 27 2017 18:27
@HawkinsLJ - I don't know postCSS code - you probably should either go and learn about that elsewhere - because it is not part of freeCodeCamp's lesson sequence...
@ZackRich12 - let me take a look.
You must load the bootstrap.css in your CSS configuration - it will come up with a v4 link by default, but to make it use V3, which I would recommend since it is in line with the current freeCodeCamp lessons, go to a blank text on the CSS config, type a 3 and it will suggest a couple links. Click the one for bootstrap, and you should be in better shape.
@ZackRich12 - it should come up with this URL: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css
Zack Richardson
@ZackRich12
Feb 27 2017 18:31
Oops i forgot to link boptstrap thanks!! @khaduch
CamperBot
@camperbot
Feb 27 2017 18:31
zackrich12 sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2549 | @khaduch |http://www.freecodecamp.com/khaduch
Ken Haduch
@khaduch
Feb 27 2017 18:34
@ZackRich12 - you might want to have a parent div for all of that with <div class="container"> or <div class="container-fluid">
Zack Richardson
@ZackRich12
Feb 27 2017 18:39
gotcha
Uros Tadic
@urketadic
Feb 27 2017 18:51
Im trying to figure out how to implement https://github.com/musclesoft/jquery-connections/wiki/API into my https://codepen.io/urketadic/pen/vxOKjV
If you scroll down you will see im trying to make connections with all the buttons on the home page but the commands not working.
Priyanka
@pd21
Feb 27 2017 18:51
hey, how to include the classes from animate.css using addClass?b
$('#yourElement').addClass('animated bounceOutLeft');
Priyanka
@pd21
Feb 27 2017 19:12
@SkyCoder01 it does not work ..I tried..:(
singleincome
@singleincome
Feb 27 2017 19:12
How do I code the click through event to take me to facebook.com if I click on the first box in the portfolio div?
Gulsvi
@gulsvi
Feb 27 2017 19:12
@pd21 Post your codepen and I can take a closer look
@singleincome If you want to take the user to facebook.com if they click on the first box in the portfolio div, wrap the first box in an <a> tag.
@SkyCoder01 whwn i use addClass it doesnt work
Gulsvi
@gulsvi
Feb 27 2017 19:17
@pd21 Do you know how to view your debug console for errors? Not the one in codepen, the one that's built in to your browser?
singleincome
@singleincome
Feb 27 2017 19:17
@SkyCoder01
<div id="div3">
            <div class="flex-table">
                <img class="portfolio-image" src="https://tinyurl.com/hakvs4d"/></div>
Where specifically? Before the second <div> before <img>?
Priyanka
@pd21
Feb 27 2017 19:18
@SkyCoder01 by pressing F12?
Gulsvi
@gulsvi
Feb 27 2017 19:18
@singleincome With an anchor tag, everything between <a> and </a> becomes clickable and will take you to that link. Do you want the whole div to be clickable or just the image?
@pd21 Yes, what error do you see?
singleincome
@singleincome
Feb 27 2017 19:19
@SkyCoder01 Just the image.
Priyanka
@pd21
Feb 27 2017 19:20
@SkyCoder01 Uncaught ReferenceError: $ is not defined
Gulsvi
@gulsvi
Feb 27 2017 19:20
@singleincome In that case, put the <a> before the <img> and </a> after
@pd21 That means you don't have jQuery included in your project
singleincome
@singleincome
Feb 27 2017 19:24
@SkyCoder01 And I'm coding the click event with Jquery. I have the ID, should the ID go in the <a></a> tag?
$(document).ready(function(){
    $("#clickThrough").on("click",function() {});
    window.location.href="www.facebook.com";
    return false;
});
Gulsvi
@gulsvi
Feb 27 2017 19:24
@singleincome You don't need to code a click event if you use a <a> tag. It's already clickable.
singleincome
@singleincome
Feb 27 2017 19:25
I know but I'm practicing :3
Priyanka
@pd21
Feb 27 2017 19:26
@SkyCoder01 working..:)
Gulsvi
@gulsvi
Feb 27 2017 19:26

Okay, you'll get weird behavior if you try to make a <a> tag navigate to some place with both HTML and JavaScript at the same time. Just apply your click event to the image instead.

$('#id-of-your-image').on('click', function() {
  window.open('https://www.facebook.com')
})

@singleincome

@pd21 :)
singleincome
@singleincome
Feb 27 2017 19:27
@SkyCoder01 My image is a class... Can I update my jquery like so:
```
$(document).ready(function(){
$(".Portfolio-image").on("click",function() {});
window.location.href="www.facebook.com";
return false;
});
Priyanka
@pd21
Feb 27 2017 19:27
@SkyCoder01 thanx brother! had some issues with the path
CamperBot
@camperbot
Feb 27 2017 19:27
pd21 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 358 | @skycoder01 |http://www.freecodecamp.com/skycoder01
singleincome
@singleincome
Feb 27 2017 19:28
And for codepen /jquery, where do I add 'target = _blank'
Gulsvi
@gulsvi
Feb 27 2017 19:28
@singleincome If you do that, then every single image with that class will take you to facebook.
Priyanka
@pd21
Feb 27 2017 19:28
@SkyCoder01 by the way did u complete the tic tac toe game?need some logic help
Gulsvi
@gulsvi
Feb 27 2017 19:29
I don't think you need to do target="_blank" with window.open
singleincome
@singleincome
Feb 27 2017 19:29
So on the HTML side, I should give an ID to each image then?
Since each image is going to take you somewhere different
Gulsvi
@gulsvi
Feb 27 2017 19:29
@pd21 I haven't gotten that far yet :(
Priyanka
@pd21
Feb 27 2017 19:29
@SkyCoder01 oooh ..:(
Gulsvi
@gulsvi
Feb 27 2017 19:29
@singleincome Yes, a unique ID for every image. But really, only for practice :p it's overkill to use JS for the links :)
singleincome
@singleincome
Feb 27 2017 19:30
xD
Gulsvi
@gulsvi
Feb 27 2017 19:30
If you really want to practice, try creating your portfolio grid dynamically
Pass an array of image URLs to a for loop and build each <div class="flex-table">
That way, you only have to code this once:
            <div class="flex-table">
                <img class="portfolio-image" src="https://tinyurl.com/hakvs4d" />
            </div>
Might be overkill too though :p
The twitch app gave me way too many ideas
singleincome
@singleincome
Feb 27 2017 19:39
@SkyCoder01 Ah... So I have to code 4 click thorugh events
Each with a different ID....
Uros Tadic
@urketadic
Feb 27 2017 19:39

Guys, when you enter a number in my codepen, a video players, and then audio but if you go back and enter a number again, video wont play again but will just be registered as its finished and it bugs out.

Can youo take a look -> https://codepen.io/urketadic/pen/vxOKjV

Gulsvi
@gulsvi
Feb 27 2017 19:40
@singleincome That is one way - you could also write a function that maps the ID to a URL and opens the right URL depending on what ID was clicked.
I'm sure there are other ways I haven't learned yet, but that's what comes to mind :bulb:
Luc Walsh
@Epic-Luc
Feb 27 2017 19:43
How are people able to post their codepen apps in chat ?
Gulsvi
@gulsvi
Feb 27 2017 19:44
just use the URL from your browser's address bar - it gets automatically embedded
Luc Walsh
@Epic-Luc
Feb 27 2017 19:44
@SkyCoder01 kk ty
CamperBot
@camperbot
Feb 27 2017 19:44
epic-luc sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 359 | @skycoder01 |http://www.freecodecamp.com/skycoder01
singleincome
@singleincome
Feb 27 2017 19:47
@SkyCoder01 How would you write the mapping function?
David Kim
@djskim27
Feb 27 2017 19:47
hi guys :) can anyone help me figure out how to add a grayscale filter to a background image of a <div> without affecting the other elements in the <div> tag?
singleincome
@singleincome
Feb 27 2017 19:48
@SkyCoder01 Also, is this right?
<div class="flex-table">
                <a href="facebook.com" target=_"blank"><img class="portfolio-image" src="https://tinyurl.com/hakvs4d"/></a></div>
Gulsvi
@gulsvi
Feb 27 2017 19:51
@singleincome I think others can say how to do it better here. Just for practice, because the <a> link is better for opening URLs than JS...but maybe something like this:
$('.portfolio-image').on('click', function() {
  if ($(this).attr('id') === 'img-1') window.open('https://www.facebook.com');
  if ($(this).attr('id') === 'img-2') window.open('https://www.twitter.com');
  if ($(this).attr('id') === 'img-3') window.open('https://www.linkedin.com');
  if ($(this).attr('id') === 'img-4') window.open('https://www.instagram.com');
});
<div class="flex-table">
  <a href="https://www.facebook.com" target="_blank">
    <img class="portfolio-image" src="https://tinyurl.com/hakvs4d" alt="picture of a keyboard that says test">
  </a>
</div>
singleincome
@singleincome
Feb 27 2017 19:58
@SkyCoder01 Thanks!
CamperBot
@camperbot
Feb 27 2017 19:58
:cookie: 360 | @skycoder01 |http://www.freecodecamp.com/skycoder01
singleincome sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
singleincome
@singleincome
Feb 27 2017 20:00
@SkyCoder01 What if I don't want the img to open a new tab?
Gulsvi
@gulsvi
Feb 27 2017 20:00
@singleincome Then you would use <a> :p
without target=_blank
singleincome
@singleincome
Feb 27 2017 20:01
Ah, but you can't do that in codepen correct
Gulsvi
@gulsvi
Feb 27 2017 20:01
In codepen debug view, it's the same as any other web page
singleincome
@singleincome
Feb 27 2017 20:03
What do you mean?
Gulsvi
@gulsvi
Feb 27 2017 20:04
Click the "Change View" button in the top, right-hand corner of your codepen
Select "Debug Mode" and it will act just like a normal web page - no codepen frames to deal with
singleincome
@singleincome
Feb 27 2017 20:19
Oh I see.
Surbhi Oberoi
@surbhioberoi
Feb 27 2017 20:34
Hey guys, I have started an open source project to highlight world inequalities, if you find it interesting, please contribute and be a part of the project. Thanks
https://medium.com/@thesurbhioberoi/the-equality-project-355fc3193377#.eris6rf63
_
Zhanibek
@zhann1982
Feb 27 2017 20:53
@SkyCoder01 Hello again! getJSON solved my problem. But i cannot trigger error when using JSON. It doesn't send back any error for closed channels. How can I see if json doesn't respond?
Stephen Lyttle
@waycoolman619
Feb 27 2017 21:04
if any one can help I am on the weather app challenge and wanted to add a second choice for the browser if it did not support geolocations by useing another api in the else statment to fill my lat and long variables but i think im geting a scope problem and dont know how to fix it when I add the navigator.geolocation.getCurrentPosition(function(position) {
long = position.coords.longitude;
lat = position.coords.latitude;
into my if stament i losse my api variable
Gulsvi
@gulsvi
Feb 27 2017 21:10
@zhann1982 I checked the /streamers/ endpoint for status = 404, but it looks like you can also attach a .fail() to a getJSON:
$.getJSON('url', function(data) {
  // process data
}).fail(function(errObject, textStatus, errorThrown) {
  // process errors
});
More info about 3/4 of the way down the page at: http://api.jquery.com/jquery.ajax/

@waycoolman619

navigator.geolocation.getCurrentPosition(success, failure);

function success(position) {
  // navigator.geolocation succeeded
}

function failure() {
  // navigator.geolocation failed. call another location API.
}

That's what I did in my weather app

Stephen Lyttle
@waycoolman619
Feb 27 2017 21:18
@SkyCoder01 cool I will try it thanks
CamperBot
@camperbot
Feb 27 2017 21:18
waycoolman619 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 362 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Stephen Lyttle
@waycoolman619
Feb 27 2017 21:27
@SkyCoder01 I think I put it in right but I still to get my api var to work?
Gulsvi
@gulsvi
Feb 27 2017 21:32
@waycoolman619 I hit this same problem. It takes some time to get your location, so your getJSON is running before your location variables are set.
Stephen Lyttle
@waycoolman619
Feb 27 2017 21:32

```
$(document).ready(function() { // jQuery starting funtion when document has loded
// this is the variable for the url of the api from openweather.org or how we call our api
var api;
// coordenets variables for our api call
var long, lat;
// Tempriture variables
var tempK, tempC, tempF;
//navigator.geolocation.getCurrentPosition(function(position) {
// check to see if browser has geolocation
navigator.geolocation.getCurrentPosition(success, failure);
//if (navigator.geolocation) {
function success(position) {
// navigator.geolocation succeeded
console.log('Geolocation is supported!');

  long = position.coords.longitude;
  lat = position.coords.latitude;

}

//} else {
function failure() {
// navigator.geolocation failed. call another location API.
console.log('Geolocation is not supported for this Browser/OS version yet.');
}

//} // close if

api = "http://api.openweathermap.org/data/2.5/weather?lat=" + lat + "&lon=" + long + "&APPID=e6d983f57d657c580477b730399cb726";

// call or get the api JSON data
$.getJSON(api, function(jdata) {

tempK = jdata.main.temp; // Tempreture in Kelvin
tempC = tempK - 273; // Tempreture converted to Celsius
tempF = (tempK) * (9 / 5) - 459.67; // Temp coverted to Fahrenheit
var city = jdata.name;

document.getElementById("tc").innerHTML = tempC;
//alert(jdata.list[0].main.temp);
console.log(tempK);
console.log(city);
console.log(api);

});

});

Gulsvi
@gulsvi
Feb 27 2017 21:33
$(document).ready(function() { // jQuery starting funtion when document has loded
  navigator.geolocation.getCurrentPosition(success, failure);

  function success(position) {
    var long = position.coords.longitude;
    var lat = position.coords.latitude;
    getWeather(lat, long);
  }

});

function getWeather(lat, long) {
  // make your API URL with the lat and long here
  // and then call getJSON
}
René
@RenevandenHeuvel
Feb 27 2017 21:34
Can someone tell me how I can make an image as background under the jumbotron header? http://codepen.io/FccRene/pen/XMbJzB
Lil13
@Lil13
Feb 27 2017 21:36
Anyone knows of a cool bootstrap guide? I didn't find their website very intuitive.
Zhanibek
@zhann1982
Feb 27 2017 21:37
@SkyCoder01 Thanks! it helped.
CamperBot
@camperbot
Feb 27 2017 21:37
zhann1982 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 363 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Dil Mendonca
@dilmendonca
Feb 27 2017 21:46
anyone there to help me with api, ajax and json?
René
@RenevandenHeuvel
Feb 27 2017 21:47
@Lil13 Although it isn't a guide it this tutorial did a good job on helping me to understand bootstrap better https://www.youtube.com/watch?v=e6VYRVRoC40
Lil13
@Lil13
Feb 27 2017 21:48
@RenevandenHeuvel thank you, i will have look. for me is not so much understanding how it works, but finding th classes I need.
CamperBot
@camperbot
Feb 27 2017 21:48
lil13 sends brownie points to @renevandenheuvel :sparkles: :thumbsup: :sparkles:
:cookie: 62 | @renevandenheuvel |http://www.freecodecamp.com/renevandenheuvel
Stephen Lyttle
@waycoolman619
Feb 27 2017 21:48
@SkyCoder01 ok like this
$(document).ready(function() { // jQuery starting funtion when document has loded

  //navigator.geolocation.getCurrentPosition(function(position) {
  // check to see if browser has geolocation
  navigator.geolocation.getCurrentPosition(success, failure);
  //if (navigator.geolocation) { 
  function success(position) {
    // navigator.geolocation success    
    var long = position.coords.longitude;
    var lat = position.coords.latitude;
    getWeather(lat, long);
    console.log('Geolocation is supported!');
  }
});

function getWeather(lat, long) {
  var api = "http://api.openweathermap.org/data/2.5/weather?lat=" + lat + "&lon=" + long + "&APPID=e6d983f57d657c580477b730399cb726";
  // call or get the api JSON data
  $.getJSON(api, function(jdata) {

    // Tempriture variables
    var tempK, tempC, tempF;

    tempK = jdata.main.temp; // Tempreture in Kelvin
    tempC = tempK - 273; // Tempreture converted to Celsius
    tempF = (tempK) * (9 / 5) - 459.67; // Temp coverted to Fahrenheit
    var city = jdata.name;

    document.getElementById("tc").innerHTML = tempC;
    //alert(jdata.list[0].main.temp);
    console.log(tempK);
    console.log(city);
    console.log(api);

  });
}
//} else {
function failure() {
  // navigator.geolocation failed. call another location API.
  console.log('Geolocation is not supported for this Browser/OS version yet.');
}

//} // close if
René
@RenevandenHeuvel
Feb 27 2017 21:51
@Lil13 , i bookmarked that one, looks like a clear site. thx
CamperBot
@camperbot
Feb 27 2017 21:51
renevandenheuvel sends brownie points to @lil13 :sparkles: :thumbsup: :sparkles:
:cookie: 120 | @lil13 |http://www.freecodecamp.com/lil13
Shazzbots
@Shazzbots
Feb 27 2017 21:52
In CodePen I have Bootstrap loaded but when I analyze html, all of the bootstrap classes all have errors that they are not found in the stylesheet.
Gulsvi
@gulsvi
Feb 27 2017 21:53
Since you have external stylesheets, you can probably ignore this.
If they are all bootstrap classes, you can ignore them. Otherwise, you might want to remove some.
That's how I read that error when I saw it. It's probably too much work to validate an external library?
Stephen Lyttle
@waycoolman619
Feb 27 2017 21:55
@SkyCoder01 cool its working Thanks so now could I use the same gatWeather(lat, long): function in the failure using another api to get lat and long?
CamperBot
@camperbot
Feb 27 2017 21:55
waycoolman619 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:warning: waycoolman619 already gave skycoder01 points
Gulsvi
@gulsvi
Feb 27 2017 21:56
@waycoolman619 Yes, you can. :)
Shazzbots
@Shazzbots
Feb 27 2017 21:56
That must be it.
Stephen Lyttle
@waycoolman619
Feb 27 2017 22:10
@SkyCoder01 Wow I just learned so much right now this is Awesome Thanks!!!
CamperBot
@camperbot
Feb 27 2017 22:10
waycoolman619 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:warning: waycoolman619 already gave skycoder01 points
Gulsvi
@gulsvi
Feb 27 2017 22:11
@waycoolman619 This is just the start :)
alpox
@alpox
Feb 27 2017 22:16
@RenevandenHeuvel just be aware that this tutorial is for bootstrap version 3.3 and not 4.0 which is added by codepens quick add
Lee
@LeeConnelly12
Feb 27 2017 22:21
Can someone help me out with this code please?
When hovered over, I want the letters to change to the colour red, but that's not happening.
#mainContentContainer span {
    color: white;
    -webkit-transition: color ease-out .75s, font-size ease .75s, margin ease-out 1s;
    -moz-transition: color ease-out .75s, font-size ease .75s, margin ease-out 1s;
    -o-transition: color ease-out .75s, font-size ease .75s, margin ease-out 1s;
    -ms-transition: color ease-out .75s, font-size ease .75s, margin ease-out 1s;
    transition: color ease-out .75s, font-size ease .75s, margin ease-out 1s;

}

.sl1:hover,
.sl2:hover,
.sl3:hover,
.sl4:hover,
.sl5:hover,
.sl6:hover,
.sl7:hover,
.sl8:hover,
.sl9:hover,
.sl10:hover,
.sl11:hover,
.sl12:hover,
.sl13:hover,
.sl14:hover,
.sl15:hover,
.sl16:hover,
.sl17:hover,
.sl18:hover,
.sl19:hover {
    color: red;
    margin: 0 0.3%;
    font-size: 111%;
    transform: scaleY(1.2, 1);
}

    $.fn.spanLetters = function () {
        this.each(function () {

            var words = $(this).text().split('');
            for (i = 0; i in words; i++) {
                words[i] = '<span class="sl' + (i + 1) + ' span-letter">' + words[i] + '</span>'
            };

            var text = words.join('');

            $(this).html(text);
        })
    }

    $('.mainHeadSpan').spanLetters();

});
Gulsvi
@gulsvi
Feb 27 2017 22:23
@LeeConnelly12 Is that JavaScript or CSS, looks like a mix of both
Lee
@LeeConnelly12
Feb 27 2017 22:26
@SkyCoder01 It was a mix of both, sorry I didn't realise how much code there was.
Niichie
@Niichie
Feb 27 2017 22:27

Hey guys, I finished my tribute page and was wondering if I could get some feedback. Looking online I managed to find a way to get a similar offset to the example page, but I'm not entirely sure if it looks good.

https://codepen.io/niichie/pen/EWaZjm

Lee
@LeeConnelly12
Feb 27 2017 22:27
@SkyCoder01 I will put it in a fiddle or something.
Dorothy Wegmüller-Ngudle
@GrannyCamper
Feb 27 2017 22:28

Hi @ll

Challenge
Build a Tribute Page

Do I really have to build a Tribute Page with
CodePen.io if yes should I download that or can I use
a different link my homepage for instance.
Thanks for your help

CamperBot
@camperbot
Feb 27 2017 22:28
grannycamper sends brownie points to @ll :sparkles: :thumbsup: :sparkles:
:warning: @ll's account is not linked with freeCodeCamp. Please visit the settings and link your GitHub account.
Dorothy Wegmüller-Ngudle
@GrannyCamper
Feb 27 2017 22:29
thank you @camperbot
CamperBot
@camperbot
Feb 27 2017 22:29
grannycamper sends brownie points to @camperbot :sparkles: :thumbsup: :sparkles:
:star2: 3045 | @camperbot |http://www.freecodecamp.com/camperbot
Niichie
@Niichie
Feb 27 2017 22:29
@GrannyCamper I found codepen annoying to use, I did my tribute page using Brackets and then just copy and pasted the HTML and CSS.
Dorothy Wegmüller-Ngudle
@GrannyCamper
Feb 27 2017 22:30
@Niichie well I dont know Brackets
Niichie
@Niichie
Feb 27 2017 22:31
@GrannyCamper It's just a simple text editor with live preview, I found it more enjoyable to use because of its autocomplete features. You can check it out at http://brackets.io/
Dorothy Wegmüller-Ngudle
@GrannyCamper
Feb 27 2017 22:32
@Niichie are you a shareholder of bracket, will have a look at it thank you
CamperBot
@camperbot
Feb 27 2017 22:32
grannycamper sends brownie points to @niichie :sparkles: :thumbsup: :sparkles:
:cookie: 121 | @niichie |http://www.freecodecamp.com/niichie
Gulsvi
@gulsvi
Feb 27 2017 22:33
@GrannyCamper As long as your code is publicly viewable, and you have a live demo, you can build your code wherever you want.
Dorothy Wegmüller-Ngudle
@GrannyCamper
Feb 27 2017 22:33
cool thanks Sky
jamo254
@jamo254
Feb 27 2017 23:06
@LeeConnelly12 how did you get started with your project?
aRtoo
@artoodeeto
Feb 27 2017 23:14

hi guys quick question do you know what the meaning of this error??

index.html:196 Uncaught TypeError: Cannot read property 'top' of undefined
at HTMLUListElement.<anonymous> (index.html:196)
at HTMLUListElement.dispatch (jquery.min.js:3)
at HTMLUListElement.q.handle (jquery.min.js:3)

Gulsvi
@gulsvi
Feb 27 2017 23:20
@artoodeeto Is top a class name and maybe you forgot to put a . in front?
Like $(top).html('hello')
aRtoo
@artoodeeto
Feb 27 2017 23:23
@SkyCoder01 what do you mean sir??
@SkyCoder01 i dont have a top class on my html. it was on the tutorial and he doesnt explain it
Gulsvi
@gulsvi
Feb 27 2017 23:23
My dad is sir :)
Where is your code?
Federico Dente
@fez994
Feb 27 2017 23:24
Hi guys, i'm doind the Random Quote Machine project but i can't figure it out how to make a tweet button, can anyone link me a source?
aRtoo
@artoodeeto
Feb 27 2017 23:24
@SkyCoder01 can i pm you sir>??
Gulsvi
@gulsvi
Feb 27 2017 23:24
lol, sure
sir
:)
aRtoo
@artoodeeto
Feb 27 2017 23:24
@SkyCoder01 thank you sir
CamperBot
@camperbot
Feb 27 2017 23:24
:cookie: 365 | @skycoder01 |http://www.freecodecamp.com/skycoder01
artoodeeto sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
Aftab Parvez
@aftabparvez
Feb 27 2017 23:43
Hi! When using the transition property, do I enter it in the class where the initial value is set or in the class where the final value is set?