These are chat archives for FreeCodeCamp/HelpFrontEnd

6th
Jul 2016
Ken Haduch
@khaduch
Jul 06 2016 00:11
@AdventureBear - very nice tribute page!
priyankamalviya
@priyankamalviya
Jul 06 2016 00:19
Hello World!
CamperBot
@camperbot
Jul 06 2016 00:19

welcome to FreeCodeCamp @priyankamalviya!

priyankamalviya
@priyankamalviya
Jul 06 2016 00:20
I am Priyanka,a graduate student at San Jose State University with keen interest in web development
My passion is getting bigger and I am excited to do the projects free code camp offers
Sharanya Nair
@sharanyavr585
Jul 06 2016 00:20
Hello World,
I am Anya, I am a recent software engineering graduate student working at Juniper Networks. I am here because I love front end development and am fairly new to it and wish to learn more. I am very glad to be a part of code camp.
CamperBot
@camperbot
Jul 06 2016 00:20

welcome to FreeCodeCamp @sharanyavr585!

Greg Duncan
@GregatGit
Jul 06 2016 00:29
Hello @sharanyavr585
and hi @priyankamalviya
Zachary Gerard
@Trayuk
Jul 06 2016 00:34
how would i best minimize the spacing applied after ah <h2> text element?
Greg Duncan
@GregatGit
Jul 06 2016 00:36
@Trayuk you could try and give the next element a low (possibly negative) padding or margin
Zachary Gerard
@Trayuk
Jul 06 2016 00:37
kk, figured that but i was not sure if there was another way. Thanks @GregatGit
CamperBot
@camperbot
Jul 06 2016 00:37
trayuk sends brownie points to @gregatgit :sparkles: :thumbsup: :sparkles:
:cookie: 656 | @gregatgit |http://www.freecodecamp.com/gregatgit
Damnme
@Damnme
Jul 06 2016 00:49
why is it caleed an app?
called
isn't it a page?
Aaron Taylor
@aarontaylor
Jul 06 2016 00:54
I tend to think web pages that are interactive in various ways are more apps.
A static site with less dynamic content I tend to call pages .. or informational at times tend to be pages.. but if it is dynamic, I tend to be app
It is a rather fine distinction at best TBH
Damnme
@Damnme
Jul 06 2016 00:56
what's dynamic in that page?
and the task is called "Build a tribute page"
Aaron Taylor
@aarontaylor
Jul 06 2016 01:02
Ah, I missed that part. Well nothing unless you add something
That is more page than app
Carlota Pearl
@caep2015
Jul 06 2016 01:05
Just curious. Does "banned" what I think it means on the "Activity" column to the right of this feed?
Why are they "banned"?
Carlota Pearl
@caep2015
Jul 06 2016 01:12
What is the easiest way to place thumbnail photos of the codepen projects onto my portfolio page? is there a way to do a screenshot or some other method? do they need to be hosted somewhere? kind of lost...any ideas?
Greg Duncan
@GregatGit
Jul 06 2016 01:16
@caep2015 you will have to host the images somewhere - if you have a codepen pro account ($10 a month) or you can check out amazon or many other sites
Carlota Pearl
@caep2015
Jul 06 2016 01:31
@GregatGit Thank you. Not what I wanted to hear, but was expecting. I used to do a lot of image hosting a few years back. Been out of the loop for a while. So was hoping things had changed a bit. I do see a lot of places that offer free stock photos and such for web designers and developers. That part is nice.
CamperBot
@camperbot
Jul 06 2016 01:31
caep2015 sends brownie points to @gregatgit :sparkles: :thumbsup: :sparkles:
:cookie: 657 | @gregatgit |http://www.freecodecamp.com/gregatgit
Carlota Pearl
@caep2015
Jul 06 2016 01:36
@GregatGit I don't have the pro account but I do have amazon hosting so now my question is how to get the screen shot or "box view" of the pens on code pen.
Greg Duncan
@GregatGit
Jul 06 2016 01:37
@caep2015 are you in windows
Carlota Pearl
@caep2015
Jul 06 2016 01:40
@GregatGit mac but I still have my pc
Greg Duncan
@GregatGit
Jul 06 2016 01:43
@caep2015 either is good - change the view of your pen to full page - then just make the window smaller - then take a edited screen shot
try to keep all your screen shots of projects the same size to make formatting easier
Press Command + Shift + 4 all at the same time. - for mac
Carlota Pearl
@caep2015
Jul 06 2016 01:48
@GregatGit Got it. Thanks so much : )
CamperBot
@camperbot
Jul 06 2016 01:48
caep2015 sends brownie points to @gregatgit :sparkles: :thumbsup: :sparkles:
:warning: caep2015 already gave gregatgit points
Suzanne Atkinson
@AdventureBear
Jul 06 2016 02:07
@khaduch thank you (re tribute page)
CamperBot
@camperbot
Jul 06 2016 02:07
adventurebear sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1405 | @khaduch |http://www.freecodecamp.com/khaduch
Blake Geraci
@bgeraci714
Jul 06 2016 02:19
Can i get a little feedback on my portfolio page?
I ended up hosting it in github as opposed to codepen because it wasn't working on mobile via codepen.
Ken Nawrocki
@nawrockp
Jul 06 2016 02:28
@bgeraci714 looks pretty good. The only issue i see is that on mobile it scrolls down too far when the Menu items are clicked on.
Blake Geraci
@bgeraci714
Jul 06 2016 02:43
Thanks @nawrockp I'll see how to best change that. Do you mean with the nav bar moved down?
CamperBot
@camperbot
Jul 06 2016 02:43
bgeraci714 sends brownie points to @nawrockp :sparkles: :thumbsup: :sparkles:
:cookie: 332 | @nawrockp |http://www.freecodecamp.com/nawrockp
Ken Nawrocki
@nawrockp
Jul 06 2016 02:48
@bgeraci714 yes But also when closed. Let me see if i can attach a screenshot.
96street
@96street
Jul 06 2016 02:53
How do i get my <a> background-colour to take up the full size of it's parent? http://codepen.io/kingdezz/pen/zBzBaZ?editors=0110
Ken Nawrocki
@nawrockp
Jul 06 2016 02:56
@bgeraci714 yeah gitter doesnt seem to support pasting images, but here is a link: http://i.imgur.com/sqvaEuv.jpg
I know that is a common problem when scrolling to anchors. I think there is a good solution on stack exchange
Ken Nawrocki
@nawrockp
Jul 06 2016 03:05
@96street 0
I am on a phone so i cannot inspect your pen. But chances are the parent element has padding or the a element has a margin.
96street
@96street
Jul 06 2016 03:07
ahh yep you're right i replaced padding from <li> to <a> and it works now, thanks @nawrockp
CamperBot
@camperbot
Jul 06 2016 03:07
96street sends brownie points to @nawrockp :sparkles: :thumbsup: :sparkles:
:cookie: 333 | @nawrockp |http://www.freecodecamp.com/nawrockp
Christopher Steingraber
@csteingraber
Jul 06 2016 03:15
Hi guys I’m pretty new to FreeCodeCamp and Bootstrap for that matter so I’m sorry if this is ridiculously basic. I’ve read the documentation from Bootstrap and searched aound on StackOverflow but I’m still stuck. I’m making my tribute page right now and have multiple rows of pictures. I am trying to center the pictures in each row and Bootstrap says to use the .center-block class on an image using the .image-responsive class. I’ve attempted using this on the img element and its parent div element but neither give me the result of centering the image. The only way I’ve been able to center them thus far is by creating a row and using Bootstrap’s grid system to place empty divs on the left and right of the div element containing the responsive img. Anyone know of how to use the .center-block class or a better method than this? Also, here is my CodePen: http://codepen.io/csteingraber/pen/AXrwra
Rico042002
@rico042002
Jul 06 2016 04:12
trying to give a background color to the <div element can anyone help
Sorin Ruse
@sorinr
Jul 06 2016 04:13
@rico042002 <div style="background-color: blue;">
Reggie
@Reggie01
Jul 06 2016 04:27

