These are chat archives for FreeCodeCamp/HelpFrontEnd

1st
Sep 2016
George Miller
@GMiller64
Sep 01 2016 00:13
not the prettiest coding but here's my solution to the portfolio challenge. constructive criticism and improvement suggestions are welcomed. https://codepen.io/GMiller64/full/rLbkKZ/
Margaret
@Margaret2
Sep 01 2016 01:00
@GMiller64 I do have a suggestion about padding. Right now, when you click on the portfolio section, there is so much padding that it's hard to see the heading and the pictures in the same screen! I would take the style attribute out of that paragraph and just add a reasonable amount like padding:50px; under the portfolio class in CSS. Same thing for the links: I would take out the style attribute and add a CSS class like
#links{
  height:500px;
  padding:100px;
}
Physikeff
@Physikeff
Sep 01 2016 01:28
Hi guys, I'm stuck at the beginning of the "Show the Local Weather"

This is the JS:
$(document).ready(function() {
$.getJSON("api.openweathermap.org/data/2.5/weather?lat=35&lon=139&appid=1065f9b5ec2b8693d74325f06462a824", function(json) {
$(".message").html(JSON.stringify(json));
});
});
and this is the html:

<div id="weather" class="message well">
<h1>Hello</h1>
</div>

I don't understand why i can't see the JSON on codepen
George Miller
@GMiller64
Sep 01 2016 01:55
@Margaret2 Didn't even think of a CSS class for the links, there is a lot of excessive padding in the code. I probably should have pointed that out originally, the padding was there in an attempt to make sure it was necessary to scroll through the page to get to all the required sections. Right now I don't have a lot of content to fill up a Portfolio page. If I take all the padding out and make it look good it all fits on one page.
Paweł
@pawelrus91
Sep 01 2016 02:06
hi, i have aproblem with foother on codepan http://codepen.io/freecodecamppawel/pen/wzwLVW in independens server every work fine like http://elonmusk.c0.pl/
TristanC123
@TristanC123
Sep 01 2016 02:21
I'm about to start the "build a tribute page" project, but I'm a little bit confused on how to use different libraries. How do I add different libraries?
Stephen James
@sjames1958gm
Sep 01 2016 02:25
@TristanC123 On codepen there is a little gear icon that bring up a setup screen that allows you to add libraries.
TristanC123
@TristanC123
Sep 01 2016 02:29
@sjames1958gm ok. Where do I get the link to put in there?
Stephen James
@sjames1958gm
Sep 01 2016 02:30
@TristanC123 You can select from the drop down near the bottom, for most of the standard ones. Both css and js sections have these settings.
TristanC123
@TristanC123
Sep 01 2016 02:30
well what if i want to add a custom one @sjames1958gm
you find custom ones on github right? @sjames1958gm
Stephen James
@sjames1958gm
Sep 01 2016 02:31
@TristanC123 I believe you just put the same URL that you would in a script or link tag.
Custom ones can be found all over the web.
@TristanC123 All it does is build the script or link tag for you
TristanC123
@TristanC123
Sep 01 2016 02:34
Ok im extremely confused and I dont know how to explain what im confused about AGHH
@sjames1958gm for example, heres this library: http://fontawesome.io/ where do I go to get the link to add this to my code?
Stephen James
@sjames1958gm
Sep 01 2016 02:37
@TristanC123 Usually search for cdn and the library.
https://www.bootstrapcdn.com/fontawesome/
TristanC123
@TristanC123
Sep 01 2016 02:40
oh i see. So just find a library i like, the search for the cdn if im not mistaken? @sjames1958gm
Timbowser
@Timbowser
Sep 01 2016 02:53
I can't get the hovers to work correctly on my search and more info buttons. I have been trying different things for at least an hours so thought it was time to seek help. http://codepen.io/tbowser/pen/rLRXvW
You will have to run a search to see the more info buttons
Stephen James
@sjames1958gm
Sep 01 2016 02:55
@TristanC123 yes
@TristanC123 If you were doing your own website not on codepen you might download the library and serve it from your own page.
Ken Haduch
@khaduch
Sep 01 2016 03:01
@Timbowser - not sure what you're after, but I changed #search :hover to #search:hover and it looked different - highlighted the whole button instead of just the icon? What else are you after if it wasn't just that?
Timbowser
@Timbowser
Sep 01 2016 03:02
@khaduch that was it for that one. Let me try it on my end
Stephen James
@sjames1958gm
Sep 01 2016 03:03
@Timbowser Found the same for wikiLink:hover
Timbowser
@Timbowser
Sep 01 2016 03:03
@khaduch thanks that worked like a charm
CamperBot
@camperbot
Sep 01 2016 03:03
timbowser sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1614 | @khaduch |http://www.freecodecamp.com/khaduch
Timbowser
@Timbowser
Sep 01 2016 03:03
@sjames1958gm thanks. I feel dumb how long I have been grinding on that issue
CamperBot
@camperbot
Sep 01 2016 03:03
timbowser sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 3002 | @sjames1958gm |http://www.freecodecamp.com/sjames1958gm
Ken Haduch
@khaduch
Sep 01 2016 03:04

@Timbowser - you're welcome. You are probably just working on this, but I found that if I clicked the search button multiple times, it keeps accumulating search results for each term...

Sometimes fresh eyes just see something different... it looked a little odd, I'm never sure where a space is okay and where it isn't!

Stephen James
@sjames1958gm
Sep 01 2016 03:06
@Timbowser I wouldn't have known that either.
Timbowser
@Timbowser
Sep 01 2016 03:08
@khaduch I had fixed the appending thing last night but since I am not creating that entire section by jquery looks like I broke it again. Back to fixing more issues.
Kiriga Puro
@Kirigapuro
Sep 01 2016 04:58
Guys any help on how to prevent some contents of my heading section of the personal portfolio hiding under the navigation bar? I have tried different margin but it does not work? thanks
ZZPot
@ZZPot
Sep 01 2016 05:52
how make a "flash" animation?
raise to specific state and than get out of it.
Aldair
@ald1413
Sep 01 2016 06:13
@Kirigapuro i had the same problem just now with my vertical navigation bar, i used margin-left to move all of my text, maybe itll work for you as well!
Brandon
@Intendant-
Sep 01 2016 06:33
so this is kind of off topic, but does anyone have any experience with meteor? Specifically calling api's
excowboy
@excowboy
Sep 01 2016 07:02
@Kirigapuro if you're using Bootstrap check the classes on your navigation bar - these affect the behaviour. You may need some margin-top on your header too. Sorry this is vague but look in the bootstrap documentation for the details.
Mariya
@mariyadiminsky
Sep 01 2016 07:05

