These are chat archives for FreeCodeCamp/HelpFrontEnd

9th
Feb 2017
@SkyCoder01 yeah
Gulsvi
@gulsvi
Feb 09 2017 00:04
@pvale94 Good, it should work better now
You may just want to change it to grab your $('#quote').text() instead though, I think that does some encoding on it
Or, escaping, I mean - so you don't get character codes for smart quotes, for example
vínαч puppαl
@vinaypuppal
Feb 09 2017 00:05
@pvale94 oh dont worry about ’ its just hex value of ' it would be tweeted as ' in tweet so no need to worry
Pedro
@pvale94
Feb 09 2017 00:06
@vinaypuppal it tweets the hex value
vínαч puppαl
@vinaypuppal
Feb 09 2017 00:07
@pvale94 oh :worried:
@pvale94 then no idea why its happening, may be someone else can help
Gulsvi
@gulsvi
Feb 09 2017 00:10
@pvale94
    if (($('#quote').text().length) > 140) {
      $("#tweet-quote").hide();
    } else {
      $("#tweet-quote").show();
      $('#tweet-quote').attr('href', 'https://twitter.com/intent/tweet?text=' + encodeURIComponent($('#quote').text()));
    }
Matt K
@MattKim22
Feb 09 2017 00:11
Can someone take a look at my pen and see if there's an alternative way to make this quote machine better, or more concise without using an API? http://codepen.io/MattKim22/pen/LxeNPp
any feedback would be appreciated
Pedro
@pvale94
Feb 09 2017 00:15
@SkyCoder01 Oh! I see what you did. It worked! \o/
thanks m8 :b
Now I have to figure out how to get only small quotes. It's not nice to hide/show button based on quotes lengths :\
vínαч puppαl
@vinaypuppal
Feb 09 2017 00:18
@pvale94 did ' converted to ' again in tweet ?? what did i miss in my answer
Pedro
@pvale94
Feb 09 2017 00:19
if (($('#quote').text().length) > 140) { $("#tweet-quote").hide(); } else { $("#tweet-quote").show(); $('#tweet-quote').attr('href', 'https://twitter.com/intent/tweet?text=' + encodeURIComponent($('#quote').text())); }
this
ops
 if (($('#quote').text().length) > 140) {
      $("#tweet-quote").hide();
    } else {
      $("#tweet-quote").show();
      $('#tweet-quote').attr('href', 'https://twitter.com/intent/tweet?text=' + encodeURIComponent($('#quote').text()));
    }
^
Gulsvi
@gulsvi
Feb 09 2017 00:21
@pvale94 You would have to put your getJSON in its own function and call that function again if the quote is longer than 140
vínαч puppαl
@vinaypuppal
Feb 09 2017 00:21
@pvale94 i though you were passing text variable which contains quote. Here text replaced by $('#quote').text(). Did u not pull quote in to text variable. like ??
var text = $('#quote').text()
Pedro
@pvale94
Feb 09 2017 00:21
nope :(
Gulsvi
@gulsvi
Feb 09 2017 00:21
pseudocode would be:
  function getNewQuote() {
    // getJSON to get the quote

    if (quote.length > 140) {
      getNewQuote();
      return;
    }
  }
vínαч puppαl
@vinaypuppal
Feb 09 2017 00:23
@pvale94 :worried: , np anyway it got solved :smile:
Pedro
@pvale94
Feb 09 2017 00:24
@SkyCoder01 ooh
ill try it
@vinaypuppal yeah \o/
Gulsvi
@gulsvi
Feb 09 2017 00:28
You're making me want to do that now lol, I just tweet it out without worrying about the length
Jaime
@jmasked
Feb 09 2017 00:29
Can someone help me with animating my progress bars with jQuery? http://codepen.io/jmasked/pen/RKYXNG
joopt
@joopt
Feb 09 2017 00:49
can anyone help me
[Object {
  description: "broken clouds",
  icon: "04n",
  id: 803,
  main: "Clouds"
}]
trying to add the icon property
i do data.weather and it gives me that but if i do data.weather.icon it gives me undefined
Tyler Moeller
@TylerMoeller
Feb 09 2017 00:55

@jmasked Here's one way, using your last progress bar as an example. Change your initial width to 0% in your HTML:

  <div class="progress-bar3" role="progressbar" aria-valuenow="0"
  aria-valuemin="0" aria-valuemax="100" style="width:0%">
    85%
  </div>

Add a transition to your CSS:

.progress-bar3 {
  background-color: #d0157b;
  transition: width 2s;
}

And then change the width on document.ready:

$(document).ready(function() {
  $('.progress-bar3').css('width', '85%')
});
@joopt As a hint, data.weather is an array []
Jaime
@jmasked
Feb 09 2017 01:00
@TylerMoeller Thank you! Going to try that now
CamperBot
@camperbot
Feb 09 2017 01:00
:star2: 1473 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
jmasked sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
Jean Marco Romero
@volkranium
Feb 09 2017 01:00
why is my menu dropping over my navbar when on narrow vp? http://pastebin.com/DZKnQuXG
Sam Griffen
@ssgriffen
Feb 09 2017 01:02
PLEASE can anyone tell me why my embedded pens arent working on mobile browsers? http://codepen.io/ssgriffen/pen/yJKRxj
@TylerMoeller calling you out for help
Tyler Moeller
@TylerMoeller
Feb 09 2017 01:05
@ssgriffen What do you mean by not working? I can take a closer look when I finish looking at volkranium's navbar
Sam Griffen
@ssgriffen
Feb 09 2017 01:05
@TylerMoeller thanks
CamperBot
@camperbot
Feb 09 2017 01:05
ssgriffen sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1474 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Sam Griffen
@ssgriffen
Feb 09 2017 01:05
@TylerMoeller Basically on desktop everything checks out good.
@TylerMoeller On mobile the pens appear and stuff but if you click on any of them instead of loading the pen you get thrown to the top of the screen as if its a link to the top of the page...
Tyler Moeller
@TylerMoeller
Feb 09 2017 01:06
@volkranium Change <div class="nav-header"> to <div class="navbar-header">
@ssgriffen You should only have to load that script once, put it at the very end of your HTML, right before the closing </body> tag.
<script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script>
Jean Marco Romero
@volkranium
Feb 09 2017 01:07
@TylerMoeller it worked , thanks for your help again
CamperBot
@camperbot
Feb 09 2017 01:07
volkranium sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1475 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Feb 09 2017 01:07
See if that helps - not familiar with the issue though to be honest.
No problem, happy to help @volkranium
Sam Griffen
@ssgriffen
Feb 09 2017 01:10
@TylerMoeller Okay did that, problem still not solved, I've confirmed it works on chrome mobile from iphone
@TylerMoeller works on chrome mobile for android and iOS, do you know if Safari supports codepen embeds...
Tyler Moeller
@TylerMoeller
Feb 09 2017 01:13
Hmmm, I don't know and debugging on mobile browsers is a pain :( @ssgriffen
Sam Griffen
@ssgriffen
Feb 09 2017 01:14
@TylerMoeller fml, okay thanks anyway
CamperBot
@camperbot
Feb 09 2017 01:14
ssgriffen sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: ssgriffen already gave tylermoeller points
Tyler Moeller
@TylerMoeller
Feb 09 2017 01:14
@ssgriffen To prevent some more headaches, make sure you use a burner gmail account for that address in your HTML. Bots will harvest it and spam your account
The formspree email address
Sam Griffen
@ssgriffen
Feb 09 2017 01:15
@TylerMoeller good call....
Deepak8717
@Deepak8717
Feb 09 2017 01:23
Anyone doing the frontend projects right now ?
Jaime
@jmasked
Feb 09 2017 01:24
@Deepak8717 I am
Deepak8717
@Deepak8717
Feb 09 2017 01:25
@jmasked great, have you build portfolio ?
fvdave2017
@fvdave2017
Feb 09 2017 01:26
I do not understand this bootstrap! I have added it to my css in codepen. I am having trouble to get it to work. I am using class="img-circle" with no success. What is it that I am doing incorrectly?
Deepak8717
@Deepak8717
Feb 09 2017 01:27
@jmasked I am looking for a friend who I can discuss great FCC stuff and it would be nice who is also going through the same curriculum.
@fvdave2017 yes I was having the same problem you need to include complete link of bootstrap. Adding bootstrap is not working just copy and paste bootstrap links.
@fvdave2017 you can try it in simple notepad or similar program and see if it works
Jaime
@jmasked
Feb 09 2017 01:29
@Deepak8717 building my portfolio right now
fvdave2017
@fvdave2017
Feb 09 2017 01:30
@Deepak8717 what do you mean about the copy and past bootstrap links?
Deepak8717
@Deepak8717
Feb 09 2017 01:32
@fvdave2017 well usually we just add the bootstrap class in codepen but instead of adding it just copy and paste bootstrap link on the header. Sorry I'm on mobile can't do much.
Gulsvi
@gulsvi
Feb 09 2017 01:33
@fvdave2017 Use this link to bootstrap instead of the one that codepen gives you when using the quick add menu: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
fvdave2017
@fvdave2017
Feb 09 2017 01:34
ok thank you for the help
fvdave2017
@fvdave2017
Feb 09 2017 01:39
@SkyCoder01 This links worked for me. thanks again
CamperBot
@camperbot
Feb 09 2017 01:39
fvdave2017 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 152 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Cristopher Encarnacion
@chris0715
Feb 09 2017 01:46
How do I handle form data in react.
tadm123
@tadm123
Feb 09 2017 01:47
Can someone help me out? I'm doing the Local Weather App program but I cant select my JSON elements
$.getJSON("http://api.openweathermap.org/data/2.5/weather?lat=" + lat  + "&lon=" + long+"&appid=6a5aa3b59ebd571086cbd82be484ec8b", function(a){
    temp = a[0].main.temp.toString();
    hum = a[0].main.humidity.toString();
    press= a[0].main.pressure.toString();
    name = a[0].name;
    $("h1").html(temp);
 });
I already got my Lat and Long values using navigator
Jaime
@jmasked
Feb 09 2017 01:56
I cant get my img’s to align center, any ideas?
Gulsvi
@gulsvi
Feb 09 2017 02:02
@tadm123 If your codepen is loaded over https, you can't call an API over HTTP due to security restrictions. Also, it looks like a[0] isn't defined. Try a.main instead?
@jmasked It looks like you're hitting the same issue as everyone else. Codepen's quick add menu adds an alpha pre-release version of bootstrap4 now. Change your CSS to use bootstrap 3.https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
tadm123
@tadm123
Feb 09 2017 02:23
@SkyCoder01 I tried it with a[0] and I'm getting the same problem
Gulsvi
@gulsvi
Feb 09 2017 02:24
@tadm123 That's because a isn't an array, it's an object.
a[0] should be showing 'undefined' in your console
tadm123
@tadm123
Feb 09 2017 02:26
its strange because i did it before in other pen and it worked, have a look at this https://codepen.io/tadm123/pen/YNvdyr
hm, so is there any way I can call an element of the object?
Sorin Ruse
@sorinr
Feb 09 2017 02:33
@SkyCoder01 do you mean that both <div class="no-padding row"> and <div class="row no-padding"> are working the same in a bootstrap context?
Gulsvi
@gulsvi
Feb 09 2017 02:33
@tadm123 The object you get back from the quotesondesign.com starts and ends with square brackets - that means it's an array. The weather API gives you an object that starts and ends with curly braces, it's a JSON object.
@sorinr Yes, they are for me because no-padding is in my css and loads after bootstrap (I think)
tadm123
@tadm123
Feb 09 2017 02:33
ah I see
But why isn't it working when I'm calling treating it like an object and calling it like a.name?
typo
Sorin Ruse
@sorinr
Feb 09 2017 02:35
@SkyCoder01 later today i'll try it myself. its 4:34am here and i'm tired like hell :) i'll pm u with what i find out
Gulsvi
@gulsvi
Feb 09 2017 02:36
Thank you @sorinr :) and have a good rest!
CamperBot
@camperbot
Feb 09 2017 02:36
skycoder01 sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1162 | @sorinr |http://www.freecodecamp.com/sorinr
Gulsvi
@gulsvi
Feb 09 2017 02:39
@tadm123 Try a.main instead of a.name
Manuel Almeida
@netstudenton
Feb 09 2017 02:40
what is the command to permite long loops ?
Sorin Ruse
@sorinr
Feb 09 2017 02:44
@SkyCoder01 what bootstrap version are u using? in codepen i saw they changed to 4 alpha
Gulsvi
@gulsvi
Feb 09 2017 02:46
Sorin Ruse
@sorinr
Feb 09 2017 02:50
@SkyCoder01 think i was wrong. the problem its not comming from the row but from the col-xx-xx that has a 15px both L/R
Gulsvi
@gulsvi
Feb 09 2017 02:52
I think row has 15px margin and column has 15px padding, similar idea if we use .no-margin {margin: 0} I think.
I need to memorize these things and get better, but now I don't know...maybe need to move on to bootstrap 4 :p
Gulsvi
@gulsvi
Feb 09 2017 03:00
These are the paddings and margins to override:
  • containers: padding-right: 15px; padding-left: 15px;
  • rows: margin-right: -15px; margin-left: -15px;
  • columns: padding-right: 15px; padding-left: 15px;
