These are chat archives for FreeCodeCamp/HelpFrontEnd

21st
Oct 2016
dhuddleston
@dhuddleston
Oct 21 2016 00:02
@vinaypuppal I used $.ajaxSetup so that I could still use $.getJSON. That way I have the headers in the API request. It's not an actual error that I'm checking for. It's a property that is in the object that the Twitch API sends back that I am checking for. Originally I was just using it as another "else" statement, but it never triggered either.
Michael James Wong
@eyeturnred
Oct 21 2016 00:20
Hey guys i'm on the tribute page, i'm building my own tribute to for anyone i choose right?
webjman
@webjman
Oct 21 2016 00:48
@eyeturnred To be honest the point of the tribute is the layout, if you can get that right it doesn't even have to be serious, they aren't reviewed by anyone anyways.
Sylvio Giubine
@SylvioGiubine
Oct 21 2016 01:44
hello guys ! i need a help, i would like to move my <li> style to de middle of my page, i really dont know how. follow the example...
<div class="container">
<div class="row">
<div class="col-xs-12">

<head>
<h1 style="color:white"; class="text-center bold white ">Ayrton Senna </h1>
<h2 style="color: white" class="text-right">The Legend</h2>

</head>

<body>

<img src="http://i.dailymail.co.uk/i/pix/2015/06/29/17/2A16EF2F00000578-0-image-a-56_1435594654943.jpg">

<body style= "background-color:black">
<p></p>
<div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2">

<ul align="center">
<li> 162 Races</li>
<li> 80 Podium</li>
<li> 41 Wins</li>
<li> 19 fastest lap</li>
<li> 3 world champion>/li>
<li> 1 world´s fan</li>
</ul>
</div>
</div>
</div>
</div>
Ian Lee
@asparism
Oct 21 2016 02:03
does anyone have any idea why the tweet-share window doesn't auto populate with the new quote? http://codepen.io/Asparism/pen/pExBmj
Adam Pinsky
@adampinsky
Oct 21 2016 02:17
Can anyone tell me why my chart.js graph is barely visible in the background? In order to render it you must first set the timer and the 'clock-in. 'http://codepen.io/adampinsky/pen/jrQKKA?editors=0010
Trevor Pyle
@pyleotrevor
Oct 21 2016 02:22
Could someone help my understand how to scroll using jquery? I am trying to have the page scroll upon icon click, but it is not working. http://codepen.io/bearsandbrews/pen/qaLaEE
Joshua Swift
@joshuaswift
Oct 21 2016 02:22
Hey guys, trying to position the sun icon level with the "Sunny" text, can't seem to get it level. Any suggestions? http://codepen.io/Joshuaswift/pen/ORByzx
@asparism your use of the twitter API seems overly complex, a couple lines of jquery achieves the task with ease. Look up the window.open method of jQuery combined with ""https://twitter.com/intent/tweet?text=""
Marina
@joyinthenow
Oct 21 2016 02:34
where do i find the code to input social media Icons?
JD Tadlock
@jdtdesigns
Oct 21 2016 02:35
@Joshuaswift divs are block by default, so inline elements will fall 'in line' next to each other inside the div and block elements like h1, h2's can be set to inline-block to fall in line. Your using 20em for line heights which is like 4 inches, so i can see why your stuff is extremely difficult for you to line up. You need to take all those crazy margins and line heights out and start again.
Joseph
@Jar36
Oct 21 2016 02:36
@joyinthenow Try this site http://fontawesome.io/icons/
Marina
@joyinthenow
Oct 21 2016 02:38
Thank you @Jar36 !
CamperBot
@camperbot
Oct 21 2016 02:38
joyinthenow sends brownie points to @jar36 :sparkles: :thumbsup: :sparkles:
:cookie: 274 | @jar36 |http://www.freecodecamp.com/jar36
Joseph
@Jar36
Oct 21 2016 02:38
@joyinthenow you are welcome, also if you want to change the size: http://fontawesome.io/examples/#larger
Marina
@joyinthenow
Oct 21 2016 02:45
This message was deleted
JD Tadlock
@jdtdesigns
Oct 21 2016 02:46
@adampinsky I wouldn't use the all the radial gradients and box-shadows. More than a couple can cause major lag. It takes awhile to load the page and it's sluggish.
I just looks like one of your bg's is z-indexed over the top of the chart
Adam Pinsky
@adampinsky
Oct 21 2016 02:56
@jdtdesigns thanks so much for looking at it. I'll look into streamlining the backgrounds. To be honest, I cut and pasted them from a gradient builder online. (serves me right. ;-)) However, I don't think they are to blame. Because, if you remove the backgrounds, the chart is still rendering grey in color and it should be red.
CamperBot
@camperbot
Oct 21 2016 02:56
adampinsky sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 711 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
varEnigmatic
@varEnigmatic
Oct 21 2016 03:18
Hello
can anyone help me with some bootstrap on code pen?
Ken Haduch
@khaduch
Oct 21 2016 03:32
@varEnigmatic - someone should be able to help... post your link and questions
Ian Lee
@asparism
Oct 21 2016 04:17
$( document ).ready(function() {
    $("data").html( "ready!" );
});

and nothing is happening. the html is:

<div id="data">data</div>

does anybody know what's going on? i'm working in codepen

c0d0er
@c0d0er
Oct 21 2016 04:21
this code doesnt work, could anybody help to find where is wrong?
function per(x){
    var source = [];     // source=dest[j];
var temp=[];
var dest = [];
    for(var k=0;k<x.length;k++){
        recursive(k)
    }
    function recursive(ch){
for (var i = 0; i <= source.length; ++i) {
  temp = source.slice(0);         
  temp.splice(i, 0, ch);          
  dest.push(temp); 
}

for(var j=0;j<dest.length; j++){
    source=dest[j];
}
return dest;
}
}
per('ab')//should return [['a','b'],['b','a']];
JD Tadlock
@jdtdesigns
Oct 21 2016 04:24
@c0d0er What's the function supposed to do?
what challenge is it i should ask
c0d0er
@c0d0er
Oct 21 2016 04:24
@jdtdesigns permutation
no repeats please
@jdtdesigns this code does work, i tested, but the rest doesnt really do
function recursive(ch){
for (var i = 0; i <= source.length; ++i) {
  temp = source.slice(0);         
  temp.splice(i, 0, ch);          
  dest.push(temp); 
}
JD Tadlock
@jdtdesigns
Oct 21 2016 04:27
haven't done that one in awhile
i'll have to look it over
Ian Lee
@asparism
Oct 21 2016 04:28

why can't i get any kind of display with

$(document).ready(function() {

  if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function(position) {
    $("#data").html("latitude: " + position.coords.latitude + "<br>longitude: " + position.coords.longitude);
  });
}
  else {
    $("#data").html("nope");
  }

});

?

