These are chat archives for FreeCodeCamp/HelpFrontEnd

4th
Aug 2016
Irina
@2Irina2
Aug 04 2016 00:00
@marhyorh @wearenotgroot okay i think i am getting close.. please check what i did so far
I did this just to check if the values change on the webpage.. the "city" changes to Constanta but the "temperature" does not
greg
@wearenotgroot
Aug 04 2016 00:01

@2Irina2 url can be --------->

'http://api.openweathermap.org/data/2.5/weather?lat='+ data.loc.split(',')[0]+'&lon='+data.loc.split(',')[1]+'&APPID=433e5ac19c344d585ded5fba77c92ded&callback=?'

remember variable(data from the previous getJSON) concatenate with the apiURL

Irina
@2Irina2
Aug 04 2016 00:03
Oh okay now the temperature shows.. it was just a typo..
but there is still something not clear to me about the API Key
why does one need my API key to show the weather in some other place on earth?
why do i need to include it in the url?
greg
@wearenotgroot
Aug 04 2016 00:03
@2Irina2 the api key is just to identify who sent the request(mainly to stop people from abusing it, also premium api key can use https(more secure connection))
Ademola Adegbuyi
@ooade
Aug 04 2016 00:04
This message was deleted
Irina
@2Irina2
Aug 04 2016 00:05
@wearenotgroot @marhyorh alright guys thank you so much for your help and patience.. i feel like i learnt a lot about this
CamperBot
@camperbot
Aug 04 2016 00:05
2irina2 sends brownie points to @wearenotgroot and @marhyorh :sparkles: :thumbsup: :sparkles:
:star2: 1266 | @wearenotgroot |http://www.freecodecamp.com/wearenotgroot
:warning: 2irina2 already gave marhyorh points
Ademola Adegbuyi
@ooade
Aug 04 2016 00:05
YWC :smile:
greg
@wearenotgroot
Aug 04 2016 00:06
@2Irina2 :+1: another thing api doc: http://openweathermap.org/current scroll down to the end and read about Units format, if you dont want (Standard units(temp in kelvin))
Henrique Salguero
@kikosalguero
Aug 04 2016 00:08
Everytime i refresh de page i get a different result in the Status (Online/Offline) of the channel. Anyone have an idea why is that happening? http://codepen.io/kikosalguero/pen/bZxJRa
Vlad Fernandes
@Vlad-Fernandes
Aug 04 2016 00:09
How do people get banned?
is it the language?
greg
@wearenotgroot
Aug 04 2016 00:10
@vieira83 if they are being a general a male repoductive organ(being a D**K)
Vlad Fernandes
@Vlad-Fernandes
Aug 04 2016 00:11
@wearenotgroot ???
didn’t understand
what you said
greg
@wearenotgroot
Aug 04 2016 00:13
@vieira83 people get ban if they repeatedly use insults and harassing other community member
@vieira83 they will get a few warning before it happens
also if they keep spamming the chat they get a time out
Vlad Fernandes
@Vlad-Fernandes
Aug 04 2016 00:14
ok
Juan Moraza
@Morazajuan
Aug 04 2016 00:15
lol he meant being a jerk @wearenotgroot
@wearenotgroot do you think you could take a look at my code. Im having trouble with the toggle method
Tyler Moeller
@TylerMoeller
Aug 04 2016 00:17
@kikosalguero You're getting the data back as it is returned from the API, so it won't always return in the same order as the users listed in your array.
greg
@wearenotgroot
Aug 04 2016 00:17
@Morazajuan sure link your pen or fiddle
here
this is what i have in mind for my toggle method
 $(window).load(function(){
    $('.tempf').hide();
});
$('.tempf,.tempc').click(function(){
    $('.tempf,.tempc').toggle();
});
greg
@wearenotgroot
Aug 04 2016 00:27
@Morazajuan how about adding an id to the temp button then toggle the class instead
Chris Wang
@sound2gd
Aug 04 2016 00:30
guys,when i set header element a css style of background-color,it doesn't seem to work ,this drives me crazy,can someone help me?thanks a lot;
``` bash

banner {

background-color: #722872 !important;
height: 80px;
border-color: #592059;
}
#banner {
    background-color: #722872 !important;
    height: 80px;
    border-color: #592059;
}
did someone have the same problem as me ?
Gary Siu
@GarySiu
Aug 04 2016 00:32
css looks ok. What’s the html like?
Juan Moraza
@Morazajuan
Aug 04 2016 00:33
@wearenotgroot Ok im gonna do that thank
CamperBot
@camperbot
Aug 04 2016 00:33
morazajuan sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
:star2: 1267 | @wearenotgroot |http://www.freecodecamp.com/wearenotgroot
greg
@wearenotgroot
Aug 04 2016 00:34
@Morazajuan you can also add a callback function to the toggle method if you want to do some animation on the button or if you want something simple just an if statement and addClass/removeClass
Beth Qiang
@bethqiang
Aug 04 2016 01:47

anyone know why when you click the "online" button and then the "all" button on my twitch viewer, the "offline" shows up for a split second before the "online" section does? ideally, i'd like a smooth transition without the offline users coming up briefly before the online...

http://codepen.io/bethqiang/pen/xOzJGr

Chris Rutherford
@cjrutherford
Aug 04 2016 01:59
can I ask for an opinion on the design of a project I'm working on outside FCC?
Ken Haduch
@khaduch
Aug 04 2016 02:31

@bethqiang - I don't know if this would help, I was experimenting with your project but had to reload and lost my changes. Any time your use a jQuery selector like $('#online'), it will search the DOM to find the element or elements that it corresponds to. I don't know enough detail about how jquery works to know if it does multi-threading, searching for both of those at the same time and perhaps sometime returning the "offline" first? I tried making a class "allUsers" and using that selector.

The other thing I was trying, when I had to reload and lost it, was to cache the results of the jquery selector and the use that - var allUsers = $("#online #offline"); I think would cache the results, not sure about the order, though? I'll try it and see, perhaps fork it so I can save it in case I need to reload.

Beth Qiang
@bethqiang
Aug 04 2016 02:40
@khaduch if you do try it, let me know! i do actually have a container that contains all 3 of them ("streamers") but i've run into issues with trying to batch fadein/hide that--streamers is just the container that contains the online, offline, and closed containers, and so when you press "offline" then "all" it'll still only return the offline ones because the jquery isn't going through to get the info for the online ones when you press "all". does that make sense?
@khaduch it appears, though, if you wait a long enough time (not sure if there's a set time or not?), it'll fade in normally without the offline interfering with the online
does that mean that it's attached to the fadein? hm. (thinking out loud at this point.)
Ken Haduch
@khaduch
Aug 04 2016 02:50
@bethqiang - just looking through jQuery documentation, and it appears to be the case that the ordering of elements is determined by their order in the DOM, so I'm trying to understand some possible solutions that they are hinting at...
Mariya
@mariyadiminsky
Aug 04 2016 02:53
Has anyone does testing with react-enzyme-mocha? I'm noticing when I'm using expect(wrapper.find('SomeComponent').length).toEqual(1) I get 0 only if the component is being returned inside of brackets {}.
You know how when you're rendering an array and you loop through in the return() but to use JavaScript in React you need to use {}? I'm returning a component inside of each iteration, but my test can't find it. Is there a reason for this and how can I find it?
pipzpadilla
@pipzpadilla
Aug 04 2016 03:19
blob
how i can make this kind of header navbar
with the brandname is at the center of the page
William Cross
@williamtech814
Aug 04 2016 03:20
I'm trying to do lesson "Style Text Inputs as Form Controls" and I'm not sure what it means by "Give the text input in your form the class form-control." Advice anyone?
greg
@wearenotgroot
Aug 04 2016 03:21

@williamtech814 form-control is a bootstrap class

<input class="form-control" type="text" />

William Cross
@williamtech814
Aug 04 2016 03:22
That worked, thanks!! Love the community here.
greg
@wearenotgroot
Aug 04 2016 03:22
:+1:
Juan Moraza
@Morazajuan
Aug 04 2016 03:29
@wearenotgroot you still there?
Chris Cullen
@123xylem
Aug 04 2016 03:37
function makeFriendlyDates(arr) {
  var arr0 =arr.pop();
 arr0= arr0.split(/-/);
  for(i=0;i<arr0.length;i++){
 switch (arr0[1]) {
    case 01:
        arr0[1] = "Janurary";
        break;
    case 02:
        arr0[1] = "February";
        break;
    case 03:
        arr0[1] = "March";
        break;

}}

  return arr0;
}
  makeFriendlyDates(['2016-01-01', '2016-02-04']);
Hello FIrends Im back!.. In this problem Ive seperated the date format and am gonna try using switch statements to convert the numbers to words.. It says "Octal literals are not allowed in strict mode." When i do this though... Is this workable or have I made a mistake somewhere??
thanks
Ken Haduch
@khaduch
Aug 04 2016 03:48
@bethqiang - I cannot get anything that works up to this point - and I have to check out for tonight... Maybe you'll figure it out, maybe I'll try to look into it more tomorrow?
William Cross
@williamtech814
Aug 04 2016 03:51
thanks @wearenotgroot
CamperBot
@camperbot
Aug 04 2016 03:51
williamtech814 sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
:star2: 1274 | @wearenotgroot |http://www.freecodecamp.com/wearenotgroot
Nick Irvine
@irvin3
Aug 04 2016 03:51
hey peeps! does anyone have a good method for vertically centering a button in bootstrap?
Beth Qiang
@bethqiang
Aug 04 2016 04:02
@khaduch Haha no worries! No pressure to figure it out :) (although I would not complain if you wanted to keep trying! ;)) I'll definitely keep trying though and let you know if I come up with anything!
Chandice
@Cookcha
Aug 04 2016 04:10
@irvin3 How are you trying to center it? Maybe this will help? http://stackoverflow.com/questions/9853815/how-to-center-btn-group-from-twitter-bootstrap
Sorin Ruse
@sorinr
Aug 04 2016 04:15
@ajayt365 its because your h1 tag that has a margin-top. if you make h1{margin-top: 0px;} it will remove that margin
Vlad Fernandes
@Vlad-Fernandes
Aug 04 2016 04:18
@irvin3 have you tried vertical-align
ertical-align: middle
vertical-align: middle
Chris Cullen
@123xylem
Aug 04 2016 04:29
function makeFriendlyDates(arr) {
  var arr0 =arr.shift();//create first date
 arr0= arr0.split(/-/);
  for(i=0;i<arr0.length;i++){
 switch (arr0[1]) {
    case "01":
        arr0[1] = "Janurary";
        break;
    case "02":
        arr0[1] = "February";
        break;
    case "03":
        arr0[1] = "March";
        break;
    case "04":
       arr0[1] = "April";
        break;
    case "05":
        arr0[1] = "May";
        break;
    case "06":
        arr0[1] = "June";
        break;
    case "07":
       arr0[1] = "July";
     break;
   case "08":
     arr0[1] ="August";
     break;

   case "09":
     arr0[1] ="September";
     break;

   case "10":
     arr0[1] ="October";
     break;

   case "11":
     arr0[1] ="November";
     break;

   case "12":
     arr0[1] ="December";
     break;


}switch (arr0[2]) {
      case "01":
      case "21":
      case "31":
         arr0[2] =arr0[2]+ 'st';
    break;
      case "02":
      case "22":
         arr0[2] =arr0[2]+'nd';
    break;
      case "03":
      case "23":
         arr0[2] =arr0[2]+ 'rd';
    break;
      default:
         arr0[2] =arr0[2]+ 'th';
    break;
    }
  }

  return arr0;
}
  makeFriendlyDates(['2016-07-12', '2016-07-04']);
This coe is returning 12thththth for some reason.. I have a feeling its to do with the for loop running 3 times but Im not sure.. Any ideas?
Chris Cullen
@123xylem
Aug 04 2016 04:47
function makeFriendlyDates(arr) {
  var arr0 =arr.shift();//create first date
 arr0= arr0.split(/-/);

  var arr1=arr.pop();//second date
  arr1=arr1.split(/-/);

  for(i=0;i<arr0.length;i++){ // Loop through Dates
 switch (arr0[1]) { //For each case convert them to months
    case "01":
        arr0[1] = "Janurary";
        break;
    case "02":
        arr0[1] = "February";
        break;
    case "03":
        arr0[1] = "March";
        break;
    case "04":
       arr0[1] = "April";
        break;
    case "05":
        arr0[1] = "May";
        break;
    case "06":
        arr0[1] = "June";
        break;
    case "07":
       arr0[1] = "July";
     break;
   case "08":
     arr0[1] ="August";
     break;

   case "09":
     arr0[1] ="September";
     break;

   case "10":
     arr0[1] ="October";
     break;

   case "11":
     arr0[1] ="November";
     break;

   case "12":
     arr0[1] ="December";
     break;


}switch (arr0[2]) { //Then for each day date convert to days
      case "01":
      case "21":
      case "31":
         arr0[2] =parseInt(arr0[2])+ 'st';
    break;
      case "02":
      case "22":
         arr0[2] =parseInt(arr0[2])+'nd';
    break;
      case "03":
      case "23":
         arr0[2] =parseInt(arr0[2])+ 'rd';
    break;
      default:                                 //With this default that adds "th"
         arr0[2] =parseInt(arr0[2])+ 'th';
    break;
    }            // FIRST DATES


    //Here starts THE SECOND DATEs Conversion------------------------------------------------------    

 switch (arr1[2]) {
    case "01":
        arr1[2] = "Janurary";
        break;
    case "02":
        arr1[2]= "February";
        break;
    case "03":
        arr1[2] = "March";
        break;
    case "04":
       arr1[2] = "April";
        break;
    case "05":
       arr1[2] = "May";
        break;
    case "06":
       arr1[2] = "June";
        break;
    case "07":
       arr1[2] = "July";
     break;
   case "08":
     arr1[2] ="August";
     break;

   case "09":
    arr1[2] ="September";
     break;

   case "10":
     arr1[2] ="October";
     break;

   case "11":
arr1[2] ="November";
     break;

   case "12":
     arr1[2] ="December";
     break;


}switch (arr1[2]) {
      case "01":
      case "21":
      case "31":
         arr1[2] =parseInt(arr1[2])+ 'st';
    break;
      case "02":
      case "22":
         arr1[2] =parseInt(arr1[2])+'nd';
    break;
      case "03":
      case "23":
         arr1[2] =parseInt(arr1[2])+ 'rd';
    break;
      default:
         arr1[2] =parseInt(arr1[2])+ 'th';
    break;
    }
  }

  return arr0 +" "+ arr1;
}
  makeFriendlyDates(['2016-07-12', '2016-07-02']);
Ok so Ive managed to get the dates converted but for some reason the second date tries becomes NaNth if its under 15.. I dont get it as both dates are coded the same
sorry I collapsed that when I copy pasted it
This message was deleted
Nick Irvine
@irvin3
Aug 04 2016 05:10
Does anyone know how to remove what seems like a default margin on bootstrap buttons? I want my buttons to be touching, maybe I need to put them in a column but i feel like you should have to do that
@123xylem you should post that in the helpjavascript chat
Olga C
@Octopinky
Aug 04 2016 05:16
@irvin3 do you have your codepen link?
Nick Irvine
@irvin3
Aug 04 2016 05:19
im still messing around with getting the formatting correct
@Octopinky I was just wondering if there is a way to get rid of the space between the buttons, I checked the buttons and they dont have any margins tho
Olga C
@Octopinky
Aug 04 2016 05:20
@irvin3 let me take a look
Olga C
@Octopinky
Aug 04 2016 05:26
@irvin3 Got it! you can try adding a negative margin to .btn class to remove the spaces.
Nick Irvine
@irvin3
Aug 04 2016 05:28
@Octopinky thanks! its strange that you have to do that, I'd imagine that setting a 0 margin would fix it but it was already set at 0
CamperBot
@camperbot
Aug 04 2016 05:28
irvin3 sends brownie points to @octopinky :sparkles: :thumbsup: :sparkles:
:cookie: 255 | @octopinky |http://www.freecodecamp.com/octopinky
Olga C
@Octopinky
Aug 04 2016 05:29
@irvin3 To me it seems, that there is another pre-set somewhere deeper in the code. Otherwise, why would there be space between the buttons? This is tricky, lol
@irvin3 thank you for allowing me to be helpful
CamperBot
@camperbot
Aug 04 2016 05:29
octopinky sends brownie points to @irvin3 :sparkles: :thumbsup: :sparkles:
:cookie: 298 | @irvin3 |http://www.freecodecamp.com/irvin3
Nick Irvine
@irvin3
Aug 04 2016 05:29
@Octopinky yea i guess that is one of the downfalls of using a premade framework
Olga C
@Octopinky
Aug 04 2016 05:30
@irvin3 it would take ages to write a new one. there is no need to re-invent the wheel
Sorin Ruse
@sorinr
Aug 04 2016 05:31
@irvin3 you should work on this: .numRow { height: 50px;}
Nick Irvine
@irvin3
Aug 04 2016 05:31
@Octopinky yea i mean specifically it wouldnt be difficult to make my own button
@sorinr what should i work on for it? I am having a bit of a problem getting the buttons to be the height of the row
Sorin Ruse
@sorinr
Aug 04 2016 05:32
@irvin3 make it 42px as your buttons height
Nick Irvine
@irvin3
Aug 04 2016 05:33
@sorinr yea but then my buttons touch on the rows and it looks kind of weird
Olga C
@Octopinky
Aug 04 2016 05:34
@irvin3 I agree, It does look weird...
Sorin Ruse
@sorinr
Aug 04 2016 05:35
@irvin3 i know. but you said you want to get rid of the space between buttons
Nick Irvine
@irvin3
Aug 04 2016 05:36
Yea there is some issue with the margin around the button, I feel like I may need to just put columns around them, because making the buttons the same height as the row messes up the formatting now
Sorin Ruse
@sorinr
Aug 04 2016 05:43
@irvin3 you can make the .numRow and buttonFormat total width to be equal with 27+12+12+1+1 and then you can play with margins to make them as you wish. hope it make sense :)
Nick Irvine
@irvin3
Aug 04 2016 05:44
@sorinr where did those numbers come from?
Sorin Ruse
@sorinr
Aug 04 2016 05:45
@irvin3 if you inspect your buttons in the devtools on boxmodel you will see how much space the buttons occupy on your page
Jakub Adamec
@jadamec16
Aug 04 2016 05:46

Morning, which way is faster, please?

margin: 0 0 5% 0;

OR

margin: 0;
margin-bottom: 5%;
Sorin Ruse
@sorinr
Aug 04 2016 05:51
@irvin3 i would use flex column for the container and flex row for the buttons
DJ
@qualitymanifest
Aug 04 2016 05:52
@jadamec16 if there is any speed difference i'm sure it's so insignificant you shouldn't worry about it. margin: top right bottom left is faster to write though, so that's how i usually do it. btw it's margin:bottom not margin:down
Jakub Adamec
@jadamec16
Aug 04 2016 05:53
@qualitymanifest Ok, thanks. I know, sorry.. it's morning... :D
CamperBot
@camperbot
Aug 04 2016 05:53
jadamec16 sends brownie points to @qualitymanifest :sparkles: :thumbsup: :sparkles:
:star2: 1319 | @qualitymanifest |http://www.freecodecamp.com/qualitymanifest
DJ
@qualitymanifest
Aug 04 2016 05:55
@jadamec16 np. if you're really curious, this article seems pretty good: https://benfrain.com/css-performance-revisited-selectors-bloat-expensive-styles/
Jakub Adamec
@jadamec16
Aug 04 2016 05:57
@qualitymanifest wow, it looks great ;)
Sorin Ruse
@sorinr
Aug 04 2016 06:03
@qualitymanifest i like this part: "Removing unused styles"
Dion Hobdy
@hobdydion
Aug 04 2016 06:19

Hey guys, I am having some issues with my current assignment. I'm currently on the portfolio assignment and I am having trouble with the navbar and division between the "Portfolio" and "Contact" section. With the navbar, I am having trouble having it serve it's purpose. Whenever I click one of the links it directs me to the very top of the page rather than their appropriate sections.

Secondly, if you go through the HTML of this codepen, you will see a lot of <br> tags inbetween the portfolio thumbnail and the divider. If I remove all of the <br> tags the contact section and the divider will mix in with the portfolio section. Does anyone know why that is the case?

http://cdpn.io/VjBOLy

Cancel that. lol Sorry.
Jonathan Leon
@Wo1v3r
Aug 04 2016 06:29
@hobdydion loved the typography on the navbar
Dion Hobdy
@hobdydion
Aug 04 2016 06:30
lol Thanks @Wo1v3r Google Fonts does wonders.
CamperBot
@camperbot
Aug 04 2016 06:30
:cookie: 316 | @wo1v3r |http://www.freecodecamp.com/wo1v3r
hobdydion sends brownie points to @wo1v3r :sparkles: :thumbsup: :sparkles:
Sorin Ruse
@sorinr
Aug 04 2016 06:36
@hobdydion i would give the <p>'s same margin-left as the title of the section.
Greg Duncan
@GregatGit
Aug 04 2016 06:36
@hobdydion to get bootstrap working properly you have to add jQuery and bootstrap.js to the javascript in the settingings and I highly remcomend using w3schools navbar template to get your portfolio going - if you go through all there bootstrap resources you'll be able to make a great first portfolio http://www.w3schools.com/bootstrap/bootstrap_scrollspy.asp
Dion Hobdy
@hobdydion
Aug 04 2016 07:06
@GregatGit @sorinr Thanks guys! :)
CamperBot
@camperbot
Aug 04 2016 07:06
hobdydion sends brownie points to @gregatgit and @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 721 | @gregatgit |http://www.freecodecamp.com/gregatgit
:warning: hobdydion already gave sorinr points
Jonathan Leon
@Wo1v3r
Aug 04 2016 07:08
@hobdydion I'd add from experience of learning bootstrap just recently is that a great way to do so is with a mock up first , makes it alot easier and more intuitive using the grid system than cluttering the html with unecessary divs and classes
the doer
@ewathedoer
Aug 04 2016 08:06
Hi, I’m looking for feedback on Simon Game http://theonewhodo.es/simon-game/
kirbyedy
@kirbyedy
Aug 04 2016 08:12
@ewathedoer :thumbsup:
the doer
@ewathedoer
Aug 04 2016 08:14
thanks for having a look @kirbyedy
CamperBot
@camperbot
Aug 04 2016 08:14
ewathedoer sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1324 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
JW89
@JW89
Aug 04 2016 08:34
Im looking to make a navigation menu with a border. Where do i specify the border for the entire menu bar?? I tried putting the menu in a div, doesnt work with div style, i tried putting the (style="border: 1px solid black;") in both the CSS for the UL element and as a style in HTML, doesnt work, i tried creating a P with a style, doesnt work

<body>

<ul style="border:1px solid black;">
<li><a href="#Portfolio">Portfolio</a></li>
<li><a href="#Contact">Contact</a></li>
<li><a href="#About">About</a></li>
</ul>

</body>

css:

ul {
list-style-type: none;
margin: 0;
padding: 20;
width: 100%;
background-color: #555;
}

li {
float: left;
margin: 5px;
}

a {
display: block;
color: #555;
padding: 16px 16px;
text-decoration: none;
font-family: Arial;
font-size: 20px;
text-align: center;

}

li a:hover {
color: #555;
border: 1px solid silver;
}
.active {
background-color: #FFFFFF;
color: black;
}

the doer
@ewathedoer
Aug 04 2016 08:41
How to make a toggle for a sctrict mode accessible from the keyboard? theonewhodo.es/simon-game
kirbyedy
@kirbyedy
Aug 04 2016 08:47
maybe with jquery and keypress
keydown() actually
or something like that
where the key pressed is actually a number
for example I know that Enter is number 13
I think :)
Sorin Ruse
@sorinr
Aug 04 2016 08:48
i would use keyup instead
kirbyedy
@kirbyedy
Aug 04 2016 08:49
or keyup, yes :)
Sorin Ruse
@sorinr
Aug 04 2016 08:49
keydown its not reading the key you have pressed but the event
kirbyedy
@kirbyedy
Aug 04 2016 08:50
$(document).keyup(function(event) {
  if (event.keyCode == 13) {
    $("#doSearch").click();
  }
you are right, I used this for the wiki
Sorin Ruse
@sorinr
Aug 04 2016 08:52
only that you apply the event to all document ($(document)) not only to the element you want
that means no matter when you type a "character" that function will trigger
kirbyedy
@kirbyedy
Aug 04 2016 08:54
so something similar wont work for her ?
Sorin Ruse
@sorinr
Aug 04 2016 09:00
it works better if you have lets say <input type"text" id="myinput" name="myinput"> and you trigger it like: $('#myinput").keyup() bla bla bla
coz for other inputs you will need to do something else within the keyup function
Deepanjana Majumdar
@deepanjana1107
Aug 04 2016 09:11
hi.. can someone tell me if they can see the images on this.. I have used imgur to host the images.. but I think there's a problem. Any suggestions are welcome.
Sorin Ruse
@sorinr
Aug 04 2016 09:12
@deepanjana1107 all your imgs on imgur are not showing
Deepanjana Majumdar
@deepanjana1107
Aug 04 2016 09:13
@sorinr thanks.. is there another site I can use for my images?
CamperBot
@camperbot
Aug 04 2016 09:13
deepanjana1107 sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 594 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Aug 04 2016 09:25
@deepanjana1107 you can try uploading them from your github account
Deepanjana Majumdar
@deepanjana1107
Aug 04 2016 09:25
:+1:
Antharia Jack
@Antharia
Aug 04 2016 09:39
Hello everyone. I'm on Tribute Page FCC Challenge . Can someone tell me please why my footer does not display at the bottom of the page, though i wrote a display: block; css property ?
http://codepen.io/anthariajack/pen/YWONkb
ADIL KARMOUZI
@mradil16
Aug 04 2016 10:14
Good morning guys. How can I translate an <hr> width from 40px to 30px using transition without juddering ?
LordYamanouchi
@LordYamanouchi
Aug 04 2016 10:20
Hey can anyone help me with this?
$("button").click(function(){
$.getJSON("http://forismatic.com/en/api/method=getQuote&format=json&lang=encallback=?",function(data){   
  var aphorism = data.quoteText;
  $("#quotes").html(aphorism);
  }); 

});
Konrad
@losiu97
Aug 04 2016 10:27

Does anyone know why my $('p').html(latt); doesn't display the latt value when latt is a global variable?
var latt;
var long;
$(document).ready(function()
{
if (navigator.geolocation)
{

 navigator.geolocation.getCurrentPosition(function(position) 
{
  latt = position.coords.lattitude;
   long = position.coords.longitude;
 });

}
$("p").html(latt);
})

Jeremy Barbe
@eemebarbe
Aug 04 2016 10:42
can anyone help with react?
Stephen James
@sjames1958gm
Aug 04 2016 10:43
@losiu97 getCurrentPosition is asynchronous, that is the function will return before the callback has fired. You will need to do that inside the callback function
Konrad
@losiu97
Aug 04 2016 10:44
Nevermind got it fixed
Stephen James
@sjames1958gm
Aug 04 2016 10:53
@eemebarbe I am a noob at react but maybe I have seen your issue :)
Ajay Tanwar
@ajayt365
Aug 04 2016 10:54
@sorinr found the solution for that . just add overflow:auto to the div :)
Ajay Tanwar
@ajayt365
Aug 04 2016 11:00
@LordYamanouchi what's the problem ? also add '&' b/w en and callback
LordYamanouchi
@LordYamanouchi
Aug 04 2016 11:01
@ajayt365 Hey. I don't know whats wrong with this piece of code.
$("button").click(function(){
$.getJSON("http://forismatic.com/en/api/method=getQuote&format=json&lang=en&callback=?",function(data){   
  var aphorism = data.quoteText;
  $("#quotes").html(aphorism);
  }); 
});
Sorin Ruse
@sorinr
Aug 04 2016 11:02
is there a way to present all my pens in one page? i have a portfolio page that embeds some of my pens that works on http but i have others working on https. beside that there is one pen that is fully working on debug codepen version. anyway here is my pen: http://codepen.io/sorinr/pen/YWjkZx
Ajay Tanwar
@ajayt365
Aug 04 2016 11:03
@LordYamanouchi share the codepen link
Ajay Tanwar
@ajayt365
Aug 04 2016 11:04
@sorinr thanks for last night :)
CamperBot
@camperbot
Aug 04 2016 11:04
ajayt365 sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 596 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Aug 04 2016 11:05
@ajayt365 welcome
Ajay Tanwar
@ajayt365
Aug 04 2016 11:07
@LordYamanouchi bro
LordYamanouchi
@LordYamanouchi
Aug 04 2016 11:07
@ajayt365 Yeah lol
Ajay Tanwar
@ajayt365
Aug 04 2016 11:07
change https to http .
forismatic api works only on http
LordYamanouchi
@LordYamanouchi
Aug 04 2016 11:08
@ajayt365 It's been on http
@ajayt365 On my url?
Ajay Tanwar
@ajayt365
Aug 04 2016 11:08
@LordYamanouchi ur codepen link
it should be http://etc...
LordYamanouchi
@LordYamanouchi
Aug 04 2016 11:09
@ajayt365 Oh okay. Just did that same result
@ajayt365 The console says something new.
This message was deleted
method=getQuote&format=json&lang=en&callback=jQuery224007867416965398788_1470308942529:1 Uncaught SyntaxError: Unexpected token <
JW89
@JW89
Aug 04 2016 11:15
Can someone check Pen out and tell me why my menu bar isnt all the way filled to the left
Jonathan Leon
@Wo1v3r
Aug 04 2016 11:23
@JW89 You should always nest like this : container > row > columns
youre missing container and rows , then you could choose the container class: container-fluid
and it will take the whole width of the page
JW89
@JW89
Aug 04 2016 11:25
So like this?
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-12" id="div1">
<ul>
<li><a href="#Portfolio">Portfolio</a></li>
<li><a href="#Contact">Contact</a></li>
<li><a href="#About">About</a></li>
<li style="float:right";><a href="#About">About</a></li>
</ul>
</div>
</div>
</div>
</body>
I also wrote CSS, why isnt my menu bar having a silver solid border

ul {
list-style-type: none;
margin: 0;
padding: 20;
width: 100%;
background-color: #FFFFFF;
position: fixed;
top: 0;
}

li {
float: left;
margin: 10px;
}

a {
display: block;
color: #888;
padding: 16px 16px;
text-decoration: none;
font-family: Arial;
font-size: 20px;
text-align: center;

}

li a:hover {
color: #555;
border: 1px solid silver;
}
.active {
background-color: #FFFFFF;
color: black;
}

div1 {

color: red;
border: 1px solid silver;
}

Jonathan Leon
@Wo1v3r
Aug 04 2016 11:28
Well with bootstrap using css would always be a bit problematic, if you want to make sure your style is followed you should use classes , IDs or !important
ohh sorry you used id
you need to select it like that

id { css: rule;}

oh nvm the # is ommited in the markup in the chat
try adding !important
JW89
@JW89
Aug 04 2016 11:33
Where do i put important
Henrique Salguero
@kikosalguero
Aug 04 2016 11:34
@TylerMoeller, about that: "You're getting the data back as it is returned from the API, so it won't always return in the same order as the users listed in your array." but what i need to change?
JW89
@JW89
Aug 04 2016 11:34
Behind the css doesnt work
Now its really getting f'ed up
I tried increasing the border size and now its in the topleft corner
Jonathan Leon
@Wo1v3r
Aug 04 2016 11:38
@JW89 make sure that you understand that css rules apply to children too
@Wo1v3r so you need to work from the div down to the list items
@Wo1v3r not the other way
JW89
@JW89
Aug 04 2016 11:42
How is the color not getting inherited then?
Henrique Salguero
@kikosalguero
Aug 04 2016 11:51
I can´t get the server status right, everytime i refrash i have a diferent result. Can anyone help me? https://codepen.io/kikosalguero/pen/bZxJRa?editors=1010
I think i fixed it now
So should i now enter a new container, row or div with a col-sm in order to put something below the navbar?
Ajay Tanwar
@ajayt365
Aug 04 2016 12:24
@LordYamanouchi ur url was incorrect
check this working
$.getJSON("http://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&lang=en&jsonp=?",function(data){
var aphorism = data.quoteText;
$("#quotes").html(aphorism);
});
LordYamanouchi
@LordYamanouchi
Aug 04 2016 12:25
$("button").click(function(){
var aphorism;
  $.getJSON("http://api.forismatic.com/api/1.0/? method=getQuote&format=jsonp&lang=en&jsonp=?",function (data) {   
    aphorism = data.quoteText;
  });  
  $("#quotes").html(aphorism);
});
Hey I already tried that. But for some reason my code is still not working. I know that there is something wrong with my code and not the url this time
@ajayt365 @ajayt365
Ajay Tanwar
@ajayt365
Aug 04 2016 12:27
there is space after '?'
LordYamanouchi
@LordYamanouchi
Aug 04 2016 12:27
@ajayt365 That's fine
@ajayt365 It's the actual code itself
If I replace aphorism with a string it will show
otherwise ......
JW89
@JW89
Aug 04 2016 12:32
getting the hang of it
Ajay Tanwar
@ajayt365
Aug 04 2016 12:50
http://codepen.io/ajayt365/pen/KrXoPp . why the color of tweet and fb icons are not white by '.btn' in css? "new quote" color is white by the same css. why it's not working with icons?
LordYamanouchi
@LordYamanouchi
Aug 04 2016 12:52
Okay
$("button").click(function(){

  $.getJSON("http://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&lang=en&jsonp=?",function (data) {   
    $.each(data,function(i, field){
      field = data.quoteText;
      $("#quotes").text(field + " ");
    });
  });    
});
Why does this work
?
Roko Gudić
@rgudic
Aug 04 2016 12:53
Hello World!
CamperBot
@camperbot
Aug 04 2016 12:53

welcome to FreeCodeCamp @rgudic!

greg
@wearenotgroot
Aug 04 2016 12:54
@LordYamanouchi it works
@LordYamanouchi change your connection to http instead of https
LordYamanouchi
@LordYamanouchi
Aug 04 2016 12:57
@wearenotgroot Yeah it already is. I'm asking why it works
greg
@wearenotgroot
Aug 04 2016 13:13
@LordYamanouchi i dont think you need the $.each, you can simply write, since the result you get is only one quote
$("button").click(function(){

  $.getJSON("http://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&lang=en&jsonp=?",function (data) {   
      $("#quotes").text(data.quoteText);
      $("#authors").text(data.quoteAuthor);
  });    
});
Marc M
@Marc-Moeller
Aug 04 2016 13:13
Hello frontend people, can someone assist me with flexbox please?
www.businessdemo1.xyz -> I'm trying to get the slider text centerd , vertical and horizontally
  display:flex ;
  align-content: flex-center ;
 }

 .carousel-caption{
 flex:1 !important;
 }

``` / Carousel Caption flexbox /