Sorin Ruse
@sorinr
Feb 09 2017 03:01
@SkyCoder01 yea. row have margins and col have padding. so thats why i said i was wrong applying padding:0 to the rows. have no effect on them as they are already 0 as padding
tadm123
@tadm123
Feb 09 2017 03:11
yeah @SkyCoder01 , i'm still not getting anything, very bizarre
Jean Marco Romero
@volkranium
Feb 09 2017 03:24
can someone tell me how to fit the main logo inside the nav bar? css: http://pastebin.com/m3HYGD97 html:http://pastebin.com/AhMf5K7F
tadm123
@tadm123
Feb 09 2017 03:28
I think the problem is not getting the json object, I tried just putting a string "test" and it still won't show. So the structure of the code is seems to be offf
Sanford Banks
@sbanks77
Feb 09 2017 03:40
im trying to put a background image on my page can anyone help
??
tadm123
@tadm123
Feb 09 2017 03:42
put in your css background-image: url("http:...");
Sanford Banks
@sbanks77
Feb 09 2017 03:52
i put that in my css but it still doesnt show in my html
@tadm123
Sanford Banks
@sbanks77
Feb 09 2017 04:09
???
themixedcoder
@themixedcoder
Feb 09 2017 04:10

// Initialize these three variables
var a;
var b;
var c;
var a=5;
var b=10;
var c= "I am a ";

// Do not change code below this line

a = a + 1;
b = b + 5;// Initialize these three variables
var a;
var b;
var c;
var a=5;
var b=10;
var c= "I am a ";

// Do not change code below this line

a = a + 1;
b = b + 5;
c = c + " String!";
c = c + " String!"; / i cant make c undefined please help /

js
tadm123
@tadm123
Feb 09 2017 04:15
very strange, read here if you want more info
jampcat9
@jampcat9
Feb 09 2017 04:21
I'm working on the personal portfolio page project, can anyone help me out? I'm trying to put two paragraphs side by side
Julius Robinson
@Julius-R
Feb 09 2017 04:22
@jampcat9 either use float or flexbox
jampcat9
@jampcat9
Feb 09 2017 04:23
I used float: right, for some reason it only moved it to the center of the page. no clue why
Julius Robinson
@Julius-R
Feb 09 2017 04:24

I always use developer tools to see if there is any padding or margins from a child element. Also,

border: 2px solid #111;

That's perfect for showing all of your borders in css

jampcat9
@jampcat9
Feb 09 2017 04:26
so showing the borders might help me see why it's not moving to the spot I want it to?
Julius Robinson
@Julius-R
Feb 09 2017 04:27
Yes, it'll show you if there is some padding or margin from a close by element that was affected by the float
jampcat9
@jampcat9
Feb 09 2017 04:27
awesome thanks @Julius-R
CamperBot
@camperbot
Feb 09 2017 04:27
:cookie: 88 | @julius-r |http://www.freecodecamp.com/julius-r
jampcat9 sends brownie points to @julius-r :sparkles: :thumbsup: :sparkles:
aleksaknezevic
@aleksaknezevic
Feb 09 2017 04:40
hey can someone look at my first project and tell me what do you think :) https://codepen.io/aleksaknezevic/full/OWwjNZ/
namanpandita
@namanpandita
Feb 09 2017 05:00
nice @aleksaknezevic but your images are not centered
aleksaknezevic
@aleksaknezevic
Feb 09 2017 05:01
idk how to center it can you help me?
Johnny
@jtan3
Feb 09 2017 05:06
try img{text-align: center}
in css
aleksaknezevic
@aleksaknezevic
Feb 09 2017 05:07
https://codepen.io/aleksaknezevic/full/OWwjNZ/ No i just dont know how to center everything and thats it
namanpandita
@namanpandita
Feb 09 2017 05:07
img {
display: block;
margin-left: auto;
margin-right: auto;
}
or google some other method like I did
aleksaknezevic
@aleksaknezevic
Feb 09 2017 05:08
it wont works
i tried
Johnny
@jtan3
Feb 09 2017 05:08
forgot the ; after center
aleksaknezevic
@aleksaknezevic
Feb 09 2017 05:10
haha yes but again thats not the problem :/
Johnny
@jtan3
Feb 09 2017 05:10
you have display on block
your div is on display: block
if you style your page in css it might be easier
you have some style elements in the html as well
@aleksaknezevic look at my codepen
aleksaknezevic
@aleksaknezevic
Feb 09 2017 05:20
@jtan3 hey the problem
:center">
Johnny
@jtan3
Feb 09 2017 05:20
and try margin: auto;
aleksaknezevic
@aleksaknezevic
Feb 09 2017 05:20
no
<div style=" width: 50%; font-size:20px;text-align:center">
this line
i set width to 50% so half page is only
@jtan3 thanks :)
CamperBot
@camperbot
Feb 09 2017 05:21
aleksaknezevic sends brownie points to @jtan3 :sparkles: :thumbsup: :sparkles:
:cookie: 298 | @jtan3 |http://www.freecodecamp.com/jtan3
Johnny
@jtan3
Feb 09 2017 05:25
is it better?
aleksaknezevic
@aleksaknezevic
Feb 09 2017 05:25
yes, i will send you just to finish
i set to big images for small screen but on full it looks ok?
Johnny
@jtan3
Feb 09 2017 05:29
its better
instead of doing the styling in html
its easier to do it in css
it can get all the images at once instead of doing it one by one
aleksaknezevic
@aleksaknezevic
Feb 09 2017 05:30
i know but i wanted to do it in html
Johnny
@jtan3
Feb 09 2017 05:30
oh
aleksaknezevic
@aleksaknezevic
Feb 09 2017 05:30
i want to learn it better
with bootstrap i can make my page for small screens?
Johnny
@jtan3
Feb 09 2017 05:33
yeah
aleksaknezevic
@aleksaknezevic
Feb 09 2017 05:34
col-md-5 col-lg-2 and similar?
you can learn many things here but you cant learn to use it all at once
Johnny
@jtan3
Feb 09 2017 05:34
are you only learning on fcc?
aleksaknezevic
@aleksaknezevic
Feb 09 2017 05:34
no i watch tutorials on yt
Johnny
@jtan3
Feb 09 2017 05:34
oh
aleksaknezevic
@aleksaknezevic
Feb 09 2017 05:35
you?
Johnny
@jtan3
Feb 09 2017 05:35
i think codecademy html/css is pretty good
aleksaknezevic
@aleksaknezevic
Feb 09 2017 05:35
i will try it
Johnny
@jtan3
Feb 09 2017 05:35
they have bootstrap too
aleksaknezevic
@aleksaknezevic
Feb 09 2017 05:35
if you want to learn on yt quentin watt tutorials
the guy is great
Johnny
@jtan3
Feb 09 2017 05:36
and then try the fcc tribute page project
aleksaknezevic
@aleksaknezevic
Feb 09 2017 05:36
and he have also bootstrap and javascript and htm/css and jquery
i will edit it when i learn bootstrap
Thomas Mullen
@t-mullen
Feb 09 2017 05:46
@SkyCoder01 It looks like they fixed that challenge already. Only a matter of time freeCodeCamp/freeCodeCamp#10341
Miguel T Rivera
@mtrivera
Feb 09 2017 06:02
Need some help with the Twitch app. I'm trying to create an object with Promises but I am having issues
http://codepen.io/riveratmiguel/pen/mRzrYX
Johnny
@jtan3
Feb 09 2017 06:04
i'm stuck on the Twitch project too
not sure what promises is
Johnny
@jtan3
Feb 09 2017 06:09
have you finished the project in a different way?
Miguel T Rivera
@mtrivera
Feb 09 2017 06:13
@jtan3 No, I tried module but ran into issues so looked for other solutions and promises looks like the best way forward for me
i'm not sure why everyone is offline for mine
Thomas Mullen
@t-mullen
Feb 09 2017 06:14
@riveratmiguel then does not return the output of the function you pass into it. It just passes the result of the promise into that function.
Since that's kind of confusing, think of it in callbacks...
get(url).then(JSON.parse);

is the same as...

get(url, function(promiseResult) {
    return JSON.parse(promiseResult);
});

if you had used callbacks instead.

You can see that this doesn't actually return the parsed JSON.
Promises are async, so you can only use their outputs in the resolve function (basically the success callback)
Sorry if that's not clear, promises can be tricky to explain.
Thomas Mullen
@t-mullen
Feb 09 2017 06:21
Basically the data you want is passed into the function you give to then, not returned by then.
Miguel T Rivera
@mtrivera
Feb 09 2017 06:27
@RationalCoding Thanks! I'll work on it
CamperBot
@camperbot
Feb 09 2017 06:27
riveratmiguel sends brownie points to @rationalcoding :sparkles: :thumbsup: :sparkles:
:cookie: 295 | @rationalcoding |http://www.freecodecamp.com/rationalcoding
playingwithinfinity
@playingwithinfinity
Feb 09 2017 06:29
How do you make a JS calculator? I can make the click functionality and the actual program, but I have no idea how to make it look like a real calculator? How do I style and arrange the elements?
Miguel T Rivera
@mtrivera
Feb 09 2017 06:32
@playingwithinfinity With CSS https://developer.mozilla.org/en-US/docs/Web/CSS
playingwithinfinity
@playingwithinfinity
Feb 09 2017 06:33
@riveratmiguel duh
I mean how?
Like make a table? If I make a table, the buttons are too far apart. If I use Bootstrap grid, then again, they are not centered and they are too far apart.
Thomas Mullen
@t-mullen
Feb 09 2017 06:40
@playingwithinfinity There's many ways to do it! Try something you think will work, then tweak it until you get close.
playingwithinfinity
@playingwithinfinity
Feb 09 2017 06:43
This has to be the most frustrating challenge I've ever done.
Miguel T Rivera
@mtrivera
Feb 09 2017 06:43
@playingwithinfinity Look into CSS Grid
https://appendto.com/2017/02/the-basics-of-using-css-grid/
I would not recommend a table. Table layout was popular during the 90's and is considered bad practice (Except HTML emails but that's another story)
playingwithinfinity
@playingwithinfinity
Feb 09 2017 06:47
Okay
@riveratmiguel How would a CSS grid differ from Bootstrap grid?
Chase
@Athabasco
Feb 09 2017 07:23
Just finished my local weather app
Chase
@Athabasco
Feb 09 2017 07:45
Open the pen itself for it to work
Thomas Han Jnr
@thanjnr
Feb 09 2017 07:46
@Athabasco temp taking forever to load , on mobile btw
Chase
@Athabasco
Feb 09 2017 07:46
@eThomasHan Oh... I haven't formatted anything for mobile
Did you try opening it in a separate window?
@eThomasHan Just let me know if it works in a separate window.
Thomas Han Jnr
@thanjnr
Feb 09 2017 07:52
Works fine @Athabasco
Josh Bailey
@joshbailey0
Feb 09 2017 07:58
hey, anyone up to help me out with some issues in the "Tribute page" lesson?
Chase
@Athabasco
Feb 09 2017 07:58
@eThomasHan thx
CamperBot
@camperbot
Feb 09 2017 07:58
athabasco sends brownie points to @ethomashan :sparkles: :thumbsup: :sparkles:
:cookie: 304 | @ethomashan |http://www.freecodecamp.com/ethomashan
Chase
@Athabasco
Feb 09 2017 07:58
@whizcat Yup, what's your question
Josh Bailey
@joshbailey0
Feb 09 2017 07:59
@Athabasco Hi, thanks. I have designed this page and want to center it in the browser window. Not too sure about how to go with it using Bootstrap. Here is the code pen
CamperBot
@camperbot
Feb 09 2017 07:59
whizcat sends brownie points to @athabasco :sparkles: :thumbsup: :sparkles:
:cookie: 238 | @athabasco |http://www.freecodecamp.com/athabasco
Josh Bailey
@joshbailey0
Feb 09 2017 07:59
@Athabasco and here is the example Tribute page I am trying to imitate https://codepen.io/freeCodeCamp/full/NNvBQW
Chase
@Athabasco
Feb 09 2017 07:59
@whizcat click on the gear sign on css
@whizcat click 'quick add'
@whizcat 'bootstrap'
Josh Bailey
@joshbailey0
Feb 09 2017 08:00
ah yeh I had done that already, just adds a clone when I do it again
Chase
@Athabasco
Feb 09 2017 08:02
@whizcat add the class to your div that embodies everything
with 'text-center'
Josh Bailey
@joshbailey0
Feb 09 2017 08:02
Thanks!
Chase
@Athabasco
Feb 09 2017 08:03
@whizcat click on the grey text beside my bold text of my name to highlight me so i can see easier
@whizcat or for anyone
Josh Bailey
@joshbailey0
Feb 09 2017 08:03
@Athabasco so I added ---- <div class="container text-center"> to the very top tag but it didn't change the appearance
Chase
@Athabasco
Feb 09 2017 08:03
@whizcat ok, create a new css class
label it what you want
include this
margin-right: auto;
margin-left: auto;
embody everything
Josh Bailey
@joshbailey0
Feb 09 2017 08:04
@Athabasco Nice! I remember that now. One moment.

@Athabasco Ok here is the udpate https://codepen.io/whizcat/pen/WRgzPd

