These are chat archives for FreeCodeCamp/HelpFrontEnd

22nd
Nov 2017
Chris
@bestintown23
Nov 22 2017 00:18
why is my photo not showing in the middle of the page? https://codepen.io/bestintown23/pen/jazKQR
Cameron Pick
@Fullmight
Nov 22 2017 00:46
@bestintown23 do you mean why is it offset downwards of your contact section slightly?
it appears to be horizontally centered to me, and roughly in the center of the page just eyeballing it
@chrisandsuch It's a bit personal preference/monitor settings, but I really don'
oops hit enter a little early there--
Cameron Pick
@Fullmight
Nov 22 2017 00:52

--really don't like pure white backgrounds, reducing the brightness/white level by 5-10% to a very slightly off-white would make it glare a lot less. Maybe even less than 5%.

You might also want to crop your profile picture to 1:1 ratio so that you can get a nice round border, add in a slightly darker than background color border with a small width to not make the picture edge seem so sharp.

Then possibly put your information sections in cards/boxes with a different background color to make them stand out and not just seem like they're spaced down the page so much.

Just my 2 cents.

Mercy Manrique
@mers89
Nov 22 2017 00:54
@Fullmight I tried doing a .btn with the same properties as btn-medium
it didn't help
Cameron Pick
@Fullmight
Nov 22 2017 00:57
@mers89 try adding width: 50px; height: 50px; to your btn-medium class to see what I mean. I actually forked it to mess around a bit with getting the width to remain constant here: https://codepen.io/fullmight/full/MOVXaZ although this fork is using 5% instead of 50px.
Mercy Manrique
@mers89
Nov 22 2017 00:57
@sjames1958gm I tried adding font to the CSS class property, inline HTML font, body font. But same outcome
Cameron Pick
@Fullmight
Nov 22 2017 00:57
do you still see similar size changing in the fork?
Mercy Manrique
@mers89
Nov 22 2017 00:59
@Fullmight from my cell phone.
@Fullmight I meant from my cell phone it works. I'll try it from my laptop like in 30min. Thanks guys
CamperBot
@camperbot
Nov 22 2017 01:00
mers89 sends brownie points to @fullmight :sparkles: :thumbsup: :sparkles:
:cookie: 101 | @fullmight |http://www.freecodecamp.org/fullmight
Cameron Pick
@Fullmight
Nov 22 2017 01:01
Ahh cool, glad to hear it. ^_^
Mercy Manrique
@mers89
Nov 22 2017 01:05
It's my last project for my certification
Stephen James
@sjames1958gm
Nov 22 2017 01:06
@mers89 I added this to btn-medium font-family: Courier New, monospace;
5millerk
@5millerk
Nov 22 2017 01:35
hey guys, I'm working on my weather app. I'm having a bit of an issue with the "click to change units" part of it (switch from c to f and back). I can get it to switch from C to F, but then when i click again it doesn't switch back. Any ideas what I'm missing? https://codepen.io/5millerk/pen/LjdWLN?editors=1011
ignore the fact that it's ugly for the moment haha
Mercy Manrique
@mers89
Nov 22 2017 01:44
@Fullmight thanks, so much!!!! it works.
CamperBot
@camperbot
Nov 22 2017 01:44
mers89 sends brownie points to @fullmight :sparkles: :thumbsup: :sparkles:
api offline
Mercy Manrique
@mers89
Nov 22 2017 01:49
I just saw the changes you made. I cant believe this whole time it was the height, width 5%. Had been stuck on this for weeks
Christopher Brown
@ChrisBrownie55
Nov 22 2017 01:51
@5millerk
$('#units').on('click',... no longer is being called. I don't know why but it's because when you run $('#units') it no longer returns any elements.
side note: isCel = !isCel should easily replace if (isCel) isCel = false else isCel = true
5millerk
@5millerk
Nov 22 2017 01:52
@ChrisBrownie55 woah, I never considered using the bang operator to flip true/false lol. makes sense
@ChrisBrownie55 do you think i need to update my tempCel or tempFah variables? I don't really understand why it wouldn't be returning an element?
Gustavo Santana
@santanaG
Nov 22 2017 01:56
@kbaig SO I tested, it turns out that load wont work because on React, I can only access the element after its been loaded to the DOM
Christopher Brown
@ChrisBrownie55
Nov 22 2017 01:57
Oh yeah, if you use document.createElement and then you can do something like .onclick = ...
@5millerk ^^^
5millerk
@5millerk
Nov 22 2017 01:58
@ChrisBrownie55 sorry i don't really follow what you're saying >_<
@ChrisBrownie55 instead of using .html?
Kaz Baig
@kbaig
Nov 22 2017 01:59
if you're working with react why not do componentWillMount
@santanaG
Gustavo Santana
@santanaG
Nov 22 2017 02:02
@kbaig I am…but if the element does not exist in the DOM I can’t attach an event listener to it… will mount happens before render and thus before there is an element in the DOM
Kaz Baig
@kbaig
Nov 22 2017 02:03
yes but why not make a separate component for the node and use componentdidmount or something
Gustavo Santana
@santanaG
Nov 22 2017 02:05
@kbaig What do you mean?
Why would I make a component in order to figure out if another separate component mounted?
Henry
@GitHub-Henry
Nov 22 2017 02:07
@kbaig @AmekxOne Kaz Baig is right using var with async , when the for loop is completes and i is undefined by the time the async function runs. With let each iteration makes a new scope for each iteration. Because of closure the call back function has access to i. See the difference between var and let here.
Kaz Baig
@kbaig
Nov 22 2017 02:08
@santanaG You don't want to add listeners directly using the DOM API when working with React. If you want to do something when a component renders, use componentDidMount. You can use the ref property to refer to the specific element within your component
@GitHub-Henry I decided not to provide the let solution since it's ES6. forEach does the job while still being ES5
Henry
@GitHub-Henry
Nov 22 2017 02:10
@kbaig :+1:
Christopher Brown
@ChrisBrownie55
Nov 22 2017 02:10
@5millerk yeah, do something like this
function switchCelciusFahrenheit() {
    isCelcius = !isCelcius
    $('#temp').html( isCelcius ? tempFah : tempCel)
    $('#units').on('click', switchCelciusFahrenheit)
}
Try that
Christopher Brown
@ChrisBrownie55
Nov 22 2017 02:41
@5millerk my bad
function switchCelciusFahrenheit() {
  isCel = !isCel
  $('#temp').html( isCel ? tempFah : tempCel)
  $('#units').on('click', switchCelciusFahrenheit)
}
imemoje
@imemoje
Nov 22 2017 02:47
hello

<script>
$(document).ready(function() {
$("#target1").css("color", "red");
$("#target1").prop("disabled", true);
$("#target4").remove();
$("#target2").appendTo("#right-well");
$("#target5").clone().appendTo("#left-weel");
});
</script>

<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>
<div class="row">
<div class="col-xs-6">
<h4>#left-well</h4>
<div class="well" id="left-well">
<button class="btn btn-default target" id="target1">#target1</button>
<button class="btn btn-default target" id="target2">#target2</button>
<button class="btn btn-default target" id="target3">#target3</button>
</div>
</div>
<div class="col-xs-6">
<h4>#right-well</h4>
<div class="well" id="right-well">
<button class="btn btn-default target" id="target4">#target4</button>
<button class="btn btn-default target" id="target5">#target5</button>
<button class="btn btn-default target" id="target6">#target6</button>
</div>
</div>
</div>
</div>

A copy of your target5 element should also be inside your left-well.
Daniel
@DanJP2016
Nov 22 2017 02:48
no javascript icon with font-awesome...that is a little strange
imemoje
@imemoje
Nov 22 2017 02:48
why wont work
please hel
help*
anybody here?
Daniel
@DanJP2016
Nov 22 2017 02:51
@imemoje you got a type here $("#target5").clone().appendTo("#left-weel");
you put weel instead of well, change that and it should work
imemoje
@imemoje
Nov 22 2017 02:51
aha
thank you @DanJP2016
CamperBot
@camperbot
Nov 22 2017 02:52
imemoje sends brownie points to @danjp2016 :sparkles: :thumbsup: :sparkles:
:cookie: 295 | @danjp2016 |http://www.freecodecamp.org/danjp2016
Daniel
@DanJP2016
Nov 22 2017 02:52
your welcome
imemoje
@imemoje
Nov 22 2017 02:56
how nobody have complete all freecodecamp task?

$("right-well").children().css("color", "orange");

All children of #right-well should have orange text.

???
imemoje
@imemoje
Nov 22 2017 03:01
aha

right-well :) founded