div.item.active{
display:flex ;
align-content: flex-center ;
}

.carousel-caption{
flex:1 !important;
}
```

Norvin Burrus
@ndburrus
Aug 04 2016 13:23
@flyyyperth you may enjoy this: :sparkles:
Cage Echarte
@CageEcharte
Aug 04 2016 13:45
How do I take out the underline of an "anchor tag"
?
Stephen James
@sjames1958gm
Aug 04 2016 13:46
@CageEcharte I believe text-decoration: none
Cage Echarte
@CageEcharte
Aug 04 2016 13:49
@sjames1958gm I have a list of 5 items in my html. How should I tag them in the CSS?
the doer
@ewathedoer
Aug 04 2016 13:49
Is here anybody with iPhone 6s or other to help me solve the problem with display?
I want to check http://theonewhodo.es/simon-game/ and the bug(“every time you press a button the page snaps to the top and I can’t see the whole set of buttons”)
On Android it works fine, on Ipad too, not having iPhone at home to reproduce and solve the problem why :(
Here is how it get’s cut while it shouldn’t http://imgur.com/BwLt9eq
Marc Vesper
@marcvesper
Aug 04 2016 13:49
for the roman numerals converter (presuming this is still the right room to ask), i've passed the exercise but my solution uses a switch for each column (units, tens, hundreds, thousands), which feels a little clunky. how would i look to determine a more efficient algorithm for this?
Cage Echarte
@CageEcharte
Aug 04 2016 13:50
@sjames1958gm here is my pen im working on let me know what I should do to take out the underline: http://codepen.io/cager94/pen/grdKYZ
Marc Vesper
@marcvesper
Aug 04 2016 13:54
Cage Echarte
@CageEcharte
Aug 04 2016 13:54
I got it thanks @sjames1958gm
CamperBot
@camperbot
Aug 04 2016 13:54
cageecharte sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 2337 | @sjames1958gm |http://www.freecodecamp.com/sjames1958gm
Cage Echarte
@CageEcharte
Aug 04 2016 13:54
@marcvesper thanks
CamperBot
@camperbot
Aug 04 2016 13:54
cageecharte sends brownie points to @marcvesper :sparkles: :thumbsup: :sparkles:
:cookie: 293 | @marcvesper |http://www.freecodecamp.com/marcvesper
Tyler Moeller
@TylerMoeller
Aug 04 2016 13:57
@kikosalguero If you want the list to return the same every time, you'll need to collect the data and sort it the way you want before writing it to the page. At a minimum, you could have a div for each online/offline/closed status and just put the users in those divs based on their status. Within each status section, however, they're still going to appear as you get them back from the API unless you store all the data in an object and sort it first.
emrehayta
@emrehayta
Aug 04 2016 14:02
Hello World! ^^
CamperBot
@camperbot
Aug 04 2016 14:02

welcome to FreeCodeCamp @emrehayta!

the doer
@ewathedoer
Aug 04 2016 14:10
problem solved
salbo98
@salbo98
Aug 04 2016 14:14
anyone have any idea as to why my thumbnails wont display inline ?
salbo98
@salbo98
Aug 04 2016 14:22
I need a bigger monitor !
solved it
Sorin Ruse
@sorinr
Aug 04 2016 14:24
@salbo98 make the gallery flex row
Chris Rutherford
@cjrutherford
Aug 04 2016 14:29
would anyone mind giving design feedback?
Sorin Ruse
@sorinr
Aug 04 2016 14:29
@cjrutherford show the pen
@salbo98 something like: .gallery{ display: flex; flex-direction: row; justify-content:center; }
Chris Rutherford
@cjrutherford
Aug 04 2016 14:32
@sorinr well it's not a pen, it's in github. I'm working off my own machine as it's going to need some back end magic
salbo98
@salbo98
Aug 04 2016 14:34
@salbo98 make the gallery flex row, thanks for the help
CamperBot
@camperbot
Aug 04 2016 14:34
sorry salbo98, you can't send brownie points to yourself! :sparkles: :sparkles:
Sorin Ruse
@sorinr
Aug 04 2016 14:34
@cjrutherford i can download the zip and test it. what else do i need to install to make it work?
salbo98
@salbo98
Aug 04 2016 14:34
@sorinr thanks for the reply
CamperBot
@camperbot
Aug 04 2016 14:34
salbo98 sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 597 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Aug 04 2016 14:35
@salbo98 welcome
Chris Rutherford
@cjrutherford
Aug 04 2016 14:38
@sorinr it should all work fine. I'm using pug and sass to speed up the dev process, this is just a design concept at this time. There is no on-machine dependancies unless you want to fork it
if you want to fork it, I recommend installing node, then running npm install in the root of the project before developing. I have it setup with gulp to auto compile when changes are made
Sorin Ruse
@sorinr
Aug 04 2016 14:52
@cjrutherford i've seen
Norvin Burrus
@ndburrus
Aug 04 2016 14:55
@emrehayta @rgudic Hello and welcome to Free Code Camp/community! :sparkles:
I think you’ll really like the curriculum, learning, people, and resources! Explore, enjoy, and happy coding!
If you need assistance, just ask!
CamperBot will provide information (if possible) when you type "help (subject)" in the chat room :) .
Also, you may enjoy these: :sparkles: How To Rapidly Progress When Learning To Code, How To Teach Yourself Code, & Please do learn to code
JW89
@JW89
Aug 04 2016 15:00
Im doing the portfolio challenge. Finally getting used to it but can someone tell me where i can clean up code?
Any ideas on how to stop the count down ?
I've created a function to output "HOORAY!" once it's over, but It's getting called.
It's not*
and You can speed up the count down btw by repeatedly clicking the session' number
Sorin Ruse
@sorinr
Aug 04 2016 15:18
@JW89 there are some problems with your layout. i would do it like this(example for the about section): https://codepen.io/sorinr/pen/jAZrqY
Stephen James
@sjames1958gm
Aug 04 2016 15:22
@Harry97 Save the return from setInterval and call clearInterval with that value when you want to stop the timer
Harry Adel
@harryadel
Aug 04 2016 15:31
@sjames1958gm I'm sorry, but what do you mean by "return"?
salbo98
@salbo98
Aug 04 2016 15:37
anyone have any feedback for a completed layout (not much styling has been done}
Stephen James
@sjames1958gm
Aug 04 2016 15:38
@sjames1958gm var timerid = setInterval()
@Harry97 var timerid = setInterval() then you can use clearInterval(timerid);
Harry Adel
@harryadel
Aug 04 2016 15:40
@sjames1958gm Ok, cool. I got it, but
Is this the only way to stop it?
Sorin Ruse
@sorinr
Aug 04 2016 15:49
@Harry97 you can also add this to your css: span.button{ cursor: pointer; } just to make the user know that when you click that something will happen
Harry Adel
@harryadel
Aug 04 2016 15:52
@sorinr I sure will
I just wanted to make sure everything is working fine
Roger Hart
@wilcombebolger
Aug 04 2016 15:53
hi there all
Harry Adel
@harryadel
Aug 04 2016 15:53
before taking care of the looks of it
@wilcombebolger Hi!
Roger Hart
@wilcombebolger
Aug 04 2016 15:54
can anyone tell me why my inline css styles do not take effect anywhere on my page
Harry Adel
@harryadel
Aug 04 2016 15:54
@wilcombebolger Include your codepen so that we can have a look
Roger Hart
@wilcombebolger
Aug 04 2016 15:54

<head>
<meta name="viewport" content="width=device-width, initial scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
body {
position: relative;
padding: 100px;
margin: 50px;
border: 20px;
}
#HelloWorld {height:1000px, background-color: #a3a375;
}
#AboutMyWork { height:500px, background-color: #ffb380;
}
#AboutContactingMe { height:500px, background-color: #ffe699;
}
</style>
</head>

<body data-spy="scroll" data-target=".navbar" data-offset="50">



<div id="HelloWorld"class="container-fluid">
<nav class="navbar navbar-inverse navbar-fixed-top">


<div class="navbar-header">


<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>

</button>
<a class="navbar-brand" href="#">HelloHart</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">About Me</a></li>
<li><a href="#">About My Work</a></li>
<li><a href="#">About Contacting Me</a></li>
</ul>
</div>

</nav>
</div>

<!--Content-->
<div>
<h1 class="text-center"><i>Hello World !</i></h1>
<img src="https://dl.dropboxusercontent.com/s/1ulnrfqpstt5bs9/chapter%20divider.png?dl=0" class="center-block" alt="divider" Hspace="50" Vspace="40" width="120" height="50" </img>
<h3 class="text-center"><i>About Me</i></h3>
<p class="text-center"> My name is Roger Hart </p>
<p class="text-center">I'm skilled in web design and application development.</p>
<img src="https://dl.dropboxusercontent.com/s/8quiyssvae2em59/Roger%20Hart.jpg?dl=0" class="center-block img-circle" alt="Roger" width="304" height="400">

<img src="https://dl.dropboxusercontent.com/s/1ulnrfqpstt5bs9/chapter%20divider.png?dl=0" class="center-block" alt="divider" Hspace="50" Vspace="40" width="120" height="50" </img>
<h1 </div>
</div>
</div>
<!--About Me-->
<div id="AboutMyWork" class="text-center"><h3>About My Work</h3></div>

</body>

Harry Adel
@harryadel
Aug 04 2016 15:55
@wilcombebolger Just copy paste your codepen link :D
Roger Hart
@wilcombebolger
Aug 04 2016 15:55
I was initially using external css by the way okay will do
Sorin Ruse
@sorinr
Aug 04 2016 15:56
@wilcombebolger and where is your inline style?
Roger Hart
@wilcombebolger
Aug 04 2016 15:56
This message was deleted
Sorin Ruse
@sorinr
Aug 04 2016 16:01
@wilcombebolger first: you don't have to camelcase your ids
Harry Adel
@harryadel
Aug 04 2016 16:03
@wilcombebolger Where's your "inline"?
I can't seem to find it
and with all due respect, please include all of your CSS in its respective tab
Sorin Ruse
@sorinr
Aug 04 2016 16:04
@wilcombebolger i would change "About My Work" to just "My Work" and "About Contacting Me" to just "Contact". too many abouts there
Roger Hart
@wilcombebolger
Aug 04 2016 16:06
i don't mean "inline" but declared within the "Style of the "head"
Its a bit of a mess really wouldn't you say
<style> within the <head> section
Ken Haduch
@khaduch
Aug 04 2016 16:07
@bethqiang - I had a new idea that I might experiment with, unless I see that you've solved it some other way?
Sorin Ruse
@sorinr
Aug 04 2016 16:09
@wilcombebolger inline style means: <div style="background-color: red;"></div>
Chris Rutherford
@cjrutherford
Aug 04 2016 16:10
@sorinr what were your thoughts?
Roger Hart
@wilcombebolger
Aug 04 2016 16:10
i see @sorinr
Harry Adel
@harryadel
Aug 04 2016 16:10
@wilcombebolger Have your tried placing all of your css in its tab?
Ajay Tanwar
@ajayt365
Aug 04 2016 16:11
@sorinr why the color of tweet and fb icons are not white by '.btn' in css? "new quote" color is white by the same css. why it's not working with icons? http://codepen.io/ajayt365/pen/KrXoPp
Harry Adel
@harryadel
Aug 04 2016 16:11
instead of placing it inside the html
Sorin Ruse
@sorinr
Aug 04 2016 16:11
have downloaded it but had no time to look deeply into it yet :) @cjrutherford
Roger Hart
@wilcombebolger
Aug 04 2016 16:12
okay let me go and try your advice @Harry97
Sorin Ruse
@sorinr
Aug 04 2016 16:15
@ajayt365 you can make i.fa{color: white;} in your css
Roger Hart
@wilcombebolger
Aug 04 2016 16:39
okay I have tidied up the code I have placed where I had my css in its respective tab and reactivated my initial "jumbotron" so to have a background colour but I am now wondering if its possible to have separate sections of colour for each respective section to my portfolio "about Me, My work, contact me etc can I have more than one jumbotron?
Harry Adel
@harryadel
Aug 04 2016 16:42
@wilcombebolger No need to create multiple jumbotrons
just wrap each section you want to color in "<div>"
or span
and assign an id to it
and then use that id in your CSS to give it whichever color you want
Chris Rutherford
@cjrutherford
Aug 04 2016 16:48
@sorinr alrighty! :wink:
Jesus Hilario Hernandez
@jesushilarioh
Aug 04 2016 16:48
@wilcombebolger you can try giving each section a column of 12, and then size the top or bottom margin of each column.
Roger Hart
@wilcombebolger
Aug 04 2016 16:50
okay will try that @Harry97
Sorin Ruse
@sorinr
Aug 04 2016 16:50
@cjrutherford first notice from a glance is that i would add a text-decoration: none to the menu dropdown. but i will look further into it only tomorrow morning my time
@Harry97 @wilcombebolger if you decide to use <span> tag for your sections just make them display:block in your css to behave like a div
Harry Adel
@harryadel
Aug 04 2016 16:54
@sorinr You are right. I apologize for not mentioning that fact.
Roger Hart
@wilcombebolger
Aug 04 2016 16:56
@Harry97 at the bottom of my HTML i have wrapped a line of code with a div and assigned it an "i.d" and then used the assigned i.d in my css and it doesn't work so far
could you take another look for me please
Sorin Ruse
@sorinr
Aug 04 2016 17:00
@wilcombebolger instead of this: #MyWork{ height: 500px, background-color: #ffb380; } try this: #MyWork{
min-height: 500px; background-color: #ffb380;
}`
Roger Hart
@wilcombebolger
Aug 04 2016 17:02
@sorinr - tried that too and nothing is happening
Harry Adel
@harryadel
Aug 04 2016 17:03