JD Tadlock
@jdtdesigns
Oct 21 2016 04:29
@asparism look at your browser console
it will show errors
it's probably cause you're in chrome and on http
navigator won't work anymore on http
so you can use an ip locator instead
c0d0er
@c0d0er
Oct 21 2016 04:30
@jdtdesigns thanks
CamperBot
@camperbot
Oct 21 2016 04:30
c0d0er sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 712 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
Ian Lee
@asparism
Oct 21 2016 04:31
@jdtdesigns ip locator is similar to navigator but doesn't glitch with the http vs https issue?
JD Tadlock
@jdtdesigns
Oct 21 2016 04:31
@asparism correct
Ian Lee
@asparism
Oct 21 2016 04:32
great. thanks @jdtdesigns
CamperBot
@camperbot
Oct 21 2016 04:32
asparism sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 713 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
Lev
@levgubin
Oct 21 2016 04:32
does anybody know why context.clear (0, 0, canvas.width, canvas.height) might not work?
Nitin Chandran Nair
@NitinNair89
Oct 21 2016 04:32
Good Morning Everyone! :)
Lev
@levgubin
Oct 21 2016 04:57
ok, I've figured that out))
Dr. Paul Kenneth Shreeman
@pkshreeman
Oct 21 2016 06:01
It's morning? @NitinNair89
Nitin Chandran Nair
@NitinNair89
Oct 21 2016 06:01
For me @pkshreeman
Guys, is this channel online or offline - https://www.twitch.tv/cretetion
Dr. Paul Kenneth Shreeman
@pkshreeman
Oct 21 2016 06:01
Good Morning then! It will not be "morning" for me until another hour.
Nitin Chandran Nair
@NitinNair89
Oct 21 2016 06:02
my twitchtv stream url showed me offline, but i can still stream videos
Dr. Paul Kenneth Shreeman
@pkshreeman
Oct 21 2016 06:03
Mine too.
Perhaps something is wrong with their API response?
@NitinNair89
Nitin Chandran Nair
@NitinNair89
Oct 21 2016 06:04
not sure, then how exactly to determine if a channel is offline or online?
Monesul Haque
@mones-cse
Oct 21 2016 06:05
guys i need an advice
i dont know react and sass yet
next project is create a react markdown previewer .
on average how much time i should need to complete the project
(i know it might very man to man programmer to programmer based on their skill still?)
Nitin Chandran Nair
@NitinNair89
Oct 21 2016 06:05
I think not, i just checked @vinaypuppal website - https://www.vinaypuppal.com/fcc-twitch-json-api/ same response! :)
@mones-cse Don't think about how much time you need, whatever time you take, just do it perfectly. :)
Dr. Paul Kenneth Shreeman
@pkshreeman
Oct 21 2016 06:06
This message was deleted
Nitin Chandran Nair
@NitinNair89
Oct 21 2016 06:06
yep
Monesul Haque
@mones-cse
Oct 21 2016 06:08
@NitinNair89
i will give time as much as i need to make an appropriate one :)
but still i believe deadline is the best inspiration :P
Nitin Chandran Nair
@NitinNair89
Oct 21 2016 06:08
then do it in 72 hours @mones-cse :)
that's the deadline i give you :P
Monesul Haque
@mones-cse
Oct 21 2016 06:09
@NitinNair89
aye aye captain :P :)
Nitin Chandran Nair
@NitinNair89
Oct 21 2016 06:22
:D
Did some changes as per suggestions from people yesterday for my twitchtv app.. please see once - https://nitinnair89.github.io/TwitchTvApp/
Nitin Chandran Nair
@NitinNair89
Oct 21 2016 06:33
Sorin Ruse
@sorinr
Oct 21 2016 06:34
@NitinNair89 nice but when you click online or offline and after that all both buttons remains "active" as bg color only
Nitin Chandran Nair
@NitinNair89
Oct 21 2016 06:34
yep, just fixed it a while ago
check the codepen version
i am updating github right now
done. anything else?
Sorin Ruse
@sorinr
Oct 21 2016 06:37
@NitinNair89 and u need also in the array and code that two closed channels as in the challenge example
Nitin Chandran Nair
@NitinNair89
Oct 21 2016 06:37
i have added all channels
from the example
how do i know if channel is closed?
or inactive?
Sorin Ruse
@sorinr
Oct 21 2016 06:40
the api call will return an error and you should add js code to catch that error
Nitin Chandran Nair
@NitinNair89
Oct 21 2016 06:41
yea that i understood.. i am checking the docs.. but could not find the error code yet :(
Sorin Ruse
@sorinr
Oct 21 2016 06:42
@NitinNair89 try to add this two to your arr: "comster404", "brunofin",
Nitin Chandran Nair
@NitinNair89
Oct 21 2016 06:42
ok
yep, there's a 404 not found
Sorin Ruse
@sorinr
Oct 21 2016 06:46
@NitinNair89 yep. here my codepen for it twitch
Jorge
@liberaltech
Oct 21 2016 06:54
please check out this tool I made, calling it a day, let me know what you guys think
https://json-disco.herokuapp.com
Jeff Greenlee
@JeffGreenlee42
Oct 21 2016 08:07
Hey! Hello World!
Oh! CamperBot! where are you?
:(
Oh well.. Camperbot is taking a nap? Anyway's I have a CSS question and I'm wondering if anyone here has a suggestion?
This code Works.. but I get a serious Linter error:
Nitin Chandran Nair
@NitinNair89
Oct 21 2016 08:09
ask
Jeff Greenlee
@JeffGreenlee42
Oct 21 2016 08:09

.meta li:after {
    content: "\\";
    padding: 0 2px;
    color: #999;
}
Nitin Chandran Nair
@NitinNair89
Oct 21 2016 08:10
and the Linter error is?
Jeff Greenlee
@JeffGreenlee42
Oct 21 2016 08:10
Does NOT like the escaped backslash.. Umm hang on I'll grab the error.
blob
Nitin Chandran Nair
@NitinNair89
Oct 21 2016 08:12
Why did you add the backslashes
?
Jeff Greenlee
@JeffGreenlee42
Oct 21 2016 08:13
Oh! that is a "psuedo" after tag.. It's a for a specific thing I am doing with a "continue" and I want parantheses around it... I watched a video demonstration of someone suggesting this the way to do it from CSS then sticking it into the HTML.
Nitin Chandran Nair
@NitinNair89
Oct 21 2016 08:15
I know the psuedo:after, but not sure if you can use escape characters in CSS.. sorry! :(
Jeff Greenlee
@JeffGreenlee42
Oct 21 2016 08:15
Oh.. wait.. that's not right.. sorry I mean It's for adding a backslash between two different anchor tags ....
Linter complains about it... but that CSS code actually works!!!
Nitin Chandran Nair
@NitinNair89
Oct 21 2016 08:16
Haha .. that's weird :P
Jeff Greenlee
@JeffGreenlee42
Oct 21 2016 08:18
yeah! it's a cool way to add characters.. any characters between two elements where you want special handling.. It's just an interesting problem.. and I wonder why there isn't a better way to escape a backslash character!
Nitin Chandran Nair
@NitinNair89
Oct 21 2016 08:19
:D
Sorin Ruse
@sorinr
Oct 21 2016 08:26
@NitinNair89 maybe just try to reorder the buttons and data like: all, online, offline, inactive. but generally its quite nice
Nitin Chandran Nair
@NitinNair89
Oct 21 2016 08:27
ok will do. Thanks @sorinr :)
CamperBot
@camperbot
Oct 21 2016 08:27
nitinnair89 sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 779 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Oct 21 2016 08:27
@NitinNair89 welcome
Nitin Chandran Nair
@NitinNair89
Oct 21 2016 08:27
done :P
Sorin Ruse
@sorinr
Oct 21 2016 08:29
@NitinNair89 :+1:
kemboi
@felexkemboi
Oct 21 2016 08:48
i am done with my front end development.am now on a challenge of "build a tribute page".somebody to help me,what is this all about please?
Nitin Chandran Nair
@NitinNair89
Oct 21 2016 08:49
@felexkemboi You need to create a web page for any well-known personality
Sorin Ruse
@sorinr
Oct 21 2016 08:51
@felexkemboi you can pick any subject u like and just present it as u wish. thats all
kemboi
@felexkemboi
Oct 21 2016 08:51
@NitinNair89 thank you
CamperBot
@camperbot
Oct 21 2016 08:51
felexkemboi sends brownie points to @nitinnair89 :sparkles: :thumbsup: :sparkles:
:cookie: 284 | @nitinnair89 |http://www.freecodecamp.com/nitinnair89
Mapamatician
@Mapamatician
Oct 21 2016 09:43
hi guys, I am loading a tab with Bootstrap nav-pills. The tab opens, and the active class changes, but the active tab does not persist. I am using jQuery. How can I make the active class persist?
    <ul class="nav nav-pills nav-stacked" role="tablist">
        <li class="active"><a href="/profile" style="text-align: center;">Profile</a></li>
        <li><a href="/profile/settings" style="text-align: center;">Settings</a></li>
     </ul>

    <script>
    $('ul.nav.nav-pills li a').click(function() {           
        $(this).parent().addClass('active').siblings().removeClass('active');           
});
</script>
SweetLearner
@SweetLearner
Oct 21 2016 09:47
just made my tribute page .https://codepen.io/SweetLearner/full/gwkLEN
Nitin Chandran Nair
@NitinNair89
Oct 21 2016 09:56
Good one @SweetLearner :+1:
@Mapamatician codepen link please?
c0d0er
@c0d0er
Oct 21 2016 10:09
doese anybody know the meaning of 1+ in ([a-z])\1+?
Nitin Chandran Nair
@NitinNair89
Oct 21 2016 10:09
more than once i think
Dmitry Pavlov
@ifamed
Oct 21 2016 10:12
@c0d0er \1+ matches the same text as most recently matched by the 1st capturing group
JeansBolong
@JeansBolong
Oct 21 2016 10:12
wiki Factorialize a Number
CamperBot
@camperbot
Oct 21 2016 10:12
no wiki entry for: factorialize a number
c0d0er
@c0d0er
Oct 21 2016 10:15
@ifamed without the +, ([a-z])\1 can only match aa of aab but not aaa of aaab, why?
Dmitry Pavlov
@ifamed
Oct 21 2016 10:17
@c0d0er can you show me with example?
c0d0er
@c0d0er
Oct 21 2016 10:20
@ifamed example is aaab ccddda
kemboi
@felexkemboi
Oct 21 2016 10:23
i need the link for building a tribute page please
Nitin Chandran Nair
@NitinNair89
Oct 21 2016 10:23
@felexkemboi What link?
kemboi
@felexkemboi
Oct 21 2016 10:23
i need the link for building a tribute page please
Nitin Chandran Nair
@NitinNair89
Oct 21 2016 10:24
:|
Dmitry Pavlov
@ifamed
Oct 21 2016 10:24
@felexkemboi wat
EL QOMRI
@elqomri
Oct 21 2016 10:25
Hi every one,
EL QOMRI
@elqomri
Oct 21 2016 10:25
have you already get this error
mixed active content
Blocage du chargement du contenu mixte actif (mixed active content) « http://api.openweathermap.org/data/2.5/weather?lat=41.3827755&lon=2.1788703&APPID=be1af85d5ffacd266beee70fefc978ac »
c0d0er
@c0d0er
Oct 21 2016 10:26
@ifamed did you use https://regex101.com/?
Nitin Chandran Nair
@NitinNair89
Oct 21 2016 10:27
@elqomri I am getting proper response in the browser. How are you formatting the JSON response?
Dmitry Pavlov
@ifamed
Oct 21 2016 10:27
@c0d0er yes
c0d0er
@c0d0er
Oct 21 2016 10:27
@ifamed thanks
CamperBot
@camperbot
Oct 21 2016 10:27
c0d0er sends brownie points to @ifamed :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for ifamed
EL QOMRI
@elqomri
Oct 21 2016 10:28
@NitinNair89 $.getJSON(url,
function(data) {
console.log(data);
}
);
Nitin Chandran Nair
@NitinNair89
Oct 21 2016 10:29
Do you have a pen @elqomri ?
Dmitry Pavlov
@ifamed
Oct 21 2016 10:29
@NitinNair89 i have a pen, i have an apple :smile:
Nitin Chandran Nair
@NitinNair89
Oct 21 2016 10:30
@ifamed I meant codepen link :)
Dmitry Pavlov
@ifamed
Oct 21 2016 10:33
@elqomri you do not have the values to the variables: latitude, longitude
Artur Arsalanov
@kurumkan
Oct 21 2016 10:33
@elqomri http://codepen.io/elqomri/pen/bwOEgr/?editors=0011 try to open this link and will be some consolelog(http:// not https://)
EL QOMRI
@elqomri
Oct 21 2016 10:34
@ifamed Latitude: 41.3827962
Longitude: 2.1788738999999997
Artur Arsalanov
@kurumkan
Oct 21 2016 10:38
@elqomri any errors?
Nitin Chandran Nair
@NitinNair89
Oct 21 2016 10:39
is the getJSON method working?
A simple console.log inside it is not getting displayed..
Artur Arsalanov
@kurumkan
Oct 21 2016 10:40
@NitinNair89 for me works. If you open via http:// not https://
Nitin Chandran Nair
@NitinNair89
Oct 21 2016 10:40
weird..i tried in chrome as well as FF
Dmitry Pavlov
@ifamed
Oct 21 2016 10:41
but the determination of the geolocation does not work for me in chrome
Mapamatician
@Mapamatician
Oct 21 2016 10:43
how can I add bootstrap to codepen?
I am trying to load a tab with Bootstrap nav-pills. The tab opens, and the active class changes, but the active tab does not persist. I am using jQuery. How can I make the active class persist?
Dmitry Pavlov
@ifamed
Oct 21 2016 10:44
@Mapamatician Screen Shot 2016-10-21 at 13.44.02.png
Artur Arsalanov
@kurumkan
Oct 21 2016 10:45
@Mapamatician settings/javascript/quick add - then choose jquery. Then choose Bootstrap, THen go to Css - quick add - choose Bootstrap
Mapamatician
@Mapamatician
Oct 21 2016 10:46
thanks
Artur Arsalanov
@kurumkan
Oct 21 2016 10:48
@Mapamatician don't take wrong - the correct way to thank here is like - @name thank you
CamperBot
@camperbot
Oct 21 2016 10:48
kurumkan sends brownie points to @mapamatician and @name :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for name
:warning: could not find receiver for mapamatician
EL QOMRI
@elqomri
Oct 21 2016 10:49
@ifamed thanks, seem to work now
CamperBot
@camperbot
Oct 21 2016 10:49
elqomri sends brownie points to @ifamed :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for ifamed
vínαч puppαl
@vinaypuppal
Oct 21 2016 10:52
This message was deleted
Mapamatician
@Mapamatician
Oct 21 2016 10:52
thanks @ifamed and @kurumkan
CamperBot
@camperbot
Oct 21 2016 10:52
:cookie: 355 | @kurumkan |http://www.freecodecamp.com/kurumkan
:warning: could not find receiver for ifamed
mapamatician sends brownie points to @ifamed and @kurumkan :sparkles: :thumbsup: :sparkles:
Mapamatician
@Mapamatician
Oct 21 2016 10:53
why is it not loading ?
never mind
can someone help me change the active class ?
http://codepen.io/roflmao/pen/rrozpb
the link works for me, but I want to remove the active class from the 1st element and apply it to another element
RakeshNerkar
@Rakesh18754
Oct 21 2016 10:59
I am looking for some widget based dashboard javascript framework....any suggestions or shall i go for custom coding?
MangoKing-IV
@MangoKing-IV
Oct 21 2016 11:20
Hey
How can I create a navbar like the one on this page with the background image behind it, but playing as a slide by changing every 4 seconds
Tom Sharkey
@tbsharkey
Oct 21 2016 11:21
Could you guys take a look at my tribute page? It doesnt come out right on mobile .
MangoKing-IV
@MangoKing-IV
Oct 21 2016 11:21
The navbar which im referring to in the one the page opens to with the sail
Great tribute page Tom, really like the outline design on the information
Tom Sharkey
@tbsharkey
Oct 21 2016 11:23
Thanks!
Dmitry Pavlov
@ifamed
Oct 21 2016 11:26
please see if it works properly in all browsers?
https://codepen.io/famed/pen/gwQPyQ
Tom Sharkey
@tbsharkey
Oct 21 2016 11:27
Seems to work in chrome
Dmitry Pavlov
@ifamed
Oct 21 2016 11:31
@tbsharkey this does not happen, that the missing numbers?
Tom Sharkey
@tbsharkey
Oct 21 2016 11:37
It starts at 0 and went up
what's it supposed to do>
MangoKing-IV
@MangoKing-IV
Oct 21 2016 11:51
How can I create a navbar like the one on this page with the background image behind it, but playing as a slide by changing every 4 seconds
http://www.dtelepathy.com/blog/inspiration/23-great-examples-of-innovative-navigation-for-your-inspiration
Nitin Chandran Nair
@NitinNair89
Oct 21 2016 11:53
the navbar is transparent
MangoKing-IV
@MangoKing-IV
Oct 21 2016 12:05
@NitinNair89 You have to click the drop down button
Also how can I add a cool design behind the "Services" Text replacing the oval
Sorin Ruse
@sorinr
Oct 21 2016 12:41
just a funny quotes app with no html tags but just xml: funny quotes
Nitin Chandran Nair
@NitinNair89
Oct 21 2016 13:37
@MangoKing-IV add background to that element via CSS
and you can use Dadeden's animate.css to add animations easily
Nitin Chandran Nair
@NitinNair89
Oct 21 2016 13:55
@sorinr Really Good UI :)
Marcin Zalewski
@Wymowny
Oct 21 2016 13:55

