These are chat archives for FreeCodeCamp/HelpFrontEnd

4th
Sep 2017
LydaTech
@lydatech
Sep 04 2017 00:22 UTC
Little or no bootcamps are worth the money as far as ive seen
Mosammat Muna
@MosammatMuna
Sep 04 2017 00:43 UTC
hello everyone
iso
@iso1048
Sep 04 2017 00:53 UTC
@MosammatMuna hi
piteto
@piteto
Sep 04 2017 01:07 UTC
@hifede
<div class="container">
  <div class="row"></div>
</div>
rows have to be in containers
you did it for some of your sections, but others you did not - and those are giving you a horizontal scroll bar
just1witness
@just1witness
Sep 04 2017 01:25 UTC
Am I missing something? How are we supposed to use the twitch api workaround and fullfill all the user stories if we can only call user, channel and stream?
iso
@iso1048
Sep 04 2017 01:27 UTC
@just1witness use stream rout if they are online and channel route if they are offline. that is what i did anyway. what user story are you referring to?
just1witness
@just1witness
Sep 04 2017 01:28 UTC
@gothamknight How did you get additional details if they are streaming? This is what I have so far
https://codepen.io/Just1witness/pen/KvXdRj?editors=1111
iso
@iso1048
Sep 04 2017 01:29 UTC
@just1witness if they are streaming, the json you get back using the streams route contains the user image and what game they are streaming. console.log that json
just1witness
@just1witness
Sep 04 2017 01:30 UTC
I did, I'm not finding it
I tried preview and one other, I forget now
Maybe I'm trying to call it wrong, I'm really bad at using apis still
iso
@iso1048
Sep 04 2017 01:31 UTC
@just1witness try using the browser devtools console. preferably chrome - everyone says it is the best
well you have the json on the codepen console...
just1witness
@just1witness
Sep 04 2017 01:33 UTC
browser dev tools console... no clue what that even is.
I've focused too much on algo's! haha!
Johnny
@jtan3
Sep 04 2017 01:36 UTC
@just1witness you console.log(data) do you see the api's data ?
just1witness
@just1witness
Sep 04 2017 01:37 UTC
yes
Johnny
@jtan3
Sep 04 2017 01:38 UTC
@just1witness is there channels in that data? When you console.log(data.channel) you get undefined
@just1witness Ctrl + Shift + J for windows Cmd + Opt + J for mac to go your browser's console.
just1witness
@just1witness
Sep 04 2017 01:42 UTC
Sorry, my pc is trying to die
@jtan3 Yes, I see channel, it shows "object {}"
for the streaming user
Johnny
@jtan3
Sep 04 2017 01:45 UTC
@just1witness you have data.channels instead of channel
@just1witness in your html(data.channels)
just1witness
@just1witness
Sep 04 2017 01:46 UTC
ok, I just changed it, but it still isn't adding anything
Johnny
@jtan3
Sep 04 2017 01:46 UTC
@just1witness you need to add something else too. What do you want out of the object channel?
just1witness
@just1witness
Sep 04 2017 01:47 UTC
ok. It's hard to say, all I can see is object{}, I don't know what I can take out of there. Is there a way to see it?
iso
@iso1048
Sep 04 2017 01:49 UTC
@just1witness sorry had to step away for a bit. Is there an arrow next object{}?
just1witness
@just1witness
Sep 04 2017 01:49 UTC
@gothamknight no worries :) No arrow
just Object {}
Johnny
@jtan3
Sep 04 2017 01:50 UTC
@just1witness you can download a json viewer chrome extension to make it easier to look at
just1witness
@just1witness
Sep 04 2017 01:52 UTC
aaaa what?
eww, I would have to use chrome
I don't like chrome, haha
Johnny
@jtan3
Sep 04 2017 01:53 UTC
@just1witness or whatever your using if there's an add on for mac
just1witness
@just1witness
Sep 04 2017 01:53 UTC
I'm looking now, I use FF
ok, I have a JSON viewer, what do I do with it?
Johnny
@jtan3
Sep 04 2017 01:56 UTC
@just1witness https://wind-bow.gomix.me/twitch-api/streams/OgamingSC2 click on the link and look at the data
just1witness
@just1witness
Sep 04 2017 01:56 UTC
cooooool
Haha, well, that's pretty awesome, I think I will play with this awhile.
@jtan3 ty
CamperBot
@camperbot
Sep 04 2017 01:59 UTC
just1witness sends brownie points to @jtan3 :sparkles: :thumbsup: :sparkles:
:cookie: 459 | @jtan3 |http://www.freecodecamp.com/jtan3
just1witness
@just1witness
Sep 04 2017 02:00 UTC
@gothamknight ty
CamperBot
@camperbot
Sep 04 2017 02:00 UTC
just1witness sends brownie points to @gothamknight :sparkles: :thumbsup: :sparkles:
:cookie: 418 | @gothamknight |http://www.freecodecamp.com/gothamknight
Johnny
@jtan3
Sep 04 2017 02:00 UTC
@just1witness check you browser's console. It says to put jquery before the bootstraps
@just1witness welcome. Hopefully someone else can help you. I need to go.
just1witness
@just1witness
Sep 04 2017 02:05 UTC
Thank you again, you definitely helped
Ayush Bahuguna
@relentless-coder
Sep 04 2017 04:51 UTC
why they gotta be two different ways to access props in function component and class component? Is it because function component only works with props?
Daniel Romero
@Ranacode
Sep 04 2017 08:18 UTC
I'm working with Node.js and I want to secure one route but I don't need a registration step. Just a field with a password to join that route. What's the better way to do this?
Marat
@Marat89bluolyu
Sep 04 2017 09:11 UTC

Hi all, i have a question about scopes in functions..I can't understand it.

For example in book Eloquent Javascript I'm doing the task:
Need make sum function with range - sum(range(1,10))

My actions:

Creating range function:

function range(a,b) {
    var arr = [];
    for (var i = a; i<=b; i++) {
        arr.push(i);
    }
    return arr;
}

Checking sum function on existence arr - and geting undefined in result

function sum(arr) {
      console.log(arr);
//undefined
}

BUT!
if we make loop - we getting our `arr

function sum(arr) {
      for (var i =0; i < arr.length; i++) {
      console.log(arr[i]);
//arr.elements
       }
}

I dont understand this logic.
1)Why we can't see our array without loop in this example?
2) How to transfer data from one function to another function?

I stacked on closures near one year, and dont know how to understand it.
Thanks a lot.

Markus Kiili
@Masd925
Sep 04 2017 09:23 UTC
@Marat89bluolyu The second code logs the passed array just fine.
Return value of the function call is undefined because you have no return statement on the function code. Logs you can see on the browser developer tools console.
Marat
@Marat89bluolyu
Sep 04 2017 10:00 UTC
@Masd925 thanks, with return its ok
CamperBot
@camperbot
Sep 04 2017 10:00 UTC
marat89bluolyu sends brownie points to @masd925 :sparkles: :thumbsup: :sparkles:
:star2: 4471 | @masd925 |http://www.freecodecamp.com/masd925
Amit Patel
@AmitP88
Sep 04 2017 10:00 UTC
hey guys, I'm creating a 3 match puzzle game that will also have elements of an rpg dungeon crawler. However, I don't have much experience using html5 canvas. Would it be bad if I used tutorials online to create the 3 match puzzle game part? This is an app that I plan to launch on Google Play Store once it's fully completed
Markus Kiili
@Masd925
Sep 04 2017 10:02 UTC
@AmitP88 Use any resources you need.
Amit Patel
@AmitP88
Sep 04 2017 10:02 UTC
@Masd925 oh ok, thanks
CamperBot
@camperbot
Sep 04 2017 10:02 UTC
amitp88 sends brownie points to @masd925 :sparkles: :thumbsup: :sparkles:
:star2: 4472 | @masd925 |http://www.freecodecamp.com/masd925
iso
@iso1048
Sep 04 2017 10:41 UTC
test.gif
could someone please help with the above issue. it is only occurring in js
amare16
@amare16
Sep 04 2017 12:14 UTC
can anyone help me please?
How to shuffle words in the sentence by using javascript(jquery) and css? the words in the input tag
dinesh
@1532j0004kg
Sep 04 2017 12:17 UTC
math.random()
try this to shuffle...
Markus Kiili
@Masd925
Sep 04 2017 12:21 UTC
@amare16 You can generate an uniform shuffle, by inserting the new element into the result array and then switching it with a random element in that array.
So loop the original array and insert each element into the result array as descibed.
amare16
@amare16
Sep 04 2017 12:31 UTC
@1532j0004kg @Masd925 ... I will try it what both of you suggested... thanks
CamperBot
@camperbot
Sep 04 2017 12:31 UTC
amare16 sends brownie points to @1532j0004kg and @masd925 :sparkles: :thumbsup: :sparkles:
:cookie: 258 | @1532j0004kg |http://www.freecodecamp.com/1532j0004kg
:star2: 4475 | @masd925 |http://www.freecodecamp.com/masd925
Ahmed raza
@Raza403
Sep 04 2017 15:02 UTC

can anyone tell me what I am doing wrong here 'function whatIsInAName(collection, source) {
// What's in a name?
// Only change code below this line
var arr = [];
for (var i=0;i<collection.length;i++)
{
if(Object.keys(collection[i]) == Object.keys(source))
{
arr.push(collection[i]);
}

}
// Only change code above this line
return arr;
}

whatIsInAName([{ "a": 1 }, { "a": 1 }, { "a": 1, "b": 2 }], { "a": 1 });'

It is returning me empty array while it shouldn't
Markus Kiili
@Masd925
Sep 04 2017 15:03 UTC
@Raza403 You need a second nested loop or iteration over source's keys.
You should keep the looped object if the property values of the object and source match for all the source keys. So you need some loop logic too.
Ahmed raza
@Raza403
Sep 04 2017 15:05 UTC
Ok let me do it, but in this example source has only one key so it shouldn,t a problem
Markus Kiili
@Masd925
Sep 04 2017 15:05 UTC
@Raza403 The number of keys is not given and some tests have more than one key.
Ahmed raza
@Raza403
Sep 04 2017 15:06 UTC
@Masd925 let me do it
@Masd925 No change found

function whatIsInAName(collection, source) {
// What's in a name?
// Only change code below this line
var arr = [];
for (var i=0;i<collection.length;i++)
{
for (var j=0;j<source.length;j++)
{
if(Object.keys(collection[i]) == Object.keys(source[j]))
{
arr.push(collection[i]);
}
}
}
// Only change code above this line
return arr;
}

whatIsInAName([{ "a": 1 }, { "a": 1 }, { "a": 1, "b": 2 }], { "a": 1 });

Markus Kiili
@Masd925
Sep 04 2017 15:08 UTC
@Raza403 Second loop needs to be over source's keys. Plain objects don't have .length property.
source is an object, not an array.
Ahmed raza
@Raza403
Sep 04 2017 15:14 UTC
@Masd925 solved much of the problem, now only problem is it is returning [{ "a": 1 }, { "a": 1 }] instead of [{ "a": 1 }, { "a": 1 }, { "a": 1, "b": 2 }]
last one matches with first key but not second
Do i should have another loop?
Markus Kiili
@Masd925
Sep 04 2017 15:15 UTC
@Raza403 That is why you need the loop logic of the nested loop.
Ahmed raza
@Raza403
Sep 04 2017 15:18 UTC
@Masd925 I think I am too tired to do it tonight
Markus Kiili
@Masd925
Sep 04 2017 15:19 UTC
@Raza403 Tomorrow then. Good night :cloud: :cloud:
Ahmed raza
@Raza403
Sep 04 2017 15:20 UTC
@Masd925 It's 12th hour of coding today, ya I,ll solve it tomorrow, Thanks markus3
CamperBot
@camperbot
Sep 04 2017 15:20 UTC
raza403 sends brownie points to @masd925 :sparkles: :thumbsup: :sparkles:
:star2: 4476 | @masd925 |http://www.freecodecamp.com/masd925
just1witness
@just1witness
Sep 04 2017 16:16 UTC
Finished a twitch tv app, feedback is appreciated! :smile:
https://codepen.io/Just1witness/pen/KvXdRj
korzo
@korzo
Sep 04 2017 16:21 UTC
@just1witness It probably make no difference, but you should include jQuery before bootstrap.js
just1witness
@just1witness
Sep 04 2017 16:21 UTC
Ah, yes. I was going to do that last night, but I was in zombie mode and forgot, thank you
korzo
@korzo
Sep 04 2017 16:22 UTC
@just1witness Also you included both 3.3.7 and 4 versions of css and js
just1witness
@just1witness
Sep 04 2017 16:22 UTC
Haha, I know I go all add happy when I start a pen, is that making my life hard? lol
korzo
@korzo
Sep 04 2017 16:31 UTC
@just1witness I don't think so.
Hover color should be little bit lighter. It's hard to read on dark background.
In mobile view , avatars are sometimes under text.
Otherwise, it's good :+1:
just1witness
@just1witness
Sep 04 2017 16:31 UTC
@korzo Thank you very much for looking at it! I'll take a look at the hover color.
CamperBot
@camperbot
Sep 04 2017 16:31 UTC
just1witness sends brownie points to @korzo :sparkles: :thumbsup: :sparkles:
:cookie: 447 | @korzo |http://www.freecodecamp.com/korzo
korzo
@korzo
Sep 04 2017 16:32 UTC
image.png
just1witness
@just1witness
Sep 04 2017 16:32 UTC
I saw that, it didn't bother me, haha
You should have seen what it looked like on mobile on my first try, it was really messed up
Jorge
@flawedLogic506
Sep 04 2017 16:46 UTC
hows it going fellow campers
seems awfully quiet in here
Christopher McCormack
@cmccormack
Sep 04 2017 16:48 UTC
Holiday in US, guess many don't feel like working today :)
Jorge
@flawedLogic506
Sep 04 2017 16:50 UTC
is it? didn't know that ..
BrianWilliams28
@BrianWilliams28
Sep 04 2017 17:20 UTC
how do you reference an argument function inside the function without knowing what the argument function is going to be?
function dropElements(arr, func) {
  // Drop them elements.
  return arr;
}

dropElements([1, 2, 3], function(n) {return n < 3; }); // this changes
like i need to basically test arr against the 2nd argument which is a function, but that function can change each time
Christopher McCormack
@cmccormack
Sep 04 2017 17:35 UTC
@BrianWilliams28 the callback function should always take a certain type of data, else you need to do some checks in your dropElements function so you pass the right type of data in. To invoke the function, you can just do something like func(arr[1]) inside dropElements or use a loop or whatever you're trying to do
BrianWilliams28
@BrianWilliams28
Sep 04 2017 17:36 UTC
@cmccormack thanks
CamperBot
@camperbot
Sep 04 2017 17:36 UTC
brianwilliams28 sends brownie points to @cmccormack :sparkles: :thumbsup: :sparkles:
:star2: 1183 | @cmccormack |http://www.freecodecamp.com/cmccormack
Christopher McCormack
@cmccormack
Sep 04 2017 17:36 UTC
np
Janelle deMent
@janelledement
Sep 04 2017 19:43 UTC
Hey everyone, I'm starting the twitch project now, but I just read that since twitch requires an api key, that it wasn't secure to use on codepen. Is it really better to use the hardcoded array provided here: https://gist.github.com/QuincyLarson/2ff6892f948d0b7118a99264fd9c1ce8#file-twitch-sample-api-responses-in-array-form ?
Elizabeth Paul
@Kowalatam
Sep 04 2017 19:43 UTC
my reset button doesn't work.. u will get it after u click start https://codepen.io/Kowalatam/pen/LjqJmW
@janelledement yeah, u could do that.. but there was another api they gave .. hold on.. let me find it
Janelle deMent
@janelledement
Sep 04 2017 19:48 UTC
@Kowalatam Thanks! I'll check it out
CamperBot
@camperbot
Sep 04 2017 19:48 UTC
janelledement sends brownie points to @kowalatam :sparkles: :thumbsup: :sparkles:
:cookie: 312 | @kowalatam |http://www.freecodecamp.com/kowalatam
Janelle deMent
@janelledement
Sep 04 2017 19:49 UTC
@Kowalatam I'm getting a 404 not found though
Elizabeth Paul
@Kowalatam
Sep 04 2017 19:49 UTC
yeah..
Elizabeth Paul
@Kowalatam
Sep 04 2017 19:55 UTC
@janelledement u need to provide channel names eg freecodecamp
u can use the list of names provided
but thats the api
just1witness
@just1witness
Sep 04 2017 20:11 UTC
@janelledement I just finished that project. I used the link @Kowalatam provided. It works without needed to get an API key
Eric Hasegawa
@EricHasegawa
Sep 04 2017 20:49 UTC
Can anyone help me with the Twitch API project? I'm all finished, but I'm trying to toggle the whole div containing the links when displaying online or offline - not just the text within the div. I'm having trouble with it and am not sure how to figure it out, here's my code: https://codepen.io/erichasegawa/pen/dzadGm
Sabrina Ferguson
@itsacoyote
Sep 04 2017 20:50 UTC
@EricHasegawa By having trouble you mean having an issue showing either the online or offline with those two buttons?
Eric Hasegawa
@EricHasegawa
Sep 04 2017 20:51 UTC
@itsacoyote No I figured that out, I may have solved my actual problem one second
@itsacoyote Nevermind, but I mean that I want it so when I click the display buttons, the whole div containing both the background colour and the text is toggled, not just the text
Sabrina Ferguson
@itsacoyote
Sep 04 2017 20:55 UTC
@EricHasegawa I see you're toggling based on the .online/.offline classname. I'd say if you want to toggle on that, move the classname up to the top level div container to toggle visibility of the entire container, not just on the li.
Eric Hasegawa
@EricHasegawa
Sep 04 2017 20:58 UTC
@itsacoyote Yeah I just tried that, still not working and I'm not sure why https://codepen.io/erichasegawa/pen/dzadGm
Sabrina Ferguson
@itsacoyote
Sep 04 2017 21:01 UTC
@EricHasegawa the way you're referencing the classname as you're doing in the button click event, $('div[class="online"]') is incorrect. Better to do it with $('div.online');
Elizabeth Paul
@Kowalatam
Sep 04 2017 21:02 UTC
just what i wanted to point out...
or just $(".offline").toggle()
Eric Hasegawa
@EricHasegawa
Sep 04 2017 21:06 UTC
@itsacoyote @Kowalatam Yeah I had it that way before, I'm just fiddling with it to try to toggle the whole containing div, not just the text
Elizabeth Paul
@Kowalatam
Sep 04 2017 21:09 UTC
@EricHasegawa what do you mean by toggle the whole div..
i'm unsure what u are trying to do ..
Eric Hasegawa
@EricHasegawa
Sep 04 2017 21:10 UTC
@Kowalatam Toggle the div containing the background colour on and off, because I can toggle the text on and off, but not the background of the text
Sabrina Ferguson
@itsacoyote
Sep 04 2017 21:12 UTC
@EricHasegawa $('.online') instead of $('div[class="online"]')
Eric Hasegawa
@EricHasegawa
Sep 04 2017 21:14 UTC
@itsacoyote I fixed that, but now the results from clicking the buttons are all messed up and I don't know why
Sabrina Ferguson
@itsacoyote
Sep 04 2017 21:16 UTC
@EricHasegawa ah, if you mean in terms of showing the proper listing based on the wording of the button you clicked, just switch around $('.online') and $('offline') in the two click events
@EricHasegawa oh, wait, and you'll also want to toggle the opposite as well, to ensure that clicking either button or the same button twice does the proper visual changes.
@EricHasegawa at that point, I'd prefer to use the toggleClass or addClass/removeClass and use a classname like .hide to toggle the view. Using the toggling method at this point is a little too basic for what you want to do.
Eric Hasegawa
@EricHasegawa
Sep 04 2017 21:19 UTC
@itsacoyote Okay thanks I'll keep trying, what do you mean by toggling the opposite as well?
CamperBot
@camperbot
Sep 04 2017 21:19 UTC
erichasegawa sends brownie points to @itsacoyote :sparkles: :thumbsup: :sparkles:
:cookie: 407 | @itsacoyote |http://www.freecodecamp.com/itsacoyote
Sabrina Ferguson
@itsacoyote
Sep 04 2017 21:20 UTC
@EricHasegawa Here's a quick example of what I mean: https://codepen.io/itsacoyote/pen/VzRoyK?editors=1010
Liam Docherty
@ldocherty1
Sep 04 2017 21:23 UTC
Hi, what part of the CSS within the JSFIDDLE controls the bounce height of the font awesome icon? https://jsfiddle.net/bg9kxuvz/
Eric Hasegawa
@EricHasegawa
Sep 04 2017 21:23 UTC
@itsacoyote Oh wow thank you so much! That's really helpful
CamperBot
@camperbot
Sep 04 2017 21:23 UTC
erichasegawa sends brownie points to @itsacoyote :sparkles: :thumbsup: :sparkles:
:warning: erichasegawa already gave itsacoyote points
Eric Hasegawa
@EricHasegawa
Sep 04 2017 21:23 UTC
I get what you meant now
Sabrina Ferguson
@itsacoyote
Sep 04 2017 21:28 UTC
@ldocherty1 looks like translate3d in the animation
@ldocherty1 the animation timing function using the cubic bezier is how it moves over time. You can see how the movement goes with something like this website: http://cubic-bezier.com/#0,1.05,.35,1
The transform is how it's going to "move", this one uses the translate3d, so the movement on the x,y,z axis, respectively.
Liam Docherty
@ldocherty1
Sep 04 2017 21:34 UTC
@itsacoyote Thanks, I will look into this.
CamperBot
@camperbot
Sep 04 2017 21:34 UTC
ldocherty1 sends brownie points to @itsacoyote :sparkles: :thumbsup: :sparkles:
:cookie: 408 | @itsacoyote |http://www.freecodecamp.com/itsacoyote
Jorge
@flawedLogic506
Sep 04 2017 22:16 UTC
hey guys, can someone help me out with a cors issue?
maybe not here
whats up
Jorge
@flawedLogic506
Sep 04 2017 22:23 UTC
im trying the backend right now
Janelle deMent
@janelledement
Sep 04 2017 22:26 UTC
@Kowalatam @just1witness Thanks!
CamperBot
@camperbot
Sep 04 2017 22:26 UTC
janelledement sends brownie points to @kowalatam and @just1witness :sparkles: :thumbsup: :sparkles:
:cookie: 313 | @kowalatam |http://www.freecodecamp.com/kowalatam
api offline
just1witness
@just1witness
Sep 04 2017 22:30 UTC
@OrangeKulture Sorry, I'm not that far yet
Pavel
@teiwik
Sep 04 2017 22:58 UTC
hello guys, can someone recommend me a good curse on Udemy for frontend ?
Jestruction
@Jestruction
Sep 04 2017 22:59 UTC
Hey guys just getting started with html/css/js and looking for a beginner friendly IDE or any other way in general to just be able to edit & live preview my html/css? Tried atom and it kept randomly crashing, brackets preview was problematic also and couldn't figure why after a long search I gave up on both, currently working with visual code studio but it's html preview is lacking too, any suggestions appreciated
Elizabeth Paul
@Kowalatam
Sep 04 2017 23:32 UTC
@teiwik colt's course is nice...
but he covers front and back..
@Jestruction i use sublime.. dunno if it's what u looking for ...
Pavel
@teiwik
Sep 04 2017 23:33 UTC
@Kowalatam I thought about it, but i'm not so much friendly with backend :/
Elizabeth Paul
@Kowalatam
Sep 04 2017 23:34 UTC
@teiwik then u could just use it for the front end :smile:
or google up some reviews lol
on others..
Pavel
@teiwik
Sep 04 2017 23:36 UTC
@Kowalatam Have you completed this lesson? Or it is the opinion of others ?
Elizabeth Paul
@Kowalatam
Sep 04 2017 23:38 UTC
@teiwik i have used it.. stopped at almost the end of the front end ...
but it was from the opinion of others from the forum i got into it,.. and i liked it..
there was another guy they mentioned.. don't remember the name...
but i just got colt's
Pavel
@teiwik
Sep 04 2017 23:42 UTC
@Kowalatam Thank you for your opinion, maybe i'm going for this lesson.
CamperBot
@camperbot
Sep 04 2017 23:42 UTC
teiwik sends brownie points to @kowalatam :sparkles: :thumbsup: :sparkles:
:cookie: 314 | @kowalatam |http://www.freecodecamp.com/kowalatam
Elizabeth Paul
@Kowalatam
Sep 04 2017 23:43 UTC
would be nice if colt paid me for this :)
Manuel Reyes
@Androbat
Sep 04 2017 23:54 UTC
Hi guys. I'm looking for ways to practice js. I have to practice. What do you guys recommend me for practicing js?
I'm full of theory and don't know how to apply them.
Some tip? I will thank from my heart. hahaa