MyWork{

height: 500px;
background-color: red;
}
Sorin Ruse
@sorinr
Aug 04 2016 17:03
@wilcombebolger no you didn't do it
Harry Adel
@harryadel
Aug 04 2016 17:03
remove the ","
@wilcombebolger
Roger Hart
@wilcombebolger
Aug 04 2016 17:04
@Harry97 @sorinr :+1: it was the missing semi-colon many thanks
CamperBot
@camperbot
Aug 04 2016 17:04
wilcombebolger sends brownie points to @harry97 and @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 598 | @sorinr |http://www.freecodecamp.com/sorinr
:warning: could not find receiver for harry97
Harry Adel
@harryadel
Aug 04 2016 17:04
and end your assignment with ";"
Roger Hart
@wilcombebolger
Aug 04 2016 17:04
@Harry97 :+1: thank you
CamperBot
@camperbot
Aug 04 2016 17:04
:warning: could not find receiver for harry97
wilcombebolger sends brownie points to @harry97 :sparkles: :thumbsup: :sparkles:
Roger Hart
@wilcombebolger
Aug 04 2016 17:11
does a jumbotron fix a certain font family?
afix
Norvin Burrus
@ndburrus
Aug 04 2016 17:15
This message was deleted
Tyler Moeller
@TylerMoeller
Aug 04 2016 17:22
@wilcombebolger No, it does not. To see what CSS is applied to the .jumbotron class, search for "jumbotron" here: https://github.com/twbs/bootstrap/blob/master/dist/css/bootstrap.css
Sorin Ruse
@sorinr
Aug 04 2016 17:22
@wilcombebolger nope. its inheriting it
Ajay Tanwar
@ajayt365
Aug 04 2016 17:22
@sorinr yeah i know i can do that , but i was asking why .btn works with "new quote" but doesn't work with icons?
Sorin Ruse
@sorinr
Aug 04 2016 17:23
@ajayt365 coz you have the class btn to a higher parent in that case
Ajay Tanwar
@ajayt365
Aug 04 2016 17:27
specificity is the answer i guess @sorinr . isn't it?
Sorin Ruse
@sorinr
Aug 04 2016 17:29
@ajayt365 i would call it inheritance
Beth Qiang
@bethqiang
Aug 04 2016 17:30
@khaduch - i have not been able to find a way yet :(
Ajay Tanwar
@ajayt365
Aug 04 2016 17:30
but inheritance not working bro . .btn color:#fff doesn't apply to icons
Norvin Burrus
@ndburrus
Aug 04 2016 17:32
@wilcombebolger these may be helpful: :sparkles:
Sorin Ruse
@sorinr
Aug 04 2016 17:33
@ajayt365 you have your i wrapped into an a that not inherit the color from his parent <button class="btn">
Ken Haduch
@khaduch
Aug 04 2016 17:34
@bethqiang - okay, I think that I just came up with something. Check out my edited fork of your project. I did some caching of jquery search results (which is a good thing to do, rather than repeatedly searching the DOM. But it might not be essential to how I changed the fading in) And then I basically am using your #streamers wrapper and first showing all users, after that completes, then fading in the #streamers...
Ajay Tanwar
@ajayt365
Aug 04 2016 17:35
so u r saying direct child will take the color?
@sorinr
Ken Haduch
@khaduch
Aug 04 2016 17:36
@bethqiang - it uses the "done" function feature of the .show() method.
Sorin Ruse
@sorinr
Aug 04 2016 17:36
@ajayt365 and thats because of: a:-webkit-any-link {}
Beth Qiang
@bethqiang
Aug 04 2016 17:37
@khaduch - ok give me a couple of min, currently trying to think through a different problem. will take a look at it in a bit!
Ken Haduch
@khaduch
Aug 04 2016 17:37
@bethqiang - sure, no rush on my part... take your time!
Ajay Tanwar
@ajayt365
Aug 04 2016 17:37
@sorinr sorry didn't get that
Sorin Ruse
@sorinr
Aug 04 2016 17:40
@ajayt365 each browser deal(has implicit styling) for certain html tags. just open a plain file and make <a href="#">Hello</a> and take a look into the devtools(F12) at that tag
Ivan
@gonzalezi2
Aug 04 2016 18:49
@admiraltaylor Just saw your message. I'll read up on that link you provided. Thanks!
CamperBot
@camperbot
Aug 04 2016 18:49
gonzalezi2 sends brownie points to @admiraltaylor :sparkles: :thumbsup: :sparkles:
:cookie: 265 | @admiraltaylor |http://www.freecodecamp.com/admiraltaylor
Joe
@JFSene
Aug 04 2016 19:08
Hello everyone, i need help with moving and img to the center of the jumbotron.
a img*
Harry Adel
@harryadel
Aug 04 2016 19:20
@JFSene How about using "center-block"?
as long as you are using Bootstrap ofc
It's a class btw so don't forget to add a dot before it
Why can't the code on line 39 in the JavaScript tab get called?
Joe
@JFSene
Aug 04 2016 19:26
@Harry97 Thank you man!!
CamperBot
@camperbot
Aug 04 2016 19:26
jfsene sends brownie points to @harry97 :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for harry97
Harry Adel
@harryadel
Aug 04 2016 19:27
@JFSene Glad it worked for ya! :D
Ivan
@gonzalezi2
Aug 04 2016 19:53
Hey guys I'm having trouble with the Random Quote Generator. I've completed everything except the twitter integration. I cannot get the quote to append to the href attribute of the Tweet button.
var newTweetText = "https://twitter.com/intent/tweet?text=" + encodeURI("\" " + randomQuote.quote + "\"" + " -" + randomQuote.author);
document.getElementById("tweetText").setAttribute("href", newTweetText);
This is the trouble area.
Harry Adel
@harryadel
Aug 04 2016 19:57
When I press the "Tweet" button I don't get any reaction
Try adding target="_blank" to your <a> element
in order for it to open a new tab
Ivan
@gonzalezi2
Aug 04 2016 19:58
I get a popup. It's not supposed to open a new tab.
Harry Adel
@harryadel
Aug 04 2016 19:59
Then, what are your intending to do with that button?
Chandice
@Cookcha
Aug 04 2016 19:59
Hey everyone, can I get some feedback?
http://codepen.io/Cookcha/full/PzaRpb/
Harry Adel
@harryadel
Aug 04 2016 20:01
@Cookcha Great Job!
Ivan
@gonzalezi2
Aug 04 2016 20:01
@Harry97 The project requires that I share the quote that is generated. The text that is shared on twitter is inside of the href attribute. I'm trying to change the href value to include the quote that is generated when you press "Generate"
Harry Adel
@harryadel
Aug 04 2016 20:01
I really like what you did with the nav bar
and more specifically the social media icons
really nice
Chandice
@Cookcha
Aug 04 2016 20:02
@Harry97 :D Thanks! I was afraid it was too plain.
vínαч puppαl
@vinaypuppal
Aug 04 2016 20:02
@gonzalezi2 since you are using twitter sdk for that button, an iframe is generated, so u cant access #tweetText link using JS
CamperBot
@camperbot
Aug 04 2016 20:02
cookcha sends brownie points to @harry97 :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for harry97
Harry Adel
@harryadel
Aug 04 2016 20:03
@Cookcha No, it was really nice
vínαч puppαl
@vinaypuppal
Aug 04 2016 20:03
@gonzalezi2 so initial hello world is show whenever that button is clicked
Harry Adel
@harryadel
Aug 04 2016 20:03
you can even make it better by making it scroll upwards instead of jumping right away
and there's this one thing which I'm not sure if it's just me but when I resize the window the images don't seem perfectly centered
they are positioned slightly to the right, I suppose
Ivan
@gonzalezi2
Aug 04 2016 20:06
@vinaypuppal except I was able to change the href attribute to static text. Just can
can
can't use a variable
Chandice
@Cookcha
Aug 04 2016 20:08
@Harry97 Yes, I tried the scrolling bit with js but it didn't want to work properly, I don't know enough about it to figure out why yet. I just thought I'd add that later once I got a bit more knowledge of the code. As far as the images you're right, I'm not sure why they are doing that... I'm going to try vertically aligning them because text align did nothing apparently... I'm not really sure why. I'm using bootstrap for them so I'm not sure why they aren't doing what they should.
Ajay Tanwar
@ajayt365
Aug 04 2016 20:09
@sorinr you are saying that 'a' does not have white color from '.btn' class as it has its own color ?
Ivan
@gonzalezi2
Aug 04 2016 20:09
@vinaypuppal That is a different link they're using though. They're changing the data-text attribute and using the <a href="http://twitter.com/share" class="twitter-share-button" data-text="">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> link for the button which is different than mine.
vínαч puppαl
@vinaypuppal
Aug 04 2016 20:10
@gonzalezi2 since you added a class twitter-share-button to #tweetText it will be replaced by iframe
Ivan
@gonzalezi2
Aug 04 2016 20:10
And like I said, I am able to change the link to static text
ah yes you're right. Just looked at the console
Is it possible to make my own button and not use theirs but keep the same function?
vínαч puppαl
@vinaypuppal
Aug 04 2016 20:11
@gonzalezi2 yes u need to write a work around like this http://jsfiddle.net/chris27/DQw5b/4/
@gonzalezi2 yes u can use u r own btn also
@gonzalezi2 For reference this is what i did
$('#share-tw').on('click', function(e) {
    e.preventDefault();
    window.open('http://twitter.com/share?text=' + encodeURIComponent(randomQuoteText) + ' ' + 'By ' + encodeURIComponent(randomQuoteTextBy));
  });
@gonzalezi2 i created my own btn and attached a click handler to it like abv
Ivan
@gonzalezi2
Aug 04 2016 20:15
@vinaypuppal did you come up with that on your own? I'm hesitant to use other people's code without really understanding or learning from it
vínαч puppαl
@vinaypuppal
Aug 04 2016 20:16
@gonzalezi2 that share url i found by googling
and i used encodeURIComponent(randomQuoteText) because quote may have : ; which need to be escaped in url otherwise it may cause some problem
Ivan
@gonzalezi2
Aug 04 2016 20:18
instead of encodeURI?
dimitrije12
@dimitrije12
Aug 04 2016 20:20
http://codepen.io/dimitrije/pen/rLqjbJ Why does my code return undefined, instead of steamer names
vínαч puppαl
@vinaypuppal
Aug 04 2016 20:21
@gonzalezi2 whats u r question?? And i found share url may be from here i think (i dont remember exactly )http://stackoverflow.com/questions/6208363/sharing-a-url-with-a-query-string-on-twitter#answer-20832477
Ivan
@gonzalezi2
Aug 04 2016 20:26
@vinaypuppal I'm already using that intent-tweet link. Also, none of my quotes have : in them so I don't have that problem. I'll try the solutions you shared. Thanks
CamperBot
@camperbot
Aug 04 2016 20:26
gonzalezi2 sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 433 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
vínαч puppαl
@vinaypuppal
Aug 04 2016 20:28
@dimitrije12 hey getJSON is async . so by the time ajax req(getJSON) is complete the value of i of for loop will be 10 and you are adding Streamer[10] to div which is undefined u r getting undefined on screen 10 times
Josh
@jjoshpoland
Aug 04 2016 20:29
I'm stuck on the random quote generator. Maybe I just don't understand how to read api's, but I can't get my .getJSON method to work. https://codepen.io/jjoshpoland/pen/RRZKzN
dimitrije12
@dimitrije12
Aug 04 2016 20:32
@vinaypuppal thanks, i will try to fix it
CamperBot
@camperbot
Aug 04 2016 20:32
dimitrije12 sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 434 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
vínαч puppαl
@vinaypuppal
Aug 04 2016 20:33
@jjoshpoland use js section of codepen to write js code. see console for errors. move your js code to js section of codepen and try to click get quote btn it will work.
Josh
@jjoshpoland
Aug 04 2016 20:34
oops, forgot to save it before linking ...
console isn't throwing errors
vínαч puppαl
@vinaypuppal
Aug 04 2016 20:34
@jjoshpoland so what help you need with API's
Josh
@jjoshpoland
Aug 04 2016 20:35
I can't figure out why that getJSON function won't execute. It won't even change the html on my targeted element. I'm wondering if it's because I didn't use the right API link or something
vínαч puppαl
@vinaypuppal
Aug 04 2016 20:36
@jjoshpoland i saw u r pen now its throwing these errors
jquery-2.2.4.min.js:4 Mixed Content: The page at 'https://codepen.io/jjoshpoland/pen/RRZKzN?editors=0010' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://quotesondesign.com/api/3.0/api-3.0.json'. This request has been blocked; the content must be served over HTTPS.send @ jquery-2.2.4.min.js:4
jquery-2.2.4.min.js:4 XMLHttpRequest cannot load http://quotesondesign.com/api/3.0/api-3.0.json. Failed to start loading.
@jjoshpoland First let me tell u how to solve these than i will explain why u got these errors
@jjoshpoland instead of this urlhttp://quotesondesign.com/api/3.0/api-3.0.json use this https://crossorigin.me/http://quotesondesign.com/api/3.0/api-3.0.json
@jjoshpoland see i just prefixed u r quotes API url with https://crossorigin.me because your API wont allow CORS (https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS)
Joe
@JFSene
Aug 04 2016 20:41
Any guide to help on the Portfolio challenge?
vínαч puppαl
@vinaypuppal
Aug 04 2016 20:41
@jjoshpoland so to bypass that we need to use proxy server like https://crossorigin.me
Josh
@jjoshpoland
Aug 04 2016 20:41
ok, that got the code running. thank you. But, I don't know how to get the quote out of whatever is being returned by the API. Also, the errors weren't showing up on my console. Am I doing something wrong with that?
Marc Droz
@b1tc0de
Aug 04 2016 20:41
hi everyone, i finished the tribute page but the bootstrap does not seem to be active, if i am not mistaken it does that automatically in codepen?
vínαч puppαl
@vinaypuppal
Aug 04 2016 20:42
@jjoshpoland let me check your pen
Marc Droz
@b1tc0de
Aug 04 2016 20:42
how do i share it correctly?
vínαч puppαl
@vinaypuppal
Aug 04 2016 20:42
@jjoshpoland did u save i see old code only
Josh
@jjoshpoland
Aug 04 2016 20:42
@b1td0wn you need to activate it in the html settings. its under quick-add under CSS
saved
vínαч puppαl
@vinaypuppal
Aug 04 2016 20:43
@b1td0wn https://medium.freecodecamp.com/codepen-tips-and-best-practice-cf926ebd0b11#.f7wvz15v4 read this article to know how to work in codepen
Marc Droz
@b1tc0de
Aug 04 2016 20:45
thanks @jjoshpoland @vinaypuppal
CamperBot
@camperbot
Aug 04 2016 20:45
b1td0wn sends brownie points to @jjoshpoland and @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 435 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
:cookie: 264 | @jjoshpoland |http://www.freecodecamp.com/jjoshpoland
vínαч puppαl
@vinaypuppal
Aug 04 2016 20:45
@jjoshpoland just add this it will work
html = json.quote
the doer
@ewathedoer
Aug 04 2016 20:46
Looking for the feedback on the new version of my Simon Game http://theonewhodo.es/simon-game/
I’m not sure why sometimes it does not play on mobile devices. Any feedback or help about the mentioned bug would be appreciated :)
Josh
@jjoshpoland
Aug 04 2016 20:46
thanks!
thanks @vinaypuppal
CamperBot
@camperbot
Aug 04 2016 20:47
jjoshpoland sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 436 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
vínαч puppαl
@vinaypuppal
Aug 04 2016 20:47
@jjoshpoland because this is returned from API
{
author:"Ludwig Wittgenstein"
id:933
permalink:"http://quotesondesign.com/?p=933"
quote:"Everything that can be said, can be said clearly.  "
}
Josh
@jjoshpoland
Aug 04 2016 20:48
did you just put the json object into the html to get that?
vínαч puppαl
@vinaypuppal
Aug 04 2016 20:48
help format @jjoshpoland
CamperBot
@camperbot
Aug 04 2016 20:48

