These are chat archives for FreeCodeCamp/HelpFrontEnd

5th
Sep 2016
Ben Matheson
@benmatheson
Sep 05 2016 00:15
Hello friends. I'm having a heck of a time with the random quote generator. I'm attempting to use a click event to pull JSON from an endpoint with .getJSON and append to a div. Any suggestions would be great! https://codepen.io/benmatheson/pen/VjoKrm
Michael Cavataio
@MCavataio
Sep 05 2016 00:24
@benmatheson reall close one of the issues is retrieving the data from the endpoint $('#words').appendTo(data.contents.quotes1.quote);
$('#words').appendTo(data.contents.quotes[1].quote)
if you log the way the data is retrieved from that point you'll want to grab the data.contens.quotes[0].quote
and then you'll want to use a different method then appendTo to update the text
Aaron
@apalm1341
Sep 05 2016 00:28
Can someone help me with my form in my portfolio project?
vínαч puppαl
@vinaypuppal
Sep 05 2016 00:45
@benmatheson Your Quotes API wont work on https:// so load your pen on http:// and you forgot to Load JQuery in codepen, and your accessing response data incorrectly. see below code for reference and use append instead of appendTo
$('#words').append(data.contents.quotes[0].quote);
Eric Murta
@murtinha
Sep 05 2016 01:20
Guys, can somebody help me? I'm stuck on the tictactoe game, my code is big and a little complex for you to understand but I'd appreciate a little help. I dont know why but its not working on codepen so I only have it on sublime... pm me if you wanna help!
Ben Matheson
@benmatheson
Sep 05 2016 01:39
@vinaypuppal @MCavataio Thanks Vinay and Michael! Getting much closer..
CamperBot
@camperbot
Sep 05 2016 01:39
benmatheson sends brownie points to @vinaypuppal and @mcavataio :sparkles: :thumbsup: :sparkles:
:cookie: 4 | @mcavataio |http://www.freecodecamp.com/mcavataio
:cookie: 484 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
Michael Cavataio
@MCavataio
Sep 05 2016 01:50
@benmatheson you'll also want to use .text instead of .append
unless you want to continuously add to the div
.text will replace the text that is currently there
Oliver Bennett
@omwbennett
Sep 05 2016 02:37
Hi guys, im trying to do the local weather project on codepen, but im getting a "PERMISSION.DENIED" error when trying to get the navigator.geolocation data. However I dont get the usual popup in chrome asking me to allow location data, so is this a problem with codepen?
aushakov95
@aushakov95
Sep 05 2016 02:48
@omwbennett shouldn’t be a problem with codepen. Are you sure you didn’t deny the use of your location for your pen before?
Oliver Bennett
@omwbennett
Sep 05 2016 02:49
yeah i had the site set to always ask anyway
ive managed to get the allow/deny prompt to come now by switching to the https version of codepen
aushakov95
@aushakov95
Sep 05 2016 02:50
@omwbennett does it work now when you allow it?
Oliver Bennett
@omwbennett
Sep 05 2016 02:53
@aushakov95 its not returning a position atm
aushakov95
@aushakov95
Sep 05 2016 02:54
@omwbennett can you show your code where you are using navigator?
billpzt
@billpzt
Sep 05 2016 02:56
Hello! Can anyone explain how I'm supposed to make a Twitter share button for the Quote Machine challenge? I've looked up Twitter share buttons but they only share the URL. I went to a page that has random quotes and a Twitter button and inspected the HTML code, but the link already comes with the text that's supposed to be shared in it, so it didn't help much...
Oliver Bennett
@omwbennett
Sep 05 2016 02:57
@billpzt have a look at this: https://dev.twitter.com/web/intents
billpzt
@billpzt
Sep 05 2016 02:57
I mean, I don't know how the text to be shared was inserted in the HTML...
@omwbennett Ok, having a look!
Oliver Bennett
@omwbennett
Sep 05 2016 02:58
@aushakov95 found out its getting the correct position but not storing them in the global vars for some reason: https://codepen.io/omwbennett/pen/pEoGyQ/
billpzt
@billpzt
Sep 05 2016 03:00
@omwbennett Seems like this may really help, thanks!
CamperBot
@camperbot
Sep 05 2016 03:00
billpzt sends brownie points to @omwbennett :sparkles: :thumbsup: :sparkles:
:cookie: 264 | @omwbennett |http://www.freecodecamp.com/omwbennett
aushakov95
@aushakov95
Sep 05 2016 03:01
@omwbennett Yea, that’s a problem, it has to do with navigator being an asynchronous function. Even when you assign a variable to data from navigator the variable will not be changed later on in the code. I am still trying to figure asynchronous functions, but I think what I did for my weather project was change the html content from within the navigator function.
Oliver Bennett
@omwbennett
Sep 05 2016 03:03
@aushakov95 hmm yeah guess I could call the openweather API and update the html all through the navigator callback instead of using global vars to store everything
aushakov95
@aushakov95
Sep 05 2016 03:03
@omwbennett Yup, that’s pretty much what I did as well
Oliver Bennett
@omwbennett
Sep 05 2016 03:03
@aushakov95 thanks for your help!
CamperBot
@camperbot
Sep 05 2016 03:03
omwbennett sends brownie points to @aushakov95 :sparkles: :thumbsup: :sparkles:
:cookie: 295 | @aushakov95 |http://www.freecodecamp.com/aushakov95
aushakov95
@aushakov95
Sep 05 2016 03:04
@omwbennett No problem, let me know if you have any more issues
billpzt
@billpzt
Sep 05 2016 03:07
@omwbennett I read the page, still don't know how to do it...
Oliver Bennett
@omwbennett
Sep 05 2016 03:10
@billpzt did you read through this as well https://dev.twitter.com/web/tweet-button/web-intent
billpzt
@billpzt
Sep 05 2016 03:11
@omwbennett No, will read it now!
@omwbennett :+1:
billpzt
@billpzt
Sep 05 2016 03:21
@omwbennett Thanks again, but these pages are probably perfect for someone who has already had lessons on how to use share buttons and just needs to learn how Twitter does it specifically. I have NO idea whatsoever how to use share buttons. At all! :smile:
CamperBot
@camperbot
Sep 05 2016 03:21
billpzt sends brownie points to @omwbennett :sparkles: :thumbsup: :sparkles:
:warning: billpzt already gave omwbennett points
gs-developer
@gs-developer
Sep 05 2016 03:22
Guys can you change the font property of a label?
billpzt
@billpzt
Sep 05 2016 03:25
I think Free Code Camp needs to review some of these lessons leading up to the challenges. Teaching the student to look stuff up on their own is one thing (and it's great), but if I'm going to have to learn everything about certain challenges from scratch I might as well be doing another course! Had no idea how to use an API for example, had to do two tutorials in other sites and I still don't really get it...
gs-developer
@gs-developer
Sep 05 2016 03:26
@billpzt For shich challenge did you have to look up api?
@billpzt Which*
billpzt
@billpzt
Sep 05 2016 03:26
@gs-developer Random Quote Machine
Oliver Bennett
@omwbennett
Sep 05 2016 03:26
@billpzt yup i agree, the API lessons were terrible.
billpzt
@billpzt
Sep 05 2016 03:27
Yeah, most of the previous lessons were great up to those...
So I copied and pasted code to make the Twit button, it opens the Twitter share page. Fine. Actually I had already done that, but all I was able to do was share the current URL. I also copied and pasted their JavaScript and the page seemed to load faster. Still have no idea how to alter the text that gets tweeted when I click on their button...
Ben Matheson
@benmatheson
Sep 05 2016 03:31
@MCavataio Sweet. Any familiarity with getting http CodePen (not https) to work in Chrome? Firefox will to http but having a tough time in Chrome.
Giancarlos C.
@GianCastle
Sep 05 2016 03:32
@billpzt Have you tried something like this?
 $('#btn-twitter').attr('href','https://twitter.com/intent/tweet?text=' + quote);
billpzt
@billpzt
Sep 05 2016 03:33
@GianCastle How does that work?
How do I get the quote that's referenced there at the end?
Gang Zhao
@crumpx
Sep 05 2016 03:34
get
Giancarlos C.
@GianCastle
Sep 05 2016 03:35
You can try an array of quotes too @billpzt :)
billpzt
@billpzt
Sep 05 2016 03:39
@GianCastle Sure, that's a solution, but then I don't get to use the API that took me a week to get working! :laughing:
Giancarlos C.
@GianCastle
Sep 05 2016 03:40
Wich API are you using?
J4yKay
@J4yKay
Sep 05 2016 03:40
Hey guys, I can’t figure out why my lines at the top aren’t corresponding to those on the bottom. It was originally when there was only one col in the row. http://codepen.io/J4yKay/pen/YWmERz
billpzt
@billpzt
Sep 05 2016 03:42
@GianCastle Something I picked up at https://quotesondesign.com/
@GianCastle I don't even remember which one it was, they have a newer one and an older one. I just managed to copy/paste and had some help here from the forum and it finally worked!
billpzt
@billpzt
Sep 05 2016 03:47
Well, it's late here, will keep trying tomorrow. Thanks @GianCastle
CamperBot
@camperbot
Sep 05 2016 03:47
billpzt sends brownie points to @giancastle :sparkles: :thumbsup: :sparkles:
:cookie: 362 | @giancastle |http://www.freecodecamp.com/giancastle
Fernand
@Ferdyboy81
Sep 05 2016 05:26
This message was deleted
This message was deleted
This message was deleted
Norvin Burrus
@ndburrus
Sep 05 2016 05:26
@mjcreate you're welcome! enjoy! :palm_tree:
NixonRichard
@NixonRichard
Sep 05 2016 06:19
function convertToRoman(num) {
  var decimalVal = [1, 4, 5, 9, 10, 40, 50, 90, 100, 400, 500, 900, 1000].reverse();

  var romanNumeral = ['I', 'IV', 'V', 'IX', 'X', 'XL', 'L', 'XC', 'C', 'CD', 'D', 'CM', 'M'].reverse();

  var String = "";// this ll out put the roman numeral string but im not done yet  so it s doing nothing for now

  for ( var i = 0 ; i < decimalVal.length ; i ++ ) {
    if ( decimalVal[i] <= num ) {

      num / decimalVal[i] ;



    }
  }

}

