These are chat archives for FreeCodeCamp/HelpFrontEnd

28th
Dec 2016
Daniel
@DanJP2016
Dec 28 2016 00:06
hello, I made some suggested changes to my random quote machine project, would someone mind looking it over once more and letting me know if there are any more improvements I can make. Thank you. http://codepen.io/bones211/full/YpoWmK/
nathanthai
@nathanthai
Dec 28 2016 00:24
html help.JPG
Don't know why my selfie picture is margined a little to the left, even though i put margin-left: 0;
Francois van Leersum
@Blockshot12
Dec 28 2016 00:31
@nathanthai
.col-md-4 {
  padding-left: 0;
}
Tom
@moT01
Dec 28 2016 00:32
@DanJP2016 you're making the rest of our quote machines look like crap
@DanJP2016 have the 'ready' lit up right away?
@nathanthai why dont you just give the codepen link instead of a screen shot
Francois van Leersum
@Blockshot12
Dec 28 2016 00:34
@nathanthai The class col-md-4 of the surrounding <div id=“sefiebox” class=“col-md-4”>… has a left and right padding of 15px;

A better solution is to make selfiebox a class set padding-left: 0; like this:

<div class=“col-md-4 selfiebox”>…</div>

CSS:

.sefliebox {
  padding-left: 0;
}
Daniel
@DanJP2016
Dec 28 2016 00:37
@moT01 lol thanks. I thought about that, but the twitter button will flash a warning if pressed before a quote is loaded, so it's not really ready. that just seemed like it would be confusing to the user.
CamperBot
@camperbot
Dec 28 2016 00:37
danjp2016 sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 439 | @mot01 |http://www.freecodecamp.com/mot01
emamadordev
@emamadordev
Dec 28 2016 01:05
i'm doing the simon challenge. for some reason when my function to play all the colors after eachother is called it instead plays the colors at the same time. check it out: https://codepen.io/emmanuelamador/full/XNwoxv/
Johnny
@JohnnyBizzel
Dec 28 2016 01:15
@emamador I can't turn the thing on and the controls move
emamadordev
@emamadordev
Dec 28 2016 01:19
@JohnnyBizzel are you seeing it on desktop?
@JohnnyBizzel just click start
Johnny
@JohnnyBizzel
Dec 28 2016 01:21
@emamador Well the buttons move all over the place. Where is the on/off switch?
And when you hit start a sequence should start playing, right?
emamadordev
@emamadordev
Dec 28 2016 01:23
@JohnnyBizzel yeah
Phillip Troutman
@troutman21
Dec 28 2016 01:48
can anyone help me with setting up multiple backgrounds? I keep running into problems. I am trying to set up three backgrounds that stack on top of each other (top, middle , bottom) similar to the example portfolio webpage challenge. how is this accomplished? this is what i have so far. http://codepen.io/Troutman21/pen/PbrQqE?editors=1100
ravisraval
@ravisraval
Dec 28 2016 02:04
Hey silly question, but how do I enable bootstrap in codepen's css?
jk figured it out lol
Phillip Troutman
@troutman21
Dec 28 2016 02:04
if you go to the css box its under the tools icon @ravisraval
use "quick add"
Josh
@joshfilippi
Dec 28 2016 02:15
Hello,
Could anyone help me to get my api call working. I'm trying to console.log the JSON data i get from a local weather api but my code doesn't seem to work. been stuck for a good 45 mins. http://codepen.io/JoshFilippi/pen/ENBeWG?editors=1112 Thanks
Phillip Troutman
@troutman21
Dec 28 2016 02:43
Hey everyone, Im to the point in my portfolio project where i need to create several thumbnails of my past projects (aka place holders since I have not past projects) Can anyone point me in the right direction for how to start this? Are they just normal images that i'm adding ? or is there a special thumbnail tag i don't know about ?
Josh
@joshfilippi
Dec 28 2016 02:53
I just added them in an <img> tag and gave them all a consistent size with max height and max width
Manish Giri
@Manish-Giri
Dec 28 2016 02:58

@joshfilippi it works for me

Objectbase: "stations"clouds: Objectcod: 200coord: Objectdt: 1482890640id: 1851632main: Objectname: "Shuzenji"sys: Objectvisibility: 10000weather: Array[1]wind: Objectproto: Object