Anyone ever get values in a form in react js? I know you can get values from input like so:

onChange={ (event) => this.handleInputChange(whichInput, event)

But what if you also had a form select and wanted to get BOTH the input values and the select values at the same time?
It seems I would I have to make an onChange for both the input and the select options separately but I need to acquire both at the same time. Is this possible?

Suraj Prasad
@suraj18gts
Sep 01 2016 07:14
Anyone Please help....I m getting stuck in JS
Tony Rivera
@tonyrivera
Sep 01 2016 07:16
whats the issue? @suraj18gts
kirbyedy
@kirbyedy
Sep 01 2016 07:17
@suraj18gts what are lines 1 to 16 represent in your js section ?
at least they should be assign to some variable
Suraj Prasad
@suraj18gts
Sep 01 2016 07:18
that is about local area
in what variable
kirbyedy
@kirbyedy
Sep 01 2016 07:18
forget it
I can not understand your code, very confusing to me :(
Suraj Prasad
@suraj18gts
Sep 01 2016 07:21
i have deleted the js part.....will you tell me what to do so that i can get my location
Jowze
@Jowze
Sep 01 2016 07:22
Hey guys. I started looking at the project involving the Twitch TV API. I cannot figure out how to get the information that an account is closed. There doesn't seem to be that info in the JSON result
Maybe someone has an idea?
For example when I write $.getJSON('https://api.twitch.tv/kraken/users/brunofin', function(data) {
console.log(data);
});
Darth Skywalker
@adityaparab
Sep 01 2016 07:24
@Mashadim : I don't see any other way apart from adding the onChange event handler on each of your elements. However, you use jQuery's .serialize method to do the same. Just call a $('form').serialize(); on click of a button or something. (Do your state manipulation on this click handler as well).
Jowze
@Jowze
Sep 01 2016 07:24
I get info regarding the user profile, but nothing in the JSON result indicates the account has been closed
Mariya
@mariyadiminsky
Sep 01 2016 07:27
@adityaparab Thanks Darth. Forms actually have an onSubmit for when you click a button but I want to do it automatically without the user having to click the submit button. So I wanted to get the value of the input, and the value of the select option they chose both when they enter a new input and when they select an option.
CamperBot
@camperbot
Sep 01 2016 07:27
mashadim sends brownie points to @adityaparab :sparkles: :thumbsup: :sparkles:
:cookie: 662 | @adityaparab |http://www.freecodecamp.com/adityaparab
Darth Skywalker
@adityaparab
Sep 01 2016 07:28
@Mashadim : Let me think about it. There has to be a way
Gryff Coates
@mrbrit2
Sep 01 2016 08:15
@vinaypuppal thanks :) sorry for the late reply
CamperBot
@camperbot
Sep 01 2016 08:15
mrbrit2 sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 476 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
Gryff Coates
@mrbrit2
Sep 01 2016 08:15
@dhcodes thanks :) sorry for the late reply
CamperBot
@camperbot
Sep 01 2016 08:15
mrbrit2 sends brownie points to @dhcodes :sparkles: :thumbsup: :sparkles:
:star2: 1377 | @dhcodes |http://www.freecodecamp.com/dhcodes
Brandon Porter
@Octoprism
Sep 01 2016 10:40
i have a question in regards to my tribute page that im building, but first how do i link you the code from codepen.io?
Ok, my question is, what am i doing wrong that's making my columns all messy. The first two are kind of fine (just some minor misalignment) but the rest are out of control, what did i do?
Brandon Porter
@Octoprism
Sep 01 2016 10:46
open it up in the browser cus this screen is too small
Ahmad Ali
@microcyberz
Sep 01 2016 10:49
http://codepen.io/microcyberz/full/aZmwRL/ how can I animate the profile picture from left to the center of window?
Lidia Wisniewska
@lidiawisniewska
Sep 01 2016 11:11
Hi everyone! how can i get weather description in the local weather project? right now im getting undefined
kirbyedy
@kirbyedy
Sep 01 2016 11:19
@lidiawisniewska data.weather[0].description
vínαч puppαl
@vinaypuppal
Sep 01 2016 11:19

@lidiawisniewska You dont need these

rawWeather = JSON.stringify(data);
     finalWeather = JSON.parse(rawWeather);

you can directly access data.main.temp since $.getJSON gives parsed JSON data directly so you can access properties over it. And for accessing description like this

data.weather[0].description

since data.weather is array.