convertToRoman(36);
hi there what do i hve to do next ?
William Maes
@maeswilliam
Sep 05 2016 06:27
Hello everyone, i'm gonna start the tribute page. I wish to implement boostrap features in brackets because codepen.io is a big hassle for me to code..i know it's through the extension, but any idea which version or what should i add of bootstrap?
kat-mag
@kat-mag
Sep 05 2016 06:45
@maeswilliam just click the quickadd in codepen css settings ;p
kirbyedy
@kirbyedy
Sep 05 2016 06:45
since the tribute page is not a demanding project, any bootstrap version will do
you will use only some basic bootstrap
William Maes
@maeswilliam
Sep 05 2016 06:50
@kat-mag codepenn is a pain in the ass for coding, i know you can widen the windows but i learn to code through brackets...
@kirbyedy am i supposed to link this: "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" somewhere in my brackets? head?
kirbyedy
@kirbyedy
Sep 05 2016 07:04
yes
and the second one as well
Henry Cabello
@hacu9
Sep 05 2016 07:29
How can i get search out of the click function ? https://codepen.io/cabello986/pen/ALjOqL?editors=1010
r2d2
@UsamaHameed
Sep 05 2016 08:15
Use the wikipedia API @hacu9
Cormac Curtis
@curtiscormac
Sep 05 2016 08:59
Hi folks - I'm having click event issues here... my code will not return anything from the JSON API I'm trying to use... https://codepen.io/Cormaccurtis/pen/GjRQyy Where am I messing up?
kirbyedy
@kirbyedy
Sep 05 2016 09:01
@curtiscormac you are missing one }); at the end of your js
and an S in the http link to quotesondesign api
Cormac Curtis
@curtiscormac
Sep 05 2016 09:03
@kirbyedy your eagle eyes never let you down! Thanks so much!!!!
CamperBot
@camperbot
Sep 05 2016 09:03
curtiscormac sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1344 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
Lidia Wisniewska
@lidiawisniewska
Sep 05 2016 10:03
hi everyone! whats the best way to set the background image the size of the device?
Palakurthi Durga Kiran Kumar
@durgakiran
Sep 05 2016 10:36
@lidiawisniewska background-image: url('') cover; may work
This message was deleted
This message was deleted
Cormac Curtis
@curtiscormac
Sep 05 2016 10:50
Has anyone used http://quotesondesign.com/api-v4-0/ for the random quote generator by any chance?
The code they use keeps returning the same quote - I adjusted it, but I'm not 100% sure it's the best way to use it
Gary Siu
@GarySiu
Sep 05 2016 10:52
@curtiscormac The example from their docs seems to work fine
Oh the codepen sample doesn’t seem to work properly. That’s a little weird but the API itself seems to work fine.
Cormac Curtis
@curtiscormac
Sep 05 2016 10:55
@GarySiu - Would you mind taking a look at my codepen? https://codepen.io/Cormaccurtis/pen/GjRQyy - I changed =1&callback= to +Math.random()...
Stephen James
@sjames1958gm
Sep 05 2016 10:57
@curtiscormac You could request a number of quotes to start and just randomize over those?
@curtiscormac Although it appears by telling it some random fraction for pages gets a different quote each time :)
kirbyedy
@kirbyedy
Sep 05 2016 11:00
@curtiscormac if you add this line in your js it should work: $.ajaxSetup({cache: false})
Cormac Curtis
@curtiscormac
Sep 05 2016 11:00
@sjames1958gm - thanks for that! It's behaving itself now... I'm was curious if anyone had used the same API as part of their solution.
CamperBot
@camperbot
Sep 05 2016 11:00
curtiscormac sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 3086 | @sjames1958gm |http://www.freecodecamp.com/sjames1958gm
Cormac Curtis
@curtiscormac
Sep 05 2016 11:01
@kirbyedy - thanks yet again... I'll give that a go!
CamperBot
@camperbot
Sep 05 2016 11:01
curtiscormac sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1345 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
Stephen James
@sjames1958gm
Sep 05 2016 11:05
@kirbyedy That influences $.getJSON?
Cormac Curtis
@curtiscormac
Sep 05 2016 11:05
@kirbyedy - can you tell me what effect that Ajax code had on it?
kirbyedy
@kirbyedy
Sep 05 2016 11:05
no cache as you can see
cache: false
just to be clear, I did not invented that, someone here mentioned it long time ago :)
Cormac Curtis
@curtiscormac
Sep 05 2016 11:06
Good of you to be so honest @kirbyedy ! :-)
Gary Siu
@GarySiu
Sep 05 2016 11:07
@curtiscormac You need to disable caching
kirbyedy
@kirbyedy
Sep 05 2016 11:07
well many users are stuck on this and similar stuff, I am the crazy one who keeps most of those stuff saved somewehere
Oh I see someone else brought it up :)
Cormac Curtis
@curtiscormac
Sep 05 2016 11:10
Great link @GarySiu - thanks!
CamperBot
@camperbot
Sep 05 2016 11:10
curtiscormac sends brownie points to @garysiu :sparkles: :thumbsup: :sparkles:
:cookie: 242 | @garysiu |http://www.freecodecamp.com/garysiu
Cormac Curtis
@curtiscormac
Sep 05 2016 11:10
Every little helps!
santosh
@coderpsk
Sep 05 2016 11:20
hello world
CamperBot
@camperbot
Sep 05 2016 11:20