Josh
@joshfilippi
Dec 28 2016 03:02
@Manish-Giri Yes it started working for me about 10 mins ago. with no change to the code. I've had this problem before with apis where periodically I wont receive any data. I'm not sure if I'm doing something stupid because I'm fairly new to apis..
thanks @Manish-Giri
CamperBot
@camperbot
Dec 28 2016 03:03
joshfilippi sends brownie points to @manish-giri :sparkles: :thumbsup: :sparkles:
:star2: 3337 | @manish-giri |http://www.freecodecamp.com/manish-giri
Manish Giri
@Manish-Giri
Dec 28 2016 03:05
@joshfilippi possibly a browser issue?
Ashwini Sridhar
@Ash1108
Dec 28 2016 03:07
Hello! Does anyone have any idea about how to make a fixed navbar inside a relative element?
Josh
@joshfilippi
Dec 28 2016 03:19
@Ash1108 I used
position:fixed;
z-index:1;
in the css for my navbar to make it stick to the top as i scrolled down. no javascript needed. the z index just stacks it above other elements. If you don't do this the elements overlap and look weird.
Walid Ashri
@walidashri
Dec 28 2016 03:22
@Ash1108 The parent element container must have position: relative, and navbar must have position: absolute and class .navbar-fixed-top or bottom
Josh
@joshfilippi
Dec 28 2016 03:38
can anyone run this and tell me if the api call works for them? I'm not receiving any data. Thanks
http://codepen.io/JoshFilippi/pen/ENBeWG?editors=1011
i used console.log so the data should appear in the console
Andrew Boorde
@aboorde
Dec 28 2016 04:00
yours works
api.JPG
Josh
@joshfilippi
Dec 28 2016 04:04
That's frustrating.. I'm not receiving anything when i run it. Thank you @aboorde
CamperBot
@camperbot
Dec 28 2016 04:04
joshfilippi sends brownie points to @aboorde :sparkles: :thumbsup: :sparkles:
:cookie: 406 | @aboorde |http://www.freecodecamp.com/aboorde
Josh
@joshfilippi
Dec 28 2016 04:05
I've tried on 2 browsers in case it made a difference
hi every one, i build quote machine a few weeks ago and it worked but i checked today and it didnt, so i export my code from codepen and ran it on browser and it works on browser but not in codepen then i thought maybe it is a problem on codepen server then i check a few other projects on codepen that has js and they work so any one knows what is the problem? here is the link:
Hossein Ghanaati
@Hossein-Ghanaati
Dec 28 2016 04:50
never-mind for some bizarre reason it works again
just waste 2 hours of my time lol :)
Sorin Ruse
@sorinr
Dec 28 2016 05:49
@Hossein-Ghanaati it was not working because you have loaded the pen over the https first instead of http
RakeshNerkar
@Rakesh18754
Dec 28 2016 07:17
function Parent(){
    $(this) //  outer this keyword
        function Child(){
            $(this) //  inner this keyword
        }
}
I want to access the Parent "this" keyword in the child
How can I do this Any Idea?
Sorin Ruse
@sorinr
Dec 28 2016 07:41
@Rakesh18754 try assign var $that = $(this) into the parent and use $that into the child
Ritvars
@RitvarsZ
Dec 28 2016 07:55
@Hossein-Ghanaati A lot of pepole use the forismatic api(or somethimg loke that), which only works over http. When codepen decides to run through https, the quotes don't generate anymore
Mahak Narayan Singh
@makkBit
Dec 28 2016 08:08
like this @Rakesh18754
function Parent(){
    var $that = $(this); //  outer this keyword assigned to that var
        function Child(){
            $(this) //  inner this keyword
            $(that) // outer this keyword
        }
}
Phillip Sturgeon
@pmsturgeon
Dec 28 2016 09:02

Hey All! random question... I've just reached the first front end challenge in which you build a Tribute page (the one in which the example is the tribute page for Dr. Norman Borlaug). I think I've built mine to satisfy the User Stories, but I've done it with CSS (I think -- I used a <style></style> section).

Am I allowed to do this?

I'm still pretty new to everything... sorry if this is the wrong place to ask.
Sorin Ruse
@sorinr
Dec 28 2016 09:07
@pmsturgeon yes its ok to put your style between <style></style> tags but if you are using codepen its better to leave into the html pane only the html code and move all that you have into style to the css pane. its easier to read all the code by separating it
Phillip Sturgeon
@pmsturgeon
Dec 28 2016 09:08
@sorinr thanks so much for responding. I'll check this out.
CamperBot
@camperbot
Dec 28 2016 09:08
pmsturgeon sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1011 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Dec 28 2016 09:09
@pmsturgeon welcome
Clyde Lobo
@oppiniated
Dec 28 2016 09:09
@makkBit in the Child function use $that instead of $(that), else you will get an error since that is not defined
Sorin Ruse
@sorinr
Dec 28 2016 09:10
@oppiniated yep. as i said it before: :point_up: December 28, 2016 9:41 AM
Tim Handy
@TimHandy
Dec 28 2016 10:29
Anyone tried working through the alpha React challenges yet? http://hysterical-amusement.surge.sh/ React seems to be the most difficult thing I've attempted yet. More difficult than Node and Express. Sooo many new concepts, and methods to wrap your head around and remember.
PankajKaushik78
@PankajKaushik78
Dec 28 2016 10:42
// Setup
function abTest(a, b) {
  // Only change code below this line
if (a>0, b>0){
  return Math.round(Math.pow(Math.sqrt(a) + Math.sqrt(b), 2));
}else{
  return undefined;
}

  // Only change code above this line

  return Math.round(Math.pow(Math.sqrt(a) + Math.sqrt(b), 2));
}

