These are chat archives for FreeCodeCamp/HelpFrontEnd

9th
Apr 2016
Tien Anh Nguyen
@tienanh2007
Apr 09 2016 00:00
@sjames1958gm i'm still not getting it
so should I add a method inbetween
so that it update coiuld be called after getchannel have been returned ?
could you show me an example :smile:
Stephen James
@sjames1958gm
Apr 09 2016 00:01
@tienanh2007 No, when getChannel returns all that has happened is you have sent http requests off to a remote site. Some time later you success function is called with the response.
Patrick Ayres
@Pat-Ayres
Apr 09 2016 00:02
@tienanh2007 use the "complete" prop on $.ajax so the ordering works correctly: http://codepen.io/patrick-ayres/pen/yOpZdp?editors=1010
Stephen James
@sjames1958gm
Apr 09 2016 00:02
@tienanh2007
function getChannel(channel) {
  $.ajax({
    url: "https://api.twitch.tv/kraken/streams/" + channel,
    success: function(data) {
       // here or in a function you can process the data. 
    }
  });
}
Tien Anh Nguyen
@tienanh2007
Apr 09 2016 00:06
@sjames1958gm @Pat-Ayres ok I think I get it Thank you. Just trying to clarify basically everything in the code happened before the request is actually sent
CamperBot
@camperbot
Apr 09 2016 00:06
tienanh2007 sends brownie points to @sjames1958gm and @pat-ayres :sparkles: :thumbsup: :sparkles:
:star: 250 | @pat-ayres | http://www.freecodecamp.com/pat-ayres
:star: 526 | @sjames1958gm | http://www.freecodecamp.com/sjames1958gm
Tien Anh Nguyen
@tienanh2007
Apr 09 2016 00:06
so I need the complete version to call the function I want to call after
Stephen James
@sjames1958gm
Apr 09 2016 00:06
@tienanh2007 no prob - keep on trucking
Patrick Ayres
@Pat-Ayres
Apr 09 2016 00:08
@tienanh2007 you're welcome. If you open the console on the fork i linked you can see the ordering of when things happen from the console.logs() that I added. I find those are very helpful for me when debugging async ordering in js, good luck!
Erich
@rotor-head
Apr 09 2016 00:52
I'm working on the weather front end project and have a few questions about cache, global variables, and the JSON request.
Noah Fleitz
@burningPluto
Apr 09 2016 01:35
So I'm making a contact form and I cannot make the background work in the mobile view. Can someone please help.
http://burningpluto.github.io/Contact-Form/
https://github.com/burningPluto/Contact-Form
Christina
@cgraham74
Apr 09 2016 01:39
Is there a standard API (working on random quote machine) that we are supposed to use? The only one I've found that works, gives a random quote but only like every couple minutes between clicks (unless I am doing something wrong
ZctrapCoding
@ZctrapCoding
Apr 09 2016 01:49
Hey does my portfolio look good? http://codepen.io/Zctrap/full/dMRZNd/
Paul Borawski
@iAmNawa
Apr 09 2016 01:52
@ZctrapCoding I like that the background is the same throughout
ZctrapCoding
@ZctrapCoding
Apr 09 2016 01:53
Thanks, this should be the final product :)
Paul Borawski
@iAmNawa
Apr 09 2016 01:54
How did you do the background gradient? @ZctrapCoding
Oh i see what you did there
ZctrapCoding
@ZctrapCoding
Apr 09 2016 01:55
its was a high quality black wood picture and then i used css to strech it throughout the page, that gave it the gradient look
Paul Borawski
@iAmNawa
Apr 09 2016 01:55
nice job
ZctrapCoding
@ZctrapCoding
Apr 09 2016 01:55
Thx
The hardest part was the nav i finnaly found away for it to stay on the top but follow you when you scroll
Christina
@cgraham74
Apr 09 2016 01:59
@ZctrapCoding The Nav actually disappears when you scroll down but shows back up when you get to the "About" section
ZctrapCoding
@ZctrapCoding
Apr 09 2016 02:15
alright ill change that thats easy to fix
Christina
@cgraham74
Apr 09 2016 02:17
@ZctrapCoding Looks nice! :)
ZctrapCoding
@ZctrapCoding
Apr 09 2016 02:17
@cgraham74 :D
random-x
@random-x
Apr 09 2016 02:20

can anyone help me with my pushes and pulls here?
http://codepen.io/random-x/pen/YqYgYW?editors=1000

long story short, at xs and sm sizes, it looks like it should.. at md+, I want it to be:

|    |  1  |    |  5  |     |
| 2 | 3 | 4 | 6 | 7 | 8 |
Noah Fleitz
@burningPluto
Apr 09 2016 02:54
So I'm making a contact form and I cannot make the background work in the mobile view. Can someone please help.
http://burningpluto.github.io/Contact-Form/
https://github.com/burningPluto/Contact-Form
Jim Edward
@ElpsySec
Apr 09 2016 02:56
Any vuejs pros out there who can offer assistance?
random-x
@random-x
Apr 09 2016 02:57
@burningPluto whatcha mean by "make the background work"?
Noah Fleitz
@burningPluto
Apr 09 2016 02:57
When I put it in the mobile view it doesnt cover all of my content
the social buttons are gone
there is a huge white space at the bottom
I've been trying to solve it for quite some time and can't get it fixed
when i get the mobile issue fixed i the desktop version wont work
it doesnt make sense
Stephen James
@sjames1958gm
Apr 09 2016 03:01
@burningPluto Do you need to also provide col-sm and col-xs sizes?
Noah Fleitz
@burningPluto
Apr 09 2016 03:01
It's worth a shot hang on ill check it out
kwal0203
@kwal0203
Apr 09 2016 03:02
Hi guys, I'm doing the twitch API challenge and I can't figure out how to get user logo for offline users. Can anybody help me out? thanks
Noah Fleitz
@burningPluto
Apr 09 2016 03:05
@sjames1958gm Didn't work :/
random-x
@random-x
Apr 09 2016 03:06
@burningPluto where are you setting the background image?
Noah Fleitz
@burningPluto
Apr 09 2016 03:07
I want it to cover the whole page responsively but it wont work on the mobile version
its right there just shrink your screen to check it out
there is the code
random-x
@random-x
Apr 09 2016 03:09
what is the class that has the background image you're talking about?
Stephen James
@sjames1958gm
Apr 09 2016 03:09
@burningPluto Did you try col-xs this is for extra small (phones)
Noah Fleitz
@burningPluto
Apr 09 2016 03:09
It's in the img tag it doesn't have a class
and yes i did @sjames1958gm
random-x
@random-x
Apr 09 2016 03:09
oh.. well.. that's the problem, I assume
Noah Fleitz
@burningPluto
Apr 09 2016 03:10
<div class="pages black-bg white page-contact" id="page-contact">
that is also not working its the same size as the img
the img is nested inside
Dylan
@dhcodes
Apr 09 2016 03:11
@burningPluto did you get your contact form input widths working?
random-x
@random-x
Apr 09 2016 03:11
try something like:
body { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  background-size: cover;
}
Dylan
@dhcodes
Apr 09 2016 03:12

If not, I think it has something to do with nesting this class

 class="input-group col-md-12 col-sm-10"

within a col-md-12

Noah Fleitz
@burningPluto
Apr 09 2016 03:12
I don't want it to be the body background because i'm putting the div at the bottom of a website
Dylan
@dhcodes
Apr 09 2016 03:12
@burningPluto when I remove that the inputs get wider
random-x
@random-x
Apr 09 2016 03:12
ok, put it as the background for the relevant div?
Noah Fleitz
@burningPluto
Apr 09 2016 03:14
I removed input group and it messed things up lol
Dylan
@dhcodes
Apr 09 2016 03:16
@burningPluto oh, I just think the reason they were so narrow is the nesting of some of the classes
Noah Fleitz
@burningPluto
Apr 09 2016 03:17
so @random-x you mean body,div#page-contact{ background: url(img/bg.jpg) no-repeat center fixed; background-size: cover; }
random-x
@random-x
Apr 09 2016 03:22
I guess maybe :P obviously replacing the url with the right url
Noah Fleitz
@burningPluto
Apr 09 2016 03:22
yeah lol i know that :D
trying it now
Dylan
@dhcodes
Apr 09 2016 03:24

@kwal0203
My guess is because you don't reference data.logo in this section:

function appendUserOffline(data) {
    $('#wrapper').append("<div class = 'resultDiv'><p><span>Place Holder </span><span><a target = '_blank' href = 'https://www.twitch.tv/" + data.name + "'>" + data.display_name + "</a></span><span> Offline</span></p></div>");
  }

As an aside, you have a lot of ajax calls. You really only need two, one to channels and one to streams. I'd start there as a method of refactoring your code. Happy coding