welcome to FreeCodeCamp @coderpsk!

santosh
@coderpsk
Sep 05 2016 11:20
thanks
Cormac Curtis
@curtiscormac
Sep 05 2016 11:26
Welcome @coderpsk
Norvin Burrus
@ndburrus
Sep 05 2016 11:26
@coderpsk
Welcome to fcc!!
Explore, enjoy, learn, and happy coding! :sparkles:
Palakurthi Durga Kiran Kumar
@durgakiran
Sep 05 2016 11:57
why sometimes css code written on separate file won't work?
Ken Haduch
@khaduch
Sep 05 2016 12:01
@durgakiran - you have to be able to include it in your page. If you are using CodePen, you have to have a fully qualified path to the external CSS file (http://etc) unless you have a paid account, then you can upload and store files. If you are developing on an ISP or your local system and using localhost, then you can load the files with just a pathname. Is that what you are having trouble with?
Palakurthi Durga Kiran Kumar
@durgakiran
Sep 05 2016 12:03
@khaduch no, i was coding my weather app in codepen but certain style codes are not working on elements where as same code in html with style attribute is working
http://codepen.io/Durgakiran/pen/BLabby?editors=0100 here is the link to my pen
@khaduch did you get what i was saying?
Ken Haduch
@khaduch
Sep 05 2016 12:07
@durgakiran - not exactly sure - I see that you have a number of style attributes in your HTML, and many in the CSS tab. Can you give an example of something that isn't working as you expected?
William Maes
@maeswilliam
Sep 05 2016 12:08
hey can anyone give me critics on the following projects http://codepen.io/Tywin32/full/XjJgPR/
thanks
Palakurthi Durga Kiran Kumar
@durgakiran
Sep 05 2016 12:10

@khaduch take div with id location

<div id ="location" style = "color: red"></div> is working
whereas in css #location{color: red} is not working

do you get that
kat-mag
@kat-mag
Sep 05 2016 12:11
@maeswilliam looks good. But your list with dates is a pain to read. Maybe think about organizing this part a little better? ^^
William Maes
@maeswilliam
Sep 05 2016 12:11
@kat-mag yeah i know any ideas?
@kat-mag i was thinking about throwing some orange :P
@kat-mag i allready sent my project, **
@kat-mag can i resend it?
kat-mag
@kat-mag
Sep 05 2016 12:12
@maeswilliam I was thinking about simply organizing it in two columns or sth. Color choices are yours :D
@maeswilliam yeah, you can update it always :)
Ken Haduch
@khaduch
Sep 05 2016 12:13
@durgakiran - one thing that could be causing a problem is that CodePen has specific ways to do things - you should not have the <body> tag in the HTML panel, for instance - they have a template that contains the basic page structure and fill everything in from the individual panels. But I'll try that thing that you mentioned.
William Maes
@maeswilliam
Sep 05 2016 12:13
@kat-mag that's not a bad idea kat, cheers :P
Ken Haduch
@khaduch
Sep 05 2016 12:14

@durgakiran - I just added this to the CSS:

#location {
  color: red;
}

and it changed the color of the text when I re-ran the page. I added it at the very bottom of the CSS panel.

Palakurthi Durga Kiran Kumar
@durgakiran
Sep 05 2016 12:15
@maeswilliam data with years is bad make them in an order and bold the years
@khaduch yeah it worked now may be i was so dumb
Ken Haduch
@khaduch
Sep 05 2016 12:17
@durgakiran - this selector #location, #temp, #windspeed{ is what you should have to apply the values to three different IDs, you did not have the commas there.
Palakurthi Durga Kiran Kumar
@durgakiran
Sep 05 2016 12:18
@khaduch you got me thanks
CamperBot
@camperbot
Sep 05 2016 12:18
durgakiran sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1626 | @khaduch |http://www.freecodecamp.com/khaduch
William Maes
@maeswilliam
Sep 05 2016 12:19
@durgakiran yeah i gonna make 2 columns
Shamikk
@Shamikk
Sep 05 2016 12:20
@maeswilliam first date ends with ":", rest ends with "-". Take your choice :)
If you wish to keep text centered, distinct date from the description. Like add the color - you mentioned to use orange, do that. See here: http://codepen.io/Mikka/pen/ALjrGo
Palakurthi Durga Kiran Kumar
@durgakiran
Sep 05 2016 12:22
@maeswilliam remove text-center for data
Ken Haduch
@khaduch
Sep 05 2016 12:24
@durgakiran - you're welcome...
@maeswilliam - I think that your page looks very "crisp" - easy to read the text. I do agree with the comments about the structure of the timeline section - the centering of the text in that section makes it a little difficult to sort out what the list is. But I definitely like the overall page style!
Lukasz
@CatTaker
Sep 05 2016 12:29
Hello nerds, can u help me solve simple problem cos i cant get my head around this
i have an image in a <div> container. Im using bootstrap and i want my image to be in center under h1 and h2 tags
Ken Haduch
@khaduch
Sep 05 2016 12:33
@CatTaker - try adding the class="center-block" to the image
Lukasz
@CatTaker
Sep 05 2016 12:34
damn it worked @khaduch
William Maes
@maeswilliam
Sep 05 2016 12:35
@khaduch @durgakiran thanks for the critics guys
CamperBot
@camperbot
Sep 05 2016 12:35
maeswilliam sends brownie points to @khaduch and @durgakiran :sparkles: :thumbsup: :sparkles:
:cookie: 286 | @durgakiran |http://www.freecodecamp.com/durgakiran
:star2: 1627 | @khaduch |http://www.freecodecamp.com/khaduch
Lukasz
@CatTaker
Sep 05 2016 12:42
this bootstrap is a little confusing for me :D
Ken Haduch
@khaduch
Sep 05 2016 12:52
@CatTaker - there are a lot of things that it has implemented - it takes time to get to learn it (along with the thousand other things that you need to learn) - the thing that would be helpful is to learn more CSS because I think that the center-block just puts a margin: 0 auto; style on the element to center it. A different CSS package might have a differently named class to do the same thing.
Kevin
@txsrangers
Sep 05 2016 13:15
Good morning all. I'm trying to complete the Weather app, and when I try to pull the JSON from openweathermap.org, it's telling me I need to sign up for a free API license with them to get an API key, which I did, but I can't find any documentation as to where I need to put the key in the request. Any help?
Premprakash singh
@PREMPRAKASHSINGH
Sep 05 2016 13:17
Hey guys need help!!
i am on twitchTv project
var result=[]; channels.forEach(function(channel){ result.push(allStreamCall(channel)); });
kat-mag
@kat-mag
Sep 05 2016 13:20
@txsrangers you mean openweathermap? Don't remember which one it was... but: http://openweathermap.org/appid
Ken Haduch
@khaduch
Sep 05 2016 13:20
@txsrangers - I think you add &appid=YOUR_APP_ID as a URL parameter...
Premprakash singh
@PREMPRAKASHSINGH
Sep 05 2016 13:20
the result.push is not working
Kevin
@txsrangers
Sep 05 2016 13:21
Awesome. Thank you so much, @khaduch and @kat-mag
CamperBot
@camperbot
Sep 05 2016 13:21
txsrangers sends brownie points to @khaduch and @kat-mag :sparkles: :thumbsup: :sparkles:
:cookie: 322 | @kat-mag |http://www.freecodecamp.com/kat-mag
:star2: 1628 | @khaduch |http://www.freecodecamp.com/khaduch
kat-mag
@kat-mag
Sep 05 2016 13:22
@PREMPRAKASHSINGH would be easier to check why it doesn't work if you'd link us your codepen ;>
Ken Haduch
@khaduch
Sep 05 2016 13:23
@txsrangers - there you go - from that page: api.openweathermap.org/data/2.5/forecast/city?id=524901&APPID=1111111111 - I was almost right! (maybe lowercase appid would work, too?)
Kevin
@txsrangers
Sep 05 2016 13:24
awesome. thank you, @khaduch
CamperBot
@camperbot
Sep 05 2016 13:24
txsrangers sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:warning: txsrangers already gave khaduch points
Kevin
@txsrangers
Sep 05 2016 13:25
Unfortunately, the lesson leading up to the API challenges doesn't give much help in the way of getting and pushing APIs.
sorry getting and posting to an api
kat-mag
@kat-mag
Sep 05 2016 13:26
@txsrangers Mainly because you access every api in a different way most of the time
Kevin
@txsrangers
Sep 05 2016 13:26
Sigh. I guess I'll just have to get used to that, @kat-mag .
thanks for the help.
I love it when things work : ) . You guys were a big help.
Lukasz
@CatTaker
Sep 05 2016 13:32
@khaduch im stuck on another problem. Im creating unordered list and i want this list to be centered under my image i did put it in the <div class="col-sm-12"> but when i add the class center-block or some other weird shit nothing happens it does not want to center :/
Ken Haduch
@khaduch
Sep 05 2016 13:39
@CatTaker - centering an unordered list is a little tricky. If you just center the list (you could try "text-center" as an added class) you'll see that the bullets will stick to the left, and the text will be centered. Not a really good way to present the list. You can try that, though just to see if text-center does work.
Lukasz
@CatTaker
Sep 05 2016 13:43
@khaduch tryed it and it didnt worked :/ Bullets stays on the left :/
Kevin
@txsrangers
Sep 05 2016 13:43
are you trying to modify the navbar, @Lukasz?
Shamikk
@Shamikk
Sep 05 2016 13:45
@CatTaker You can take two approaches. First - remove bullets from ul li items. Then, just before each text inside li item add a span element with and icon (like from font awsome) or glyph from bootstrap.
Second - do you really need the ul to be centered? Or only the div that contains the list to be centered? If the second, then just center the containing div, and leave ul aligned to left
Ken Haduch
@khaduch
Sep 05 2016 13:47