texirv0203
@texirv0203
Nov 22 2017 03:08

hi,
I am trying to add another condition to my if statement.
If I click the Danger button only I should execute the below if condition.
so I pasted this method playerJumping() in the if statment.

can you tell me how to fix it.
both html and typescript are in separate file


player.html
<li [hidden]="DangerVisible"><a [class.disabled]="DangerDisable" (click)="playerJumping()" href="javascript:;" class="playerSpeakingDangerBtn">Danger</a></li><li [class.DangerHidden]="DangerVisible">



player.ts
if (soccerNetworkCount > 1 && soccerDayCount > 1 && soccerNetworkCount == networkInt && playerJumping()) {
                        networkInt = 1;
                        $('.nationalTransposeView .k-playerSpeakingr-layout > tbody > tr:last-child .k-playerSpeakingr-times > .k-playerSpeakingr-table > tbody > tr').eq(row).css({ "border-bottom-color": "#ffccdd" });
                        $('.nationalTransposeView .k-playerSpeakingr-content > .k-playerSpeakingr-table > tbody > tr').eq(row).find('td').css({ "border-bottom-color": "#ffccdd" });
                    } else {
                        networkInt += 1;
                    }
linkin-park
@linkin-park
Nov 22 2017 04:47
velp velp vel p velp! ve lp!
codewars.com dies , browser error : something went wrong while displaying this web page
TJ Hardin
@AndroidNinjaX
Nov 22 2017 04:50

Hey Everyone! Could someone help me with some styling. My buttons are sitting weird in this calculator. Has a larger black area on the right and top of the buttons.

https://codepen.io/AndroidNinjaX/pen/dZRqwg?editors=1100

Ismail Hozain
@ismailhozain
Nov 22 2017 04:52
hey guys i want to generate some random coordinates for this little thing that i am making.so is it possible to set the width of the screen to an actual number that i can plug into a randomizing funtion?
Johnny
@jtan3
Nov 22 2017 05:04
@AndroidNinjaX you can change the width of the calculatorBody to 600px and move the margin on .calculatorButtons -15px
TJ Hardin
@AndroidNinjaX
Nov 22 2017 05:10
@jtan3 When I changed the width to 600 the buttons 'CE' and '/' don't line up with the ones below. Also '.' and '=' dont either. I took the margin: 0 auto; out of the '.calculatorBody' and it just moved it to the left side of the screen. I did put it in '.calculatorButtons'.
@jtan3 601 made it work fine
@jtan3 The space at the top is still there though
TJ Hardin
@AndroidNinjaX
Nov 22 2017 05:16
@jtan3 well actually nevermind. I put the margin: 0 auto; back in '.calculatorBody' and it hates me again.
Johnny
@jtan3
Nov 22 2017 05:21
@AndroidNinjaX looks lined up now ?
@AndroidNinjaX i did .calculatorButtons margin-top: -15px; to get rid of the black space on top
Johnny
@jtan3
Nov 22 2017 05:27
@AndroidNinjaX I wouldn't worry too much about the lines. You can always ask around after you finished the javascript side of it.
TJ Hardin
@AndroidNinjaX
Nov 22 2017 05:32

@jtan3 Oh ya i got it lined up when I changed the width to 599px for some reason. And sweet that -15px works.

Actually I have the JS part done, just working on the styling. 2 seconds and Ill have it in there. Also need to change the colors, they are ugly

@jtan3 Here you go, has the JS in there and working.

https://codepen.io/AndroidNinjaX/full/JOXzwj/

