These are chat archives for FreeCodeCamp/HelpFrontEnd

23rd
Sep 2017
mpontus
@mpontus
Sep 23 2017 00:00
But first you need to construct an array of promises for each request, which will be resolved after each of them has finished
@gkemp94 I would start by making your getinfo function to return a Promise
piteto
@piteto
Sep 23 2017 00:02
@gkemp94 From what I see, you call firstFunction() when your document is ready, that's when you try to access dataArray, but dataArray isn't populated until your second getJSON is complete processing all the users in your array
George Kemp
@gkemp94
Sep 23 2017 00:04
The promise might be over my head. I was trying to use a callback but I don't think I used it correctly
piteto
@piteto
Sep 23 2017 00:04
callback counters might be easier
George Kemp
@gkemp94
Sep 23 2017 00:05
Is there a good resource to learn how to use promise>
piteto
@piteto
Sep 23 2017 00:05
Add this to the end of your second getJSON: if(dataArray.length === userIds.length) refreshHTML()
mpontus
@mpontus
Sep 23 2017 00:05
I have a mongodb question. From what I've heard it is considered a good pratice to embed user object inside the content attributed to them (such as post.author). Assuming that I follow this pattern, how do I go about renaming the user in the future? Would I have to update every piece of content ever created by this user?
piteto
@piteto
Sep 23 2017 00:05
then you are guaranteed that dataArray has all the data before you call your refreshHTML function
@mpontus I think the people over in the back end room might be able to help out better: https://gitter.im/FreeCodeCamp/HelpBackEnd
mpontus
@mpontus
Sep 23 2017 00:06
@piteto Thank you!
CamperBot
@camperbot
Sep 23 2017 00:06
mpontus sends brownie points to @piteto :sparkles: :thumbsup: :sparkles:
:cookie: 145 | @piteto |http://www.freecodecamp.com/piteto
piteto
@piteto
Sep 23 2017 00:06
People who know mongo do visit here though
but you're guaranteed to find knowledgeable people over there :)
@gkemp94 If this helps explain it better: https://codepen.io/anon/pen/wrzOoY?editors=0011
George Kemp
@gkemp94
Sep 23 2017 00:10
@piteto oh and that's what you were saying earlier!
that makes sense
piteto
@piteto
Sep 23 2017 00:11
To be honest, it makes things a little complicated to parse the data from the API and put it in another object that you have to parse all over again. It would be more efficient to grab it from the API and use it right away
George Kemp
@gkemp94
Sep 23 2017 00:14
@piteto I was doing that earlier, but I'm adding a feature where you can add and subtract users, and I didn't to have to fetch the users each time you added or removed a username
I definitely made it more complicated, but I'm trying to challenge myself
piteto
@piteto
Sep 23 2017 00:14
Okay, yeah, I hadn't considered that feature. Maybe you'd want to look into session storage and keep the data there instead? It would be available to your web page as long as the browser is tab is open.
Definitely good to challenge yourself - I did the bare minimum for that, might kick myself later :)
George Kemp
@gkemp94
Sep 23 2017 00:16
@piteto I've kind of skimmed the past few, so I wanted to spend a lot of time on this one making sure I understand it thoroughly! Sounds like you're well ahead of it! :)
Ismail Hozain
@ismailhozain
Sep 23 2017 00:54
hey could anyone help me deploy something to the web with surge from my computer
i am having issues with it because it is not showing up on the web
but it says it worke
d
but it wont let me clik on the link in my command prompt
aRtoo
@artoodeeto
Sep 23 2017 01:08

hellow fam
i got the solution correct now
but i have a question
my first solution is this. i got the requirements correct except for the other one.
bob instanceof Person should return true. im getting this incorrect.

my first solution:

 /*var first = firstAndLast.split(' ')[0];
    var last = firstAndLast.split(' ')[1];

    return  {
      getFullName: function() {
        var fullName = first + ' ' + last;
        return fullName;
      },

      getFirstName: function() {
        return first;
      },

      getLastName: function() {
        return last;
      },

      setFirstName: function(newFirst) {
         first = newFirst;
      },

      setLastName: function(newLast) {
         last = newLast;
      },

      setFullName: function(newFullname) {
        first = newFullname.split(' ')[0];
        last = newFullname.split(' ')[1];
         //firstAndLast = newFullname;
      }
    };*/

var bob = new Person('Bob Ross');
bob.getFullName();

but on my 2nd solution
this is my 2nd solution i got everything correct. i just used the .this keyword. i dont know why. i just followed the given sample that was initialize