@CatTaker - the way I centered my text on my tribute page was by doing this:

  <div class="row">
    <div class="col-md-2 hidden-sm hidden-xs"></div>
    <div class="col-md-8 text-left life-summary">
      <div class="h4 text-center">Timeline of Major Life Events</div>
      <div>

        <div class="timeline-li"><span class="timeline-date">1926</span> - Born in Stratford, Connecticut, on February 20 </div>
        <div class="timeline-li"><span class="timeline-date">1944</span> - Entered the Navy </div>
        <div class="timeline-li"><span class="timeline-date">1950</span> - Graduated from MIT with a B.S. in electrical engineering </div>
        <div class="timeline-li"><span class="timeline-date">1952</span> - Awarded an M.A. in electrical engineering by MIT </div>
        <div class="timeline-li"><span class="timeline-date">1957</span> - Co-founded Digital Equipment Corp. (DEC) </div>
        <div class="timeline-li"><span class="timeline-date">1979</span> - Co-founded Boston's Computer Museum </div>
        <div class="timeline-li"><span class="timeline-date">1990</span> - Inducted into the National Inventors Hall of Fame </div>
        <div class="timeline-li"><span class="timeline-date">1992</span> - Retired from his position as President of DEC</div>

      </div>
    </div>
    <div class="col-md-2 hidden-sm hidden-xs"></div>
  </div>
  <!-- end of "row" div -->

Basically making a column in the center of the page. You can see what I ended up with if you look at my tribute page here: Ken Olsen tribute - I put a span with the date, and then the text.

Lukasz
@CatTaker
Sep 05 2016 13:47
Nah i doing the challenge from the codecamp and in this challenge i have to make list under my image. I made the new div and i put the <ul> in this block with the <li> and other stuff. Problem is whatever im centering even the div it does nothing or just allign the text but not the dots
Ken Haduch
@khaduch
Sep 05 2016 13:50
@CatTaker - if you look at my page, you can ignore some things like that "timeline-li" - I was initially creating a <ul> and setting the list item to not have a bullet... but then I just went with this, styling my own div and using the span to highlight the date.
Shamikk
@Shamikk
Sep 05 2016 13:51
@CatTaker first: ul { list-style:none;} in your CSS. Then, in your LI items, add this: <span class='glyphicon glyphicon-ok'></span>. Add a space to separate glyph from text. Should work fine.
@Shamikk if you need other glyph, see here: http://getbootstrap.com/components/
Lukasz
@CatTaker
Sep 05 2016 13:52
why span ? cant exactly understand what does it do :/
Shamikk
@Shamikk
Sep 05 2016 13:53
@CatTaker span is just an inline container
you can use it just to put there anything that needs to be formatted in some way. Well, you can use other inline element (strong, em, i, b, u), just add the bootstrap class there.
Redpass
@Redpass
Sep 05 2016 13:59
hi
Build a Personal Portfolio Webpage i was try to do this for couple hours
then i open code
and i saw that we didnt learn nothing about that Jade and post css
  • i see there is Java Script too
Ken Haduch
@khaduch
Sep 05 2016 14:08
@Redpass - I haven't seen the latest example portfolio page, but when I did mine, I used Bootstrap, and I got a lot of helpful information from the example pages that they showed on http://www.w3schools.com/bootstrap, in the "Themes" section - they walk through the design and implementation of a few different page types. Maybe that will be helpful to you? Basically, "Jade" is just a JS package that gets pre-processed into Javascript, so you can do things in regular javascript if need be. (I forgot that Jade is related to HTML, because I don't use it, something else to learn! - it is a language that gets pre-processed into HTML code, so you can use regular HTML to do whatever they are doing.) I don't think that the w3schools examples use anything other than the Bootstrap code, which there is a bootstrap.js that operates some things like the navbar when you use the collapsible technique that they show.
Ayman97
@Ayman97
Sep 05 2016 14:31
We haven't learn much to build a portfolio site, should i learn some other bootstrap tutorials to make this project or what ?
Ken Haduch
@khaduch
Sep 05 2016 14:41
@Ayman97 - check out the link that I put just above your post - for the http://www.w3schools.com/bootstrap site - check out their "Themes" - they walk you through the layout & development of several pages using bootstrap, and you can use their lessons on individual bootstrap topics for details. I found it to be helpful.
Joris Labie
@labiej
Sep 05 2016 14:46
@Ayman97 I would mock up a really simple portfolio first pass but don't submit it yet. Towards the end of the front end development cycle you'll be better suited to build a nice portfolio + you can populate it
Ken Haduch
@khaduch
Sep 05 2016 14:52
@labiej - that's a good suggestion, too. As long as you have something that is decent, you can submit it and always come back to refine it. If you don't submit it, then it will be a reminder that it is still in progress - but I think that none of the items are "checked" until you complete an entire section? I was never clear on that.
Helena
@poigirl2001
Sep 05 2016 14:52
https://codepen.io/poigirl2001/pen/jrNYwq How do I align the images to the middle?!
Adriana
@Adrianacmy
Sep 05 2016 14:52
anybody can help check the pomodoro clock? my code is just fine in local, but the restart button doesn't work in codepen
Joris Labie
@labiej
Sep 05 2016 14:52
Yep they only check when you want the certificate
Joris Labie
@labiej
Sep 05 2016 14:53
I wouldn't submit because I often start with a blank pen when I make big changes and keep small parts
Helena
@poigirl2001
Sep 05 2016 14:54
Also can someone give me an assignment that involves html and css because I haven't coded in 10 weeks (well now I'm starting back up again) and I want to see what I know
Adriana
@Adrianacmy
Sep 05 2016 14:55
anyone can help with my clock?/ is there any different to run a program between codepen and normal local browser?
Joris Labie
@labiej
Sep 05 2016 14:56
There shouldn't be any difference
Adriana
@Adrianacmy
Sep 05 2016 14:56
my code is just fine in my browser but isnot working in codepen
Joris Labie
@labiej
Sep 05 2016 14:56
Did you copy your final code? Since I don't see any errors in the console meaning it should work
Adriana
@Adrianacmy
Sep 05 2016 14:57
my reset button is not working in code pen , but the same codes just fine in local browser
kat-mag
@kat-mag
Sep 05 2016 14:58
@VenusGrape U sure it's working fine? :D
cause 'reset' != 'restart' ;p
check what you're calling this .click on ;p
Joris Labie
@labiej
Sep 05 2016 15:00
hehe just found it
kat-mag
@kat-mag
Sep 05 2016 15:01
@labiej GJ :D
Joris Labie
@labiej
Sep 05 2016 15:01
A way to check these kind of things is to use console.log to check whether the function fires
kat-mag
@kat-mag
Sep 05 2016 15:02
Yeah
Darren
@evilfrenchguy
Sep 05 2016 15:02