// Change values below to test your code
abTest(-2,2);
ERROR???
Clyde Lobo
@oppiniated
Dec 28 2016 10:44
@PankajKaushik78 what do you mean here ? if (a>0, b>0)
PankajKaushik78
@PankajKaushik78
Dec 28 2016 10:44
it says that a and b should be greater than 0 @oppiniated
Modify the function abTest so that if a or b are less than 0 the function will immediately exit with a value of undefined.
Clyde Lobo
@oppiniated
Dec 28 2016 10:45
@PankajKaushik78 if (a>0 && b>0)
Pieter Stokkink
@forkerino
Dec 28 2016 10:45
@PankajKaushik78 what about when they are equal to 0?
Clyde Lobo
@oppiniated
Dec 28 2016 10:45
@PankajKaushik78 you can simplify this
PankajKaushik78
@PankajKaushik78
Dec 28 2016 10:46
oh i remember
thanks @oppiniated
CamperBot
@camperbot
Dec 28 2016 10:46
:cookie: 467 | @oppiniated |http://www.freecodecamp.com/oppiniated
pankajkaushik78 sends brownie points to @oppiniated :sparkles: :thumbsup: :sparkles:
Clyde Lobo
@oppiniated
Dec 28 2016 10:46

You can change

if (a>0, b>0){
  return Math.round(Math.pow(Math.sqrt(a) + Math.sqrt(b), 2));
}else{
  return undefined;
}

to if(a<0 && b <0) return undefined

jayisray
@jayisray
Dec 28 2016 10:47
Has anyone done the GIT challenge? Repocat won’t collaborate with me >.<
Idk how to finish this task
Clyde Lobo
@oppiniated
Dec 28 2016 10:50
@jayisray What's the issue?
jayisray
@jayisray
Dec 28 2016 10:51
@oppiniated I invited reporobot to collaborate with me and it keeps saying that it’s awaiting a response for the invitation
It’s been over 40 minutes, but the task says it’s supposed to take seconds
Darth Skywalker
@adityaparab
Dec 28 2016 11:31
@PankajKaushik78
if (a>0 && b>0){
  return Math.round(Math.pow(Math.sqrt(a) + Math.sqrt(b), 2));
}
you don't need the else part. :laughing:
Philipp Scholz
@philipp32
Dec 28 2016 12:05
Hey :)
// Nested object which I want to access
quotes = [
{ quote:..., author:..., id:...},{quote..., author:..., id:...},...]
var randomID = Math.floor(Math.random()*26)+1;
// generate a random quote and display in  quote-area
 var output = document.getElementById('quote-area');
// quote-area is <div> in which the quote should be displayed
// rQFunction gets called when pressing the button 
function rQFunction(randomID){
  var quote = quotes[randomID].quote;
  var author = quotes[randomID].author;
  output.innerHTML = quote + "- " + author;
}
Doesn't work. :/ I am more interested in finding conceptual mistakes why this doesn't work. Maybe it's also only something really small. :/
Seong Kim
@ksc23
Dec 28 2016 12:25
Hi guys I'm working on the Build a Tribute Page challenge. I'm making some progress but not sure if I'm doing it correctly. Would appreciate any feedback based on what I've done so far https://codepen.io/ksc23/pen/WoqXJx
Phillip Troutman
@troutman21
Dec 28 2016 12:27
@ksc23 looks good to me !
Seong Kim
@ksc23
Dec 28 2016 12:27
@troutman21 thank you
CamperBot
@camperbot
Dec 28 2016 12:27
ksc23 sends brownie points to @troutman21 :sparkles: :thumbsup: :sparkles:
:cookie: 120 | @troutman21 |http://www.freecodecamp.com/troutman21
Seong Kim
@ksc23
Dec 28 2016 12:28
Any tips on how to set the margins on the h4 and list ?
Nvm I think I gotta use the bootstrap columns somehow
Phillip Troutman
@troutman21
Dec 28 2016 12:33
what is it that you are trying to do exactly? @ksc23
Seong Kim
@ksc23
Dec 28 2016 12:36
On the example tribute page the timeline section is centered https://codepen.io/FreeCodeCamp/full/NNvBQW/
Trying not to look at that page's code yet.. but I should use div class row and col for that correct?
pratfallbat
@pratfallbat
Dec 28 2016 12:39
a quick question ..should i choose to learn cpp or java ?
in context of being full stackk developer
Sara Soliman
@solimansara
Dec 28 2016 12:41
Hi,
I am starting my first project "build a tribute page". I am confused on what language to use. How to choose from HTML, CSS, Boostrap and jQuery that i have just learned.
Uros Tadic
@urketadic
Dec 28 2016 12:45
Well, HTML is used to give structure to a webpage and with CSS youl make it nicer
by adding styling
Bootstrap is just like a.. framework you can use to build web page faster http://getbootstrap.com/
and jquery is javascript
Sara Soliman
@solimansara
Dec 28 2016 12:50
Is Bootstrap used instead of HTML?
Ankit Agarwal
@ankit-prgmr
Dec 28 2016 12:51
@solimansara Bootstrap is used to make your page responsive. It's a framework not an alternate for html
Sara Soliman
@solimansara
Dec 28 2016 12:54
OK, thank you. It will probably become more clear as i work with them often.
Ankit Agarwal
@ankit-prgmr
Dec 28 2016 12:56
@solimansara Yes it will
Sara Soliman
@solimansara
Dec 28 2016 13:05
Thank you very much for the fast response, i will probably be asking many questions though until i learn :)
Ankit Agarwal
@ankit-prgmr
Dec 28 2016 13:06
@solimansara Of course. The community here is very helpful
Sara Soliman
@solimansara
Dec 28 2016 13:07
I noticed, i am very grateful for this community!
Ankit Agarwal
@ankit-prgmr
Dec 28 2016 13:08
:+1:
Icah Banton
@remdata
Dec 28 2016 13:16
Help? The first <h3> line in my pen's ABOUT section is not showing. What am I doing wrong? https://codepen.io/ibanton/pen/GNLpjJ
CamperBot
@camperbot
Dec 28 2016 13:16
no wiki entry for: the first h3 line in my pens about section is not showing what am i doing wrong httpscodepenioibantonpengnlpjj
Ankit Agarwal
@ankit-prgmr
Dec 28 2016 13:21
@remdata Because it's under your navbar
Give this class to your div containing h3 elements
.marginTop{
margin-top : 50px;
}
Sara Soliman
@solimansara
Dec 28 2016 13:22
<img src=" lisa_deluca.jpg"> is this how to insert a picture saved in a file?
Ankit Agarwal
@ankit-prgmr
Dec 28 2016 13:23
You're trying to insert the pic in codepen?
Icah Banton
@remdata
Dec 28 2016 13:23
thanks Ankit
Ankit Agarwal
@ankit-prgmr
Dec 28 2016 13:23
@remdata Anytime :+1:
Sara Soliman
@solimansara
Dec 28 2016 13:26
yes
It is more professional to use an image from the web instead of a folder, right?
Ankit Agarwal
@ankit-prgmr
Dec 28 2016 13:29
@solimansara then you need to host your image somewhere like cloudinary, unless you got a pro codepen
Sara Soliman
@solimansara
Dec 28 2016 13:33
Ok, i understand. I was just able to insert the image from the web :)
Ankit Agarwal
@ankit-prgmr
Dec 28 2016 13:34
@solimansara free codepen plan doesn't let you add image
Sara Soliman
@solimansara
Dec 28 2016 13:37
Right! I was able to find the source of the image i wanted from the web and i included that. just like in the tutorial.
Ankit Agarwal
@ankit-prgmr
Dec 28 2016 13:40
Cool :+1:
Nagy Szilard
@sziko
Dec 28 2016 14:10
Can someone help me out? The last input isn't placed right
i want the textarea to be bigger
Nagy Szilard
@sziko
Dec 28 2016 14:19
Nvm. I fixed it
sittingroom panel is not coming down
Help needed
CamperBot
@camperbot
Dec 28 2016 14:25
no wiki entry for: needed
Patrick Tran
@tranpatrick01
Dec 28 2016 14:38
My facebook "find us on facebook" won't move if i do top:30px;
Need help
Ankit Agarwal
@ankit-prgmr
Dec 28 2016 14:40
@tranpatrick01 codepen link please?
Walid Ashri
@walidashri
Dec 28 2016 14:42
@nani554 use one word for id like"Sitting-Room" and change the rel also two words is making error
Nicholas Maxwell
@tech-dom
Dec 28 2016 14:56
Hello all...
I'm having a little trouble with "Build a Random Quote
"
HTML -

