These are chat archives for FreeCodeCamp/HelpFrontEnd

7th
Aug 2016
aagussn
@aagussn
Aug 07 2016 00:16
@itsacoyote will try it and commend
Sabrina Ferguson
@itsacoyote
Aug 07 2016 00:17
@aagussn you can increase or decrease the line-height to get it to fit how you want
aagussn
@aagussn
Aug 07 2016 00:19
@itsacoyote t
@itsacoyote thanks u
CamperBot
@camperbot
Aug 07 2016 00:19
aagussn sends brownie points to @itsacoyote :sparkles: :thumbsup: :sparkles:
:cookie: 281 | @itsacoyote |http://www.freecodecamp.com/itsacoyote
AEspinal1990
@AEspinal1990
Aug 07 2016 00:41
Hey could someone help me if they wouldn't mind.
I'm using the HTML semantic header tag and there is a decent margin between the tag and the top of the page.
Sabrina Ferguson
@itsacoyote
Aug 07 2016 00:42
@AEspinal1990 what do you mean by margin? Have a screenshot or codepen to share?
AEspinal1990
@AEspinal1990
Aug 07 2016 00:44
How can I insert a screen shot? I've been working on it in sublime so I don't have the codepen set up yet.
Sabrina Ferguson
@itsacoyote
Aug 07 2016 00:45
@AEspinal1990 well, without knowing exactly what the issue is, maybe start with adding some css styling to the body and html. Give them margin:0 and padding:0
AEspinal1990
@AEspinal1990
Aug 07 2016 00:46
@itsacoyote I've tried that and tried using a negative margin and padding as well.
Sabrina Ferguson
@itsacoyote
Aug 07 2016 00:47
are you using any special css libraries like Bootstrap or anything else?
Juan Sierra
@juan-sierra
Aug 07 2016 00:49
hi guys anyone mind helping me with media queries?
AEspinal1990
@AEspinal1990
Aug 07 2016 00:49
Yes I'm using the page-header class. I tried taking it out and it fixed the margin problem but I would like to keep it in if possible.
page-header from bootstrap I mean
Sabrina Ferguson
@itsacoyote
Aug 07 2016 00:50
@AEspinal1990 ah, then add your own class, and target it with margin-top:0
@jasierragarcia what's the issue?
Juan Sierra
@juan-sierra
Aug 07 2016 00:53
hi @itsacoyote I know how media queries work, its just that these two sections in my html won’t line up next to other
the layout I want to achieve looks like this.
Screen Shot 2016-08-06 at 8.55.02 PM.png
AEspinal1990
@AEspinal1990
Aug 07 2016 00:56
@itsacoyote That didn't work either. Did you mean add an additional class as in class=class="page-header newClass" then in the css file set the margin-top of newClass to 0?
Sabrina Ferguson
@itsacoyote
Aug 07 2016 00:56
yes, but in case that's not a typo, class="page-header newClass" not class=class=
Matt Goldwater
@MJGwater
Aug 07 2016 00:56
Working on the Simon project and I'm wondering why it says I click a button twice when I click it once. It'd be awesome if someone could help me with this. Here's my Codepen. (A new game starts immediately. Haven't set up on/off/start/strict buttons yet) https://codepen.io/mattgwater/pen/qNJZqG
Sabrina Ferguson
@itsacoyote
Aug 07 2016 00:57
@jasierragarcia so you want the green/blue box and the red/pink box to be next to each other in one row?
Gary Siu
@GarySiu
Aug 07 2016 00:57
@jasierragarcia Do you have code?
Juan Sierra
@juan-sierra
Aug 07 2016 00:57
sorry I didn’t explain clearly
Sabrina Ferguson
@itsacoyote
Aug 07 2016 00:58
@AEspinal1990 yes, but in case that's not a typo, class="page-header newClass" not class=class=
AEspinal1990
@AEspinal1990
Aug 07 2016 00:58
yeah that was a typo. So yeah that didn't work. Should I just do it with a div instead and do the heading with the css?
Juan Sierra
@juan-sierra
Aug 07 2016 00:58
I’m taking the Udacity front end nanodegree and im on the responsive design section
Sabrina Ferguson
@itsacoyote
Aug 07 2016 00:58
@AEspinal1990 that's odd that it didn't work, but you can just simply copy and use the bits of styling from that class and make your own
Juan Sierra
@juan-sierra
Aug 07 2016 00:58
let me show the actual website I’m working on
Screen Shot 2016-08-06 at 8.59.25 PM.png
so if you see the main picture and the news section are 50% wide but they are not sitting next to each other
AEspinal1990
@AEspinal1990
Aug 07 2016 01:01
@itsacoyote I just set up the codepen maybe this could help. http://codepen.io/AEspinal/pen/EydqkG
Sabrina Ferguson
@itsacoyote
Aug 07 2016 01:01
@jasierragarcia if you have any added margin and padding in the containers that may affect the widths even at 50%;
AEspinal1990
@AEspinal1990
Aug 07 2016 01:01
i tried before with what you said and it didnt work so I just reverted it back to what i had
Sabrina Ferguson
@itsacoyote
Aug 07 2016 01:02
@jasierragarcia to the div containers, maybe add styling { box-sizing: border-box; }
@AEspinal1990 I'm having a look
AEspinal1990
@AEspinal1990
Aug 07 2016 01:02
@itsacoyote thank you for the help take your time
CamperBot
@camperbot
Aug 07 2016 01:02
aespinal1990 sends brownie points to @itsacoyote :sparkles: :thumbsup: :sparkles:
:cookie: 289 | @itsacoyote |http://www.freecodecamp.com/itsacoyote
Juan Sierra
@juan-sierra
Aug 07 2016 01:03
@itsacoyote I’ll check, I have box-sizing: border-box added to my css already
Sabrina Ferguson
@itsacoyote
Aug 07 2016 01:03
@jasierragarcia did you also float them left?
Juan Sierra
@juan-sierra
Aug 07 2016 01:03
if it helps I’ll send you a link to my codepen and you can resize the window
Sabrina Ferguson
@itsacoyote
Aug 07 2016 01:04
@jasierragarcia it looks like you may need a more specific identifier. Using an id instead of a class will work. Also, need to remove the margin on the h1 tag as well
@jasierragarcia sorry, wrong person, haha
@AEspinal1990 it looks like you may need a more specific identifier. Using an id instead of a class will work. Also, need to remove the margin on the h1 tag as well
@jasierragarcia please do send a codepen link
Juan Sierra
@juan-sierra
Aug 07 2016 01:05
@itsacoyote lol no worries, but yeah nothing is floating left as far as I know
give me a sec
Sabrina Ferguson
@itsacoyote
Aug 07 2016 01:06
@jasierragarcia if so, divs are block elements, they will not sit inline with each other. Quick and easy way to do that is float: left.
AEspinal1990
@AEspinal1990
Aug 07 2016 01:12
@itsacoyote So changing my class as an id and setting the top-margin to 0 got rid of half the margin. At least when I run it in the browser and not codepen. So does this means it has to be some element having a margin?
Sabrina Ferguson
@itsacoyote
Aug 07 2016 01:13
@AEspinal1990 yes, it's also an element that's causing the marging. Look inside your header tag and it's the h1 tag as well
AEspinal1990
@AEspinal1990
Aug 07 2016 01:17
So I applied margin-top:0; to .page-header , header, h1, #top and the only one that showed a difference was #top
Juan Sierra
@juan-sierra
Aug 07 2016 01:17
@itsacoyote here you go
AEspinal1990
@AEspinal1990
Aug 07 2016 01:18
and I just tried the same with padding-top
Sabrina Ferguson
@itsacoyote
Aug 07 2016 01:18
@jasierragarcia yeah, you need to add a float: left; for the two sections you want to set up next to each other.
@jasierragarcia actually, probably better is display: inline-block;
to news top-news and hero section
@AEspinal1990 #top will work over the others because it is a bit more specific. header is the most general, class is slightly more, and id is most. Bootstrap's header class's margin is overriding your custom class's margin, hence better to use an id here
@AEspinal1990 and you'll want #top h1 with a margin-top: 0
Juan Sierra
@juan-sierra
Aug 07 2016 01:22
awesome! it worked for the hero and for top-news
This message was deleted
didn’t work for the weather and recent news @itsacoyote
used float: left; though display: inline-block didn’t work @itsacoyote
Sabrina Ferguson
@itsacoyote
Aug 07 2016 01:24
@jasierragarcia cool, float is a quick and easy way, though may require some additional css tweaking. inline-block as well, but can't remember them off the top of my head.
Juan Sierra
@juan-sierra
Aug 07 2016 01:26
no worries! I appreciate your help and time a lot @itsacoyote
thanks @itsacoyote
CamperBot
@camperbot
Aug 07 2016 01:26
jasierragarcia sends brownie points to @itsacoyote :sparkles: :thumbsup: :sparkles:
:cookie: 290 | @itsacoyote |http://www.freecodecamp.com/itsacoyote
Juan Sierra
@juan-sierra
Aug 07 2016 01:26
will figure it out from here
Sabrina Ferguson
@itsacoyote
Aug 07 2016 01:26
:thumbsup:
AEspinal1990
@AEspinal1990
Aug 07 2016 01:28
@itsacoyote I think I almost got it working now. I tried the last thing you said with h1 but it didn't change so I'll keep trying different things along that line. Thanks a lot for all the help have a good night.
CamperBot
@camperbot
Aug 07 2016 01:28
aespinal1990 sends brownie points to @itsacoyote :sparkles: :thumbsup: :sparkles:
:warning: aespinal1990 already gave itsacoyote points
Sabrina Ferguson
@itsacoyote
Aug 07 2016 01:29
@AEspinal1990 your welcome, hope you get it solved!
If anyone can take a look I'd be very grateful!
Major Dills
@Major4k
Aug 07 2016 01:47
man... cant lie. This site is great.
Kevin Murphy
@kaym0
Aug 07 2016 01:53
Hey, you recommend learning Angular 2 or starting with Angular 1
I know that Angular 2 is better and considering that it's written differently than angular 1 would it even make sense to learn angular 1
Vince
@Vince33
Aug 07 2016 02:40
thanks @vinaypuppal , sorry I was having some network issues before and had to switch hats
CamperBot
@camperbot
Aug 07 2016 02:40
vince33 sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 440 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
Anshuman Patil
@anshumanpatil
Aug 07 2016 02:40
Angular 2 is better but you should have some basic nowldge abt angular system and it's process of wor so starting with angular 1 will help , as i am woring with angular 2 from last 2 yrs I thin so
Xihai Luo
@coolsday
Aug 07 2016 03:00
can someone help me with my weather API?
I am getting unsuccessful responses using AJAX to get my current position even though I had it working the other day
laststand0810
@laststand0810
Aug 07 2016 03:42
get rid of the https in codepen,use http @coolsday, ajax on openweather don't run on https
Xihai Luo
@coolsday
Aug 07 2016 03:43
@laststand0810 thank youuu
CamperBot
@camperbot
Aug 07 2016 03:43
coolsday sends brownie points to @laststand0810 :sparkles: :thumbsup: :sparkles:
:cookie: 265 | @laststand0810 |http://www.freecodecamp.com/laststand0810
willcodes
@willcodes
Aug 07 2016 04:05
any styling tips???
Ammar Hussain
@cybershotz
Aug 07 2016 04:29
blob
blob
my code is not working its giving the following error
Chris Cullen
@123xylem
Aug 07 2016 04:34
 function display(){}
  if(arr0[0]==arr1[0]&&arr0[1]==arr1[1]){
    answer.push(''+arr0[1]+' ' +arr0[2]+'" '+  ""+ arr1[2] +" "+ "");    //how do i make this display without backspace
  }

  display(total);

  return answer;
Can someone advise me how to make this function print correctly.? So far it says ["July 1st\" 23rd "] How do i remove the back slash?
Ken Haduch
@khaduch
Aug 07 2016 04:37
@123xylem - what are the inputs to this function - in other words, what do arr0 and arr1 contain?
Chris Cullen
@123xylem
Aug 07 2016 04:47
the arrs contain dates
il show u
This message was deleted
function makeFriendlyDates(arr) {

  var arr0 =arr.shift();//create first date
 arr0= arr0.split(/-/);

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

  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. adding appropruate suffix
      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[1]) {
    case "01":
        arr1[1] = "January";
        break;
    case "02":
        arr1[1]= "February";
        break;
    case "03":
        arr1[1] = "March";
        break;
    case "04":
       arr1[1] = "April";
        break;
    case "05":
       arr1[1] = "May";
        break;
    case "06":
       arr1[1] = "June";
        break;
    case "07":
       arr1[1] = "July";
     break;
   case "08":
     arr1[1] ="August";
     break;

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

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

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

   case "12":
     arr1[1] ="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;

  }

  var arrAns=[];
  var total=[];

   for(i=0;i<arr0.length;i++){//push arr0 into total
    total.push(arr0[i]);}
  for(j=0;j<arr1.length;j++){ // and push arr1
    total.push(arr1[j]);
  }    console.log(total.length);

  function display(){    // function that pushes data into array in a specific display format
  if(arr0[0]==arr1[0]&&arr0[1]==arr1[1]){
    answer.push(''+arr0[1]+' ' +arr0[2]+'" '+  ""+ arr1[2] +" "+ "");    //how do i make this display without backspace
  }
  }
  display(total);

  return answer;

}
  makeFriendlyDates(['2016-07-01', '2016-07-23']);
kushal bhatta
@kushal45
Aug 07 2016 05:52
hiii
Sorin Ruse
@sorinr
Aug 07 2016 05:55
@coolsday run your pen over http not https
Chris Cullen
@123xylem
Aug 07 2016 06:12

How do i do this

HELP.push( " var1 " " + var 2 + " (quotes to keep these togehter) + "," + var 3 + " end quotes same as first);

basically all i want to do is push some variables in an array and have the first few variables between quote marks and the last one ending with quote marks... When I do it it puts a backslash after my " ' " <quote marks

Chris Lacaille
@ChrisL108
Aug 07 2016 06:19
@123xylem If you want to put quotes within quotes you have to mix " with '
HELP.push( "This is a 'string'  "+ variable + " and 'this is a quote' within a string")
I think that's what you were asking? lol
This message was deleted
Chris Cullen
@123xylem
Aug 07 2016 06:26

@ChrisL108 yea sorry it was a bad q...

 answer.push(''+arr0[2]+" " +arr0[1]+' ' +arr0[0]+''+'"'+","+" "+  ""+ arr1[1] +" "+ arr1[2]+" "+ arr1[0] +"");}

THis is my code which gives me this

["1st July 2014\", july 23rd 2016"]

ALL I WANT TO DO IS remove the \

Chris Lacaille
@ChrisL108
Aug 07 2016 06:55
Think you have extra quotations in there lemme check
answer.push(arr0[2]+" " +arr0[1]+ " " +arr0[0]+", "+ arr1[1] +" "+ arr1[2]+" "+ arr1[0]);
you have a bunch of un-needed quotations
and it's usually good practice not to mix (")'s with (')'s, makes it harder to read.
@123xylem
But tbh idk where the \ came from so try that out.. it could be something else. Does your variable holding '2014' have the \ in it?
Safbek
@safbek
Aug 07 2016 07:12
hi! how i can to make a screenshot?Thanks!
and how to send a screenshot from your phone? is there such a function?
Chris Lacaille
@ChrisL108
Aug 07 2016 07:35
@safbek Depends on the device / operating system your on... Is it your phone?
meti98
@meti98
Aug 07 2016 07:50
Google Location doesnt work with CodePen, because it's not HTTPS, have you any solution?
Chris Lacaille
@ChrisL108
Aug 07 2016 08:27
@meti98 It has been awhile since I figured that one out but here is mine if you want to take a look
http://codepen.io/chris1545/full/EyZaQa/
It works in my Chrome browser
It's still using http but I think it was by using http://ip-api.com/json
if geolocation failed
Safbek
@safbek
Aug 07 2016 08:36
@ChrisL108 i have a laptop asus/windows 8. and phone calaxsi 3. I have not find this feature on the phone or laptop("send photo" or "to attach a file")Help, please
Chris Lacaille
@ChrisL108
Aug 07 2016 08:38
@safbek Taking a Screenshot in Windows 8 -->
Switch to the Start Screen and launch your app of choice.
To take a screenshot, hold down the Windows key and press the PrtScn (Print Screen) button on your keyboard.
This message was deleted
@safbek For your phone -->
Grab your Samsung Galaxy S3.
Navigate to the content you wish to capture.
Press and hold the 'Power' and 'Home' buttons on your device.
After a second your screen will flash and your screenshot will be saved to your 'Photos'
Norvin Burrus
@ndburrus
Aug 07 2016 08:40
@meti98 ...looking for a geocoding api?
Chris Lacaille
@ChrisL108
Aug 07 2016 08:40
Google is great :thumbsup:
Safbek
@safbek
Aug 07 2016 08:47
@ChrisL108 o you misunderstood me. I know how to take a screenshot. but I don't know how to send it in chat. since there is not see such a function. thank you for your answers! and sorry for my English
CamperBot
@camperbot
Aug 07 2016 08:47
safbek sends brownie points to @chrisl108 :sparkles: :thumbsup: :sparkles:
:cookie: 333 | @chrisl108 |http://www.freecodecamp.com/chrisl108
Chris Lacaille
@ChrisL108
Aug 07 2016 08:50
@safbek My mistake, I read through your question quickly.. if you just google "sending photo through (chat app your using)", I'm sure you'll find some answers :smile:
Safbek
@safbek
Aug 07 2016 08:52
@ChrisL108 Thanks!(
CamperBot
@camperbot
Aug 07 2016 08:52
:warning: safbek already gave chrisl108 points
safbek sends brownie points to @chrisl108 :sparkles: :thumbsup: :sparkles:
Chris Lacaille
@ChrisL108
Aug 07 2016 08:53
@safbek Good Luck! I gotta get some sleep lol
Safbek
@safbek
Aug 07 2016 08:54
@ChrisL108 and good luck to you!
John Liddel
@BreakingOceans
Aug 07 2016 09:08

Hi everyone,
I'm going to start working on the "Build a Personal Portfolio Webpage" site. However I don't know how some of the effects were done and they weren't covered in the course?
(For example the sticky menu and also the self-scrolling down to the section when clicked on in the sticky-menu)

Any help will be GREATLY appreciated, even if a link to a place to find the sources. (I don't know what these things are called, so I don't know how to Google it?)

Chris Cullen
@123xylem
Aug 07 2016 09:10
@ChrisL108 hey no the variables dont have \ .. I need the EXTRA "' " because im trying to add extra " after the first set of variables
Chris Lacaille
@ChrisL108
Aug 07 2016 09:14
@123xylem To represent a " character inside an HTML attribute delimited by " characters, use the entity "
'"'
Crap it won't let me put it lol
Safbek
@safbek
Aug 07 2016 09:15
http://www.pixic.ru/i/10C15281a3F7z8B5.png how to center the triangles as in the photo above with flexbox?
Chris Lacaille
@ChrisL108
Aug 07 2016 09:15
'''"'''
CamperBot
@camperbot
Aug 07 2016 09:15
:bulb: to format code use backticks! ``` more info
Chris Cullen
@123xylem
Aug 07 2016 09:16
is that 2 lil ones either side of a " ?
Chris Lacaille
@ChrisL108
Aug 07 2016 09:16
&quot;
Safbek
@safbek
Aug 07 2016 09:16
i get only so((help, please http://www.pixic.ru/i/c0G1E2210397b9c8.png
Chris Lacaille
@ChrisL108
Aug 07 2016 09:16
Been trying to put that but it kept putting a quotation lol
Chris Cullen
@123xylem
Aug 07 2016 09:18
so its ' ' " ' ' ?
Safbek
@safbek
Aug 07 2016 09:25
http://www.pixic.ru/i/10C15281a3F7z8B5.png
how to center the triangles as in the photo above with flexbox? i get only so((help, please http://www.pixic.ru/i/c0G1E2210397b9c8.png
Chris Cullen
@123xylem
Aug 07 2016 09:29
@ChrisL108 i didnt catch your explanation chris
Chris Lacaille
@ChrisL108
Aug 07 2016 09:34
Try using &quot; inside the string where you want the "
@123xylem
Chris Cullen
@123xylem
Aug 07 2016 09:35
ok
so its """ ?\
ok il try that
Chris Lacaille
@ChrisL108
Aug 07 2016 09:36
You'll have to put it inside back ticks for it to show on here lol
Chris Cullen
@123xylem
Aug 07 2016 09:37
hmm it just proints &quot when i do it in quotes marks
could you in put it for me?
`js answer.push(""+arr0[2]+" " +arr0[1]+', ' +arr0[0]+"&quot;" +","+" "+ '&quot;'+ arr1[1] +" "+ arr1[2]+", "+ arr1[0] +"");
Chris Lacaille
@ChrisL108
Aug 07 2016 09:40
Hmm try w/o the quotes around it? I'm not sure. I can't test it I'm on my phone right now
Sorry thought that was it lol
Sorin Ruse
@sorinr
Aug 07 2016 09:46
@safbek display: flex; flex-direction: row or column; justify-content: center; align-items: center;
Chris Lacaille
@ChrisL108
Aug 07 2016 09:49
Flexbox rules! I'm still a noob at it tho
Chris Lacaille
@ChrisL108
Aug 07 2016 09:57
@123xylem okay so using &quot; and other similar ones are for use in the actual HTML.
@123xylem If you need to embed some ", I would make all your other strings surrounded by ' to make it easier to edit
Chris Cullen
@123xylem
Aug 07 2016 10:00
I think i will just turn it into a string regex the \ out and re array it? @ChrisL108
Chris Lacaille
@ChrisL108
Aug 07 2016 10:02
LOL I mean you cannn.. it's gotta be something simple though
try putting it into a variable first?
var myVar = ""+arr0[2]+" " +arr0[1]+', ' +arr0[0]+"&quot;" +","+" "+ '&quot;'+ arr1[1] +" "+ arr1[2]+", "+ arr1[0] +"";
.push(myVar);
without the "'s lol
&quot;'s
Chris Cullen
@123xylem
Aug 07 2016 10:06
@ChrisL108 how do u mean"?
Chris Lacaille
@ChrisL108
Aug 07 2016 10:08
var myVar = ''+arr0[2]+' '+arr0[1]+', ' +arr0[0]+' " ' +', "'+ arr1[1] +' '+ arr1[2]+', '+ arr1[0] ;

whatever.push(myVar);

I just don't know what exactly is the problem, but regEx shouldn't be the answer :smirk:

If it's still adding the \ check your code to see if it might be adding that somewhere in arr1
Chris Cullen
@123xylem
Aug 07 2016 10:11
it didnt aadd the \ until i pushed it into an array
@ChrisL108
Chris Lacaille
@ChrisL108
Aug 07 2016 10:12
@123xylem is your arr1 a json object?
lol you got me man, I'd have to see the rest of your code probably. Is it in a codepen or anything?
Chris Cullen
@123xylem
Aug 07 2016 10:14

function makeFriendlyDates(arr) {

  var arr0 =arr.shift();//create first date
 arr0= arr0.split("-");

  var arr1=arr.pop();//second date
  arr1=arr1.split("-");
  var answer=[];

  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. adding appropruate suffix
      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[1]) {
    case "01":
        arr1[1] = "January";
        break;
    case "02":
        arr1[1]= "February";
        break;
    case "03":
        arr1[1] = "March";
        break;
    case "04":
       arr1[1] = "April";
        break;
    case "05":
       arr1[1] = "May";
        break;
    case "06":
       arr1[1] = "June";
        break;
    case "07":
       arr1[1] = "July";
     break;
   case "08":
     arr1[1] ="August";
     break;

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

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

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

   case "12":
     arr1[1] ="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;

  }

  var arrAns=[];
  var total=[];

   for(i=0;i<arr0.length;i++){//push arr0 into total
    total.push(arr0[i]);}
  for(j=0;j<arr1.length;j++){ // and push arr1
    total.push(arr1[j]);
  }    console.log(total.length);

  function display(){    // function that pushes data into array in a specific display format
  if(arr0[0]==arr1[0]&&arr0[1]==arr1[1]){
    answer.push(''+arr0[1]+' ' +arr0[2]+''+'"'+","+" "+  ""+ arr1[2] +" "+ ""); }
else if(arr0[0]==arr1[0]){
   answer.push(''+arr0[1]+' ' +arr0[2]+''+'"'+","+" "+  ""+ arr1[1] +" "+ arr1[2]+ "'");
}  
    else { answer.push(""+arr0[1]+" " +arr0[2]+', ' +arr0[0]+'"'  +","+" "+  ''+ arr1[1] +" "+ arr1[2]+", "+ arr1[0] +"");}
  }
  display(total);
 console.log(answer.length);
 answer= answer.join();
  answer = answer.replace(/\\\]/g, ''); 
  answer=answer.split();
  var myVar = ''+arr0[2]+' '+arr0[1]+', ' +arr0[0]+' " ' +', "'+ arr1[1] +' '+ arr1[2]+', '+ arr1[0] ;
answer.push(myVar);
  return answer;

}
  makeFriendlyDates(['2014-07-01', '2016-07-23']);
/* answer=  total.filter(function(val,index,array){//removes duplicates
Chris Lacaille
@ChrisL108
Aug 07 2016 10:15
oh lord haha
If you need to put that much code in (for future reference) creat a github "gist" :thumbsup:
I'll check it out
Faisal Zulfiqar
@faisal1337
Aug 07 2016 10:16
Can anyone direct me to some website where they keep templates or different designs for section headings like "About Me" with different styles? I couldn't find something useful.
Chris Lacaille
@ChrisL108
Aug 07 2016 10:21
@123xylem hmm is there HTML that goes along with that value (whatever the \ is popping up with) ? If there is check for typos there
Chris Cullen
@123xylem
Aug 07 2016 10:25
@ChrisL108 im gonna try it a different way
Chris Lacaille
@ChrisL108
Aug 07 2016 10:26
@123xylem you can pm me if you'd like. Gotta go... might see it on the phone tho... but Good Luck!
Safbek
@safbek
Aug 07 2016 10:38
@sorinr Thanks, I tried. But
it's not working as it should
CamperBot
@camperbot
Aug 07 2016 10:38
safbek sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 626 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Aug 07 2016 10:38
@safbek what do you mean?
Safbek
@safbek
Aug 07 2016 10:39
@sorinr @safbek display: flex; flex-direction: row or column; justify-content: center; align-items: center;
Sorin Ruse
@sorinr
Aug 07 2016 10:41
@safbek why its not working as it should? what is the problem? can you post the link to the pen?
Safbek
@safbek
Aug 07 2016 10:50
@sorinr
I did not initially in codepad so a little distorted(because it is without image)
@sorinr I'm sorry. the second link is working. and don't be afraid my code. this is my first job))
Sorin Ruse
@sorinr
Aug 07 2016 10:58
@safbek what do you want to fix. the aside class="main-aside" ?
Safbek
@safbek
Aug 07 2016 11:07
@sorinr http://www.pixic.ru/i/50Y162E1E3s9I175.png I want to center the triangles and the div with the paragraph. and I did it the only way http://www.pixic.ru/i/a00142C1k3a9M1A6.png
Mark
@cityproject
Aug 07 2016 11:09
Sorin Ruse
@sorinr
Aug 07 2016 11:10
@safbek ok. let me look into it
Safbek
@safbek
Aug 07 2016 11:13
@sorinr right now I have to head out but I'll be back! Thanky you very much!
CamperBot
@camperbot
Aug 07 2016 11:13
safbek sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:warning: safbek already gave sorinr points
Marc M
@Marc-Moeller
Aug 07 2016 11:37
Hi, is anybody interested in helping me fix some css issues ? I'm able to offer a reward :)
Sorin Ruse
@sorinr
Aug 07 2016 11:48
@safbek see only first element in experience list.this way you wanted it? project
Meet Mangukiya
@meetmangukiya
Aug 07 2016 12:10
How to just use the grid system of bootstrap and completely custom css?
Anna
@Anntol
Aug 07 2016 12:23
@meetmangukiya use only col-xs .. div styles :smile:
Meet Mangukiya
@meetmangukiya
Aug 07 2016 12:24
@Anntol it affects elements like headings, code etc.
It stylizes it
Anna
@Anntol
Aug 07 2016 12:24
@meetmangukiya but it's not the best practice to include huge library and don't use it
@meetmangukiya sure, you need to style them in your custom css
Meet Mangukiya
@meetmangukiya
Aug 07 2016 12:26
@Anntol then I guess I need to find a library, that just provides grid system
Anna
@Anntol
Aug 07 2016 12:26
@meetmangukiya yes, it's better option in your case
Mo Zargham
@Mozar10
Aug 07 2016 12:47
Hello all
I have finished my quote machine project just have no idea to complete the twitter part
can anyone point me in the right direction ?
Safbek
@safbek
Aug 07 2016 12:55
@sorinr I want to fix div "experience" and "awards" in accordance with the layout. I don't know how to explain differently. my English is bad
Sorin Ruse
@sorinr
Aug 07 2016 12:57
@safbek i was just made you an example for the first div within experience. if it is ok that way you can go on and do the same for the others
Ethan Leyden
@Darksmurf
Aug 07 2016 13:01
Once I have downloaded FCC from Github, how would I run it locally?
Safbek
@safbek
Aug 07 2016 13:08
that's just super!!!)))Thanks!!! how did you do it? unable to explain a little bit the code? how it works...
@sorinr that's just super!!!)))Thanks!!! how did you do it? unable to explain a little bit the code? how it works...
Sorin Ruse
@sorinr
Aug 07 2016 13:15
@safbek for the html part i've put some comments around changes. in the css where i have added new classes also made comments
Joel Santos
@St3ps
Aug 07 2016 13:21
how to close a collapsed(expanded?) bootstrap panel, by code? Like, as if you had clicked on it?
var isExpanded = $('#collapse1').attr('aria-expanded');
if (isExpanded) {
$('#collapse1').close //pseudo-code, but its my intention 
}
oh nvm think i found it
Safbek
@safbek
Aug 07 2016 13:30
@sorinr Thanks!!now it's clear! thanks again!))
CamperBot
@camperbot
Aug 07 2016 13:30
safbek sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 627 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Aug 07 2016 13:40
@safbek welcome. i think i've changed something also in css on the class experience
@safbek for the awards class just change in css .experience{....} to .experience, .awards{....}
Mostofa kamal
@MK-Emon
Aug 07 2016 13:44
in my build tribute page project showing that:
Unexpected token '<' at line 1, col 1.
what does this mean?
Anna
@Anntol
Aug 07 2016 14:09
@MK-Emon show your code
Mostofa kamal
@MK-Emon
Aug 07 2016 14:13
@Anntol that was the style element

.yellow-border{

border-width:5px;
border-color:yellow;
border-style:solid;
}

<img class="yellow-border center-block smaller-image" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ed/Professor_Muhammad_Yunus-_Building_Social_Business_Summit_%288758300102%29.jpg/800px-Professor_Muhammad_Yunus-_Building_Social_Business_Summit_%288758300102%29.jpg">
Anna
@Anntol
Aug 07 2016 14:14
well, error is not reproducing now?
Mostofa kamal
@MK-Emon
Aug 07 2016 14:15
it shows that same msg
now i have it. Thanx
Anna
@Anntol
Aug 07 2016 14:16
@MK-Emon where is <style>?
Mostofa kamal
@MK-Emon
Aug 07 2016 14:22
I didn't copy that. i did it. this time it's fine
Nicolas Crumrine
@CrumrineCoder
Aug 07 2016 14:22
Yo, people in HelpJavascript seem to be ignoring me, so I'm gonna repost this here. I'm having trouble with my Twitch viewer. I'm trying to understand why the JSONcall only seems to run on the 8th iteration of the for loop, as seen by the console log. http://codepen.io/CrumrineCoder/pen/ZOqRkO?editors=1012
Keith
@Penderis
Aug 07 2016 14:28
@CrumrineCoder having a look.
@CrumrineCoder what is data.stream?
Nicolas Crumrine
@CrumrineCoder
Aug 07 2016 14:29
It checks whether or not the steamer is streaming
It'll be null if they're offline
If they're online, it gives information about the stream
max77p
@max77p
Aug 07 2016 14:33
anyone can help me build slide out tab for my twitch app?
please?
Tyler Moeller
@TylerMoeller
Aug 07 2016 14:42
@CrumrineCoder You're hitting an async issue - don't call functions or APIs inside of for loops. Use a forEach instead: http://stackoverflow.com/questions/13343340/calling-an-asynchronous-function-within-a-for-loop-in-javascript
For example, replace this line for(i=0; i< names.length; i++){ with names.forEach(function(name, i) {
Nicolas Crumrine
@CrumrineCoder
Aug 07 2016 14:43
Oh, huh
Tyler Moeller
@TylerMoeller
Aug 07 2016 14:43
(and add another closing paren at the end)
Nicolas Crumrine
@CrumrineCoder
Aug 07 2016 14:43
thanks @TylerMoeller
CamperBot
@camperbot
Aug 07 2016 14:43
crumrinecoder sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 718 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Aug 07 2016 14:44
:+1:
Keith
@Penderis
Aug 07 2016 14:49
@TylerMoeller good job dude , was also fiddling inside the function now to see if I can have it update and instead of static. Thought it just some javascript quirk no idea what to call it.
Tyler Moeller
@TylerMoeller
Aug 07 2016 14:52
@Penderis I hit the same problem with my twitch.tv app, happy to help
Tyler Moeller
@TylerMoeller
Aug 07 2016 15:00
@CrumrineCoder Line 48 should be: }); - then hit the "Run" button to get it working again
Joakim Bajoul Kakaei
@Todai88
Aug 07 2016 15:13

Hi guys.
Thoughts on how to make this pen responsive; removing the static (px) widths and still allowing it to look good in a bootstrap column (md-6 / 8).

(https://codepen.io/Todai/pen/zBmRVk)

Nicolas Crumrine
@CrumrineCoder
Aug 07 2016 15:15
@TylerMoeller Thanks, I was going to figure out the problem after breakfast, but that works :D
CamperBot
@camperbot
Aug 07 2016 15:15
crumrinecoder sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: crumrinecoder already gave tylermoeller points
ahmedosamashokry
@ahmedosamashokry
Aug 07 2016 15:48
Hello guys.....I have a problem in doing the bootstrap grid.
I wrote the following code in pencode but it didn't work. The output was just the texts but each in a line not in columns.
<div class="row">
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
<div class="col-sm-4">.col-sm-4</div>
</div>
zhllx
@zhllx
Aug 07 2016 15:49
help
CamperBot
@camperbot
Aug 07 2016 15:49

CamperBot

Hi, I'm CamperBot! I can help you in this chatroom :smile:

Basic Commands:

  • find TOPIC find all entries about topic. e.g. find js
  • wiki TOPIC show contents of topic page
  • thanks @username send brownie points to another user
  • about @username shows info on that user
  • Algorithm BONFIRENAME info on a Algorithm

meet CamperBot in FreeCodeCamp/camperbotPlayground

:pencil: read more about camperbot on the FCC Wiki

ahmedosamashokry
@ahmedosamashokry
Aug 07 2016 15:50
find TOPIC
CamperBot
@camperbot
Aug 07 2016 15:50

find topic

:zero: gitter camperbot topic

Marc Vesper
@marcvesper
Aug 07 2016 16:13
i'm working through the intermediat algorithm problems, and i'm finding solutions (eventually), but my gut is telling me my solutions are ugly or clunky and there's probably much neater or less convoluted ways of doing it. the solutions i choose are clear enough in how they work, but is it important at this stage to be making them concise and avoiding unnecessary computations?
Sabrina Ferguson
@itsacoyote
Aug 07 2016 16:14

@marcvesper portions of them are actual algorithms that you learn in programming classes in school. There are definitely optimized ways of doing them and you learn how certain ways are slower.

Right now, it's just problem solving to help you learn to critically think and go about finding a way to solve the solution. You can go back and play around with it to see of different ways of improving your code. It also would be a good idea to search online to read up on certain algorithms and see example code of optimized ways.

Going into them and learning how to improve the computation is something you could spend days and hundreds of pages learning about. Definitely probably worth reading and learning down the line.
Marc Vesper
@marcvesper
Aug 07 2016 16:17
@itsacoyote i guess, yeah, the important thing is to keep moving forward, it can be perfected later. just was worried i might be ingraining bad habits without being aware
Meet Mangukiya
@meetmangukiya
Aug 07 2016 16:17
How do we set a transparent black screen in front of an image, so that the focus be on the thing that is on the image(text, etc.) and not the image in the background?
Sabrina Ferguson
@itsacoyote
Aug 07 2016 16:20
@marcvesper bad habits will likely happen along the way. Keeping yourself aware of how you're programming by reading other code and reading on algorithms can help you improve. Over time you'll get to a point where you can look at your code and say "yeah, I can improve it by doing it this way". Definitely read up on an algorithm after you completed the exercise to see other ways of solving it if you're interested!
Baku
@musiqe31
Aug 07 2016 16:25
Hello everyone, I am new to free code camp and I'm ready to learn! I have one question if anyone wants to take a shot at it.
Sabrina Ferguson
@itsacoyote
Aug 07 2016 16:27
@musiqe31 what's the question?
Joakim Bajoul Kakaei
@Todai88
Aug 07 2016 16:32
Could someone help me with telling me why the first chart is smaller (height) than the first?
https://codepen.io/Todai/pen/zBmRVk
Baku
@musiqe31
Aug 07 2016 16:33
@itsacoyote I have learned html,css, and JavaScript along with LESS and jquery from udemy but I just became a member with freecodecamp to get better assistance when I need help. I guess my question is can you land a job with those skills alone?
Sabrina Ferguson
@itsacoyote
Aug 07 2016 16:36
@musiqe31 you can, depends on the job you're looking for. With just the html/css/jquery skills, you can get a front end designer/developer role.
@musiqe31 if your javascript skills are advanced enough, you can get a slightly more UI/front end engineer role.
Baku
@musiqe31
Aug 07 2016 16:41
@itsacoyote right now I'm comfortable with a front end dev role but in the future want to move into full stack
Sabrina Ferguson
@itsacoyote
Aug 07 2016 16:42
@musiqe31 javascript can help you get pretty far in the full stack world if you want to go in that direction.
But yeah, with these general skills from FCC and Udemy, you can probably get a junior front end role
Baku
@musiqe31
Aug 07 2016 16:44
@itsacoyote thanks!
CamperBot
@camperbot
Aug 07 2016 16:44
musiqe31 sends brownie points to @itsacoyote :sparkles: :thumbsup: :sparkles:
:cookie: 298 | @itsacoyote |http://www.freecodecamp.com/itsacoyote
Sorin Ruse
@sorinr
Aug 07 2016 16:52
@Todai88 i think its something related to the chart labels. try to give a height of 300 instead of 200
Abdulaziz
@azdeveloper
Aug 07 2016 17:09
Hello
i just finished my Tribute page project, could you please check for any modifications or better coding to add
Joakim Bajoul Kakaei
@Todai88
Aug 07 2016 17:12
@sorinr Hiya. Well, that would maybe do it. But in the grand scheme of things I would like to make it responsive so that it covers a column correctly
Artis Raudive
@ar14059
Aug 07 2016 17:12
Hi everyone!
Sorin Ruse
@sorinr
Aug 07 2016 17:15
@Todai88 yea. i've tested a couple of things including a higher height but its not working.
Joakim Bajoul Kakaei
@Todai88
Aug 07 2016 17:16
@sorinr Yeah, it's really strange. I've put up an SO-question too. I need it to fit well into where the chart is on my portfolio: http://portfolio.kimput.com
Sorin Ruse
@sorinr
Aug 07 2016 17:17
@Todai88 the design chart its higher then the programming one
Joakim Bajoul Kakaei
@Todai88
Aug 07 2016 17:19
@sorinr Yep, know that. But I haven't set the height anywhere. That's what's confusing me. :/
Artis Raudive
@ar14059
Aug 07 2016 17:20
I have a problem with my wikipedia viewer, i can't execute anything inside $.getJSON function, here is my project in codepen: http://codepen.io/artisraudive/pen/JKkWXR?editors=0010 . I followed the instructions on how to solve this problem: http://stackoverflow.com/questions/18646593/jquery-simple-getjson-doesnt-work , my server request is returning statuss - 200 and in validator: jsonlint.com , it confirmed that JSON code is valid. Please help!
RHCPsnow
@RHCPsnow
Aug 07 2016 17:21
@ndburrus thanks
CamperBot
@camperbot
Aug 07 2016 17:21
rhcpsnow sends brownie points to @ndburrus :sparkles: :thumbsup: :sparkles:
:star2: 1416 | @ndburrus |http://www.freecodecamp.com/ndburrus
Sorin Ruse
@sorinr
Aug 07 2016 17:21
@Todai88 each rendered canvas get 400px width by 200px height. thats why i said the problem start from the labels in programming that push up the chart
max77p
@max77p
Aug 07 2016 17:22
need help why the .on click function is not working for my 3rd anchor item
in twitch app
anyone please?
Sorin Ruse
@sorinr
Aug 07 2016 17:22
@Todai88 i will also look into it and if i find something i'll let u know
Rasmunis
@Rasmunis
Aug 07 2016 17:31
I'm struggling with vertically centering some text inside a <div class=row>-column, any ideas?
I wanna do it responsively
Farman
@smfarman
Aug 07 2016 17:45
can anybody help me "how to target the same element with multiple jQuery Selectors"????
TomRose
@TomRose
Aug 07 2016 17:49
Guys any help? I have an image with "<div class="row">
<div class="col-xs-9">
<img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera. ">
</div>
</div>"
Why doesn't it apply to 9/12 of the screen?
Harry Adel
@harryadel
Aug 07 2016 17:55
@TomRose It looks fine to me; It doesn't take the whole screen
Do you want to center it?
while still not taking up the whole width?
@Rasmunis What about applying the class "center-block" to whichever element you want to center?
or maybe in your css use text-align : center;
@smfarman I don't really get your point, so please share your codepen
Norvin Burrus
@ndburrus
Aug 07 2016 18:02
@smfarman resolved?
GordonBme
@GordonBme
Aug 07 2016 18:02
@ndburrus are u a mod here?
Farman
@smfarman
Aug 07 2016 18:02
@ndburrus not yet
Norvin Burrus
@ndburrus
Aug 07 2016 18:02
@GordonBme no.
@smfarman can you post the script code please? :)
GordonBme
@GordonBme
Aug 07 2016 18:03
it will be the css im sure
Farman
@smfarman
Aug 07 2016 18:03

@ndburrus

<script>
$(document).ready(function() {


$("button") .addClass();
$(".btn") .addClass();
$("#target1") .addClass();

});
</script>

Norvin Burrus
@ndburrus
Aug 07 2016 18:04

@smfarman ok, we haven't identified the classes to be added
reference instructions, here:

  • Add the animated class to all elements with type button.
  • Add the shake class to all the buttons with class .btn.
  • Add the btn-primary class to the button with id #target1.

also, we have .btn & #target in the code, but we need 1 more, right? we need #target1 (see 3rd bullet)

GordonBme
@GordonBme
Aug 07 2016 18:04
the js is not styling the page
Farman
@smfarman
Aug 07 2016 18:04
@ndburrus shake, animated, and btn-primary
@ndburrus i really can't understand the mentioned instructions in this challenge
@ndburrus yes you r right
Joakim Bajoul Kakaei
@Todai88
Aug 07 2016 18:07
Hey guys.
As I'm getting very little response on the other chats I thought I'd take a leap and hope you guys might have an idea on how to solve my issue.
I want my unordered list to work responsively, basically having the <ul> take up a full md-8 column and being formatted (height-wise) well.
This is the pen:
https://codepen.io/Todai/pen/zBmRVk
Norvin Burrus
@ndburrus
Aug 07 2016 18:07
@smfarman so, are we ready to update the code?
GordonBme
@GordonBme
Aug 07 2016 18:07
@Todai88 u need to do ur selector combo's right
in css
Farman
@smfarman
Aug 07 2016 18:08
@ndburrus yes bro
Norvin Burrus
@ndburrus
Aug 07 2016 18:08
@smfarman let's see it! :+1:
Joakim Bajoul Kakaei
@Todai88
Aug 07 2016 18:08
@GordonBme eh?
TomRose
@TomRose
Aug 07 2016 18:09
@Harry97Why doesn't the row and the col-xs-9 affect it?
GordonBme
@GordonBme
Aug 07 2016 18:09
ul li {blah-blah: 10 px} and so on @Todai88
Harry Adel
@harryadel
Aug 07 2016 18:10

http://codepen.io/Hadouken/pen/bEmymd

How can I chain two countdown function in order for me to start counting the break time after the session time is over?

functions*
Joakim Bajoul Kakaei
@Todai88
Aug 07 2016 18:10
Yeah, have tried that too. I'm assuming you mean to work with the <li> element by widening it? @GordonBme
GordonBme
@GordonBme
Aug 07 2016 18:10
@Todai88 yes
Joakim Bajoul Kakaei
@Todai88
Aug 07 2016 18:10
@GordonBme All that happens then is that the canvas elements decide to go on top of eachother
Harry Adel
@harryadel
Aug 07 2016 18:11
Also, It stops at -1:59. How can I get it to stop at 0:00 instead?
GordonBme
@GordonBme
Aug 07 2016 18:11
@Todai88 if something dosnt work in css but try look at the html and think, whats the ul li wrapped in also, sometimes when u even add a div ul li {blah} it sorts out all ya problems ;)
@Todai88 i dont use bootstrap
Mikail Bayram
@mikail1998
Aug 07 2016 18:20
http://codepen.io/mikail1998/pen/yJxwmK im on the js calculator challenge and for now im trying to write down the numbers i click in the box, the problem is they are outputing downward what should i do?
Harry Adel
@harryadel
Aug 07 2016 18:21
@mikail1998 What do you mean by "downward"?
Mikail Bayram
@mikail1998
Aug 07 2016 18:21
type in the numbers
and you will understand
i mean clicj
Harry Adel
@harryadel
Aug 07 2016 18:23
@mikail1998 How about setting a width and height for it?
Darth Skywalker
@adityaparab
Aug 07 2016 18:23
@mikail1998 : I don't understand why you're wrapping your numbers in a p tag before appending them to your #result
Anyway, add this to your CSS and it should work
p{
  display:inline-block;
}
Harry Adel
@harryadel
Aug 07 2016 18:24
+1 yeah @adityaparab He's right
Mikail Bayram
@mikail1998
Aug 07 2016 18:24
@adityaparab because i tried the way you told me
and it didnt work
@adityaparab thank you anyway it works now
CamperBot
@camperbot
Aug 07 2016 18:25
mikail1998 sends brownie points to @adityaparab :sparkles: :thumbsup: :sparkles:
:cookie: 511 | @adityaparab |http://www.freecodecamp.com/adityaparab
Mikail Bayram
@mikail1998
Aug 07 2016 18:25
@Harry97 thank you too, you tried to help +1
CamperBot
@camperbot
Aug 07 2016 18:25
mikail1998 sends brownie points to @harry97 :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for harry97
Darth Skywalker
@adityaparab
Aug 07 2016 18:25
Just a note, p is a block level element. So by natural order of placement, the block level elements are set to display: block meaning they will be rendered in vertical fashion
GordonBme
@GordonBme
Aug 07 2016 18:25
@adityaparab wouldnt the display mess with bootstrap?
Harry Adel
@harryadel
Aug 07 2016 18:25
@mikail1998 lol I did nothing
Darth Skywalker
@adityaparab
Aug 07 2016 18:26
for your requirement, span is a correct that over p

@mikail1998

@adityaparab because i tried the way you told me

I'm sorry but I tend to forget things. What did I tell you?

GordonBme
@GordonBme
Aug 07 2016 18:26
@GordonBme display tells the browser how it wants to appear right, and im sure that display would be used in that boostrap framework also
Mikail Bayram
@mikail1998
Aug 07 2016 18:26
@adityaparab I knew why that happened but didnt know how to solve
Harry Adel
@harryadel
Aug 07 2016 18:26
and btw you're code is a bit redundant when it comes to the buttons
Mikail Bayram
@mikail1998
Aug 07 2016 18:26
I don't understand why you're wrapping your numbers in a p tag before appending them to your #result
@Harry97 i know it is
Darth Skywalker
@adityaparab
Aug 07 2016 18:27
@mikail1998 : Oh! Did I tell you to wrap them in a p tag?
GordonBme
@GordonBme
Aug 07 2016 18:27
@adityaparab i wouldnt teach these guys display i dont think
Darth Skywalker
@adityaparab
Aug 07 2016 18:27
If I said that, #FML :laughing:
Mikail Bayram
@mikail1998
Aug 07 2016 18:27
@adityaparab you dont get me do you?
Harry Adel
@harryadel
Aug 07 2016 18:27
then why not add a class to all of your num buttons so when they are clicked you simply add their text to your #result ?
GordonBme
@GordonBme
Aug 07 2016 18:27
@adityaparab display tells the browser how it wants to appear right, and im sure that display would be used in that boostrap framework also
i meant
u care messing with fire i think
Darth Skywalker
@adityaparab
Aug 07 2016 18:28
@GordonBme : display is a native CSS property and has nothing to do with bootstrap.
GordonBme
@GordonBme
Aug 07 2016 18:28
@adityaparab how wrong u are lol
Mikail Bayram
@mikail1998
Aug 07 2016 18:29
@adityaparab look if you dont wrap them before appending it wont display
GordonBme
@GordonBme
Aug 07 2016 18:29
@adityaparab u guys need to learn how the browser actually works
Darth Skywalker
@adityaparab
Aug 07 2016 18:29

Although I do agree that using css like

p {
}

That will screw up the framework. So it will be wise to contextualize it like

.calc p {
}
Mikail Bayram
@mikail1998
Aug 07 2016 18:29
@GordonBme it works just fine with what @adityaparab told me
it didnt mess my boostrap
GordonBme
@GordonBme
Aug 07 2016 18:30
@adityaparab yes that code u are calling a p in all .calc classes
Harry Adel
@harryadel
Aug 07 2016 18:30
Any thoughts on why this code might be malfunctioning?

       $.when($.ajax(function() { countdown(work)})).then(function () {

    countdown(chill);

});
GordonBme
@GordonBme
Aug 07 2016 18:31
@mikail1998 try to understand how the browser works and u will soon realise what i mean and how bootstrap can be soooo messed up
@mikail1998 by just adding any css u want
Mikail Bayram
@mikail1998
Aug 07 2016 18:32
@GordonBme could you be more specific
Darth Skywalker
@adityaparab
Aug 07 2016 18:32
@GordonBme : That's a valid concern when you're working in a team because people tend to get messy. As long as you're working on your own code, that shouldn't be the issue.
GordonBme
@GordonBme
Aug 07 2016 18:32
@mikail1998 i already have like 5 times, but il paste a previous comment, 1 sec
Darth Skywalker
@adityaparab
Aug 07 2016 18:33
@Harry97 : That's because $.ajax expects an Object as an argument, not a Function object.
GordonBme
@GordonBme
Aug 07 2016 18:33
yes but people dont also realise that the browser will read the <head></head> tags from top to bottom, so whatever is in that bootstrap link is put at top in the head tags right???, then u put the style tags underneath it, the style tags will be read last by the browser and will be taken as the actual css thats produced, so whatever is in that bootstrap link might get messed and u wont get responsive page, whatever the browser reads last will take precedence
@adityaparab @mikail1998
ive only been learning html.css for 3 months folks
its not hard
Harry Adel
@harryadel
Aug 07 2016 18:34
@adityaparab Well, is there a better way to run a function when other function is completed?
GordonBme
@GordonBme
Aug 07 2016 18:34
learn how the browser works
Darth Skywalker
@adityaparab
Aug 07 2016 18:35
@GordonBme : You are right. It might. Keyword - might. That is why I said one needs to contextualize their styling.
GordonBme
@GordonBme
Aug 07 2016 18:36
@adityaparab yes and im sure that bootstrap link will have used display already
@adityaparab so adding another display property to css will surely mess up the boostrap display properly
Darth Skywalker
@adityaparab
Aug 07 2016 18:37
@GordonBme : Bootstrap does use display properties. What I said is display is a native CSS property and has nothing to do with bootstrap. That means, it is not something bootstrap has introduced.
GordonBme
@GordonBme
Aug 07 2016 18:37
@adityaparab yes but reread up above how i stated the browser works, u aint getting it
@adityaparab what if the style tags were above the bootstrap link in the head tags???
Darth Skywalker
@adityaparab
Aug 07 2016 18:38
@GordonBme : Apparently, using default bootstrap style didn't work for what @mikail1998 wants to do. So we need to override them
GordonBme
@GordonBme
Aug 07 2016 18:38
what get read last by the browser?
@adityaparab
think
Darth Skywalker
@adityaparab
Aug 07 2016 18:38

@adityaparab what if the style tags were above the bootstrap link in the head tags???

Then our styling will be overriden by the bootstrap

GordonBme
@GordonBme
Aug 07 2016 18:39
nope
other way round
Darth Skywalker
@adityaparab
Aug 07 2016 18:39
you mean <style> or <link?
GordonBme
@GordonBme
Aug 07 2016 18:39
the browser reads from top to bottom, so whatever is read last takes takes precedence @adityaparab
@adityaparab see this is what i mean when i say people dont get the true concept of css
Darth Skywalker
@adityaparab
Aug 07 2016 18:44

@GordonBme :

Just a question

<style>
p {
    display: inline-block;
}
</style>

<link .. link to bootstrap>

<body>
    <p> test 1</p>
    <p> test 2</p>
    <p> test 3</p>
</body>

What will be the output?

Will the

test 1 test 2 test 3

or

test 1
test 2
test 3
GordonBme
@GordonBme
Aug 07 2016 18:45
@adityaparab lmao, u think i said that to be mean???? get off ya high horse, i was stating facts not trying to put people down u bloody tool
some people
smh
Darth Skywalker
@adityaparab
Aug 07 2016 18:45
Yeah... What would be the output.. Because I think you have a a little wrong understanding of styles are applied
There is a difference between what is read first and what gets the preference
GordonBme
@GordonBme
Aug 07 2016 18:46
@adityaparab just dont try state something u dont know about in future then i wont have to correct u ;) cya
Joel Santos
@St3ps
Aug 07 2016 19:01
/*how to access keys inside a object? like so:*/
var a = {
k1:  "duck",
k2: k1 + "tales, i dnno, something"
}
Muhammad Hasham
@MohammadHasham
Aug 07 2016 19:03
how can i center table elements
they are not being centered
@adityaparab
@Harry97
Mikail Bayram
@mikail1998
Aug 07 2016 19:04
<div class='center-block'>
Darth Skywalker
@adityaparab
Aug 07 2016 19:05
@MohammadHasham : code please.
Muhammad Hasham
@MohammadHasham
Aug 07 2016 19:06
done
@mikail1998 Thanks
CamperBot
@camperbot
Aug 07 2016 19:06
:cookie: 240 | @mikail1998 |http://www.freecodecamp.com/mikail1998
mohammadhasham sends brownie points to @mikail1998 :sparkles: :thumbsup: :sparkles:
Muhammad Hasham
@MohammadHasham
Aug 07 2016 19:06
@adityaparab Thanks
CamperBot
@camperbot
Aug 07 2016 19:06
mohammadhasham sends brownie points to @adityaparab :sparkles: :thumbsup: :sparkles:
:cookie: 513 | @adityaparab |http://www.freecodecamp.com/adityaparab
Darth Skywalker
@adityaparab
Aug 07 2016 19:06
you could just set style = "text-align:center;"
Muhammad Hasham
@MohammadHasham
Aug 07 2016 19:07
did that but it didn't worked out for me
Mikail Bayram
@mikail1998
Aug 07 2016 19:08
@MohammadHasham im glad i could help +1
UtkarshShukla7
@UtkarshShukla7
Aug 07 2016 19:12
@St3ps This seems to work
var a = {
k1:  "duck",
k2:  a.k1 + "tales, i dnno, something"
}
Mikail Bayram
@mikail1998
Aug 07 2016 19:16
http://codepen.io/mikail1998/pen/yJxwmK how will i prevent 0,/,*,-,+ from typing in the box if the box is empty
Darth Skywalker
@adityaparab
Aug 07 2016 19:18
@mikail1998 : You're gonna need some major refactoring mate!
With your current architecture, you're gonna need to add an if condition in all the math operation buttons to check for validity of the contents of the #result and then decide whether to append or not
Darth Skywalker
@adityaparab
Aug 07 2016 19:24

@mikail1998 :

You can replace all your click handlers with

$('div[class*="col-"]').on('click', function(){
    var clickedButton = $(this).find('p').text();
    console.log(clickedButton); // clickedButton will have the content of the button you just clicked
    $('#result').append('<p>'+clickedButton+'</p>');
});
Mikail Bayram
@mikail1998
Aug 07 2016 19:26
@adityaparab could you tell me how will the if condition work, i think that at this point it will be easier to add if to all the math operations
but i see now that my buttons are messed up
Darth Skywalker
@adityaparab
Aug 07 2016 19:27
@mikail1998 : They are not messed up per say, but there is not common place where you can determine whether to append or not at one location.
You could use a regular expression to see if there are numbers present.
Mikail Bayram
@mikail1998
Aug 07 2016 19:29
This message was deleted
Darth Skywalker
@adityaparab
Aug 07 2016 19:29
if number are present and the user clicks math sign button, then allow the append
Mikail Bayram
@mikail1998
Aug 07 2016 19:29
i tried that with $.isNumeric
but failed
Darth Skywalker
@adityaparab
Aug 07 2016 19:30
if the number are not present and the user clicks math sign button, don't append
I don't see how $.isNumeric is of any use here
Mikail Bayram
@mikail1998
Aug 07 2016 19:30
if($.isNumeric(#result)){bla bla}
Darth Skywalker
@adityaparab
Aug 07 2016 19:33

@mikail1998

Correct way of doing it is if($.isNumeric($('#result').html()){ blah blah }

correction : $('#result').text()
Mikail Bayram
@mikail1998
Aug 07 2016 19:34
@adityaparab ahaaa so you say that may work?
Darth Skywalker
@adityaparab
Aug 07 2016 19:34
It should
use .text instead of .html
Mikail Bayram
@mikail1998
Aug 07 2016 19:36
why is it giving an error now
Fabien Lenoir
@flenoir
Aug 07 2016 19:37
hi
i'm a little bit stuck with my Wikipedia API code, can anyone help ?
````
````

$("#submit").on("click",function(){

  $.search = $(".input").val();
  console.log($.search);
  $.request = "https://en.wikipedia.org/w/api.php?action=query&list=search&format=json&srsearch=" + $.search + "&callback=?";
  console.log($.request);

  $.ajax({
    url: $.request,
    type: 'GET',
    data:{
      format :'json'
    },
    dataType: 'jsonp',
    success: function(data){
      //console.log(data);
      $.dataLength = data.query.search.length;
      console.log(data.query.search.length);
      console.log(data.query.search[0].title);
        $("#array").html(data.query.search[0].title);
    },
    error:function(){
      $(".error").text("an error occured");
    }

  })


})
i want to update my div named "array" but it doesn't
Darth Skywalker
@adityaparab
Aug 07 2016 19:40
@mikail1998 : I can't understand what you're doing.
Mikail Bayram
@mikail1998
Aug 07 2016 19:41
@adityaparab never mind, i think i dont understand it either :D
a
@adityaparab thank you
CamperBot
@camperbot
Aug 07 2016 19:41
mikail1998 sends brownie points to @adityaparab :sparkles: :thumbsup: :sparkles:
:cookie: 515 | @adityaparab |http://www.freecodecamp.com/adityaparab
Darth Skywalker
@adityaparab
Aug 07 2016 19:44

@mikail1998 : You're making it way too complicated.

here is a good point for you to start

$(document).ready(function() {
    $('div[class*="col-"]').on('click', function(){
      var clickedButton = $(this).find('p').text();
      if(clickedButton === 'CE'){
        $('#result').html('');
      } else {
        if(!isNaN(parseInt(clickedButton))){
          $('#result').append('<p>'+ clickedButton +'</p>');
        } else {
          console.log('Math operation button clicked');
        }
      }
    });
  });
Mikail Bayram
@mikail1998
Aug 07 2016 19:50
@adityaparab im geting confused over this part var clickedButton = $(this).find('p').text();
Darth Skywalker
@adityaparab
Aug 07 2016 19:53

Check your html code.

what you've done is you have multiple divs with 2 classes, col-md-3 and col-xs-3

The first line is $('div[class*="col-"]') - It mean select all the divs that have a class that begins with col-

Then inside this div, your content goes inside p tag.

<div class="col-md-3 col-xs-3">
    <p>1</p>
</div>

We have bound a click event handler to divs that hav have class name containing col-

when user clicks that div, we want content within p tag that is inside that div
so we need to find a p tag inside a div that is currently clicked (this)
so $(this).find('p').text()
Mikail Bayram
@mikail1998
Aug 07 2016 19:55
@adityaparab wow i get it and must say i like your way more :D
Darth Skywalker
@adityaparab
Aug 07 2016 19:55

on a second thought I believe

$(this).text() would work equally fine

The same way we're extracting contents of $('#result).text()
Mikail Bayram
@mikail1998
Aug 07 2016 19:56
@adityaparab yes it works omg!!!
thank you
Darth Skywalker
@adityaparab
Aug 07 2016 19:57
Now! fill in the blanks!
Mikail Bayram
@mikail1998
Aug 07 2016 19:57
yess yes i get it
thank you @adityaparab
CamperBot
@camperbot
Aug 07 2016 19:57
:warning: mikail1998 already gave adityaparab points
mikail1998 sends brownie points to @adityaparab :sparkles: :thumbsup: :sparkles:
Mikail Bayram
@mikail1998
Aug 07 2016 19:57
ill try later again
Kreemly
@Krono08
Aug 07 2016 20:00
Hello can somebody help me and give me tips to build my personal portfolio project ? i am stuck and don`t know what to do and in which order to do it ? i want to use bootstrap as well but know only a minimal part of its functionality....? can you help me please ?
Fabien Lenoir
@flenoir
Aug 07 2016 20:09
hi, my getJSON method doesn't seem to work, anyone can help ?
```
$("#submit").on("click",function(){

  $.search = $(".input").val();
  console.log($.search);
  $.request = "https://en.wikipedia.org/w/api.php?action=query&list=search&format=json&srsearch=" + $.search + "&callback=?";
  console.log($.request);

  $.getJSON($.request,function(){
     console.log("success");
i don't have my "success console.log
anyone ?
Milo Hartsoe
@MiloATH
Aug 07 2016 20:12
You need to be careful with getJSON
Stephen James
@sjames1958gm
Aug 07 2016 20:12
@flenoir Where are you running this? Any errors in the console?
Muhammad Hasham
@MohammadHasham
Aug 07 2016 20:13
How can i add the background image of a table?
andrewvazquez
@andrewvazquez
Aug 07 2016 20:13
Hi Guys. I hope everyone is doing well.
Fabien Lenoir
@flenoir
Aug 07 2016 20:13
i run this code on code pen, no errors on console
Milo Hartsoe
@MiloATH
Aug 07 2016 20:13
@flenoir there is lag with getJSON, make sure to either use a callback function or modify the from func
andrewvazquez
@andrewvazquez
Aug 07 2016 20:13
I'm working on my tribute page and I'm actually kind of stuck
Milo Hartsoe
@MiloATH
Aug 07 2016 20:13
of json
Stephen James
@sjames1958gm
Aug 07 2016 20:13
@flenoir can you post a link?
Muhammad Hasham
@MohammadHasham
Aug 07 2016 20:13
How can i add the background image of a table?
@MiloATH @flenoir @Krono08 @sjames1958gm
andrewvazquez
@andrewvazquez
Aug 07 2016 20:13
In looking at the sample website displayed it looks like the central image has margins
Can I add margins to the div container in boostrap?
I'm not quite sure how to achieve the same look
Stephen James
@sjames1958gm
Aug 07 2016 20:14
@MohammadHasham There is the css background image property
Muhammad Hasham
@MohammadHasham
Aug 07 2016 20:14
oka
Fabien Lenoir
@flenoir
Aug 07 2016 20:15
is the wikipedia API stable ?
Stephen James
@sjames1958gm
Aug 07 2016 20:16
@flenoir You have your button in a form and it is trying to submit the form and reseting the page.
$("#submit").on("click",function(e){
  e.preventDefaults()
@flenoir Add that to your click handler or remove the form tags.
Sabrina Ferguson
@itsacoyote
Aug 07 2016 20:17
This message was deleted
Stephen James
@sjames1958gm
Aug 07 2016 20:17
@MohammadHasham Here is how to do it via CSS
$("html").css("background-image", 'url(' + urlvar + ')');
Fabien Lenoir
@flenoir
Aug 07 2016 20:19
@sjames1958gm i added the preventDefaults but it seems to be worse
Muhammad Hasham
@MohammadHasham
Aug 07 2016 20:20
@sjames1958gm
why my paragraph color is not changing
http://codepen.io/Mohammad_Hasham/pen/VjEBqN
Cage Echarte
@CageEcharte
Aug 07 2016 20:21
does anyone know how to code a scroll down navigation bar?
Fabien Lenoir
@flenoir
Aug 07 2016 20:21
@sjames1958gm i removed the form tag, and it's much better, thank you
CamperBot
@camperbot
Aug 07 2016 20:21
flenoir sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 2396 | @sjames1958gm |http://www.freecodecamp.com/sjames1958gm
Stephen James
@sjames1958gm
Aug 07 2016 20:23
@MohammadHasham You mean on mouseeover?
Muhammad Hasham
@MohammadHasham
Aug 07 2016 20:24
@sjames1958gm yes actually when the page loads
andrewvazquez
@andrewvazquez
Aug 07 2016 20:28
Hello
Anyone available to answer a quick question?
Tyler Moeller
@TylerMoeller
Aug 07 2016 20:32
@andrewvazquez sure
andrewvazquez
@andrewvazquez
Aug 07 2016 20:33
I'm working on building the tribute page challenge
What I'm stumped on is how there seems to be a margin at the top and bottom
As well as on the sides
I've tried margins and padding and so far I've not managed to re-create the look of what is going on there.
Tyler Moeller
@TylerMoeller
Aug 07 2016 20:34
@andrewvazquez They're using a bootstrap component called a "Jumbotron": http://getbootstrap.com/components/#jumbotron
andrewvazquez
@andrewvazquez
Aug 07 2016 20:35
HMm.
Thanks
Tyler Moeller
@TylerMoeller
Aug 07 2016 20:35
That gives the light grey background, padding, and rounded corners
andrewvazquez
@andrewvazquez
Aug 07 2016 20:35
And then from there
I assume I can create a div inside there
to store everything else.
Stephen James
@sjames1958gm
Aug 07 2016 20:36
@MohammadHasham I'm confused what your issue is
Tyler Moeller
@TylerMoeller
Aug 07 2016 20:36
@andrewvazquez Yes, add any HTML you want to the jumbotron
<img>, <h2>, etc.
andrewvazquez
@andrewvazquez
Aug 07 2016 20:36
Thanks for the help
Tyler Moeller
@TylerMoeller
Aug 07 2016 20:36
No problem
andrewvazquez
@andrewvazquez
Aug 07 2016 20:36
I was stuck on it for a few hours
Chiebuka Lebechi
@chiebukalebechi
Aug 07 2016 20:38
same, i'm working on that project too @andrewvazquez
andrewvazquez
@andrewvazquez
Aug 07 2016 20:39
@chiebukalebechi How's it going for you?
@andrewvazquez ^
still working on getting content on there and making it look good
Joakim Bajoul Kakaei
@Todai88
Aug 07 2016 20:58
Could someone tell me why my "Scroll-spy" doesn't fire off?
https://codepen.io/Todai/pen/zBmRVk
Adam Jacks
@AdamHJ123
Aug 07 2016 21:11
Guys I have an issue with my pen. The arrow is in the correct position when the link is: http://s.codepen.io/AdamHJacks/debug/BzqxZY
However if the link has #top at the end then the arrow appears at the top:
http://s.codepen.io/AdamHJacks/debug/BzqxZY#top
Alique Williams
@AliqueWilliams
Aug 07 2016 21:12
Anyone use materialize css before?
Tyler Moeller
@TylerMoeller
Aug 07 2016 21:15
@AliqueWilliams Yes, I've used materialize
Baku
@musiqe31
Aug 07 2016 21:22
Hey what's the number mean on freecodecamp when you go to the menu? [30]
Stephen James
@sjames1958gm
Aug 07 2016 21:22
help brownies
CamperBot
@camperbot
Aug 07 2016 21:22
no wiki entry for: brownies
Stephen James
@sjames1958gm
Aug 07 2016 21:22
help points
CamperBot
@camperbot
Aug 07 2016 21:22

:point_right: brownie points [wiki]

Brownie Points

The number beside your picture on Free Code Camp tells you how many Brownie Points you have.

A user profile picture next to a with Brownie Points score

There are two ways you can get Brownie Points:

  1. Complete challenges - you get one point per challenge you complete
  2. Help other campers in chat - each time you help another camper and they thank you (by typing "thanks @yourname"), you will get a point

Brownie Points help you look like the kind of person who codes a lot, shares relevant links, and helps people.

They also add to your Streak.

:pencil: read more about brownie points on the FCC Wiki

Stephen James
@sjames1958gm
Aug 07 2016 21:23
@musiqe31 :point_up:
Baku
@musiqe31
Aug 07 2016 21:23
Hey thanks
Stephen James
@sjames1958gm
Aug 07 2016 21:24
about @musiqe31
CamperBot
@camperbot
Aug 07 2016 21:24
:cookie: 20 | @musiqe31 |http://www.freecodecamp.com/musiqe31
Stephen James
@sjames1958gm
Aug 07 2016 21:24
@musiqe31 You can see your own here as well
Baku
@musiqe31
Aug 07 2016 21:24
Oh ok thanks @sjames1958gm
CamperBot
@camperbot
Aug 07 2016 21:24
musiqe31 sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 2401 | @sjames1958gm |http://www.freecodecamp.com/sjames1958gm
Ryan Williams
@Ryanwfile
Aug 07 2016 21:28
Can some one please help me with some code for the simon project. I am trying to have the user click a button for every iteration of a for loop but can't seem to figure out how to do this. Thank you very much for any help.
function clicker()
{
  //console.log("Clicker has been called");
  //console.log("Order length is " + order.length);
  for (var i = 0; i < order.length; i++)
  {
    //console.log("i is " + i);
    $('.sector').on('click',function()//Handles the user's button clicks
    {
      //console.log("The order array is [" + order + "]");
      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 button click function 
 }//ends for loop

beeper();//random light generation function 
}
ahammadunny
@ahammadunny
Aug 07 2016 21:34
IHow can I add bootstrap to my css or html window? I tried 'QUICK AD'. But it does not seem to work
Jacob Stewart
@JacobStewart1
Aug 07 2016 21:36
hey im having trouble aligning a text box and a button nd i cant figure out how to put them together can anyone help
nevermind i figured it out
Tyler Moeller
@TylerMoeller
Aug 07 2016 21:41
@ahammadunny Quick Add should work fine. Here are detailed instructions, just in case something is getting overlooked https://blog.codepen.io/documentation/editor/adding-external-resources/.
You could also just add this to the "Stuff for Head" in your codepen's general settings:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
@Ryanwfile setTimeout won't work that way in a for loop. Here is an explanation with some approaches to consider: http://stackoverflow.com/questions/5226285/settimeout-in-for-loop-does-not-print-consecutive-values
You could also check out jQuery's .queue() and .promise() instead of using setTimeout
Ryan Williams
@Ryanwfile
Aug 07 2016 21:43
@TylerMoeller Thank you I will look into those.
CamperBot
@camperbot
Aug 07 2016 21:43
ryanwfile sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 719 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
ahmedtaha11
@ahmedtaha11
Aug 07 2016 21:44
hey gues how to attribute set to # :smile:
:worried: sorry for herf
Tyler Moeller
@TylerMoeller
Aug 07 2016 21:53
@ahmedtaha11 <a href="#">Link Text</a>
@Todai88 You need to add bootstrap.js to get scroll spy working, but there are other issues as well in your web page. I'm getting 12 404 (not found) errors because of several broken links to .js and .css files.
Dario Idrovo
@djidrovo1
Aug 07 2016 21:55
Hi all! Question
why is my contact form messed up? It was well aligned and everything and not it's just all over the place
now**
Sabrina Ferguson
@itsacoyote
Aug 07 2016 21:59
@djidrovo1 it may be because first off your using a table for laying out the content of your form. Try to avoid using tables for structuring the layout of your page unless it's table data.
Dario Idrovo
@djidrovo1
Aug 07 2016 22:00
I had it as a non table, and somebody told me to make it a table, I will put it back the where it was, in my pen is how it was before
Sabrina Ferguson
@itsacoyote
Aug 07 2016 22:00
@djidrovo1 It also looks like you're using Bootstrap, definitely no need for tables to layout your form. Look up the Bootstrap docs for forms.
Dario Idrovo
@djidrovo1
Aug 07 2016 22:01
this is how I had it before
Sabrina Ferguson
@itsacoyote
Aug 07 2016 22:01
@djidrovo1 well whoever said to put it in tables is very wrong. We try to avoid using tables nowadays outside of it's specific purpose, to layout data in a table format.
Dario Idrovo
@djidrovo1
Aug 07 2016 22:02
@itsacoyote thanks for your help :D
CamperBot
@camperbot
Aug 07 2016 22:02
djidrovo1 sends brownie points to @itsacoyote :sparkles: :thumbsup: :sparkles:
:cookie: 307 | @itsacoyote |http://www.freecodecamp.com/itsacoyote
Dario Idrovo
@djidrovo1
Aug 07 2016 22:04
@itsacoyote it worked!! removed all the td and tr and it looks perfect now :)
Sabrina Ferguson
@itsacoyote
Aug 07 2016 22:04
@djidrovo1 great! :thumbsup:
Nick Irvine
@irvin3
Aug 07 2016 22:11
Hey guys im trying to finish up my Pomodoro clock and am having some slight problems with one function. Essentially I need my function that runs when you click #begin once my session timer is up to run my break timer
I think its just some scope error or something, but I cant identify the problem. If anyone is willing to take a look at my code please let me know
Sergio
@serg337
Aug 07 2016 22:15
Hi guys! Noob question, I’m on the Tribute Page challenge, and I’ve got everything done except for one thing that’s driving me nuts! How do I align the text that comes after the <ul> to the bullets? I’ve tried searching but I can’t seem to find it
I’ve found some stuff, but they all involve a style sheet, and I’m not supposed to have one…how can I format the inside the tag?
Tyler Moeller
@TylerMoeller
Aug 07 2016 22:20
@irvin3 It helps to have your timer code in a function, like function timer(time), then you pass in the variable "time" as the break time or session time. When the clock reaches 0, you call timer(time) again.
@serg337 You can definitely use a stylesheet - it's the "CSS" portion of codepen. No need to use inline styles. I'm not sure what you mean by aligning the text that comes after the <ul> though, can you give a link to your codepen and example of how you want it to look?
Nick Irvine
@irvin3
Aug 07 2016 22:24
@TylerMoeller would you mind taking a look at my code? I essentially need to change the value of var x to BreakT after my SeshT is 0
Sergio
@serg337
Aug 07 2016 22:25
@TylerMoeller thanks! the reference for the challenge is https://codepen.io/FreeCodeCamp/full/NNvBQW/ the part that I need to solve is at the end, you’ll see the quoted text that comes after the list is aligned with the bullet, that’s what I can’t do...and the guy that set the challenge says he did it all with bootstrap and didn’t use CSS :(
CamperBot
@camperbot
Aug 07 2016 22:25
serg337 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 720 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Aug 07 2016 22:26
@irvin3 Looks like khaduch may already be helping you. From a quick glance, I recommend taking your anonymous click function code for #begin and moving it to a new function that accepts an argument of either seshT or breakT.
Sergio
@serg337
Aug 07 2016 22:26
so far I’ve done it all with inline style :) except for that alignment …it’s maddening
Tyler Moeller
@TylerMoeller
Aug 07 2016 22:28
@serg337 They are using the bootstrap grid for this. All of the bullet list and the quote below is in a single column. You can adjust the width of that column based on the size of the screen. No CSS needed :) Are you familiar with the bootstrap grid?
Sergio
@serg337
Aug 07 2016 22:29
just beginning - not sooooo familiar yet if you’ve got 2 minutes, heres my pen http://codepen.io/serg337/pen/AXmvJE?editors=1000
Nick Irvine
@irvin3
Aug 07 2016 22:30
@TylerMoeller I'm a bit confused by what you mean by move the function? Do you mean make it look something like this? ```
$('#begin').click(function(seshTorBreakT){
Tyler Moeller
@TylerMoeller
Aug 07 2016 22:33

@irvin3 It would look something like this:

//Start of Timer
$('#begin').click(timer($('#seshTime').text())

function timer(time) {
  var x = time;
  var myvar;
  $("#disp").text(x);
  x = x * 60000;
  x -= 1000;
  myvar = setInterval(function() {
      $("#disp").text(Math.floor(x / 60000) + ':' + (x % 60000) / 1000);
      x -= 1000;
      if (x < 0) {
        myStopFunction();

        function myStopFunction() {
          clearTimeout(myvar);
        }
        $('#begin').text('Start Break');
      }, 1000);
  }
}

When you get to myStopFunction(), you determine if it's the break time or session time that just ended, then call timer($('#seshTime').text()) or timer($('#breakTime').text()) to keep the clock running

@serg337 You're off to a good start, but not quite there with the grid yet. Here are the docs for the bootstrap grid: http://getbootstrap.com/css/#grid-intro
In the freeCodeCamp example, they use full screen width on xs sized screens, about 80% on small screens, and 67% on medium + large screens.
Nick Irvine
@irvin3
Aug 07 2016 22:37
@TylerMoeller would that just make the timer start immediately after the session timer is up? ex. session timer reaches zero then immediately calls for the break timer to start?
Sergio
@serg337
Aug 07 2016 22:37
@TylerMoeller Thanks!!
CamperBot
@camperbot
Aug 07 2016 22:37
serg337 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: serg337 already gave tylermoeller points
Tyler Moeller
@TylerMoeller
Aug 07 2016 22:38
@irvin3 Yes, it would run continuously without stopping if you did that. I added a checkbox to let people choose whether or not they want to keep it running continuously or not.
@irvin3 Basically, what you want to do is have a generic countdown timer function that just counts down based on a number that is passed to it and writes the current time remaining to the page.
Nick Irvine
@irvin3
Aug 07 2016 22:40
@TylerMoeller is it possible to just update the value of var x? so when my #begin.click function ends the value of var x will now be set to breakT? I want people to be able to click the same button to start the break timer
Tyler Moeller
@TylerMoeller
Aug 07 2016 22:41
@irvin3 Yes, I did the same - a single play/pause button, but you'll need to manage the current state of the timer if you do that. The timer needs to know if it's in break timer mode or session timer mode. Then whenever the timer reaches 0, it knows which time to look at next.
Nick Irvine
@irvin3
Aug 07 2016 22:49
@TylerMoeller Okay i get that, I'm having a bit of a problem implementing that code you sent me
Tyler Moeller
@TylerMoeller
Aug 07 2016 22:51
@irvin3 It was just an example of what I meant about moving it to a named function, I didn't update any variable names.
Basically, you want to do something like this:
//Start of Timer
$('#begin').click(timer(get the value of the session/break time)

function timer(the value of the session/break time) {
  // count down to 0
  // if (breaktime === 'session') {breaktime = 'break'} else {breaktime = 'session'}
  // call timer(time) where "time" is the value of the session/break time
}
Instead of using a breaktime variable, you could also just implement a counter, so every time the clock reaches 0, it ups the count by one. If the count is odd, it's break time, else session time.
Nick Irvine
@irvin3
Aug 07 2016 22:57
@TylerMoeller for the get the value param, would i need to use a document.getElementbyID? I'm trying to find a way to get the numerical value for the session based on what the user selects
Tyler Moeller
@TylerMoeller
Aug 07 2016 22:59
@irvin3 You are setting the time with: $("#seshTime").text(seshT) to read the time, just pass in .text() without arguments: var sessionTime = $("#seshTime").text()
For my pomodoro, I had four main functions. 1) manage the play/pause state of the timer, 2) countdown, 3) convert time in seconds to a time-formatted string (MM:SS) and 4) convert a time-formatted string (MM:SS) to seconds.
Nick Irvine
@irvin3
Aug 07 2016 23:06
@TylerMoeller sorry to keep bugging you, I just dont understand why my code isnt working now? I understand if the timer wont work right this second by my times under session and break should be showing right?
missed a parentheses on the begin click function, but still not working
Tyler Moeller
@TylerMoeller
Aug 07 2016 23:09
@irvin3 No problem, I'll take a look now
@irvin3 move your , 1000); to line 62
        $('#begin').text('Start Break');
      }
  }, 1000);
}
Nick Irvine
@irvin3
Aug 07 2016 23:15
@TylerMoeller great call, I would have never notice that
Wali Gauvin
@Docwali777
Aug 07 2016 23:15
Help with Randomw Quote Machine- issues with twitter button- not working
CamperBot
@camperbot
Aug 07 2016 23:15
no wiki entry for: with randomw quote machine- issues with twitter button- not working
Wali Gauvin
@Docwali777
Aug 07 2016 23:15
http://codepen.io/docwali777/pen/WxaJwE - issue with twitter button- not working
Nick Irvine
@irvin3
Aug 07 2016 23:16
@TylerMoeller hmm looks like my timer function is starting automatically, shouldnt it only start when the button is clicked?
Tyler Moeller
@TylerMoeller
Aug 07 2016 23:20

@irvin3 That is odd, it seems it's calling the function when registering the click handler. This fixes it:

$('#begin').click(function() {
  timer(sessionTime);
})

I'll have to look at that more closely and see why it's doing that. Maybe something in jQuery 2.2.4.

Nick Irvine
@irvin3
Aug 07 2016 23:21
@TylerMoeller yea you must just have to write it that way, was just about to try that way
@TylerMoeller thanks a lot for all of your help, seriously. I'm gonna try tinkering on this by myself for a while, don't be surprised if I end up back here asking you another question though haha
CamperBot
@camperbot
Aug 07 2016 23:23
irvin3 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 721 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Wali Gauvin
@Docwali777
Aug 07 2016 23:24
http://codepen.io/docwali777/pen/WxaJwE - my quote button does not work in the gutter window but works in the codpen----??
Tyler Moeller
@TylerMoeller
Aug 07 2016 23:24
@irvin3 lol, good luck :+1:
soroush behmardi
@soori8
Aug 07 2016 23:50
anybody knows how can i call this api : api.openweathermap.org/data/2.5/weather?zip=94040,us , because i use $.getJSON it doesn't work?
Tyler Moeller
@TylerMoeller
Aug 07 2016 23:54
@soori8 When I open that link in my browser, it tells me I need an API key. Your $.getJSON function should be returning an error to the console of 401 (Unauthorized) until you add an API key.
soroush behmardi
@soori8
Aug 07 2016 23:54
oh i see, thanks tyler