hi everybody

i am at a loss here with this weather challenge. i cannot seem to get any response from the openweather api with jsonp. can anyone offer some help, please?

https://codepen.io/evilfrenchguy/pen/dpPXAg?editors=1011

Adriana
@Adrianacmy
Sep 05 2016 15:02
@kat-mag Thanks!! what a wired mistake...
CamperBot
@camperbot
Sep 05 2016 15:02
:cookie: 323 | @kat-mag |http://www.freecodecamp.com/kat-mag
venusgrape sends brownie points to @kat-mag :sparkles: :thumbsup: :sparkles:
Joris Labie
@labiej
Sep 05 2016 15:03
@evilfrenchguy your api url doesn't contain http://
So it's treated as a local folder
But your methods are weird at best and won't work as far as I can see
have you studied the curriculum on APIs?
Darren
@evilfrenchguy
Sep 05 2016 15:04
how so?
through other sources, yes
Joris Labie
@labiej
Sep 05 2016 15:05
You load the api page as a script but it's served over http only meaning you will get CORS errors
It's easier to use jquery (or native AJAX in js) to call upon APIs
Darren
@evilfrenchguy
Sep 05 2016 15:06
even though it's as jsonp?
normal ajax will give a cross-origin, no?
Joris Labie
@labiej
Sep 05 2016 15:07
Yep but you can use a service like crossorigin.me to avoid this
Check the function getWeather in my pen https://codepen.io/labiej/pen/WvaYya
That's basically all you need to retrieve the info, the other stuff is related to location and display
Darren
@evilfrenchguy
Sep 05 2016 15:09
oh, i've never heard of this. i will investigate. thank you!
Darren
@evilfrenchguy
Sep 05 2016 15:22
@labiej oh my god, i love you. worked like a charm
Helena
@poigirl2001
Sep 05 2016 15:31
https://codepen.io/poigirl2001/pen/jrNYwq why won't the letters flash?
Look at the html code
I'm trying to use jquery
the doer
@ewathedoer
Sep 05 2016 16:06
@poigirl2001 Do you want to use animate.css? I don’t see it included in your code settings and these classes won’t work if you don’t have the library included.
@poigirl2001 plus this class .flashy is only defined in js but not assigned to any element in html if I didn’t miss any occurance
Kevin
@txsrangers
Sep 05 2016 16:14
can anybody provide some insight as to how to get the geolocation to provide coordinates to store in a variable? I can't get anything to work with navigator.geolocation
ming
@ming0808
Sep 05 2016 16:15
Im working on "Build a Tribute Page", how can I center my image?
the doer
@ewathedoer
Sep 05 2016 16:18
@ming0808 if you use Bootstrap you can add a class center-block and omg-responsive http://getbootstrap.com/css/#images
ming
@ming0808
Sep 05 2016 16:21
@ewathedoer Thank you :)
CamperBot
@camperbot
Sep 05 2016 16:21
ming0808 sends brownie points to @ewathedoer :sparkles: :thumbsup: :sparkles:
:cookie: 491 | @ewathedoer |http://www.freecodecamp.com/ewathedoer
r2d2
@UsamaHameed
Sep 05 2016 16:24
Anyone familiar with flexbox?
the doer
@ewathedoer
Sep 05 2016 16:25
a bit @UsamaHameed what’s the problem maybe I can help
r2d2
@UsamaHameed
Sep 05 2016 16:26
You know how you add elements in a flex and they shift to the side? @ewathedoer
the doer
@ewathedoer
Sep 05 2016 16:26
@UsamaHameed you have to start with a parent that has display flex
next you have to align the children
r2d2
@UsamaHameed
Sep 05 2016 16:27
Yes I know. What I want to do is place an element so that it is at the center. Wait let me get the codepen
the doer
@ewathedoer
Sep 05 2016 16:27
ok
I want to place a circle in between these 4 elements.
If I do so, they shift.
Should I use the old position: absolute / relative?
the doer
@ewathedoer
Sep 05 2016 16:28
@UsamaHameed now the circle is as if the border, do you mean this circle to be put in the center but make it smaller, or which one?
rather absolute
if it needs to overlap
r2d2
@UsamaHameed
Sep 05 2016 16:29
I want to add another circle. Which will be smaller and will overlap the 4 colored elements .
the doer
@ewathedoer
Sep 05 2016 16:30
so it’s more about position absolute, centering it and giving it higher z index than the rest of the elements
have you tried that @UsamaHameed ?
r2d2
@UsamaHameed
Sep 05 2016 16:30
Alright.
No.
It cannot be done using flexbox?
the doer
@ewathedoer
Sep 05 2016 16:31
If it needs to overlap easier solution for me is the one given. @UsamaHameed
r2d2
@UsamaHameed
Sep 05 2016 16:32
ok thanks @ewathedoer
CamperBot
@camperbot
Sep 05 2016 16:32
usamahameed sends brownie points to @ewathedoer :sparkles: :thumbsup: :sparkles:
:cookie: 492 | @ewathedoer |http://www.freecodecamp.com/ewathedoer
r2d2
@UsamaHameed
Sep 05 2016 16:39
@ewathedoer there?
the doer
@ewathedoer
Sep 05 2016 16:39
@UsamaHameed here
Why does the circle not center when I set top: 50% ?
the doer
@ewathedoer
Sep 05 2016 16:41
try less like 22% or even number of px from the top
@UsamaHameed
r2d2
@UsamaHameed
Sep 05 2016 16:42
That works but why does 50% not work?
the doer
@ewathedoer
Sep 05 2016 16:44
Because it’s 50% of your viewport and not the rest of elements @UsamaHameed
I suppose
r2d2
@UsamaHameed
Sep 05 2016 16:47
Yes that is it.
So it would not be responsive :/
the doer
@ewathedoer
Sep 05 2016 16:47
:) You can make it responsive with media queries, because generlly now it’s not
r2d2
@UsamaHameed
Sep 05 2016 16:49
Oh well. The kind of work a doer would do :D
the doer
@ewathedoer
Sep 05 2016 16:51
@UsamaHameed tell me if you send it differently, going running now
r2d2
@UsamaHameed
Sep 05 2016 16:51
okay thanks @ewathedoer
CamperBot
@camperbot
Sep 05 2016 16:51
usamahameed sends brownie points to @ewathedoer :sparkles: :thumbsup: :sparkles:
:warning: usamahameed already gave ewathedoer points
gs-developer
@gs-developer
Sep 05 2016 17:38
Are my comments getting deleted? I cant make out.
kat-mag
@kat-mag
Sep 05 2016 17:39
@iggy-sniper You don't have to close the <br> and <hr> tags, Igor. But looks good!
@gs-developer you were posting something? can't really see anything other than this message now ;o
gs-developer
@gs-developer
Sep 05 2016 17:40
@kat-mag That's right. I posted something and I couldnt see it all of a sudden.
Ok. Here it goes again. I am having trouble centering my image horizontally. I used margin: 0 auto; but it's not working
kat-mag
@kat-mag
Sep 05 2016 17:43
@gs-developer did you try setting it with display: block;?
bordersbro
@bordersbro
Sep 05 2016 17:52
Hello guys! I'm working on the second project (the portfolio) and I'm almost done! One question: How exactly do I embed the social media icons if I don't have anywhere to host them?
Giancarlos C.
@GianCastle
Sep 05 2016 17:53
You can use a Icon Font @bordersbro like Font Awesome :smile:
bordersbro
@bordersbro
Sep 05 2016 17:54
Oh that's right! I forgot all about font awesome! I'll review that lesson. Thanks!
gs-developer
@gs-developer
Sep 05 2016 17:54
@kat-mag I am actually trying to figure out how things work instead of just getting done with the challenges. Why doesn't margin: 0 auto; work. https://developer.mozilla.org/en-US/docs/Web/CSS/margin says it should.
Giancarlos C.
@GianCastle
Sep 05 2016 17:54
You welcome, @bordersbro :smile:
kat-mag
@kat-mag
Sep 05 2016 17:55
@gs-developer It' doesn't work, because img is an inline element
when you make it a block element you can center it this way.
gs-developer
@gs-developer
Sep 05 2016 17:56
@kat-mag what i did was <label class="text-center" id="label1">
<img class="img-responsive" src="https://c2.staticflickr.com/4/3689/10613180113_fdf7bcd316_b.jpg" alt="Picture not Found" id="img1"> Dr. Norman Borlaug, second from left, trains biologists in Mexico on how to increase wheat yields - part of his life-long war on hunger.
</label>
@kat-mag I put the image in a label and tried to set the margin for the label in order to center it.
So, I created a custom css class for #label 1 and used margin:0 auto; for the #label1.