<div class="container-fluid text-center">
  <h1>Random Quote Generator</h1>
  <!-- <p>Some of the quotes are here</p> -->
    <div class="img"><img src="http://cdn.arstechnica.net/wp-content/uploads/2016/02/5718897981_10faa45ac3_b-640x624.jpg"></div>
  <br />

  <button class="btn btn-default" type="submit" id="newQuote">New Quote</button>
  <a class="btn btn-default"
href="#" id="tweet" data-size="large">Tweet It!</a>
  <div class="quotes text-center">
    <span class="quote"></span>
    <span class="author"></span>
  </div>  
</div>


JS -

$(document).ready(function() {

  getQuote();

  var randomQuote
  var author;

 function getQuote(){

   var url = "http://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=jsonp&jsonp=?";
   $.getJSON(url, function(data) {
     $(".quote").html("'" + data.quoteText + "'");
     $(".author").html("- " + data.quoteAuthor);
   });

  };

  $("#tweet").on("click", function() {
    window.open("https://twitter.com/intent/tweet?text=" + randomQuote);
  });

  $("#newQuote").on("click", function() {
    getQuote();
  });

});
Lately it's come out to just a typo, but I can't find it anywhere
I have my CSS if needed, but that's highly doubtful the problem, heh.
Sorin Ruse
@sorinr
Dec 28 2016 15:14
@tech-dom the url is the problem. it should be like http://api.forismatic.com/api/1.0/?method=getQuote&key=457653&format=jsonp&lang=en&jsonp=? . you r missing the key
Yerrapotu Manojkiran
@nani554
Dec 28 2016 15:24
@walid thank you
CamperBot
@camperbot
Dec 28 2016 15:24
nani554 sends brownie points to @walid :sparkles: :thumbsup: :sparkles:
:cookie: 76 | @walid |http://www.freecodecamp.com/walid
Yerrapotu Manojkiran
@nani554
Dec 28 2016 15:24
u got a genius touch
Joran de Haan
@LeCoquille
Dec 28 2016 15:58
Hi all, I have some trouble with my website, anyone care to take a look at my code?
Nick McCord
@Thrillxlordz
Dec 28 2016 16:00
How do you make text bold in HTML?
Ankit Agarwal
@ankit-prgmr
Dec 28 2016 16:01
@Thrillxlordz use <strong> or <b> tag
Abhijeet Singh
@abhijeetps
Dec 28 2016 16:35
Need help in this?
Anybody?
@rjstone @txtsd
Guys.. Can you help?
Abhijeet Singh
@abhijeetps
Dec 28 2016 16:43
@ankit-prgmr
Can you help me out?
How can I prepoulate my Quote as a tweet here?
Need Help.
Here's my Quote Machine:
http://codepen.io/aps120797/full/NbZZvP/
How can I prepoulate my Quote as a tweet here?
Ankit Agarwal
@ankit-prgmr
Dec 28 2016 16:45
@aps120797 Sorry bro I haven't reached to that point yet
Abhijeet Singh
@abhijeetps
Dec 28 2016 16:46
Okay. @ankit-prgmr
ricky2412
@ricky2412
Dec 28 2016 16:48
getting difficult in creating portfolio page
when we click on portfolio button in navigation bar how to scroll down in the same page https://codepen.io/FreeCodeCamp/full/YqLyXB/. similar to this
navigate to different sections of the webpage by clicking buttons in the navigation
livonian-router
@livonian-router
Dec 28 2016 16:53
I've done some projects but I can't find some good inspiration for my projects' design and currently my projects lack of css styles
Any sites/places to get some design ideas?
Jason Luboff
@JLuboff
Dec 28 2016 16:55
@ricky2412 you use your anchor tag on your nav bar and have it point to the id of the section you want. Meaning <a href="#contact"> Contact </a> and then where your contact section is, you'd want to assign the id contact to a div container or something within that area
livonian-router
@livonian-router
Dec 28 2016 17:12