@csteingraber

    class="center-block"

center image

buiphuking
@buiphuking
Jul 06 2016 04:47
can i ask something guys,
when we use settimeout, when we use setinterval ??????????????
DJ
@qualitymanifest
Jul 06 2016 04:51
@buiphuking settimeout runs once after the amount of time you set. setInterval runs repeatedly, once per amount of time you set
Ken Nawrocki
@nawrockp
Jul 06 2016 04:53
Pl
guys do check it and review it
kirbyedy
@kirbyedy
Jul 06 2016 08:37
@vvkgdm you have to work on the positioning, this looks very weird
vvkgdm
@vvkgdm
Jul 06 2016 09:02
postioning of what element @kirbyedy
kirbyedy
@kirbyedy
Jul 06 2016 09:21
@vvkgdm does this look ok to you ?
Screen Shot 2016-07-06 at 12.21.12.png
vvkgdm
@vvkgdm
Jul 06 2016 09:47
ok le mme change it
vvkgdm
@vvkgdm
Jul 06 2016 10:12
@kirbyedy look at it now
Keone Martin
@Athaman
Jul 06 2016 10:13
Hey folks, not related to a FCC challenge but I made a youtube API reader that works fine when i run it on my local drive but when i host it on github the fancybox plugin just opens a blank grey square. Anyone used fancybox? or could you think of an obvious reason it would launch properly when run from my computer but crash when run off a github hosted page?
wait disregard, i think it's a https/http combination issue.
Keone Martin
@Athaman
Jul 06 2016 10:43
confirmed, just had to change the API call to https:
Ken Haduch
@khaduch
Jul 06 2016 11:37
@buiphuking - a quick answer before I run off - setInterval for something repeating, like a timer (Pomodoro, for example). setTimeout for a one-time event, or possibly a short series of events such as the Simon game - although I would still use setInterval for that, myself. I hope that helps - gotta run!
Zelite
@zelite
Jul 06 2016 11:43
Anyone knows how to properly implement bootstraps scrollspy? http://getbootstrap.com/javascript/#scrollspy
but does not work =/
Will
@DoctorWilliamTroll
Jul 06 2016 11:50
Hey, can anyone give me some quick advice on where I should even begin with the tribute page project?
Richard Andrews
@Whiplash5057
Jul 06 2016 12:17
@khaduch hey....!!!
Sabir
@SSaabbiirr
Jul 06 2016 12:59
hey guys, how can I change boxmodel?
I want to all my content to be on 50% size of my web.
kirbyedy
@kirbyedy
Jul 06 2016 13:22
width: 50% ?
Zachary Gerard
@Trayuk
Jul 06 2016 13:26
how do you link the pen?
Keone Martin
@Athaman
Jul 06 2016 13:33
just copy paste the URL in here @Trayuk
perfect, thanks, if more people were on id ask for design advice.
thanks @Athaman
CamperBot
@camperbot
Jul 06 2016 13:35
trayuk sends brownie points to @athaman :sparkles: :thumbsup: :sparkles:
:cookie: 511 | @athaman |http://www.freecodecamp.com/athaman
Keone Martin
@Athaman
Jul 06 2016 13:36
No problem :)
Dylan
@dhcodes
Jul 06 2016 13:44
something is wonky with that link
or something is wrong with codepen
i'm guessing the latter
Richard Andrews
@Whiplash5057
Jul 06 2016 13:52
for(var i = 0; i < simon.length; i++) {                                    // make each blink sequentially
                (function(i) { 
                    setTimeout(function() {
                        soundIndex = color.indexOf(simon[i]);
                        sounds[soundIndex].play();
                        $("#"+simon[i]).fadeOut(150).fadeIn(150);                    // make selected slice blink
                    }, i * 800);
                })(i);                                                                                                // make it user's turn to play                                                        
            }
Guys what is (i) in the snippet
in the end of the function
Aaron Taylor
@aarontaylor
Jul 06 2016 14:16
The i in the end is the index for the first for loop it appears
trying to see how this is being used. Walking through it because it is interesting to me too @Whiplash5057
William Cabell
@wbac88
Jul 06 2016 14:18
Hi guys, is there anyone that would be willing to give me some help figuring out how to request an API for my quote machine? This is what I have for the call:
 var forismatic = "http://api.forismatic.com/api/1.0/";
  $.getJSON( forismatic, {
    method:getQuote,
    key:"",
    lang:"en;",
    format: "json"
  })
Does this look remotely correct?
Richard Andrews
@Whiplash5057
Jul 06 2016 14:19
@aarontaylor IIFE
Susan
@susangapper
Jul 06 2016 14:19
@wbac88 I gave up with forismatic as I kept running up against CORS, but your method : getQuotes needs quotes
Zachary Gerard
@Trayuk
Jul 06 2016 14:19
loking for ONLY design advice on my tribute page. i have worked some issues with it. one of the issues was how it presents on multiple screens. i am not 100% happy with the repeating image but it seems the better of the solutions. Please let me know what you think and if you see any other ascetically unpleasing issues. Thanks in advance. http://codepen.io/Trayuk/pen/pbwBPq
William Cabell
@wbac88
Jul 06 2016 14:20
@susangapper Did you find a better one to use?
And other than that, that section looks ok?
@Trayuk The list dots seem a little far away from the centered text, but I like the concept!
Zachary Gerard
@Trayuk
Jul 06 2016 14:23
yea, not sure about that, on my cellphone when i look at it they are far way, when i have it on my laptop they are close as they should be.
Samson Alajede
@ajesamson
Jul 06 2016 14:23
@Trayuk the don’t panic color is also a bit disturbing to the eye
given the background
Zachary Gerard
@Trayuk
Jul 06 2016 14:24
what could cause the bullet points to shift to the far left on a smaller screen?
Thanks @wbac88 and @ajesamson
CamperBot
@camperbot
Jul 06 2016 14:24
trayuk sends brownie points to @wbac88 and @ajesamson :sparkles: :thumbsup: :sparkles:
:cookie: 338 | @ajesamson |http://www.freecodecamp.com/ajesamson
:cookie: 275 | @wbac88 |http://www.freecodecamp.com/wbac88
Samson Alajede
@ajesamson
Jul 06 2016 14:24
@Trayuk for the repeating background image
you can add no-repeat to the body
style
William Cabell
@wbac88
Jul 06 2016 14:25
@Trayuk Actually, it's not working at full screen on mine, too.
Samson Alajede
@ajesamson
Jul 06 2016 14:25
there is an option for stretching the background image
let me find out
Zachary Gerard
@Trayuk
Jul 06 2016 14:26
@ajesamson what about #0099cc for dont panic?
William Cabell
@wbac88
Jul 06 2016 14:26
@wbac88 Maybe because you've centered the text, and not the list itself.
@Trayuk Maybe because you've centered the text, and not the list itself.
Zachary Gerard
@Trayuk
Jul 06 2016 14:26
nvm, too light, closer though
kk,m center list. thanks
William Cabell
@wbac88
Jul 06 2016 14:27
@Trayuk Try putting the list in it's own div and going from there
Samson Alajede
@ajesamson
Jul 06 2016 14:27
@Trayuk the orange color does better
more readable than the #0099cc
for the background
Zachary Gerard
@Trayuk
Jul 06 2016 14:29
last try, orange or #99e6ff
Samson Alajede
@ajesamson
Jul 06 2016 14:29
you can change contain to cover
in the background-size
to fill the screen instead of repeat in the css background

99e6ff is much better