Johnny
@jtan3
Nov 22 2017 05:40
@AndroidNinjaX i found a bug where you can click the decimal after entering another number .
TJ Hardin
@AndroidNinjaX
Nov 22 2017 05:40
@jtan3 should be able to. If you want to add say .25 + .75
Johnny
@jtan3
Nov 22 2017 05:41
@AndroidNinjaX you can type 6.6.6.
TJ Hardin
@AndroidNinjaX
Nov 22 2017 05:41
@jtan3 oh wait nevermind..... OMF NOOOOO!
Johnny
@jtan3
Nov 22 2017 05:42
@AndroidNinjaX im still trying to figure out how to do that myself
TJ Hardin
@AndroidNinjaX
Nov 22 2017 05:46
@jtan3 one sec i might have the solution
TJ Hardin
@AndroidNinjaX
Nov 22 2017 05:55
@jtan3 Got it
@jtan3 Instead of making decimalClick = 0 and then adding to it if I did click the decimal, I make it decimalClick=false. So then the only thing that makes it 'true' is clicking the decimal. When you click an operation then it will reset back to false. So you cannot have '6.6.6'
Johnny
@jtan3
Nov 22 2017 05:59
@AndroidNinjaX cool thanks
CamperBot
@camperbot
Nov 22 2017 05:59
jtan3 sends brownie points to @androidninjax :sparkles: :thumbsup: :sparkles:
:cookie: 300 | @androidninjax |http://www.freecodecamp.org/androidninjax
TJ Hardin
@AndroidNinjaX
Nov 22 2017 06:00
@jtan3 No thank you for the styling help
@jtan3 thanks
CamperBot
@camperbot
Nov 22 2017 06:00
androidninjax sends brownie points to @jtan3 :sparkles: :thumbsup: :sparkles:
:cookie: 464 | @jtan3 |http://www.freecodecamp.org/jtan3
iso
@iso1048
Nov 22 2017 06:38
Hi. Why can I not create a grid in the div with id='pixel-board'? I have a css selector targeting this element. https://codepen.io/gothamknight/pen/vWdwNm?editors=1100 (I am still learning CSS grid)
Long Nguyen
@longnt80
Nov 22 2017 07:16
@gothamknight there's nothing in it
Bilal
@BilalSaqib
Nov 22 2017 07:17
hello everyone !! im having a problem with toggle button in local weather app.
my click function is working but, content of html is not changing. again.
Markus Kiili
@Masd925
Nov 22 2017 07:18
@BilalSaqib Do you have it on Codepen?
Bilal
@BilalSaqib
Nov 22 2017 07:18
yup

$("button").click(function(){
if(toggled == false){
console.log("clicked");

  document.getElementById("t").innerHTML   =  "anything" + '  \u2109' ;
  toggled= true ;  
}
if(toggled == true){ 
  document.getElementById("t").innerHTML =   temp+ '  \u2103' ; 
  toggled= false ; 
}  

});

