These are chat archives for FreeCodeCamp/HelpFrontEnd

22nd
Oct 2017
Richard
@rylew0925
Oct 22 2017 00:21
How do i get the output to change cards?
let cards = ['Diamond', 'Spade', 'Heart', 'Club'];
let currentCard = 'Spade';

while (currentCard !== 'Spade') {
  console.log(currentCard);
  currentCard = cards[Math.floor(Math.random() * 4)];
};

console.log(currentCard = 'Heart');
All I get is Heart. How can I get the code to output different cards?
Tom
@moT01
Oct 22 2017 00:52
@rylew0925 looks like you're close, im not sure what the loop is for
or what that log at the end is doing
is it setting a value or is it logging currentcard
or both
try getting rid of the loop and changing the log at the end to just (currentCard)
so you just declare some variables, then do the random thing then the log
every refresh should be a new random suit
Ismail Hozain
@ismailhozain
Oct 22 2017 01:20

hey guys is it possible to use this type of method to end a for loop(it is intended to loop through an array ` for ( var i;i++;i===str[-1]) {

} `0

ssucoder
@ssucoder
Oct 22 2017 02:06
hey
Robel Tesfaye
@Robel612
Oct 22 2017 04:25
@ismailhozain you need to switch around the condition and the incremental step. But to my knowledge, that kind of loop would not work.
linkin-park
@linkin-park
Oct 22 2017 05:56
question to react users , do you guys use key props ?
if so when to use it? well your app turns complex what can i give as key?
bit concerned about reports though
Ashwin
@ashwins93
Oct 22 2017 06:00
@linkin-park you use key props whenever you render an array of items
it helps Reacts to find out which items have actually changed and which items have simply been rearranged
Rob Weber
@robbawebba
Oct 22 2017 06:01
@linkin-park You should add the key prop to your components when they are created during iteration inside another component's render method. When you don't include the key prop, you'll probably see a warning in the console about it. The value of the key prop should be a unique identifier for that child. If you are creating these components while iterating through your data, then the data's ID would be perfect. The key values should be unique to help with efficient re-rendering, so IDs are perfect for this.
Ashwin
@ashwins93
Oct 22 2017 06:02

@linkin-park https://reactjs.org/docs/lists-and-keys.html#keys

read here to know more

its optional to add keys but it will help in performance
Rob Weber
@robbawebba
Oct 22 2017 06:07
render() {
    const {todoList} = this.props
    return (
        <div>
            { todoList.map(todo => (<TodoItem key={todo.ID} title={todo.title} completed={todo.completed} /> )) }
        </div>
    )
linkin-park
@linkin-park
Oct 22 2017 06:09
okay one more thing props means properties in react
Rob Weber
@robbawebba
Oct 22 2017 06:10
@linkin-park yup! they just refer to them as props for short
linkin-park
@linkin-park
Oct 22 2017 06:10
and i feel like everything is state
is this convention followed
to differnciate things
Ashwin
@ashwins93
Oct 22 2017 06:11
@linkin-park I like how you refer to it as a "convention", but react just names them state and props IIRC
props is a read only property
something like this.props.name = "hello" doesn't work
state can be written into but using this.setState({}) which will automatically call the render() provided shouldComponentRender() doesn't return false
linkin-park
@linkin-park
Oct 22 2017 06:14
as i thought based on the convention they have built react behavior
its very similar to the framework i have worked before :)
with extra thing of it integrates fine with backend .
Ashwin
@ashwins93
Oct 22 2017 06:17
The one good thing about react is how well it is documented, you could read the documentation and understand a lot of stuff
linkin-park
@linkin-park
Oct 22 2017 06:23
i want to see how these things fits fine on a report :|
Ashwin
@ashwins93
Oct 22 2017 06:24
What report?
linkin-park
@linkin-park
Oct 22 2017 06:25
accounting report :P
hey there is a cricket match in few hours
silver537
@silver537
Oct 22 2017 06:27
ahem vue cough
I think there's a big in my throat.
hawks vue js cough cough
linkin-park
@linkin-park
Oct 22 2017 06:29
why dont you cough angggg lr? @silver537
silver537
@silver537
Oct 22 2017 06:30
Cause angular has too many angles.
linkin-park
@linkin-park
Oct 22 2017 06:34
well both are tools :/
Ashwin
@ashwins93
Oct 22 2017 06:36
Angular doesn't feel right

accounting report :P

and you're trying to generate it with React?

linkin-park
@linkin-park
Oct 22 2017 06:36
why not
Ashwin
@ashwins93
Oct 22 2017 06:37
Im not saying its a bad idea
but don't have ERPs to do that for you?
don't you*
linkin-park
@linkin-park
Oct 22 2017 06:37
well i like to do it :)
Ashwin
@ashwins93
Oct 22 2017 06:38
lol alright then have fun at work
i use Excel at my work to prepare reports
linkin-park
@linkin-park
Oct 22 2017 06:38
i use to work with excel and VBA :P
but VBA has its own limit
Ashwin
@ashwins93
Oct 22 2017 06:39
limit as in you write a lot of code but that's alright
Accountants are more concerned with numbers than aesthetics
linkin-park
@linkin-park
Oct 22 2017 06:39
i wrote a parser for a structured xml for work sake :)
but had to deal with VBA for that :D
it was heck hard
we had our own rules for XML
for accounting
Ashwin
@ashwins93
Oct 22 2017 06:41
You don't actually have to mess up with VBA
you could actually use python
linkin-park
@linkin-park
Oct 22 2017 06:41
i have lot of hate for accounting :) really hard math
Ashwin
@ashwins93
Oct 22 2017 06:41
and python has a library to work with excel files
really makes the job very simple, you write very less code with pyton
python*
linkin-park
@linkin-park
Oct 22 2017 06:41
well using python will result in legal action in our company prev
Ashwin
@ashwins93
Oct 22 2017 06:41
@linkin-park oops