@kat-mag #img1{
padding:0px 2px;
margin-bottom: 20px;
}

label1{

background-color:black;
margin: 0 90px;
}

@kat-mag #label1{
background-color:black;
margin: 0 90px;
}
Now I used margin:0 90px; to make it work
@kat-mag But it should also work with margin:0 auto; But it doesn't
kat-mag
@kat-mag
Sep 05 2016 18:00
But isn't a label an inline as well?
gs-developer
@gs-developer
Sep 05 2016 18:00
@kat-mag So why is margin:0 auto; not working but margin:0 90px; is working
kat-mag
@kat-mag
Sep 05 2016 18:00
Gotta check that tho... You got it on codepen?
gs-developer
@gs-developer
Sep 05 2016 18:01
@kat-mag Nope Label has closing tags.
@kat-mag Label is what you used to label radio buttons and check boxes
@kat-mag That's my css and html code that i typed on codepen to complete the first front end development project about Norman Borlaug
kat-mag
@kat-mag
Sep 05 2016 18:02
@gs-developer Uh. If it has a closing tag it doesn't mean it's not inline
gs-developer
@gs-developer
Sep 05 2016 18:02
@kat-mag How do you define an inline element.
You can declare an id or class and allocate it to a label element.
That's what I did
gs-developer
@gs-developer
Sep 05 2016 18:04
Yes Label is an inline element
I put the image in the space bounded by the label tags.
@kat-mag with display:block what's happening is the the width of the label element becomes bigger than the image and the image is placed to the extreme left, instead of the center. so I tried doing padding:auto; for the label but it didnt work
Then I tried doing margin:auto for the image and it still didnt work;
@kat-mag Thanks for the inline element knowledge though.
CamperBot
@camperbot
Sep 05 2016 18:08
gs-developer sends brownie points to @kat-mag :sparkles: :thumbsup: :sparkles:
:cookie: 325 | @kat-mag |http://www.freecodecamp.com/kat-mag
kat-mag
@kat-mag
Sep 05 2016 18:10
@gs-developer you considered throwing bootstrap out when you 'learn' & test stuff in css? ;p
@gs-developer removing the 'img-responsive' class. Setting display: block; margin: 0 auto; So making it a block element - centers it.
But. Your image is too wide. It does get centered, but you do not calculate the original size. You need to set the width so it fits
Block elements can be sized ;)
@gs-developer Didn't remember that label was actually an inline so good reminder for me too ^^
gs-developer
@gs-developer
Sep 05 2016 18:19
@kat-mag Naah it isnt because of class=img-responsive . Just tried it
@kat-mag Tried it with and without img responsive
Cyril Alvarez Adriaansen
@caa1982
Sep 05 2016 18:26
hi
can someone let me know why this code doesnt work
$().getJSON("api.forismatic.com/api/1.0/?method=getQuote&format=json&lang=en", function(data) {
document.getElementById("com").innerHTML = data.quoteText;
});
Stephen James
@sjames1958gm
Sep 05 2016 18:27
@caa1982 No () after the $
Cyril Alvarez Adriaansen
@caa1982
Sep 05 2016 18:27
hmm let me see if it works now
Stephen James
@sjames1958gm
Sep 05 2016 18:28
@caa1982 Also, you need http:// at the front of your url
Cyril Alvarez Adriaansen
@caa1982
Sep 05 2016 18:28
hmm still no luck
kat-mag
@kat-mag
Sep 05 2016 18:30

@gs-developer u mean like this?

#img1{
  padding:0px 2px;
  margin-bottom: 20px;
  width: 100%;
  display: block;
  margin: 0 auto;
}

http://codepen.io/mag_ic/pen/mAyppy ... it is centered. (removed bootstrap class from html too)

Stephen James
@sjames1958gm
Sep 05 2016 18:33
@caa1982 There is an issue with some websites where cross origin requests are not allowed (CORS) JSONP is a mechnism to get around that.
"http://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&lang=en&jsonp=?" this URL has the codes to tell the far end to use JSONP
Cyril Alvarez Adriaansen
@caa1982
Sep 05 2016 18:35
gr8 tks!! I was getting crazy
:)
Stephen James
@sjames1958gm
Sep 05 2016 18:36
@caa1982 :+1:
friesenet21
@friesenet21
Sep 05 2016 19:00
https://crossorigin.me/ also works sometimes :/
bkd705
@bkd705
Sep 05 2016 19:28
anyone need help? I'm bored and don't feel like making a 30th portfolio.
Kyle W Pilkinton
@tadake
Sep 05 2016 19:50
Hey guys im looking for insiration for a full-stack portfolio or maybe tips? i can make the website fine but i have no idea how i should lay it out or what color schemes i should use.
*inspiration
Dragoon555
@Dragoon555
Sep 05 2016 19:56
Hey, I'm doing the project where I make my own portfolio page. Can you tell me what you think so far:https://codepen.io/CodingDragon/pen/akRpdE
I think I answered my own question
Tom Robbins
@tom-robbins
Sep 05 2016 20:15
Hey guys, I'm really stuck on a bug trying to make the Weather App
vínαч puppαl
@vinaypuppal
Sep 05 2016 20:26
@tom-robbins Problem is open weather API doesn't support https. since you loaded your pen over https the API request is blocked. Temporary workaround is use https://crossorigin.me/ as proxy server like https://crossorigin.me/http://api.openweathermap.org/data/2.5/weather?lat=.....
Tom Robbins
@tom-robbins
Sep 05 2016 20:28
oh man, that's really weird
workaround works though!
vínαч puppαl
@vinaypuppal
Sep 05 2016 20:28
@tom-robbins Another way without using proxy server is. Load your pen over http and use http://ip-api.com/json/ to fetch user location and use open weather API
@tom-robbins instead of geolocation
Tom Robbins
@tom-robbins
Sep 05 2016 20:29
@vinaypuppal ok, yeah apparently chrome has banned you from using geolocation if you're not over https
vínαч puppαl
@vinaypuppal
Sep 05 2016 20:31
@tom-robbins yes if you really want to use https and geolocation another weather data provider is https://forecast.io which supports https but it wont send user city in response as openweather API . so its depends on you which things you want to show in UI based on that choose above alternatives.
Tom Robbins
@tom-robbins
Sep 05 2016 20:31
okay, thanks! @vinaypuppal
CamperBot
@camperbot
Sep 05 2016 20:31
tom-robbins sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 485 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
ivanposavec
@ivanposavec
Sep 05 2016 20:53
Can someone help me with the banner image?
Flashards
@Flashards
Sep 05 2016 21:12