code fir toggle button
for
Markus Kiili
@Masd925
Nov 22 2017 07:21
@BilalSaqib Post the Codepen link. Hard to say from that clip what is wrong.
A_A
@Otto-AA
Nov 22 2017 07:55
@BilalSaqib If toggle is false, the code of the first if statement will be executed and in there toggled will be set true. And after that it will check for the second if statement if toggled is true (it is, because we just set it true). So no matter if toggled is true or false in the beginning, the second if statement will be executed
Markus Kiili
@Masd925
Nov 22 2017 08:00
@Otto-AA Yeah. Just if(toggled){DOM manipulation} else{DOM manipulation} toggled = !toggled;
Sorin Ruse
@sorinr
Nov 22 2017 08:00
@BilalSaqib what @Otto-AA is trying to point out is that you need an if else statement not two separate if statements
iso
@iso1048
Nov 22 2017 08:02
@longnt80 yeah I removed from stuff from my html and didn't look back at it haha. Thanks.
CamperBot
@camperbot
Nov 22 2017 08:02
gothamknight sends brownie points to @longnt80 :sparkles: :thumbsup: :sparkles:
:cookie: 672 | @longnt80 |http://www.freecodecamp.org/longnt80
TJ Hardin
@AndroidNinjaX
Nov 22 2017 08:10
@Masd925 hey whats up man
Markus Kiili
@Masd925
Nov 22 2017 08:10
@AndroidNinjaX Work :(
@AndroidNinjaX How about you?
TJ Hardin
@AndroidNinjaX
Nov 22 2017 08:11
@Masd925 me to. I did finish the calculator though.
Markus Kiili
@Masd925
Nov 22 2017 08:11
@AndroidNinjaX ok. I am trying to finish the portfolio page soon.
TJ Hardin
@AndroidNinjaX
Nov 22 2017 08:12
@Masd925 nice, I need to redo mine. Dang images and code pen just dont like to work.
Ashish Belwal
@ashishbelwal
Nov 22 2017 15:08
i was learning about canvas from youtube and got struck with webpack as i have windows os and that was in mac. can anyone help
AbrisM
@AbrisM
Nov 22 2017 15:09
Happy Thanksgiving Week All
A_A
@Otto-AA
Nov 22 2017 15:11
@ashishbelwal Yeah, do you have a specific problem?
@ashishbelwal won't have time in the next few hours but if you @mention me I will read it later
Ashish Belwal
@ashishbelwal
Nov 22 2017 15:12
yeah after --> npm install , how to start webpack from cmd
@Otto-AA yeah after --> npm install , how to start webpack from cmd
Sorin Ruse
@sorinr
Nov 22 2017 15:43
@ashishbelwal webpack --watch
homebrainbox
@homebrainbox
Nov 22 2017 15:45
Any opinion my personal portfolio website? https://codepen.io/homebrainbox/pen/NwvGGX?editors=1100
Tom
@moT01
Nov 22 2017 15:49
@homebrainbox looks really good
some spacing/indenting inconsistencies in the html
i can't find much to complain about
when you underline the section title on hover - it makes me think they might be clickable
homebrainbox
@homebrainbox
Nov 22 2017 15:54
@moT01 Yeah, I think you're right. I'll look into it man. Thanks.
CamperBot
@camperbot
Nov 22 2017 15:54
homebrainbox sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 914 | @mot01 |http://www.freecodecamp.org/mot01
Tom
@moT01
Nov 22 2017 15:54
yea, it's pretty much perfect - there's an analyze function in codepen if you click the little dropdown arrow on each section
shows a couple minor things
oh, i found something
when you click about, it takes you a little too far down, and the title is hidden
doesn't happen with the other sections though
Ken Haduch
@khaduch
Nov 22 2017 15:57
@homebrainbox - I was just looking at that same thing - the "About" section - you don't have the padding-top like you do for the home and portfolio sections.
homebrainbox
@homebrainbox
Nov 22 2017 15:58
@moT01 @khaduch Thanks guys, fixed it.
CamperBot
@camperbot
Nov 22 2017 15:58
homebrainbox sends brownie points to @mot01 and @khaduch :sparkles: :thumbsup: :sparkles:
api offline
:star2: 3521 | @khaduch |http://www.freecodecamp.org/khaduch
Sorin Ruse
@sorinr
Nov 22 2017 16:01
@homebrainbox i would keep media icons inline even on smaller screens. don't look so nice to have it stacked
homebrainbox
@homebrainbox
Nov 22 2017 16:03
@sorinr How should I do that?
hansUno2
@hansUno2
Nov 22 2017 16:03
Hello
Sorin Ruse
@sorinr
Nov 22 2017 16:04
@homebrainbox like <div class="col-xs-4 col-sm-4 text-center"><i class="icon-facebook"></i></div>
homebrainbox
@homebrainbox
Nov 22 2017 16:04
@hansUno2 hi
hansUno2
@hansUno2
Nov 22 2017 16:05
Do any of you have experiance with CSS Grid?
Sorin Ruse
@sorinr
Nov 22 2017 16:05
@homebrainbox you just need to add the class : col-xs-xxx
hansUno2
@hansUno2
Nov 22 2017 16:05
Im trying to implement it into my media queries
Sorin Ruse
@sorinr
Nov 22 2017 16:06
@hansUno2 its not very supported yet. i would go for flexbox for the moment
homebrainbox
@homebrainbox
Nov 22 2017 16:06
@sorinr Thanks
CamperBot
@camperbot
Nov 22 2017 16:06
homebrainbox sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1363 | @sorinr |http://www.freecodecamp.org/sorinr
Sorin Ruse
@sorinr
Nov 22 2017 16:06
@homebrainbox welcome
hansUno2
@hansUno2
Nov 22 2017 16:06
Its supported by all browsers except IE
Sorin Ruse
@sorinr
Nov 22 2017 16:08
@hansUno2 its Candidate Recommendation
hansUno2
@hansUno2
Nov 22 2017 16:09
Oh ok. Well Im using flexbox as is. Just figured CSS Grid would make things more straight forward. Also it will be fully supported by all browser within months just figured Id get a head start.
Ruben Abraham
@BuBBRBbr1
Nov 22 2017 16:10
bELOW
blob
Ken Haduch
@khaduch
Nov 22 2017 16:11
@BuBBRBbr1 - not sure what your quesiton is going to be, but you should have the column divs nested in the row divs.
Ruben Abraham
@BuBBRBbr1
Nov 22 2017 16:11
I need help with the below text on jquery targeting ID elements using jquery. It doesn't satisfy the challenge. Pls help.....
@khaduch I nee help with the captured screenshot.
THe other one was a mistype
Ken Haduch
@khaduch
Nov 22 2017 16:13
@BuBBRBbr1 - oh, I thought you were posting some HTML code - you can go back and delete or edit old posts if they are not correct, you have a few minutes to do that... just FYI
hansUno2
@hansUno2
Nov 22 2017 16:13
@BuBBRBbr1 Dont use jquery but it is the error / result you get?
Ruben Abraham
@BuBBRBbr1
Nov 22 2017 16:13
blob
Yes, syntax unexpected error input or something like that.
hansUno2
@hansUno2
Nov 22 2017 16:15
Then error is with the syntax of libe 4
Ruben Abraham
@BuBBRBbr1
Nov 22 2017 16:15
What do I do?
Ken Haduch
@khaduch
Nov 22 2017 16:15
@BuBBRBbr1 - if I have the right lesson, it looks like you should be adding the classes "animated fadeout" to the ID-based target.
hansUno2
@hansUno2
Nov 22 2017 16:15
Is button a element or class?
Ruben Abraham
@BuBBRBbr1
Nov 22 2017 16:16
I think it is a class, but I am not sure.
hansUno2
@hansUno2
Nov 22 2017 16:16
@khaduch what he said as well
Ruben Abraham
@BuBBRBbr1
Nov 22 2017 16:16
I did so and the error still cam e up
Ken Haduch
@khaduch
Nov 22 2017 16:16
@BuBBRBbr1 - you do not have the closing curly brace and closing paren }); on your line just before </script>
Ruben Abraham
@BuBBRBbr1
Nov 22 2017 16:17
SyntaxError: missing ) after argument list
Ken Haduch
@khaduch
Nov 22 2017 16:17
that is needed to properly terminate the function that is started on the $(document).ready line.
hansUno2
@hansUno2
Nov 22 2017 16:18
I guess that should be the syntax error.
Ken Haduch
@khaduch
Nov 22 2017 16:18
@BuBBRBbr1 the end of it should look like this:
    $("#target3").addClass("animated fadeOut");

  });
</script>
Ruben Abraham
@BuBBRBbr1
Nov 22 2017 16:18
The curly brace did it. It was not on there beforehand. I guess I should have remembered to add it.
hansUno2
@hansUno2
Nov 22 2017 16:19
@BuBBRBbr1 oneway to get around that is the copy the code in a text editor like sublim or atom
When done modifying it , copy it back into fcc editor
Ken Haduch
@khaduch
Nov 22 2017 16:21
@BuBBRBbr1 - if you check the code carefully before you made changes, those termination characters }); were there in the initial code in the editor. It's easy to overlook those things until you really get used to looking at the code.
jolio007
@jolio007
Nov 22 2017 16:25
Hi guys, I need serious help. I'm doing the random quote problem. I have used react get the quote but for some reason it doesn't work. Can someone have a look, pretty please. I've been working on it for quite awhile
Uros Tadic
@urketadic
Nov 22 2017 16:26
Hey guys
A_A
@Otto-AA
Nov 22 2017 16:28
@jolio007 You need to close everything you opened. Just click on the red !in js section and it will take you to the position of the error
Uros Tadic
@urketadic
Nov 22 2017 16:28

does anyone know a plugin that is used at the bottom of https://snowdenfilm.com/
https://gyazo.com/ccc5055989841969ca1f6a183a293a51