Zachary Gerard
@Trayuk
Jul 06 2016 14:31
thanks, i was think i did cover and had issues on my cellphone viewing it
nope, that seems better, Thanks again for the advice. i think it is coming along well. just need to solve the bullet points.
William Cabell
@wbac88
Jul 06 2016 14:35
@Trayuk OK, got the list centered, just go back over the bootstrap section on columns, works great.
Gaurav Tolani
@Gauravtolani
Jul 06 2016 14:37
can anyone help me find the bug in my code
when i am changing properties of footer class..its changing properties of body element...
Zachary Gerard
@Trayuk
Jul 06 2016 14:37
@wbac88 Thanks, i assume you are talking about revisiting the lessons. If so thank you for not spoon feeding.
CamperBot
@camperbot
Jul 06 2016 14:37
trayuk sends brownie points to @wbac88 :sparkles: :thumbsup: :sparkles:
:warning: trayuk already gave wbac88 points
William Cabell
@wbac88
Jul 06 2016 14:40
@Trayuk Ha, yes I was saying that. If you can use the rows and columns feature, that will make your life so much easier going forward!! Good luck!
Samson Alajede
@ajesamson
Jul 06 2016 14:43
@Gauravtolani i couldn’t replicate the issue
it works fine when i change
Zachary Gerard
@Trayuk
Jul 06 2016 14:43
correct me if i am wrong but i would want to set it up for a small device something like col-xs-4, and it should scale just fine for larger devices?
Samson Alajede
@ajesamson
Jul 06 2016 14:43
the color of the footer to white
@Trayuk you’re right
xs means smaller device and devices bigger than that
William Cabell
@wbac88
Jul 06 2016 14:50
OK, so trying a new API and got this:
$(document).ready(function(){
    $("#getMessage").click(function(){
        $.getJSON("GET http://quotes.rest/quote.json", function(result){
            $.each(result, function(i, field){
                $("#quote-block").append(field + " ");
            });
        });
    });
});
Still nothing showing up when I click the button.
Any ideas?
Expiratio
@Expiratio
Jul 06 2016 14:51
you don't need that GET inside the url
William Cabell
@wbac88
Jul 06 2016 14:52
@Expiratio Yep, missed that in the cut and paste, thanks, still nothing, though
CamperBot
@camperbot
Jul 06 2016 14:52
wbac88 sends brownie points to @expiratio :sparkles: :thumbsup: :sparkles:
:cookie: 282 | @expiratio |http://www.freecodecamp.com/expiratio
Expiratio
@Expiratio
Jul 06 2016 14:52
hmm
i think you should first test if you're actually receiving the json when you use getJSON
William Cabell
@wbac88
Jul 06 2016 14:55
OK, that makes sense, what would be the way to do that?
Expiratio
@Expiratio
Jul 06 2016 14:56
let's see
i would create a test <span> to write the potential json to, and then i would attempt to get the json when the document is loaded, something like this
$(document).ready(function() {
    $.getJSON("http://quotes.rest/quote.json", function(json) {
      json = JSON.stringify(json);
      $("#test-span").html(json);
    });
});
let me edit that
Expiratio
@Expiratio
Jul 06 2016 15:02
if nothing happens to my test span then there was a problem
i have to go now, but i hope that was helpful
William Cabell
@wbac88
Jul 06 2016 15:04
So using that, the quote should just appear within the span when the page loads, right?
Expiratio
@Expiratio
Jul 06 2016 15:04
i think so
William Cabell
@wbac88
Jul 06 2016 15:04
OK, thanks for the help!
Chris Rutherford
@cjrutherford
Jul 06 2016 15:13
hey guys! I'm building the quote machine, and I'm a little miffed on how to call or link my JS to my HTML. I understand the CSS, but I'm trying to use the JQuery $("ID").click(); function
it doesn't seem to trigger
William Cabell
@wbac88
Jul 06 2016 15:15
@cjrutherford Hey man, I'm on the same one. Are you trying to link a button?
Chris Rutherford
@cjrutherford
Jul 06 2016 15:16
yeah.... I think I might have not gotten anything to my variables via a botched Math.random() cal
call
William Cabell
@wbac88
Jul 06 2016 15:17
Ah, got it. Have you gotten your API to work yet?
That's what's killing me.
Dylan
@dhcodes
Jul 06 2016 15:17
@cjrutherford make sure you enable jquery in your codepen settings
Chris Rutherford
@cjrutherford
Jul 06 2016 15:18
not yet, I went through laying out my page, now I'm building the functionality and first and foremost is getting the quote stuff, and thanks @dhcodes I have it imported.
CamperBot
@camperbot
Jul 06 2016 15:18
cjrutherford sends brownie points to @dhcodes :sparkles: :thumbsup: :sparkles:
:star2: 1181 | @dhcodes |http://www.freecodecamp.com/dhcodes
Dylan
@dhcodes
Jul 06 2016 15:18
@wbac88 paste your codepen, we can help
Dylan
@dhcodes
Jul 06 2016 15:18
@cjrutherford same to you; paste your pen if you have a specific question
William Cabell
@wbac88
Jul 06 2016 15:18
I've tried three different APIs and multiple ways of trying to get them
Dylan
@dhcodes
Jul 06 2016 15:19
@wbac88 in your case, it's because you're loading codepen as https and your api is http resulting in a mixed content warning
check chrome dev tools console and you'll see it
@wbac88 i like to console.log the API result first to make sure it's working and then use it to modify the page
@wbac88 after you change your codepen to http in the address bar, you'll still get an Origin Header error. That's a codepen issue. To fix that prepend your api url with https://crossorigin.me/
then it looks like it will work
happy coding
Dylan
@dhcodes
Jul 06 2016 15:23
yeah, but remove the , and ? at the end
and then close your parenthesis
William Cabell
@wbac88
Jul 06 2016 15:24
Oh yeah, I just mis-copied and pasted.:
$.getJSON("http://crossorigin.me/http://quotes.stormconsultancy.co.uk/random.json", function(result)
Dylan
@dhcodes
Jul 06 2016 15:24
right
and then console.log(result) and you should see the objects returned in the console
William Cabell
@wbac88
Jul 06 2016 15:24
I'm still getting "No 'Access-Control-Allow-Origin' header is present on the requested resource." in the dev tools
Chris Rutherford
@cjrutherford
Jul 06 2016 15:24
it's okay @dhcodes I think I just need to lookup the math.random()
class before I move on
Dylan
@dhcodes
Jul 06 2016 15:25
weird, it worked for me
Farhad
@fhdhsni
Jul 06 2016 15:25
Hey guys. I've a problem with eslint. It gives me no-undef error when I'm using functions and variable defined outside of my js file. say functions defined in a library that I require. How can I solve this?
Dylan
@dhcodes
Jul 06 2016 15:25
@wbac88 crossorigin is iffy, maybe refresh it
Dylan
@dhcodes
Jul 06 2016 15:26
@wbac88 make it https://crossorigin.me/
add an s
to the http
William Cabell
@wbac88
Jul 06 2016 15:26
Oh man it logged! Thank you!!!!
@dhcodes Thanks!
CamperBot
@camperbot
Jul 06 2016 15:27
wbac88 sends brownie points to @dhcodes :sparkles: :thumbsup: :sparkles:
:star2: 1182 | @dhcodes |http://www.freecodecamp.com/dhcodes
the doer
@ewathedoer
Jul 06 2016 15:31
I’m looking for suggestions for improvements on my tictactoe http://theonewhodo.es/tictactoe/
Peter Temple
@peter1403
Jul 06 2016 15:36
Hi I'm currently on the "Show the local weather" challenge and am very confused with the openWeather API, it says to call the API i need to use http://api.openweathermap.org/data/2.5/forecast/city?id=524901&APPID={key} where 'key' is the key I recieved upon signing up, but to 'Call by geographic location' i need to use api.openweathermap.org/data/2.5/weather?lat={lat}&lon={lon}
Dylan
@dhcodes
Jul 06 2016 15:36
@ewathedoer works well. I'd rephrase "you will play with baby or adult" to something like "skill level: beginner or advanced". Also, during the computer's turn it says "compiturn" when I think it should say "computer's turn"
good job @ewathedoer
Peter Temple
@peter1403
Jul 06 2016 15:36
Am i using both?
the doer
@ewathedoer
Jul 06 2016 15:37
@dhcodes thanks, I will look to it :)
CamperBot
@camperbot
Jul 06 2016 15:37
ewathedoer sends brownie points to @dhcodes :sparkles: :thumbsup: :sparkles:
:star2: 1183 | @dhcodes |http://www.freecodecamp.com/dhcodes
greg
@wearenotgroot
Jul 06 2016 15:37
@peter1403 /weather is the current weather right now
Dylan
@dhcodes
Jul 06 2016 15:37
@peter1403 you will append the key after the lat/lon
with &APPID={key}
Aaron Taylor
@aarontaylor
Jul 06 2016 15:37
@peter1403 you do need to append the key to the end of the call to make sure it will work
greg
@wearenotgroot
Jul 06 2016 15:37
@peter1403 while forecast is weather in 3 hours and beyond
Dylan
@dhcodes
Jul 06 2016 15:38
your lat/lon you get from the browser either via html5 (though it won't work in chrome) or via ip address @peter1403
greg
@wearenotgroot
Jul 06 2016 15:38
@peter1403 and yes you need you api key on both
Jacob Bogers
@jacobbogers
Jul 06 2016 15:41
hello?
Peter Temple
@peter1403
Jul 06 2016 15:41
using chrome so i'll not bother with geographic then, thanks guys seems clearer now
Dylan
@dhcodes
Jul 06 2016 15:41
hello
Jacob Bogers
@jacobbogers
Jul 06 2016 15:41
I am trying to do this but it is not working, some help would be appreceated
Dylan
@dhcodes
Jul 06 2016 15:41
@jacobbogers which part
Jacob Bogers
@jacobbogers
Jul 06 2016 15:41
mmm
I cannot log in
i see the webapp of clemantine
nice page
click on github login button
and it crash (see big error message in web)
some kind of stacktrace
Dylan
@dhcodes
Jul 06 2016 15:42
@jacobbogers are you logging into clementine on cloud9 or just logging into cloud9 or what
Toni Shortsleeve
@KoniKodes
Jul 06 2016 15:43
@jacobbogers I'm still on twitch... looks like something to look forward to.
Jacob Bogers
@jacobbogers
Jul 06 2016 15:44
@KoniKodes , haha, its a long road))
@dhcodes, if you have 5 min, we can walk me through this?
Toni Shortsleeve
@KoniKodes
Jul 06 2016 15:44
@jacobbogers Yes, but you've hung in there...
Jacob Bogers
@jacobbogers
Jul 06 2016 15:44
I am not familiar with passpoort github ect
Dylan
@dhcodes
Jul 06 2016 15:45
@jacobbogers are you working on a particular project or just getting going?
Jacob Bogers
@jacobbogers
Jul 06 2016 15:45
@KoniKodes I am very tenecious
@dhcodes i am just following the FCC examples
Toni Shortsleeve
@KoniKodes
Jul 06 2016 15:45
@fhdhsni have you added the jquery to your settings>
Jacob Bogers
@jacobbogers
Jul 06 2016 15:45
clemantine is new for me, I normally use node and express
Dylan
@dhcodes
Jul 06 2016 15:46
@jacobbogers what step are you on at the bottom?
Jacob Bogers
@jacobbogers
Jul 06 2016 15:46
ok let me go back to step one
can you see step 1 @dhcodes?
lets take it from the top
Toni Shortsleeve
@KoniKodes
Jul 06 2016 15:47
Later guys..
Jacob Bogers
@jacobbogers
Jul 06 2016 15:48
@KoniKodes later, nice to see you
Dylan
@dhcodes
Jul 06 2016 15:49
yeah I see it @jacobbogers
have you made an account on cloud9?
Jacob Bogers
@jacobbogers
Jul 06 2016 15:49
yeah and a project,
ok lets see step one
i made account and I am logged into cloud9
Dylan
@dhcodes
Jul 06 2016 15:49
and when you made the project you cloned in clementine?
Jacob Bogers
@jacobbogers
Jul 06 2016 15:49
yeah, from github
and did all the apt-get to install mongo etc
but lets do the steps ok? just to check i did everything ok
Dylan
@dhcodes
Jul 06 2016 15:50
@jacobbogers but you cloned clementine by using the prompt on cloud9 when making a new project right?
Jacob Bogers
@jacobbogers
Jul 06 2016 15:50
I will make a new workspeace
Dylan
@dhcodes
Jul 06 2016 15:50
that's step 2
Jacob Bogers
@jacobbogers
Jul 06 2016 15:50
I already did this, but I will make brand new workspace
Dylan
@dhcodes
Jul 06 2016 15:50
paste that url they give you in the clone from git box
Dylan
@dhcodes
Jul 06 2016 15:51
yeah
Jacob Bogers
@jacobbogers
Jul 06 2016 15:51
ok,
Dylan
@dhcodes
Jul 06 2016 15:51
then click the gear at the top of your workspace and show files
hiden
Jacob Bogers
@jacobbogers
Jul 06 2016 15:51
I am goig to create new project and post screenshot here
Dylan
@dhcodes
Jul 06 2016 15:51
k
Jacob Bogers
@jacobbogers
Jul 06 2016 15:52
yes, I did that
moment.....
ascr1.png
this is my screen, looks good, I am pressing ok
agreed?
Dylan
@dhcodes
Jul 06 2016 15:55
agreed
Jacob Bogers
@jacobbogers
Jul 06 2016 15:56
ok
its creating
ok , I am now in project, I go to next step on FCC
this step I hsow hidden files step 3/14
done
step 4/14 create file ".env"
done
Chris Rutherford
@cjrutherford
Jul 06 2016 15:58
what should I check if I get no response from my javascript in codepen?
Jacob Bogers
@jacobbogers
Jul 06 2016 15:59
step 5/15 put these keys int your .env file
@dhcodes, can we go to "HelpBackEnd" for this?
Dylan
@dhcodes
Jul 06 2016 16:00
@jacobbogers sure
Chris Rutherford
@cjrutherford
Jul 06 2016 16:06
hmmm.... has anyone else had trouble with this?
dryyyyy
@dryyyyy
Jul 06 2016 16:10
Hi, everyone! Could anyone tell me how to replace uppercase letters with '-' and that letter (e.g. in thisIsSpinalTap)?
Gary Siu
@GarySiu
Jul 06 2016 16:11
@cjrutherford It's document.getElementById. Not ID.
@cjrutherford It helps to put the codepen in debug mode.
Chris Rutherford
@cjrutherford
Jul 06 2016 16:16
ah.... yeah, and I also need to turn off auto reload
Darshan
@Dave1089
Jul 06 2016 16:16
http://codepen.io/dave1089/pen/WxNGqG , Can anyone help with fetching offline channel data?
Chris Rutherford
@cjrutherford
Jul 06 2016 16:20
@GarySiu thanks for the advice, but it still feels like the JS isn't running. I have an onLoad event handler that injects the quote, but I don't seem to see the results
CamperBot
@camperbot
Jul 06 2016 16:20
cjrutherford sends brownie points to @garysiu :sparkles: :thumbsup: :sparkles:
:cookie: 110 | @garysiu |http://www.freecodecamp.com/garysiu
Gary Siu
@GarySiu
Jul 06 2016 16:23
@cjrutherford On certain javascript errors, it will stop all other javascript from loading. Got to fix everything to a certain extent first.
Chris Rutherford
@cjrutherford
Jul 06 2016 16:24
@GarySiu I think I found what was causing issues. I was misusing the Math.random() class again....
Chris Rutherford
@cjrutherford
Jul 06 2016 16:31
function generateQuote(){ var seed = Math.floor(Math.random() * qta.length); quote.innerHTML = "' " + qta[seed].text + " '"; author.innerHTML = "--" + qta[seed]['author']; }
I'm not sure why this isn't inserting the text into the page.....
it's pulling the right information and putting it into the right places.....
Zachary Gerard
@Trayuk
Jul 06 2016 16:49
is there a way to have a background image be centered to the text so that with smaller screens the image cuts from the left and the right evenly?
Gary Siu
@GarySiu
Jul 06 2016 16:50
@cjrutherford Your function works. You need to call it ;)
@cjrutherford You're calling it with window.onLoad before the DOM is ready so nothing happens.
Chris Rutherford
@cjrutherford
Jul 06 2016 16:52
oh! @GarySiu ! so where do I call it? I'm not sure how the html and the js interact in code pen....
Gary Siu
@GarySiu
Jul 06 2016 16:53
@Trayuk You can use a media query to change which css is used with which screen size. https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
@cjrutherford Actually window.onload should work... weird.
Darshan
@Dave1089
Jul 06 2016 16:56
Hi @GarySiu ! http://codepen.io/dave1089/pen/WxNGqG Can you please help me with fetching offline data?
Gary Siu
@GarySiu
Jul 06 2016 16:58
@cjrutherford Found your problem. You capitalized the L. Should be window.onload
Chris Rutherford
@cjrutherford
Jul 06 2016 16:58
@GarySiu so I guess that's the only exception for camelCase.....
Gary Siu
@GarySiu
Jul 06 2016 16:59
@cjrutherford JavaScript really isn't as consistent as it should be but if they 'fix' it then a lot of things would break
@Dave1089 Sorry but I have to run to an event IRL. Try asking someone else or PM me if you can't get help for a long time and I'll get back to you.
Chris Rutherford
@cjrutherford
Jul 06 2016 17:00
@GarySiu too bad though, it's still not loading on document load.... I'm calling the generateQuote() method inside the document.onload
Chris Rutherford
@cjrutherford
Jul 06 2016 17:00
off to the gym then, maybe after I haven't looked at it for a while, it'll be better
Sabir
@SSaabbiirr
Jul 06 2016 17:01
guys, how can i give my text BOLD?
Darshan
@Dave1089
Jul 06 2016 17:01
@GarySiu No worries
@SSaabbiirr strong tag
Chris Rutherford
@cjrutherford
Jul 06 2016 17:02
@GarySiu Thanks, don't know what was different from mine and what you had..... either way, now on to coding the get quote button and then the tweet and share buttons.
CamperBot
@camperbot
Jul 06 2016 17:02
cjrutherford sends brownie points to @garysiu :sparkles: :thumbsup: :sparkles:
:warning: cjrutherford already gave garysiu points
Philip Krück
@pkrueck
Jul 06 2016 17:10
My jQuery code doesn' seem to work. I want to scroll to certain anchor tags in my page
http://codepen.io/pkrueck/full/WxozOP/
Darshan
@Dave1089
Jul 06 2016 17:16
Screen Shot 2016-07-06 at 11.14.37 AM.png
@pkrueck
Philip Krück
@pkrueck
Jul 06 2016 17:18
thanks @Dave1089
CamperBot
@camperbot
Jul 06 2016 17:18
pkrueck sends brownie points to @dave1089 :sparkles: :thumbsup: :sparkles:
:cookie: 279 | @dave1089 |http://www.freecodecamp.com/dave1089
Ken Haduch
@khaduch
Jul 06 2016 17:18
@SSaabbiirr - or use the CSS font-weight: bold; property, if you want to style a section of text. But <strong> works.
Philip Krück
@pkrueck
Jul 06 2016 17:18
but it still doesn't work..... http://codepen.io/pkrueck/pen/WxozOP
Darshan
@Dave1089
Jul 06 2016 17:21