@Flashards
// Parameter is a number, and we do math with that parameter
var timesTwo = function(number) {
return number * 2;
};

timesTwo("2");
var newNumber = timesTwo(10);
console.log(newNumber);
What's wrong with the code? The console says: you didn't print out the value of newNumber

greg
@wearenotgroot
Sep 05 2016 21:14
@Flashards what challenge are you working on?
@Flashards
var timesTwo = function(number) {
return number * 2;
};
timesTwo("2"); //<--------------maybe this part is what causing the issue, try and remove the "" on "2" and store it the return value to some variable?
var newNumber = timesTwo(10);
console.log(newNumber);
Flashards
@Flashards
Sep 05 2016 21:16
@wearenotgroot It's an codeacademy exercise
greg
@wearenotgroot
Sep 05 2016 21:16
@Flashards link it?
@wearenotgroot I deleted the paranthesis but it still doesn't work
greg
@wearenotgroot
Sep 05 2016 21:18
@Flashards yep, just remove that
timesTwo("2"); //<-------remove the entire thing
Flashards
@Flashards
Sep 05 2016 21:18
@wearenotgroot jeez, now it works. They should have mentioned to remove it.
@wearenotgroot thanks
CamperBot
@camperbot
Sep 05 2016 21:18
flashards sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
:star2: 1571 | @wearenotgroot |http://www.freecodecamp.com/wearenotgroot
Flashards
@Flashards
Sep 05 2016 21:19
@wearenotgroot thanks
CamperBot
@camperbot
Sep 05 2016 21:19
flashards sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
:warning: flashards already gave wearenotgroot points
greg
@wearenotgroot
Sep 05 2016 21:19
@Flashards np :+1:
Pedro Abel Díaz Sánchez
@coderHook
Sep 05 2016 21:24
How Can I expand a div with a width of a 100% when the screen is small?
PG2W
@PG2W
Sep 05 2016 21:33
Hey guys, I have a small problem and can't figure out what to do, I'm actually trying to build the tribute page and my Kim div is overriding my background div, can anyone help? http://codepen.io/PG2W/pen/BLyYxA
Florencia
@flopywood
Sep 05 2016 21:34
Hello everone! I need some help with my calculator. I can't get the result to compute and I feel like my code is wrong. Here is the codepen http://codepen.io/flopy_dv/pen/RGNoPG?editors=1010
PG2W
@PG2W
Sep 05 2016 21:36
I want a white rectangle behind the Kim and the rectangle is as big as the screen and when I resize it, my Kim resizes too
Norvin Burrus
@ndburrus
Sep 05 2016 21:36
@coderHook ok, so you want a responsive div width using what? html, css, js?
Pedro Abel Díaz Sánchez
@coderHook
Sep 05 2016 21:37
css
I mean, how can I attach a particular width to a screen size, lets say when the screen is xs
I am thinking in bootstrap but cannot see how to attach this both things.
.col-xs {
width: 100%;
}
should work?
LordYamanouchi
@LordYamanouchi
Sep 05 2016 21:42
Does anyone know if this works?
$("img").attr("href", "http://openweathermap.org/img/w/" + data.weather[0].icon + ".png")
Florencia
@flopywood
Sep 05 2016 21:44
@LordYamanouchi why do you have a comma after the "href"?
LordYamanouchi
@LordYamanouchi
Sep 05 2016 21:45
@flopywood It's the format of an attribute, no?
Florencia
@flopywood
Sep 05 2016 21:47
@LordYamanouchi yeah, the href is used to add the link
@LordYamanouchi so that should be href="http.....
LPR-309
@LPR-309
Sep 05 2016 21:50
@flopywood He's using Jquery and targeting that attribute, format's okay
Florencia
@flopywood
Sep 05 2016 21:51
@LPR-309 oh didn't see that sorry
LPR-309
@LPR-309
Sep 05 2016 21:52

@LordYamanouchi Lord, try this

var url = "http://openweathermap.org/img/w/" + data.weather[0].icon + ".png";
$("img").attr("src", url);

This way you're predefining the url to avoid formatting issues with the method

LordYamanouchi
@LordYamanouchi
Sep 05 2016 21:53
@LPR-309 Got that. I think the image is broken though.
var newURL = "http://openweathermap.org/img/w/" + data.weather.icon + ".png";
  $("img").attr("src", newURL)
LPR-309
@LPR-309
Sep 05 2016 21:55
Unsure of the JSON structure of OpenWeather because I didn't use them, but double-check to make sure your path call is right, could be a typo in that maybe
LordYamanouchi
@LordYamanouchi
Sep 05 2016 21:56
@LPR-309 Works. Thanks !
CamperBot
@camperbot
Sep 05 2016 21:56
lordyamanouchi sends brownie points to @lpr-309 :sparkles: :thumbsup: :sparkles:
:cookie: 313 | @lpr-309 |http://www.freecodecamp.com/lpr-309
LPR-309
@LPR-309
Sep 05 2016 21:57
Welcome, glad it does ^^
Pedro Abel Díaz Sánchez
@coderHook
Sep 05 2016 22:04
@ndburrus Is there any way to make a function on sass and say the when the screen is small I want the my variable width change to 100%?
What I need to know is how to call that "small screen" if it is posible with mixins
Darren
@evilfrenchguy
Sep 05 2016 22:06
good evening everyone
Jonathan Coleman
@jondcoleman
Sep 05 2016 22:12
@coderHook you can do that natively in css with media queries
look into that
Florencia
@flopywood
Sep 05 2016 22:23
Guys would anyone help me with my padding and margin? http://codepen.io/flopy_dv/full/RGNoPG/
@evilfrenchguy hello!!
Nathan Christensen
@nateac1
Sep 05 2016 22:24
What do you need help with?
Florencia
@flopywood
Sep 05 2016 22:25
@nateac1 padding
Nathan Christensen
@nateac1
Sep 05 2016 22:27
Ok I'll see what I can do, I'm on mobile so it'll be just a second to get to desktop :smile:
Florencia
@flopywood
Sep 05 2016 22:27
@nateac1 yays thank!!!
CamperBot
@camperbot
Sep 05 2016 22:27
flopywood sends brownie points to @nateac1 :sparkles: :thumbsup: :sparkles:
:cookie: 67 | @nateac1 |http://www.freecodecamp.com/nateac1
Pedro Abel Díaz Sánchez
@coderHook
Sep 05 2016 22:29
@jondcoleman yeap, I know it, max-width should be the property I should pass on the mixin function on Sass but cannot make it work, anyway I set a @media query on that.
Jonathan Coleman
@jondcoleman
Sep 05 2016 22:30
@coderHook not sure about that
Neal Duncan
@ndun4
Sep 05 2016 22:30
@coderHook can you post a code example of what you're trying?
Jonathan Coleman
@jondcoleman
Sep 05 2016 22:30
I don't see how sass could know what the screen size is because it creates the css at compile time
but I'm not a Sass expert
seems to me you would just set the appropriate width for each media query level
Helena
@poigirl2001
Sep 05 2016 22:31
There's a coding language called Sass?
Or am I just seeing things
Neal Duncan
@ndun4
Sep 05 2016 22:32
@jondcoleman Sass just let's you do more with CSS, as well as letting you work faster
Helena
@poigirl2001
Sep 05 2016 22:32
THERE IS A LANGUAGE CALLED SASS?!
Jonathan Coleman
@jondcoleman
Sep 05 2016 22:32
@ndun4 yeah I understand but I don't think you can use a client window size as a variable in Sass
Moisés Man
@moigithub
Sep 05 2016 22:32
@flopywood a tu #screen agregale un margin-right para q no se quede pegado a la derecha
y tus botones estan muy "gordos" quitale un poco el witdh :)
Jonathan Coleman
@jondcoleman
Sep 05 2016 22:32
@poigirl2001 haha yeah!
Pedro Abel Díaz Sánchez
@coderHook
Sep 05 2016 22:33
@ndun4 Yes sure,
@if (max-width: 600px)
        width: 100%