This interactive shit

A_A
@Otto-AA
Nov 22 2017 16:31
@urketadic Something like that? http://vincentgarreau.com/particles.js/
If yes, google js network particles and you'll probably find more of them
Uros Tadic
@urketadic
Nov 22 2017 16:35
No because I need circles that can actually be clicked
and then they will have a pop up
These ones just run away from you
hansUno2
@hansUno2
Nov 22 2017 16:37
@
alpox
@alpox
Nov 22 2017 16:38
@urketadic you may want to take a look at
Kaz Baig
@kbaig
Nov 22 2017 16:39
@alpox ayy you're back
alpox
@alpox
Nov 22 2017 16:39
Its no plugin but a library which helps you create whatever visualisation you can imagine
@kbaig back? I was never really gone :D
Uros Tadic
@urketadic
Nov 22 2017 16:39
ok thank you @alpox
CamperBot
@camperbot
Nov 22 2017 16:39
urketadic sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star2: 1462 | @alpox |http://www.freecodecamp.org/alpox
Kaz Baig
@kbaig
Nov 22 2017 16:40
@alpox haven't seen you in a few days haha
alpox
@alpox
Nov 22 2017 16:41
@kbaig well the last days i was very busy. I moved to my new home :)
Kaz Baig
@kbaig
Nov 22 2017 16:41
oh nice
jolio007
@jolio007
Nov 22 2017 16:41
@Otto-AA Thanks! What do you mean by close everything?
CamperBot
@camperbot
Nov 22 2017 16:41
jolio007 sends brownie points to @otto-aa :sparkles: :thumbsup: :sparkles:
:cookie: 395 | @otto-aa |http://www.freecodecamp.org/otto-aa
A_A
@Otto-AA
Nov 22 2017 16:59

For example your constructor

constructor() {
    super();
    this.state = {
      currentQuote: '',
      author: '',
      hasQuote: false
    };

has a missing } at the end

@jolio007
jolio007
@jolio007
Nov 22 2017 17:01
Ok
jolio007
@jolio007
Nov 22 2017 17:12
I've simplified my code to test the api fetch function. I can't seem to find what's not working. no red buttons - https://codepen.io/anon/pen/aVGNor
Kaz Baig
@kbaig
Nov 22 2017 17:18
@jolio007 One issue (not why it's not working) is that your api is responding with
{
    "error": {
        "code": 401,
        "message": "Unauthorized"
    }
}
A_A
@Otto-AA
Nov 22 2017 17:19
@jolio007 1) You can't return like that from an asynchrounous function. Try something like that
function getQuote() {
  return new Promise((resolve, reject) => {
    fetch("http://quotes.rest/quote/random.json")
      .then(function(response) {
         resolve(response.json());
      })
      .catch(reject);
  });
}
getQuote().then(quote => console.log(quote));
getQuote().catch(error => console.error(error));
@kbaig And that is also true :)
@jolio007 And in there, you specify a function, not the response of it: return <p>{_fetchQuote}</p>. Better to it with state (e.g. return <p>{this.state.quote}</p>)
@jolio007 if you wanted to give it the result of the function you would need _fetchQuote() instead. But with the asnychrounous function this won't help much (it returns a promise, not the final result)
going to eat now
good luck everyone ;)
jolio007
@jolio007
Nov 22 2017 17:21
thanks @kbaig @Otto-AA guys, sorry if those are basics stuff. I recently got into React
CamperBot
@camperbot
Nov 22 2017 17:21
jolio007 sends brownie points to @kbaig and @otto-aa :sparkles: :thumbsup: :sparkles:
:cookie: 454 | @kbaig |http://www.freecodecamp.org/kbaig
api offline
jolio007
@jolio007
Nov 22 2017 17:21
enjoy your meal
Kaz Baig
@kbaig
Nov 22 2017 17:22
no worries, this is just promise related stuff
not react
lfvpCO
@lfvpCO
Nov 22 2017 17:32
Hello guys.. what do you think about the future of css Grid against bootstrap.. I’m starting in web design and I love css Grid but I’m stacking position element inside the divs
Kaz Baig
@kbaig
Nov 22 2017 17:34
@lfvpCO bootstrap 4 uses grid if im not mistaken
Ruben Abraham
@BuBBRBbr1
Nov 22 2017 17:34
Targeting the specific child of an element j query.....I need help with this one as my target 2 is not bouncing as a result of the code
A-J Roos
@Asjas
Nov 22 2017 17:34
Well CSS Grid is a layout and bootstrap is a library so you really can't compare the two.
Ruben Abraham
@BuBBRBbr1
Nov 22 2017 17:34
blob
Kaz Baig
@kbaig
Nov 22 2017 17:36
@BuBBRBbr1 if you're referring to the last line, change the semicolon to a colon in the selector
lfvpCO
@lfvpCO
Nov 22 2017 17:36
I mean, I just want to get a nice and clean layouts
Kaz Baig
@kbaig
Nov 22 2017 17:36
grid is just one feature of bootsrap
you're probably not going to pick bootstrap just to get a grid layout
Ruben Abraham
@BuBBRBbr1
Nov 22 2017 17:37
I got it.
lfvpCO
@lfvpCO
Nov 22 2017 17:46
Mmm ok
A_A
@Otto-AA
Nov 22 2017 17:46
@lfvpCO Do you mean that grid system? https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout
If yes, I think it is quite nice, but the browser support is not big enough for me to use it (see can I use css-grid)
Edit: ~25% of users don't use a browser(version) which supports css-grid (if understood it the right way)
But I haven't worked with it yet, so I can't compare it to bootstrap
Henry
@GitHub-Henry
Nov 22 2017 18:05
@Otto-AA it's awesome
lfvpCO
@lfvpCO
Nov 22 2017 18:07
Guys. One more question.. bootstrap4 is not working in my atom.. I tried CDN and I downloaded as well. Not idea what’s going on
A-J Roos
@Asjas
Nov 22 2017 18:09
@lfvpCO Without a copy of what code you are using we can't say
jolio007
@jolio007
Nov 22 2017 18:11
@kbaig why use promise? not familiar with it
A-J Roos
@Asjas
Nov 22 2017 18:11
@lfvpCO What does chrome inspecter say? It should log in the console if something isn't downloading
Kaz Baig
@kbaig
Nov 22 2017 18:11
@jolio007 you already were using promises. fetch returns a promise
jolio007
@jolio007
Nov 22 2017 18:12
ah! I thought that it was just a react thing as they use fetch as well @kbaig
Kaz Baig
@kbaig
Nov 22 2017 18:13
fetch is part of the browser api, just like window or getElementById @jolio007
@jolio007 take a look at async/await when you can
jolio007
@jolio007
Nov 22 2017 18:17
alright, will do @kbaig ... Is it just me struggling with the quote projet #AskingForAFriend
Kaz Baig
@kbaig
Nov 22 2017 18:17
@jolio007 well if you're new to JS I would absolutely not recommend React
waaaaay too many new things to learn all at once
alpox
@alpox
Nov 22 2017 18:17
@kbaig @jolio007 And also not async/await (For newcomer)
Kaz Baig
@kbaig
Nov 22 2017 18:18
@alpox yeah I assumed that they weren't new when I saw React
alpox
@alpox
Nov 22 2017 18:19
@kbaig Does codepen even support async/await?
Kaz Baig
@kbaig
Nov 22 2017 18:19
alpox
@alpox
Nov 22 2017 18:21
@kbaig Well it doesn't :D
@kbaig babel would need its plugin for it but codepen doesn't provide it
Kaz Baig
@kbaig
Nov 22 2017 18:22
@alpox i meant to say i figured it does support it
since it didn't throw an error in that pen
alpox
@alpox
Nov 22 2017 18:22
@kbaig But it doesn't
It did
image.png
Kaz Baig
@kbaig
Nov 22 2017 18:23
derp I didn't look at the console, was just expecting a parsing error lol
alpox
@alpox
Nov 22 2017 18:23
:D
Tiago Correia
@tiagocorreiaalmeida
Nov 22 2017 19:18
hey @alpox !
A_A
@Otto-AA
Nov 22 2017 19:28
@kbaig didn't follow your discussion but I guess this could interest you: https://blog.codepen.io/2017/08/15/using-babel-polyfills/
Chris
@bestintown23
Nov 22 2017 20:01
Good afternoon, how can i get my hamburger icon to show on the same line with my logo in my nav bar? https://codepen.io/bestintown23/pen/bYoqrO
Ryan
@Ryan-ED
Nov 22 2017 20:12