@pkrueck I can still see the error.. why don't you use only one $(document).ready(function(){
$('a').click(function(event){

// event.preventDefault();
var hash = this.hash;
$('html, body').animate({
'scrollTop': $(hash).offset().top
},'800',function(){
window.location.hash = hash;
});
});
});

Philip Krück
@pkrueck
Jul 06 2016 17:24
thanks
Ken Haduch
@khaduch
Jul 06 2016 17:36

@pkrueck - I tried some change on your page and it looks like it made it work - it was getting some errors 2VM207 pen.js:14Uncaught TypeError: Cannot read property 'top' of undefined when I clicked on one of your navbar items. So I changed the sections to <a id="About">, etc. and the code in your scrolling functions to this:

  $('a[href="#About"]').click(function(e) {
    e.preventDefault();
    var targetOffset = $('a[id="About"]').offset().top; /// <<< this is the key change, to "id" from "href"
    $('body').animate({
        scrollTop: targetOffset
      },
      1000
    );
  });

and it seems to work.

Sabir
@SSaabbiirr
Jul 06 2016 17:39
@khaduch thanks
CamperBot
@camperbot
Jul 06 2016 17:39
ssaabbiirr sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1406 | @khaduch |http://www.freecodecamp.com/khaduch
Philip Krück
@pkrueck
Jul 06 2016 17:44
thankk you very much @khaduch
image in the well need to be aligned center , any help? http://codepen.io/rjvg/pen/LkLakr?editors=1100
Ken Haduch
@khaduch
Jul 06 2016 17:53
@rjvgdm - try this: <img id="sndpic" class="center-block" on your image.
rajeev
@rjvgdm
Jul 06 2016 17:55
it works thanks @khaduch
CamperBot
@camperbot
Jul 06 2016 17:55
rjvgdm sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1407 | @khaduch |http://www.freecodecamp.com/khaduch
Chris Rutherford
@cjrutherford
Jul 06 2016 17:56
now I'm having trouble getting the .onClick to run....
Chris Rutherford
@cjrutherford
Jul 06 2016 18:03
nvm got it
Lorian
@glowlo
Jul 06 2016 18:10
hey guys...i'm having a couple issues with my tribute page. 1) On codepen, when i put my styles in the CSS section, it's the background-color class does not render...when i keep it in the body of the html, the body background color renders 2) I cannot figure out how to get the image caption to have a white background or be included in the border like the original website has it.
Can anyone see what i'm doing wrong?