Hi, can someone help me with counter in JS? I have something like this:
$("#getting-started")
.countdown("2016/11/20", function(event) {
var $this = $(this).html(event.strftime(

        + '<small>ruszamy za:</small> <br>'
        + '<span>%D</span> d '
        + '<span>%H</span> h '
        + '<span>%M</span> m '
        + '<span>%S</span> s')
    );

}); '

And after every second 's' letter is a little bit moving to left or right because number change. What can I do to stop this letter and put it always on the same place, not moving?

Nitin Chandran Nair
@NitinNair89
Oct 21 2016 13:57
add some padding before the letter
*try adding. Also try with a fixed margin space before the letter
Marcin Zalewski
@Wymowny
Oct 21 2016 13:58
padding should be added to letter? like <span class="padding"> s</span> ?
Nitin Chandran Nair
@NitinNair89
Oct 21 2016 13:59
try it and then you will know :)
Marcin Zalewski
@Wymowny
Oct 21 2016 14:01
isn't working, i'm trying with :before margin but it also isnt working
Nitin Chandran Nair
@NitinNair89
Oct 21 2016 14:01
just adding the class "padding" won't work.
Marcin Zalewski
@Wymowny
Oct 21 2016 14:02
i know i know, I added css styles
but all the time second change and letter moves
Nitin Chandran Nair
@NitinNair89
Oct 21 2016 14:02
add margin to the span for seconds
or just add   just before 's' and see if it works
&nbsp;
Marcin Zalewski
@Wymowny
Oct 21 2016 14:05
both solution are not working:(
Nitin Chandran Nair
@NitinNair89
Oct 21 2016 14:05
pls show the code.. codepen?
Marcin Zalewski
@Wymowny
Oct 21 2016 14:05
ok, 1 sec.
on codepen everything's fine.. I think it's problem with font
Nitin Chandran Nair
@NitinNair89
Oct 21 2016 14:09
ok, then where were you testing it before when you said it is not working? :)
Dmitry Pavlov
@ifamed
Oct 21 2016 14:10
what’s happened?
Marcin Zalewski
@Wymowny
Oct 21 2016 14:10
locally, on my computer, but on codepen i didn't add this font and it was fefault like arial or something
so i think that in my font (gilroy extra bold) letters have different 'length/width'
and that cause the problem
maybe can I somehow set letters width?
Nitin Chandran Nair
@NitinNair89
Oct 21 2016 14:13
you mean white-space ?
vínαч puppαl
@vinaypuppal
Oct 21 2016 14:13
@Wymowny instead of letters width try to set letter-spacing: 2px or any value that suits your need and check
Sorin Ruse
@sorinr
Oct 21 2016 14:15
@NitinNair89 lol. was fulling around
Marcin Zalewski
@Wymowny
Oct 21 2016 14:15
eh, whie-space and letter-spacing isn't working too
Nitin Chandran Nair
@NitinNair89
Oct 21 2016 14:15
:) @sorinr
show us your code @Wymowny so that we can help you better
Marcin Zalewski
@Wymowny
Oct 21 2016 14:17
it's look like this, but I can't import my font on codepen
now everything is working, but with my font 's' letter is moving right/left every second
Nitin Chandran Nair
@NitinNair89
Oct 21 2016 14:18
what's the link tag for your font?
put it in codepen settings and try
kenobijr
@kenobijr
Oct 21 2016 14:19