https://codepen.io/RyanED/pen/boOZgO

Can anyone explain why th results are showing stream:null even for channels that ARE currently streaming?

Ryan
@Ryan-ED
Nov 22 2017 20:18
@bestintown23 like this? https://codepen.io/RyanED/pen/yPjXMy
Tiago Correia
@tiagocorreiaalmeida
Nov 22 2017 20:26
https://tiagocorreia-tradingbook.glitch.me if anyone around can test my app
A-J Roos
@Asjas
Nov 22 2017 20:26
@Ryan-ED Most likely because you are trying to search for streams using the _id value which is the stream value. Just search for the stream using the name of the streamer
Ryan
@Ryan-ED
Nov 22 2017 20:27
i see. but the docs say streams/<channel ID>
Kaz Baig
@kbaig
Nov 22 2017 20:27
@Otto-AA oh that's neat thanks for sharing
CamperBot
@camperbot
Nov 22 2017 20:27
kbaig sends brownie points to @otto-aa :sparkles: :thumbsup: :sparkles:
:cookie: 396 | @otto-aa |http://www.freecodecamp.org/otto-aa
A-J Roos
@Asjas
Nov 22 2017 20:28
Yes. <channel ID>. You are getting the stream ID and trying to use it as the channel id. That won't work
Ryan
@Ryan-ED
Nov 22 2017 20:30
how do i get the channel id?
@Asjas just tested it with the channel name and it works. thanks man
why do the twitch dev docs say use channel ID if it works with just the name?
A-J Roos
@Asjas
Nov 22 2017 20:32
If the channel is online you'll get a "channel" array in the JSON Object. In it you'll get a _id. That is the channel id
The Stream array contains the stream id and the channel array contains the channel id. It's split
Because the docs doesn't stop with the ID. It continues and shows you how to search for streams with more than just the ID. you can search with game=overwatch, summary, featured. They must allow streamer name then as well
Ryan
@Ryan-ED
Nov 22 2017 20:36
wow. thats very confusing. thanks a lot for your help though @Asjas
CamperBot
@camperbot
Nov 22 2017 20:36
ryan-ed sends brownie points to @asjas :sparkles: :thumbsup: :sparkles:
:cookie: 300 | @asjas |http://www.freecodecamp.org/asjas
Ryan
@Ryan-ED
Nov 22 2017 20:37
i've been struggling for weeks. lack of documentation and outdated APIs made it really difficult
glad i got what i need. now hopefully i can get this done and move along swiftly :smile:
A-J Roos
@Asjas
Nov 22 2017 20:39
The twitch challenge on FCC has 3 links to web docs. They provide all the information needed.
A_A
@Otto-AA
Nov 22 2017 20:39
@tiagocorreiaalmeida Looks really nice. Just yesterday I have heard of that idea ^_^
In my opinion an info page would really be necessary to explain how everything works. And the links at the right bottom don't work for me (I hate thinks which look like links but don't work :P )
Tiago Correia
@tiagocorreiaalmeida
Nov 22 2017 20:40
the links I forgot about them ahahaha
its the last part I wanted to be sure the rest of it its working
and yeah an info thing would help maybe on the first page
before the 4 icons
a basic explanation
and thanks @Otto-AA for looking at it :)
CamperBot
@camperbot
Nov 22 2017 20:41
tiagocorreiaalmeida sends brownie points to @otto-aa :sparkles: :thumbsup: :sparkles:
:cookie: 397 | @otto-aa |http://www.freecodecamp.org/otto-aa
A_A
@Otto-AA
Nov 22 2017 20:41
@tiagocorreiaalmeida Still don't know if it is about digital or physical books O.o
You're welcome ;)
Tiago Correia
@tiagocorreiaalmeida
Nov 22 2017 20:42
could be physical I would say, this project is quite confusing you dont have alot of points to follow if you dont write things tdown you get lost and confused in the process
:D
image.png
Ryan
@Ryan-ED
Nov 22 2017 20:46
@Asjas definitely not beginner level reading. they are assuming we know what jsonp and CORS is. they tell us nothing of callbacks and endpoints and GET requests
Tiago Correia
@tiagocorreiaalmeida
Nov 22 2017 20:46
check if you got the book @Otto-AA :D
A_A
@Otto-AA
Nov 22 2017 20:46
@tiagocorreiaalmeida Got it :heart_eyes:
Ryan
@Ryan-ED
Nov 22 2017 20:47
FCC is my intro to any kind of coding. it kind of feels like i was thrown into the deep end with this challenge
Tiago Correia
@tiagocorreiaalmeida
Nov 22 2017 20:48
eheheh, are you doing backend @Otto-AA ?
@Ryan-ED dont worry I was there before things will start to get together with time, and sometimes docs are not really updated so if one of the api's is giving issues go into another of the suggested
A_A
@Otto-AA
Nov 22 2017 20:49
@tiagocorreiaalmeida Not often. Once for a piano visualization service (http://player.bplaced.net/) and for a blog (about one year ago, it was such a mess XD)
Ian Gracia
@iangracia
Nov 22 2017 20:54
whats up guys
so i got this problem i cant seem to find the answer on google
Kaz Baig
@kbaig
Nov 22 2017 20:55
sup
Ian Gracia
@iangracia
Nov 22 2017 20:56
var audio1 = "a link";
var audio2 = "a link";
var audio3 = "a link";
var audio4 = "a link";

var a = 3;
How can i do this: "audio"+a.play(); ? If i want to play audio 3 with help from the a variable
("audio"+a).play();
This doesn't work, help
Kaz Baig
@kbaig
Nov 22 2017 20:57
That's not going to work
You would need to put them in an array and call them by their indices
or store them in an object
Tiago Correia
@tiagocorreiaalmeida
Nov 22 2017 20:58
atually it will work @kbaig
Ian Gracia
@iangracia
Nov 22 2017 20:58
how do you mean?
Tiago Correia
@tiagocorreiaalmeida
Nov 22 2017 20:58
cause audio + a
will audio3
:D
equal*
Kaz Baig
@kbaig
Nov 22 2017 20:58
@tiagocorreiaalmeida ...
Tiago Correia
@tiagocorreiaalmeida
Nov 22 2017 20:58
maybe im not seeing the issue :D
Ian Gracia
@iangracia
Nov 22 2017 20:58
@tiagocorreiaalmeida can you produce a line of code to prove it? :)
i certainly can't :worried:
Zachary
@Bazill03
Nov 22 2017 20:59
I don't think adding an integer to a string transforms the int into a string and concatinates them together.
Kaz Baig
@kbaig
Nov 22 2017 20:59
@tiagocorreiaalmeida he's trying to concat strings to create a variable name that he wants to call
Tiago Correia
@tiagocorreiaalmeida
Nov 22 2017 21:00
oh crap
I tought he wanted to call a string called audio3
xd
Ian Gracia
@iangracia
Nov 22 2017 21:00
@kbaig so i have to create an object with the links?
Tiago Correia
@tiagocorreiaalmeida
Nov 22 2017 21:00
anyway I need some rest @kbaig good eye and bad one from me
Ian Gracia
@iangracia
Nov 22 2017 21:01
or just with the variable names?
Kaz Baig
@kbaig
Nov 22 2017 21:01
var audio = ['link1', 'link2', 'link3', 'link4'];
var a = 2; // I want to play link3
audio[a].play();
except if your links are just strings, that's not going to do anything either
Ian Gracia
@iangracia
Nov 22 2017 21:01
Thanks Kaz i owe you one
Kaz Baig
@kbaig
Nov 22 2017 21:01
what are you using to play audio
Ian Gracia
@iangracia
Nov 22 2017 21:02
i use .play()
not sure what you mean
Kaz Baig
@kbaig
Nov 22 2017 21:02
Strings don't have a play method
Zachary
@Bazill03
Nov 22 2017 21:02
No. He has to declare them with new Audio.
var someSound = new Audio("someLinkToASound");
Kaz Baig
@kbaig
Nov 22 2017 21:02
^
Ian Gracia
@iangracia
Nov 22 2017 21:02
yes i've done that
Kaz Baig
@kbaig
Nov 22 2017 21:02
then you're fine
Ian Gracia
@iangracia
Nov 22 2017 21:03
how do i declare each link as a new audio variable in your array?
Zachary
@Bazill03
Nov 22 2017 21:03
You don't do it in the array.
Kaz Baig
@kbaig
Nov 22 2017 21:04
@Bazill03 I mean, he conceivably could
Zachary
@Bazill03
Nov 22 2017 21:04
I'm sure there's a better way to construct it than that, though.
Kaz Baig
@kbaig
Nov 22 2017 21:05
totally, but he could
Ian Gracia
@iangracia
Nov 22 2017 21:05
var audio1 =  new audio ("a link");
var audio2 = new audio ("a link");
var audio3 = new audio ("a link");
var audio4 = new audio ("a link");