Now I have lost my 60px top margin though

of white space
Chase
@Athabasco
Feb 09 2017 08:06
go
margin-top: 60px;
@whizcat ok i just looked at your css and html
there is a lot of mistakes
do you know how to make a class?
Josh Bailey
@joshbailey0
Feb 09 2017 08:08
@Athabasco ok, I guess I do, I completed the HTML/CSS lessons
Maybe I need to go back and revise before this current lesson
Chase
@Athabasco
Feb 09 2017 08:08
@whizcat make a new class for the margin left and right
Josh Bailey
@joshbailey0
Feb 09 2017 08:09
@Athabasco .center-class {
margin-right: auto;
margin-left: auto;
}
Chase
@Athabasco
Feb 09 2017 08:09
now apply it to your top div
Josh Bailey
@joshbailey0
Feb 09 2017 08:09
alright
@Athabasco Still no change in apperance
@Athabasco I saved the current state if you want to refresh it
Chase
@Athabasco
Feb 09 2017 08:11
.center-class {
  margin-right: auto;
margin-left: auto;
  width: 1040px;
  margin-top: 60px;
}
get rid of body
put body in that
Josh Bailey
@joshbailey0
Feb 09 2017 08:12
@Athabasco That fixed it, thanks
CamperBot
@camperbot
Feb 09 2017 08:12
whizcat sends brownie points to @athabasco :sparkles: :thumbsup: :sparkles:
:warning: whizcat already gave athabasco points
Chase
@Athabasco
Feb 09 2017 08:12
great! good luck
dont do the personal page yet
to make it look any amount professional, you need to know js and jquery
Josh Bailey
@joshbailey0
Feb 09 2017 08:13
@Athabasco Thanks for the advice!
CamperBot
@camperbot
Feb 09 2017 08:13
whizcat sends brownie points to @athabasco :sparkles: :thumbsup: :sparkles:
:warning: whizcat already gave athabasco points
Chase
@Athabasco
Feb 09 2017 08:13
no problem :P
Josh Bailey
@joshbailey0
Feb 09 2017 08:14
@Athabasco Thanks a lot for your help, I think my previous code got me stuck for solutions. Maybe a better approach for me is to undo what I have done from now on and have another go at it instead of trying to bandaid the problem
CamperBot
@camperbot
Feb 09 2017 08:14
whizcat sends brownie points to @athabasco :sparkles: :thumbsup: :sparkles:
:warning: whizcat already gave athabasco points
Josh Bailey
@joshbailey0
Feb 09 2017 08:20
@Athabasco Do you know of a way to get the caption underneath the image like in the example page and also have the white background for the caption?
Chase
@Athabasco
Feb 09 2017 08:28
@whizcat yeah, put it in a padding
@whizcat class in a div
@whizcat better explained like this, make class with padding-bottom and put the image in the same div as the text
anyways its 1:30 am im off to bed!
Josh Bailey
@joshbailey0
Feb 09 2017 08:43
@Athabasco Ah great! night
Ajay Tanwar
@ajayt365
Feb 09 2017 09:27
https://codepen.io/ajayt365/pen/RRYOdk . why crossorigin.me is not working
kirbyedy
@kirbyedy
Feb 09 2017 09:32
stopped working I think
Why my content below img is not center ?
Is there problem with this div class? <div class="col-xs-12 col-sm-8 col-sm-offset-2 col-md-8 col-md-offset-2">
Marianissimus
@Marianissimus
Feb 09 2017 10:25
@Prezess maybe, because sm-8 + sm-2 = 10 not 12, BUT where did you tell it to be centered? nowhere. that's the default alignment
Joris Labie
@labiej
Feb 09 2017 10:26
Indeed, you should look into the text-* classes
For your goal text-center should do what you want
@Marianissimus The offset is correct, to center a div with a width md-8 you want 2 columns on both sides hence the offset of 2 columns
Marianissimus
@Marianissimus
Feb 09 2017 10:30
@labiej doesn't offset just move columns to the right? Here's from bootstrap: Move columns to the right using .col-md-offset- classes. These classes increase the left margin of a column by columns. For example, .col-md-offset-4 moves .col-md-4 over four columns.
anyway, he should just tell add the text-center class, like he did before. Or do you want to center-align the text? @Prezess
Joris Labie
@labiej
Feb 09 2017 10:31
It does, but it moves the left edge over that many columns. So if you move it by 4 columns the right edge of an 8 column wide div will touch the browsers edge.
Marianissimus
@Marianissimus
Feb 09 2017 10:33
@labiej yes, but that's not centering it. OK, we actually agree but see different problems:)
Joris Labie
@labiej
Feb 09 2017 10:42
I guess we do. I don't like bootstrap or any other frameworks though. Materialize is somewhat okay because the form-fields have a great default markup + it has a lot of colours built in.
Chris Cullen
@123xylem
Feb 09 2017 10:42

QUick Question: I made a reset() function but when I use it it gives me this error message : Uncaught TypeError: reset is not a function
at HTMLButtonElement.<anonymous> (random.js:53)

This is the reset function

function reset(){
    player1Score=0;
    p1s.textContent=player1Score;
    p1s.classList.remove("winDisplay");
    player2Score=0;
    p2s.textContent=player2Score;
    p2s.classList.remove("winDisplay");
    gameOver=false;
}

reset.addEventListener("click",function(){
reset();
});


max.addEventListener("change",function(){
reset();
score.textContent=max.value;
winningScore=max.value;
})
Why wouldnt it think reset is a funcion
playingwithinfinity
@playingwithinfinity
Feb 09 2017 10:56
Hey guys. Why isn't 1 getting outputted when I click on it? http://codepen.io/jimpix/pen/zNNBZr
Waqas Abbasi
@Waqas909
Feb 09 2017 10:59

@playingwithinfinity Because

parseInt($("#display").html()) = Nan

 console.log(parseInt($("#display").html()));
I think that's why it's not outputting it
playingwithinfinity
@playingwithinfinity
Feb 09 2017 11:02
@Waqas909 No, I was using .html instead of .val
Waqas Abbasi
@Waqas909
Feb 09 2017 11:02

@playingwithinfinity Nvm, It's actually the input box.

~~~

<input type="text" id="display"> //Replacing this with

<p type="text" id="display"> </p>

playingwithinfinity
@playingwithinfinity
Feb 09 2017 11:02
Yeah, I got it.
Waqas Abbasi
@Waqas909
Feb 09 2017 11:03
:thumbsup:
playingwithinfinity
@playingwithinfinity
Feb 09 2017 11:06
@Waqas909 Why don't my arithmetic buttons display anything? http://codepen.io/jimpix/pen/zNNBZr
What's wrong?
playingwithinfinity
@playingwithinfinity
Feb 09 2017 11:11
It was just working?
Daniel
@Prezess
Feb 09 2017 11:14
@Marianissimus @labiej I want to have this column on the center place on site.
johnnydemol
@johnnydemol
Feb 09 2017 11:17
Quick question guys,
I'm trying to call an API for the weather app challenge but i can't seem to get the api call to work..
I just want it to display the object on screen so I know I'm get a response, then work from there
h1tag
@h1tag
Feb 09 2017 11:21
@johnnydemol you forgot to add the API key to the URL
johnnydemol
@johnnydemol
Feb 09 2017 11:24
Thanks @fortMaximus I'll see if I can figure out how to do that
CamperBot
@camperbot
Feb 09 2017 11:24
johnnydemol sends brownie points to @fortmaximus :sparkles: :thumbsup: :sparkles:
:cookie: 301 | @fortmaximus |http://www.freecodecamp.com/fortmaximus
Our weather API is simple, clear and free. We also offer higher levels of support, please see our paid plan options. To access the API you need to sign up for an API key if you are on a free or paid plan.
and if it still not working after adding the API key. Try HTTPS instead of HTTP in the URL
johnnydemol
@johnnydemol
Feb 09 2017 11:37
I have to wait about ten minutes for the key to be activated but I'll let you know if it works. Thanks a lot for your help, the tut on apis wasn't all that clear to me
h1tag
@h1tag
Feb 09 2017 11:38
YW. Yea, there are somethings you have to figure out by youself
Ian MacMillan
@IanMacMillan
Feb 09 2017 11:48

[Basic question re CodePen] I'm new to CodePen and want to make sure I've set this up correctly so I can complete the "Build a Tribute Page".

  • Are there any setting I need to set?
  • Any Header code or libraries to load?

I ask this as I cheated a bit (I find it helps me learn faster) and loaded up Quincy Larson's HTML and CSS and ran the code....and I get a different looking result.

h1tag
@h1tag
Feb 09 2017 11:50
@IanMacMillan Have you watched the project video?
Meli94
@meli94
Feb 09 2017 11:50
add bootstrap in the css panel setting
Ian MacMillan
@IanMacMillan
Feb 09 2017 11:57
@fortMaximus Yes....and have Bootstrap added to CSS, but not behaving as expected.
@meli94 Yes....have Bootstrap added to CSS, but not behaving as expected. Any other settings or libraries?
h1tag
@h1tag
Feb 09 2017 11:59
@IanMacMillan can you paste your Codepen pen URL?
Ian MacMillan
@IanMacMillan
Feb 09 2017 12:00
h1tag
@h1tag
Feb 09 2017 12:01
@IanMacMillan that's why you shouldn't just copy-paste. You should WRITE YOUR OWN CODE!
Start a new pen and start from scratch
And just ask if you need any help
Ian MacMillan
@IanMacMillan
Feb 09 2017 12:07

@fortMaximus Yes.....but sometimes it helps to learn quicker.

For example, I've learnt that Thumnail class needs to have all the CSS settings set to work for me but not for Quincy.....ie I need to learn to set up the runtime environment AND how to write to code....because the same code gives 2 results. And CodePen out of the box + adding the Bootstrap library does seem to work as per bootstrap or HTML references suggest.

johnnydemol
@johnnydemol
Feb 09 2017 12:08
Hey guys,
So I added the key to the api call but no luck so far.. Can you guys give it a look?
http://codepen.io/svenhendrikx/pen/OWExJL
The key also has a name that I'm allowed to edit, not sure if that's of significance?
Clyde Lobo
@oppiniated
Feb 09 2017 12:15
@johnnydemol 1. You will have to use the http option for the api.
  1. After changing api from https to http i get the error jquery.min.js:4 GET http://api.openweathermap.org/data/2.5/weather?lat=35&lon=139&key=3090d225b4f31d0d33607a30bb952294 401 (Unauthorized)
Meli94
@meli94
Feb 09 2017 12:17
the key is something like this &APPID=9cb7c1d8dd76505634e629f8512677e7
take off &key= and use the APPID that they give to you
h1tag
@h1tag
Feb 09 2017 12:18
@IanMacMillan well, the challenges are here to teach how to write code. Qincey's code is using some advanced stuff, you shouldn't be copying code that you don't know what it does (especially in the begging) because you gonna end with problems like the one you're having. Idk why your image displays twice, but if you copy Quincy's code again and paste it instead of your code, it'll work the same way as Quincy's one.
@IanMacMillan Try to apply what you learned from the challenges and if you have some idea you want to implement or get stuck, we're here to help.
johnnydemol
@johnnydemol
Feb 09 2017 12:19
@meli94 @oppiniated That worked! Thanks a lot guys.
CamperBot
@camperbot
Feb 09 2017 12:19
johnnydemol sends brownie points to @meli94 and @oppiniated :sparkles: :thumbsup: :sparkles:
:cookie: 565 | @oppiniated |http://www.freecodecamp.com/oppiniated
:cookie: 288 | @meli94 |http://www.freecodecamp.com/meli94
johnnydemol
@johnnydemol
Feb 09 2017 12:20
@meli94 How did you know to use APPID? It doesn't say how to incorporate the key on the site
Meli94
@meli94
Feb 09 2017 12:21
if you need help I'm here. I struggled so much with that few times ago @johnnydemol
johnnydemol
@johnnydemol
Feb 09 2017 12:21
Or maybe I just didn't find it
Meli94
@meli94
Feb 09 2017 12:21
on the email
it's written at the very bottom
johnnydemol
@johnnydemol
Feb 09 2017 12:22
Ah I see
I'll keep my eyes open next time haha
Meli94
@meli94
Feb 09 2017 12:23
ahah
Ian MacMillan
@IanMacMillan
Feb 09 2017 12:24

@fortMaximus Thanks. The 2 images are me trying to get the Thumbnail image + caption to work....the 1st is as per Quincy's code but behaves differently, and the 2nd is me adding styles to the thumbnail and caption text to try to fix it.

So I've learnt that with CodePen + Bootstrap CSS library added, not all the Bootstrap classes work....so I need to stick with core HTML + CSS and code from scratch.

CamperBot
@camperbot
Feb 09 2017 12:24
ianmacmillan sends brownie points to @fortmaximus :sparkles: :thumbsup: :sparkles:
:cookie: 302 | @fortmaximus |http://www.freecodecamp.com/fortmaximus
Ian MacMillan
@IanMacMillan
Feb 09 2017 12:44

@fortMaximus Cracked it! CodePen adds the latest alpha of Bootstrap 4.....but when I delete that and use version 3, everything works.