Hey there.
Got a confusing problem with my Tic Tac Toe project:
Before I will make my AI "smarter", I coded a simple function which does a random move on AI´s turn. It works, but only on the AI´s first move. On the second turn , the AI does 2 moves. On the third turn, the AI does 3 moves and so on....
I just can´t find the error, would be great if someone could help me!
Thank you in advance!

Here´s my pen:
http://codepen.io/kenobijr/pen/ozJorK

Marcin Zalewski
@Wymowny
Oct 21 2016 14:19
I can't import this font, it's just able to downloa (Gilroy Extra-Bold)
Nitin Chandran Nair
@NitinNair89
Oct 21 2016 14:20
tried it on google fonts page? - fonts.google.com
Marcin Zalewski
@Wymowny
Oct 21 2016 14:20
yes, this font isn't there
Nitin Chandran Nair
@NitinNair89
Oct 21 2016 14:23
ahh ok
I can't help you then @Wymowny not sure what to do. Sorry! :(
Marcin Zalewski
@Wymowny
Oct 21 2016 14:25
ok, thanks, I'll try to set some static width for second and maybe then 's' letter won't change its place
Nitin Chandran Nair
@NitinNair89
Oct 21 2016 14:26
hmm ok
Eduardo Buganemi Botelho
@eduardorioterra
Oct 21 2016 14:46
Hi I'm trying to do a menu horizontal to my portfolio page, can you help me? The dropdowns need to be horizontal and Items needs to be vertical http://codepen.io/eduardorioterra/pen/BLvJmY
Nitin Chandran Nair
@NitinNair89
Oct 21 2016 14:50
you mean the dropdown2 should be on the right of dropdown?
@eduardorioterra
Eduardo Buganemi Botelho
@eduardorioterra
Oct 21 2016 14:50
yes
Nic
@ElSantoNic
Oct 21 2016 14:55
@tbsharkey good tribute page!
MangoKing-IV
@MangoKing-IV
Oct 21 2016 14:57
@NitinNair89 How would i use danedens animations on codepen?
Nitin Chandran Nair
@NitinNair89
Oct 21 2016 14:57

@eduardorioterra your menu-btn styles was preventing it..try this:

#nav-btn li{
 display: inline;
}

But fix those menu-btn CSS. I tried after removing all your menu-btn css and it works