var audio = ['aduio1', 'audio2', 'audio3', 'aaudio4'];

audio[a].play();
Kaz Baig
@kbaig
Nov 22 2017 21:05
still strings
get rid of the single quotes in the array
Zachary
@Bazill03
Nov 22 2017 21:05
Yeah audio1 is a string separate from the variable.
A_A
@Otto-AA
Nov 22 2017 21:05
I don't know if that is practical but you could do something like that:
var audio = ['link1', 'link2', 'link3', 'link4'].map(function(link) { return new Audio(link); });
Ian Gracia
@iangracia
Nov 22 2017 21:05
@Otto-AA dude, way too advanced for me
Kaz Baig
@kbaig
Nov 22 2017 21:06
@Otto-AA yeah why not
A_A
@Otto-AA
Nov 22 2017 21:06
@kbaig maybe because it loads all audios even if they aren't needed. Won't matter for 4 audios I guess, but for more it could be the wrong way to do it
Kaz Baig
@kbaig
Nov 22 2017 21:07
@Otto-AA ofc, we're not talking big apps here :)
Ian Gracia
@iangracia
Nov 22 2017 21:07
you dont know that i just gave you an example, maybe i got 3k audio files
A_A
@Otto-AA
Nov 22 2017 21:07
oh wait, it doesn't instantly load the audio when doing new audio(link), it loads them via a stream, right? If so then the point I made is totally invalid O.o
Kaz Baig
@kbaig
Nov 22 2017 21:08
I haven't personally worked with the Audio object sooo
But you don't have 3k files, do you
because you were trying to manually declare each Audio as a variable
Cameron Pick
@Fullmight
Nov 22 2017 21:09
Anyone know off hand how to get the first element of an array in Javascript when that first element is an array? I thought either doing a = b[0] would do the trick where a is an empty array, or a.push(b[0]); however this only gets the first element of the array which is the first element in b.
Zachary
@Bazill03
Nov 22 2017 21:09
I can't image the kind of hell that array would be.
b[0][0]
Ian Gracia
@iangracia
Nov 22 2017 21:10
no actually it's just 4
maybe in 5 years
A_A
@Otto-AA
Nov 22 2017 21:11
you could write a script to write the declarations though @kbaig
var script = "";
for (var i = 0; i < 1000; i++)
   script += "var audio" + i + " = new audio('./audio" + i + "');\n";