It seems that the ajax doesn't work in my codepen but works fine in normal html file
Anyone know what's the problem?

https://codepen.io/livonian-router/pen/RoXwZE

Tyler Moeller
@TylerMoeller
Dec 28 2016 17:23
@livonian-router Open your codepen over HTTP. The forismatic API does not support HTTPS. http://s.codepen.io/livonian-router/pen/RoXwZE
Or, ideally, choose an API that supports both HTTP and HTTPS :)
livonian-router
@livonian-router
Dec 28 2016 17:30
@TylerMoeller Thanks :D
But now my weather site doesn't work despite I've accessed it to http
http://codepen.io/livonian-router/pen/mONdKg
CamperBot
@camperbot
Dec 28 2016 17:30
livonian-router sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1209 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Dec 28 2016 17:31
@livonian-router Similar problem :) navigator.geolocation requires HTTPS, but you're trying to call the API over HTTP. Use All HTTPS when possible. There are some errors in the browser's dev console that will give a hint to this. Press Ctrl+Shift+J to see the errors and debug further.
(Command+Shift+J on Mac)
Silvietta
@Ayvlis
Dec 28 2016 17:32
Hello everyone! Can you tell me just if the icon works right in your location? Thank you!
Ankit Agarwal
@ankit-prgmr
Dec 28 2016 17:34
@Ayvlis I couldn't see the icon
Silvietta
@Ayvlis
Dec 28 2016 17:38
@ankit-prgmr and you allowed geolocation?
livonian-router
@livonian-router
Dec 28 2016 17:39
@TylerMoeller thanks, it's working now.
I just forgot to embed the jQuery, silly me :smile:
CamperBot
@camperbot
Dec 28 2016 17:39
livonian-router sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: livonian-router already gave tylermoeller points
Ankit Agarwal
@ankit-prgmr
Dec 28 2016 17:40
@Ayvlis I didn't know it was blocked. I tried opening in the new browser and it worked. Nice work :+1: :smile:
Silvietta
@Ayvlis
Dec 28 2016 17:41
@ankit-prgmr just the beginning, now I have to work on city name, temperature, wind, f/c switch, image change, ... :P thank you anyways!
CamperBot
@camperbot
Dec 28 2016 17:41
ayvlis sends brownie points to @ankit-prgmr :sparkles: :thumbsup: :sparkles:
:cookie: 245 | @ankit-prgmr |http://www.freecodecamp.com/ankit-prgmr
Ankit Agarwal
@ankit-prgmr
Dec 28 2016 17:43
@Ayvlis woah lot of work, haven't reached to that point yet :D
Tyler Moeller
@TylerMoeller
Dec 28 2016 18:08
@livonian-router That happens sometimes :) the error I'm referring to is shown in the dev tools console.
blob
Lung Chen
@indiffidence
Dec 28 2016 18:27
Question: What's the difference between the user story and "functionally similar"
allenlswain
@allenlswain
Dec 28 2016 18:42
I'm doing the portfolio project and can't figure out how to add the overlay with buttons over the scrolling main page. Can someone help?
Abhijeet Singh
@abhijeetps
Dec 28 2016 18:53
Anyone online?
mcmaster-99
@mcmaster-99
Dec 28 2016 18:55
Hey guys, needing help on the random quote generator project. I have extracted data from a url but the issue is that the button only fetches the data once. How can I fetch new data with each button click?