MangoKing-IV
@MangoKing-IV
Oct 21 2016 14:57
it says i have to download it
Nitin Chandran Nair
@NitinNair89
Oct 21 2016 14:57
@MangoKing-IV you can just add the link in codepen
MangoKing-IV
@MangoKing-IV
Oct 21 2016 14:58
is this how I would do it ?
<head>
<link rel="stylesheet" href="animate.min.css">
</head>
Nitin Chandran Nair
@NitinNair89
Oct 21 2016 14:58
nope, just like how you added bootstrap, same way.. type animate..it should probably give you github link
Eduardo Buganemi Botelho
@eduardorioterra
Oct 21 2016 15:03
ok @NitinNair89 thank you, i'll try
CamperBot
@camperbot
Oct 21 2016 15:03
eduardorioterra sends brownie points to @nitinnair89 :sparkles: :thumbsup: :sparkles:
:cookie: 286 | @nitinnair89 |http://www.freecodecamp.com/nitinnair89
Nitin Chandran Nair
@NitinNair89
Oct 21 2016 15:04
Welcome! @eduardorioterra :)
MangoKing-IV
@MangoKing-IV
Oct 21 2016 15:34
When was your turning point in web development that you had realized you were a good web developer ?
xSnowpeltx
@xSnowpeltx
Oct 21 2016 15:53
I'm working on the tictactoe project, coding the computer ai in specific and (though theres probably more problems than this) theres some sort of problem with my function to get the computer to either complete a 3 in a row or block the opponent's 3 in a row. its in GAME.computer.checkWinOrBlock(num). Heres my codepen http://codepen.io/xSnowpeltx/pen/NRzdNZ
Nitin Chandran Nair
@NitinNair89
Oct 21 2016 15:56
I liked the UI very much @xSnowpeltx Good one! :+1:
xSnowpeltx
@xSnowpeltx
Oct 21 2016 15:56
Thanks on that
Abraham Danquah
@AbrahamDanquah
Oct 21 2016 15:59
Hello
Annu Nirmal
@annunirmal
Oct 21 2016 16:00
topic: twitch.tv CSS code
can anyone help me find out why my css line 60's .animate:focus is not working
https://codepen.io/nirmalannu/pen/GjBzbW
Nitin Chandran Nair
@NitinNair89
Oct 21 2016 16:01
Hi @annunirmal :)
Annu Nirmal
@annunirmal
Oct 21 2016 16:01
@NitinNair89 hi whats up
Nitin Chandran Nair
@NitinNair89
Oct 21 2016 16:02
why do you need :focus?
Abraham Danquah
@AbrahamDanquah
Oct 21 2016 16:02
Am trying to add an image in a navigational bar using the below code but the image doesn't appear
Nitin Chandran Nair
@NitinNair89
Oct 21 2016 16:02
hover is working great
xSnowpeltx
@xSnowpeltx
Oct 21 2016 16:02
... I think for some reason its not running the first lines of code in chooseSpot. Why would it do that?
Abraham Danquah
@AbrahamDanquah
Oct 21 2016 16:02
<nav class="fixed-nav-bar">
<!-- Fixed navigation bar content -->