var Person = function(firstAndLast) {

    var fname = firstAndLast.split(' ')[0];
    var lname = firstAndLast.split(' ')[1];

    //Complete the method below and implement the others similarly
    this.getFullName = function() {
      var fullname = fname + ' ' + lname;
      return fullname;
    };

    this.getFirstName = function() {
      return fname;
    };

    this.getLastName = function() {
      return lname; 
    };

    this.setFirstName = function(newFirst) {
      fname = newFirst;
    };

    this.setLastName = function(newLast) {
      lname = newLast;
    };

    this.setFullName = function(newFull) {
      fname = newFull.split(' ')[0];
      lname = newFull.split(' ')[1];
    };

};


var bob = new Person('Bob Ross');
bob.setFullName('bruh haa');
bob.getFullName();
Ismail Hozain
@ismailhozain
Sep 23 2017 01:25
hmm interesting
Bhoomi Khanderia
@bhoomikhanderia
Sep 23 2017 05:53
Hi ! I am trying to implement bootstrap navbar. I want my logo to be center aligned which I am not able to achieve. Can anyone please suggest the solution. Please check my code: https://codepen.io/Bhoomi/pen/QqKRQm
piteto
@piteto
Sep 23 2017 06:00
@Bhoomi-Github It depends on how you want it to look. You might try this suggestion
Rohit
@Rohitvirgin
Sep 23 2017 07:02
Hii
https://codepen.io/3lhagvaasuren/pen/xXEoZV
guys in this code i cant access to body. i just wanna change the background-color: black; or something but it doesnt work
please help me
Rohit
@Rohitvirgin
Sep 23 2017 07:09
Try putting all code in <div> tag and add class with bg color component there
It Might work
Lhagvasuren
@3lhagvaasuren
Sep 23 2017 07:10
what div?
<div class="container-fluid">
<h1 class="header">Travis<span><img class="mainPicture" src="https://ih0.redbubble.net/image.398989678.9673/ap,550x550,12x12,1,transparent,t.u1.png"></span>Scott</h1>




</div>
Rohit
@Rohitvirgin
Sep 23 2017 07:13
In 2nd line, Div tag
Add another class xyz
Set background-color property of xyz to black or whatever colour u want
Kent Saeteurn
@sansae
Sep 23 2017 07:39

hello, can anyone explain to me why "\n" works in one instance, but not the other?

this works:

"using newline in this manner" + "\n" +
"successfully adds a new line to this string"

however, this doesn't...

var name = SomeObjectImWorkingWith.name;
"hi, my name is " + name + "\n" +
"what is yours?"
the 2nd example, \n is literally just concatenated onto the string. why?
Kent Saeteurn
@sansae
Sep 23 2017 08:03
determined the reason; it seems \n doesn't work on returns; now the question is, why? and how to get it to work on returns
Rafael Monroy
@rafaelmonroy
Sep 23 2017 08:42
how can I make a variable add the same value to itself in a while loop without doubling up? for example: size = 2 I want 2+2+2+2, add to each loop, not 2+2= 4 then 4+4=8 then 8+8= 16…. if that makes any sense lol
linkin-park
@linkin-park
Sep 23 2017 08:42
Fabien SHAN
@X140hu4
Sep 23 2017 08:43
@sansae Can you try with \n instead of \n?
\\n
@rafaelmonroy Multiply the value by a loop variable?
linkin-park
@linkin-park
Sep 23 2017 08:47
this is going to take somewhile for me :(
Rafael Monroy
@rafaelmonroy
Sep 23 2017 08:48
@X140hu4 the multoplication is what I am trying to avoid, I just want the addition, but since the vairable updates through each loop it adds new value to itself
Fabien SHAN
@X140hu4
Sep 23 2017 08:55
You would need another variable then
Rafael Monroy
@rafaelmonroy
Sep 23 2017 08:56
@X140hu4 yeah thats what Im trying right now, thanks! hopefully I can get it to work!
CamperBot
@camperbot
Sep 23 2017 08:56
rafaelmonroy sends brownie points to @x140hu4 :sparkles: :thumbsup: :sparkles:
:cookie: 278 | @x140hu4 |http://www.freecodecamp.com/x140hu4
Rafael Monroy
@rafaelmonroy
Sep 23 2017 09:00
@X140hu4 it worked, man hours of my life GONE! lmao feels right :)
Syed Sadiq ali
@syedsadiqali
Sep 23 2017 09:06
brownie
linkin-park
@linkin-park
Sep 23 2017 09:12
how to know what fonts to use ?
can someone help me thanks
Rafael Monroy
@rafaelmonroy
Sep 23 2017 09:13
I was finally able to figure this one out… can someone look at my comments(logic) in my code and tell me if that is accurate? The only thing I really want to know is: if by setting my size2 variable equal to size.. does that always keep it constant? thats how I wrote it out in the comments and it made sense, i just want to double check.. thanks