Lidia Wisniewska
@lidiawisniewska
Sep 01 2016 11:20
@kirbyedy omg so simple
@kirbyedy thanks!
CamperBot
@camperbot
Sep 01 2016 11:21
lidiawisniewska sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1339 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
Lidia Wisniewska
@lidiawisniewska
Sep 01 2016 11:22
@vinaypuppal thanks!
CamperBot
@camperbot
Sep 01 2016 11:22
lidiawisniewska sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 477 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
Jeremy Barbe
@eemebarbe
Sep 01 2016 11:48
hey any react uses in the room that could lend a hand to a newbie?
Jonathan Bakebwa
@codebender828
Sep 01 2016 11:51
Hey Guys! Finished my first tribute page today. Wanted to submit it to you guys for review. Its so full of HTML. 😂 Let me know what you think...
William Maes
@maeswilliam
Sep 01 2016 11:54
Hey i was wondering about the tribute page, can i use css & html instead of html & boostrap?
kirbyedy
@kirbyedy
Sep 01 2016 11:56
@maeswilliam yes
William Maes
@maeswilliam
Sep 01 2016 11:57
@kirbyedy do you know why he insists in the video to use bootstrap instead of css? I mean how does it come that css is barely covered in the challenge?
kirbyedy
@kirbyedy
Sep 01 2016 11:58
bootstrap gives quick solution out of the box, and is good for beginning, but as the time progress you will need more knowledge on css
but if you get stuck in bootstrap, omg thats a pain in the butt
default bootstrap is easy to implement, and gives instant result
William Maes
@maeswilliam
Sep 01 2016 12:00
@kirbyedy okay. I mean i learnt css and html for 2 months, had 1 month off. Now i'm kinda confused really...Another thing for someone that is using brackets, i have a hard time using codepen.io, don't you?
kirbyedy
@kirbyedy
Sep 01 2016 12:01
you can code in brackets, and later on paste it in codepen
William Maes
@maeswilliam
Sep 01 2016 12:01
@kirbyedy yeah, thought about it, thanks
CamperBot
@camperbot
Sep 01 2016 12:01
maeswilliam sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1340 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
Martynas
@Marjanus
Sep 01 2016 12:52
What is a safe way to store API keys in Github pages, using only html/css/js/jquery ?
Mokubao
@mokubao
Sep 01 2016 12:53
Hi guys, about the Random Quote Machine, how to I make the quote automatically continue in a new line instead of overflowing?
greg
@wearenotgroot
Sep 01 2016 12:55
@mokubao look into word-wrap
Ken Haduch
@khaduch
Sep 01 2016 12:56

@codebender828 - looking pretty good there. I'm curious about why you have a .js file loaded in your CSS Pen Settings External CSS? It might work, but it looks a little strange. A couple things that I notice - on a wide screen, the image of Dr. King is not centered, but shifted off to the left. If you add the bootstrap class center-block to the <img> class attribute, that will shift it to the center of the page.

Also, on CodePen (and you might have just copied here from an external editor, so you just have to see if CodePen's system is causing problems for you) But on CodePen, the HTML panel should only have HTML elements in it - but not the <html>, <head>, <body>, <style>, <script> and their closing tags. There are places in the HTML config for things that you might want to put into the head of the page, the CSS tab and config is for all CSS code and external sheets, and the JS tab for all JS-related info. Doing things other than that result in invalid HTML. That being said, it doesn't always cause a problem, but it could result in conflicts and things being loaded in an order that could cause problems, and definitely I've seen problems on mobile devices with some of these things.

I hope that helps - nice first project!

Mokubao
@mokubao
Sep 01 2016 12:58
@wearenotgroot thanks
CamperBot
@camperbot
Sep 01 2016 12:58
:star2: 1538 | @wearenotgroot |http://www.freecodecamp.com/wearenotgroot
mokubao sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
Jonathan Bakebwa
@codebender828
Sep 01 2016 12:59
@khaduch thanks so much. let me get that working
CamperBot
@camperbot
Sep 01 2016 12:59
codebender828 sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1615 | @khaduch |http://www.freecodecamp.com/khaduch
Ken Haduch
@khaduch
Sep 01 2016 13:13
@Marjanus - I don't think that there is a way to safely store them. They address that in the video, as I recall. It's not the best idea to have them "open", but not much choice. For a free account, there probably isn't that much to worry about (I think that they also mention that.) If someone has a better answer or solution, other than getting your own private ISP (and maybe that's not really a solution either, because the information is going to go out on the net where it can be seen anyway) please chime in!
Tarun Aggarwal
@taronaggarwal
Sep 01 2016 13:19
How to put list in center, whenever i put list in centre the content goes to the center but the bullets or points remain at the left side of the page.
Yuriy Medentsii
@hvuntokrul
Sep 01 2016 13:40
@taronaggarwal padding and margin css properties will help you with that
@taronaggarwal padding-left and margin-left to be specific
@taronaggarwal but if you center the list, make sure to test how the page behaves on browser window resize
@taronaggarwal what is centered full-screen might not be centered after shrinking anymore
WilliamD0yle
@WilliamD0yle
Sep 01 2016 13:44
im just starting the local weather problem and I cant seem to get data from my script. can anyone help?
http://codepen.io/wshore/pen/JRjYaB
Yuriy Medentsii
@hvuntokrul
Sep 01 2016 14:05
@WilliamD0yle let's have a look
@WilliamD0yle I opened your page at the data is there
@WilliamD0yle make sure you understand the structure of the API response
@WilliamD0yle i.e. how deep do you have to dig into the json response to get data, e.g. current weather, temperature etc
WilliamD0yle
@WilliamD0yle
Sep 01 2016 14:12
@hvuntokrul I think i have it figured out. Thank You
CamperBot
@camperbot
Sep 01 2016 14:12
williamd0yle sends brownie points to @hvuntokrul :sparkles: :thumbsup: :sparkles:
:cookie: 330 | @hvuntokrul |http://www.freecodecamp.com/hvuntokrul
@WilliamD0yle your just missing an "&"
Dmytro
@lomm28
Sep 01 2016 14:40

Hi there! Could you please help me with my Wikipedia viewer project? It seems to function correctly but I cannot figure out where I need to stick target="_blank" to open wikipedia articles in a new tab:

http://codepen.io/lomm28/full/OXKbOq/