Noah Fleitz
@burningPluto
Apr 09 2016 03:25
Alrighty that work now is there a way i can put a transparent color as an overlay over the back ground
Dylan
@dhcodes
Apr 09 2016 03:25
@burningPluto maybe a filter?
Noah Fleitz
@burningPluto
Apr 09 2016 03:26
I think you're right @dhcodes
Ill try it out
idk, never done a color overlay, just the blur
Noah Fleitz
@burningPluto
Apr 09 2016 03:30
It doesnt work with black lol
my luck
you guys are helping a ton i was stressing out lol
Do you think wrapping that div in a div with a background making it black and changing the opacity will work ?
gotta go, see yall later
Pawan
@pawan92
Apr 09 2016 03:42
has anyone gone through flexfroggy?
Noah Fleitz
@burningPluto
Apr 09 2016 03:46
Thanks @dhcodes & @random-x
CamperBot
@camperbot
Apr 09 2016 03:46
burningpluto sends brownie points to @dhcodes and @random-x :sparkles: :thumbsup: :sparkles:
:star: 581 | @dhcodes | http://www.freecodecamp.com/dhcodes
:star: 130 | @random-x | http://www.freecodecamp.com/random-x
random-x
@random-x
Apr 09 2016 04:02
good luck, @burningPluto :)
and np
Noah Fleitz
@burningPluto
Apr 09 2016 04:05
I'm actually still having one issue lol
Randy Goldsmith
@Dueldrawer8
Apr 09 2016 05:15
could someone help me with the wikipedia api?
Demmy
@demmyboy
Apr 09 2016 05:21
Could anyone help look into my code, I am trying to make an interactive google Google map but I cant get the map to display, I get an error saying GET net::ERR_FILE_NOT_FOUND in dev tools...here is my repo https://github.com/demmyboy/map_application.git
Zoher Ali
@Zoher-ali
Apr 09 2016 05:40
can any1 hep me with weather app
i am not getting weather icon
doesnt it present in font awesome library?
Uzma Khan
@meow414
Apr 09 2016 05:43
pls help me how to get started on weather app
how to use the long and lat data in open weather api call?
Randy Goldsmith
@Dueldrawer8
Apr 09 2016 05:44
@Zoher-ali lets see your code
Zoher Ali
@Zoher-ali
Apr 09 2016 05:46
@meow414 <script src="https://api.openweathermap.org/data/2.5/weather?lat=35&lon=139&APPID={ur appid}"></script> like this
@Dueldrawer8
<i class="wi wi-hot"></i>
I have included font awesome library
Uzma Khan
@meow414
Apr 09 2016 05:48
yes but these are fixed values of lat and long I am asking how to put the searched lat in the api for eg here it is 35
kirbyedy
@kirbyedy
Apr 09 2016 05:49
Randy Goldsmith
@Dueldrawer8
Apr 09 2016 05:49
@Zoher-ali sorry, i myself do not know how to include the weather icon
@Zoher-ali when you make a call to get the weather icon and include it in your code, for example 01d is clear day.. does it not sure that icon just by using that id code?
Zoher Ali
@Zoher-ali
Apr 09 2016 05:51
@Dueldrawer8 i m not getting u
wat is this code 01d ???
Uzma Khan
@meow414
Apr 09 2016 05:52
@kirbyedy yes but I am getting confused how to use those lat and long values in the api call
kirbyedy
@kirbyedy
Apr 09 2016 05:53
do you have a codepen link ?
Randy Goldsmith
@Dueldrawer8
Apr 09 2016 05:54
Randy Goldsmith
@Dueldrawer8
Apr 09 2016 05:55
i'm not sure as i just finished that app and am having trouble understanding these api's myself.. but i would think if you included the weather icon data into your html you would be able to see those icons
kirbyedy
@kirbyedy
Apr 09 2016 05:57
@meow414 js is already a place where you put your script, so remove <script> </script>
what is inside keep it, but remove the S from the http
after that declare variables for latitude and longitude and assign them the position.coords.latitude and position.coords.longitude
Randy Goldsmith
@Dueldrawer8
Apr 09 2016 05:59
@Zoher-ali nvm doesnt work..
Uzma Khan
@meow414
Apr 09 2016 05:59
@kirbyedy ok
Kevin Gil Soriano
@kevin0317
Apr 09 2016 05:59
Hi guys, anyone can help me in weather app? I am able to display data locally from calling getJSON() but not on codepen.
kirbyedy
@kirbyedy
Apr 09 2016 05:59
@kevin0317 link please
when i use visual studio it's working locally but when i copy it to the pen it's not working
Randy Goldsmith
@Dueldrawer8
Apr 09 2016 06:01
@kirbyedy can you see why my call to the title wont log?
kirbyedy
@kirbyedy
Apr 09 2016 06:01
@Dueldrawer8 just a sec, I am helping @kevin0317
Randy Goldsmith
@Dueldrawer8
Apr 09 2016 06:01
@kirbyedy ok
Uzma Khan
@meow414
Apr 09 2016 06:05
@kirbyedy hey have a look now even latitude stopped showing http://codepen.io/meow414/pen/KzZYmj
kirbyedy
@kirbyedy
Apr 09 2016 06:06
@kevin0317 check the image, its working
Screen Shot 2016-04-09 at 09.05.41.png
@Dueldrawer8 you have a problem with cross origin acces, so you should use JSONP instead of JSON
Zoher Ali
@Zoher-ali
Apr 09 2016 06:08
@meow414 same problem
Randy Goldsmith
@Dueldrawer8
Apr 09 2016 06:09
@kirbyedy do i put that inside my ajax() call or the url?
kirbyedy
@kirbyedy
Apr 09 2016 06:10
@meow414 you have to use $get or $getJSON or ajax call with that open weather link you have, like this it wont work
something like this: $.get(url, function(data){ });
@Dueldrawer8 something like this:
$.ajax({
        url: api,
        type: 'GET',
        dataType: 'jsonp',
        success: function() {
have to go guys, happy coding...
Zoher Ali
@Zoher-ali
Apr 09 2016 06:16
@kirbyedy can u find out error in this ... why i am not getting temperature through latitude and longitude?
Zoher Ali
@Zoher-ali
Apr 09 2016 06:23
any1 plz help :pray:
Nely
@nextasy2010
Apr 09 2016 06:39
Hi guys
Im trying to get my code to open in another tab in code pen
im using target="_blank"
but its opening in the same page
what should i do?
eg
<a href="https://www.facebook.com/tdeuschle1?ref=ts&fref=ts"><i class="fa-fa-thumbs-up" target="_blank">
<button class: "btn btn-block btn-primary" ></i>Like</button></a>
Zoher Ali
@Zoher-ali
Apr 09 2016 06:42
@nextasy2010 target="_blank" should be written in <a> tag and not in <i>
Nely
@nextasy2010
Apr 09 2016 06:44
its inside <a> tag
look again
oh it isnt
lol, ma bad
thanks @Zoher-ali
CamperBot
@camperbot
Apr 09 2016 06:44
nextasy2010 sends brownie points to @zoher-ali :sparkles: :thumbsup: :sparkles:
:star: 276 | @zoher-ali | http://www.freecodecamp.com/zoher-ali
Nely
@nextasy2010
Apr 09 2016 06:45
perfect, working like a prayer
awesome
Zoher Ali
@Zoher-ali
Apr 09 2016 06:45
welcome :laughing:
can u help e with weather app? :worried:
Kevin Gil Soriano
@kevin0317
Apr 09 2016 07:01
@Zoher-ali 1st of all, I think u can't store the values of lat and lon like that, if u call alert outside of the getCurrentPosition function lat and lon is undefined. you need to pass value of getCurrentPosition to weather function.
Zoher Ali
@Zoher-ali
Apr 09 2016 07:04
@kevin0317 its not the problem of lat and lon. Even this is not working
document.write(position.coords.latitude);
Kevin Gil Soriano
@kevin0317
Apr 09 2016 07:05
@Zoher-ali did u do that in the weather function?
Zoher Ali
@Zoher-ali
Apr 09 2016 07:05
no, in getCurrentPosition method
if(navigator.geolocation){
    navigator.geolocation.getCurrentPosition(function(position){
                                                      lat = position.coords.latitude;
                                                      lon = position.coords.longitude;
                                                      document.write(position.coords.latitude);
                                                      });
}
Kevin Gil Soriano
@kevin0317
Apr 09 2016 07:06
blob
Zoher Ali
@Zoher-ali
Apr 09 2016 07:07
Problem is that i am not getting current position @kevin0317
Kevin Gil Soriano
@kevin0317
Apr 09 2016 07:07
blob
@Zoher-ali its working
Om
@OmAnirudh
Apr 09 2016 07:08
colour code for Red?? (html)
Zoher Ali
@Zoher-ali
Apr 09 2016 07:09
why its not working with me den? :worried:
Kevin Gil Soriano
@kevin0317
Apr 09 2016 07:14
lol i don't even know ae.
even my code works on @kirbyedy but not on mine
Zoher Ali
@Zoher-ali
Apr 09 2016 07:29
@kevin0317 its working in pen but not in browser
@kevin0317 problem its automatically denying permission for accessing location without asking ...What should i do???
Even i had allowed accessing location for all sites...
Rada
@Radascript
Apr 09 2016 07:31
@Zoher-ali I think that's fine for the zipline
Zoher Ali
@Zoher-ali
Apr 09 2016 07:33
what does it mean? @Radascript
Rada
@Radascript
Apr 09 2016 07:34
@Zoher-ali I think it's okay if it works in codepen but doesn't work for people who have it set up to ban geolocation
Kevin Gil Soriano
@kevin0317
Apr 09 2016 07:36
@Zoher-ali what do u mean not working in browser? r u running it in localhost or r u just opening the file?
Zoher Ali
@Zoher-ali
Apr 09 2016 07:36
@kevin0317 in local host
Kevin Gil Soriano
@kevin0317
Apr 09 2016 07:40
@Zoher-ali hmm, sorry idk. yeah i guess just do it in codepen lol. how do u do the color code names?
Pete
@petegarvin1
Apr 09 2016 08:08
Morning all - if anyone fancies more algo practice then codewars is a great site :+1: www.codewars.com/r/yfzYFQ
Randy Goldsmith
@Dueldrawer8
Apr 09 2016 08:11
anyone know why i would use cross-site requests on my wikipedia viewer project?
h4r1m4u
@h4r1m4u
Apr 09 2016 08:47
@Dueldrawer8 make sure to include callback=? as one of the URL parameters. that should get you around the cross-site request issue. (you might want to read up on JSONP)
Zoher Ali
@Zoher-ali
Apr 09 2016 09:06
hey can any1 tell me why i m getting json.weather.main undefined?
Bruce Young
@mutantspore
Apr 09 2016 09:11
@Zoher-ali hard without your code but note weather is an array of one element
JackeL
@jackel27
Apr 09 2016 09:11
hey, what do you guys think of my tribute page???
http://codepen.io/SimulatedGREG/pen/xVRqEV
Zoher Ali
@Zoher-ali
Apr 09 2016 09:13
@mutantspore so how can i get it?
Kevin Gil Soriano
@kevin0317
Apr 09 2016 09:14
@Zoher-ali give link bro
Zoher Ali
@Zoher-ali
Apr 09 2016 09:14
weathe[] = String(json.weather.main);
                                                                                        $("#weath").text(weathe[]);
@kevin0317 i m working on dreamweaver right now
weathe = String(json.weather.main);
$("#weath").text(weathe);
it is returning undefined
Kevin Gil Soriano
@kevin0317
Apr 09 2016 09:19
@Zoher-ali how do u get d json variable?
@Zoher-ali r u using d same code from ur pen?
Zoher Ali
@Zoher-ali
Apr 09 2016 09:20
 $.getJSON("http://api.openweathermap.org/data/2.5/weather?lat=23.6376&lon=75.1260&APPID=f481ef3ea3d740305a4cc4ea5b6a74d4",function(json){
                                                                                         //document.write(JSON.stringify(json));

                                                                                        temp = json.main.temp-273.15;
                                                                                        temp = temp.toFixed(2);
                                                                                        $("#temp").html(temp);
                                                                                        weathe = String(json.weather.main);
                                                                                        $("#weath").text(weathe);
                                                                                        //document.write(json.main.temp);
                                                                                     });
I had not copied changed code to pen yet
Rada
@Radascript
Apr 09 2016 09:22
hey I'm super new but I think it may be that you need to be using "response" instead of "json"
Zoher Ali
@Zoher-ali
Apr 09 2016 09:23
@Radascript let me try
Rada
@Radascript
Apr 09 2016 09:24
also when I was doing that challenge I was constantly checking console to make sure I call the right places
Zoher Ali
@Zoher-ali
Apr 09 2016 09:24
@Radascript nahh not working
in console it is "clear"
Kevin Gil Soriano
@kevin0317
Apr 09 2016 09:33
@Zoher-ali try json.weather[0].main. check if that's what ur looking for
Zoher Ali
@Zoher-ali
Apr 09 2016 09:33
yeah done bro @kevin0317
Coy Sanders
@coymeetsworld
Apr 09 2016 09:33
variable name doesn't matter
yeah its json.weather[0], weather is an array of one item in the call
Zoher Ali
@Zoher-ali
Apr 09 2016 09:34
same thing i had tried just now :+1: & i got it
Bhushan
@bhupha
Apr 09 2016 09:49
@bhupha
no clue how to complete Record Collection challange :(
any hint
abtak mustapha
@mustapha88
Apr 09 2016 10:20
hello every one
do i need to import some external js files in order to runthis line
var geocoder = new google.maps.Geocoder();
Parminder Singh
@Trion129
Apr 09 2016 11:36
How can I make a string "5*5" to get executed to output 25?
Stephen James
@sjames1958gm
Apr 09 2016 11:37
@Trion129 eval() takes a string and executes it as javascript
Parminder Singh
@Trion129
Apr 09 2016 11:39
Thanks @sjames1958gm :smile:
CamperBot
@camperbot
Apr 09 2016 11:39
trion129 sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star: 529 | @sjames1958gm | http://www.freecodecamp.com/sjames1958gm
Islam Ibakaev
@dagman
Apr 09 2016 12:43
@Trion129 you can use .unstring() method too
:smile:
Ujjwal Sharma
@ryzokuken
Apr 09 2016 13:25
guys
pls review
Svetlana Linuxenko
@linuxenko
Apr 09 2016 13:32
Infamous developer, loser and tinfoilhat lol
Parminder Singh
@Trion129
Apr 09 2016 13:33
Nice Portfolio :smile: @ryzokuken
Bruce Young
@mutantspore
Apr 09 2016 14:05
Finally did the Tic-Tac-Toe challenge. Yes, there are probably a few issues with responsiveness at smaller sizes. I used Materialize.css and I've more to learn yet. However, I hope it's unbeatable still. I briefly tried to do the min-max algorithm but gave up and went for my version of the Wikipedia suggested method.
Arend Groot Bleumink
@arendgb
Apr 09 2016 14:06
Could anyone explain this to me, I can't figure out how this works?

Increment a Number with JavaScript
You can easily increment or add one to a variable with the ++ operator.

i++;

is the equivalent of

i = i + 1;

Note
The entire line becomes i++;, eliminating the need for the equal sign.

Instructions
Change the code to use the ++ operator on myVar.

Kevin Gil Soriano
@kevin0317
Apr 09 2016 14:09
hmm change myVar = myVar + 1 to myVar++? basically d same thing
Arend Groot Bleumink
@arendgb
Apr 09 2016 14:10
aha, I get it now :smile: Thanks @kevin0317
CamperBot
@camperbot
Apr 09 2016 14:10
:star: 437 | @kevin0317 | http://www.freecodecamp.com/kevin0317
arendgb sends brownie points to @kevin0317 :sparkles: :thumbsup: :sparkles:
Sergej
@Rmpalija
Apr 09 2016 15:00
Hello , i have problem im building a weather app , and when i use getJSON , and give it he URL , and API code , it adds codepens adress at front of it . http://prntscr.com/aq3z8n , so i can get the data from the API .
Stephen James
@sjames1958gm
Apr 09 2016 15:00
@Rmpalija Make sure you are using an absolute URL http://
Breno Batista
@seth07
Apr 09 2016 15:02
hey guys, I have a doubt. In JQuery is possible to add multiple classes in a single .addClass(). But, how could this be?
Stephen James
@sjames1958gm
Apr 09 2016 15:03
@kridem addClass("thisclass thatclass") ?
Sergej
@Rmpalija
Apr 09 2016 15:03
thanks @sjames1958gm , i used \ in http and didnt notice .
CamperBot
@camperbot
Apr 09 2016 15:03
rmpalija sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star: 538 | @sjames1958gm | http://www.freecodecamp.com/sjames1958gm
Stephen James
@sjames1958gm
Apr 09 2016 15:03
@Rmpalija Stupid computer should have known :)
Sergej
@Rmpalija
Apr 09 2016 15:04
Hahaha , have to teach them everything xD when will they learn...
Breno Batista
@seth07
Apr 09 2016 15:05
@sjames1958gm is possible to assign different classes to different ids, or classes, or elements in a single .addClass()?
Stephen James
@sjames1958gm
Apr 09 2016 15:07
@kridem Elements yes because some selectors target multiple elements $("div").addClass("thisclass') would add "thisclass" to all divs
Breno Batista
@seth07
Apr 09 2016 15:10
@sjames1958gm sorry, but I want to know if It's possible to write something like $("div .btn #something").addClass("something something2");?
Stephen James
@sjames1958gm
Apr 09 2016 15:11
I don't know - do you have a codepen - then try it out.
Breno Batista
@seth07
Apr 09 2016 15:14
ok, thank you @sjames1958gm
CamperBot
@camperbot
Apr 09 2016 15:14
kridem sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star: 539 | @sjames1958gm | http://www.freecodecamp.com/sjames1958gm
Dominic Lobban
@alkapwn3d
Apr 09 2016 15:16
How do I get the inputs in this form to stay inline regardless of screensize
http://codepen.io/alkapwn3d/pen/RaxEjy?editors=0100
David Weedmark
@DavidWeedmark
Apr 09 2016 15:17
@alkapwn3d bootstrap columns is often the easiest way
FarionLord
@FarionLord
Apr 09 2016 15:19
Sorry a bit of time has passed since I code so how do I make the html be in the middle?
Dominic Lobban
@alkapwn3d
Apr 09 2016 15:21
yes but i want to do it without bootsrap
Stephen James
@sjames1958gm
Apr 09 2016 15:21
@alkapwn3d Look into flexboxes
Dominic Lobban
@alkapwn3d
Apr 09 2016 15:21
cool thx
Akinlawon Victor
@Haykinz
Apr 09 2016 15:24
I would like to be criticized on this particular project, especially the code. http://codepen.io/Haykinz/pen/MyOzpL
Pete
@petegarvin1
Apr 09 2016 15:24
if any of you guys haven't tried code wars - its a great site for practicing algos... www.codewars.com/r/yfzYFQ see you there!
@Slim-Fit looks good :D
@Slim-Fit the 'if you want to know more about him' bit looks a little overly large in my opinion
@Slim-Fit other than that looks all good :+1:
Akinlawon Victor
@Haykinz
Apr 09 2016 15:25
thanks man @Spacecamel100 happy coding
CamperBot
@camperbot
Apr 09 2016 15:25
slim-fit sends brownie points to @spacecamel100 :sparkles: :thumbsup: :sparkles:
:star: 398 | @spacecamel100 | http://www.freecodecamp.com/spacecamel100
Akinlawon Victor
@Haykinz
Apr 09 2016 15:25
what does that codewars do
Pete
@petegarvin1
Apr 09 2016 15:26
it has lots of algorithm challenges - and you can write your own
you get points for completing and you get ranked
its very addictive
!
Bruce Young
@mutantspore
Apr 09 2016 15:26
@Spacecamel100 lol sounds like you need rehab already
Pete
@petegarvin1
Apr 09 2016 15:26
@mutantspore I've barely slept in days :D
maybe it will wear off... hopefully... - its distracted me from FCC
Bruce Young
@mutantspore
Apr 09 2016 15:29
@Spacecamel100 It may be a distraction from FCC but it’s just a different path to your goal.
Pete
@petegarvin1
Apr 09 2016 15:29
@mutantspore :+1:
except my goal is now simply "win code wars" :D
Bruce Young
@mutantspore
Apr 09 2016 15:30
@Spacecamel100 Total World Domination eh?
Pete
@petegarvin1
Apr 09 2016 15:31
@mutantspore something like that. I just checked out your site - well done, looks sweet!! love the card turning portfolio
Dominic Lobban
@alkapwn3d
Apr 09 2016 15:33
flex makes it lose adaptability. i just ended up using width:% and min-width
Pawan
@pawan92
Apr 09 2016 15:34
how do i reduce spacing between list items in a navbar
Dominic Lobban
@alkapwn3d
Apr 09 2016 15:35
also gonna add some media queries
Stephen James
@sjames1958gm
Apr 09 2016 15:44
@pawan92 Either change the margin or the padding.
Khademul Islam Mahin
@Mahin2k
Apr 09 2016 15:46
can someone help me?
i cannot implement the twitter share button
Cayden Jacobs
@caydn
Apr 09 2016 15:53
How important is it for me to put col-xs-# in my html code? Like do you think it will cause my site to resize better?!
Bruce Young
@mutantspore
Apr 09 2016 15:57
@caydn yes that’s part of the Bootstrap syntax that will help you display and help manage how your page resizes. Sites should be designed to be responsive
Cayden Jacobs
@caydn
Apr 09 2016 16:08
@mutantspore I get that, perhaps I should clarify, should I use more than one of col-xs-x? eg. “<div class =“col-xs-# col-lg-#">
Pawan
@pawan92
Apr 09 2016 16:08
@sjames1958gm ive tried messing with padding and its still not giving me right spacing. also having trouble getting my bell inside that box. trying to replicate google HP for practice btw. http://codepen.io/pawan92/pen/yOpmeW
Bruce Young
@mutantspore
Apr 09 2016 16:11
@caydn yes, but just the sizes you need and do it in the increasing size order xs -> lg
for instance you may have a number of “cards” on your site. At mobile phone size you’ll only want one per row (xs), maybe at iPad size, 2 per row (sm) etc. if they are going to be the same, just leave out the second one at the larger size
Cayden Jacobs
@caydn
Apr 09 2016 16:13
awesome thanks @mutantspore !!
CamperBot
@camperbot
Apr 09 2016 16:13
caydn sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
:star: 1386 | @mutantspore | http://www.freecodecamp.com/mutantspore
Khademul Islam Mahin
@Mahin2k
Apr 09 2016 16:20
can someone help me?
i am not able to implement the twitter share button correctly
Chris Dinant
@chrisdinant
Apr 09 2016 16:21
@Mahin2k let the button href to something like this : "https://twitter.com/intent/tweet?button_hashtag=QOD&text=" + quoteText + "%20-" + quoteAut;
Stephen James
@sjames1958gm
Apr 09 2016 16:21
@pawan92 Try margin on your li - it seemed to work for me margin: 15px 8px 15px 8px;
Chris Dinant
@chrisdinant
Apr 09 2016 16:22
your quoteText would be at quotes.quote @Mahin2k
Khademul Islam Mahin
@Mahin2k
Apr 09 2016 16:24
@chrisdinant not working
Bruce Young
@mutantspore
Apr 09 2016 16:24
@Mahin2k my advice is not to try to use the Twitter embedded icon method. It’s very hard to get right and it’s much easier to get your own icon, and use Twitter Web intents
https://dev.twitter.com/web/tweet-button/web-intent
@Mahin2k basically a button and 2 lines code
Khademul Islam Mahin
@Mahin2k
Apr 09 2016 16:26
@mutantspore the thing is that i cant get the quote out of the success json
Bruce Young
@mutantspore
Apr 09 2016 16:27
@Mahin2k the api call is asynchronous so you’ll either have to do the twitter bit inside the ajax or put it in a function and call it from within the ajax
@Mahin2k and why 2 ajax calls?
Khademul Islam Mahin
@Mahin2k
Apr 09 2016 16:28
@mutantspore lol yeah
@mutantspore one quote needs to show without clicking the btn
Bruce Young
@mutantspore
Apr 09 2016 16:29
@Mahin2k put the ajax call in a getQuote function. call it from the button click and also when the page loads
one function.. 2 calls
Khademul Islam Mahin
@Mahin2k
Apr 09 2016 16:29
@mutantspore the entire ajax call?
Bruce Young
@mutantspore
Apr 09 2016 16:30
@Mahin2k yes
Pawan
@pawan92
Apr 09 2016 16:31
@sjames1958gm thanks! looks kinda better. is there a way to center my bell icon and the letter inside profile circle. not sure whether having a class for that particular list item is the right way to go http://codepen.io/pawan92/pen/yOpmeW
CamperBot
@camperbot
Apr 09 2016 16:31
pawan92 sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
CamperBot
@camperbot
Apr 09 2016 16:31
:star: 544 | @sjames1958gm | http://www.freecodecamp.com/sjames1958gm
Chris Dinant
@chrisdinant
Apr 09 2016 16:32
Would one of you care to bugcheck my calculator? Just to check if all the buttons do what they're supposed to? http://codepen.io/chrisdinant/pen/RaLMdJ
Bruce Young
@mutantspore
Apr 09 2016 16:33
@chrisdinant @chrisdinant allows multiple decimal points
Khademul Islam Mahin
@Mahin2k
Apr 09 2016 16:33
@mutantspore but how do i call it on attribute data-text?
Chris Dinant
@chrisdinant
Apr 09 2016 16:33
@mutantspore haha! never thought to check that myself
Bruce Young
@mutantspore
Apr 09 2016 16:35
@Mahin2k as I said.. using that method for the tweet is painful and while I did get it to work I wanted my own button so I used the tweet intents method I showed you earlier.
Chris Dinant
@chrisdinant
Apr 09 2016 16:35
thanks @mutantspore
CamperBot
@camperbot
Apr 09 2016 16:35
chrisdinant sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
:star: 1387 | @mutantspore | http://www.freecodecamp.com/mutantspore
Paul Borawski
@iAmNawa
Apr 09 2016 16:36
@chrisdinant LOOKS GOOD!
Chris Dinant
@chrisdinant
Apr 09 2016 16:37
@mutantspore and multiple first zero's as well I see
Paul Borawski
@iAmNawa
Apr 09 2016 16:37
I like the gradient on the calc
Chris Dinant
@chrisdinant
Apr 09 2016 16:37
@iAmNawa thanks :-D
CamperBot
@camperbot
Apr 09 2016 16:37
chrisdinant sends brownie points to @iamnawa :sparkles: :thumbsup: :sparkles:
:star: 369 | @iamnawa | http://www.freecodecamp.com/iamnawa
Khademul Islam Mahin
@Mahin2k
Apr 09 2016 16:38
@mutantspore ok i did it your way but how do i call getquote on the tweet box?
heres the link again https://twitter.com/intent/tweet
Chris Dinant
@chrisdinant
Apr 09 2016 16:40
@Mahin2k let the button href to something like this : "https://twitter.com/intent/tweet?button_hashtag=QOD&text=" + quoteText + "%20-" + quoteAut;
within the ajax function with setAttribute
Bruce Young
@mutantspore
Apr 09 2016 16:40
@Mahin2k you don’t have to call it again as you have the details. just compose the url in the ajax. and use a jquery event to open the url
Khademul Islam Mahin
@Mahin2k
Apr 09 2016 16:42
@mutantspore so you are telling me to use jquery to assign the link to the anchor tag?
Bruce Young
@mutantspore
Apr 09 2016 16:43

@Mahin2k

 var tweeturl = 'http://twitter.com/share?&text=' + data.quote + ' - ' + data.author;
        $("#mycustomtwitterbutton").attr('href', tweeturl);

this is mine

Khademul Islam Mahin
@Mahin2k
Apr 09 2016 16:44
so i would put that inside the ajax call? or outside?
because outside the ajax call the data.quote wont be accessible
Natasha Nazari
@natashanazari
Apr 09 2016 16:45
Having some issues getting my animations, images & containers to display properly on smaller screens. Perhaps it’s an issue with my media query? https://codepen.io/natashagogo/full/BKJpJJ/
Khademul Islam Mahin
@Mahin2k
Apr 09 2016 16:48
@mutantspore OMG thanks! it works because i put it inside the ajax call
CamperBot
@camperbot
Apr 09 2016 16:48
mahin2k sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
:star: 1388 | @mutantspore | http://www.freecodecamp.com/mutantspore
Stephen James
@sjames1958gm
Apr 09 2016 16:48
@mutantspore for the win, again!
Khademul Islam Mahin
@Mahin2k
Apr 09 2016 16:49
but i have another problem
it copies the quote but it also puts another url
Stephen James
@sjames1958gm
Apr 09 2016 16:54
@pawan92 Not sure of any other way than targetting it directly
Pawan
@pawan92
Apr 09 2016 17:10
@sjames1958gm kk any idea on how to center my glyphicon
Stephen James
@sjames1958gm
Apr 09 2016 17:11
@pawan92 What is the link again?
Stephen James
@sjames1958gm
Apr 09 2016 17:16
@pawan92 Here is a reference for using glyphs as background
grizzlyadams4725
@grizzlyadams4725
Apr 09 2016 17:32
Woop took almost a month off, but I finally finished my quote machine :) http://codepen.io/grizzlyadams4725/pen/oxwddr
mvjkmr
@mvjkmr
Apr 09 2016 17:33
@grizzlyadams4725 Great Work!!
Martynas
@Marjanus
Apr 09 2016 17:37
Hi, I am working on Wiki viewer project and currently I am implementing the part, where a page has to show a list of returned (searched) articles. Is a simple for loop, with append function, an adequate solution? Or should I look for jQuery functions like forEach?
h4r1m4u
@h4r1m4u
Apr 09 2016 17:43
@Marjanus for loop and append is completely fine
Martynas
@Marjanus
Apr 09 2016 17:44
Thank you @h4r1m4u :)
CamperBot
@camperbot
Apr 09 2016 17:44
marjanus sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:star: 1754 | @h4r1m4u | http://www.freecodecamp.com/h4r1m4u
h4r1m4u
@h4r1m4u
Apr 09 2016 17:44
np
Nagireddy Srichakradhar Reddy
@srichakradhar
Apr 09 2016 17:45
hello everyone!
how do we get the grey color box in the "Tribute Page"?
h4r1m4u
@h4r1m4u
Apr 09 2016 17:47
@srichakradhar there are multiple ways to do that, but the tribute page uses bootstrap and its jumbotron component
you can look it up in the bootstrap docs
Nagireddy Srichakradhar Reddy
@srichakradhar
Apr 09 2016 17:55
@h4r1m4u :) (Y)
thank you
h4r1m4u
@h4r1m4u
Apr 09 2016 17:57
:thumbsup:
random-x
@random-x
Apr 09 2016 18:01
can anyone help with bootstrap pushes and pulls?

http://codepen.io/random-x/pen/YqYgYW?editors=1000

at xs and sm sizes, it looks like it should.. at md+, I want it to be:

|    |  1  |    |  5  |     |
| 2 | 3 | 4 | 6 | 7 | 8 |

...but instead, the pushes make it go all funky off the right side of the screen

codercooooder
@codercooooder
Apr 09 2016 18:06
hey guys, i'm a bit overwhelmed. I want to figure out how to scale some svgs. I have the code to do it, but I'm having some problem figuring out how to apply it in the context I would like to use it. This is some code that demonstrates the way I want things to scale: http://codepen.io/ihatecoding/pen/QNaXBx. But you see: I want my svgs to scale in this nav bar (based on the width of the div) Here. http://codepen.io/ihatecoding/pen/GZybVM I feel like i should just be able to apply the css, but I have a few things working together , embadded divs and dependencies and I don't know what matters. Everything is almost right - What I want to accomplish: I want the svgs in the navbar to scale according to width;
random-x
@random-x
Apr 09 2016 18:24
oohh.. figured it out! it doesn't actually need pushes and pulls even... just nested cols and a little creativity
Arminas
@ArminasBek
Apr 09 2016 18:59
//main function
$(document).ready(function(){
    var city;
    getJSON();


//get JSON info from http://openweathermap.org/ API
function getJSON(){
        var weatherLink = "http://api.openweathermap.org/data/2.5/weather?lat=35&lon=139&appid=b83f0f8e42782267e6bbafdb68c72321"
        $.getJSON(weatherLink, function(json){
        $(".message").html(JSON.stringify(json));
    });
};

//get city from ipinfo.io API
$.get("http://ipinfo.io", function(response) {
    city = response.city;
    }, "jsonp");
    console.log(city);
});
can someone help me
i can’t understand why when i try to assign response.city to variable city
and then console log it
it says undefined
Stephen James
@sjames1958gm
Apr 09 2016 19:01
@ArminasBek Because $.get only sends the query and the data has not returned when you console.log
Alex Coder
@jkid314159
Apr 09 2016 19:01
@ArminasBek maybe getJSON is a reserved word and u name r function?
hello world
CamperBot
@camperbot
Apr 09 2016 19:01

welcome to FreeCodeCamp @jkid314159!

Stephen James
@sjames1958gm
Apr 09 2016 19:02
@sjames1958gm $.getJSON and $.get and $.ajax are all asyncronous - you have process the data in the callback function.
Alex Coder
@jkid314159
Apr 09 2016 19:03
$.getJSON(url, function(object) {});
Arminas
@ArminasBek
Apr 09 2016 19:06
@sjames1958gm how actually it should look?
Stephen James
@sjames1958gm
Apr 09 2016 19:07
@ArminasBek
```
$.get("http://ipinfo.io", function(response) {
city = response.city;
console.log(city);
getJSON(city);
}, "jsonp");
});
Pagise
@Pagise
Apr 09 2016 19:08
Personal Portfolion Webpage task: Since when is Thiago Ferreira the same person as Justin Richardsson?? The example in the video is totally different than the url they gave me. Plus, do I need to mimic the page exactly, or does it just need to have an about, portfolio and contact section plus social media stuff??
Does anyone know.. ?
I know the User Stories.. I understand that. I'm just confused by the two different things they give...
Arminas
@ArminasBek
Apr 09 2016 19:09
@sjames1958gm hmz it says getJSON is not definded
Gabe Pressman
@gpressman
Apr 09 2016 19:10
@Pagise you're to complete the user stories, but it's yours to customize as you choose
Pagise
@Pagise
Apr 09 2016 19:10
Sorry.... if you're confused. Thiago Ferreira's page is in the video, but the task itself is about Justin Richardsson's page...
alrighty, thanks @gpressman , that's what I'll do then..
CamperBot
@camperbot
Apr 09 2016 19:10
pagise sends brownie points to @gpressman :sparkles: :thumbsup: :sparkles:
:star: 278 | @gpressman | http://www.freecodecamp.com/gpressman
Stephen James
@sjames1958gm
Apr 09 2016 19:11
@ArminasBek You have getJSON defined in your code
Gabe Pressman
@gpressman
Apr 09 2016 19:12
can anyone help me figure out why this block doesn't work
D. Deryl Downey
@ddd
Apr 09 2016 19:12
How are people submitting code here such that they have the black bg and syntax hilighting?
Gabe Pressman
@gpressman
Apr 09 2016 19:13
 $("#change").click(function(){
         string = $("#temp")
         if (string.charAt(-1) == "F"){
           $("#temp").html(c)
         }
Arminas
@ArminasBek
Apr 09 2016 19:13
@sjames1958gm i think i messed up something somewhere, it looks just a simple task to take string from API and assign to variable and I’m struggling with this 1.5 hour ;D
D. Deryl Downey
@ddd
Apr 09 2016 19:14
@gpressman isn't it: onClick()?
Gabe Pressman
@gpressman
Apr 09 2016 19:14
nah, jquery just uses click
h4r1m4u
@h4r1m4u
Apr 09 2016 19:14
@gpressman string = $("#temp") this assigns the whole jquery object into string. you probably want string = $("#temp").text()
or something along those lines
@ddd explain format
explain format
CamperBot
@camperbot
Apr 09 2016 19:14

:point_right: code formatting [wiki]

Multi line Code

```js ⇦ Type 3 backticks and then press [shift + enter ⏎] (type js or html or css)

<paste your code here>,
then press [shift + enter ⏎]

``` ⇦ Type 3 backticks, then press [enter ⏎]

Single line Code

This an inline `<paste code here>` code formatting with a single backtick(`) at start and end around the code.

See also: ☛ How to type Backticks | ☯ Compose Mode | ❄ Gitter Formatting Basics

:pencil: read more about code formatting on the FCC Wiki

h4r1m4u
@h4r1m4u
Apr 09 2016 19:15
:point_up: @ddd
random-x
@random-x
Apr 09 2016 19:15
it doesn't actually do anything yet but MAN THAT GLORIOUS BOOTSTRAPPING! http://codepen.io/random-x/full/YqYyww/
Gabe Pressman
@gpressman
Apr 09 2016 19:15
@h4r1m4u I'll try, I knew it was something along those lines
D. Deryl Downey
@ddd
Apr 09 2016 19:16
thank you @h4r1m4u
CamperBot
@camperbot
Apr 09 2016 19:16
ddd sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:star: 1755 | @h4r1m4u | http://www.freecodecamp.com/h4r1m4u
h4r1m4u
@h4r1m4u
Apr 09 2016 19:17
np
Gabe Pressman
@gpressman
Apr 09 2016 19:17
@h4r1m4u still nothing, was pretty sure that would work
h4r1m4u
@h4r1m4u
Apr 09 2016 19:18
link your codepen?
random-x
@random-x
Apr 09 2016 19:19
@gpressman .charAt() doesn't accept negatives
Gabe Pressman
@gpressman
Apr 09 2016 19:20
that was it
thanks @random-x @h4r1m4u
CamperBot
@camperbot
Apr 09 2016 19:20
gpressman sends brownie points to @random-x and @h4r1m4u :sparkles: :thumbsup: :sparkles:
random-x
@random-x
Apr 09 2016 19:20
try str.charAt(str.length-1);
CamperBot
@camperbot
Apr 09 2016 19:20
:star: 1756 | @h4r1m4u | http://www.freecodecamp.com/h4r1m4u
:star: 131 | @random-x | http://www.freecodecamp.com/random-x
random-x
@random-x
Apr 09 2016 19:20
or str.slice(-1)
h4r1m4u
@h4r1m4u
Apr 09 2016 19:21
nice
random-x
@random-x
Apr 09 2016 19:21
np, @gpressman : ]
Gabe Pressman
@gpressman
Apr 09 2016 19:23
now I just gotto do the whole background deally, I'm feeling especially amotivated, maybe later
cya guys
random-x
@random-x
Apr 09 2016 19:23
cya! keep it up! :) enjoy yourself
grizzlyadams4725
@grizzlyadams4725
Apr 09 2016 19:38
Does anyone have any good documentation on how to work with calling API's and using keys? I've been stuck on teh weather app for a couple weeks now, and keep getting shot down by the overwhelming amount of stuff out there
Tien Anh Nguyen
@tienanh2007
Apr 09 2016 19:49
on the wiki json api I can't seem to get the data from a close account. It's always an error: GET https://api.twitch.tv/kraken/streams/brunofin 422 (status code 422)
Jared Abel
@jaredabel
Apr 09 2016 20:01
if anyone wants to take a look at my tic tac toe and offer advice for debugging it would be appreciated. I have some mean loops that happen after a few games
http://codepen.io/jaredabel00/pen/PNQYZv?editors=1011
Achilleas Papakonstantinou
@AchiPapakon
Apr 09 2016 20:09
What do you think of my Campsite Leaderboard?
http://codepen.io/AchiPapakon/pen/mPXbBZ
Stephen James
@sjames1958gm
Apr 09 2016 20:11
@tienanh2007 That is the error response that you are supposed to process
bhenriquez8
@bhenriquez8
Apr 09 2016 20:25
has anyone done the "build a portfolio" project on here?
Paul Borawski
@iAmNawa
Apr 09 2016 20:26
@bhenriquez8 you need help?
bhenriquez8
@bhenriquez8
Apr 09 2016 20:27
@iAmNawa yeah i guess with how i should go about organizing it. i just want to pretty it up as much as possible
Paul Borawski
@iAmNawa
Apr 09 2016 20:32
@bhenriquez8 what do you have so far?
bhenriquez8
@bhenriquez8
Apr 09 2016 20:33
any suggestions? also i'm not sure i should be using so many divs. i know there are other container tags that can be used for better organization
Paul Borawski
@iAmNawa
Apr 09 2016 20:34
Maybe a picture as the header?
Links to other projects
here’s mine www.paulborawski.com
ranyehushua
@ranyehushua
Apr 09 2016 20:35
I am doing the first of the intermediate front end projects, the random quote generator. Looking for a little direction, has anybody completed this project?
bhenriquez8
@bhenriquez8
Apr 09 2016 20:36
@iAmNawa that looks nice! how do you figure out how to use the hamburger tab?
Paul Borawski
@iAmNawa
Apr 09 2016 20:36
@bhenriquez8 you link the words to parts of the page
bhenriquez8
@bhenriquez8
Apr 09 2016 20:38
@iAmNawa i'm still new to all of this and i see you have it sectioned with a summary, an image, and your portfolio beneath it. how did you go about doing that?
Paul Borawski
@iAmNawa
Apr 09 2016 20:39
That’s the header, not the hamburger tab
@bhenriquez8 put it in <header></header>
Michael Karpinski
@karpimpski
Apr 09 2016 20:40
for files that i make on my pc, how would i make a file with separate .html, .css, and .js files inside?
specifically with sublime, i've seen videos where they can just go between tabs and i don't know how to do that
Sam
@Samwise12
Apr 09 2016 20:41
($("#square-7,#square-9").hasClass("filled")) can I get this to work like both square-7 and square-9 are required to have that class rather than make two different jquery statements? Like 1 jquery statement rather than two.
bhenriquez8
@bhenriquez8
Apr 09 2016 20:50
would it be bad to ask if anyone knows how to dual boot their laptops on here? lol. i know it's not really web development related
Pawan
@pawan92
Apr 09 2016 20:52
so couple of questions..cant seem to quite figure out how to get my microphone inside my search box and also align my icons in the top right correctly. can anyone help me? http://codepen.io/pawan92/pen/yOpmeW. searchbar is misleading on codepen its not that long
ranyehushua
@ranyehushua
Apr 09 2016 20:59
I am doing the first of the intermediate front end projects, the random quote generator. Looking for a little direction, with using AJAX in particular, has anybody completed this project?
Pawan
@pawan92
Apr 09 2016 21:00
@ranyehushua what do you need help with
ranyehushua
@ranyehushua
Apr 09 2016 21:03
@pawan92 I started making the generator and was originally going to just have a 'quotes' array nested with arrays of quote and source... I took a peek at the code from the example though and saw that the quotes are actually being pulled with AJAX requests. I don't really even know where to begin that. The "AJAX" portion of the tutorials doesn't seem to actually touch on AJAX at all, not even vaguely. Was just hoping to get a nudge in the right direction, maybe a good and clear source for an introduction to using AJAX for these projects? Looks ahead, it looks like all the intermediate projects will require AJAX
Pawan
@pawan92
Apr 09 2016 21:06
@ranyehushua for the quote one i was not able to figure out using an API to get random quotes so like you said i created a quotes array and had it randomly pick. im not too familiar with ajax even after working on the intermediate (i just finished wiki viewer) essentially i got some code off of stackoverflow and tried to understand it and implement it to my use.
grizzlyadams4725
@grizzlyadams4725
Apr 09 2016 21:06
```
$(function(){
  $.ajax({

  url: 'api.openweathermap.org/data/2.5/weather?zip=44281&appid=750ee40da7af0e3c8d66000fb5dc8946',
  success: function(x){
    $("#message").append(x);
}});
What am I missing in my ajax to get this to work?
ranyehushua
@ranyehushua
Apr 09 2016 21:07
@pawan92 I see. Well without really looking into the projects, it seems like at least the local weather viewer will need AJAX, right?
grizzlyadams4725
@grizzlyadams4725
Apr 09 2016 21:07
I just want to get the info and print it to get make sure it's working
Stephen James
@sjames1958gm
Apr 09 2016 21:08
@grizzlyadams4725 Open your devtools (f12 on chrome) and see there are errors.
ranyehushua
@ranyehushua
Apr 09 2016 21:08
@pawan92 the array of nested arrays of quotes method is very straightforward of course... I just wasn't sure whether we would be expected to use the AJAX method at this point
grizzlyadams4725
@grizzlyadams4725
Apr 09 2016 21:09
@sjames1958gm I don't see anything in the logs that isn't there with empty code (I think the errors come from the codepen site itself)
Pawan
@pawan92
Apr 09 2016 21:09
@ranyehushua i wanted to do api but at that point was told to just stick with arrays but if you want the challenge go for it. yea the rest of the intermediate projects need API calls and ajax
Stephen James
@sjames1958gm
Apr 09 2016 21:10
@grizzlyadams4725 And you have an element with the id message?
ranyehushua
@ranyehushua
Apr 09 2016 21:11
@pawan92 yea I guess the challenge here will be to find an API for random quotes. I'll do some poking around. Do you mind if I open a private chat with you in case I have any quick questions regarding the other intermediate projects?
grizzlyadams4725
@grizzlyadams4725
Apr 09 2016 21:11
@sjames1958gm yes, and I can get it to append regularly from outside my ajax code with any random text, and the link to the api works
Pawan
@pawan92
Apr 09 2016 21:12
@ranyehushua yea sure no problem
grizzlyadams4725
@grizzlyadams4725
Apr 09 2016 21:12
does it at least look right?
ranyehushua
@ranyehushua
Apr 09 2016 21:12
@pawan92 Thanks! I'll just open the chat now so it stays active in my sidebar, will hit you up if I get stuck. Much appreciated!
CamperBot
@camperbot
Apr 09 2016 21:12
ranyehushua sends brownie points to @pawan92 :sparkles: :thumbsup: :sparkles:
:star: 327 | @pawan92 | http://www.freecodecamp.com/pawan92
Stephen James
@sjames1958gm
Apr 09 2016 21:12
@grizzlyadams4725 I pasted it into codepen and it said there was premature end of input
I must have missed something int he copy, but it doesn't give me any errors
AJAX has been a bit intimidating
Stephen James
@sjames1958gm
Apr 09 2016 21:14
@grizzlyadams4725 are you seeing 404 errors
@sjames1958gm in the console
@grizzlyadams4725 Those are your errors you need http:// in front of your URL or it appends the local domain
grizzlyadams4725
@grizzlyadams4725
Apr 09 2016 21:17
ha! It's always something dumb like that isn't it?
Thanks @sjames1958gm
CamperBot
@camperbot
Apr 09 2016 21:17
grizzlyadams4725 sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star: 552 | @sjames1958gm | http://www.freecodecamp.com/sjames1958gm
Stephen James
@sjames1958gm
Apr 09 2016 21:19
@grizzlyadams4725 The stupid errors are the most pernicious
grizzlyadams4725
@grizzlyadams4725
Apr 09 2016 21:29
Still gotta figure out how to access any of the data, but at least I'm getting to the code inside "success" now
bhenriquez8
@bhenriquez8
Apr 09 2016 21:32
does anyone know how to add thumbnail images in like a grid like pattern?
Dardan Demiri
@dardandemiri
Apr 09 2016 21:33
@bhenriquez8 can you explain it more please ?
bhenriquez8
@bhenriquez8
Apr 09 2016 21:34
yeah so like, you know how on the portfolio project you see in the example site that there are images posted in the portfolio section in two neat columns? i want to do the same thing
Dardan Demiri
@dardandemiri
Apr 09 2016 21:36
yes
You can do it like this:
<div class="col-md-9">
        <h1 class="headers">PORTFOLIO</h1>

        <div class="row">


            <div class="col-sm-6 col-md-4"> 
                <div class="  thumbnail">
                <a target='_blank' href="http://codepen.io/DardanDemiri/full/PNbxXm/">
                    <img src="images/p4.png" class="img-responsive portfolioPhotosize" alt="">
                    <div class="caption">
                        <h4>Simple Tribute Page</h4>
                    </div>
                </a>
                </div>
            </div>

            <div class="col-sm-6 col-md-4"> 
                <div class="  thumbnail">
                <a href="#">
                    <img src="images/p1.png"
                         class="img-responsive portfolioPhotosize" alt="">
                    <div class="caption">
                        <h4>An Application Website</h4>
                    </div>
                </a>
                </div>
            </div>
            <div class="col-sm-6 col-md-4"> 
                <div class="  thumbnail">
                    <a href="#">
                        <img src="images/p3.png"
                             class="img-responsive portfolioPhotosize" alt="">
                        <div class="caption">
                            <h4>Code Runer: HTML CSS JS</h4>
                        </div>
                    </a>
                </div>
            </div>
        </div> <!-- Row 1 of Portfolio Ends -->


        <div class="row">
            <div class="col-sm-6 col-md-4"> 
                <div class="  thumbnail">
                <a href="#">
                    <img src="images/p2.png"
                         class="img-responsive portfolioPhotosize" alt="">
                    <div class="caption">
                        <h4>Portfolio Website</h4>
                    </div>
                </a>
                </div>
            </div>
            <div class="col-sm-6 col-md-4"> 
                <div class="  thumbnail">
                <a href="#">
                    <img src="images/coming-soon.png"
                         class="img-responsive portfolioPhotosize" alt="">
                    <div class="caption">
                        <h4>Coming Soon</h4>
                    </div>
                </a>
                </div>
            </div>
            <div class="col-sm-6 col-md-4"> 
                    <div class="  thumbnail">
                    <a href="#">
                        <img src="images/more.png"
                             class="img-responsive portfolioPhotosize" alt="">
                        <div class="caption ">
                            <h4>Look all my Projects</h4>
                        </div>
                    </a>
                    </div>
            </div>
        </div>
    </div>
So basically what you do is:
You create the Main Div with the width you want
than you create 2 divs with the class= " row "
and than within the row, you create the thumbnails or the images
Michael Karpinski
@karpimpski
Apr 09 2016 21:40
how can I make the mouse hover over elements show a mouse like it's hovering over a button?
Dardan Demiri
@dardandemiri
Apr 09 2016 21:40
  <div class="col-md-9">
        <h1 class="headers">PORTFOLIO</h1>

        <div class="row">


            <div class="col-sm-6 col-md-4"> 
                <div class="  thumbnail">

                </div>
            </div>

            <div class="col-sm-6 col-md-4"> 
                <div class="  thumbnail">

                </div>
            </div>
            <div class="col-sm-6 col-md-4"> 
                <div class="  thumbnail">

                </div>
            </div>
        </div> <!-- Row 1 of Portfolio Ends -->


        <div class="row">
            <div class="col-sm-6 col-md-4"> 
                <div class="  thumbnail">

                </div>
            </div>
            <div class="col-sm-6 col-md-4"> 
                <div class="  thumbnail">

                </div>
            </div>
            <div class="col-sm-6 col-md-4"> 
                    <div class="  thumbnail">

                    </div>
            </div>
        </div>
    </div>
Michael Karpinski
@karpimpski
Apr 09 2016 21:40
instead of a cursor when my mouse hovers over certain text, i want the index finger to be up like it's hovering over a button
bhenriquez8
@bhenriquez8
Apr 09 2016 21:40
i don't understand <div class="col-sm-6 col-md-4">
Dardan Demiri
@dardandemiri
Apr 09 2016 21:40
@bhenriquez8 that's bootstrap
Michael Karpinski
@karpimpski
Apr 09 2016 21:41
@bhenriquez8 that makes it so that it shows 6 columns on small screens and 4 on medium screens
Dardan Demiri
@dardandemiri
Apr 09 2016 21:41
the width of the image
@karpimpski
Michael Karpinski
@karpimpski
Apr 09 2016 21:41
does anybody know how can I make the mouse hover over elements show a mouse like it's hovering over a button?
Dardan Demiri
@dardandemiri
Apr 09 2016 21:41
wait ill show you how
Patrick Ayres
@Pat-Ayres
Apr 09 2016 21:41
@karpimpski you change the cursor in css selector: { cursor: pointer; }
bhenriquez8
@bhenriquez8
Apr 09 2016 21:42
yeah, but i'm use to seeing it like <div class="col-xs-4">, i've never seen it with two "col"s, is that like to box it?
Dardan Demiri
@dardandemiri
Apr 09 2016 21:42
yes @bhenriquez8
Michael Karpinski
@karpimpski
Apr 09 2016 21:42
@Pat-Ayres thank you!
CamperBot
@camperbot
Apr 09 2016 21:42
karpimpski sends brownie points to @pat-ayres :sparkles: :thumbsup: :sparkles:
:star: 255 | @pat-ayres | http://www.freecodecamp.com/pat-ayres
Patrick Ayres
@Pat-Ayres
Apr 09 2016 21:42
@karpimpski css-tricks recently had a good article on it: https://css-tricks.com/using-css-cursors/
bhenriquez8
@bhenriquez8
Apr 09 2016 21:42
oh okay, so not only it's width but it's height too
Dardan Demiri
@dardandemiri
Apr 09 2016 21:43
yeah it depends
have you understand it now @bhenriquez8
?
bhenriquez8
@bhenriquez8
Apr 09 2016 21:43
@dardandemiri i'm gonna play around with the code you gave me and see how it all works out, but i think i understand what's going on. thank you!
CamperBot
@camperbot
Apr 09 2016 21:43
bhenriquez8 sends brownie points to @dardandemiri :sparkles: :thumbsup: :sparkles:
:star: 283 | @dardandemiri | http://www.freecodecamp.com/dardandemiri
Dardan Demiri
@dardandemiri
Apr 09 2016 21:44
Your welcome
feel free to ask, Questions are Free :P
Michael Karpinski
@karpimpski
Apr 09 2016 21:44
@Pat-Ayres thanks for the article, currently reading it!
CamperBot
@camperbot
Apr 09 2016 21:44
karpimpski sends brownie points to @pat-ayres :sparkles: :thumbsup: :sparkles:
:warning: karpimpski already gave pat-ayres points
Dardan Demiri
@dardandemiri
Apr 09 2016 21:44
whenever you need something
Patrick Ayres
@Pat-Ayres
Apr 09 2016 21:45
@karpimpski you're welcome, I rather enjoyed it when I read it, hope you find it useful!
bhenriquez8
@bhenriquez8
Apr 09 2016 21:46
might send a link to the codepen i've been working on for my portfolio, would it be cool for you or whoever to critique it?
Dardan Demiri
@dardandemiri
Apr 09 2016 21:46
yes of course ;)
Michael Karpinski
@karpimpski
Apr 09 2016 21:53
@Pat-Ayres especially found the list of cursors useful. never knew about this site before you linked it, seems very useful!
bhenriquez8
@bhenriquez8
Apr 09 2016 21:55
okay wait, on codepen you made a reference to "images/p4.png." is that image saved somewhere on your codepen profile?
Patrick Ayres
@Pat-Ayres
Apr 09 2016 21:55
@karpimpski ya they have a lot of cool articles and resources. I think the guy who founded it is also involved at CodePen
Dardan Demiri
@dardandemiri
Apr 09 2016 21:56
actually those images are on my server @bhenriquez8
bhenriquez8
@bhenriquez8
Apr 09 2016 21:57
oh from your site? and somehow codepen knows that?
Dardan Demiri
@dardandemiri
Apr 09 2016 21:57
here you can go, and with Inspect Element inspect the parts you need just for information
bhenriquez8
@bhenriquez8
Apr 09 2016 21:58
inspect what? lol. sorry, i'm new
is that like a developer tool you can get on your browser?
Dardan Demiri
@dardandemiri
Apr 09 2016 22:00
Yes it's a Developer tool that it's Build in the Browser
just Right click on the site and in the Bottom
there is Inspect Element
or just Inspect
What browser are you using ?
bhenriquez8
@bhenriquez8
Apr 09 2016 22:00
chrome
Dardan Demiri
@dardandemiri
Apr 09 2016 22:01
So it's just Inspect
the last element
or with shortcut: Ctrl+Shift+i
and you see all the source code that the site used
bhenriquez8
@bhenriquez8
Apr 09 2016 22:02
alright, so Crtl+Shift+i on codepen.io?
i inspected on your site lol
Dardan Demiri
@dardandemiri
Apr 09 2016 22:06
In all sites you can do Inspect
even in Facebook.com
and you can make changes there too
Edit the colors or whatever you want
Simply said: Inspect element is your friend. And you will use it A LOT in your path to becoming a Full Stack Developer
bhenriquez8
@bhenriquez8
Apr 09 2016 22:08
what if i just want to be exclusively a front end developer? backend stuff kind of intimidates me lol
Dardan Demiri
@dardandemiri
Apr 09 2016 22:08
you can
that no problem at all
but STILL, Inspect Element and Google are your Best friends
ForEver.
Ali
@yxorP
Apr 09 2016 22:09
Hey Campers! I started a Skype group where we share our screens/Voice chat about FCC related things or any programming/web design subjects. A Really friendly community and there's about 60 of us. If you'd like to join please add my Skype on "Kindredbay"
Lanitta
@DivaWeb
Apr 09 2016 22:09
Can someone please explain why you would .push () in this line of code? It does not make since to me seeing as how you are suppose to cipher it not add to it. newString.push(str.charAt(i));
bhenriquez8
@bhenriquez8
Apr 09 2016 22:09
how did you get your site? i was able to get mine with namecheap and then host it with github pages, but i don't think i have much storage on their if i do decide to practice with a database vendor or whatever
Stephen James
@sjames1958gm
Apr 09 2016 22:10
@DivaWeb The newString is the output string after the cipher. You would likely have modified i + or - 13 prior to that
Dardan Demiri
@dardandemiri
Apr 09 2016 22:11
@bhenriquez8 I got my Host when I bought a course online
One year for 10 $
Advanced pack
bhenriquez8
@bhenriquez8
Apr 09 2016 22:12
@dardandemiri that's cool, the DNS that i got my domain with is my first and it's telling me that i have to pay a renewal fee in june. is web development really that costly?
Dardan Demiri
@dardandemiri
Apr 09 2016 22:13
No it's not
All you have to do is, a 10$ Domain.
And a Host.
with 14$ You get This Amazing Course and 1 year free Unlimited Web Hosting with all inclusive
And an certificate in the end
It's amazing, but freecodecamp is More Amazing
bhenriquez8
@bhenriquez8
Apr 09 2016 22:17
@dardandemiri oh sweet, that's a deal! so it's better than hosting with github pages? because me and a friend were thinking of practicing with MySQL too, and we don't really know how to go about it
oh wait, does freecodecamp offer hosting too?
Dardan Demiri
@dardandemiri
Apr 09 2016 22:17
I don't think so
I was talking about the course content and the knowledge you get from here is WOW.
Look at the video, and see it for your self
I have to say Good night now
bhenriquez8
@bhenriquez8
Apr 09 2016 22:20
alright, thanks for the links! I've bookmarked them
Dardan Demiri
@dardandemiri
Apr 09 2016 22:20
Your welcome
Wish you Luck and Motivation
Douglas Kira Muraoka
@douglasmuraoka
Apr 09 2016 23:04
Hey guys, does Codepen allows us to make AJAX requests? I'm getting a strange error...
Hector Garcia
@augmt
Apr 09 2016 23:06
yes, but you may need to use JSONP from time to time
Stephen James
@sjames1958gm
Apr 09 2016 23:08
@douglasmuraoka Is the error something to do with Origin headers
@dardandemiri I bought that course free web site for a year, basicaly
Douglas Kira Muraoka
@douglasmuraoka
Apr 09 2016 23:09
@augmt i'll try this...
@sjames1958gm yes
Now the AJAX request is working, but apparently my page reloads. Shouldn't, because I'm just fetching some JSON data...
This message appears on the Chrome dev console:
"Navigated to http://s.codepen.io/douglasmuraoka/debug/oxENWN?"
Bruce Young
@mutantspore
Apr 09 2016 23:19
@douglasmuraoka yes using a form will cause a reload. you can use something like event.preventDefault() http://api.jquery.com/event.preventdefault/ or not use a form but as you are using react, and putting JS in HTML code, I don’t know where to add it in your code.
Douglas Kira Muraoka
@douglasmuraoka
Apr 09 2016 23:21
@mutantspore omg didn't know about the form behavior lol thanks, I'll change my component :)
CamperBot
@camperbot
Apr 09 2016 23:21
douglasmuraoka sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
:star: 1389 | @mutantspore | http://www.freecodecamp.com/mutantspore
bhenriquez8
@bhenriquez8
Apr 09 2016 23:51
is there a way to center a div?
Michael Karpinski
@karpimpski
Apr 09 2016 23:54
@bhenriquez8 bootstrap class="text-center"
@bhenriquez8 or use the id, margin: auto should work
i'm trying to make a to-do list, and most of my script is done. how would I make it so that every time I submit a to-do, it prints the new to-do as well as the rest of the to-do's?
bhenriquez8
@bhenriquez8
Apr 09 2016 23:55
@karpimpski yeah text-center has only worked for me when it comes to labels, or <h1> elements, but what if i want to center an entire <div> element?
@bhenriquez8 if there is a parent div, do text-center on that. if there isn't, try giving your div an id and using margin: auto on it
@bhenriquez8 if those don't work, put a snippet of your code in and i'll try to help