<ul>
<img src="C:\Users\User\Documents\Akod1.png">
<li><a href="#">ABOUT</a>
<li><a href="#">PORTFOLIO</a>
<li><a href="#">CONTACT</al>
</ul>
</nav>
Nitin Chandran Nair
@NitinNair89
Oct 21 2016 16:03
put that <img> inside an <li> @AbrahamDanquah inside lists, there should be list-items
Abraham Danquah
@AbrahamDanquah
Oct 21 2016 16:03
Ok
Annu Nirmal
@annunirmal
Oct 21 2016 16:03
@NitinNair89 yeah right hover is working but i want my tabs to look selected when online , offline , all is selected just to look clean
Nitin Chandran Nair
@NitinNair89
Oct 21 2016 16:03
@xSnowpeltx I am sorry, I can't help you with your code :( tough for me :(
Dmitry Pavlov
@ifamed
Oct 21 2016 16:04
<ul> <img src="C:\Users\User\Documents\Akod1.png”>
:smile:
Nitin Chandran Nair
@NitinNair89
Oct 21 2016 16:04
then change background colors when selected @annunirmal on click
Annu Nirmal
@annunirmal
Oct 21 2016 16:04
@NitinNair89 i have written the code bot its not working
Nitin Chandran Nair
@NitinNair89
Oct 21 2016 16:04
click events you mean?
Annu Nirmal
@annunirmal
Oct 21 2016 16:05
@NitinNair89 yeah that a good alternate, but it would be better if i could help focus
David Boardman
@David-Boardman
Oct 21 2016 16:05
So do our images get uploaded to codepen? If I have an image to display on this Build a Tribute Page objective can I just link it from my computer? How will other people see it?
Abraham Danquah
@AbrahamDanquah
Oct 21 2016 16:05
@NitinNair89 I placed it in a <li> but image not appearing
Nitin Chandran Nair
@NitinNair89
Oct 21 2016 16:05
i think :focus affects only for input elements
Annu Nirmal
@annunirmal
Oct 21 2016 16:05
@NitinNair89 yeah that may be the answer
Nitin Chandran Nair
@NitinNair89
Oct 21 2016 16:05
@AbrahamDanquah as @ifamed said.. how are you trying to add image from your local system?
Annu Nirmal
@annunirmal
Oct 21 2016 16:06
@NitinNair89 thanks alot
CamperBot
@camperbot
Oct 21 2016 16:06
annunirmal sends brownie points to @nitinnair89 :sparkles: :thumbsup: :sparkles:
:cookie: 287 | @nitinnair89 |http://www.freecodecamp.com/nitinnair89
Nitin Chandran Nair
@NitinNair89
Oct 21 2016 16:06
you can't.. so try imgur or some free image hosting sites
Welcome @annunirmal :)
Annu Nirmal
@annunirmal
Oct 21 2016 16:06
@NitinNair89 btw how you manage to be online all the time i ask Qs :P
Nitin Chandran Nair
@NitinNair89
Oct 21 2016 16:06
@ifamed can you help @xSnowpeltx ? :)
I guess our online timings are same :P
@annunirmal
Annu Nirmal
@annunirmal
Oct 21 2016 16:07
@NitinNair89 yeah may be
:P
Nitin Chandran Nair
@NitinNair89
Oct 21 2016 16:07
that's coz i am on vacation right not.. so next week you won't see me much here :)
that makes me sad but :(
Annu Nirmal
@annunirmal
Oct 21 2016 16:08
@NitinNair89 hahahhha. lol . not really asking you go offline but its a coincidence smile:
vínαч puppαl
@vinaypuppal
Oct 21 2016 16:08
@David-Boardman you can upload to your Dropbox Account or https://postimage.org/ and use URL generated inside your codepen
Nitin Chandran Nair
@NitinNair89
Oct 21 2016 16:09
@vinaypuppal Hru? Completed my twitchtv app today :D
vínαч puppαl
@vinaypuppal
Oct 21 2016 16:10
@NitinNair89 yeah I saw when you posted this afternoon , looks good :+1:
Nitin Chandran Nair
@NitinNair89
Oct 21 2016 16:10
Thanks a lot @vinaypuppal for your suggestions! :)
CamperBot
@camperbot
Oct 21 2016 16:10
nitinnair89 sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 633 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
vínαч puppαl
@vinaypuppal
Oct 21 2016 16:11
@NitinNair89 welcome :smile:
xSnowpeltx
@xSnowpeltx
Oct 21 2016 16:31
Ok I think I've figured it out.
Nitin Chandran Nair
@NitinNair89
Oct 21 2016 16:49
Great @xSnowpeltx ! :+1:
Tarun Aggarwal
@taronaggarwal
Oct 21 2016 17:19
Hello all! Just wanna know that is it possible to make webpages after 1st step i.e HTML AND CSS (5hours)
Matthew Pengelly
@mcpengelly
Oct 21 2016 17:19
?
Jason Luboff
@JLuboff
Oct 21 2016 17:19
@taronaggarwal Of course it is
Tarun Aggarwal
@taronaggarwal
Oct 21 2016 17:20
@JLuboff To be honest i got all the concepts but i can't make a webpage properly
please help
i can't make layouts
Matthew Pengelly
@mcpengelly
Oct 21 2016 17:20
?
lol
if you got all the concepts wouldnt you be able to make one?
it really depends what youre trying to accomplish
Nitin Chandran Nair
@NitinNair89
Oct 21 2016 17:21
@taronaggarwal just focus on the basics, then slowly move for frameworks like bootstrap, foundation, materialize, etc..
Jason Luboff
@JLuboff
Oct 21 2016 17:21
@taronaggarwal Draw on a piece of paper a layout you'd like to make then try and recreate it. Practice, practice, practice
Nitin Chandran Nair
@NitinNair89
Oct 21 2016 17:21
@JLuboff is right. I use MSPaint to draw the layouts @taronaggarwal :)
don't be depressed or sad, you will learn it quick! :)
Tarun Aggarwal
@taronaggarwal
Oct 21 2016 17:22
thanks everyone. thanks for all the advice
Nitin Chandran Nair
@NitinNair89
Oct 21 2016 17:22
on what challenge are you right now?
Tarun Aggarwal
@taronaggarwal
Oct 21 2016 17:22
@NitinNair89 thanks buddy
CamperBot
@camperbot
Oct 21 2016 17:22
taronaggarwal sends brownie points to @nitinnair89 :sparkles: :thumbsup: :sparkles:
:cookie: 288 | @nitinnair89 |http://www.freecodecamp.com/nitinnair89
Jason Luboff
@JLuboff
Oct 21 2016 17:22
@taronaggarwal As @NitinNair89 mentioned, frameworks like Bootstrap will help a ton
Tarun Aggarwal
@taronaggarwal
Oct 21 2016 17:22
html and css done
Nitin Chandran Nair
@NitinNair89
Oct 21 2016 17:22
challenge i am asking..started JS?
Tarun Aggarwal
@taronaggarwal
Oct 21 2016 17:23
@NitinNair89 1 step done i will start with bootstrap but i fear that i can't make layouts properly so i should practise more html and css first, what you say?
Nitin Chandran Nair
@NitinNair89
Oct 21 2016 17:23
you can always go back and update your tribute and portfolio pages :)
yes , practice will make you perfect ;) @taronaggarwal
Tarun Aggarwal
@taronaggarwal
Oct 21 2016 17:24
@JLuboff Thanks a lot
CamperBot
@camperbot
Oct 21 2016 17:24
taronaggarwal sends brownie points to @jluboff :sparkles: :thumbsup: :sparkles:
:cookie: 408 | @jluboff |http://www.freecodecamp.com/jluboff
Jason Luboff
@JLuboff
Oct 21 2016 17:24
:+1:
Tarun Aggarwal
@taronaggarwal
Oct 21 2016 17:24
@NitinNair89 thanks a lot see you around
CamperBot
@camperbot
Oct 21 2016 17:24
taronaggarwal sends brownie points to @nitinnair89 :sparkles: :thumbsup: :sparkles:
:warning: taronaggarwal already gave nitinnair89 points
Nitin Chandran Nair
@NitinNair89
Oct 21 2016 17:24
sure
:+1:
Tarun Aggarwal
@taronaggarwal
Oct 21 2016 17:24
@mcpengelly Thanks a lot
CamperBot
@camperbot
Oct 21 2016 17:24
taronaggarwal sends brownie points to @mcpengelly :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for mcpengelly
Tarun Aggarwal
@taronaggarwal
Oct 21 2016 17:26
@NitinNair89 just wanna know one more thing, is there a way that i can reset my html and css chalanges
Matthew Pengelly
@mcpengelly
Oct 21 2016 17:27
:/
Tarun Aggarwal
@taronaggarwal
Oct 21 2016 17:27
@NitinNair89 i mean if i can start all the challanges
Matthew Pengelly
@mcpengelly
Oct 21 2016 17:27
why would you want to? you can always just erase your code and rewrite it
Nitin Chandran Nair
@NitinNair89
Oct 21 2016 17:27
you can always go back..check the "Map"
i think he wants to "re-learn" perfectly :)
Matthew Pengelly
@mcpengelly
Oct 21 2016 17:28
ya but that doesnt require resetting
just go back and rewrite
Tarun Aggarwal
@taronaggarwal
Oct 21 2016 17:28
@NitinNair89 i see @mcpengelly so that i can recheck my skills
@NitinNair89 you are right
:)
Thanks guys have to rush to code... Thanks for this ... wonderful community
Nitin Chandran Nair
@NitinNair89
Oct 21 2016 17:29
:)
Anyone good with materialize css here?
Matthew Pengelly
@mcpengelly
Oct 21 2016 17:30
i see...
Nitin Chandran Nair
@NitinNair89
Oct 21 2016 17:33
Ignore my question :alien:
Nitin Chandran Nair
@NitinNair89
Oct 21 2016 17:44
um, no one saw my forum post on twitch tv :(
Kelsey
@kcdilla
Oct 21 2016 19:29
Hello, can anyone help me with text not wrapping? I had it going ok and then somehow messed it up and it won't work.
it seems to wrap ok before the photo goes underneath. then it spills off the page.
Stephen Suratos
@stephenfs
Oct 21 2016 19:38
@kcdilla when you write your html (with Bootstrap), try to separate the container class from the col-sz-# class… Use container to contain the col-sz-# classes.. like this…
<div class="container">

  <div class="row">
    <div class="col-md-7">
    content here
    </div>
  </div>

</div>
..and then as you see, the code above, inside the container div is <div class=“row”>
Inside that div is where your col-sz-# need to be.
Kelsey
@kcdilla
Oct 21 2016 19:40
@SteveAmaki Ok, thanks. I'll try that. I'm still a little confused about what "row" does
CamperBot
@camperbot
Oct 21 2016 19:40
kcdilla sends brownie points to @steveamaki :sparkles: :thumbsup: :sparkles:
:cookie: 237 | @steveamaki |http://www.freecodecamp.com/steveamaki
Stephen Suratos
@stephenfs
Oct 21 2016 19:41
@kcdilla Think of row as the thing divded into 12 (grid layout)
Kelsey
@kcdilla
Oct 21 2016 19:41
right
ok
the thing is... I didn't change my HTML before and it was working ok
but I'll try that and see if it works @SteveAmaki
Stephen Suratos
@stephenfs
Oct 21 2016 19:42
<div class="row">
    <div class="col-md-7">
    SPAN OF 7
    </div>

    <div class="col-md-5”>
     PLUS SPAN OF 5 is 12
    </div>


  </div>
Feel free to see what I did with mine..
http://codepen.io/ssuratosjr/pen/JRRAWJ?editors=1010
Martialis39
@Martialis39
Oct 21 2016 19:57
thats very nice
Kelsey
@kcdilla
Oct 21 2016 19:58
@SteveAmaki Looks good! What did you do to get your photo to go above the text when the screen shrinks?
maybe i should just do the whole bootstrap tutorial over again...
Stephen Suratos
@stephenfs
Oct 21 2016 20:05
@kcdilla I used the class col-sm-# meaning once the screen gets too skinny, it switches from floating side by side to each element taking the whole row.. pushing the next element to a new row below the previous element.. if Im saying that right.

<div class="container">
    <div class="row">

      <div class="col-sm-2">
        profil pic goes here
      </div>

      <div class="col-sm-7">
       about goes here
      </div>

      <div class="col-sm-3  col-sm-odffset-1">
      skills go here
      </div>

  </div>
</div>

@kcdilla make sure you understand how the grid layout works in Bootstrap. There are different span sizes.. col-xs-#, col-sm-#, col-md-#, col-lg-#

Each size category is accomodating for different screen sizes.

and each row need to equal to 12
Ajay Tanwar
@ajayt365
Oct 21 2016 20:21
https://codepen.io/ajayt365/pen/ALmwLa . why display:inline-block is not working on div with class tricks?
Stephen Suratos
@stephenfs
Oct 21 2016 20:26
@ajayt365 It’s because of the margin: 0 4px.
Ajay Tanwar
@ajayt365
Oct 21 2016 20:30
yeah i changed it to 3 . 4 was increasing it width and it wrapped
its*
Kelsey
@kcdilla
Oct 21 2016 20:31
@SteveAmaki Thanks! Yes, I know about the grid but I guess I wasn't totally clear about the col- sizes. But then why doesn't everyone just use "col-sm-# so it works on small screens? goes to do research
CamperBot
@camperbot
Oct 21 2016 20:31
:warning: kcdilla already gave steveamaki points
kcdilla sends brownie points to @steveamaki :sparkles: :thumbsup: :sparkles:
Stephen Suratos
@stephenfs
Oct 21 2016 20:45
@kcdilla because some websites want to look different in every screen size. You can set each div to behave differently in every size by doing something like this..
<div class="row">
  <div class="col-xs-6 col-sm-2 col-md-5 col-lg-8”>   </div>
  <div class="col-xs-6 col-sm-10 col-md-7 col-lg-4”>   </div>
</div>
Kelsey
@kcdilla
Oct 21 2016 20:53
@SteveAmaki Ohhh I see. That makes sense.
Stephen Suratos
@stephenfs
Oct 21 2016 20:55
This message was deleted
This message was deleted
giphy-5.gif
Kelsey
@kcdilla
Oct 21 2016 20:57
I'm tempted to just start over. I wish FCC taught some design because it's so daunting to design something new to build.
Stephen Suratos
@stephenfs
Oct 21 2016 21:02
@kcdilla Have you tried Udemy? They have crazy discount sale going on right now.
https://www.udemy.com/courses/?pmtag=OCTOBERDIRECT19&siteID=Qnwphc0eKlk-R4PtJGkPnKtOOmBWREqw6A&LSNPUBID=Qnwphc0eKlk
Michael Davis
@mhdavis
Oct 21 2016 21:20
can anyone help me with i problem I'm having with Ajax
it has to do with pully data properly and storing it on local variables
coincidently if @jdtdesigns or @TylerMoeller are on, you guys would probably know best how to tackle this specific issue
Stephen Suratos
@stephenfs
Oct 21 2016 21:23
Cant wait to start learning AJAX!
Joy
@poemul7
Oct 21 2016 21:32
I have searched high and low on how to fit the text under the image but still can't figure out what's wrong with my code. Should I just start over ? here's my code:http://codepen.io/poemul7/pen/zKJXQE/
@mhdavis I did try your suggestion by the way, but nothing happened
Michael Davis
@mhdavis
Oct 21 2016 21:34
@poemul7 alright i'll take a look
Stephen Suratos
@stephenfs
Oct 21 2016 21:35
@poemul7 try style="display:inline-block;” on the <p>
WhiteLeaf1103
@WhiteLeaf1103
Oct 21 2016 21:36
Hello people
Stephen Suratos
@stephenfs
Oct 21 2016 21:36
@poemul7 try using the col-size-# classes to wrap your content
Hey @WhiteLeaf1103
Michael Davis
@mhdavis
Oct 21 2016 21:38
@poemul7 try swapping the corresponding lines with the one I just sent
    <img class="img-responsive center-block" src="http://www.etatdexception.net/wp-content/uploads/2013/03/Patrice-Lumumba1.jpg" alt "=Patrice Lumumba">
    <p class="text-center">Patrice Lumumba holding a press conference</p>
the major changes I made were that I added a class to your <p> and added a class "center-block" to your <img>
Stephen Suratos
@stephenfs
Oct 21 2016 21:41
Whoops. Totally misread what you need done @poemul7 Listen to @mhdavis
Carl Pierre-Louis
@Carlthe1
Oct 21 2016 21:43
i need help with my front-end project can somebody please help
Michael Davis
@mhdavis
Oct 21 2016 21:47
@Carlthe1 what's up
Joy
@poemul7
Oct 21 2016 21:48
ok here it is:http://codepen.io/poemul7/pen/zKJXQE/ but text still out of it
Michael Davis
@mhdavis
Oct 21 2016 21:49
@poemul7 you need to make it center-block
not center block
the - indicates that there are no spaces, which is importnat
because a space indicates two seperate classes
Ion Varsescu
@Nei-V
Oct 21 2016 21:57
hello, can someone help me with the weather challange? http://codepen.io/Nei_V/pen/YGdJPE
i have 2 problems: 1. I don't know how to pass the lat and long from the navigator geolocation to the api link, and 2. even when I use coordonates, the data is not displayed (even though the api receives my request). Thank you
vakio
@vakio
Oct 21 2016 22:06
Hi, Why does my <h1> not responsively resize font size but every other text does when I resize my window?
Michael Davis
@mhdavis
Oct 21 2016 22:12
@poemul7 hmmm have you tried adding text center to your <div class="row">?
vakio
@vakio
Oct 21 2016 22:28
nvm, I'm an idiot
Walid Ashri
@walidashri
Oct 21 2016 22:59
@Nei-V remove the function b and keep it's content
Ion Varsescu
@Nei-V
Oct 21 2016 23:01
thank you @walidashri - could you explain me the "?callback=?" in the getJSON?
CamperBot
@camperbot
Oct 21 2016 23:01
nei-v sends brownie points to @walidashri :sparkles: :thumbsup: :sparkles:
:cookie: 429 | @walidashri |http://www.freecodecamp.com/walidashri
Ion Varsescu
@Nei-V
Oct 21 2016 23:01
(i've already google it ofcourse,but I fell i'm missing smtg)
Tyler Moeller
@TylerMoeller
Oct 21 2016 23:05
@mhdavis What's the issue?
@Nei-V The callback tells getJSON to handle the data as JSONP. It adds the JSON call to a <script> element in your HTML to work around CORS issues.
Tyler Moeller
@TylerMoeller
Oct 21 2016 23:13
@poemul7 You have a lot of bootstrap classes defined in your HTML, but you haven't linked to bootstrap's css library. The advice you're getting with text-center, center-block, using row's, columns, etc. will only work if you add this to your CodePen's CSS Settings: https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css
Ion Varsescu
@Nei-V
Oct 21 2016 23:15
Thank you @TylerMoeller ...to bad FCC doesn't dive more into these issues before the challanges...for someone who has no prior programing experience, it is quite difficult to estimate what is a must know or a nice to know subject
CamperBot
@camperbot
Oct 21 2016 23:15
nei-v sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 896 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Michael Davis
@mhdavis
Oct 21 2016 23:15
@TylerMoeller oh hey man, sorry I got caught up doign some stuff
Walid Ashri
@walidashri
Oct 21 2016 23:15
@TylerMoeller so here "?callback=?" what the call back is set to?
Tyler Moeller
@TylerMoeller
Oct 21 2016 23:16
@walidashri Yes
Michael Davis
@mhdavis
Oct 21 2016 23:16
@TylerMoeller okay so i drafted out what I want my js to do in my codepen, but im running into some problems in terms of my understanding of Ajax/jquery
https://codepen.io/mhdavis/pen/rrqqmy
Joy
@poemul7
Oct 21 2016 23:17
@TylerMoeller I just added it and I think it has made things worse lolhttp://codepen.io/poemul7/pen/zKJXQE/ or is it supposed to be somewhere specific?
Tyler Moeller
@TylerMoeller
Oct 21 2016 23:18
@poemul7 Yeah, add it to your Codepen Settings, not the CSS panel itself.
Michael Davis
@mhdavis
Oct 21 2016 23:18
I initially my idea with the main() method was to have a place were I call all of the functions i want to run and then just run main @TylerMoeller the one thing that I'm running into is a problem that JD mentioned before which is if the .getJSON doesn't pull the data from the API before you get to the next part of your code
Tyler Moeller
@TylerMoeller
Oct 21 2016 23:18
@mhdavis You're getting a mixed content error with that link. Are you familiar with "mixed-content"?
Michael Davis
@mhdavis
Oct 21 2016 23:19
@TylerMoeller id image its because its because I have code with the same names and variables and such
the code I have on my pen is sort of unorganized at the moment, so I'm trying to comment it up fix it that way; break it down into steps and such
Tyler Moeller
@TylerMoeller
Oct 21 2016 23:20
@mhdavis Mixed-content is when you try to access a HTTP resource when your page is loaded via HTTPS.
Michael Davis
@mhdavis
Oct 21 2016 23:20
@TylerMoeller okay so all i have to do to fix that is make everything https?
Tyler Moeller
@TylerMoeller
Oct 21 2016 23:20
Your application will never work over HTTPS because forismatic only works over HTTP.
So, only visit your application via HTTP or the quotes will always be broken
Michael Davis
@mhdavis
Oct 21 2016 23:21
well that is quite the problem
i see
Tyler Moeller
@TylerMoeller
Oct 21 2016 23:21
Will make it easier to debug :)
Joy
@poemul7
Oct 21 2016 23:22
it's better but still that annoying text is outside @TylerMoeller http://codepen.io/poemul7/pen/zKJXQE/
Tyler Moeller
@TylerMoeller
Oct 21 2016 23:23
@mhdavis The immediate issue I see with your quote is scope:
function myGetJSONFunction() {
  $.getJSON('http://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&jsonp=?&lang=en', function (data) {
    console.log(data); // gives you data from the API
  });

  console.log(data) // undefined - since it's out of scope
}
@poemul7 I'll take a quick look
Michael Davis
@mhdavis
Oct 21 2016 23:25
@TylerMoeller okay so in handling that, the getJSON method pulls the quote for the API and saves it within the function
but then should I have the function return, the author and quote so I can pass it as arguments for other functions that need it to progress?
Tyler Moeller
@TylerMoeller
Oct 21 2016 23:25