function chunkArrayInGroups(arr, size) { 

  var holder = [];                    //[], [[0,1]], [[0,1],[2,3]], [[0,1],[2,3], [4,5]], [[0,1],[2,3], [4,5], [6,7]], [[0,1],[2,3], [4,5], [6,7], [8]]
  var i = 0;                          //0, 2, 4, 6, 8, 10
  var size2 = size;                   //2, 2, 2, 2, 2, 2

  while (i<arr.length){               //0<9?yes, 2<9?yes, 4<9?yes, 6<9? yes, 8<9?yes, 10<9? NO! stop loop, return final holder value...

    holder.push(arr.slice(i, size));  //[0,1],[2,3], [4,5], [6,7], [8],

    i = size;                          //2, 4, 6, 8, 10

    size = size2 + size;               //2+2=4, 2+4=6, 2+6=8, 2+8=10, 2+10=12,

  }

  return holder;

}

chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6, 7, 8], 2);
heroiczero
@heroiczero
Sep 23 2017 09:13
@linkin-park that is a design choice are you trying to mimic Facebook design?
Rafael Monroy
@rafaelmonroy
Sep 23 2017 09:14
@X140hu4 is the logic written out in my comments correct? does size2 stay constant through the loops? even tho size is update each loop?
linkin-park
@linkin-park
Sep 23 2017 09:15
yes @heroiczero
heroiczero
@heroiczero
Sep 23 2017 09:16
@linkin-park that site tells you what font they use for each device
@linkin-park
Facebook Font
Windows: Segoe UI (or Tahoma for older versions of Windows)
macOS: San Francisco
iOS: San Francisco
Android: Roboto
linkin-park
@linkin-park
Sep 23 2017 09:18
thanks i was looking at the link
need to do this in 3 hours from now thinking :(
heroiczero
@heroiczero
Sep 23 2017 09:24
@rafaelmonroy i++ missing i think?
linkin-park
@linkin-park
Sep 23 2017 09:24
its hard to find the colors @heroiczero
only way i can find is lookin at the soruce
source*
heroiczero
@heroiczero
Sep 23 2017 09:25
@linkin-park
Facebook Hex/RGB Color
Hex: #3B5998
RGB: rgb(59, 89, 152)
Rafael Monroy
@rafaelmonroy
Sep 23 2017 09:25
@heroiczero i updates to size through each so i++ is not necessary
Fabien SHAN
@X140hu4
Sep 23 2017 09:25
@rafaelmonroy Hmmm on the second iteration the array will have 4 elements
linkin-park
@linkin-park
Sep 23 2017 09:26
meant the button color
Rafael Monroy
@rafaelmonroy
Sep 23 2017 09:26
@X140hu4 no the code is fine, it passed all the test
i mainly want to know if by setting size2 = size, does size2 always stay constant
even though size updates through each loop
heroiczero
@heroiczero
Sep 23 2017 09:27
@rafaelmonroy yes it will be size
Fabien SHAN
@X140hu4
Sep 23 2017 09:27
yes, you do not touch size2
heroiczero
@heroiczero
Sep 23 2017 09:28
@rafaelmonroy because size2 assignment is not in loop
@rafaelmonroy you could also use const to make sure nothing changes it
Fabien SHAN
@X140hu4
Sep 23 2017 09:28
@heroiczero +1
Rafael Monroy
@rafaelmonroy
Sep 23 2017 09:29
@X140hu4 @heroiczero so setting variable equal to argument outside loop, it wont update even though the loop updates value of argument?
heroiczero
@heroiczero
Sep 23 2017 09:29
for a second i was wondering what was wrong with your code lol, but it looked fine. and I was just jumping to conclusion lol :innocent:
Rafael Monroy
@rafaelmonroy
Sep 23 2017 09:30
@heroiczero lol thanks for helping out
CamperBot
@camperbot
Sep 23 2017 09:30
rafaelmonroy sends brownie points to @heroiczero :sparkles: :thumbsup: :sparkles:
:star2: 1763 | @heroiczero |http://www.freecodecamp.com/heroiczero
heroiczero
@heroiczero
Sep 23 2017 09:31
@rafaelmonroy yes basically since you set the var size2 outside the loop. Even if size changes size2 will not
Rafael Monroy
@rafaelmonroy
Sep 23 2017 09:32
YES! lmao thanks man, i knew there was a way to keep the origianl value inside the loop. what is the const you mentioned earlier?
@rafaelmonroy Constants are block-scoped, much like variables defined using the let statement. The value of a constant cannot change through re-assignment, and it can't be redeclared.
Rafael Monroy
@rafaelmonroy
Sep 23 2017 09:34
@heroiczero cool man thanks!
CamperBot
@camperbot
Sep 23 2017 09:34
rafaelmonroy sends brownie points to @heroiczero :sparkles: :thumbsup: :sparkles:
api offline
heroiczero
@heroiczero
Sep 23 2017 09:34
:+1: Glad to help :)
Fabien SHAN
@X140hu4
Sep 23 2017 09:35
@rafaelmonroy Also, you could avoid using a size2 by incrementing i.
Rafael Monroy
@rafaelmonroy
Sep 23 2017 09:37
@X140hu4 i thought I increment i by size in my i=size statement?
Fabien SHAN
@X140hu4
Sep 23 2017 09:41
So if you do not use size = size2 + size, i will always be equal to size.
If you add size to i then you increment i by size: i = i + size (or i += size)
Then you would have to review the variables in the slice method
Rafael Monroy
@rafaelmonroy
Sep 23 2017 09:43
@X140hu4 hmmm guess I missed that one, I kept trying different variations of increments to both size and i but I coulnt hit that G spot lol right now im just glad I was able to find one that worked without someone looking at my code and giving me the answer lol
Fabien SHAN
@X140hu4
Sep 23 2017 09:47
That's good :) Congratulations ;)
Rafael Monroy
@rafaelmonroy
Sep 23 2017 09:48
@X140hu4 thanks!
CamperBot
@camperbot
Sep 23 2017 09:48
rafaelmonroy sends brownie points to @x140hu4 :sparkles: :thumbsup: :sparkles:
api offline
linkin-park
@linkin-park
Sep 23 2017 11:46
its hell working on UI!
@heroiczero hi there
heroiczero
@heroiczero
Sep 23 2017 11:50
@linkin-park :wave:
linkin-park
@linkin-park
Sep 23 2017 11:53
i'm going crazy right now :! can you point where the heck i'm doing wrong
the header is not the same as the facebook
@heroiczero
and somewhere there is css conflict too :(
i have updated the code :! you can refresh sir @heroiczero
linkin-park
@linkin-park
Sep 23 2017 12:00
@heroiczero any thoughts on this ?
Justin25
@Justin25
Sep 23 2017 12:03
@linkin-park Facebook uses a linear gradient for their header
linkin-park @linkin-park googles linear gradient
Justin25
@Justin25
Sep 23 2017 12:04
It's this background-image: linear-gradient(#4e69a2, #3b5998 50%);
krckyboy
@krckyboy
Sep 23 2017 12:05
What's better to use for social icons + hover effect - sprites, SVG or something else? Thank you.
linkin-park
@linkin-park
Sep 23 2017 12:08
if i'm not mistaking the google says gradient are used when 2 or more color need smooth transition
Justin25
@Justin25
Sep 23 2017 12:08
Yes
linkin-park
@linkin-park
Sep 23 2017 12:08
in our case its just #fff
am i missing anything ??
Justin25
@Justin25
Sep 23 2017 12:09
If you look at the header Facebook has, it's a lighter shade of blue towards the top
So it transitions from one shade of blue, #4e69a2, to another, #3b5998.
heroiczero
@heroiczero
Sep 23 2017 12:16
@linkin-park i think what you should focus on the format and the layout of the webpage when it is in different screens (responsive) and how the user interacts with it.
@linkin-park but other than that so far. It is progressing well :+1:
linkin-park
@linkin-park
Sep 23 2017 12:23
@heroiczero for the fact no one will use that snippet other than me :P so thankz for the help @Justin25
CamperBot
@camperbot
Sep 23 2017 12:23
linkin-park sends brownie points to @heroiczero and @justin25 :sparkles: :thumbsup: :sparkles:
:cookie: 308 | @justin25 |http://www.freecodecamp.com/justin25
:star2: 1765 | @heroiczero |http://www.freecodecamp.com/heroiczero
linkin-park
@linkin-park
Sep 23 2017 12:23
@Justin25 how did you find the color codes ?
linkin-park
@linkin-park
Sep 23 2017 12:53
good eyes :) @Justin25
Liam Docherty
@ldocherty1
Sep 23 2017 12:59