Here is my code:
```var colors = ["rgba(86,175,99,0.6)", "rgba(86,175,222,0.6)", "rgba(0,0,0,0.6)"];

$(document).ready(function() {

// Click Event Handler
$("#getmessage").click(function() {

// Data Extraction Using Ajax
$.ajax({
  url: "http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1callback=?",
  type: "GET",
  datatype: 'json',

  success:function(data){
    $(".message").html(JSON.stringify(data[0].content));
  },

  error:function(){
    alert("error");
  }

});

// Color Generator
var randomColor = colors[Math.floor(Math.random() * colors.length)];
$("body").css({
  "background": randomColor,
  "transition": "all 2s ease"
});

});
});

var colors = ["rgba(86,175,99,0.6)", "rgba(86,175,222,0.6)", "rgba(0,0,0,0.6)"];

$(document).ready(function() {

  // Click Event Handler
  $("#getmessage").click(function() {

    // Data Extraction Using Ajax
    $.ajax({
      url: "http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1callback=?",
      type: "GET",
      datatype: 'json',

      success:function(data){
        $(".message").html(JSON.stringify(data[0].content));
      },

      error:function(){
        alert("error");
      }

    });

    // Color Generator
    var randomColor = colors[Math.floor(Math.random() * colors.length)];
    $("body").css({
      "background": randomColor,
      "transition": "all 2s ease"
    });
  });
});
Tyler Moeller
@TylerMoeller
Dec 28 2016 19:03
@mcmaster-99 use cache: false - see the second code example here: https://quotesondesign.com/api-v4-0/
gpsims
@gpsims
Dec 28 2016 19:04
for the portfolio project in codepen, do we create it in the html box or the css box?
mcmaster-99
@mcmaster-99
Dec 28 2016 19:07
@TylerMoeller THANK YOU
CamperBot
@camperbot
Dec 28 2016 19:07
mcmaster-99 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1212 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Dec 28 2016 19:08
@mcmaster-99 No problem!
mcmaster-99
@mcmaster-99
Dec 28 2016 19:09
@gpsims both CSS and HTML
Tyler Moeller
@TylerMoeller
Dec 28 2016 19:10
@gpsims You put HTML in the HTML box and CSS in the CSS box. Take a look at other projects to see how people separate their code. Take a tour of codepen here: https://s.codepen.io/pen/tour/welcome/start
allenlswain
@allenlswain
Dec 28 2016 19:22
Are we supposed to use a vertical carousel for the portfolio project?
Nagy Szilard
@sziko
Dec 28 2016 19:23
Does adding multiple anchor elements interfere with each other?
When i click on one of the it keeps opening the wrong site
emamadordev
@emamadordev
Dec 28 2016 19:28
I'm doing the Simon challenge. The problem that i'm having is when the function playaicolors is called it plays the colors at the same time and not in separate intervals. take a look: https://codepen.io/emmanuelamador/full/XNwoxv/
Ritvars
@RitvarsZ
Dec 28 2016 19:28
@sziko what do you mean? Can you show some code?
allenlswain
@allenlswain
Dec 28 2016 19:32
Is the portfolio project supposed to be done right afteer the tribute page? I'm feeling a bit frustrated with it because I don'tr think I've learned any of this stuff.
Nagy Szilard
@sziko
Dec 28 2016 19:33
@allenlswain i think you just have to google most of the stuff
allenlswain
@allenlswain
Dec 28 2016 19:34
i don't even know what to google.
Nagy Szilard
@sziko
Dec 28 2016 19:36
@RitvarsZ check in private
Tyler Moeller
@TylerMoeller
Dec 28 2016 19:41

@emamador Calling a setTimeout in a for() loop usually doesn't work unless you make it an immediately-evoked function expression, implement promises, or use some sort of callback counting mechanism. For example, try this code as a simplified version of yours:

for(var i = 10; i >= 0; i--) {
  setTimeout(function() {
    console.log(i);
  }, 1000)
}

This does not count down from 10 to 0, instead you get -1 output 11 times. This Stack Overflow question may help explain in more detail: http://stackoverflow.com/questions/5226285/settimeout-in-for-loop-does-not-print-consecutive-values

emamadordev
@emamadordev
Dec 28 2016 19:50
@TylerMoeller oh my god!!! so that's the problem!? thank you!!! this has been driving me crazy for days!! and i'm anxious to finish it already because it's the last project before getting the front-end certification. I've been forcing myself to figure it out before asking for help. I kind of wondered towards the end if it was the for loop but then i thought it wasn't the for loop. i was having doubts. Anyways, thanks.
CamperBot
@camperbot
Dec 28 2016 19:50
emamador sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1213 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
emamadordev
@emamadordev
Dec 28 2016 19:50
:)
Tyler Moeller
@TylerMoeller
Dec 28 2016 19:52
You're welcome :) I had to ask about this too when I worked on Simon. I ended up using jQuery .queue() which turned out to be a little too complicated, but I learned a lot in the end.
emamadordev
@emamadordev
Dec 28 2016 19:54
@TylerMoeller i heard about the queue but haven't used it yet. in the future maybe. what are you working on? i always see you here?
Tyler Moeller
@TylerMoeller
Dec 28 2016 19:54
I'm slowly going through dataviz and backend certifications - this is just a lunch break now :)
emamadordev
@emamadordev
Dec 28 2016 19:56
@TylerMoeller oh nice. how long have you been coding?
Jake
@NeelDVirus
Dec 28 2016 19:58

i have a dought, might be a silly one, but it's making me curious!
Below is the link of my code in codepen.

First preview it in full-size, and then just add row in the class of div tag (in line-11 of the html code) which would be <div class=" row well well-lg"> . Now notice the changes that takes place
..So i am curious to know that what css property of .div class made that possible

i wasted and hour in digging and finding out but failed.. if anyone can help me out then i will really appreciate it
http://codepen.io/neel111/pen/dOBjOj?editors=1000
And also it seems fine(with .row class) in small and extra-small size view as if the .row class is already being added

i have a dought, might be a silly one, but it's making me curious!
Below is the link of my code in codepen.
First preview it in full-size, and then just add row in the class of div tag (in line-11 of the html code) which would be <div class=" row well well-lg"> . Now notice the changes that takes place
..So i am curious to know that what css property of .div class made that possible
i wasted and hour in digging and finding out but failed.. if anyone can help me out then i will really appreciate it
http://codepen.io/neel111/pen/dOBjOj?editors=1000
And also it seems fine(with .row class) in small and extra-small size view as if the .row class is already being added
Tyler Moeller
@TylerMoeller
Dec 28 2016 20:04
@emamador Just over a year now, but did a lot of scripting before that
Not sure if scripting = coding lol
emamadordev
@emamadordev
Dec 28 2016 20:06
@TylerMoeller oh cool. I started 3.5 months ago. On September 15 to be exact. I'm a novice. Good luck on your projects.
Tyler Moeller
@TylerMoeller
Dec 28 2016 20:06
@NeelDVirus Right-click the element and choose "inspect" - you can see more of what's going on. This is how the grid works in bootstrap: http://getbootstrap.com/css/#grid
To dig in to all the CSS behind the scenes, review the main bootstrap css file at: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css
@emamador Good luck to you too!
Jake
@NeelDVirus
Dec 28 2016 20:09
@TylerMoeller Nice to see you again!
well yeah i tried to inspect but i cudn't find out the roll of .row from there
and the link you sent me doesn't throw the light explicitly about why this happened
Paulo Tokimatu
@paulotokimatu
Dec 28 2016 20:24

Guys, I need some help. Why is flexbox not vertically centering my elements? If I specify my body with height: 1000px it works, but using 100% does not.

https://paulotokimatu.github.io/simon.html
https://paulotokimatu.github.io/simon.css

Gytis
@GyckaZ
Dec 28 2016 20:44
hey guys, check my latest efforts:
oops, bad link, here u are: http://codepen.io/GyckaZ/full/Gqzxaw
Ralph Nahra
@Rallph
Dec 28 2016 20:48
hey guys what can I use to get the user's location from coordinates? I noticed that the google maps api uses https so it won't work with codepen
Tzvetlin Velev
@tvelev92
Dec 28 2016 20:50
can i get some help with javascript
Nagy Szilard
@sziko
Dec 28 2016 20:52
Can someone help me ? How can i make the menu bar follow when i scroll down the page?
Martine Ross
@moi238
Dec 28 2016 20:57
@sziko I think if you make it fixed it'll do that. I'm not completely sure but I think in the CSS you put position: fixed;
Nagy Szilard
@sziko
Dec 28 2016 20:59
@moi238 lol. It worked. Didn't think it was so simple, thanks!
CamperBot
@camperbot
Dec 28 2016 20:59
sziko sends brownie points to @moi238 :sparkles: :thumbsup: :sparkles:
:cookie: 226 | @moi238 |http://www.freecodecamp.com/moi238
daniel713tx
@daniel713tx
Dec 28 2016 21:19
,
So im at the part where I'm supposed to build a tribute page. My mind went totally blank when I was told not to look at the code for the example page. What should I do?
MaxVL
@Makzin
Dec 28 2016 21:27
hey all - could use some help with the Javascript Calculator challenge, but some CSS part. I’m trying to create a ‘C’ button next to the ‘results screen’ at the top left corner, but for whatever reason I can’t seem to resize it properly. I’ve tripled checked my selectors and that the <div> in which is is housed (the #top div) is properly set too. Any thoughts?
the problem code is at the bottom of the CSS tab
lettda
@lettda
Dec 28 2016 21:43
Hi everyone! I'm trying to set the background of the content area in my weather app, but it's not working. Been trying for about 30mins and still nothing. For some reason it works in ocdepen loading the background but not on my local machine http://codepen.io/lettda/pen/vyqapb
Also the background when it loads in codepen takes up the wrong space
Samuel Kaiser
@sk22
Dec 28 2016 21:52
Hey, maybe some of you can help me with my webpack-sass-related problem: http://stackoverflow.com/questions/41368263/how-to-import-external-scss-properly-with-webpack-and-vue-js
mixu1308
@mixu1308
Dec 28 2016 22:10
Hey does someone know how I can make it so that the whole <li> element is clickable with the link of the <a> tag within it http://codepen.io/mixu1308/pen/oYxPQO
Samuel Kaiser
@sk22
Dec 28 2016 22:11
a {
  display: block;
}
something like that probably?
at least that's what I've seen in horizontal menus
mixu1308
@mixu1308
Dec 28 2016 22:12
I already have that but that doesn't seem to make the whole element clickable
only the horizontal part of the a tag
maybe that helps?
Well, what about wrapping all of the li's contents into an a tag? @mixu1308
mixu1308
@mixu1308
Dec 28 2016 22:17
so change it to something like this "<a href=" + data[3][i] + "><h6>" + data[1][i] + "</h6><li><p>" + data[2][i] + "</p></li></a>" I've tried it but it screws up the whole styling
@sk22 nevermind that works !
Samuel Kaiser
@sk22
Dec 28 2016 22:20
okay, awesome!
mixu1308
@mixu1308
Dec 28 2016 22:20
@sk22 thanks!
CamperBot
@camperbot
Dec 28 2016 22:20
:warning: The user instance is not valid. Details: username is not unique (value: "sk22"); username User already exists (value: "sk22").
mixu1308 sends brownie points to @sk22 :sparkles: :thumbsup: :sparkles:
Samuel Kaiser
@sk22
Dec 28 2016 22:20
no problem ;)
By the way, "Search" is spelled with an h at the end ^^ @mixu1308
mixu1308
@mixu1308
Dec 28 2016 22:23
oh yeah, I probably deleted to get the CSS to update, for some reason it only changes with a change in html or js but not css
Samuel Kaiser
@sk22
Dec 28 2016 22:33
Aaand, using jQuery that way is kinda obsolete these days. You might wanna use React or something similar like Vue.js instead. @mixu1308
mixu1308
@mixu1308
Dec 28 2016 22:40
why whats the problem with jquery? do you mean changing the DOM or the JSON request @sk22
Johnny
@GohnJohn
Dec 28 2016 22:40
i need help
building my portfolio page
i need help with adding function to my navbar
im hella stuck
Samuel Kaiser
@sk22
Dec 28 2016 22:41
I mean that you generate the HTML by string concatenation @mixu1308
@GohnJohn you mean... adding the links?
mixu1308
@mixu1308
Dec 28 2016 22:42
oh okay I'll check that out. thanks! @sk22
CamperBot
@camperbot
Dec 28 2016 22:42
mixu1308 sends brownie points to @sk22 :sparkles: :thumbsup: :sparkles:
:warning: The user instance is not valid. Details: username User already exists (value: "sk22"); username is not unique (value: "sk22").
Samuel Kaiser
@sk22
Dec 28 2016 22:42
:)
@GohnJohn Or you mean a dropdown feature?
Gotta go. Bye!
Johnny
@GohnJohn
Dec 28 2016 22:44
dropdown feature
Tyler Moeller
@TylerMoeller
Dec 28 2016 23:02
@GohnJohn There's a template with sample code for a navbar with a dropdown menu at: https://getbootstrap.com/components/#navbar-default, with some different examples at: https://getbootstrap.com/examples/navbar-fixed-top/
That should help you get started on the right path.
@Rallph codepen works great with HTTPS. You can get the user's location from coordinates with the Google Maps API. https://developers.google.com/maps/documentation/javascript/examples/geocoding-reverse
Here's an example of it in use: https://codepen.io/TylerMoeller/pen/ZBBEGq
(Line 70)
Tyler Moeller
@TylerMoeller
Dec 28 2016 23:12
@Makzin Your "C" button is in a <span> element. <span> elements are inline elements and don't have a height/width unless you use float or display css properties to modify them. To resize it, use display: inline-block in your .clear class.
dwquach
@dwquach
Dec 28 2016 23:13
hi all! I'm working on the random quote generator project and was wondering if anyone could me get my API working https://codepen.io/dwquach/pen/XNwoYL
Tyler Moeller
@TylerMoeller
Dec 28 2016 23:16

@dwquach First error is that the first line should have parentheses around document:

$(document).ready(function() {

Second error is that you need an API key for the quote api you have chosen

{"message":"Missing Mashape application key. Go to http:\/\/docs.mashape.com\/api-keys to learn how to get your API application key."}
dwquach
@dwquach
Dec 28 2016 23:17
@TylerMoeller I've included the API key using beforesend:. is that incorrect?
Tyler Moeller
@TylerMoeller
Dec 28 2016 23:19
@dwquach I haven't used that API before, but I think the key needs to go in headers: not beforesend:
dwquach
@dwquach
Dec 28 2016 23:20
hmm okay i'll give it a try and get back to you
thanks @TylerMoeller !
CamperBot
@camperbot
Dec 28 2016 23:21
dwquach sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1214 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Dec 28 2016 23:28
@dwquach Actually, nevermind! Your code works great if you change beforesend to beforeSend (note the capital 'S')
You'll just have to figure out how to parse the JSON, but add console.log(json) to the first line of your success function and you'll see the quote text logged to the console
Rebecca Vest
@idahogurl
Dec 28 2016 23:33
Does anyone have experience using Mobx React
dwquach
@dwquach
Dec 28 2016 23:33
oh wow. that fixed it!! i can't believe i missed such simple mistakes. i've been looking at this code for hours. thanks again @TylerMoeller !
CamperBot
@camperbot
Dec 28 2016 23:33
dwquach sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: dwquach already gave tylermoeller points
Tyler Moeller
@TylerMoeller
Dec 28 2016 23:36
@idahogurl You might want to try in the Mobx React Room: https://gitter.im/mobxjs/mobx
Rebecca Vest
@idahogurl
Dec 28 2016 23:36
Thanks @TylerMoeller
CamperBot
@camperbot
Dec 28 2016 23:36
:star2: 1215 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
idahogurl sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
c0d0er2
@c0d0er2
Dec 28 2016 23:57

Can someone please help me on Increment a Number with JavaScript? Here is my code:

var myVar = 87;

// Only change code below this line

myVar = myVar++ + 1;

Here is the link: https://www.freecodecamp.com/challenges/increment-a-number-with-javascript