the doer
@ewathedoer
Sep 01 2016 14:43
@lomm28 I think that to the li tags from id="output"
Jason Luboff
@JLuboff
Sep 01 2016 14:44
@lomm28 You want target="_blank" to be part of your <a href="..."> tag
Not your li tag
Gerry Agbobada
@gagbo
Sep 01 2016 14:44
Hello, I'm doing the random quote machine right now, and even though it worked perfectly on my local computer, the API call fails on codepen, with no apparent reason (in console). Has someone encountered the problem ?
Dmytro
@lomm28
Sep 01 2016 14:45
@JLuboff I understand that but it does not work when I insert it in JavaScript code section
Jason Luboff
@JLuboff
Sep 01 2016 14:45
@Gagbo Post your codepen. But it could be a cross-origins issue (API is http vs connecting to codepen over https or vice versa
@lomm28 use single quotes instead of double
the doer
@ewathedoer
Sep 01 2016 14:46
This message was deleted
Gerry Agbobada
@gagbo
Sep 01 2016 14:46
I had the CSOR issue when working locally, and using jsonp shomehow fixed it, so I thought it'd be okay
Jason Luboff
@JLuboff
Sep 01 2016 14:46
@Gagbo change codepen to http...seems to work
I lied...it worked once..
Hmm...sometimes it works, sometimes it doesnt
Gerry Agbobada
@gagbo
Sep 01 2016 14:47
It works for all quotes for me
I think the problem was there, or at least I have the same usability as on my laptop, thanks !
Jason Luboff
@JLuboff
Sep 01 2016 14:48
No problem haha
Dmytro
@lomm28
Sep 01 2016 14:49
@JLuboff thank you very much....it worked :)
CamperBot
@camperbot
Sep 01 2016 14:49
lomm28 sends brownie points to @jluboff :sparkles: :thumbsup: :sparkles:
:cookie: 338 | @jluboff |http://www.freecodecamp.com/jluboff
Jason Luboff
@JLuboff
Sep 01 2016 14:49
:+1:
Gang Zhao
@crumpx
Sep 01 2016 15:30
https://api.forismatic.com/api/1.0/?method=getQuote&key=291290&format=jsonp&lang=en&jsonp=updateQuote use self-signed ssl cert
so you need to go there in your browser and accept their cert before you can even get anything
lol
Yolanda
@teknotik
Sep 01 2016 15:35
Hey I have been trying to get started on my portfolio project but a little stuck can someone give me an examples...website to get an idea on how to code this please???
Joffrey Nolting
@Yovvel
Sep 01 2016 15:40
@teknotik there is one example project already given with th e assigment
it mat look overwhelming when you first start out, but it will get easier.
http://codepen.io/Yovvel/pen/WxWpKb
http://codepen.io/Yovvel/pen/AXZopz?editors=1100
the second one isn't finished yet, but a work in progress
Paul F. Aponte
@DrAponte
Sep 01 2016 15:49
WHOS READY FOR SEPTEMBER 7TH!!!!!!!!!!!
U-ways
@U-ways
Sep 01 2016 15:55
@DrAponte What's in for sep 7th? :OO
Paul F. Aponte
@DrAponte
Sep 01 2016 15:56
For all of my Apple supporters:
September 7 at 10 a.m. PDT watch the keynote live on the website.
http://www.apple.com/apple-events/september-2016/
U-ways
@U-ways
Sep 01 2016 15:57
@DrAponte Ohhh... :octocat:
Yolanda
@teknotik
Sep 01 2016 16:02
@Yovvel Thank you for the examples
CamperBot
@camperbot
Sep 01 2016 16:02
teknotik sends brownie points to @yovvel :sparkles: :thumbsup: :sparkles:
:cookie: 236 | @yovvel |http://www.freecodecamp.com/yovvel
Joffrey Nolting
@Yovvel
Sep 01 2016 16:03
np
TristanC123
@TristanC123
Sep 01 2016 16:07
Hey guys im starting the tribute page project, and Im not sure how to center text so I can have a header
TristanC123
@TristanC123
Sep 01 2016 16:13
nevermind i figured it out
How do I add a custom font that I found from a website into my tribute page?
Gang Zhao
@crumpx
Sep 01 2016 16:16
safe way to do it is to go to google web font and get font from there.
people might not have the custom font you found in their computer.
TristanC123
@TristanC123
Sep 01 2016 16:17
@crumpx if i find a custom font, do I just have to add it to my system and it will be able to be used in my project?
Gang Zhao
@crumpx
Sep 01 2016 16:19
yes. and your viewer need to have that font in their system to be able to get the same thing you see.
common way is to have your website link to one or more of google's collection fonts
so when viewer's browser will link that font also and display contents
karocann
@karocann
Sep 01 2016 16:22
When doing an offset, does the number of columns in the offset start from the left margin or the last column used?
TristanC123
@TristanC123
Sep 01 2016 16:22
@crumpx i figured it out. Thanks though
CamperBot
@camperbot
Sep 01 2016 16:22
tristanc123 sends brownie points to @crumpx :sparkles: :thumbsup: :sparkles:
:cookie: 298 | @crumpx |http://www.freecodecamp.com/crumpx
TristanC123
@TristanC123
Sep 01 2016 16:40
How do I adjust the positioning of text in my code? I want to place it not in the center, but a little off to the left.
Jason Luboff
@JLuboff
Sep 01 2016 16:47
@karocann I've only ever used offset when I don't want anything in my left columns, but it offsets it from the Left
Aaron
@apalm1341
Sep 01 2016 17:31
Can someone please help me?
Jason Luboff
@JLuboff
Sep 01 2016 18:00
@apalm1341 You can always post your quesiton..
Ken Haduch
@khaduch
Sep 01 2016 18:02
@apalm1341 - time for a quick one? what's up?
cameron nicklaus
@camnicklaus
Sep 01 2016 18:02
hey everyone
I've got a conceptual question... I'd like to use javascript to determine the left and right margin for a <p> element based on the .length of the text going into <p> as it will be changing with onclick events. not sure how to go about targeting my css
Ken Haduch
@khaduch
Sep 01 2016 18:09
@camnicklaus - why would you want to do this? You can set margins in a couple ways using just straight CSS - using fixed widths (which you could change using jQuery, for example, or just straight javascript), using something like min-width, to give a lower bound for the width, also a max-width to cover the other end. You can use percentages for the margins or the widths - If you keep your text centered, then any of those might work out? It depends on whether or not you really need to do a calculation - are you trying to keep all of your text on one line, or what is your goal?
cameron nicklaus
@camnicklaus
Sep 01 2016 18:14
@khaduch hey thanks...I'm super new, working on my first javascript challenge. the goal is to let text be aligned left (for functionality) but centered in the window no matter how long the text string is
CamperBot
@camperbot
Sep 01 2016 18:14
camnicklaus sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1616 | @khaduch |http://www.freecodecamp.com/khaduch
Stacey
@anastasi5
Sep 01 2016 18:14
OK, I know I must sound needy, but where can I find the Icons for the portfolio piece; do I need to design them?
cameron nicklaus
@camnicklaus
Sep 01 2016 18:14
@anastasi5 search for font awesome !
Ken Haduch
@khaduch
Sep 01 2016 18:15
@anastasi5 - icons as in the GitHub, LinkedIN, etc. Font awesome! Go to the CSS config, to an external source, type "font awesome", it will add the URL for that. Look at the font awesome homepage for usages and list of icons.
Alberto Fernandez
@Alemanote
Sep 01 2016 18:16
hey ppl!
good afternoon :)
i'm trying to submit my tribute page
but it's doesn't work :S
any of you having the same issue?
Jason Luboff
@JLuboff
Sep 01 2016 18:35
@Alemanote What do you mean it doesn't work? You click on "I've completed this challenge" and paste your codepen URL into the input field and hit submit..?
Alberto Fernandez
@Alemanote
Sep 01 2016 18:36
after third attempt it worked, probably my internet connection :) the you @JLuboff :+1:
*thk
Kunal Gupta
@kunalgupta05
Sep 01 2016 18:38
Hello guys i really want you all to review my JS calculator. I did this in a very limited time,approximately took 10 hours across 10 days, so i am not very satisfied with the outcome. But i would really like some inputs on this one as i am going to have some free time this weekend(Hopefully!). I want to redo the design as well as improve on the functionality.
jeffm64
@jeffm64
Sep 01 2016 18:48
Any tips for starting the weather project? I've spent the last 2 hours trying to figure it out and researching and have came up with nothing.
Toni Shortsleeve
@KoniKodes
Sep 01 2016 18:48
@kunalgupta05 Looks good.
@jeffm64 Be aware of cross-origin issues. wunderground has a decent api.
jeffm64
@jeffm64
Sep 01 2016 18:49
What does cross-origin mean?
Kunal Gupta
@kunalgupta05
Sep 01 2016 18:49
@jeffm64 What exactly do you need help on? Can you be more specific?
Toni Shortsleeve
@KoniKodes
Sep 01 2016 18:50
@jeffm64 http:// going to https:// Recently Google stopped allowing it for security reasons. With Codepen you can be https and reach the same.
@kunalgupta05 I'm having issues getting clear and backspace to work on my calculator.
Kunal Gupta
@kunalgupta05
Sep 01 2016 18:52
@KoniKodes drop in the link to your project then i will have a look
jeffm64
@jeffm64
Sep 01 2016 18:52
I just don't get anything with api/json/ajax etc. So I can't really even begin as compared to just a regular javascript project
Toni Shortsleeve
@KoniKodes
Sep 01 2016 18:54
@kunalgupta05 http://codepen.io/KoniKodes/pen/BzZwZz Thank you
CamperBot
@camperbot
Sep 01 2016 18:54
:cookie: 335 | @kunalgupta05 |http://www.freecodecamp.com/kunalgupta05
konikodes sends brownie points to @kunalgupta05 :sparkles: :thumbsup: :sparkles:
Kunal Gupta
@kunalgupta05
Sep 01 2016 18:56
@jeffm64 you might wanna look into api's and stuff then before starting out. Check out some youtube videos on it, once you get a hold of the concept you can check out the documentation of the site you are using the api of. Documentation is the key to working with APIs
Toni Shortsleeve
@KoniKodes
Sep 01 2016 18:56
@jeffm64 I'm still having trouble with APIs, too. There are some good videos on youTube, and some great blogs that helped me.
jeffm64
@jeffm64
Sep 01 2016 18:59
Any you recommend? That's definitely the problem currently feels like trying to code JavaScript without knowing the terminology.
Kunal Gupta
@kunalgupta05
Sep 01 2016 18:59
@KoniKodes Okay i got it. Try ("#result").html("") instead of $("#result").append(" ");
TristanC123
@TristanC123
Sep 01 2016 19:00
This message was deleted
This message was deleted
s
hey can anyone help me shift my timeline more to the right in my tribute page? I also would like the sentences to stack, or return rather than extending until the border ends. https://codepen.io/bones880/pen/mAdEaN
Kunal Gupta
@kunalgupta05
Sep 01 2016 19:01
@KoniKodes What you were doing instead was appending a "space" instead of clearing the text
@jeffm64 Can you wait for a minute i will provide you with some good links to get you up and running
Toni Shortsleeve
@KoniKodes
Sep 01 2016 19:03
@kunalgupta05 Wahoo! It worked. That makes sense. Can I slice directly on the result then for the backspace?
jeffm64
@jeffm64
Sep 01 2016 19:03
@kunalgupta05 Sure no problem, and thanks I appreciate it!
CamperBot
@camperbot
Sep 01 2016 19:03
jeffm64 sends brownie points to @kunalgupta05 :sparkles: :thumbsup: :sparkles:
:cookie: 336 | @kunalgupta05 |http://www.freecodecamp.com/kunalgupta05
Kunal Gupta
@kunalgupta05
Sep 01 2016 19:04
@KoniKodes of course you can do that i was going to do the same but i got lazy :D
Toni Shortsleeve
@KoniKodes
Sep 01 2016 19:04
@jeffm64 I had a lot of stops and starts, just googling and searching.
jeffm64
@jeffm64
Sep 01 2016 19:06
@KoniKodes I know the feeling, normally researching has given me my answers but most of the resources I've found on this haven't really helped yet.
Sumit Kumar
@spark25
Sep 01 2016 19:06
stuck here
Toni Shortsleeve
@KoniKodes
Sep 01 2016 19:06
@kunalgupta05 I think I did it wrong... I sliced on the screen but can't seem to get it on the html.
@jeffm64 I know, they don't always seem to think like I do...
@spark25 What's wrong?
Sumit Kumar
@spark25
Sep 01 2016 19:07
Everything :P
I am unable to figure out the approach to solve this
Kunal Gupta
@kunalgupta05
Sep 01 2016 19:08
@jeffm64 https://www.youtube.com/watch?v=ecT42O6I_W The guy in this video will show you how to consume an api
jeffm64
@jeffm64
Sep 01 2016 19:08
@KoniKodes Exactly. Makes me wish I had gone to school for computer science over animation. Hands on teachers are always helpful.
Kunal Gupta
@kunalgupta05
Sep 01 2016 19:09
also he is using an openweathermap api exactly what you need
jeffm64
@jeffm64
Sep 01 2016 19:09
@kunalgupta05 Thanks much! That's perfect.
CamperBot
@camperbot
Sep 01 2016 19:09
:warning: jeffm64 already gave kunalgupta05 points
jeffm64 sends brownie points to @kunalgupta05 :sparkles: :thumbsup: :sparkles:
jeffm64
@jeffm64
Sep 01 2016 19:10
@kunalgupta05 hmm it says video not found?
Toni Shortsleeve
@KoniKodes
Sep 01 2016 19:10
@spark25 It wants a function, looks like you need to loop for a lookup and then update the collection. Start with a small function, and just try to do it one at a time.
Kunal Gupta
@kunalgupta05
Sep 01 2016 19:11
@jeffm64 That's weird https://www.youtube.com/watch?v=ecT42O6I_WI try agsain
Toni Shortsleeve
@KoniKodes
Sep 01 2016 19:12
I remember him! He was good.
jeffm64
@jeffm64
Sep 01 2016 19:12
Ah ok that one worked
Kunal Gupta
@kunalgupta05
Sep 01 2016 19:12
@KoniKodes Sorry i didn't get you. You were trying to use slice method on html()?
jeffm64
@jeffm64
Sep 01 2016 19:12
Well I'm off to go figure that out haha. Thanks for the help
Toni Shortsleeve
@KoniKodes
Sep 01 2016 19:12
@jeffm64 Happy Coding!
jeffm64
@jeffm64
Sep 01 2016 19:13
@KoniKodes Same to you!
hakimnasir
@hakimnasir
Sep 01 2016 19:13
This message was deleted
Kunal Gupta
@kunalgupta05
Sep 01 2016 19:13
@jeffm64 Yeah you better do!:D
Toni Shortsleeve
@KoniKodes
Sep 01 2016 19:13
@kunalgupta05 I tried to slice my backspace, and attach it to the result, but it isn't working.
I need to review that video.
Kunal Gupta
@kunalgupta05
Sep 01 2016 19:16
@KoniKodes It won't work that way, what you should try to do is get the length of text in your result and try to slice it character by character on each click until there are no characters left
Toni Shortsleeve
@KoniKodes
Sep 01 2016 19:17
@kunalgupta05 Yes, that is what I was missing. Length (duh!) Thank you so much!
CamperBot
@camperbot
Sep 01 2016 19:17
konikodes sends brownie points to @kunalgupta05 :sparkles: :thumbsup: :sparkles:
:warning: konikodes already gave kunalgupta05 points
Kunal Gupta
@kunalgupta05
Sep 01 2016 19:19
@KoniKodes Happy to be helpful!:)
TristanC123
@TristanC123
Sep 01 2016 19:23
hey guys im trying to shift my time line to the right in my tribute page but it isnt working. any ideas? https://codepen.io/bones880/pen/mAdEaN
Kunal Gupta
@kunalgupta05
Sep 01 2016 19:27
@TristanC123 give it an offset for example in the div which wraps your timeline give a class as in col-md-offset-2
@TristanC123 So your div will look like this <div class="row col-md-offset-2 col-md-4"> You can change the amount of offset as per your need
Ian
@IMLaing
Sep 01 2016 19:31
@TristanC123 do you mean all the way to the right of the window or just the text within that container?
Karl
@karln2003
Sep 01 2016 19:31
Using bootstrap to make my images responsive in my tribute page, 2 images side by side. They are of different sizes. I was able to use max height to keep them aligned when full screen, but it throws it off when i make the window smaller
Should I just crop the images to make them the same size in an image editor?
Kunal Gupta
@kunalgupta05
Sep 01 2016 19:32
@TristanC123 Why are you giving class as in row and col-md-4 to the same div i don't think it is correct
You need to wrap your div with class col-md- within a div with a class row which is wrapped within a div with container class
TristanC123
@TristanC123
Sep 01 2016 19:36
@kunalgupta05 didnt work
@IMLaing no I dont want it all the way to the right I just want the Time line to be shifted more to the right, so it isnt on the edge of the container
@kunalgupta05 should i put the col-md-offset 2 into which container
Karl
@karln2003
Sep 01 2016 19:41
@TristanC123 should be a way to use padding right?
TristanC123
@TristanC123
Sep 01 2016 19:42
not sure Ill try it @karln2003
Kunal Gupta
@kunalgupta05
Sep 01 2016 19:42
@TristanC123 some padding-left will do just fine
Tyler Moeller
@TylerMoeller
Sep 01 2016 19:43
@TristanC123 Use the bootstrap grid system as @kunalgupta05 suggested. Here are some examples of moving a grid item to the right so it is centered: http://getbootstrap.com/css/#grid-offsetting
TristanC123
@TristanC123
Sep 01 2016 19:43
@kunalgupta05 @karln2003 geez, I dont know why i didnt try that. Thanks anyways guys!
CamperBot
@camperbot
Sep 01 2016 19:43
tristanc123 sends brownie points to @kunalgupta05 and @karln2003 :sparkles: :thumbsup: :sparkles:
:cookie: 120 | @karln2003 |http://www.freecodecamp.com/karln2003
:cookie: 337 | @kunalgupta05 |http://www.freecodecamp.com/kunalgupta05
Karl
@karln2003
Sep 01 2016 19:43
I used <span class="pull-right"> to shift my image to the right
My images are the same height, but when i resize the window they get thrown off by img-responsive
Tyler Moeller
@TylerMoeller
Sep 01 2016 19:44
@karln2003 It's easiest to make all your images with the same proportions. There are other options, like JS libraries that could help you: http://brm.io/jquery-match-height/
Karl
@karln2003
Sep 01 2016 19:45
I used max-height to make them the same height full screen
ah ok thats what I was wondering - if I should just edit the images in an editor. Suppose its not worth the code investment in this minor scenario
@TylerMoeller thanks
CamperBot
@camperbot
Sep 01 2016 19:45
karln2003 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 783 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Sep 01 2016 19:46
If it's just two pictures, you could change the proportions of one to match the other fairly quickly and then upload to https://postimage.org/
Karl
@karln2003
Sep 01 2016 19:49
thanks for the link @TylerMoeller this site should be useful now and in the future
CamperBot
@camperbot
Sep 01 2016 19:49
karln2003 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: karln2003 already gave tylermoeller points
Tyler Moeller
@TylerMoeller
Sep 01 2016 19:49
Any time!
Evan Crowe
@ezcrowe
Sep 01 2016 19:53
I have a quick question: Doing the Tribute page project. In the example page (https://codepen.io/FreeCodeCamp/full/NNvBQW/) how do you get the caption for the picture to be included in the bottom border of the picture? I am able to put a separate paragraph line under the picture, but not sure how to include it with the picture. If this doesn't make sense, please ask me to clarify.
Taras Yaremkiv
@Y-Taras
Sep 01 2016 19:54
Hello Campers! I'm doing a tic tac toe project and got stuck.
Can't find where the problem with my code is.
This code works fine only if I comment 56th line but if I don't - it types me
Uncaught TypeError: Cannot read property 'length' of undefined
https://gist.github.com/Y-Taras/15b834b04744e4507cc934a3c3b71369.js
Albert Marsnik
@acmarsnik
Sep 01 2016 19:58
This message was deleted
Albert Marsnik
@acmarsnik
Sep 01 2016 20:04

Hi can someone take a look at my Show the Local Weather App on CodePen and let me know why it isn't working?

I just want it to show the latitude and longitude at this point, but nothing is showing up right now.

Any help would be appreciated, link below.

http://codepen.io/acmarsnik/pen/qaBkvj

Thanks.

hakimnasir
@hakimnasir
Sep 01 2016 20:05
any node js and request module experts here?
Stacey
@anastasi5
Sep 01 2016 20:05
@camnicklaus , @wearenotgroot , @khaduch , Thanks!
CamperBot
@camperbot
Sep 01 2016 20:05
anastasi5 sends brownie points to @camnicklaus and @wearenotgroot and @khaduch :sparkles: :thumbsup: :sparkles:
:cookie: 266 | @camnicklaus |http://www.freecodecamp.com/camnicklaus
:star2: 1549 | @wearenotgroot |http://www.freecodecamp.com/wearenotgroot
:star2: 1617 | @khaduch |http://www.freecodecamp.com/khaduch
BenBryant
@BenBryant
Sep 01 2016 20:06
Hi, I am trying to make a <ul> and the text is centering but the bullet point is staying left aligned. how do I fix this? thanks
Stephen James
@sjames1958gm
Sep 01 2016 20:13
@acmarsnik If you are on chrome - chrome only allows getting current position from https:// addresses. You can connect to codepen over https:// you will then run into an issue with openweather and https://
You can use a proxy to go to openweather over http://
https://crossorigin.me/
Albert Marsnik
@acmarsnik
Sep 01 2016 20:20
@sjames1958gm Thank you!!! I got it working by connecting to codepen over https://
CamperBot
@camperbot
Sep 01 2016 20:20
acmarsnik sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 3012 | @sjames1958gm |http://www.freecodecamp.com/sjames1958gm
Stephen James
@sjames1958gm
Sep 01 2016 20:23
@acmarsnik :+1:
MubashirAliSiddiqui.
@mubashiralisiddiqui
Sep 01 2016 20:32
how we can use the image which is not hosted on web in codepen
Stacey
@anastasi5
Sep 01 2016 20:33
OK... Here it is... I surrender... This is as good as I can get it...
http://codepen.io/anastasi55/pen/vKQbVZ
MubashirAliSiddiqui.
@mubashiralisiddiqui
Sep 01 2016 20:36
i want to use the img which is on my pc folder how i can use it
karocann
@karocann
Sep 01 2016 20:37
Working a navbar for the Portfolio project. How do put distance between the brand and the buttons? I would like to have the brand near the left side and the buttons (grouped together) near the right side.
MubashirAliSiddiqui.
@mubashiralisiddiqui
Sep 01 2016 20:37
@karocann use margin
karocann
@karocann
Sep 01 2016 20:38
ok. I'll check it out
Stacey
@anastasi5
Sep 01 2016 20:38
@davisec52 , thanks for the tips - I was trying to imitate the sample from FCC... How can I get that spacing without the Bootstrap columns?
CamperBot
@camperbot
Sep 01 2016 20:38
anastasi5 sends brownie points to @davisec52 :sparkles: :thumbsup: :sparkles:
:cookie: 461 | @davisec52 |http://www.freecodecamp.com/davisec52
Stacey
@anastasi5
Sep 01 2016 20:41
@davisec52 , are some of those classes automatic from Bootstrap?
baciualexandru
@baciualexandru
Sep 01 2016 20:47
hello is there someone from Detroit Michigan?
Tyler Moeller
@TylerMoeller
Sep 01 2016 20:48
@mubashiralisiddiqui You can use a site like https://postimage.org/ to upload your picture and get a link
@karocann If you're using bootstrap, use the navbar-right class on your <ul> tag. See this for an example of both left and right buttons: http://getbootstrap.com/components/#navbar
@baciualexandru You can try here: https://gitter.im/FreeCodeCamp/Detroit
MubashirAliSiddiqui.
@mubashiralisiddiqui
Sep 01 2016 21:00
i lost my work on my pen code can i get that ?? i want my work back help plz
Joseph Raper
@jraper13
Sep 01 2016 21:01
hey guys almost complete with the Build a tribute page. Can anyone just look over the part where i have the Image frame and caption and see if it looks okay? im positive there are ways to improve it
-http://codepen.io/jraper13/pen/RGbmVj
MubashirAliSiddiqui.
@mubashiralisiddiqui
Sep 01 2016 21:04
@TylerMoeller can i get my work back i lost my portfolio
baciualexandru
@baciualexandru
Sep 01 2016 21:05
@TylerMoeller ty
CamperBot
@camperbot
Sep 01 2016 21:05
baciualexandru sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 784 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Sep 01 2016 21:06
@mubashiralisiddiqui I'm afraid not. You need to press save once in codepen, then it autosaves after every 15 changes.
If you lose your entire pen, it was never saved
the doer
@ewathedoer
Sep 01 2016 21:06
@jraper13 it looks fine on desktop
MubashirAliSiddiqui.
@mubashiralisiddiqui
Sep 01 2016 21:07
i have save this but how i can acces pen.io says you dont have any pen
the doer
@ewathedoer
Sep 01 2016 21:08
@jraper13 you may want to recheck it on mobile and use sth instead of px, e.g. ems
MubashirAliSiddiqui.
@mubashiralisiddiqui
Sep 01 2016 21:08
i save my work many time
Joseph Raper
@jraper13
Sep 01 2016 21:09
@ewathedoer yes it works well on desktop but small sized it gets a little messy
the doer
@ewathedoer
Sep 01 2016 21:12
exactly @jraper13
kirk tuggle
@iamtuggle
Sep 01 2016 22:37
im having some trouble with fa fa icons, can someone help
Piotr Brasiński
@pq25
Sep 01 2016 22:43
Hi guys, could you tell me do you have any problems viewing this pen:
http://codepen.io/pq25/pen/JRjNOR
Works for me via opera, mozilla and ie but somehow I cannot open it with chrome...
Jason Luboff
@JLuboff
Sep 01 2016 22:44
@iamtuggle did you load FontAwesome into your Codepen? And are you using the icons correctly? I.e <i class="fa fa-circle"></i>
@pq25 Geolocation won't work over http with Chrome. You'll have to either use a different method (i.e IP based) or use https://crossorigins.me to prepend your openweather api url (i.e https://crossorigins.me/http://openweather...) and then load your codepen over https instead of http
I got the wrong url there, hold on
Piotr Brasiński
@pq25
Sep 01 2016 22:46
@JLuboff thanks a lot!
CamperBot
@camperbot
Sep 01 2016 22:46
pq25 sends brownie points to @jluboff :sparkles: :thumbsup: :sparkles:
:cookie: 341 | @jluboff |http://www.freecodecamp.com/jluboff
kirk tuggle
@iamtuggle
Sep 01 2016 22:47
@JLuboff i think so, i can show you the code to make sure that i'm writing it right
Jason Luboff
@JLuboff
Sep 01 2016 22:48
@iamtuggle Lets see it
kirk tuggle
@iamtuggle
Sep 01 2016 22:48

@JLuboff <li><a href="#"><i class="fa fa-linkedin"></i></a></li>

<li><a href="#"><i class="fa fa-twitter"></i></a></li>

<li><a href="#"><i class="fa fa-google-plus"></i></a></li>

Jason Luboff
@JLuboff
Sep 01 2016 22:49
Ok, that looks right...are you doing this in Codepen?
kirk tuggle
@iamtuggle
Sep 01 2016 22:49
yeah
Jason Luboff
@JLuboff
Sep 01 2016 22:49
Can you post the url?
kirk tuggle
@iamtuggle
Sep 01 2016 22:49
sure
Jason Luboff
@JLuboff
Sep 01 2016 22:51
@iamtuggle Got it. You need to "load" or "add" FontAwesome like you do bootstrap. Go to http://fontawesome.io/get-started/ and put in your e-mail address on that page. When you get the e-mail with your personilized URL, you can add it either in your HTML "Head" settings as the full thing or under your CSS below where you ahve bootstrap loaded
kirk tuggle
@iamtuggle
Sep 01 2016 22:52
@JLuboff thanks
CamperBot
@camperbot
Sep 01 2016 22:52
iamtuggle sends brownie points to @jluboff :sparkles: :thumbsup: :sparkles:
:cookie: 342 | @jluboff |http://www.freecodecamp.com/jluboff
Jason Luboff
@JLuboff
Sep 01 2016 22:53
:+1: Good luck
kirk tuggle
@iamtuggle
Sep 01 2016 22:58
@JLuboff got this message: The URL "" is invalid. Use the format http://domain/path.css
i added to the head section
Jason Luboff
@JLuboff
Sep 01 2016 22:59
If you add it to the Head it requires the entire <script>url</script>
Hope you get it figured out, I have to be going!
kirk tuggle
@iamtuggle
Sep 01 2016 23:00
okay
Gerard Hart
@GerardHart
Sep 01 2016 23:19
hello everyone I was wondering someone could take of look at my code and tell me how to change the background color to my nav bar
Brian Dela Cruz
@bl2i4n
Sep 01 2016 23:31
Hi everyone having some trouble with the background colors on my social media buttons for my personal portfolio page, something is causing the background of my social media buttons to appear dark blue
please help :(
Aaron
@apalm1341
Sep 01 2016 23:39
Hey all could someone help me please?
Stephen James
@sjames1958gm
Sep 01 2016 23:39
@apalm1341 Probably
Stephen James
@sjames1958gm
Sep 01 2016 23:40
What is the issue?
Aaron
@apalm1341
Sep 01 2016 23:42
I am having problems with my media queries for trying to make my code responsive across different devices
It isn't working well from my phone. Fine on laptop. And I have no idea if it works okay on a tablet or desktop because I don't have one
Stephen James
@sjames1958gm
Sep 01 2016 23:43
@apalm1341 FYI if you are on chrome the devtools has the ability to simulate many devices.
Aaron
@apalm1341
Sep 01 2016 23:44
@sjames1958gm What do you mean?
I am not really good with using devtools
Stephen James
@sjames1958gm
Sep 01 2016 23:44
@apalm1341 Are you on a mac or windows?
Aaron
@apalm1341
Sep 01 2016 23:44
windows
Stephen James
@sjames1958gm
Sep 01 2016 23:45
@apalm1341 Press F12 and up at the top left of the devtools is a icon that you can click and it will go into device mode
@apalm1341 Also ctrl-shift-M with devtools open will switch as well
Aaron
@apalm1341
Sep 01 2016 23:47
okay...
now what?
Stephen James
@sjames1958gm
Sep 01 2016 23:49
@apalm1341 There is drop down that allows you select different device types. (near the center top)
hakimnasir
@hakimnasir
Sep 01 2016 23:50
anyone familiar with making api calls with request module?
Aaron
@apalm1341
Sep 01 2016 23:51
@sjames1958gm okay I see
Aaron
@apalm1341
Sep 01 2016 23:57
@sjames1958gm It won't let me have my developer tools right in front of this page
it shows up underneath this page