@poemul7 Try this:

    <div class="row img-border">
      <img class="img-responsive center-block" src="http://www.etatdexception.net/wp-content/uploads/2013/03/Patrice-Lumumba1.jpg" alt "=Patrice Lumumba">
      <p class="text-center">Patrice Lumumba holding a press conference</p>
    </div>

And in your CSS:

.img-border {
  background-color: white;
}

That should help you get started :) you can style as needed after that

@mhdavis That would be ideal for a larger project, but not needed for this one since the getQuote function is the only one that uses the data.
@mhdavis Here's a fork of your pen with some fixes: http://codepen.io/TylerMoeller/pen/Xjyzgx?editors=0010
Michael Davis
@mhdavis
Oct 21 2016 23:30
Yea that is very similar to the build that JD had
the one thing I was trying to do was instead of having the whole box fade out
i wanted the quote itself to fade while the spinner came up as the background changed
Jonathan Doliver
@porygonj
Oct 21 2016 23:31
For some reason, the callback in this getJSON never runs, and I can't figure out why.
var getWeather = function() {
  if (navigator.geolocation){
    var key = "fff7f784828c4e1c2dc51b8d52ff1399";
    navigator.geolocation.getCurrentPosition(function(pos){
      $.getJSON("api.openweathermap.org/data/2.5/weather?lat=" + Math.round(pos.coords.latitude) + "&lon=" + Math.round(pos.coords.longitude) + "&appid=" + key, function(data){
        console.log("success!!");
        showWeather(data);
      }, function(error){console.log(error)});
    });
  }else{
    console.log("no geolocation :/");
  }
};
Joy
@poemul7
Oct 21 2016 23:31
wow it worked @TylerMoeller tears of joy !
Joanne Yeung
@jttyeung
Oct 21 2016 23:31
Hello, I'm also trying to build a quote generator. I tried using ajax and also using the getJSON method, but neither work. I think I am not understanding a key issue in my code. Can someone please help review and help me make sense of this? https://codepen.io/jttyeung/pen/VKqmBG
Tyler Moeller
@TylerMoeller
Oct 21 2016 23:31
@poemul7 :) :+1:
@mhdavis That might be a little more challenging to do, but it is possible.
Michael Davis
@mhdavis
Oct 21 2016 23:32
@TylerMoeller im gonna study your code a bit to see how you did things differently than mine. One thing that I'm also trying to strive for with this project is writing clean, readable code so the more compartimentalized you have the functionalities the better it is
which is how you have it in the pen you sent me
Tyler Moeller
@TylerMoeller
Oct 21 2016 23:33
@mhdavis Good plan - you'll be able to reuse some code in future projects.
@porygonj Do you have a codepen link?
Jonathan Doliver
@porygonj
Oct 21 2016 23:34
yup
Michael Davis
@mhdavis
Oct 21 2016 23:34
@TylerMoeller thats the plan
Tyler Moeller
@TylerMoeller
Oct 21 2016 23:36
@jttyeung Try this instead:
 $.ajax({
    url: "http://api.forismatic.com/api/1.0/",
    jsonp: "jsonp",
    dataType: "jsonp",
    data: {
      method: "getQuote",
      lang: "en",
      format: "jsonp"
    }
  })
  .done(function(json) {
    $(".quote").html(json.quoteText + "<br>" + json.quoteAuthor);
  });