<style>

body{
background-color: gray;
}
h1, h2{
color:black;
}

.photo-position{
width:1000px;
position:center;
}
.img-border{
border-color: white;
border-width: 20px;
border-style: solid;
}


</style>

<body>
<div class="container-fluid">
<p><h1 class="text-center" >Dr. Norman Bourlag</h1> </p><br>
<p><h2 class="text-center" style="font-style:italic">The Man who saved a billion lives</h2></p><br>
<div class="row text-center ">
<figure>
<img class="img-responsive center-block img-border " src="https://c2.staticflickr.com/4/3689/10613180113_fdf7bcd316_b.jpg">
<figcaption>Dr. Norman Borlaug, second from left, trains biologists in Mexico on how to increase wheat yields - part of his life-long war on hunger.</figcaption>
</figure>
</div>
</div>
</body>

Sabir
@SSaabbiirr
Jul 06 2016 18:13
Guys, How can i move to the center all my pictures side by sede? Not with center-block
Philip Krück
@pkrueck
Jul 06 2016 18:23
how can I align the project thumbnails in a horizontal line with an equal amount of space. I couldn't find solution online.
Ray Liu
@mania7539
Jul 06 2016 18:24
Hey campers! OMG I am gonna cry , I finally finish my last front-end project , if you're keen , you can play the simon game app , completely absolutely finally go thru it with my heart, let me know if you've got any opinions, suggestions and comments :), here's the link: http://codepen.io/mania7539/full/EyXLOK
Anthony Ho
@chiho13
Jul 06 2016 18:24
@pkrueck u can use flexbox
Darshan
@Dave1089
Jul 06 2016 18:28
anyone got chance ? http://codepen.io/dave1089/pen/WxNGqG second ajax call issue
not getting offline channel json
sentedelviento
@sentedelviento
Jul 06 2016 18:30
So, for some reason the first header in my pen is misaligned. I added it to the page with jquery
it doesn't show up unless you click the magnifying glass, search something, and the results are misaligned
i'm okay with debugging javascript errors, but css makes me want to throw my hands up in the air
Anthony Ho
@chiho13
Jul 06 2016 18:40
@sentedelviento just use bootstrap to sort it out
@sentedelviento otherwise draw it out the wireframe, separate the components and start again
sentedelviento
@sentedelviento
Jul 06 2016 18:41
I'm not going to use bootstrap lmao
I guess I could just start over with the css and recreate the page again.
Anthony Ho
@chiho13
Jul 06 2016 18:46
@sentedelviento u can write your own container
@sentedelviento just use the right html and css
Luke
@lukenetti3
Jul 06 2016 18:56
Hey guys, any idea why this isn't even printing the string I am testing? Do I need some key for the API? http://codepen.io/lukenetti3/pen/akwEQk?editors=0010
Chris Rutherford
@cjrutherford
Jul 06 2016 19:01
I can't seem to figure out how to work out the twitter button on the random quote generator....
Lorian
@glowlo
Jul 06 2016 19:02
how are you able to upload a link to your codepen?
@lukenetti3
Luke
@lukenetti3
Jul 06 2016 19:03
@glowlo Just copy and paste the url in to the chat.
Ananay
@ananaymital
Jul 06 2016 19:06
can anybody help me with the weather app please?
Lorian
@glowlo
Jul 06 2016 19:06
oh...hahah..thank you
Luke
@lukenetti3
Jul 06 2016 19:07
@Deadpool37 Yeah I might be able to. What do you need help with?
Ananay
@ananaymital
Jul 06 2016 19:07
@cjrutherford https://support.twitter.com/articles/81218 this might help
@lukenetti3 the api fcc recommended uses http while codepen uses https so how do i work that out
Madeline
@wincerind
Jul 06 2016 19:08
Hi I’m not sure if this is the correct place to ask this but I have a specific question; what language do you guys think would work best for a virtual pet website? (along the lines of flight rising, neopets, etc.)
Lorian
@glowlo
Jul 06 2016 19:09

I have the tribute page built...but need help working out a few things

  1. my photo caption should be contained with the photo and have a white background
  2. My <ul> is not aligning the text with the bullet point, nor will it center
  3. when I put my styles in the CSS section, they do not render for some reason, but they do fine in the body of the html
  4. I don't know how to get the last quoted statement and it's signature to align left

All suggestions apprectiated!
http://codepen.io/glowlo/pen/rLzZqr

Luke
@lukenetti3
Jul 06 2016 19:10
@Deadpool37 I used http for my link to the open weather api. I used the lat and lon values and then my id for the api after that.
@Deadpool37 Not sure what you mean by code pen using https.
Ananay
@ananaymital
Jul 06 2016 19:14
@lukenetti3 I think i have an idea
Luke
@lukenetti3
Jul 06 2016 19:14
@Deadpool37 I can send you my codepen if that will help.
Ananay
@ananaymital
Jul 06 2016 19:15
@lukenetti3 actually i already had that
:P
uniforlyff
@uniforlyff
Jul 06 2016 19:16
@glowlo set your li's to text-align: left
Lorian
@glowlo
Jul 06 2016 19:16
ok...thank you @uniforlyff
uniforlyff
@uniforlyff
Jul 06 2016 19:16
and set a width to your ul and margin: 0 auto
Luke
@lukenetti3
Jul 06 2016 19:16
@Deadpool37 Did you figure it out?
uniforlyff
@uniforlyff
Jul 06 2016 19:16
that should get centered
Ananay
@ananaymital
Jul 06 2016 19:16
@lukenetti3 no
Luke
@lukenetti3
Jul 06 2016 19:17
@Deadpool37 Are you using the lat and lon values to calculate the location?
Ananay
@ananaymital
Jul 06 2016 19:17
@lukenetti3 go to your pen and open console
@lukenetti3 yeah
@lukenetti3 do you get an error in the console?
Luke
@lukenetti3
Jul 06 2016 19:18
@Deadpool37 What do you mean by open console? I'm not getting an error anywhere
Ananay
@ananaymital
Jul 06 2016 19:18
@lukenetti3 ctrl+shift+J
Luke
@lukenetti3
Jul 06 2016 19:19
@Deadpool37 I have a mac so thats probably not the shortcut.
Lorian
@glowlo
Jul 06 2016 19:19
thank you!
Ananay
@ananaymital
Jul 06 2016 19:19
blob
@lukenetti3
@lukenetti3 Command + Option + J for chrome mac
guys
Luke
@lukenetti3
Jul 06 2016 19:22
@Deadpool37 Yeah I did that and opened the console and I'm not getting an error.
vvkgdm
@vvkgdm
Jul 06 2016 19:22
i need to put my image in center
Ananay
@ananaymital
Jul 06 2016 19:22
@lukenetti3 nothing like the pic i posted?
Luke
@lukenetti3
Jul 06 2016 19:24
@Deadpool37 No, I'm not getting anything. I have to go now. Sorry I couldn't help! Good luck!
Ananay
@ananaymital
Jul 06 2016 19:24
@lukenetti3 thanks anyway
CamperBot
@camperbot
Jul 06 2016 19:24
deadpool37 sends brownie points to @lukenetti3 :sparkles: :thumbsup: :sparkles:
:cookie: 280 | @lukenetti3 |http://www.freecodecamp.com/lukenetti3
dhuddleston
@dhuddleston
Jul 06 2016 19:34
@vvkgdm The image appears centered to me. Do you mean that you need extra space around the image so it isn't touching the menu?
Ryan Williams
@Ryanwfile
Jul 06 2016 19:34
Can someone familiar with the transform-origin css property please help me to center the 4 quarter circles inside the larger circle in this codepen, thank you http://codepen.io/Ryanwfile/pen/xOLkmV
uniforlyff
@uniforlyff
Jul 06 2016 19:42
@Ryanwfile
  1. create a container with 4 divs
  2. set container with an equal width and height
  3. the container should contain the overflow and set the border-radius to 50%
  4. the 4 divs within the container should have a width of 50% and floated to the left
  5. and set the divs heights half of the containers
lemme reword that
@Ryanwfile http://output.jsbin.com/zasofuhucu like this?
Ryan Williams
@Ryanwfile
Jul 06 2016 19:46
@uniforlyff yes just like that thank you, I just need to have black spaces around the quarter circles so they appear as separate buttons for the Simon game project
CamperBot
@camperbot
Jul 06 2016 19:46
ryanwfile sends brownie points to @uniforlyff :sparkles: :thumbsup: :sparkles:
:cookie: 376 | @uniforlyff |http://www.freecodecamp.com/uniforlyff
uniforlyff
@uniforlyff
Jul 06 2016 19:47
@Ryanwfile you mean border?
Ryan Williams
@Ryanwfile
Jul 06 2016 19:47
@uniforlyff yes just like a border
uniforlyff
@uniforlyff
Jul 06 2016 19:48
@Ryanwfile then add a border :)
but make sure you add box-sizing to border box
dhuddleston
@dhuddleston
Jul 06 2016 19:49

@vvkgdm Try this:

#1: Add a class to the div that your image is contained in:

<div class="circle-padding">
  <img class="img-responsive img r" src="https://scontent.fmaa1-1.fna.fbcdn.net/v/t1.0-9/12249604_1022118007856065_8433404923222012749_n.jpg?oh=f503c73a48db1bd30f5aba0711d5932f&oe=58336AD7" align="midddle" id="img1">
  </div>

#2: Use CSS to add padding to the class

.circle-padding {
  padding-bottom: 75px;
}

This will allow you to add padding to the image without changing the border. :)

Luke
@lukenetti3
Jul 06 2016 19:55
Hey guys, any idea why this isn't even printing the string I am testing? Do I need some key for the API?http://codepen.io/lukenetti3/pen/akwEQk?editors=0010
Ryan Williams
@Ryanwfile
Jul 06 2016 20:02
@uniforlyff When I add borders each div appears as squares instead of retaining the shape of the quarter circle, I am not too familiar with border boxing but experimenting with all of the possible values on MDN didn't get the desired behavior http://codepen.io/Ryanwfile/pen/kXoXEE
Hadouken
@Harry97
Jul 06 2016 20:03
Guys, Why can't I clear the search box after pressing "Go!" button ? http://codepen.io/Hadouken/pen/akwEvo
uniforlyff
@uniforlyff
Jul 06 2016 20:06
Ryan Williams
@Ryanwfile
Jul 06 2016 20:06
@uniforlyff wow that's perfect, thank you so much
CamperBot
@camperbot
Jul 06 2016 20:06
ryanwfile sends brownie points to @uniforlyff :sparkles: :thumbsup: :sparkles:
:warning: ryanwfile already gave uniforlyff points
uniforlyff
@uniforlyff
Jul 06 2016 20:06
:+1:
Ray Liu
@mania7539
Jul 06 2016 20:28
Hey guys , do you know where can I learn about AngularJS ? is FCC here provides the course too?
Chris Sparshott
@seemly
Jul 06 2016 20:31
@Harry97 within that codepen example, you are missing jquery and the id attributes are non-existent on each of the input elements
uniforlyff
@uniforlyff
Jul 06 2016 20:33
@mania7539 start at w3schools
it's great for starting
Ray Liu
@mania7539
Jul 06 2016 20:34
@seemly thank you , nice about that :)
CamperBot
@camperbot
Jul 06 2016 20:34
mania7539 sends brownie points to @seemly :sparkles: :thumbsup: :sparkles:
:cookie: 23 | @seemly |http://www.freecodecamp.com/seemly
Ray Liu
@mania7539
Jul 06 2016 20:34
@uniforlyff ok, I would also google around that, thank you :)
CamperBot
@camperbot
Jul 06 2016 20:34
mania7539 sends brownie points to @uniforlyff :sparkles: :thumbsup: :sparkles:
:cookie: 378 | @uniforlyff |http://www.freecodecamp.com/uniforlyff
Chris Sparshott
@seemly
Jul 06 2016 20:35
no problem, @mania7539 . I recently watched that video course and found it very good
Ray Liu
@mania7539
Jul 06 2016 20:35
and do you know why FCC don't have the React.js coding course? I just got my front end certification , but I don't know how can I proceed to the next level on it
@seemly I just look into the first course, and don't know why it uses .ts for scripting. is it a front end solution or backend solution?
Chris Sparshott
@seemly
Jul 06 2016 20:41
frontend. ts is typescript. typescript is a superset of javascript. helps you to write strict (better) code and allows the use of "types"
the ts files get compiled to js files.
Moisés Man
@moigithub
Jul 06 2016 20:46
@mania7539 many ppl already finished all current FCC curriculum
u can search for external react resources to learn it.. like youtube etc...
https://github.com/markerikson/react-redux-links
https://github.com/enaqx/awesome-react
Mariya
@mariyadiminsky
Jul 06 2016 20:51
I'm sending data into a chat app I created via AJAX and it only updates when I refresh the page. I would appreciate some advice I've been at this for awhile:

$(document).on('ready', function() {
  var title = $('<h1>').text('Chat').addClass('title');
    var chatDisplay = $('<div>').attr('id', 'chat-display');
    var form = $('<form></form>');
    $(form).append('<input type="text" name="your-message" id="your-message"><input type="submit" id="submit" value="Submit">')
  $('body').append(title);
    $('body').append(chatDisplay);
    $('body').append(form);

    function updateChat(data) {
        data.forEach(function(obj) {
            var name = '<span class="name">' + obj.created_by + '</span>';
            var message = '<span class="message">' + obj.message + '</span>';
            $(chatDisplay).append(name + ': '+ message + '<br />');
            $(message).addClass('message');
        })
    }


    $.ajax({
        type: 'GET',
        dataType: 'json',
        url: 'URL',
        success: function(response) {
            updateChat(response);
        },
        error: function() {
            console.log('Error! Trouble Receiving data!');
        }
    })

    $('form').submit(function(event) {
        event.preventDefault();
        $.ajax({
            type: 'POST',
            contentType: 'application/json',
            url: 'SAME URL',
            data: JSON.stringify({'created_by': 'SuperMario','message': $('#your-message').val()
            }),
            success: function(response) {
                $('#your-message').val('');
                $.get('SAME URL', function(response){
                    console.log('in func');
                    console.log(response);
                    updateChat(response)
                })

            },
            error: function(error) {console.log(error)}
        })
    })
});
I'm trying for it to update right after I submit my message
without refreshing
Ray Liu
@mania7539
Jul 06 2016 20:54
@seemly ok thank you, I will learn more on that :D
CamperBot
@camperbot
Jul 06 2016 20:54
mania7539 sends brownie points to @seemly :sparkles: :thumbsup: :sparkles:
:warning: mania7539 already gave seemly points
Ray Liu
@mania7539
Jul 06 2016 20:55
@moigithub thanks for the nice tips, ok , I would manage to learn more, thank you for your encouraging :D
CamperBot
@camperbot
Jul 06 2016 20:55
mania7539 sends brownie points to @moigithub :sparkles: :thumbsup: :sparkles:
:star2: 1659 | @moigithub |http://www.freecodecamp.com/moigithub
Chris Sparshott
@seemly
Jul 06 2016 20:55
@Mashadim can you create a basic example in codepen (or any alternative)
Mariya
@mariyadiminsky
Jul 06 2016 20:56
@seemly I just did I posted it up there
Mariya
@mariyadiminsky
Jul 06 2016 21:08
nnnnever mind :)
Thank you anyway @seemly
CamperBot
@camperbot
Jul 06 2016 21:08
mashadim sends brownie points to @seemly :sparkles: :thumbsup: :sparkles:
:cookie: 36 | @seemly |http://www.freecodecamp.com/seemly
Luke
@lukenetti3
Jul 06 2016 21:13
Hey guys, why does this not go into the “success" part of my code? Is there something wrong with the url I am using. When I paste the url into a webpage it gives me json content, so I don’t understand why I can’t get anything from this url. http://codepen.io/lukenetti3/pen/akwEQk?editors=0010
Tyler Moeller
@TylerMoeller
Jul 06 2016 21:22
@lukenetti3 Add dataType: 'jsonp', to your .ajax call
  $.ajax({
    dataType: 'jsonp',
    url: "https://en.wikipedia.org/w/api.php?action=opensearch&format=json&search=cars",
    success: function(data) {
And hint to get your random page to open, just assign an url to the button. No need for javascript: http://en.wikipedia.org/wiki/Special:Random
Luke
@lukenetti3
Jul 06 2016 21:25
@TylerMoeller Thank you! Also, do I reference that json content with numbers? Like, cars[1][1]….something like that? And okay thanks! I was going to write a seperate function for that. That makes more sense though.
CamperBot
@camperbot
Jul 06 2016 21:25
lukenetti3 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 641 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Jul 06 2016 21:29
@lukenetti3 you'll get a JSON object back, so you'll access it with dot or bracket notation. not sure if that answers your question.
Luke
@lukenetti3
Jul 06 2016 21:30
@TylerMoeller Yeah I that makes sense! Another quick question, trying to be able to really understand all of it. How would I know that its of dataType jsonp?
@TylerMoeller The last time a used an api, I just needed a url.
ErgoProxy
@ProxyOfDeath
Jul 06 2016 21:31
hi all just a qucik question..hope i do this right:
Placed 2 pictures next to each other and they should fill the pages width, which they dont do but insted the DIVS they are in fill the page? any 1 got a hit on where i went wrong? thx
Tyler Moeller
@TylerMoeller
Jul 06 2016 21:31
@lukenetti3 If you look in your browser dev tools console, you'll typically get an error about cross-domain requests. This when you need to use jsonp instead of standard json
Luke
@lukenetti3
Jul 06 2016 21:31
@TylerMoeller Okay, that makes sense. Thanks again!
CamperBot
@camperbot
Jul 06 2016 21:31
lukenetti3 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: lukenetti3 already gave tylermoeller points
Tyler Moeller
@TylerMoeller
Jul 06 2016 21:33
No problem. :)
Daniel
@DanielSusser
Jul 06 2016 21:41
Hello everyone - having some troublesome trouble on the weather checker and quotes projects
anyone able to lend me the handiest of hands?
Hadouken
@Harry97
Jul 06 2016 21:45
@DanielSusser I've finished those two challenges. I'm not super good but post 'em and lets see if I can help you out.
Daniel
@DanielSusser
Jul 06 2016 21:45
@Harry97 thanks! Heres my codepen http://codepen.io/danielthespaniel/pen/BzzGXy
CamperBot
@camperbot
Jul 06 2016 21:45
danielsusser sends brownie points to @harry97 :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for harry97
Daniel
@DanielSusser
Jul 06 2016 21:46
@Harry97 I keep getting an error about the XMLHTTP request
@Harry97 and the solutions im finding online don't seem to hack it!
Hadouken
@Harry97
Jul 06 2016 21:48
@DanielSusser Did you make sure to quick add jQuery ?
Darryl Blake
@darrylblake
Jul 06 2016 21:55
Hey @DanielSusser, this is a cross origin request issue. Have you had a look at: https://www.sitepoint.com/jsonp-examples/ ?
Not sure if you allowed to with that challenge but if you use jQuery’s ajax call and define the dataType as “jsonp” you should be able to get around that.
and make sure you also define the callback “mycallback” you have in the request url.
Daniel
@DanielSusser
Jul 06 2016 22:00
@darrylblake thanks! Will check that out. It's also affect ma' weather checka
CamperBot
@camperbot
Jul 06 2016 22:00
danielsusser sends brownie points to @darrylblake :sparkles: :thumbsup: :sparkles:
:cookie: 22 | @darrylblake |http://www.freecodecamp.com/darrylblake
Randy Goldsmith
@Dueldrawer8
Jul 06 2016 22:21
I am working on my portfolio project. When i actually want to showcase my projects in codepen, how do i get the actual image of the poroject to to show up on my webpage?
http://codepen.io/duel_drawer8/pen/xOLErV
http://codepen.io/duel_drawer8/pen/xOLErV
```
Hadouken
@Harry97
Jul 06 2016 22:22
@DanielSusser YO HOMIE
I really hope you get this, It finally works.
First of all, there was some sort of an issue with a twitter link you shoved into the HTML code so I simply deleted all of the code containing that link and it seems that it was about getting twitter icon I suppose
Daniel
@DanielSusser
Jul 06 2016 22:30
@Harry97 Sweet! How did you stop the evils of the error message?
Hadouken
@Harry97
Jul 06 2016 22:32
right now the issue is each time you press new quote they keep stacking on top of each other and with the same exact quote
also you seem to have added multiple libraries in your javascript tab so I simply removed all except for Jquery
and finally I copy pasted the code at this link : http://quotesondesign.com/api-v4-0/ and made it appened to h1
@DanielSusser Pardon me
Daniel
@DanielSusser
Jul 06 2016 22:36
@Harry97 yeah the difference between your url and mine was the callback= bit
Hadouken
@Harry97
Jul 06 2016 22:36
what specific error message are you talking about ?
Daniel
@DanielSusser
Jul 06 2016 22:37
@Harry97 I was seeing errors in the console about the XMLHTTP request, but it's fixed by fixing the end of the url. I originially had something like 'mycallback=jsonp or some nonsense, but your url has just "&callback=" which does the trick beautifully
Hadouken
@Harry97
Jul 06 2016 22:38
yeah so we dealt with that but now we gotta make sure those quotes don't stack nor be repeated
Daniel
@DanielSusser
Jul 06 2016 22:40
@Harry97 yeah that was another problem. So it returns the same one, even though I've asked for a random one in the URL with "filter[orderby]=rand&filter"
Hadouken
@Harry97
Jul 06 2016 22:45
I guess converting append to text or html might solve the issue of stacking and regarding the repetition I'm trying to read the documentation to figure a solution
Daniel
@DanielSusser
Jul 06 2016 22:46
great, I'm going to pick this up tomorrow. Thanks Harry, you're a king and lifesaver and a gentleman
Johnny Rock
@freekngdom
Jul 06 2016 22:46
I'm having trouble with a few things with the Twitch API.
Can anyone help me with a few of my TODOs?
I'm having trouble searching for a user when I click on them,
and trouble displaying the tooltip as an image when the user hovers over the current game.
Here is my pen:
http://codepen.io/freekngdom/pen/rLzrJb
Thanks!
Hadouken
@Harry97
Jul 06 2016 22:50
@DanielSusser LOL I'm none of that. I'mma keep working on a solution so make sure to recheck my forked version when you see this mention.
Spartano
@Spartano
Jul 06 2016 23:00
hy, i am doing the third react challenge, what is local storage on browser? anyone have some good tutorials? thx
Eraofdiscord
@Eraofdiscord
Jul 06 2016 23:36
Hey guys! Anyone know how to make an image stay where it is when you seem in and out? I made it responsive but it still moves if I zoom in far or close enough.
zoom in and out*
Anyone?
Hadouken
@Harry97
Jul 06 2016 23:40
@DanielSusser turns out we need to add a changing variable to our call back function in order for it to pull a different quote each time to be honest I'm not sure why it's being done in such a way I simply found out the solution here : http://stackoverflow.com/questions/31440314/issue-with-codepen-and-jquery and like I suspected using html instead of append fixes the problem of repetition : http://s.codepen.io/Hadouken/debug/AXoLNB
@Eraofdiscord Hey man, I'm just a fellow camp with a very humble experience post ur code pen and let me see if I can help cuz you're not really specific
Eraofdiscord
@Eraofdiscord
Jul 06 2016 23:42
Yeah my bad haha
Hadouken
@Harry97
Jul 06 2016 23:46
@Eraofdiscord Ok, so basically you want your portfolio image to be enlarged once it's clicked ?
Eraofdiscord
@Eraofdiscord
Jul 06 2016 23:46
No I want the the circle image to stay where it is when I zoom in and out
If you could also tell me how to keep everything centered when I zoom in and out I would appreciate that as well.
tbc13315
@tbc13315
Jul 06 2016 23:49
Hi everyone, I just got my wikipedia view to work after finagling it for a while and I have a question I just can't figure out.
This is a link to my codepen. My question is this:
Hadouken
@Harry97
Jul 06 2016 23:50
@Eraofdiscord ok dude I'm working on it :D
tbc13315
@tbc13315
Jul 06 2016 23:52
Why does my code not work when I declare a variable- APICall (which basically is the url of the wikipedia api + the search term value) outside of the searchWiki function?
Thanks to anybody that can help explain that to me!
Eraofdiscord
@Eraofdiscord
Jul 06 2016 23:52
Thanks @Harry97 it means a lot!
CamperBot
@camperbot
Jul 06 2016 23:52
eraofdiscord sends brownie points to @harry97 :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for harry97