i have lot of hate for accounting :) really hard math

haha then i think you shouldn't be the one preparing the accounts report

linkin-park
@linkin-park
Oct 22 2017 06:42
why i would write a parser :P
i can use open source
we are lazy :P
but work money plays a big role
accounting is fun :)
linkin-park
@linkin-park
Oct 22 2017 06:48
bye all
Ashwin
@ashwins93
Oct 22 2017 06:58

accounting is fun :)

yes it is

bye @linkin-park
linkin-park
@linkin-park
Oct 22 2017 10:23
@the-vampiire there?
@ashwins93 hey
Ashwin
@ashwins93
Oct 22 2017 10:24
@linkin-park hi\
linkin-park
@linkin-park
Oct 22 2017 10:25
are you always online :P
just joking
whats up
Ashwin
@ashwins93
Oct 22 2017 10:25
just reading books
linkin-park
@linkin-park
Oct 22 2017 10:26
nice
Ashwin
@ashwins93
Oct 22 2017 10:28
@linkin-park what is that
linkin-park
@linkin-park
Oct 22 2017 10:30
well its place for engineers :)
started by Indian :)
Ashwin
@ashwins93
Oct 22 2017 10:32
oh nice
@linkin-park Good for you
linkin-park
@linkin-park
Oct 22 2017 10:37
i like you to join IT :)
Ashwin
@ashwins93
Oct 22 2017 10:39
@linkin-park I'm no engineer
linkin-park
@linkin-park
Oct 22 2017 10:40
well join HR :) for great good :)
you will become
Ashwin
@ashwins93
Oct 22 2017 10:43
@linkin-park lol okay i'll see
@linkin-park okay i joined now
what should i do?
linkin-park
@linkin-park
Oct 22 2017 10:45
so fast you joined?
Ashwin
@ashwins93
Oct 22 2017 10:48
yeah
it asked only for name and email id
i'm doing the basic questions now
linkin-park
@linkin-park
Oct 22 2017 10:48
click around :)
Ashwin
@ashwins93
Oct 22 2017 10:49
its like the fcc algo challenges
challenges
linkin-park
@linkin-park
Oct 22 2017 10:51
dont compare with it :P
Ashwin
@ashwins93
Oct 22 2017 10:52
no i'm saying the structure is similar
i love challenges
linkin-park
@linkin-park
Oct 22 2017 10:53
cool
Ashwin
@ashwins93
Oct 22 2017 10:53
pythonchallenge.com
i spent a lot of hours in that
that was my happiest moments
linkin-park
@linkin-park
Oct 22 2017 10:56

@ashwins93

that was my happiest moments
i cant say happy but good time pass

Ashwin
@ashwins93
Oct 22 2017 10:56
you went through those challenges as well?
it was more of a riddle
linkin-park
@linkin-park
Oct 22 2017 10:56
yes :)
you can find what you like and start with it
since you dont do for time pass you can do something at your age.
Ashwin
@ashwins93
Oct 22 2017 10:58

since you dont do for time pass you can do something at your age.

i think these challenges were targeted at C/C++

linkin-park
@linkin-park
Oct 22 2017 10:59
might be
you can choose what language you want to do
i'm doing in erlang , java , C++
and if you get a job dont work alot , work for the money :)
linkin-park
@linkin-park
Oct 22 2017 11:05
elixir fans - not interested :)
Ashwin
@ashwins93
Oct 22 2017 11:06
I'm doing it JS
in JS*

and if you get a job dont work alot , work for the money :)

"If" i get it, i will remember what you said. For now coding is like playing a game

Ashwin
@ashwins93
Oct 22 2017 11:25
@linkin-park thanks for sharing the link, its so much fun
CamperBot
@camperbot
Oct 22 2017 11:25
ashwins93 sends brownie points to @linkin-park :sparkles: :thumbsup: :sparkles:
:cookie: 41 | @linkin-park |http://www.freecodecamp.com/linkin-park
linkin-park
@linkin-park
Oct 22 2017 11:31
tu for brownie points now i can get gift card from amazon
thank you*
ill be off , no free internet :)
Jake
@NeelDVirus
Oct 22 2017 12:48
This message was deleted

i got the snippet below to use for retina displays (where device pixel ratio = 2)

.logo_background {
    background-image: url('../img/logo@1x.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 80px 40px; /* size of the logo image @ 1x */
}
@media /* only for retina displays */
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min--moz-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2),
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi),
only screen and (min-resolution: 2dppx) {
    .logo_background {
        background-image: url('../img/logo@2x.png');
    }
}

i considered to use extra set of code engulf in the media query for the retina display where device-pixel ratio =3 :

.logo_background {
    background-image: url('../img/logo@1x.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 80px 40px; /* size of the logo image @ 1x */
}
@media /* only for retina displays */
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min--moz-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2),
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi),
only screen and (min-resolution: 2dppx) {
    .logo_background {
        background-image: url('../img/logo@2x.png');
    }
}
@media /* only for retina displays with DPR =3 */
only screen and (-webkit-min-device-pixel-ratio: 3),
only screen and (min--moz-device-pixel-ratio: 3),
only screen and (min-device-pixel-ratio: 3),
only screen and (-webkit-min-device-pixel-ratio: 3),
only screen and (min-resolution: ??),  //what shall be the value of min-resolution here?
only screen and (min-resolution: ??) {  //what shall be the value of min-resolution here?
    .logo_background {
        background-image: url('../img/logo@3x.png');
    }
}

so i have two questions precisely.

  1. Is that approach convenient and reliable?
  2. What would be the value fo the "minimum resolution" given in last 5th and 6th line of the last snippet?
Marc
@MWBauer
Oct 22 2017 14:52
Hiya' everyone!
anyone here?
Lee
@LeeConnelly12
Oct 22 2017 14:56
Hi
George H
@laohe027
Oct 22 2017 15:20
hi
alteducation
@alteducation
Oct 22 2017 15:20
hi can someone suggest a sketchy and colorful alternative to fontawesome
Bill
@kirah1314
Oct 22 2017 17:15
@alteducation I haven't used this before but someone recommended it to me https://thenounproject.com/
Lee
@LeeConnelly12
Oct 22 2017 17:39
Why can't i vertically align the h1 inside the header? codepen
alteducation
@alteducation
Oct 22 2017 17:42
@LeeConnelly12 you cannot align vertically using that code. either you need to use flexbox or you need you use absolute positioning. learn flexbox it will make creating layouts much easier
Stephen James
@sjames1958gm
Oct 22 2017 17:42
@LeeConnelly12
h1 {
  margin: 0 auto;
  text-align:center;
}
@LeeConnelly12 Learning flexbox gives you much more control over alignment
Ashwin
@ashwins93
Oct 22 2017 17:53
@LeeConnelly12 you can vertically align your text to the middle if you set your text's line height equivalent to the height of its container
in your case if the header is having a height of 120px then setting line-height of h1 to 120px will vertically align it to the middle
Lee
@LeeConnelly12
Oct 22 2017 18:33
@sjames1958gm @ashwins93 Thanks guys
CamperBot
@camperbot
Oct 22 2017 18:33
leeconnelly12 sends brownie points to @sjames1958gm and @ashwins93 :sparkles: :thumbsup: :sparkles:
:cookie: 384 | @ashwins93 |http://www.freecodecamp.com/ashwins93
:star2: 8595 | @sjames1958gm |http://www.freecodecamp.com/sjames1958gm
alpox
@alpox
Oct 22 2017 19:01
A little ad: If anyone needs a flexible validation library: https://www.npmjs.com/package/validation-msgs i took it out of one of my projects and put it open-source
If anyone takes a look, id be glad about feedback
Fredrik Strand Oseberg
@FredrikOseberg
Oct 22 2017 20:20

Just published my real app thanks to FCC: https://cryptodasher.com/

Feedback welcome. If you follow cryptocurrencies I think you’ll find it useful.

Matej Bošnjak
@mbosnjak01
Oct 22 2017 20:31
Hi. I got stuck on some minor issue ... This is my 2 functions https://i.imgur.com/YOXqOH1.jpg ... both are working on click only ... the issue is, my closeUserData (which works/should work properly only when I click a button to close user) empties array from fetchData function at the same time it fetches, and as a result I get an empty array on the screen as a result. ... of course when I remove array.lenght = 0 from closeUserData, array shows result but then it doesn't get empty on a click ...
could anyone tell me why is that happening and how to fix?
Arnaud Casamé
@arnaudcasame
Oct 22 2017 21:23
Hi everyone, I'm living in Jenkintown Pennsylvania. I wanted to know which one of you is interested in meeting up and work on projects together.