So I now have a stable dev platform to work with. Yeah!

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css <== Worked (copied from Quincy's settings)

https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css <== Didn't work (from "Quick -add" of Bootstrap)

I can now delete everything and start from scratch.

AlejoFCC
@AlejoFCC
Feb 09 2017 12:45
Hello! i am in 147 challenge where I have to build a random quote machine, but i haven't seen any way to do it using previous lessons. I am a bit confuse. Where could I get some right info about it?
kirbyedy
@kirbyedy
Feb 09 2017 12:46
@AlejoFCC one way is to use an array (which was covered in the lessons), choose a random quote from it (getting a random number was also covered in the lessons) and then display it on your page
the other way is to find an quote API which gives you a random quote and then display it on the page. This was not covered but you can search the internet for examples
AlejoFCC
@AlejoFCC
Feb 09 2017 12:48
@kirbyedy Thank you. I'll try to find out by that way.
CamperBot
@camperbot
Feb 09 2017 12:48
alejofcc sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1760 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
Janina Pohorecki
@janepohorecka
Feb 09 2017 12:48
Hey guys!! I have been stuck on centering an image on top of an image using flexbox. Could anyone please help me? It's beginning to drive me nuts.
kirbyedy
@kirbyedy
Feb 09 2017 12:49
@janepohorecka what is your code up till now
Janina Pohorecki
@janepohorecka
Feb 09 2017 12:50
@kirbyedy
<div class="flex two-video center">
<!-- <a href="//www.youtube.com/watch?v=XSGBVzeBUbk" data-lity> -->
<div class="">
<img class="" src="Demo.png">
<img class="play-button" src="play.png" alt="">
</div>
<!-- </a> -->
</div>
It may be easier to send you to the github file I created?
kirbyedy
@kirbyedy
Feb 09 2017 12:51
I thought you have it on codepen :D
Janina Pohorecki
@janepohorecka
Feb 09 2017 12:51
@kirbyedy I enjoy using github more.
Its the big orange play button. It should lay right on top of the image but idk what I am doing wrong not to make ithappen
h1tag
@h1tag
Feb 09 2017 12:54
@IanMacMillan good catch. I was going to suggest that but i forgot. Good luck! :smile:
kirbyedy
@kirbyedy
Feb 09 2017 12:56
@janepohorecka this might help: http://jsfiddle.net/shodaburp/9nEua/
so I think you should use absolut positioning to get that button where you want over the image
Ian MacMillan
@IanMacMillan
Feb 09 2017 12:57
@fortMaximus I used to be a software engineer many many years ago (specialist operating systems and stuff)...but missed out on the whole web dev thing....so FreeCodeCamp is taking me back and forward at the same time. :smile:
Janina Pohorecki
@janepohorecka
Feb 09 2017 12:58
@kirbyedy In that example they knew exactly what the parameters were.. In mine, I dont have set sizes
h1tag
@h1tag
Feb 09 2017 12:59
@IanMacMillan You should've mentioned that before :smile: :P I thought you're still a beginner.
Meli94
@meli94
Feb 09 2017 13:00
what's wrong with this? My Ajax has always a problem :/ http://codepen.io/Meli94/pen/ygRPKP?editors=1010
twitch tv
Janina Pohorecki
@janepohorecka
Feb 09 2017 13:01
@kirbyedy thank you for trying to help me though
CamperBot
@camperbot
Feb 09 2017 13:01
janepohorecka sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1761 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
h1tag
@h1tag
Feb 09 2017 13:02
@meli94 there's nothing wrong? :worried:
Ian MacMillan
@IanMacMillan
Feb 09 2017 13:02
@fortMaximus I am a re-beginner. lol
h1tag
@h1tag
Feb 09 2017 13:02
@IanMacMillan lol
kirbyedy
@kirbyedy
Feb 09 2017 13:03
I see the object in the console
Sorin Ruse
@sorinr
Feb 09 2017 13:05
@meli94 there is nothing wrong with ur ajax call. to see that its working just make $('#stream').html(data.stream.channel.game); but it will work only for the online channels
Meli94
@meli94
Feb 09 2017 13:07
oh really?
great! thank you!
@kirbyedy @fortMaximus @sorinr
Sorin Ruse
@sorinr
Feb 09 2017 13:08
@meli94 so, you will have to write some if logic in there to distinguish between online and offline channels. the console.log(data) will help you see the response object structure both cases online or offline
h1tag
@h1tag
Feb 09 2017 13:09
@sorinr :wave:
Sorin Ruse
@sorinr
Feb 09 2017 13:09
@fortMaximus hi there
Doug Franklin
@Imaginativeone
Feb 09 2017 13:19
hi
where can I look for node help?
Sorin Ruse
@sorinr
Feb 09 2017 13:20
just ask in here for what help do u need
Doug Franklin
@Imaginativeone
Feb 09 2017 13:24
I've set up a package.json, tsconfig.json, and a systemjs.config.js
when I do npm install
I get an error:
network tunneling socket could not be established, cause=connect ECONNREFUSED 127.0.0.1:80
Sorin Ruse
@sorinr
Feb 09 2017 13:45
@Imaginativeone npm install its always looking for package.json. the tsconfig.json and the others don't matter for npm
khepf
@khepf
Feb 09 2017 13:49
Has anyone been having issues where the cursor won't allow you to click where you want in the tutorial part of the browser? I have tried chrome/firefox/IE and same result. Then when I get the cursor where I want it, it skips down one line when I start typing.
kirbyedy
@kirbyedy
Feb 09 2017 13:54
known issue
khepf
@khepf
Feb 09 2017 13:55
I have a workaround. If I place the cursor and press spacebar, it skips down one line and then at that point I can place the cursor where I want to. Just curious if anyone else was having this same issue.
ty kirby
Darren Ho
@darrenho97
Feb 09 2017 13:58
can someone review my wikipedia project? :)
kirbyedy
@kirbyedy
Feb 09 2017 14:00
@darrenho97 cosmetically I would push the whole thing a bit down, also try to stretch the background image to the whole page (hint: use cover)
also not that is necessary but it would be nice to handle the cases when some crazy user types in some crazy term like lkajsdfhlasjkdhflaskjdf
and empty search
like a message... hey you idiot search for something decent :)
Darren Ho
@darrenho97
Feb 09 2017 14:02
@kirbyedy i see! will work on that :)
@kirbyedy thanks!
CamperBot
@camperbot
Feb 09 2017 14:02
darrenho97 sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1763 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
Sorin Ruse
@sorinr
Feb 09 2017 14:16

@darrenho97 here some version for body css u may use:

body { 
  min-height: 100vh;
background-image:url("http://res.cloudinary.com/tempest/image/upload/c_limit,cs_srgb,w_10000/MTM2ODI1NzM3OTA1ODQxNzU5.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

and btw try to consolidate ur css that is referring to the same element . no need to have two body entrances into the css

Darren Ho
@darrenho97
Feb 09 2017 14:20
@sorinr cool! this one actually makes the whole image show. been looking around for this for awhile, cheers
Sorin Ruse
@sorinr
Feb 09 2017 14:22
@darrenho97 :+1:
Vikram Kothekar
@randomguyfromcollege
Feb 09 2017 14:34
i have to build a tribute page on FCC.
any suggestions?
h1tag
@h1tag
Feb 09 2017 14:35
Jackie Chan ;) @randomguyfromcollege
Vikram Kothekar
@randomguyfromcollege
Feb 09 2017 14:35
Jackie Chan ?
Only one page for Jackie Chan
h1tag
@h1tag
Feb 09 2017 14:36
LOL
You can make more than one
Vikram Kothekar
@randomguyfromcollege
Feb 09 2017 14:37
ok.. I will try..
thanx for your hel[
help*
h1tag
@h1tag
Feb 09 2017 14:37
yw
Jean Marco Romero
@volkranium
Feb 09 2017 14:56
Why is a <p> getting out of a div????
Sorin Ruse
@sorinr
Feb 09 2017 14:58
@volkranium can u share your code?
@volkranium or a link to ur pen
why do i get description undefined as a result
i mean i know why there is a description undefined but why dont iget other info to my wiki article
Jean Marco Romero
@volkranium
Feb 09 2017 15:02
@sorinr Youll find that on narrow viewport the paragragraph with the little wrench on top overflows..
Sorin Ruse
@sorinr
Feb 09 2017 15:10
screenshot.png
@volkranium this is what u see now?
Jean Marco Romero
@volkranium
Feb 09 2017 15:20
@sorinr i dunno why codepen messes up my layout
@sorinr doesnt look like that on my browser
Chase
@Athabasco
Feb 09 2017 15:21
http://codepen.io/Athabasco/pens/public/ this working for you guys? Click on the link for it to have a higher chance of working
Sorin Ruse
@sorinr
Feb 09 2017 15:22
@volkranium in the pic above i just took the html and css provided by you above and put them into a new pen. html in html panel css into the css panel
Chase
@Athabasco
Feb 09 2017 15:22
Wrong link, heres the right one. http://codepen.io/Athabasco/pen/wgXdNJ
h1tag
@h1tag
Feb 09 2017 15:24
@Athabasco yes, working but background is white for me
Sorin Ruse
@sorinr
Feb 09 2017 15:25
@Athabasco for me its working. i would just make temperature = Math.round(weather * (9 / 5) - 459.67)` to display it as integers. decimals in weather apps have no sense
Jinfang Luo
@jincute
Feb 09 2017 15:30
I can't make my Tribute page responsive displayed in Mobile Web browser, anyone can help? Thanks.
h1tag
@h1tag
Feb 09 2017 15:45
@jincute did you use Bootstrap?
Jinfang Luo
@jincute
Feb 09 2017 15:45
@fortMaximus yes.
h1tag
@h1tag
Feb 09 2017 15:46
@jincute can you post the Codepen pen URL?
Jinfang Luo
@jincute
Feb 09 2017 15:47
@fortMaximus sure: https://codepen.io/jincute/pen/NdBQXe. Thanks in advance.
CamperBot
@camperbot
Feb 09 2017 15:47
jincute sends brownie points to @fortmaximus :sparkles: :thumbsup: :sparkles:
:cookie: 304 | @fortmaximus |http://www.freecodecamp.com/fortmaximus
Chris
@bestintown23
Feb 09 2017 15:50
how do stop my background image from zooming in when i go fullscreen?
Ghulam Shabir
@ghulamshabir
Feb 09 2017 15:51
@jincute <meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=yes" /> should be in pen settings section Stuff for head
Jinfang Luo
@jincute
Feb 09 2017 15:52
@ghulamshabir you mean put this under <head> </head>
Ghulam Shabir
@ghulamshabir
Feb 09 2017 15:53
@jincute no just cut and paste it into text-area of Stuff for head section in settings
Jinfang Luo
@jincute
Feb 09 2017 15:56
@ghulamshabir Thank, I tried and paste it into the ’Stuff for head', but it doesn’t work.
CamperBot
@camperbot
Feb 09 2017 15:56
jincute sends brownie points to @ghulamshabir :sparkles: :thumbsup: :sparkles:
:star2: 1792 | @ghulamshabir |http://www.freecodecamp.com/ghulamshabir
h1tag
@h1tag
Feb 09 2017 15:58
@jincute I'm having problems signing in Gitter from mobile, so I can't view you webpage on mobile to check how it looks there :worried:
Gulsvi
@gulsvi
Feb 09 2017 15:59
@jincute If you want your page to look better on mobile, you should not push things over by 220px. That's the screen width on some smaller mobile devices. I think my samsung is 320px wide, so your text box would be pushed pretty far over. Use the bootstrap grid system instead - it uses percentages based on screen size (xs, sm, md, etc)
  .text-box{
    font-family: Monospace;
    margin-left:220px;
    margin-right:220px;
    width:60%;
  }
Jinfang Luo
@jincute
Feb 09 2017 16:00
@fortMaximus It’s ok.
Ghulam Shabir
@ghulamshabir
Feb 09 2017 16:00
@jincute you should use bootstrap grid classes or css media queries to make it responsive
Jinfang Luo
@jincute
Feb 09 2017 16:00
@ghulamshabir @SkyCoder01 Ok, let me try. Thanks both.
CamperBot
@camperbot
Feb 09 2017 16:00
jincute sends brownie points to @ghulamshabir and @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 153 | @skycoder01 |http://www.freecodecamp.com/skycoder01
:warning: jincute already gave ghulamshabir points
h1tag
@h1tag
Feb 09 2017 16:00
@jincute nice design btw :clap:
Tony
@FreakishLancer
Feb 09 2017 16:11
I was wondering if you guys could help me figure out why the sound/audiocontext won't work in my Simon Says game. I'm just testing the sound and it doesn't seem to work when I add the webkit prefix for AudioContext(). http://codepen.io/Freaklancer/pen/BpOEvO
h1tag
@h1tag
Feb 09 2017 16:14
I didn't reach this project, but the sound is working fine for me @FreakishLancer
Tony
@FreakishLancer
Feb 09 2017 16:15
@fortMaximus Hmm, that's interesting. I hear no sound on my end.
Which browser are you using?
h1tag
@h1tag
Feb 09 2017 16:15
Chrome
Tyler Moeller
@TylerMoeller
Feb 09 2017 16:16
@FreakishLancer It works for me too. I did an audiocontext project a while back - does this one work for you? http://s.codepen.io/TylerMoeller/pen/yVzJXy
Tony
@FreakishLancer
Feb 09 2017 16:16
Wow, it works perfectly in Chrome. It even connects the sounds. But it doesn't work at all on Firefox or Safari.
@TylerMoeller I don't hear any sound in your pen on Firefox.
h1tag
@h1tag
Feb 09 2017 16:17
@TylerMoeller Wow! Nice! :clap:
Tony
@FreakishLancer
Feb 09 2017 16:17
@TylerMoeller I hear it on Chrome and Opera though. Also, it doesn't load at all in Edge.
Tyler Moeller
@TylerMoeller
Feb 09 2017 16:17
odd... it works on my firefox and chrome
It was a really fun project @fortMaximus - been meaning to replace those .mp3 files in my simon project and this was to help practice :)
ermarie
@ermarie
Feb 09 2017 16:18
I've got the random quote machine all but done, except that I can't figure out how to get the twitter button to dynamically change with each quote. Most of the examples I've seen are using pre-selected quotes in an array rather than an API to get the quotes, but I used an API and I'm not sure how to apply the content of the quote called each time to the tweet.
Tyler Moeller
@TylerMoeller
Feb 09 2017 16:18
Will see if I can figure out why it wouldn't work in firefox
h1tag
@h1tag
Feb 09 2017 16:19
@TylerMoeller it's fun! I could play on it all day. LOL
Tony
@FreakishLancer
Feb 09 2017 16:20
@TylerMoeller I didn't know there was oscillator type of triangle btw. Sounds much better than square.
sennator
@sennator2
Feb 09 2017 16:20
http://codepen.io/sennator/pen/egEeLP?editors=0110
why is that when i get undefined for one of my variables non of others gets displayed in my articles window?
h1tag
@h1tag
Feb 09 2017 16:20
it would be nice if you add more songs too @TylerMoeller
Tyler Moeller
@TylerMoeller
Feb 09 2017 16:21
@FreakishLancer Yeah, sine, sawtooth, square, and triangle. Volume can change between browsers a whole bunch, something to be careful about. Maybe just my inexperience with the API though
@fortMaximus I'll work on that some rainy day over the weekend lol :)
@FreakishLancer Does this one work for you? http://s.codepen.io/TylerMoeller/pen/ObdQGR
A basic version that uses an audiocontext normalization library: https://github.com/cwilso/AudioContext-MonkeyPatch/
I'm curious now why it won't work in some browsers...(not to hijack your question, btw :))
Tony
@FreakishLancer
Feb 09 2017 16:25
@TylerMoeller Doesn't work for me on Firefox. Actually, I found that if you prefix your AudioContext creation, then it will work on Chrom but not on Firefox.
So I need to find a way to make alternate audiocontext creations depending on the browser.
Tyler Moeller
@TylerMoeller
Feb 09 2017 16:28
Weird, just tested again. It works for me on Firefox and Chrome, windows 7. Chrome/Edge Windows 10. Chrome/Safari Mac OS Sierra.
sennator
@sennator2
Feb 09 2017 16:29
http://codepen.io/sennator/pen/egEeLP?editors=0110
why is that when i get undefined for one of my variables non of others gets displayed in my articles window?
h1tag
@h1tag
Feb 09 2017 16:32
@sennator2 it's working fine for me
Tony
@FreakishLancer
Feb 09 2017 16:37
Ugh...now I can get mine to work on every browser, even Firefox Developer Edition, EXCEPT vanilla Firefox.
This is annoying.
Willina Clark
@lclc68lclc
Feb 09 2017 16:37

I'm attempting to make the tweet part of my random quote machine work and every time I enter the below code, the CORS error comes back on codepen:

var urlApi = "https://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1";
  $.getJSON(urlApi, function(a) {
  $("#message").append(a[0].content + "<p>— " + a[0].title + "</p>");
  $("#tweet_btn").on("click", function(e){
    var tweet = $("#message").text;
    $("#tweet_btn").attr('href', 'https://www.twitter.com/intent/tweet?text=' + message);
    });
  });

If I remove the tweet button, everything works fine.

Meli94
@meli94
Feb 09 2017 16:39
take off the button from the getJSON request
Tyler Moeller
@TylerMoeller
Feb 09 2017 16:40
@sennator2 Looking at this more closely, you are testing to see if some of the properties don't exist, but when you use return in a for loop, it stops the for loop and exits. So, you're exiting the for loop as soon as you get a result without a thumbnail or a description. Instead, add a placeholder thumbnail or placeholder text and keep the for loop going.
Roberto Di Lillo
@koop4
Feb 09 2017 16:41
hi all
Willina Clark
@lclc68lclc
Feb 09 2017 16:41
@meli94 that worked for one problem. Thank you
CamperBot
@camperbot
Feb 09 2017 16:41
lclc68lclc sends brownie points to @meli94 :sparkles: :thumbsup: :sparkles:
:cookie: 289 | @meli94 |http://www.freecodecamp.com/meli94
Roberto Di Lillo
@koop4
Feb 09 2017 16:43
I was cheching this challange and it seems to me that 7th test is wrong.
It should return a change, but it requires to return the string "insufficient Funds"
can anyoneelse confirm the bug?
sennator
@sennator2
Feb 09 2017 16:43
@TylerMoeller thanks for your help
CamperBot
@camperbot
Feb 09 2017 16:43
sennator2 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1476 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Meli94
@meli94
Feb 09 2017 16:44
@lclc68lclc make a function tweet similar to this : function tweet() {
window.open("https://twitter.com/intent/tweet?text=" + encodeURIComponent($('#quote').text()) + '%0a' + $('#author').text());
}
and then call it on click
Srđan Međo
@PerpetualWar
Feb 09 2017 16:46
guys, I use jquery's hide() and show() to disable and enable visible properties on screen. But the problem is placeholders stay, so for example if I hide all between 1st and 10th object, in between is empty space which looks not so good
how to go around that problem ?
Meli94
@meli94
Feb 09 2017 16:47
addClass()
or .empty() to take off the placeholder
@PerpetualWar
Srđan Međo
@PerpetualWar
Feb 09 2017 16:49
ok let me try
Tyler Moeller
@TylerMoeller
Feb 09 2017 16:50
@PerpetualWar You probably aren't hiding the entire element or you have height and width as attributes to the element. .hide() is the same as display: none which will completely hide it. If you have a codepen, it would help debug
click on online and offline
you will see uneven distance between boxes
Tyler Moeller
@TylerMoeller
Feb 09 2017 16:52
@PerpetualWar You aren't hiding the <a> tags, just the content between them
Click "Online" and then right-click -> inspect to see your HTML. There's a bunch of empty <a></a> tags
Srđan Međo
@PerpetualWar
Feb 09 2017 16:52
so I just need to select them as well ?
Tyler Moeller
@TylerMoeller
Feb 09 2017 16:53
Yeah, or put the online offline classes on the a tags instead of their divs inside
Jason Luboff
@JLuboff
Feb 09 2017 16:53
@TylerMoeller Hey Tyler, question for you. What would be the best way to store a navigation bar in an html file that is served to multiple pages? PHP or iFrame? Or another solution?
Willina Clark
@lclc68lclc
Feb 09 2017 16:54
@meli94 That didn't work. https://codepen.io/lclc68lclc/pen/EZLYae
Tyler Moeller
@TylerMoeller
Feb 09 2017 16:54
@JLuboff In wordpress, they do this with a header.php template. Outside of wordpress, I'd probably just dynamically generate the HTML and have that run in a document.ready.
Srđan Međo
@PerpetualWar
Feb 09 2017 16:55
yes @TylerMoeller that was coorect
I icompletely forgot about <a> tags
Jason Luboff
@JLuboff
Feb 09 2017 16:55
@TylerMoeller Its for my companies Intranet site..that I created before I went through FCC, etc. So I'm looking at cleaning it up. What exactly do you mean by dynamically generating the HTML? To me, when I think dynamic, I think "constantly changing" versus static "fixed, not changing"
Sorin Ruse
@sorinr
Feb 09 2017 16:56
@JLuboff plain html its the best solution. no need for for php a serverside and for sure NOT in an iframe
Tyler Moeller
@TylerMoeller
Feb 09 2017 16:56
@JLuboff You would create a container for the navbar, like <header></header> and then in your JS:
$('header').html(
`Your navbar HTML`
);
Srđan Međo
@PerpetualWar
Feb 09 2017 16:57
I need one more thing @TylerMoeller check the same codepen and shrink it to mobile size or whateva
Tyler Moeller
@TylerMoeller
Feb 09 2017 16:57
Or just use $('body').prepend('navbar html code') if you don't have a container to latch onto
Jason Luboff
@JLuboff
Feb 09 2017 16:57
@TylerMoeller Ah...duh...that makes sense. Then if I need to make any changes, I just change the JS file
Tyler Moeller
@TylerMoeller
Feb 09 2017 16:57
@JLuboff Yes, exactly
Jason Luboff
@JLuboff
Feb 09 2017 16:57
@sorinr You mention just plain HTML...are you mentioning a similar idea to @TylerMoeller or something different?
Srđan Međo
@PerpetualWar
Feb 09 2017 16:57
how to make when certain width is achieved I force vertical alignement
instead of horisontaol
as right now each box scales differently dependable on the size of channel name
Tyler Moeller
@TylerMoeller
Feb 09 2017 16:59
I'm sorry :( I have to go... 9am and time for my rainy commute to work...
Srđan Međo
@PerpetualWar
Feb 09 2017 16:59
I mean length of channel name
Jason Luboff
@JLuboff
Feb 09 2017 16:59
@TylerMoeller Thanks btw. I really don't know why I didn't think to do that. I've used .html plenty of times too lol
CamperBot
@camperbot
Feb 09 2017 16:59
jluboff sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1477 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Srđan Međo
@PerpetualWar
Feb 09 2017 16:59
@TylerMoeller thanks dude
Sorin Ruse
@sorinr
Feb 09 2017 16:59
@JLuboff if you don't need a dynamic navigation then plain html its the one loading fastest then anything
Srđan Međo
@PerpetualWar
Feb 09 2017 16:59
was helpful
Tyler Moeller
@TylerMoeller
Feb 09 2017 17:00
Happy to help :+1:
Jason Luboff
@JLuboff
Feb 09 2017 17:01
@sorinr Ah. Ya its occasionaly changing, and I'd rather not have to go and change 20ish pages like I have in the past
@sorinr Thank you for your input. Its appreciated as always :smile:
CamperBot
@camperbot
Feb 09 2017 17:01
:star2: 1164 | @sorinr |http://www.freecodecamp.com/sorinr
jluboff sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
Sorin Ruse
@sorinr
Feb 09 2017 17:06
@JLuboff for "occasionally changing" i would just use js to pass the responsibility to the client computing power, no need to do it server side :)
Jason Luboff
@JLuboff
Feb 09 2017 17:08
@sorinr Ya, I'm just going to go with Tyler's approach. I really don't know why I didn't think of that. I've used .html() and suggested it many times lol
DarkoxD
@DarkoxD
Feb 09 2017 17:16
Does anyone know why when i insert multiple css classes under "class" in html it wont accept it
Jason Luboff
@JLuboff
Feb 09 2017 17:19
@DarkoxD Do you have spaces between each class name?
Meli94
@meli94
Feb 09 2017 17:23
http://codepen.io/Meli94/pen/ygRPKP?editors=1010 I can't make a list of the status. any hint?
DarkoxD
@DarkoxD
Feb 09 2017 17:27
@JLuboff LJ yes i do
Jason Luboff
@JLuboff
Feb 09 2017 17:29
@DarkoxD Do you have the code in codepen?
DarkoxD
@DarkoxD
Feb 09 2017 17:30
@JLuboff yes i do
Adam Jacks
@AdamHJ123
Feb 09 2017 17:30
@meli94 .append("<div class='' id =" ">"+ status +"<div>");
Fail
Here it is
Jason Luboff
@JLuboff
Feb 09 2017 17:32
@DarkoxD Why do you have class: instead of class=?
DarkoxD
@DarkoxD
Feb 09 2017 17:34
Mistake, but when i enter new class under style in lists it does not work
Another class next to color white which i already have
Jason Luboff
@JLuboff
Feb 09 2017 17:38
@DarkoxD Ok, what class are you trying to enter? that style appears to only be affecting the li element as expected. You'd need to use span or p element to change the font color I believe
neodevs
@neodevs
Feb 09 2017 17:38
Is there something wrong with the twitch API??
the example doesn't look anything like the example that I am seeing in all the tutorials and the link provided in the directions doesn't work. Any advice on accessing the JSON data on the twitch API??
DarkoxD
@DarkoxD
Feb 09 2017 17:43
@JLuboff i deleted most of the thing now and created a p element instead of lists and see how it will go
neodevs
@neodevs
Feb 09 2017 17:45
@TylerMoeller @sorinr @JLuboff Is there something wrong with the twitch API??
the example doesn't look anything like the example that I am seeing in all the tutorials and the link provided in the directions doesn't work. Any advice on accessing the JSON data on the twitch API??
Tony
@FreakishLancer
Feb 09 2017 17:46
So it seems my sounds are working in all browsers except Safari. Does anyone know what I should do? I hear no sound on iOS. =[ http://codepen.io/Freaklancer/pen/BpOEvO
Jason Luboff
@JLuboff
Feb 09 2017 17:46
@neodevs I just checked mine...its working. There is two different API calls that I made. One for the "channels" and one for "streams"
neodevs
@neodevs
Feb 09 2017 17:48

@JLuboff did you need to register on the twitch API??

or dd you have success using the provided url?
when i try to use it I get

{"error":"Bad Request","status":400,"message":"No client id specified"}
Jaime
@jmasked
Feb 09 2017 17:50
why won’t my dropbox links for images work in codeine?
codepen
Jason Luboff
@JLuboff
Feb 09 2017 17:53
@neodevs Yes I had to register for a client id
@jmasked I don't believe dropbox allows for hotlinking
neodevs
@neodevs
Feb 09 2017 17:55
@JLuboff do you just use the url for your codepen as the redirect url??
Jason Luboff
@JLuboff
Feb 09 2017 17:56
Its been a while since I've done it, but ya I believe so
Adam
@adamakers
Feb 09 2017 17:58
anyone been using bootstrap 4?
having issues with the carousel
Clyde Lobo
@oppiniated
Feb 09 2017 17:58
What's the issue?
Adam
@adamakers
Feb 09 2017 17:58
specifically the contents of the carousel item will not be in a block level format
they end up being inline -block
<section class="testimonial py-5">

  <div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner px-5" role="listbox">
      <div class="carousel-item active">
        <p class="d-block">Do not modify the z-indexes and opacity first work with the ones I have given above and then start 
          doing complex stuff, ask again if you have some doubt and sorry for typos I have less time.</p>
        <p class="d-block">Do not modify the z-indexes and opacity first work with the ones I have given above and then start 
        doing complex stuff, ask again if you have some doubt and sorry for typos I have less time.</p>
      </div>
      <div class="carousel-item">
        <p class="d-block">Do not modify the z-indexes and opacity first work with the ones I have given above and then start 
          doing complex stuff, ask again if you have some doubt and sorry for typos I have less time.</p>
        <p class="d-block">Do not modify the z-indexes and opacity first work with the ones I have given above and then start 
        doing complex stuff, ask again if you have some doubt and sorry for typos I have less time.</p>
      </div>
      <div class="carousel-item">
        <p class="d-block">Do not modify the z-indexes and opacity first work with the ones I have given above and then start 
          doing complex stuff, ask again if you have some doubt and sorry for typos I have less time.</p>
        <p class="d-block">Do not modify the z-indexes and opacity first work with the ones I have given above and then start 
        doing complex stuff, ask again if you have some doubt and sorry for typos I have less time.</p>
      </div>
    </div>
  </div>

</section>
Clyde Lobo
@oppiniated
Feb 09 2017 17:59
@adamakers Can you create a codepen pen for that?
Adam
@adamakers
Feb 09 2017 18:00
yea give me a minute
weird... i just wrapped it in a div and that seems to have worked.
i tried that earlier but i didnt get the same result
Clyde Lobo
@oppiniated
Feb 09 2017 18:05
ok
Adam
@adamakers
Feb 09 2017 18:05
thats still pretty strange though that it does that.
ohhh
im wondering if its because carousel-item has display flex on it?
yea, so I guess carousel-item's default is display flex and to fix it you have to add the class flex-column
neodevs
@neodevs
Feb 09 2017 18:17
@JLuboff ooops!
Koderkid1936
@Koderkid1936
Feb 09 2017 18:26
`
``

`<DOCTYPE HTML>

<html>
<head>
<title>Tryit Editor v3.3</title>
<link rel="stylesheet" href="file.css">
</head>
<body>
<div id="header">
<h1>City Gallery</h1>
</div>

    <div class="sideContent clearfix">
        <ul>
            <li>London</li>
            <li>Paris</li>
            <li>Tokyo</li>
        </ul>

    </div>

    <div class="mainContent">
        <h1>London</h1>
        <p>London is the capital city of England. It is the most populous city in the 
        United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
        <p>Standing on the River Thames, London has been a major settlement for two 
        millennia, its history going back to its founding by the Romans, 
        who named it Londinium.</p>
    </div>

    <div id="footer">
        Copyright &copy; W3Schools.com
    </div>
</body>

</html>`

Can somebody tell me why the left column is not reaching the footer ?

`html,body{
height: 100%;
margin: 0 auto;
}

body{
/width: 1280px;/

}

header{

height: 88px;
text-align: center;
background-color: black;

}

header h1{

color: white;
padding: 20px;

}

.sideContent{
width: 240px;
float: left;
padding: 1em;
background-color: orange;

}

.clearfix:before,
.clearfix:after{
content: " ";
display: block;

}

ul{
list-style: none;
padding: 0.5em;

}

.mainContent{
width: 1008px;
float: left;
padding: 1em;
background-color: yellow;
}

footer{

clear: both;
text-align: center;
background-color: black;
height: 30px;
color: white;
padding: 10px;
font-weight: 900;

}
¬#

`html,body{
height: 100%;
margin: 0 auto;
}

body{
/width: 1280px;/

}

header{

height: 88px;
text-align: center;
background-color: black;

}

header h1{

color: white;
padding: 20px;

}

.sideContent{
width: 240px;
float: left;
padding: 1em;
background-color: orange;

}

.clearfix:before,
.clearfix:after{
content: " ";
display: block;

}

ul{
list-style: none;
padding: 0.5em;

}

.mainContent{
width: 1008px;
float: left;
padding: 1em;
background-color: yellow;
}

footer{

clear: both;
text-align: center;
background-color: black;
height: 30px;
color: white;
padding: 10px;
font-weight: 900;

}
`

ellapham85
@ellapham85
Feb 09 2017 18:34
Who help me
Sorin Ruse
@sorinr
Feb 09 2017 18:38
@Koderkid1936 can u put that code into a codepen and share the link of the pen?
Koderkid1936
@Koderkid1936
Feb 09 2017 18:39

`<DOCTYPE HTML>

<html>
<head>
<title>Tryit Editor v3.3</title>
<link rel="stylesheet" href="file.css">

    <style>
html,body{
height: 100%;
margin: 0 auto;

}

body{
/width: 1280px;/

}

header{

height: 88px;
text-align: center;
/*background-color: black;*/

}

header h1{

color: white;
padding: 20px;

}

.sideContent{
width: 240px;
float: left;
padding: 1em;
/background-color: orange;/

}

ul{
list-style: none;
padding: 0.5em;

}

.mainContent{
width: 1008px;
float: left;
padding: 1em;
background-color: yellow;
}

footer{

clear: both;
text-align: center;
background-color: black;
height: 30px;
color: white;
padding: 10px;
font-weight: 900;

}

    </style>

</head>
<body>
    <div id="header">
        <h1>City Gallery</h1>
    </div>

    <div class="sideContent clearfix">
        <ul>
            <li>London</li>
            <li>Paris</li>
            <li>Tokyo</li>
        </ul>

    </div>

    <div class="mainContent">
        <h1>London</h1>
        <p>London is the capital city of England. It is the most populous city in the 
        United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
        <p>Standing on the River Thames, London has been a major settlement for two 
        millennia, its history going back to its founding by the Romans, 
        who named it Londinium.</p>
    </div>

    <div id="footer">
        Copyright &copy; W3Schools.com
    </div>
</body>

</html>`

@sorinr I dont have code pen
Sorin Ruse
@sorinr
Feb 09 2017 18:41
@Koderkid1936 go http://codepen.io/ and register
@Koderkid1936 or put your code on jsfiddle or jsbin or whatever the same
Koderkid1936
@Koderkid1936
Feb 09 2017 18:43
@sorinr do I need an account for that ? for JSfiddle?
Sorin Ruse
@sorinr
Feb 09 2017 18:45
@Koderkid1936 i don't see whats the problem in having an account on one of these
Koderkid1936
@Koderkid1936
Feb 09 2017 18:47
Didn't say there was, I'm looking at them now I think I'll get codepen it looks better @sorinr
@sorinr heres: the link https://codepen.io/KodaKid/pen/EZdOZE
Sorin Ruse
@sorinr
Feb 09 2017 18:49
@Koderkid1936 the idea is that ether one its ok for sharing your code with us
Koderkid1936
@Koderkid1936
Feb 09 2017 18:49
@sorinr and the reason for giving the containers a background was to help me visualise
Sorin Ruse
@sorinr
Feb 09 2017 18:50
@Koderkid1936 that was a good idea. what is the problem?
Koderkid1936
@Koderkid1936
Feb 09 2017 18:52
@sorinr to see the problem it's best to look at it from a desktop perspective, you'll see that the sidecontent (in orange) does not reach the footer, I know why, I have'nt giving it a specific height and a container's default height is based on the content inside it, I understand that, BUT.... how would I make the orange container reach the footer without giving it a specific height... I know theres a way around it
"ClearFix hack" something along those lines ... I think
Christopher
@christopherwangemann
Feb 09 2017 19:05
Can someone please tell me why my text in the paragraph is going out of the div when the window is resized? Thanks! http://codepen.io/ChristpherWangemann/pen/vypraO/?editors=1100
Sorin Ruse
@sorinr
Feb 09 2017 19:06
@Koderkid1936 to make it full height you can just add min-height: 100vh; to the sideContent class
Koderkid1936
@Koderkid1936
Feb 09 2017 19:09
thanks but do you mind explaining the code aswell ' min-height: 100vh;' vh stands for viewport right ?
Sorin Ruse
@sorinr
Feb 09 2017 19:12
@Koderkid1936 yes u tell that you want for that element having the class sideContent a height equal to minimum to the vciewport height. so no matter the content height in the sidebar is the sidebar will take at least the full viewport height. hope it make sense
Koderkid1936
@Koderkid1936
Feb 09 2017 19:13
@sorinr :D THHHAAAAAAAAAAAAANK UYOU SO MUCH!!!!!!!!
@Koderkid1936 question woudld this
Sorin Ruse
@sorinr
Feb 09 2017 19:14
@Koderkid1936 welcome
Koderkid1936
@Koderkid1936
Feb 09 2017 19:20
@sorinr I was just given this solution what do you think ? https://codepen.io/KodaKid/pen/vgVQwO
@Koderkid1936 never heard of "box-sizing" mind sharing your opinion, you seem quiet knowledgeable, is that a better way to approach this problem ?
@sorinr
Jordan Meyer
@Jordanmeyer89
Feb 09 2017 19:24
I'm having some difficulties with tic-tac-toe. Do I need to have like 50 if then statements for every possible outcome of the game?
Sorin Ruse
@sorinr
Feb 09 2017 19:25
@Koderkid1936 in my opinion this min-height: calc(100vh - 88px - 30px); its not ok. what if i wanna change height: 88px; in the #header? the ideadea its not to make one element dependable of another based on fixed values
Baillie O'Grady
@baillieo
Feb 09 2017 19:25
@christopherwangemann the div inside the about section should have a class of row not container
Christopher
@christopherwangemann
Feb 09 2017 19:29
@baillieo aah ok thx!
CamperBot
@camperbot
Feb 09 2017 19:29
christopherwangemann sends brownie points to @baillieo :sparkles: :thumbsup: :sparkles:
:cookie: 273 | @baillieo |http://www.freecodecamp.com/baillieo
Christopher
@christopherwangemann
Feb 09 2017 19:29
@baillieo should the column definition go after that then?
Koderkid1936
@Koderkid1936
Feb 09 2017 19:30
@sorinr Excellent, I totally Understand, thanks for claryfing again
CamperBot
@camperbot
Feb 09 2017 19:30
koderkid1936 sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1165 | @sorinr |http://www.freecodecamp.com/sorinr
Baillie O'Grady
@baillieo
Feb 09 2017 19:31
@christopherwangemann yes within the row
Christopher
@christopherwangemann
Feb 09 2017 19:34
@baillieo wait but I already have a row and column defined just above that. I need to nest another one within that?
Sorin Ruse
@sorinr
Feb 09 2017 19:34
@Koderkid1936 :+1:
Gulsvi
@gulsvi
Feb 09 2017 19:44
@christopherwangemann You are nesting too much right now and you have a container outside your <body> tag.
Christopher
@christopherwangemann
Feb 09 2017 19:47
@SkyCoder01 the container is supposed to go within the body?
Gulsvi
@gulsvi
Feb 09 2017 19:47
I don't see any text oveflowing, just your image, because you have given it float: left. You also gave it img-responsive class, but assigned it a width a 200px which will be a conflict
@christopherwangemann All of your HTML code that affects the content goes inside the <body>
Only meta tags, <title>, etc.. go outside of <body>
Christopher
@christopherwangemann
Feb 09 2017 19:48
@SkyCoder01 Ah ok I thought for the whole page to be responsive it had to include the body tag also
@SkyCoder01 and yeah it doesn't make sense to make the image responsive and also a set size :p I changed that now
Gulsvi
@gulsvi
Feb 09 2017 19:49
Every HTML page needs a <body> tag, it doesn't make your page responsive - the way you use bootstrap can make it responsive or not responsive at all :)
Christopher
@christopherwangemann
Feb 09 2017 19:50
No I meant I thought the body tag had to be after the responsive tag
Gulsvi
@gulsvi
Feb 09 2017 19:51
Do you mean container-fluid?
Christopher
@christopherwangemann
Feb 09 2017 19:52
yup
Gulsvi
@gulsvi
Feb 09 2017 19:52
That class makes your page take up the full width of the screen. If you use container instead, it will give some space on each side of the page on larger screens.
Christopher
@christopherwangemann
Feb 09 2017 19:52
ok but that's a set width then right?
Gulsvi
@gulsvi
Feb 09 2017 19:52
There is no single tag or class name that will make your page responsive
Yes, a set width
was just explaining the difference - lots of people seem to think that the container-fluid class makes their website responsive, but it just controls how wide it can get
h1tag
@h1tag
Feb 09 2017 19:55
@SkyCoder01 so col-*-* classes is what makes the page responsive?
Gulsvi
@gulsvi
Feb 09 2017 19:56
Yes, the column class make your page layout change depending on the screen size - that's a responsive website. The layout responds to the screen size @fortMaximus
h1tag
@h1tag
Feb 09 2017 19:58
@SkyCoder01 ty. I thought that container-fluid is what makes the page responsive and col classes are just to define the size
CamperBot
@camperbot
Feb 09 2017 19:58
fortmaximus sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 154 | @skycoder01 |http://www.freecodecamp.com/skycoder01
h1tag
@h1tag
Feb 09 2017 19:58
but col-*-* don't work without container-fluid, right?
Gulsvi
@gulsvi
Feb 09 2017 19:58
container-fluid just lets your page always be 100% wide - even on super wide monitors that are like 4000px wide :)
col-*-* works in container too. You just have to do container, then a row, with columns inside the row
And can't have containers inside of other containers
Jaime
@jmasked
Feb 09 2017 20:00
Hello, so I finished my portfolio. Does anyone actually look it over at some point when you submit it?
Christopher
@christopherwangemann
Feb 09 2017 20:01
@SkyCoder01 so a regular container just sets the max width and on anything smaller it would behave the same as the container-fluid?
Gulsvi
@gulsvi
Feb 09 2017 20:01
@christopherwangemann yes
Christopher
@christopherwangemann
Feb 09 2017 20:01
aaahh
h1tag
@h1tag
Feb 09 2017 20:01
@SkyCoder so containter or container-fluid are requirements to make the page responsive using Bootstrap (because without them col-*-*and row won't work)?
Gulsvi
@gulsvi
Feb 09 2017 20:02
@fortMaximus Yes, that's one way to think of it :)
Christopher
@christopherwangemann
Feb 09 2017 20:02
@SkyCoder01 thx! I'm slowly starting to understand what's going on in bootstrap :p I find there's a steep learning curve after doing the little lessons on FCC and then building a portfolio page from scratch
CamperBot
@camperbot
Feb 09 2017 20:02
christopherwangemann sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 155 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Gulsvi
@gulsvi
Feb 09 2017 20:03
The container CSS code is very simple actually, just centers everything inside and gives some padding. I learned a lot of this from talking to @sorinr the other day :)
.container-fluid {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
That's all it does
container is the same, but uses a set width on different screen sizes
h1tag
@h1tag
Feb 09 2017 20:05
good to know! Thanks again :smile:
Christopher
@christopherwangemann
Feb 09 2017 20:05
@SkyCoder01 Ah thx!
CamperBot
@camperbot
Feb 09 2017 20:05
christopherwangemann sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:warning: christopherwangemann already gave skycoder01 points
Gulsvi
@gulsvi
Feb 09 2017 20:06
No problem :) I wish the javascript algorithms were like this
h1tag
@h1tag
Feb 09 2017 20:06
LOL
EZ
Christopher
@christopherwangemann
Feb 09 2017 20:06
@SkyCoder01 when you use container, it automatically uses the 4 different sizes that are predefined in the bootstrap documentation depending on the screen size or do you have to define those separately?
Gulsvi
@gulsvi
Feb 09 2017 20:07
@christopherwangemann It automatically uses them
Christopher
@christopherwangemann
Feb 09 2017 20:07
@SkyCoder01 ah ok cool
Chris
@ChrisWHurd
Feb 09 2017 20:07
Hi I am currently on the build tribute page task. I am struggling to find a way to get the approximately 1 inch white border around the entire page like he has in his example. any advice?
Christopher
@christopherwangemann
Feb 09 2017 20:09
@SkyCoder01 Can I ask one more thing? I put the picture and paragraph together and made the image float. Should I put each in separate columns?
@ChrisWHurd i just put a margin on the body when I did it
@ChrisWHurd in percentage tho to not have too much space when you're on a small device
Gulsvi
@gulsvi
Feb 09 2017 20:12

@christopherwangemann I think something like this would look good - I skipped the portfolio though

          <div id="about" class="row">
            <div class="col-xs-4">
              <img src="path to your picture" class="img-responsive center-block" />
            </div>
            <div class="col-xs-8">
              <p>about text</p>
            </div>
          </div>

That will make the picture take up about 25% of the width and the text the other 75%. You can adjust the 4 and the 8 for the columns as needed.

Chris
@ChrisWHurd
Feb 09 2017 20:12
Ok Thanks
Gulsvi
@gulsvi
Feb 09 2017 20:12
Think I'll do the portfolio after I finish all the other front-end projects so I can add them all in at once
Christopher
@christopherwangemann
Feb 09 2017 20:18
@SkyCoder01 ah ok thx I'll try that
CamperBot
@camperbot
Feb 09 2017 20:18
christopherwangemann sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:warning: christopherwangemann already gave skycoder01 points
Christopher
@christopherwangemann
Feb 09 2017 20:19
@SkyCoder01 I guess I don't need the float then right?
Gulsvi
@gulsvi
Feb 09 2017 20:20
@christopherwangemann Right, if you put it in it's own column, bootstrap will float it for you
Christopher
@christopherwangemann
Feb 09 2017 20:23
@SkyCoder01 ok cool! Thanks so much for your help! I appreciate it!
CamperBot
@camperbot
Feb 09 2017 20:23
christopherwangemann sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:warning: christopherwangemann already gave skycoder01 points
Gulsvi
@gulsvi
Feb 09 2017 20:23
No problem!
herk713
@herk713
Feb 09 2017 20:26

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

var myVar = 87;

// Only change code below this line
myVar = myVar + 1;

Need Help

Ken Haduch
@khaduch
Feb 09 2017 20:33
@herk713 - did you see the examples of where they used ++? You are just supposed to change the linemyVar = myVar + 1; to use the ++ operator instead of adding one by using the variable on both sides of the =
herk713
@herk713
Feb 09 2017 20:39
@khaduch i still dont understand though?
Ken Haduch
@khaduch
Feb 09 2017 20:42
@herk713 - okay -looking at the example - they tell you that i++; is the equivalent of i = i + 1;. The initial code that they give you in the editor is: var myVar = 87;, which is initializing that variable to a value of 87. and the tests want you to change the linemyVar = myVar + 1;, to something using the ++ operator, which will result in the value of 88 for the value of myVar. So - just like i = i + 1; is the same as i++; myVar = myVar + 1; can be written using the ++ operator...
Spyrantis Theodoros
@thodorisanta
Feb 09 2017 21:07

im curently working on the calculator project. And im about to start with the javascript part.And i have no idea where to start.. :/

https://codepen.io/oshikurou/pen/WRyJwm?editors=0010

Tom
@moT01
Feb 09 2017 21:12
@thodorisanta maybe start by getting all the buttons to just log their value on a click
Sam Griffen
@ssgriffen
Feb 09 2017 21:12
I'm trying to return an array of all occurences of parenthesis in a string, i'm using /[()]/g to do this...what method should I call to get back the array right now I'm using RegExp.prototype.exec but its only returning one "(" in the string "(12345)678(912"... any thoughts?
Faddah Wolf
@faddah
Feb 09 2017 21:13
Hello, I need help with JavaScript/jQuery on my second FCC Portfolio project, with touch screens. my jQuery code works great for my Nav buttons with a mouse click or touchpad on a desktop or laptop. but on mobile screens — iPad, iPhone, Android or Windows tablets or phones — the top three .navbar buttons, .about-btn, .portfolio-btn, and .contact-btn do not work, but the three .top-btn’s lower down on the page do, but they don’t run the jQuery .animate() function. any hel with this, please? here is the codepen — http://codepen.io/faddah/pen/egVyrM .
Tom
@moT01
Feb 09 2017 21:14
so what is your result supposed to look like @ssgriffen
for your example
Sam Griffen
@ssgriffen
Feb 09 2017 21:15
it should look like this [ "(" , ")" , "(" ] @moT01
or ["()("] @moT01
@moT01 actually I may have a better idea for this nvm
Tom
@moT01
Feb 09 2017 21:16
glad i could help
Sam Griffen
@ssgriffen
Feb 09 2017 21:17
@moT01 lol
Tyler Moeller
@TylerMoeller
Feb 09 2017 21:22
@faddah Not sure if ES6 features like const and arrow functions are supported in the mobile browser you're using, but one thing you can do to help with compatibility is to use babel as your preprocessor - looks like you have Typescript enabled now.
Also, you can attach the same code to multiple selectors by separating them with a comma:
$('.about-btn, .portfolio-btn, .contact-btn').click(function(e)
or just give all those elements the same class name like animated-scroll to avoid code duplication
Faddah Wolf
@faddah
Feb 09 2017 21:24
@TylerMoeller ok, thank you for the DRY suggestion. and i’ll check out using Babel, but I thought Typescript is fine with ES6 coding?
CamperBot
@camperbot
Feb 09 2017 21:24
faddah sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1478 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Feb 09 2017 21:27
I think they're both similar @faddah but I know for sure that babel does a good job. Maybe a mac vs pc philosophy in the end - I've just stuck with what works for me :)
Faddah Wolf
@faddah
Feb 09 2017 21:35
@TylerMoeller btw, i can’t quite do your DRY suggestion yet, as i need to have the class button clicked (example: .about-btn) grab the corresponding id of the section to which it is scrolling (example:#about). in any case, i switched it to babel for the JavaScript pre-processor, saved the pen, refreshed the screen. still not working on touch screens.
@TylerMoeller also, the funny thing is: the functions seemed to be being accessed, as my callback console.log() statement shows up down in the JavaScript console, but the animation never works, and the top buttons do not scroll, no matter what.
Tyler Moeller
@TylerMoeller
Feb 09 2017 21:44
@faddah I'll fork it and see if I can play around with it on my mobile. Will let you know if I come up with anything
Faddah Wolf
@faddah
Feb 09 2017 21:44
@TylerMoeller much appreciate, thank you!
CamperBot
@camperbot
Feb 09 2017 21:44
faddah sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: faddah already gave tylermoeller points
mono
@monoblack21
Feb 09 2017 21:47
hello, how do i make a button that can stop a function already running
Tyler Moeller
@TylerMoeller
Feb 09 2017 21:47
@faddah I think this is a codepen iframe issue - try it in debug view on your mobile device
Doesn't work for me in "full" view, but works in "debug"
Ahmed Osman
@Noby707
Feb 09 2017 21:47
Hi, I can not insert images for some reason in codepen. Need help please. <a href="#"><img alt="Sharingan" src="https://s-media-cache-ak0.pinimg.com/236x/52/74/0f/52740f7a75720a4576d1bd0613e3a3a1.jpg"></a>
The same code works well when I run it in one of the free code camp challenges
<a href="#"><img class="smaller-image thick-green-border" alt="A cute orange cat lying on its back. " src="https://s-media-cache-ak0.pinimg.com/236x/52/74/0f/52740f7a75720a4576d1bd0613e3a3a1.jpg"></a>
Tyler Moeller
@TylerMoeller
Feb 09 2017 21:50
@Noby707 Can you link to your codepen?
Osania
@san00
Feb 09 2017 21:50
Hi all, currently doing the twitch project and need a little help please. I'm unable to get any info from the api. code below.
function streaming(){
  var users = ["freecodecamp","OgamingSC2", "cretetion", " ESL_SC2", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];

  for(var i=0; i<users.length; i++){
    var apiResult = "https://wind-bow.gomix.me/twitch-api/channels" + users;
  }
$.ajax({
url:apiResult,
type:"GET",
dataType:"jsonp",
success:function(info){
  console.log(info);
  }
})
}
Tyler Moeller
@TylerMoeller
Feb 09 2017 21:53
@Noby707 Codepen doesn't like the </tilte> tag, change it to </title> (line 10):
<title><!--Web Page Title --></title>
Ahmed Osman
@Noby707
Feb 09 2017 21:54
Thank you @TylerMoeller
CamperBot
@camperbot
Feb 09 2017 21:54
noby707 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1479 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Ahmed Osman
@Noby707
Feb 09 2017 21:54
It worked ^_^
Brandon
@bd1887
Feb 09 2017 21:54
@san00 Do you have a Twitch API key?
Or is that url a workaround?
Osania
@san00
Feb 09 2017 21:55
hiya @bd1887, It's the workaround as given on Fcc
Faddah Wolf
@faddah
Feb 09 2017 21:55
@TylerMoeller yeah, i see that. so is there anything to do to fix that?
@TylerMoeller maybe: .preventDefault()?
Tyler Moeller
@TylerMoeller
Feb 09 2017 21:56
@faddah you could maybe detect if /full/ is in the url with window.location and prompt an error to the user, but some of my pens don't scroll down either in full mode. I haven't taken the time to see why since I just host them all on github when they're done anyway.
Osania
@san00
Feb 09 2017 21:57
@bd1887 it says I don't need a key?
Faddah Wolf
@faddah
Feb 09 2017 21:59
@TylerMoeller yeah, maybe something i report to codepen.io support?? i also need to re-do my GitHub to be GitHub.io and host projects there also. but i find their docs to do that quite — uh, cumbersome. like never explain directly what i want to work on or fix.
Tyler Moeller
@TylerMoeller
Feb 09 2017 22:00
I'm sure they'll tell you to pay for debug views that never expire :)
Faddah Wolf
@faddah
Feb 09 2017 22:01
@TylerMoeller but why should my users have to know to change it to “debug” view to make it work correctly? it should work just fine in any view.
Tyler Moeller
@TylerMoeller
Feb 09 2017 22:02
@faddah Because codepen is meant for staging, not as a hosting environment I believe. If you want to use it for hosting, you have to pay. Github pages are fairly easy once you get your first one going. It's just a matter of getting the directory structure right, and then setting up a gh-pages branch - and it's 100% free :)
Brandon
@bd1887
Feb 09 2017 22:02

@san00 In your for loop, you aren't iterating through the users array. Code should be:

for(var i=0; i<users.length; i++){
    var apiResult = "https://wind-bow.gomix.me/twitch-api/channels" + users[i];
  }

But also that variable only exists inside that function

Faddah Wolf
@faddah
Feb 09 2017 22:02
@TylerMoeller - also, now the contact button at the top is not working and its code is the same as the other buttons, and i have no idea why.
Brandon
@bd1887
Feb 09 2017 22:02
@san00 Can you post the codepen link?
Tyler Moeller
@TylerMoeller
Feb 09 2017 22:03
I think I saw you add a 'touch' event to that button?
@faddah maybe it should be touchstart? or just let the browser do the click -> touch conversion
That's the only difference I see there
Faddah Wolf
@faddah
Feb 09 2017 22:05
@TylerMoeller that’s only on the .about-btnwhich i am testing, did nothing on .contact-btn?
Tyler Moeller
@TylerMoeller
Feb 09 2017 22:06
oh sorry - multitasking, I'll take a closer look
Osania
@san00
Feb 09 2017 22:09
@bd1887, just pm'ed you
Tyler Moeller
@TylerMoeller
Feb 09 2017 22:09

@faddah

  $('.contact-btn').click(function(e) {
    conole.log('contact button clicked!');
    const contact = $('#contact').position().top;
    console.log(contact);
    $('html, body').animate(
      {
        scrollTop: portfolio
      }, 600, 'easeOutCirc', () => {console.log('livin\' it up while i\'m goin\' down!');});
  }, false);

Remove the false at the end and change scrollTop: portfolio to scrollTop: contact

Faddah Wolf
@faddah
Feb 09 2017 22:09
@TylerMoeller yeah, just saw that, typos abound. thank you!
CamperBot
@camperbot
Feb 09 2017 22:09
faddah sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: faddah already gave tylermoeller points
Faddah Wolf
@faddah
Feb 09 2017 22:10
@TylerMoeller i also don’t understand why my callback console.log() gets called twice each time in the console.
Tyler Moeller
@TylerMoeller
Feb 09 2017 22:12
@faddah I think it's logging once for html and once for body since you are selecting both of those
Tony
@FreakishLancer
Feb 09 2017 22:18

So I have to be honest and admit I've spent almost the whole day on this...how do I even get the Simon sequence to

  1. Stop before ending a note being played so that it doesn't blend into the next one if the next one is the same pitch?
  2. Stop after playing a number sequence to allow the player to input the appropriate sequence?

http://codepen.io/Freaklancer/pen/BpOEvO

Tyler Moeller
@TylerMoeller
Feb 09 2017 22:21
@faddah Also, for a cleaner solution, change your <button>s to <a></a> in your navbar and use this instead:
$('document').ready(function() {
  $('.navbar-buttons>a.btn.btn-success').on('click', (e) => {
    $('html, body').stop().animate({
      scrollTop: $($(e.currentTarget).attr('href')).offset().top
    }, 600, 'easeOutCirc');
  }); 
});
<div class="btn-group navbar-buttons">
  <a href="#about" class="btn btn-success about-btn">About <span class="glyphicon glyphicon-arrow-down"></span></a>
  <a href="#portfolio" class="btn btn-success portfolio-btn">Portfolio <span class="glyphicon glyphicon-arrow-down"></span></a>
  <a href="#contact" class="btn btn-success contact-btn">Contact <span class="glyphicon glyphicon-arrow-down"></span></a>
</div>
Faddah Wolf
@faddah
Feb 09 2017 22:25
@TylerMoeller should i set it just for ’body’?
Tyler Moeller
@TylerMoeller
Feb 09 2017 22:26
@faddah I think html, body is needed for browser compatibility - doesn't hurt to have them both
Faddah Wolf
@faddah
Feb 09 2017 22:30
@TylerMoeller ok, i’ll put ‘em back.
@TylerMoeller also sent a support e-mail to codepen.io
Johnny
@jtan3
Feb 09 2017 22:41
https://codepen.io/jtan3/pen/zNmybx can someone tell me why everyone is offline?
Faddah Wolf
@faddah
Feb 09 2017 22:51
@jtan3 if you’re using Chrome browser & Chrome Dev Tools, do a console.table(data); on your data object to make sure that data.stream is, indeed, the key/value you want to determine if someone is online/offline.
Osania
@san00
Feb 09 2017 23:02
A big thank you to @bd1887, appreciate your help :thumbsup:
CamperBot
@camperbot
Feb 09 2017 23:02
san00 sends brownie points to @bd1887 :sparkles: :thumbsup: :sparkles:
:cookie: 332 | @bd1887 |http://www.freecodecamp.com/bd1887
Bennett Huffman
@bhuffy
Feb 09 2017 23:02
Hello! Does anyone know why there might be white space at the bottom (or top?) of each div element/section of a website? I can’t find out any info on it online so far. :(
Ahmed Osman
@Noby707
Feb 09 2017 23:03
Hi, need help making a hyperlink text, not looking like one.
Bennett Huffman
@bhuffy
Feb 09 2017 23:04
@Noby707 put target=“_blank” in your <a> element.
Ahmed Osman
@Noby707
Feb 09 2017 23:04
nvm Just found it
thank you @bhuffy
CamperBot
@camperbot
Feb 09 2017 23:04
:cookie: 120 | @bhuffy |http://www.freecodecamp.com/bhuffy
noby707 sends brownie points to @bhuffy :sparkles: :thumbsup: :sparkles:
Johnny
@jtan3
Feb 09 2017 23:07
@faddah data.stream should be the key value to determine on/off.
Ahmed Osman
@Noby707
Feb 09 2017 23:09
guys should I add more to the tribute page or move on.
Johnny
@jtan3
Feb 09 2017 23:10
there's white space when you go fullscreen @Noby707
Ahmed Osman
@Noby707
Feb 09 2017 23:11
It does not show on myy make
my mac*
I will try to make it automatic view to all
jampcat9
@jampcat9
Feb 09 2017 23:13
to style a section in css, do you put .section { ?
Johnny
@jtan3
Feb 09 2017 23:15
if you gave it a class it's with a dot
jampcat9
@jampcat9
Feb 09 2017 23:15
so otherwise, no dot
Johnny
@jtan3
Feb 09 2017 23:15
yeah
jampcat9
@jampcat9
Feb 09 2017 23:17
well if anyone can help, my background color is only applied to one part of my section class="about". no clue why
http://codepen.io/jampcat9/pen/vgVYQN
Johnny
@jtan3
Feb 09 2017 23:19
the background only works on the h1 in the about section
Ahmed Osman
@Noby707
Feb 09 2017 23:19
try this[ background-image: url("") ] but put the image directly in css in a the head
Brandon
@bd1887
Feb 09 2017 23:21
@bhuffy I think it's a bootstrap thing? There's default padding and margins that are hard to get rid of. I don't know if this is the best fix, but changing the margin-bottom to -40px fixes it I think
Johnny
@jtan3
Feb 09 2017 23:22
@jampcat9 you want the likes and dislikes section to have a background color too?
Manuel Almeida
@netstudenton
Feb 09 2017 23:23
How do I pause execution during a specified amount of time keeping all execution stuckd until the pause finishes ?
I was trying to use window.setTimeout() but the execution keep going while the function inside setTimeout is stucked
jampcat9
@jampcat9
Feb 09 2017 23:23
the whole section to have that background color, like the one above. I applied it the same as I did above
It was div class="about", but I thought it was getting divs confused. So I changed it to section class="about", still didn't help
Johnny
@jtan3
Feb 09 2017 23:24
look at your closing div class="about" tag
it closed in your like section
Ahmed Osman
@Noby707
Feb 09 2017 23:26
https://codepen.io/Noby707/pen/egPaMz, any final critiques on my short tribute page
Bennett Huffman
@bhuffy
Feb 09 2017 23:26
@bd1887 Thanks! It worked! That’s super interesting. A -40px margin-bottom fixed it.
CamperBot
@camperbot
Feb 09 2017 23:26
:cookie: 333 | @bd1887 |http://www.freecodecamp.com/bd1887
bhuffy sends brownie points to @bd1887 :sparkles: :thumbsup: :sparkles:
NathanMcSparran
@NathanMcSparran
Feb 09 2017 23:31
Ahmed, your Itachi link doesn't work. It gives a 404 error code when I click it.
You need to change your anchor tag, right now it says <a href="Itachi" class=“blank” src="https://en.wikipedia.org/wiki/Itachi_Uchiha" target="_blank">Itachi</a> but it should be: <a href="https://en.wikipedia.org/wiki/Itachi_Uchiha" class=“blank” target="_self">Itachi</a>
eswhy
@eswhy
Feb 09 2017 23:35
hello so i am currently trying to build a nav bar for my profile page and whenver I create a button inside the navbar it causes other H1 elements to become to links as well basically makes my whole page a button....has anyone seen this before? here is the link to the code pen
Ken Haduch
@khaduch
Feb 09 2017 23:41
@eswhy - it doesn't look like you have a navbar in that project that you posted? Have you added it? Maybe you need to save it? My recommendation is to get the bootstrap navbar example from their site and alter it according to what you need.
NathanMcSparran
@NathanMcSparran
Feb 09 2017 23:41
@eswhy i'm not sure which navbar you're talking about because it's not on the current pen, but make sure you're closing your button tag with </button>. Not closing off something is what I've found to be the cause of that.
eswhy
@eswhy
Feb 09 2017 23:42
sorry so the way i was going about creating the nav bar was putting button elements inside of a container-fluid div...should i be using the nav elements?
Drbathound
@Drbathound
Feb 09 2017 23:42
i'm having trouble getting the image to show up on this
Ken Haduch
@khaduch
Feb 09 2017 23:44
@Drbathound - you have src= misspelled as scr=, and it looks like you are doing a google search? I don't know if that will work. You should get the image, and get the URL for it - probably a jpeg or something? Open the image that you want in a browser and copy / paste the URL from that into your code.
Drbathound
@Drbathound
Feb 09 2017 23:45
@khaduch ok thx
CamperBot
@camperbot
Feb 09 2017 23:45
drbathound sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2449 | @khaduch |http://www.freecodecamp.com/khaduch
NathanMcSparran
@NathanMcSparran
Feb 09 2017 23:45
@Drbathound the link you added for the image isn't complete. it wasn't copied all the way so the image isn't showing up. also your src attritube is mispelled
Drbathound
@Drbathound
Feb 09 2017 23:45
@NathanMcSparran thx
CamperBot
@camperbot
Feb 09 2017 23:45
drbathound sends brownie points to @nathanmcsparran :sparkles: :thumbsup: :sparkles:
:cookie: 263 | @nathanmcsparran |http://www.freecodecamp.com/nathanmcsparran
Drbathound
@Drbathound
Feb 09 2017 23:46
ok
anapandey
@anapandey
Feb 09 2017 23:46
Hi , I am working on show the local weather project and so far I have written the following code. Could anyone please tell me if I am doing something wrong. It shows the weather data in console when i click the button.
$(document).ready(function(){
$('#button').click(function(){
$.getJSON('apiurl',function(data){
$('#weatherDiv').append("<p>" + data.weather + "</p>");
});
});
});
Ken Haduch
@khaduch
Feb 09 2017 23:48
@Drbathound - just as a test, I did your google search and picked an image - this is the update img element that does show an image, you might want to select a different one.
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/ba/Henry_David_Thoreau.jpg/150px-Henry_David_Thoreau.jpg" class="img-responsive" alt="portrait of thoreau">
<p class="text-center">
Drbathound
@Drbathound
Feb 09 2017 23:55
@khaduch thx
CamperBot
@camperbot
Feb 09 2017 23:55
drbathound sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:warning: drbathound already gave khaduch points
eswhy
@eswhy
Feb 09 2017 23:58
hello can someone help me figure out why my "about" button isnt working? https://codepen.io/eswhy/pen/mRxPpR