Neal Duncan
@ndun4
Sep 05 2016 22:33
@jondcoleman you sure can. you also can detect the user's actual device screen size as well in some cases
Pedro Abel Díaz Sánchez
@coderHook
Sep 05 2016 22:33
with a query it works perfectly, but I was wondering how to do it with a function in Sass
Jonathan Coleman
@jondcoleman
Sep 05 2016 22:34
@ndun4 how does that work, because the sass is compiled to css before the client receives it
@jondcoleman Sass is just a CSS preprocessor. It compiles to CSS as soon as you run Sass on the SCSS file. But the resulting CSS includes the media queries just like vanilla CSS would
Jonathan Coleman
@jondcoleman
Sep 05 2016 22:37
@ndun4 yeah that's what I was saying - he's trying to use the screen size in a Sass function, not in media queries
the Sass function executes in the pre-processing step and therefore doesn't know screen size
Nathan Christensen
@nateac1
Sep 05 2016 22:39
@flopywood I can't see the CSS in the pen, can you link me to the code?
@flopywood nevermind I got it
Neal Duncan
@ndun4
Sep 05 2016 22:39
@jondcoleman @coderHook I guess I'm not understanding what the goal is?
Jonathan Coleman
@jondcoleman
Sep 05 2016 22:40
I think he's trying to set the width of an element based on screen size, without using media queries
Nathan Christensen
@nateac1
Sep 05 2016 22:41
@flopywood It would be simpler to use a flexbox since you have the right amount of buttons to make it work. Flexboxes are also dreamy when it comes to scaling and making things more responsive.
Neal Duncan
@ndun4
Sep 05 2016 22:41
@jondcoleman I thought he was trying to figure out how to use media queries in Sass lol whoops
Nathan Christensen
@nateac1
Sep 05 2016 22:43
I also wouldn't use margins for spacing. I always use padding and I set the box-sizing property to border-box
I know, shoot me. It's easier that way though
I'll be afk for a few.
Helena
@poigirl2001
Sep 05 2016 22:45
I shall learn it and become the Master of Sass. Then I will tell people I am the master of sass and they'll see I'm not sassy and then they'll be like "What are you talking about?" and I'll be like "The styling language!"
Nathan Christensen
@nateac1
Sep 05 2016 22:45
Is Sass wirth the trouble?
Helena
@poigirl2001
Sep 05 2016 22:46
@nateac1 I just started the course and my answer is HELL YEAH
Neal Duncan
@ndun4
Sep 05 2016 22:46
@nateac1 yes imo. if even you used it just for the variables i would say it is lol
Stephen James
@sjames1958gm
Sep 05 2016 22:47
@poigirl2001 :+1:
Nathan Christensen
@nateac1
Sep 05 2016 22:51
What's the best way to get started with it? I tried a course on it and my head almost blew up!
Pedro Abel Díaz Sánchez
@coderHook
Sep 05 2016 22:53

@ndun4 the goal is that when somone use the Recipe Box app on the phone I want to display it through the whole screen, not just a small portion, thats why I want to change the width to a 100%.

It's ok, I used @media queries to do it, I just ask cause I am curios about the @mixins in Sass :)

Helena
@poigirl2001
Sep 05 2016 22:53
@nateac1 codecademy has a pretty good course
Nathan Christensen
@nateac1
Sep 05 2016 22:54
@poigirl2001 cool I'll take a look, thank you very much
CamperBot
@camperbot
Sep 05 2016 22:54
nateac1 sends brownie points to @poigirl2001 :sparkles: :thumbsup: :sparkles:
:cookie: 217 | @poigirl2001 |http://www.freecodecamp.com/poigirl2001
Neal Duncan
@ndun4
Sep 05 2016 22:56
@coderHook did you check out the link I sent you? It shows you how to include media queries when creating Sass @mixins
Pedro Abel Díaz Sánchez
@coderHook
Sep 05 2016 22:57
@ndun4 yeah Neal thanks, I was also in the Sass documentation page. Couldn't do it work so for the moment I let it with just the @media query
CamperBot
@camperbot
Sep 05 2016 22:57
coderhook sends brownie points to @ndun4 and @media :sparkles: :thumbsup: :sparkles:
:cookie: 57 | @ndun4 |http://www.freecodecamp.com/ndun4
:cookie: 35 | @media |http://www.freecodecamp.com/media
Julie
@jjarocewicz
Sep 05 2016 23:01
hey folks, can anyone help me with getting geolocation from an non https site in chrome?
Florencia
@flopywood
Sep 05 2016 23:08
@moigithub thanks!!!
CamperBot
@camperbot
Sep 05 2016 23:08
flopywood sends brownie points to @moigithub :sparkles: :thumbsup: :sparkles:
:star2: 2118 | @moigithub |http://www.freecodecamp.com/moigithub
Cyril Alvarez Adriaansen
@caa1982
Sep 05 2016 23:22
hi guys
I.m stuck
can somone help
jv
@jv88899
Sep 05 2016 23:26

Can anyone help me out with a quick look at my code? I feel like I'm missing something obvious.

var array = ["freecodecamp", "OgamingSC2"];
        var body = document.body;
        var user = "";

        for (var i = 0; i < array.length; i++) {
            var link = "https://api.twitch.tv/kraken/streams/";
            link += array[i];
            user = array[i];

            $.getJSON(link, function(data) {
                user = array[i];
                if (data.stream !== null) {
                    console.log(data);
                    console.log(user + " is streaming");
                } else if (data.stream === null) {
                    console.log(data);
                    console.log(user + " is not streaming");
                }
            })
        }

When I run the above code, it always console logs OgamingSC2 as the user, and I cannot figure out why.

ok found the solution tks all
Coy Sanders
@coymeetsworld
Sep 05 2016 23:43
@jv88899 has to do with getJSON being an asynchronous call
why do you have user = array[i] listed twice?
Stephen James
@sjames1958gm
Sep 05 2016 23:43
@jv88899 @jv88899 Well it is not obvious - because the callback code runs later user (which is shared by all the callbacks) is set to the last value in the array.
http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example
@jv88899 You would be better served to do array.forEach(function(user) { // then use user here to set your link and to use inside of your callback) })
forEach creates a separate context for each callback
jrtheobald
@jrtheobald
Sep 05 2016 23:57
Hello...anyone know of any guide for 'build a random quote machine'?