alert(script);
Cameron Pick
@Fullmight
Nov 22 2017 21:11
It's a part of what you need to deal with to solve one of the basic algorithm problems for FCC. It's an array like [[1,2,3,4], 1, 2]
Kaz Baig
@kbaig
Nov 22 2017 21:12
@Fullmight so get the first element of an array if the first elem is an array. What about when it's not?
@Otto-AA o shit I had no idea you could do that
A_A
@Otto-AA
Nov 22 2017 21:13
@kbaig never underestimate the power of coding :P
Kaz Baig
@kbaig
Nov 22 2017 21:14
@Otto-AA v interesting. thanks for sharing
CamperBot
@camperbot
Nov 22 2017 21:14
kbaig sends brownie points to @otto-aa :sparkles: :thumbsup: :sparkles:
api offline
Cameron Pick
@Fullmight
Nov 22 2017 21:14
@kbaig I don't need to worry about it ever not being an array, since it's just for an exercise, and the input is formated as an array starting with an array, and elements after the first being integers.
Kaz Baig
@kbaig
Nov 22 2017 21:15
@Fullmight well if you want to check if something is an array, you can pass it into the function Array.isArray
Zachary
@Bazill03
Nov 22 2017 21:15
Hey @Otto-AA , I'm having a silly issue with that dialogue. I got everything working for the most part but the library doesn't have any way to unload the data file. Whenever the player enters the second conversation of the game he's getting responses from both actors.
A_A
@Otto-AA
Nov 22 2017 21:16
@Bazill03 Can you post the link to the repo again?
Zachary
@Bazill03
Nov 22 2017 21:16
For sure, let me update it real quick.
Kaz Baig
@kbaig
Nov 22 2017 21:16
@Fullmight I think I'm totally misunderstanding your question
Can you provide an example of what you want to do
A_A
@Otto-AA
Nov 22 2017 21:18
@Fullmight Maybe misunderstanding too. But if you want [1,2,3,4] when the array is [[1,2,3,4], 1, 2], then simply go with arr[0](in this case [[1,2,3,4], 1, 2][0]). If you want only 1 you can go with arr[0][0] (probably check if it is an array then)
Cameron Pick
@Fullmight
Nov 22 2017 21:22

given an array arr = [[1,2,3,4], 1, 2];

I need to pass the first element [1,2,3,4] to a new array arr2.

I tried

arr2 = arr[0]; which returned 1.

I tried arr2.push(arr[0]); and got 1.

I tried both using [0][0] and got null.

For direct example

var locArr = new Array();
locArr = arr[0];
return locArr;

Where arr is [[1,2,3,4], 1, 2] as previously mentioned.*
is returning 1.

A_A
@Otto-AA
Nov 22 2017 21:23
@Bazill03 One way would be not to use the Dialogue object directly but to clone it to lets say var myDialogue = Object.assign({}, Dialogue);. Later if you want to delete all the info you just do the same myDialogue = Object.assign({}, Dialogue);
so use it as some kind of constructor @Bazill03
Zachary
@Bazill03
Nov 22 2017 21:24
I'll do that, thanks @Otto-AA .
CamperBot
@camperbot
Nov 22 2017 21:24
bazill03 sends brownie points to @otto-aa :sparkles: :thumbsup: :sparkles:
:cookie: 398 | @otto-aa |http://www.freecodecamp.org/otto-aa
Kaz Baig
@kbaig
Nov 22 2017 21:25
@Fullmight the first solution should work
A_A
@Otto-AA
Nov 22 2017 21:25
image.png
yes, it should work
Cameron Pick
@Fullmight
Nov 22 2017 21:26
Huh, I guess the issue must be something else, thanks!
A_A
@Otto-AA
Nov 22 2017 21:27
You're welcome :)
Kaz Baig
@kbaig
Nov 22 2017 21:27
@Fullmight sure. If you're still struggling and think it might be a typo or something, feel free to post your code
Zachary
@Bazill03
Nov 22 2017 21:48
@Otto-AA Am I trying to use Dialogue.load as an object?
Zachary
@Bazill03
Nov 22 2017 21:55
@Otto-AA Ignore that, got it working.
JVAckerman
@JVAckerman
Nov 22 2017 22:41
Hi all! Would appreciate some feedback on my first code camp project (tribute page) if anyone has time to take a quick look... https://codepen.io/J-V-Ackerman/pen/yPgGao
Tom
@moT01
Nov 22 2017 22:46
@JVAckerman looks good at full size
it's not very responsive
shrink the window and things get a little goofy
JVAckerman
@JVAckerman
Nov 22 2017 22:47
@moT01 Yeah, haven't worked in any breakpoints, so it's only optimized for large screens at present. Maybe I should have used Bootstrap to make that process easier.
Tom
@moT01
Nov 22 2017 22:47
click the little drop down arrow by the css section and click analyze
shows one error
bootstrap would have maybe made it easier but i like working without it
helps to use responsive units like %
its really just the paragraphs i think
the pictures and title are fine
that huge margin
JVAckerman
@JVAckerman
Nov 22 2017 22:53
I probably should have started with the small screen version and worked up from there. Everything seems to collapse at about the medium break point.
Thanks for taking a look!