@porygonj Are you using Chrome by chance?
Jonathan Doliver
@porygonj
Oct 21 2016 23:37
I am. Could that be an issue?
Tyler Moeller
@TylerMoeller
Oct 21 2016 23:38
Yeah, Google Chrome blocks navigator.geolocation when you load a web page over HTTP
I would recommend trying Weather Underground. They support HTTP/HTTPS and you can get location plus weather all in one url with their AutoIP URL.
Jonathan Doliver
@porygonj
Oct 21 2016 23:40
@TylerMoeller Oh, that makes sense. It wasn't totally my fault after all, heheh. Thanks for the recommendation; I'll probably use it instead.
CamperBot
@camperbot
Oct 21 2016 23:40
porygonj sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 897 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Oct 21 2016 23:40
@porygonj For example: http://api.wunderground.com/api/Your_Key/geolookup/q/autoip.json. More info at: https://www.wunderground.com/weather/api/d/docs?d=data/geolookup
Other options are to use a IP-based location API like http://ip-api.com/json, but those can be blocked by adblockers...
Joanne Yeung
@jttyeung
Oct 21 2016 23:48
@TylerMoeller Thanks, I updated my code, but it still doesn't pull in quotes. I'm also wondering if it makes a difference if I'm pulling in a JSON vs JSONP data type - I don't really understand the difference
CamperBot
@camperbot
Oct 21 2016 23:48
jttyeung sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 898 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Michael Davis
@mhdavis
Oct 21 2016 23:49
@TylerMoeller how important is your order of functions?
like did you purposely put getQuote towards the end
Tyler Moeller
@TylerMoeller
Oct 21 2016 23:51
@mhdavis I just started doing that recently. Some linters will complain if you call a function before it is defined in your code.
Sylvio Giubine
@SylvioGiubine
Oct 21 2016 23:51

hello ! good night ! i having a problem in my code. I tryed everything to change <li> style to center of my page but i can´t. follow the code...<div class="container">

<div class="row">
<div class="col-xs-12">

<head>
<h1 style="color:white"; class="text-center bold white ">Ayrton Senna </h1>
<h2 style="color: white" class="text-right">The Legend</h2>

</head>

<body>

<img src="http://i.dailymail.co.uk/i/pix/2015/06/29/17/2A16EF2F00000578-0-image-a-56_1435594654943.jpg">

<body style= "background-color:black">
<p></p>
<div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2">

<ul align="center">
<li> 162 Races</li>
<li> 80 Podium</li>
<li> 41 Wins</li>
<li> 19 fastest lap</li>
<li> 3 world champion>/li>
<li> 1 world´s fan</li>
</ul>
</div>
</div>
</div>
</div>

CamperBot
@camperbot
Oct 21 2016 23:51

welcome to FreeCodeCamp @SylvioGiubine!

Michael Davis
@mhdavis
Oct 21 2016 23:52
@TylerMoeller I tend to prefer it where you define a function before you call it, so it works out
I just wasn't sure to what degree js cares
Tyler Moeller
@TylerMoeller
Oct 21 2016 23:52
@jttyeung Two things to fix:
  1. Load your pen over HTTP (http://codepen.io/jttyeung/pen/VKqmBG?editors=0010). The Forismatic Quote API only supports http.
  2. Add jQuery to your pen. Click Settings, Click "JavaScript", and then pick jQuery from the "Quick-add" dropdown box.
@mhdavis This talks a little more about when order of functions does matter in JavaScript: http://stackoverflow.com/questions/261599/why-can-i-use-a-function-before-its-defined-in-javascript
In my code, the order of functions doesn't matter. Just a habit I'm trying to get into :)
Michael Davis
@mhdavis
Oct 21 2016 23:58
@TylerMoeller same :smile: