These are chat archives for FreeCodeCamp/HelpFrontEnd

1st
Dec 2016
Tyler Moeller
@TylerMoeller
Dec 01 2016 00:13
@mhdavis Looks like you got it real close. Seems like mix-blend-mode: difference; or mix-blend-mode: color-dodge; might be closer to the effect you are after.
kubensis
@kubensis
Dec 01 2016 00:14
i know my question is irrelivant to this converstaion but
can someone please help me with a dualboot fuckup
If you have experience with linux and data recovery
Michael Davis
@mhdavis
Dec 01 2016 00:14
@TylerMoeller color dodge seems to do the trick semi-decently
Tyler Moeller
@TylerMoeller
Dec 01 2016 00:17
Nice work :+1:
@kubensis Out of all the places to ask about Linux, I don't know how you ended up here :)
Maybe these people can help: gitter.im/FreeCodeCamp/Linux
And there's always https://superuser.com
kubensis
@kubensis
Dec 01 2016 00:19
I don't know lol, just searched random things relating to technology.
thank you.
Tyler Moeller
@TylerMoeller
Dec 01 2016 00:20
Good luck
kubensis
@kubensis
Dec 01 2016 00:20
You too, if you're working on anything :)
jrandallhansen
@jrandallhansen
Dec 01 2016 01:19
Hey I am having trouble with the functionality of my All Clear and Clear Element buttons. Can anyone spot the problem(s)? https://codepen.io/jrandall/pen/xRLzVK?editors=1010
therightlayne
@therightlayne
Dec 01 2016 02:01
I completed the Tribute page challenge but when I click submit it just kicks me back to the same page. Am I missing something?
Greg D
@mosaic-greg
Dec 01 2016 02:33
@mhdavis wow this interface looks like a nuclear launch system :+1:
@mhdavis how did you do the scanline effect
David Halls
@DavidHalls
Dec 01 2016 03:10
think all bugs are out, can i get a few testers? http://codepen.io/Byzgig/full/mAQmBo/
Adeleke Dare
@dhrey112
Dec 01 2016 03:10
hello
David Halls
@DavidHalls
Dec 01 2016 03:12
@therightlayne did you paste your codepen link to your tribute page?
Adeleke Dare
@dhrey112
Dec 01 2016 03:12
Is it advisable for a beginner to go over training again when one feeling like he/she is forgetting what one have learned?
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 01 2016 04:41
@dhrey112 you could go over your solutions , it is only human to forget somethings at times, if you have done it before you could do it again, so see your solution to revise and save time or do it again if you want to.
Zaurbek Zhakupov
@zzhakupov
Dec 01 2016 05:06
Help please guys, I don't know how to make function in simon game zipline which will wait for responce, How to make "wait to responce function"?
CamperBot
@camperbot
Dec 01 2016 05:07
no wiki entry for: please guys i dont know how to make function in simon game zipline which will wait for responce how to make wait to responce function
Zaurbek Zhakupov
@zzhakupov
Dec 01 2016 05:07
@camperbot no way
Ian Lee
@asparism
Dec 01 2016 05:09
http://codepen.io/Asparism/pen/ENNxBP?editors=0010 hey, can anyone help me understand why the yellow bars on this codepen will shrink the first time the countdown happens but the second time they won't change? i'm calling the same function both times but my logic must be off somewhere
Mr-Kumar-Abhishek @Mr-Kumar-Abhishek pats @camperbot
Gwhite
@gwhiteMZW
Dec 01 2016 05:11
Add event listeners?
Sorin Ruse
@sorinr
Dec 01 2016 05:24
@gwhiteMZW using jquery its like: $('selector').on('click', function(){here the logic of the function});
Michael Davis
@mhdavis
Dec 01 2016 05:25
@mosaic-greg sorry for the delay; thank you for the compliment! essentially what I did was take the css bits from this interface that I wanted http://codepen.io/michaelmicallef/pen/kkdpzm
CamperBot
@camperbot
Dec 01 2016 05:25
mhdavis sends brownie points to @mosaic-greg :sparkles: :thumbsup: :sparkles:
:cookie: 412 | @mosaic-greg |http://www.freecodecamp.com/mosaic-greg
Rajat
@rajataudichya
Dec 01 2016 06:00
guy can any1 help me, I have some questions regarding blogging
Saurabh Raina
@skraina
Dec 01 2016 06:24
Can anyone help on how to put caption for an image for the tribute page in basic project??
Apart from using figcaption
loaded which library?
yes set the class to "fa"
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 01 2016 06:45
@skraina could you show the code ??
hello anyone up ?? Need help with designing the nav bar
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 01 2016 06:55
I mainly can't figure how to separate the design of collapsed in menu . https://mr-kumar-abhishek.github.io/my-portfolio/
Sorin Ruse
@sorinr
Dec 01 2016 07:16
@Mr-Kumar-Abhishek what do you mean to separate the design ?
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 01 2016 07:20
@sorinr I wanted the open menu in mobile design to have a different background but changing it also changes the desktop ones too , but I think I have figured it out.
Sorin Ruse
@sorinr
Dec 01 2016 07:22
@Mr-Kumar-Abhishek think you should customize by css the <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
Siva R
@vrsivananda
Dec 01 2016 07:24

Hi, can I know how to use API with JSON? What's the address that I need to put in
$.getJSON("http://api.forismatic.com/api/1.0/",function(json){...

^I am guessing the above is incorrect. What should I insert after $.getJSON("...?

I am trying to create the random quote generator
help
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 01 2016 07:26
@sorinr the classes which I have to change is navbar-collapse .in specifically , and there is another class which comes while the menu is being opened I suppose that is navbar-collapse .collapsing which I am not sure of yet
Siva R
@vrsivananda
Dec 01 2016 07:26
$.getJSON("http://api.forismatic.com/api/1.0/",function(json){
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 01 2016 07:27
@vrsivananda I don't think codepen will api headers .. you could use jsonp
Sorin Ruse
@sorinr
Dec 01 2016 07:27
@Mr-Kumar-Abhishek just put a dummy background color for the .navbar-collapse to see whats happening
Siva R
@vrsivananda
Dec 01 2016 07:28
@Mr-Kumar-Abhishek How do I do that?
or how do I find the address to insert? Sorry I am completely new to API
And the FreeCodeCamp seems to just give the answer in their tutorial
Siva R
@vrsivananda
Dec 01 2016 07:29
thanks @sorinr @Mr-Kumar-Abhishek I will try that
CamperBot
@camperbot
Dec 01 2016 07:29
vrsivananda sends brownie points to @sorinr and @mr-kumar-abhishek :sparkles: :thumbsup: :sparkles:
:cookie: 407 | @mr-kumar-abhishek |http://www.freecodecamp.com/mr-kumar-abhishek
:cookie: 871 | @sorinr |http://www.freecodecamp.com/sorinr
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 01 2016 07:30
@sorinr yes it did that before it changed the desktop background too
Siva R
@vrsivananda
Dec 01 2016 07:30
where should I put the jsonp?
$(document).ready(function(){
  $(#newQuoteButton).on("click", function(){
    $.getJSON("http://api.forismatic.com/api/1.0/?method=getQuote&key=457653&format=jsonp&lang=en&jsonp=?",function(json){
      $(".theQuote").html(JSON.stringify(json));
    });
  });
});
I also get the error: Unexpected token ILLEGAL
after the $(#newQuoteButton).on("click", function(){ line
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 01 2016 07:34
@vrsivananda you could use this proxy but it has its own downtime ~ https://jsonp.afeld.me/
Sorin Ruse
@sorinr
Dec 01 2016 07:34
@Mr-Kumar-Abhishek try to add background-color: black to div#navbar.navbar-collapse.collapse.in
@vrsivananda it should be ('#newQuoteButton') not (#newQuoteButton)
heroiczero
@heroiczero
Dec 01 2016 07:38
@vrsivananda $.getJSON( url, function(){}, "jsonp");
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 01 2016 07:39
@vrsivananda already did that there is delay in change of the color there is another class as I was talking about :)
@sorinr already did that there is delay in change of the color there is another class as I was talking about :)
@vrsivananda last message wasn't meant for you
Siva R
@vrsivananda
Dec 01 2016 07:40
oh sorry I was slightly confused. So is this now correct?:
$(document).ready(function(){
  $("#newQuoteButton").on("click", function(){
    $.getJSON("https://jsonp.afeld.me/",function(json){
      $(".theQuote").html(JSON.stringify(json));
    },"jsonp");
  });
});
thanks @heroiczero @sorinr
CamperBot
@camperbot
Dec 01 2016 07:41
vrsivananda sends brownie points to @heroiczero and @sorinr :sparkles: :thumbsup: :sparkles:
:warning: vrsivananda already gave sorinr points
:cookie: 447 | @heroiczero |http://www.freecodecamp.com/heroiczero
heroiczero
@heroiczero
Dec 01 2016 07:43
@vrsivananda looks right
Siva R
@vrsivananda
Dec 01 2016 07:44
@heroiczero thanks. there must be something else somewhere that's causing it to not work. :/ I'll look into it.
Thanks again!
CamperBot
@camperbot
Dec 01 2016 07:44
:warning: vrsivananda already gave heroiczero points
vrsivananda sends brownie points to @heroiczero :sparkles: :thumbsup: :sparkles:
Sorin Ruse
@sorinr
Dec 01 2016 07:44
@Mr-Kumar-Abhishek what do you mean its a delay? just make a @media to overwrite the defaults if you want to trigger the bg color earlier or later as width.when you want it
@Mr-Kumar-Abhishek hope you get what i mean :)
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 01 2016 07:46
@sorinr by delay I mean , that when the menu is opening the background color is implemented , once it is opened fully then the background color is implemented
grantknaver
@grantknaver
Dec 01 2016 07:47
anyone have a sec to offer some help
Sorin Ruse
@sorinr
Dec 01 2016 07:47
@Mr-Kumar-Abhishek so you want the bg color to change at some interval after you press the hamburger menu?
@grantknaver yep
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 01 2016 07:47
@sorinr I am avoiding overwriting defaults using !important because I have other use of the same navbar menu classes
grantknaver
@grantknaver
Dec 01 2016 07:47
thanks
Siva R
@vrsivananda
Dec 01 2016 07:48

@heroiczero

Do you know why nothing happens here when I click my "New Quote" button?

In CodePen (HTML and JS):

$(document).ready(function(){
  $("#newQuoteButton").on("click", function(){
    $.getJSON("https://jsonp.afeld.me/",function(json){
      $(".theQuote").html(JSON.stringify(json));
    },"jsonp");
  });
});



<body>
  <div id="center">
    <div class="theQuote">

    </div>
    <div id="buttonDiv">
      <button id="newQuoteButton" class=".btn .btn-lg"> New Quote </button>
    </div>
  </div>
</body>
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 01 2016 07:48
@sorinr yes
grantknaver
@grantknaver
Dec 01 2016 07:48
I am trying to get this on aspect of javascript to fire
here it is...
heroiczero
@heroiczero
Dec 01 2016 07:49
@vrsivananda https://jsonp.afeld.me/ this website it offline
grantknaver
@grantknaver
Dec 01 2016 07:49
function change(){

  function magShrink() {

  for (var j = 9; j <= 0; --j) {
    if(j === 0) {
      iconLogo.style.display = "none";  
    }
    else {
      runitA(j);
    }  
  }

  function runitA(j) {
    setTimeout(function(){ 
      //MyFunc(i);
      iconLogo.style.opacity = ".0" + j;
    }, j * 1.5); 
  }
 }

  magShrink();
Sorin Ruse
@sorinr
Dec 01 2016 07:49
@Mr-Kumar-Abhishek use js for some effects or css transition for that element
grantknaver
@grantknaver
Dec 01 2016 07:49
here is my code
Siva R
@vrsivananda
Dec 01 2016 07:49
@heroiczero so I should use another website for the API?
heroiczero
@heroiczero
Dec 01 2016 07:50
@vrsivananda http://api.forismatic.com/ that site should theoretically work
grantknaver
@grantknaver
Dec 01 2016 07:50
I am trying to get the magnifying glass icon to quickly decease in opacity
but it just wont launch. Hopefully you can help @sorinr
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 01 2016 07:50
@sorinr thanks for the suggestion ^_^
CamperBot
@camperbot
Dec 01 2016 07:50
mr-kumar-abhishek sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 872 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Dec 01 2016 07:51
@grantknaver as long as you have magshrink inside change you cannot call it like that
heroiczero
@heroiczero
Dec 01 2016 07:51
@vrsivananda just make sure your site codepen.io is in http://codepen.io not https://codepen.io or it will not access the api for your website
Sorin Ruse
@sorinr
Dec 01 2016 07:51
@Mr-Kumar-Abhishek np
grantknaver
@grantknaver
Dec 01 2016 07:52
why? I am calling another function doing something similar in change?
Sorin Ruse
@sorinr
Dec 01 2016 07:54
@grantknaver that function has local scope only to change. its not available outside of the scope
heroiczero
@heroiczero
Dec 01 2016 07:54
@vrsivananda JSON.stringify(json) that seems wrong try to find a way to access the quote and insert it into the html. probably something like function(data){console.log(data.quote);}
Siva R
@vrsivananda
Dec 01 2016 07:55
@heroiczero I deleted the "s" from "https" and now my website is http://codepen.io/vrsivananda/pen/EyGgkR
^Oh I guess that worked, deleting the s
I'll try your method, but still it should show the object of quotes just with what I have, no? @heroiczero
heroiczero
@heroiczero
Dec 01 2016 07:57
@vrsivananda yeah should
@vrsivananda http://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&lang=en&jsonp=?try your first website you had
grantknaver
@grantknaver
Dec 01 2016 07:59
@sorinr I believe something else is wrong
Siva R
@vrsivananda
Dec 01 2016 07:59

@heroiczero

Still nothing :(

$(document).ready(function(){
  $("#newQuoteButton").on("click", function(){
    $.getJSON("http://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&lang=en&jsonp=?",function(json){
      $(".theQuote").html(JSON.stringify(json));
    },"jsonp");
  });
});

<body>
  <div id="center">
    <div class="theQuote">

    </div>
    <div id="buttonDiv">
      <button id="newQuoteButton" class=".btn .btn-lg"> New Quote </button>
    </div>
  </div>
</body>
@heroiczero Where should I place the function(data){console.log(data.quote);}?
Sorin Ruse
@sorinr
Dec 01 2016 08:03
@grantknaver nope. but i think you are not closing ur functions the right way
grantknaver
@grantknaver
Dec 01 2016 08:04
how about this
any ideas the console is not registering any problems
Sorin Ruse
@sorinr
Dec 01 2016 08:09
@grantknaver u wrote all that js code just to "enlarge" the input? i would use css like element:hover{your style in here}
heroiczero
@heroiczero
Dec 01 2016 08:13
var url="http://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&lang=en&jsonp=?";
var getQuote=function(data){
  console.log(data);
};
$(document).ready(function(){
  $.getJSON(url,getQuote,'jsonp');
});
@vrsivananda that should work if you do it in "http://"
@vrsivananda there is a console in codepen.io on the bottom left
grantknaver
@grantknaver
Dec 01 2016 08:14
I know. I was going to do that, but the element you use as trigger for the hover has to be the element that is effected by the hover
I am trying to hover over the magnifying glass and have it disappear and have the width of the input go form 0 to 200px
Siva R
@vrsivananda
Dec 01 2016 08:17

@heroiczero

I commented out all my previous JS and copy-pasted your code into it, but still does not seem to do anything. Strange :worried:

grantknaver
@grantknaver
Dec 01 2016 08:19
@sorinr you get what I mean
Siva R
@vrsivananda
Dec 01 2016 08:19
@heroiczero also in http://
eternal september
@spieg
Dec 01 2016 08:21
@grantknaver The for loop in the magShrink function doesn't iterate
Sorin Ruse
@sorinr
Dec 01 2016 08:21
@grantknaver just a sec
grantknaver
@grantknaver
Dec 01 2016 08:22
thanks
@sonir believe me I wanted to do the hover thing but it just didn't work for what I was going for
@spieg that is weird because I am telling it to.
for (var j = 9; j == 0; j--) {
    if(j === 0) {
      iconLogo.style.display = "none";  
    }
    else {
      runitA(j);
    }  
  }
kirbyedy
@kirbyedy
Dec 01 2016 08:26
you sure that for loop is ok ?
eternal september
@spieg
Dec 01 2016 08:26
@grantknaver j >= 0 is what you want.
grantknaver
@grantknaver
Dec 01 2016 08:27
@spieg thanks
CamperBot
@camperbot
Dec 01 2016 08:27
grantknaver sends brownie points to @spieg :sparkles: :thumbsup: :sparkles:
:cookie: 247 | @spieg |http://www.freecodecamp.com/spieg
grantknaver
@grantknaver
Dec 01 2016 08:28
nope still doesnt work
there is no effect on magifying logo
grantknaver
@grantknaver
Dec 01 2016 08:35
that fix made it function but accomplish what I was trying to accomplish
Siva R
@vrsivananda
Dec 01 2016 08:41
@heroiczero Thanks! I managed to get some help, and it was because I did not add the JQuery library. Silly me!
CamperBot
@camperbot
Dec 01 2016 08:41
vrsivananda sends brownie points to @heroiczero :sparkles: :thumbsup: :sparkles:
:cookie: 449 | @heroiczero |http://www.freecodecamp.com/heroiczero
grantknaver
@grantknaver
Dec 01 2016 08:41
anyone
Abhishek Kumar
@Mr-Kumar-Abhishek
Dec 01 2016 08:48
@sorinr check this commit , this is what I was talking about Mr-Kumar-Abhishek/my-portfolio@997de3e two classes see ? one for collapsing and one when collapsed in. If you only changed .collapse .in there is a delay in the change of the color
eternal september
@spieg
Dec 01 2016 09:20
@grantknaver I've got 2 more remarks that might be of use.
  • for me iconLogo.style.opacity = ".5"; doesnot work, iconLogo.style.opacity = .5; does.
  • setTimeout seems to be asynchronous in a way, in that it waits with the given command, but doesn't hold processing.
Sorin Ruse
@sorinr
Dec 01 2016 09:23
@Mr-Kumar-Abhishek i've been away. i'll look into that a little later
Eric H.
@cire4
Dec 01 2016 09:27
Hello, can someone show me how to create a div that sits at the very edge at the bottom of the page? I don't want it fixed at the bottom of the screen so that it'll be their wherever I scroll.
Sorin Ruse
@sorinr
Dec 01 2016 09:54
@cire4 ithink you should use position: absolute with bottom: 0
Brandon
@bd1887
Dec 01 2016 10:02

Hi everyone. I have a CSS question. I'm trying to make a shape that looks like this:
http://codepen.io/bd1887/pen/Rogzgq?editors=0110

Except I need to make it without using an overlap trick -- I need it to be a single div. I've tried using clip-path, but I can't figure out how to cut out a curved line like that.

Siva R
@vrsivananda
Dec 01 2016 10:33

Hi, What else do I have to do to use bootstrap in CodePen? I have added the bootstrap under settings, but it still does not seem to work. My button still looks very normal.

This is my button mark-up:

<button id="newQuoteButton" class="btn btn-block btn-primary"> New Quote </button>
Sorin Ruse
@sorinr
Dec 01 2016 10:36
@vrsivananda do you have something in your css for #newQuoteButton ?
Siva R
@vrsivananda
Dec 01 2016 10:36
Yes i do!
Sorin Ruse
@sorinr
Dec 01 2016 10:36
what?
Siva R
@vrsivananda
Dec 01 2016 10:37
#newQuoteButton{
  position:relative;
  float: right ;
  clear: right;
  margin-right:20px;
  margin-bottom:20px;
  margin-top: 20px;
}
sorry took some time to format
Sorin Ruse
@sorinr
Dec 01 2016 10:38
@vrsivananda load in pen settings bootstrap lib in css part
Siva R
@vrsivananda
Dec 01 2016 10:39
@sorinr Thanks!
CamperBot
@camperbot
Dec 01 2016 10:39
vrsivananda sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 876 | @sorinr |http://www.freecodecamp.com/sorinr
Siva R
@vrsivananda
Dec 01 2016 10:39
It solved my problem!
I didnt know that CSS has its own settings
so confusing
Sorin Ruse
@sorinr
Dec 01 2016 10:40
@vrsivananda np
@vrsivananda :+1:
eternal september
@spieg
Dec 01 2016 11:05
@bd1887 you could make the box white and the border green. since the radius is 100% you can set both the top and the left border.
Clyde Lobo
@oppiniated
Dec 01 2016 11:09
CSS Spiral animation : http://output.jsbin.com/hekepi/2
Siva R
@vrsivananda
Dec 01 2016 11:12

How do I float a button to the bottom of a div without messing with the bootstrap?

Here is my markup for the button:

<div id="buttonDiv">
      <button id="newQuoteButton" class="btn  btn-primary center-block "> New Quote </button>
    </div>
  </div>

Here is my CSS:

#buttonDiv{
  clear: both;
}

#newQuoteButton{
  width: 250px;
}
My codepen, where the button is not at the bottom as I would like it: http://codepen.io/vrsivananda/pen/EyGgkR
everytime I try to push it down with css, it messes with bootstrap
Greg Duncan
@GregatGit
Dec 01 2016 11:27
@vrsivananda Where do you want your button to be?
Siva R
@vrsivananda
Dec 01 2016 11:28
@GregatGit in the cyan div, but below. Currently it floats around and rests depending on the length of the quote
so it keeps shifting
I would like it to be still, but everytime I use position:fixed or absolute, it cancels out the bootstrap
Greg Duncan
@GregatGit
Dec 01 2016 11:30
so you want the button to be fixed just above the bottom
Siva R
@vrsivananda
Dec 01 2016 11:32
yes
that's right @GregatGit
Greg Duncan
@GregatGit
Dec 01 2016 11:39
@vrsivananda You have so much css - lots of ids and class - alot that you don't need - you only have one button - you need to clean up your css and make it straight forward so you know what going on
Siva R
@vrsivananda
Dec 01 2016 11:39
@GregatGit thanks. I will do so now
CamperBot
@camperbot
Dec 01 2016 11:39
vrsivananda sends brownie points to @gregatgit :sparkles: :thumbsup: :sparkles:
:cookie: 790 | @gregatgit |http://www.freecodecamp.com/gregatgit
Siva R
@vrsivananda
Dec 01 2016 11:40
Does that help?
@GregatGit
oh wait let me clear up the id and class
I am not sure which ones I don't need. I deleted one CSS class (the quotebutton div)
Greg Duncan
@GregatGit
Dec 01 2016 11:42
@vrsivananda this is very confusing
#center{
 width: 500px;
 height:250px;
 background-color:#6ae5ea;
 margin-top: 30px;
 position:relative;
 padding: 10px;
 border-radius: 5%;
 //vertical-align: middle;
}
Siva R
@vrsivananda
Dec 01 2016 11:43
Oh, I am not sure how else to format my div
Greg Duncan
@GregatGit
Dec 01 2016 11:43
give things meaningful names - not generic names like centre
Siva R
@vrsivananda
Dec 01 2016 11:43
oh I see
ok let met change that
I fixed that one
now called mainQuoteDiv
Siva R
@vrsivananda
Dec 01 2016 11:49
@GregatGit I tried to make my HTML easier to read as well
@GregatGit sorry I lost track of time. I gtg. If you do find a solution, please do let me know. Sorry for having to leave so suddenly!
thank you again! @GregatGit
CamperBot
@camperbot
Dec 01 2016 11:50
vrsivananda sends brownie points to @gregatgit :sparkles: :thumbsup: :sparkles:
:warning: vrsivananda already gave gregatgit points
Greg Duncan
@GregatGit
Dec 01 2016 11:50
@vrsivananda try
#newQuoteButton{
  margin-top: 25%;
  clear: both;
}
ScrubSilencer
@scrubsilencer
Dec 01 2016 13:15
Can someone do me a favour and give me a link to a project that they've done on codepen.io/ that's implemented the use of jQuery functions please?
Sean
@ofperfection
Dec 01 2016 13:16
thanks @khaduch if I'd looked at my mentions earlier I would've been done troubleshooting that a lot more quickly!
CamperBot
@camperbot
Dec 01 2016 13:16
seandoe sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2012 | @khaduch |http://www.freecodecamp.com/khaduch
Kirby James
@kirbygit
Dec 01 2016 13:30
anybody good at margining at aligning images
Gniewoszu
@Gniewoszu
Dec 01 2016 14:14
@scrubsilencer ??did you do FCC jQuery chalenges
Kapil Dutta
@duttakapil
Dec 01 2016 14:24
So this is kinda random, but I'm doing an anonymous 2 minute survey to better understand how people are learning frontend development on their own. I started with FreeCodeCamp almost two years ago, and it's one of the resources I've considered. You can also see all the results yourself at the end after submitting
If you have any suggestions for improvements, do let me know
Monesul Haque
@mones-cse
Dec 01 2016 15:37
hi guys i need some help
i am trying to add some background color in mainGroup class but it is not working cant fig out where i make the mistake
https://codepen.io/m1s/pen/YpYXjy?editors=0110
as it is not responsive better open it in a new tab
KedeXx
@KedeXx
Dec 01 2016 16:12
any good exercises for javascript? From simple to hard
JD Tadlock
@jdtdesigns
Dec 01 2016 16:28
@mones-cse Use fill: red; instead
Tyler Moeller
@TylerMoeller
Dec 01 2016 16:49
@scrubsilencer are you referring to using $.fn? If so, I have an example in my Tic Tac Toe app for rotating the board - line 180. It's called on lines 139 and 174.
Doneal Bercier
@donealbercier
Dec 01 2016 16:52
Hello there. I've done the layout for the Random Quote Generator and I was confused about what api to use to get the actual random quotes. https://codepen.io/donealbercier/pen/LbOJbd
Pavel-Kazakov
@Pavel-Kazakov
Dec 01 2016 17:03
you can set the number of quotes as many as you need
Chris
@chrisLoPresti
Dec 01 2016 17:26
so im on task 119 "Build a Personal Portfolio Webpage" ..seems a bit much for just starting ? or is it simpler then it seems
DJ Pelland
@dna113p
Dec 01 2016 17:29
@chrisLoPresti If you are able to complete the tribute page, you can probably create a simple portfolio with not much more than the concepts from the tribute. I have seen a lot of people do an initial portfolio and then later on come back and completely re do it after learning some more skills and finishing some of the later projects.
Chris
@chrisLoPresti
Dec 01 2016 17:30
@dna113p thanks for the reply. I mean I can get the basic css going and the body of the page but when it comes to getting a fully functional and aesthetically pleasing banner, I might need to know a bit more, especially since there hasn't been to much on java yet
CamperBot
@camperbot
Dec 01 2016 17:30
chrislopresti sends brownie points to @dna113p :sparkles: :thumbsup: :sparkles:
:cookie: 346 | @dna113p |http://www.freecodecamp.com/dna113p
Chris
@chrisLoPresti
Dec 01 2016 17:30
^ that is if java was super relevant
DJ Pelland
@dna113p
Dec 01 2016 17:32
@chrisLoPresti you can do a ton with just html and css. But if you dont think you can create your vision with the knowledge that you currently have you can always continue on and come back the portfolio later.
Chris
@chrisLoPresti
Dec 01 2016 17:32
@dna113p okay cool thanks
CamperBot
@camperbot
Dec 01 2016 17:32
chrislopresti sends brownie points to @dna113p :sparkles: :thumbsup: :sparkles:
:warning: chrislopresti already gave dna113p points
DJ Pelland
@dna113p
Dec 01 2016 17:32
@chrisLoPresti If i were to design the curriculum I don't think I would have put the portfolio as one of the first projects
would have left it til the end
Chris
@chrisLoPresti
Dec 01 2016 17:33
@dna113p yeah i think that deff requires a bit more knowledge
im legit starting from ground zero....so im trying here
DJ Pelland
@dna113p
Dec 01 2016 17:36
@chrisLoPresti nice well keep chugging along! What I have found with development so far is that anything you ever want to create is always going to need "a bit more knowledge" and I think that is sort of the name of the game, attacking problems you don't fully understand and solving them.
so sometimes when a project requires a bit more knowledge, it might mean it's the perfect project to tackle
Chris
@chrisLoPresti
Dec 01 2016 17:38
I like that, thanls
thanls
thanks..*
tommy
@tommygebru
Dec 01 2016 18:56
any tips for the twitch project??
iehab91
@iehab91
Dec 01 2016 19:05
hi, I wanna talk @TylerMoeller . how can i ??
Tyler Moeller
@TylerMoeller
Dec 01 2016 19:09
@tommygebru Lots of people hit an issue with the JSON returned from the API not having the properties they expect. You might want to do a review of the record collection challenge and study the JSON returned from the API before diving into creating the UI for your Twitch App.
@iehab91 What's up?
iehab91
@iehab91
Dec 01 2016 19:10
how can I talk u in privet bro ?
Tyler Moeller
@TylerMoeller
Dec 01 2016 19:10
Hover over my icon and click the chat privately button
tommy
@tommygebru
Dec 01 2016 19:10
Id rather not do record collection again :wink:
Tyler Moeller
@TylerMoeller
Dec 01 2016 19:11
lol :)
tommy
@tommygebru
Dec 01 2016 19:11
so @TylerMoeller is there something specific I should do for the project??
Tyler Moeller
@TylerMoeller
Dec 01 2016 19:11
Nothing specific really, aside from fulfilling the user stories
When a user's account doesn't exist, the JSON will be different than when a user's account does exist, for example, so it's good to know how to handle JSON Objects that don't have all the properties you are expecting
tommy
@tommygebru
Dec 01 2016 19:12
yeah Im just trying to get 1 thing working just to get some info about FCC channel on Twitch
or FCC stream but even that is eluding me....
Tyler Moeller
@TylerMoeller
Dec 01 2016 19:13
That's a good start - then analyze what the JSON looks like for online users vs. offline users vs. closed/non-existent accounts. It all comes back a little differently
tommy
@tommygebru
Dec 01 2016 19:13
i havent gotten a single response yet i believe I am doing it wrong...
care to take a look?
Tyler Moeller
@TylerMoeller
Dec 01 2016 19:14
Sure, send a link
iehab91
@iehab91
Dec 01 2016 19:15
I can't find chat privately button! only ur info!
@TylerMoeller
no design yet just trying to figure this api out
Tyler Moeller
@TylerMoeller
Dec 01 2016 19:16
@iehab91 It should be there, not sure what's up!
tommy
@tommygebru
Dec 01 2016 19:16
@iehab91 should be a green button on the tooltip when you hover over someones face on Gitter
Tyler Moeller
@TylerMoeller
Dec 01 2016 19:16
@tommygebru Okay, will take a look
@tommygebru Start with a working API call:
  $.getJSON('https://wind-bow.hyperdev.space/twitch-api/streams/freecodecamp?callback=?')
    .done(function(data) {
    $('body').append(JSON.stringify(data))
  });
That gives you two URLs you can use for more info - try each of them out and study the JSON to see what data you need to collect
To make it easier to read, you can copy/paste the data here: http://codebeautify.org/jsonviewer
Tanner Kiser
@Kiser3613
Dec 01 2016 19:22
Hey, guys! I was wondering if anybody could help me out with the Record Collection exercise.
tommy
@tommygebru
Dec 01 2016 19:24
have you tried HelpJavascript? @Kiser3613 :smile:
@TylerMoeller what i dont really understand is how to retrieve all the other information about the stream... we only get two lines back here
Tyler Moeller
@TylerMoeller
Dec 01 2016 19:26
@tommygebru Yeah, take one of those URLs returned, plug it into your getJSON and see what it returns. Try the other one out too.
tommy
@tommygebru
Dec 01 2016 19:26
oh wow
tommy
@tommygebru
Dec 01 2016 19:31
so should i create a new ajax method inside getJSON or something to get information about
console.log(data._links.channel);
Tyler Moeller
@TylerMoeller
Dec 01 2016 19:32
Yes, you can definitely do that
tommy
@tommygebru
Dec 01 2016 19:33
ok let me try :sparkles:
Tyler Moeller
@TylerMoeller
Dec 01 2016 19:37
The problem with that approach, though, as you'll see, is that it takes you to http://api.twitch.tv instead of the hyperbow server. Probably best to just understand what each URL does (/channels/, /streams/, etc...) and call them directly.
Ken Haduch
@khaduch
Dec 01 2016 19:41
@Kiser3613 - sure we can!
post your code and questions...
tommy
@tommygebru
Dec 01 2016 19:43
ok so i should keep my api url simple
var twitchAPI = "https://wind-bow.hyperdev.space/twitch-api";
Tyler Moeller
@TylerMoeller
Dec 01 2016 19:44
Yes, that way you won't need a client ID
tommy
@tommygebru
Dec 01 2016 19:50
@TylerMoeller
whats the difference between
twitchAPI + stream + regStreamers[0] + callback
all variables to make up url
and the url
here
 var twitchAPI = "https://wind-bow.hyperdev.space/twitch-api";
var stream = "/streams/";
  var callback = "?callback=?'";
 // var clientID = "3fe05j8mavwd68cjoqwqs2e9oqsou02";
  var regStreamers = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas", "brunofin", "comster404"];
Jahmia Gallimore
@Progamers780
Dec 01 2016 19:51
http://codepen.io/Vlade780/full/XNzxLw/ Do u guys mind taking a look?
I know there is some spelling mistakes I'm going to fix them,but overall what do u guys think about it?
Tyler Moeller
@TylerMoeller
Dec 01 2016 19:53
@tommygebru Add this line of code to your codepen to see: $('body').append(twitchAPI + stream + regStreamers[0] + callback);
Or just use console.log(twitchAPI + stream + regStreamers[0] + callback)
tommy
@tommygebru
Dec 01 2016 19:53
@Progamers780 use this
img{width:100%;}
also maybe more color
@TylerMoeller are you saying I cant replace the url in .getjson(url)...
Jahmia Gallimore
@Progamers780
Dec 01 2016 19:55
@tommygebru Thanks for the feedback I will make sure to change that thx <3
CamperBot
@camperbot
Dec 01 2016 19:55
progamers780 sends brownie points to @tommygebru :sparkles: :thumbsup: :sparkles:
:cookie: 780 | @tommygebru |http://www.freecodecamp.com/tommygebru
Tyler Moeller
@TylerMoeller
Dec 01 2016 19:55
@tommygebru No, I'm saying if you want to see the difference, console.log or write it to the page so you know what the URL is and then visit the URL in your browser to see how it is different.
tommy
@tommygebru
Dec 01 2016 19:57
ok i think i actually added a '
yeah i made a typo finally I got some data :smile:
@TylerMoeller I will take a break for now maybe i can message you in an hour?
Tyler Moeller
@TylerMoeller
Dec 01 2016 19:59
Sure, I may not be here, but will get back when I can
tommy
@tommygebru
Dec 01 2016 19:59
nice! I have an interview at the end of the day hope to finish my last api project before then :wink:
thanks @TylerMoeller
CamperBot
@camperbot
Dec 01 2016 19:59
tommygebru sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1044 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Dec 01 2016 19:59
Good luck! :+1:
Phiggins567
@phiggins567
Dec 01 2016 20:10
Hi guys! I'm having trouble with show the local weather. Does anyone know how to get geolocation to work with the OpenWeatherMapAPI. I've tried to get it to work but Google requires a https connection and that causes the api to stop working
I've also tried to use an IP location api but I can't grab the lon/lat values and place them into the url
iehab91
@iehab91
Dec 01 2016 20:18
margin-left is not making any effect on my text!
help
Josh Chatfield
@joshchatfield
Dec 01 2016 20:21
what is a good resource to look up all of the syntax for HTML and CSS? while studying java I could look at the API docs, does html have something similar?
Ayooluwa
@ayoisaiah
Dec 01 2016 20:22
@joshchatfield Checkout https://devdocs.io
Josh Chatfield
@joshchatfield
Dec 01 2016 20:22
thnks, i will
Ayooluwa
@ayoisaiah
Dec 01 2016 20:23
You can also get some more at http://zealdocs.org
Chris
@bestintown23
Dec 01 2016 20:23
the float right in my nav bar is making my selections backwards than how i want, how can i fix this? http://codepen.io/bestintown23/pen/woPMBV
Ayooluwa
@ayoisaiah
Dec 01 2016 20:24
@phiggins567 Could you post a link to your pen please?
Updated my Local weather app. Feedback is appreciated: https://ayoisaiah.com/weather-app/
Phiggins567
@phiggins567
Dec 01 2016 20:26
@ayoisaiah http://codepen.io/phiggins567/pen/YpxzxO there you go, thanks
CamperBot
@camperbot
Dec 01 2016 20:26
phiggins567 sends brownie points to @ayoisaiah :sparkles: :thumbsup: :sparkles:
:cookie: 206 | @ayoisaiah |http://www.freecodecamp.com/ayoisaiah
Ayooluwa
@ayoisaiah
Dec 01 2016 20:38

@phiggins567 When you grab the longitude and latitude like this

var longitude = l.lon;
var latitude = l.lat;

You can make the request like this:

$.getJSON("http://api.openweathermap.org/data/2.5/weather?lat=" + latitude + "&lon=" + longitude, function (res){});
Mateusz Kadlubowski
@xeho91
Dec 01 2016 20:40
Anyone here could help with Angular? I'm learning it meanwhile doing Local Weather App and I got problem with message "Possibly unhandled rejection: {}" and I can't figure out why.
tnelson2016
@tnelson2016
Dec 01 2016 20:40
Hi...I am trying to start on my resume website but i am having trouble getting started. Any one have any ideas?
Chris
@bestintown23
Dec 01 2016 20:47
thanks for ignorning my question
Nuria
@nuria-gs
Dec 01 2016 20:49
Hi! I need some help with Bootstrap... I have a row with two columns (they have text and a button and I want them to be in two columns in a large device and in one column in small ones. The thing is I have used this to set the column height equal in both columns, so I can put the button on the bottom display: table-cell; float:none; And now it seems that it doesn't recognize the "col-xs-12" property
Twitchy-Cake
@Twitchy-Cake
Dec 01 2016 20:52
Hey guys, I have a quick question. Is their a way to link my images beforehand in HTML so that I dont have to put in a long link everytime I want to put that image up? Like "src='something.jpg'", is that possible?
Nuria
@nuria-gs
Dec 01 2016 20:53
Waiting for a better answer... @Twitchy-Cake if you use Sass you can set a variable with the name of the image
Twitchy-Cake
@Twitchy-Cake
Dec 01 2016 20:55
I have no idea what that is.
lmao
like im looking it up but i dont understand what it does, sass
Nuria
@nuria-gs
Dec 01 2016 20:56
@Twitchy-Cake I don't know if there is other options, but just an idea... :)
you have to configure the codepen editor to use it
James Gusty
@Duruzican
Dec 01 2016 21:17
Hey chat, I am having trouble calling an API with my quote machine, can anyone help me with this, been stuck for quite some time now...https://codepen.io/Duruzican/pen/yVbaOq
Tyler Moeller
@TylerMoeller
Dec 01 2016 21:48
@bestintown23 Not sure what you mean by the floats in your navbar making your selections backwards. If you're using float: left, use float: right to make them appear on the other side.
Or, send an example of another website that has the design you're trying to accomplish
Doneal Bercier
@donealbercier
Dec 01 2016 21:49
I'm having trouble with my Weather App. I can get Farenheit to change into Celsius but I can't get it to work the other way round. http://codepen.io/donealbercier/pen/wopJNB
zKruki
@zKruki
Dec 01 2016 21:51
Can anyone tell my why my navbar button doesn't work?
Tyler Moeller
@TylerMoeller
Dec 01 2016 21:52
@Twitchy-Cake You can use an URL shortening service: https://goo.gl/
Or just upload the picture to https://postimage.org - they should give you a link that's more manageable in size.
aRtoo
@artoodeeto
Dec 01 2016 21:54
hi guys how do you customize a circle or a rectangle? like you put some curves and have text inside and for the circle like making a pie with a text on each pie?
Tyler Moeller
@TylerMoeller
Dec 01 2016 21:54
@zKruki Most of the time this happens it's because you need to add bootstrap.min.js - and it needs to load after jQuery.
https://code.jquery.com/jquery-3.1.1.min.js
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js
aRtoo
@artoodeeto
Dec 01 2016 21:56
hi guys how do you customize a circle or a rectangle? like you put some curves and have text inside and for the circle like making a pie with a text on each pie?
Tyler Moeller
@TylerMoeller
Dec 01 2016 21:56
@artoodeeto Can you show an example of what you're trying to do?
aRtoo
@artoodeeto
Dec 01 2016 21:57
@TylerMoeller i dont have example but on my my like a rectangle but on the top and bot line i could curve it or make it like a wave
zKruki
@zKruki
Dec 01 2016 21:57

@TylerMoeller <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Navbar-->

<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://codepen.io/futuristicHat/full/MbrpGb/#top">ABC</a>
</div>
<div class="collapse navbar-collapse" id="nav">
<ul class="nav navbar-nav">
<li class="active"><a href="http://codepen.io/futuristicHat/full/MbrpGb/#top">About</a></li>
<li class="active"><a href="http://codepen.io/futuristicHat/full/MbrpGb/#portfolio">Portfolio</a></li>
<li class="active"><a href="http://codepen.io/futuristicHat/full/MbrpGb/#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
<!--About-->

You'll need jQuery in addition to bootstrap.min.js. Both of those need to go at the end of your HTML, right before the closing </body> tag
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
Nuria
@nuria-gs
Dec 01 2016 21:59
@nuria-gs
Hi! I need some help with Bootstrap... I have a row with two columns (they have text and a button and I want them to be in two columns in a large device and in one column in small ones. The thing is I have used this to set the column height equal in both columns, so I can put the button on the bottom display: table-cell; float:none; And now it seems that it doesn't recognize the "col-xs-12" property
http://codepen.io/nuria-gs/pen/PbJmjj?editors=1100
Tyler Moeller
@TylerMoeller
Dec 01 2016 22:00
@nuria-gs Yes, I see your same question above and trying to help, but codepen is down...
Nuria
@nuria-gs
Dec 01 2016 22:00
sorry for repeat it :(
Tyler Moeller
@TylerMoeller
Dec 01 2016 22:01
No need to apologize, just letting you know I can't help when codepen is down :(
zKruki
@zKruki
Dec 01 2016 22:02
@TylerMoeller Thanks
CamperBot
@camperbot
Dec 01 2016 22:02
zkruki sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1045 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Dec 01 2016 22:04
@nuria-gs It's back up ( for now :) ) It looks like your col-xs-12 is working fine - in fact, you don't need it, just col-md-6. Everything at col-sm and col-xs will assume 12 by default if you do that.
Nuria
@nuria-gs
Dec 01 2016 22:06
@TylerMoeller the thing is that I wanted the buttons aligned on the bottom, so i put this
.external-link{
 /* display: table-cell;
  float:none;*/
  padding-bottom: 50px;
}
but with this the col-xs-12 doesn't work
Tyler Moeller
@TylerMoeller
Dec 01 2016 22:08
@nuria-gs You should be able to accomplish that by nesting a row beneath those columns
Nuria
@nuria-gs
Dec 01 2016 22:09
@TylerMoeller you mean placing the button inside a row?
Tyler Moeller
@TylerMoeller
Dec 01 2016 22:10
@nuria-gs Yes, let me see if I can find an example to show
Nuria
@nuria-gs
Dec 01 2016 22:12
@TylerMoeller the thing is that the buttons are in different columns with different heights
Gniewoszu
@Gniewoszu
Dec 01 2016 22:12
@Duruzicanyour ajax call is unsuccessful
Jack Lyons
@JackEdwardLyons
Dec 01 2016 22:12
hey guys, i have a question about appending HTML in javascript... are there some best practices to doing it? I have some code that I am experimenting with for my Tic Tac Toe, and just wondering how I could refactor it? Or what methodology i should follow?
let view = {
  setupBoard: function() {
    let    gameBoard = document.createElement("table"),
           tictactoe = document.getElementById("tictactoe"),
          messageBox = document.createElement("div"),
       playerButtons = document.createElement("div"),
       restartButton = document.createElement("button");

    // refactor ??
    // setup restart button
    restartButton.innerText = "Restart";
    restartButton.setAttribute("onclick", "handlers.restartGame();");

    // setup player buttons
    playerButtons.innerHTML = this.createPlayerButtons();

    // setup message box
    messageBox.setAttribute("id", "message");
    messageBox.setAttribute("class", "message-box");

    this.createGameTable(gameBoard);

    // this should be refactored -- see appendElementsToHTML() below
    tictactoe.appendChild(gameBoard);
    tictactoe.appendChild(messageBox);
    tictactoe.appendChild(playerButtons);
    tictactoe.appendChild(restartButton);

    // set id's to each tile
    let tds, k;
    tds = gameBoard.getElementsByTagName("td");
    for (k = 0; k < tds.length; k++) {
      tds[k].setAttribute("id", k);
    }
  },

  createGameTable(parentElement) {
    let rows, tiles;
    for (var i = 0; i < 3; i++) {
      rows = document.createElement("tr");
      parentElement.appendChild(rows);
      for (var j = 0; j < 3; j++) {
        tiles = document.createElement("td");
        tiles.setAttribute("class", "tile");
        tiles.setAttribute("onclick", "handlers.tileClick(event)");
        rows.appendChild(tiles);
      }
    }
  },

  appendElementsToHTML() {
    return Array.from(arguments).forEach(function(argument) {
      console.log(argument);
      return document.getElementById("tictactoe").innerHTML += argument;
    });
  },

  createPlayerButtons: function() {
    let playerButtonHTML = '';
    playerButtonHTML += '<form id="switch">';
    playerButtonHTML += 
    '<input onclick="handlers.setStartingPlayer(event)" type="radio" name="pick-player" class="switch-input" value="X" id="playerX">';
    playerButtonHTML += '<label for="X" class="">X</label>';
    playerButtonHTML +=
      '<input onclick="handlers.setStartingPlayer(event)" type="radio" name="pick-player" class="switch-input" value="O" id="playerO">';
    playerButtonHTML += '<label for="O" class="">O</label>'
    playerButtonHTML += '</form>'

    return playerButtonHTML;
  }
}
Nnamdi Victor
@NnamdiV
Dec 01 2016 22:13
Hey guys i am trying to take the "hello, world" to the extreme left of my page anyy ideas http://codepen.io/NnamdiV/pen/yVppJN
Gniewoszu
@Gniewoszu
Dec 01 2016 22:13

@Duruzicanyour

error: function(){
        console.log(false)
      }

add this after success:

James Gusty
@Duruzican
Dec 01 2016 22:13
thank you @Gniewoszu
CamperBot
@camperbot
Dec 01 2016 22:13
duruzican sends brownie points to @gniewoszu :sparkles: :thumbsup: :sparkles:
:cookie: 302 | @gniewoszu |http://www.freecodecamp.com/gniewoszu
zKruki
@zKruki
Dec 01 2016 22:17
<h1>Hello World</h1>
Tyler Moeller
@TylerMoeller
Dec 01 2016 22:18
@nuria-gs Hmmmm, I'll have to think about it some more :(
Nuria
@nuria-gs
Dec 01 2016 22:20
thanks @TylerMoeller
CamperBot
@camperbot
Dec 01 2016 22:20
nuria-gs sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1046 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Nuria
@nuria-gs
Dec 01 2016 22:21
It seems like normal thing but I don't know ho to do it!! :S
Tyler Moeller
@TylerMoeller
Dec 01 2016 22:22
@nuria-gs It's a little complicated to be honest lol, but I think this is what you want: http://codepen.io/TylerMoeller/pen/yVppEa?editors=1100
James Gusty
@Duruzican
Dec 01 2016 22:23
@Gniewoszu I understand that there is an error in the code, I am getting nothing back in my log other than "false" (which is the desired effect from the code you've given me) I've been stuck on this project for 3 days now, kind of at a loss...
Tyler Moeller
@TylerMoeller
Dec 01 2016 22:23
Add this to the CSS to better visualize what the grid layout is doing:
* {
  border: 1px solid black;
}
aRtoo
@artoodeeto
Dec 01 2016 22:23
hi guys can i ask someone in private?? its about using you nav buttons but instead going to the next link it will just change the div?
Gniewoszu
@Gniewoszu
Dec 01 2016 22:24
@Duruzican this code was only to show that your call is unsuccessful
James Gusty
@Duruzican
Dec 01 2016 22:25
ok, so why is the call not going through is my question. am i missing something from the process
Doneal Bercier
@donealbercier
Dec 01 2016 22:25
Is there any easy to use weather API that works over https?
http://codepen.io/donealbercier/pen/wopJNB
Nuria
@nuria-gs
Dec 01 2016 22:26
@TylerMoeller that's exactly what I wanted... you get it with the min-height?
Tyler Moeller
@TylerMoeller
Dec 01 2016 22:26
@nuria-gs Yes, min-height and nesting a row in each column
@donealbercier I like Weather Underground - free to use and supports HTTP/HTTPS
Nuria
@nuria-gs
Dec 01 2016 22:27
ok thanks! @TylerMoeller I tried neting a row with the column, but withouth the min-height it didn't work
CamperBot
@camperbot
Dec 01 2016 22:27
nuria-gs sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: nuria-gs already gave tylermoeller points
Gniewoszu
@Gniewoszu
Dec 01 2016 22:27
@Duruzican change API is best option
Tyler Moeller
@TylerMoeller
Dec 01 2016 22:27
@Duruzican The URL is slightly off - format=jsonp and at the end add &jsonp=?
http://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&lang=en&jsonp=?
You also have to load your codepen page over HTTP because the quote api does not support HTTPS
Doneal Bercier
@donealbercier
Dec 01 2016 22:28
@TylerMoeller yea I had heard of that one I'll try it out. I was also having trouble getting my Farenheit/Celsius switch working. It works the first time and then stops
Max Rohrer
@maxroar
Dec 01 2016 22:29

hey everyone, I'm working on the random quote maker. I have an array of quotes as well as the twitter button implemented but my javascript isn't changing the quote or the text for the twitter link
'''
$document.ready(function(){
$("#randQuote").on("click",function(){
var quoteIndex = Math.floor(Math.random()*rickyQuote.length);
if(rickyQuote[quoteIndex].length > 140){
document.getElementById("#quote").style.font-size = "14px";
}
document.getElementById("#quote").value = rickyQuote[quoteIndex];

  var twitStr = encodeURIComponent(document.getElementById(rickyQuote[quoteIndex]).value);
  document.getElementByID("#twitter-share").href = "https://twitter.com/intent/tweet?text=" + twitStr;
});  

});
'''

CamperBot
@camperbot
Dec 01 2016 22:29
:bulb: to format code use backticks! ``` more info
Tyler Moeller
@TylerMoeller
Dec 01 2016 22:29
@donealbercier Not sure if this is a best practice, but an easy way to do the F/C conversion is to read the current temperature from the page. If it has an F in the text, convert to celsius, else convert to Fahrenheit. You can use .indexOf() to see if it has the 'F'
Then you don't have to deal with local/global variables and scope issues
Max Rohrer
@maxroar
Dec 01 2016 22:30
$document.ready(function(){
    $("#randQuote").on("click",function(){
      var quoteIndex = Math.floor(Math.random()*rickyQuote.length);
      if(rickyQuote[quoteIndex].length > 140){
        document.getElementById("#quote").style.font-size = "14px";
      }
      document.getElementById("#quote").value = rickyQuote[quoteIndex];

      var twitStr = encodeURIComponent(document.getElementById(rickyQuote[quoteIndex]).value);
      document.getElementByID("#twitter-share").href = "https://twitter.com/intent/tweet?text=" + twitStr;
    });  
});
Nnamdi Victor
@NnamdiV
Dec 01 2016 22:35
hey guys
alpox
@alpox
Dec 01 2016 22:36
@donealbercier @TylerMoeller Probably more streight-forward and easy would be to store the value one gets (Probably Celcius) and then either convert it before writing to page, or not.
@maxroar When you work with document.getElementById, don't use the # sharp
@maxroar document.getElementById("quote")
Nuria
@nuria-gs
Dec 01 2016 22:38
@TylerMoeller the thing is that with that solution, in one column there is too much space between the text and the button. I there any option to change the value of min-height on col-xs-12?
alpox
@alpox
Dec 01 2016 22:38
Also, document.getElementByID("#twitter-share")
here you wrote the function wrong (Case sensitive)
James Gusty
@Duruzican
Dec 01 2016 22:39
@TylerMoeller I see the mistake in the url, I've changed it but I am still not able to make a successful call... scratching me head here.
Ellias
@Tron2097
Dec 01 2016 22:39
Hey guys I'm wondering if you can help me with an issue I've been having since I started my tribute page sometimes when I write code into css it doesn't change anything but when I use the <style>...</style> tag it works. I know that I could just write it the the style tag but I want to know why this is. for example I wrote a class called car in my css but the font-size property won't work but when I wrote it in style it did. any hel would be greatly appreciated thanks guys. http://codepen.io/Tron2097/pen/QGMJML
Tyler Moeller
@TylerMoeller
Dec 01 2016 22:40
@donealbercier True, that could work. This is what I meant:
      $("#temperature-holder").on("click",function(){
        if($(this).text().indexOf('F') > -1) {
          $('#temperature-holder').html(tempC)
        } else {
          $('#temperature-holder').html(tempF)
        }
      });
alpox
@alpox
Dec 01 2016 22:40
@maxroar Additionally element.value works only for textboxes and some few other input elements. If your element, which should show the quote, is no input element, use element.innerHTML
Tyler Moeller
@TylerMoeller
Dec 01 2016 22:40
@Duruzican Look in your browser's address bar and make sure you are opening your page via http://codepen.io/..... not https://codepen.io/.....
@nuria-gs You can make min-height whatever value you want, maybe I'm misunderstanding the question
James Gusty
@Duruzican
Dec 01 2016 22:41
OH! Ok, that is what you meant by that, I thought you meant in the url for my api call... thank you
Nuria
@nuria-gs
Dec 01 2016 22:43
@TylerMoeller I mean having one min-height for col-md-6 and other for col-xs-12
Ellias
@Tron2097
Dec 01 2016 22:44
Hey guys I'm wondering if you can help me with an issue I've been having since I started my tribute page sometimes when I write code into css it doesn't change anything but when I use the <style>...</style> tag it works. I know that I could just write it the the style tag but I want to know why this is. for example I wrote a class called car in my css but the font-size property won't work but when I wrote it in style it did. any hel would be greatly appreciated thanks guys. http://codepen.io/Tron2097/pen/QGMJML
Tyler Moeller
@TylerMoeller
Dec 01 2016 22:44
@nuria-gs Ahhh, I'm sorry, I misunderstood. For that, you would need to use media queries and change the height depending on the screen size. This tells you where the breakpoints are: http://getbootstrap.com/css/#grid-media-queries
Nuria
@nuria-gs
Dec 01 2016 22:45
@TylerMoeller ok, I thought you can do it with bootstrap :)
thanks again!! @TylerMoeller
CamperBot
@camperbot
Dec 01 2016 22:45
nuria-gs sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: nuria-gs already gave tylermoeller points
Twitchy-Cake
@Twitchy-Cake
Dec 01 2016 22:47
Man I had no trouble with my tribute page but this portfolio one is already getting me stuck. will probably have more questions later lol
Tyler Moeller
@TylerMoeller
Dec 01 2016 22:47
@Tron2097 With codepen, all the <html>, <body> tags are taken care of for you. The CSS that goes in the <style> tags should go in the CSS panel or it will cause some conflicts like you're seeing. Check out this tour to see where to put everything: https://codepen.io/pen/tour/welcome/start
Ellias
@Tron2097
Dec 01 2016 22:50
@TylerMoeller so I have to use the style tags in the css panal? because I tried that and got an error message
Tyler Moeller
@TylerMoeller
Dec 01 2016 22:51
@Tron2097 No - that panel doesn't accept HTML tags, only pure CSS, so leave out the <style></style> and just put everything from in between
Ellias
@Tron2097
Dec 01 2016 22:53
@TylerMoeller I did that and it still won't change my font-size for the car class
Tyler Moeller
@TylerMoeller
Dec 01 2016 22:53
Hmmmm, I'll take a closer look
@TylerMoeller thanks I really appreciate it
CamperBot
@camperbot
Dec 01 2016 22:53
tron2097 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1047 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Dec 01 2016 22:55

@Tron2097 Try this:

.car {
  text-align: center;
  font-family: "Times New Roman", Times, serif;
  font-size: 48px;
}

You need the . in front of car to signify it's a class name and font-sizes can't be in % sizes.

tyl-er
@tyl-er
Dec 01 2016 22:55

I have a question about the Simon Game. I want to create an array called "player" and push a number to it every time the player clicks a button. But when I console.log(player) outside the blueOn function it doesn't push anything to the array. Any thoughts on how to fix that?

$(document).ready(function(){
var simonAI = [];
var player = [];
//function to run Jquery
var blueOn = function(){
$('#blueAudio')[0].play();
//play audio
$(".bluels").addClass('blueon');
setTimeout( function() {
$(".bluels").removeClass('blueon');
},1000);
//hightlight ls for 1 second
player.push(1);
}
console.log(player);
$("#bluels").click(blueOn);
});

Ellias
@Tron2097
Dec 01 2016 22:57
@TylerMoeller LOL I forgot the . haha. thanks man
CamperBot
@camperbot
Dec 01 2016 22:57
tron2097 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: tron2097 already gave tylermoeller points
Tyler Moeller
@TylerMoeller
Dec 01 2016 22:58
:) any time
@tyl-er This is a scope issue. If you put your console.log(player) inside the blueOn function, you will see the number gets pushed to the array.
tyl-er
@tyl-er
Dec 01 2016 23:05
@TylerMoeller Ok. I wanted to be able to compare that array to another array that has the computers moves. How would I do that? Or should I go about it another way?
Tyler Moeller
@TylerMoeller
Dec 01 2016 23:09
@tyl-er You can create a function that does the comparison and send that array to the function. Also, jQuery .queue is useful instead of using setTimeout:
    var blueOn = function() {
        //fx to play sound and flash ls
        //play audio
        $('#blueAudio')[0].play();
        //hightlight ls for 1 second
        $(".bluels").addClass('blueon').delay(1000).queue(function(next) {
          $(".bluels").removeClass('blueon').dequeue();  
        });

        player.push(1);
        compare(player);
    }

    var compare = function() {
        console.log(player);
    }
Twitchy-Cake
@Twitchy-Cake
Dec 01 2016 23:18
On a bootstrap nav bar, is their any way to change the color of the text on one of the tabs?
James Gusty
@Duruzican
Dec 01 2016 23:18
@TylerMoeller thank you, I figured it out now.
CamperBot
@camperbot
Dec 01 2016 23:18
duruzican sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1048 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Twitchy-Cake
@Twitchy-Cake
Dec 01 2016 23:18
I tried calling a blue-text class, but that hasnt worked
Chris
@bestintown23
Dec 01 2016 23:24
hey how can i change the blue parts of my page to show different pictures??? http://codepen.io/bestintown23/pen/woPMBV
hey how can i change the blue parts of my page to show different pictures??? http://codepen.io/bestintown23/pen/woPMBV
hey how can i change the blue parts of my page to show different pictures??? http://codepen.io/bestintown23/pen/woPMBV
tyl-er
@tyl-er
Dec 01 2016 23:25
@TylerMoeller Ok thanks a bunch. I need to go back study scope some more because it's a little confusing. So if I call "compare" inside of "blueOn" that put's it in blueOn's scope? Even though I declared it separately.
CamperBot
@camperbot
Dec 01 2016 23:25
tyl-er sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1049 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Dec 01 2016 23:32
@bestintown23 Create <section>s for those blue parts and use CSS to apply a background image or just use the <img> tag if you mean to put something like a portfolio image grid for example.
@tyl-er It all depends on what you want to do with the array - I was just showing how to manipulate the array in one function and then do something with it in another function. The parent function (document.ready) has the array defined as [], so it will always log like that if you manipulate it in lower-level functions.
tyl-er
@tyl-er
Dec 01 2016 23:37
@TylerMoeller Got it
Chris
@bestintown23
Dec 01 2016 23:39
@TylerMoeller how can i create sections for them? Example?
Tyler Moeller
@TylerMoeller
Dec 01 2016 23:40
@bestintown23
<section class="first-blue-section">
  <p>Some content</p>
</section>
<section class="second-blue-section">
  <p>Some content</p>
</section>
Like you're doing with the other sections you already have in your page
Chris
@bestintown23
Dec 01 2016 23:42
@TylerMoeller i'll give it a shot and let you know what i come up with, thanks!
CamperBot
@camperbot
Dec 01 2016 23:42
bestintown23 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1050 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
C
@engineerwithoutfear
Dec 01 2016 23:44
Did the wikipedia API just suddenly break for anyone else?
Nate Wilson
@nwilson314
Dec 01 2016 23:44
does anyone have any suggestions for required reading on Ajax and JSON? I didn't find the section on freecodecamp very helpful and I'm pretty lost on the intermediate front end projects
Chris
@bestintown23
Dec 01 2016 23:44
@TylerMoeller in your example i can replace the <p> element with an image right?
Tyler Moeller
@TylerMoeller
Dec 01 2016 23:45
@bestintown23 Yes, or you can remove the <p> element and use CSS to apply a background image to .first-blue-section instead if you want it to take up the entire section
@engineerwithoutfear It works for me right now.
akilesh
@akileshv
Dec 01 2016 23:47
i need help
Gives me a blank page and a "Origin: header is required"
Tyler Moeller
@TylerMoeller
Dec 01 2016 23:49
@nwilson314 Maybe the folks at https://gitter.im/FreeCodeCamp/HelpJavaScript can help out with that. I learned it the hard way through trial and error and the jQuery documentation. This pattern was useful:
var url = 'https://URL to some api/?callback=?'
$.getJSON(url, function() {
  console.log( "success" );
}).done(function() {
  console.log( "second success" );
}).fail(function() {
  console.log( "error" );
}).always(function() {
  console.log( "complete" );
});
@engineerwithoutfear Change your URL to use &callback=? so you don't have to use that crossorigin.me server:
"https://en.wikipedia.org/w/api.php?action=query&list=search&format=json&callback=?&srsearch="
C
@engineerwithoutfear
Dec 01 2016 23:52
thank ya
Franco Rufo
@francorufo
Dec 01 2016 23:59

Hi everyone, currently working on my wikipedia viewer. Having some trouble with my JQuery. When trying to reach the value written on my textarea/textbox by doing console.log, I get back "" every time. What have i missed?

http://codepen.io/franorufo/pen/pNpaap?editors=1111