Can anyone help me with this? The code below is for smooth scrolling. My different parts on my webpages are called section followed by the numbers 1-5 as I have five sections. Can anyone help me make this function on my site?

function scrollNav() {
  $('.nav a').click(function(){
    //Toggle Class
    $(".active").removeClass("active");
    $(this).closest('li').addClass("active");
    var theClass = $(this).attr("class");
    $('.'+theClass).parent('li').addClass('active');
    //Animate
    $('html, body').stop().animate({
        scrollTop: $( $(this).attr('href') ).offset().top - 160
    }, 400);
    return false;
  });
  $('.scrollTop a').scrollTop();
}
scrollNav();

example of the html for my different sections going from section1-5

<section class="bg-home img-fluid" id="section1">
Tom
@moT01
Sep 23 2017 13:02
got a pen? looks pretty close to something I used for that
the toggle class isnt related to the scrolling?
you have a listener inside a function
Liam Docherty
@ldocherty1
Sep 23 2017 13:04

@moT01 Pen for the example site is https://codepen.io/mattsince87/pen/exByn

or what you talking about pen for my site? I'm trying to get the smooth scrolling on my site

Tom
@moT01
Sep 23 2017 13:04
i think if you maybe just removed the function it might work
a pen for your site
so i can see all code
Liam Docherty
@ldocherty1
Sep 23 2017 13:05
ok give me 5min thanks :)
Tom
@moT01
Sep 23 2017 13:06
and i was asking what the toggle class is for?
or if you have the code on github or something you could link to that, and not have to make a pen
Justin25
@Justin25
Sep 23 2017 13:15
@linkin-park No, just right click and then select "inspect element" on the menu that pops up.
shivam gupta
@shivamg11000
Sep 23 2017 13:17
hey how can I use import in the client side code
I know I can use browserify for require()
Liam Docherty
@ldocherty1
Sep 23 2017 13:21
@moT01 Got it to work thanks though for helping me
CamperBot
@camperbot
Sep 23 2017 13:21
ldocherty1 sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 861 | @mot01 |http://www.freecodecamp.com/mot01
Justin25
@Justin25
Sep 23 2017 13:22

So I'm using react and this code correctly renders

var element;
    element += <p>{this.state.day0.uv}</p>;
    return <div className="forecast-weather">
      {element}
    </div>;

But this doesn't

var element;
    element + <p>{this.state.day0.uv}</p>;
    return <div className="forecast-weather">
      {element}
    </div>;
Why can't I use +=?
Tom
@moT01
Sep 23 2017 13:24
you mean why can't you use +?
Justin25
@Justin25
Sep 23 2017 13:25
Whoops those are backwards
Tom
@moT01
Sep 23 2017 13:26
im wondering if you can't render element when it has no value, ...try giving it some value
var element = "";
Justin25
@Justin25
Sep 23 2017 13:26
Oh I see, The variable has to be a single html element
So I just have to wrap it all in a div
Tom
@moT01
Sep 23 2017 13:27
they are both wrapped in a div no?
Justin25
@Justin25
Sep 23 2017 13:27
I have to wrap them in a div inside the variable element
It can't hold multiple html elements
Tom
@moT01
Sep 23 2017 13:28
give it a try
i think it's the +, something doesn't feel right there
Justin25
@Justin25
Sep 23 2017 13:33
It works fine if I put the <p> elements in a div
linkin-park
@linkin-park
Sep 23 2017 13:54
i have no clue why i use overflow:hidden but it works like charm on using float :)
korzo
@korzo
Sep 23 2017 13:58
@linkin-park It's oldschool clearfix, but doesn't work well on mobile
linkin-park
@linkin-park
Sep 23 2017 14:14
i see :(
what do you guys do for that ? @korzo
korzo
@korzo
Sep 23 2017 14:15
@linkin-park
:after {
  content: "";
  display: table;
  clear: both;
}
on wrapper element containing floats
linkin-park
@linkin-park
Sep 23 2017 14:26
nice :)
Marius Nicolae
@bytao7mao
Sep 23 2017 14:27
somebody here with python experience ?
cand somebody help me debugging this
linkin-park
@linkin-park
Sep 23 2017 14:32
@korzo can you tell me what this snippet actually fix
Marius Nicolae
@bytao7mao
Sep 23 2017 14:32
Screenshot from 2017-09-23 17-14-25.png
linkin-park
@linkin-park
Sep 23 2017 14:32
@korzo /do
korzo
@korzo
Sep 23 2017 14:35
@linkin-park floated elements are not part of the document flow. It's the same as position:absolute.
This snippet will visually put them back to the document flow.
Long story short, wrapper will have with and height of containing floated elements
krckyboy
@krckyboy
Sep 23 2017 14:41
Hey there, guys. What is better for you, personally - mobile first or the wide screen first approach? What works the best for you and why?
korzo
@korzo
Sep 23 2017 14:43
linkin-park
@linkin-park
Sep 23 2017 14:43
my question sir : why not display:block ?
why we have content and clear ?
was hoping something like overflow:hihdden :/
clear to clear floats but why content ?
korzo
@korzo
Sep 23 2017 14:52
@linkin-park pseudo elements need content otherwise they are not displayed
Ken Haduch
@khaduch
Sep 23 2017 14:53
@krckyboy - I like mobile first, because mobile usage is so common and if you have a page that doesn't present well on mobile, the user (viewer) might not get too far using your page. Bootstrap's is built on a 'mobile first' philosophy. I just googled for the term, and this page, while being bootstrap-centric, makes good points about the mobile-first approach.
linkin-park
@linkin-park
Sep 23 2017 14:56
its more like hack i see this snippet everywhere :/
krckyboy
@krckyboy
Sep 23 2017 14:56
Does anyone have any good HTML templates one can recreate for practice? I want to be comfortable with what CSS3 alone can offer before progressing into JS.
korzo
@korzo
Sep 23 2017 15:03
@linkin-park it's not hack. It's shortcut and it saves 1 element
this is hack :)
a { color/*\**/: #fff\9; }
linkin-park
@linkin-park
Sep 23 2017 15:10
nice to know :)
Justin25
@Justin25
Sep 23 2017 15:11
To any one else here who is relatively new to web development I highly recommend this website, css-tricks, helped me fix many css issues and find many neat tricks.
linkin-park
@linkin-park
Sep 23 2017 15:12
did find overflow:hidden from that very site :)
@Justin25
Ken Haduch
@khaduch
Sep 23 2017 15:13
@Justin25 - that's a good one to share - they have very thorough explanations and a lot of good articles on that site. A worthwhile bookmark - thanks!
CamperBot
@camperbot
Sep 23 2017 15:13
khaduch sends brownie points to @justin25 :sparkles: :thumbsup: :sparkles:
:cookie: 309 | @justin25 |http://www.freecodecamp.com/justin25
linkin-park
@linkin-park
Sep 23 2017 15:13
thankz @korzo @Justin25
Justin25
@Justin25
Sep 23 2017 15:13
Haha, pretty much every project I've ever made has code from that site
linkin-park
@linkin-park
Sep 23 2017 15:30
is it a bug
@korzo @Justin25 thankz
CamperBot
@camperbot
Sep 23 2017 15:30
linkin-park sends brownie points to @korzo and @justin25 :sparkles: :thumbsup: :sparkles:
:cookie: 534 | @korzo |http://www.freecodecamp.com/korzo
:cookie: 310 | @justin25 |http://www.freecodecamp.com/justin25
Ronique Ricketts
@RoniqueRicketts
Sep 23 2017 15:55
I am now on mac osx Sierra. Learning Mac and React at the same time. Which editor works best on mac.
Jacob Colborn
@jcolborn-dropdeadgames
Sep 23 2017 16:26
I use VS Code on my Mac
ADIL KARMOUZI
@mradil16
Sep 23 2017 16:29
Is it possible earn 10 dollars a day knowing HTML, CSS, Responsive design, Photoshop for slicing purposes ?
Justin25
@Justin25
Sep 23 2017 16:30
@mradil16 If you can make good looking websites you can make that easily.
If you already can make websites that the only thing you need to do is find people who are willing to pay for a website.
Any reason why 10 a day?
korzo
@korzo
Sep 23 2017 16:35
@Justin25 I think 10$/day means fortune in some parts of world
ADIL KARMOUZI
@mradil16
Sep 23 2017 16:38
yes 300$-350$ / month in Morocco its a good salary
@Justin25 where do I find those potential clients . Upwork declined my request. it said that there is no job offers for me with those skills.
Justin25
@Justin25
Sep 23 2017 16:45
Can you link me to some stuff you've done?
You can check here for some jobs guru
linkin-park
@linkin-park
Sep 23 2017 16:51
are you working on any freelance jobs ?
linkin-park
@linkin-park
Sep 23 2017 17:01
in 10$ you wont get a cup of coffee :/
linkin-park
@linkin-park
Sep 23 2017 17:14
awesome!
ADIL KARMOUZI
@mradil16
Sep 23 2017 17:15
thanks bro
linkin-park
@linkin-park
Sep 23 2017 17:15
wish i can make something like that :(
my question sir like how do you do multiple page at once
ADIL KARMOUZI
@mradil16
Sep 23 2017 17:19
I don't get your question . This is a one page website with multiple sections
linkin-park
@linkin-park
Sep 23 2017 17:23
i see
i really meant that
ADIL KARMOUZI
@mradil16
Sep 23 2017 17:27
@Justin25 demo : https://codepen.io/mradil16/full/zEvgmx/ what do you think justin ?
linkin-park
@linkin-park
Sep 23 2017 17:37
did you use any tools like bootstrap ? @mradil16
LydaTech
@lydatech
Sep 23 2017 17:47
@mradil16 layouts broke for me
Capture.PNG
LydaTech
@lydatech
Sep 23 2017 17:53
@mradil16 background-size: cover; will fix it. Remove the center center no-repeat and add the cover
@mradil16 youre also losing your images in the "Still showing properties ?" section on resize
ect
Ghost
@ghost~55a04b725e0d51bd787af54c
Sep 23 2017 18:20
Hey guys :smile: I was wondering if you guys could leave some feedback on my chrome web app?
linkin-park
@linkin-park
Sep 23 2017 18:27
chrome web app ?
whats that
Ghost
@ghost~55a04b725e0d51bd787af54c
Sep 23 2017 18:27
Just a website with a fancy name (it's called a web app because it's designed to work on mobile devices as well, but it may still have a few bugs)
linkin-park
@linkin-park
Sep 23 2017 18:29
what does it do :)
Ghost
@ghost~55a04b725e0d51bd787af54c
Sep 23 2017 18:30
So it's basically a bookmarking app for your new tab page. You can also click the Simplify button to make the website into a sort of relaxing screensaver, for productivity purposes, or likewise.
Justin25
@Justin25
Sep 23 2017 19:38
@mradil16 That looks great, you could easily make much more than 350$ a month
Sorry for the late reply
ivanabojic
@ivanabojic
Sep 23 2017 20:15

Hi, I need help with Simon Memory game.
How can I prevent or ignore further clicks after a wrong sound is played? At the moment, my code plays more than one example melody in paralel. When wrong note is clicked exmaple melody starts playing. If note is clicked before the end second example melody plays at the same time. Third could be added the same way.

Here is the link:
https://codepen.io/Jo-anna/pen/LzENyX

Strict mode is not implemented yet. Player's notes are not held in an array, but checked against example melody as they are pressed.
Gersho
@Gersho
Sep 23 2017 20:19
@ivanabojic i don't really know what's best practice on this, but i used boolean checks to prevent user input
for exemple, at the start of your function that plays the melody after an error, put melodyPlaying = true
Allister
@AlyxMoon
Sep 23 2017 20:19
@ivanabojic How I would handle it is to use a variable along with a timer to track when you are playing a sound back, and you don't want the user to be able to do anything.
For example, once they click something and you are giving feedback in the form of sound, set a variable givingFeedback or something to true and create a timer at the moment to set it false after some amount of time, after sound would be done.
Then, when you are getting user input, check whether givingFeedback is true or not. If it's true, don't do anything.
Gersho
@Gersho
Sep 23 2017 20:20
and at the stat of your click functions a check if it's true or not, and return right away if it is
(and of course set if to false when you're done)
Allister
@AlyxMoon
Sep 23 2017 20:20
@Gersho Great minds think alike :D
piteto
@piteto
Sep 23 2017 20:20
I don't know if you two are looking at the code, but they are using clickEnabled = true;
they need help with getting that to work, it seems
Allister
@AlyxMoon
Sep 23 2017 20:21
Yeah I didn't go that deep.
Gersho
@Gersho
Sep 23 2017 20:21
@piteto i didn't look to be honest :D
piteto
@piteto
Sep 23 2017 20:22
230 lines of code are hard to go through in a few minutes
Gersho
@Gersho
Sep 23 2017 20:22
oh they already have similar logic but turned the other way around
(for input check i mean)
piteto
@piteto
Sep 23 2017 20:22
@ivanabojic maybe you can help narrow down where you're trying to enable/disable clicks - what function/lines of code
Gersho
@Gersho
Sep 23 2017 20:23
i didn't even know about.off().on(
Allister
@AlyxMoon
Sep 23 2017 20:24
Ah okay, so in the part where it's commented // enable further clicks
The code itself runs really fast, you are setting that variable back to true in an inconsequential amount of time after you've set it false. The sound, in comparison, is going to take a second or so. You just want a timer to delay the setting of clickEnabled to true.
Gersho
@Gersho
Sep 23 2017 20:26
can we set up a promise in such a case ? (is there an event when an audio is done playing ?)
Geekomatic
@Geekomatic
Sep 23 2017 20:27
@ivanabojic Try disabling the click function after each click, and reenabling whenever applicable.
Allister
@AlyxMoon
Sep 23 2017 20:27
@Justin25 I'm not sure exactly what you mean by 'render'. Are you talking about switching the class set on an element? And are you using jQuery?
Gersho
@Gersho
Sep 23 2017 20:28
@Justin25 with a click event handler in the class ? and use a prop or state (that's react i think Allister)
Justin25
@Justin25
Sep 23 2017 20:29
Does anyone know of a way to change between render two different classes in react on a button click. For example, I want to render class 1, then when I click a button, it will render class 2 instead.
Will White
@willnwhite
Sep 23 2017 20:29
Will using dangerouslySetInnerHTML on the Markdown Previewer project "inadvertently expose your users to a cross-site scripting (XSS) attack"?
@Justin25 Sure.
@Justin25 Make a class whose render function chooses between class 1 or class 2.
Allister
@AlyxMoon
Sep 23 2017 20:32
@Justin25 Okay, so like showing two different components. The way I would think to tackle it:
Use a parent and child class/component. Have one component that can render both class 1 and class 2. Give it an onClick handler that toggles a variable between some value, like true and false or however you want to handle it. In the render method, check that variable and display either class 1 or class 2 as appropriate.
Gersho
@Gersho
Sep 23 2017 20:33
@Justin25 there's a good lesson about it on CodeAcademy (this.state in React part 1) but since we can't access it right away i'll paste their exemple code
import React from 'react';
import ReactDOM from 'react-dom'

const green = '#39D1B4';
const yellow = '#FFD712';

class Toggle extends React.Component {
  constructor(props){
    super(props);
    this.state={ color: green };
        this.changeColor = this.changeColor.bind(this);
  }

  changeColor(){
        const newColor = this.state.color == green ? yellow : green;
    this.setState({ color: newColor });
  }

  render() {
    return (
      <div style={{background: this.state.color}}>
        <h1>
          Change my color
        </h1>
         <button onClick={this.changeColor}>
          Change color
        </button>
      </div>
    );
  }
}



ReactDOM.render(<Toggle/>,document.getElementById("app"));
ivanabojic
@ivanabojic
Sep 23 2017 20:35
Thank you @Geekomatic, I was thinking alogn those lines. I do not understand timing well as @AlyxMoon mentioned. I might even enable click too fast.
CamperBot
@camperbot
Sep 23 2017 20:35
ivanabojic sends brownie points to @geekomatic and @alyxmoon :sparkles: :thumbsup: :sparkles:
:cookie: 371 | @geekomatic |http://www.freecodecamp.com/geekomatic
:cookie: 414 | @alyxmoon |http://www.freecodecamp.com/alyxmoon
Geekomatic
@Geekomatic
Sep 23 2017 21:14
Anyone mind checking for bugs on my simon game ? https://codepen.io/Geekomatic/pen/YrwmvW?editors=0010
Gersho
@Gersho
Sep 23 2017 21:19
trying to break stuff ? i'm in
Geekomatic
@Geekomatic
Sep 23 2017 21:19
Code is dirty, try at your own peril.
Gersho
@Gersho
Sep 23 2017 21:21
when we switch to strict mode, game doesn't reset, so you could possibly play in easy until lvl 19 and switch to strict to get hard mode victory (i don't know how an actual simon responds in this case)
Geekomatic
@Geekomatic
Sep 23 2017 21:22
Yeah same, I just rolled with it
Gersho
@Gersho
Sep 23 2017 21:22
the stuff that usually breaks easily seems to work fine here (spamming button mostly)
Pete Givens
@petegivens
Sep 23 2017 21:23
Anybody here with experience using Material-UI ?
Jan Shah
@JanShah
Sep 23 2017 23:13
@petegivens yes, what do you need?
Ismail Hozain
@ismailhozain
Sep 23 2017 23:15
can anyone help me with deploying my website from vim using surge cause im having issues
?
Tom
@moT01
Sep 23 2017 23:15
@Geekomatic seems to all be working, ...well done
Geekomatic
@Geekomatic
Sep 23 2017 23:20
@moT01 Ty
CamperBot
@camperbot
Sep 23 2017 23:20
geekomatic sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 862 | @mot01 |http://www.freecodecamp.com/mot01
Tom
@moT01
Sep 23 2017 23:22
could use a little more style, but doesn't need or require it
like maybe a background and a border on that start button
Justin25
@Justin25
Sep 23 2017 23:33
@Gersho This doesn't work in my situation because I want to switch between rendering two separate classes, not just change something in a singular class