:point_right: code formatting [wiki]

Multi line Code

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

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

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

Single line Code

This an inline `<paste code here>` code formatting with a single backtick() at _start_ and _end_ around thecode`.

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

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

dimitrije12
@dimitrije12
Aug 04 2016 20:54
@vinaypuppal do you know how can i fix async problem
i tried adding $.ajaxSetup({
async: false
}); to my code
but it returns only last element of my array of streamers
vínαч puppαl
@vinaypuppal
Aug 04 2016 20:54
@dimitrije12 share your pen url again i will try to debug
vínαч puppαl
@vinaypuppal
Aug 04 2016 20:59
@dimitrije12 so u can use Streamers array to generate req URL and find channel name from returned API instead of from Streamers array
@dimitrije12 data.stream.channel.name gives u Streamers name u have in array.
dimitrije12
@dimitrije12
Aug 04 2016 21:00
@vinaypuppal ohh i get it, i will try it right now
vínαч puppαl
@vinaypuppal
Aug 04 2016 21:02
@dimitrije12 but if stream is null then u may not get name
@dimitrije12 so u can request streamer info with this URL https://api.twitch.tv/kraken/users/
Example: https://api.twitch.tv/kraken/users/brunofin
dimitrije12
@dimitrije12
Aug 04 2016 21:06
Yeah but then i cant get info if the user is streaming at the moment
njhudd
@njhudd
Aug 04 2016 21:07
Hello! I've just finished my first Front End Project (pair programmed with @dhuddleston to help me with some of the basics). Any comments / critiques? http://codepen.io/njhudd/full/ZOqZRP/
dimitrije12
@dimitrije12
Aug 04 2016 21:07
so i have to call two API's, one to get user info, and second to read if they are online or not @vinaypuppal
vínαч puppαl
@vinaypuppal
Aug 04 2016 21:08
@dimitrije12 so u need to make two request
  • first to get stream info
  • second to get user/channel/streamer info
    if stream is null they are offline
Olga C
@Octopinky
Aug 04 2016 21:12
@njhudd Its looking good! Great job
vínαч puppαl
@vinaypuppal
Aug 04 2016 21:12
@njhudd Looks good. One suggestion read about media queries(http://www.w3schools.com/css/css_rwd_mediaqueries.asp) and use them to decrease the font size for small screens of title and paragraph. Rest all looks good
DoYouLoveGames
@DoYouLoveGames
Aug 04 2016 21:27
hey yall, i just started writing my code on pen.io but for some reason the image ive selected isnt coming up.
nvm, i copied the wrong link
jrandallhansen
@jrandallhansen
Aug 04 2016 23:08
@njhudd I like it too. if youre making use of jade and sass maybe feel free to style that bad boy up a little more. or just move on
I am working on the build a random quote machine project. anyone have advice on good jquery and json tutorials/materials? ive never called an API before and the exercises on FCC didnt provide much context to me
Ryan Williams
@Ryanwfile
Aug 04 2016 23:59

Can someone please help me with this code for the simon project, I am having difficulty getting the on click function to require more on click button presses in order to proceed. The code I have so far that isn't working is

$('.sector').on('click',function(){/*Handles the user's button clicks, sector is the class name of the 4 lights */
  console.log("Count is " + count + ", and the order array is [" + order + "]");
   for (var i = 0; i < count; i++){
     if (this == order[i]){//if what is clicked is the correct button in the order array, this is where I need help
       setTimeout(function(){
         if (this.id == order[i] && order[i] == 'red'){
           buttons.brightRed();
           setTimeout(function(){buttons.red()},1100);

         }
         else if (this.id == order[i] && order[i] == 'green'){
           buttons.brightGreen();
           setTimeout(function(){buttons.green()},1100);

         }
         else if (this.id == order[i] && order[i] == 'blue'){
          buttons.brightBlue();
          setTimeout(function(){buttons.blue()},1100);

        }
        else if (this.id == order[i] && order[i] == 'yellow'){
          buttons.brightYellow();
          setTimeout(function(){buttons.yellow()},1100);

        }
       },1100 * count)//ends the setTimeout statement of the for loop
     }
 }//ends for loop
 beeper();//The function that randomly generates and displays the button pattern for the user to repeat

});

The codepen link is http://codepen.io/Ryanwfile/pen/qNJAJO Thank you for any help