These are chat archives for FreeCodeCamp/HelpJavaScript

11th
Apr 2018
Corey Smith
@CoreyCache
Apr 11 2018 01:35
hey guys
Brad
@bradtaniguchi
Apr 11 2018 01:48
In the angular chat someone asked how to get an array of values without any "false" values in it. I came up with this piece of functional BS. And I had to tell someone XD
const isValid = (arr, el) => !!el ? arr.push(el) && arr : arr;
const output = input.reduce(isValid, []);
abraham anak agung
@padunk
Apr 11 2018 04:40
@bradtaniguchi what is !! for?
Priyanka
@pd21
Apr 11 2018 04:46
Has anyone worked with Dark sky API?
Claudio Restifo
@Marmiz
Apr 11 2018 04:56
@bradtaniguchi a filter is not enough?
const withoutFalsy = arr.filter(el => el)
Markus Kiili
@Masd925
Apr 11 2018 05:20
@padunk !! does coercion to type Boolean.
abraham anak agung
@padunk
Apr 11 2018 05:33
@Masd925 what does it mean?
Markus Kiili
@Masd925
Apr 11 2018 05:35
@padunk !! does the same as Boolean(). It transforms falsy values 0,"",false,null,NaN,undefined into false and all other JS values (truthy values) to true.
abraham anak agung
@padunk
Apr 11 2018 05:39
@Masd925 I see. Ty
CamperBot
@camperbot
Apr 11 2018 05:39
padunk sends brownie points to @masd925 :sparkles: :thumbsup: :sparkles:
:star2: 4774 | @masd925 |http://www.freecodecamp.org/masd925
Brad
@bradtaniguchi
Apr 11 2018 06:08
@Marmiz Yes that would be enough, but I guess I left out in their case they had to perform an action on each item in the array. So they used filter then map. I disliked the idea of using two functions piped, as it could go over every element twice. But they said "readability". Long story short I set out to make a more "readable" version which ended up as probably the opposite. The fact people are asking how it works is a sign of success (or failure haha)
Claudio Restifo
@Marmiz
Apr 11 2018 08:09
@bradtaniguchi in this case I like your idea of using a reducer :+1:
Markus Kiili
@Masd925
Apr 11 2018 08:36
@Marmiz Morning.
Claudio Restifo
@Marmiz
Apr 11 2018 08:59
@Masd925 :wave: :cherry_blossom: :sparkles:
Leigh Hobson
@leighhobson89
Apr 11 2018 10:49
morning guys
    for (i=0;i<returnArray.length;i++) {
      var spliced = false;
      if (returnArray[i] == 0) {
        returnArray.splice(returnArray[i], 1);
        spliced = true;
      }
      if (spliced) {
        i--;
      }
    }

//example Array :

//0,10,3,4,2,0,12,13,14
could anybody tell me
why this loop correctly gets rid of the first zero but when it encounters the second, it just removes element zero rather than the one at position 5?
sorry this was refactored to:
    for (i=0;i<returnArray.length;i++) {
      var spliced = false;
      if (returnArray[i] == 0) {
        returnArray.splice(returnArray[i], 1);
      }

    }

//example Array :

//0,10,3,4,2,0,12,13,14
ignore that last one
    for (i=0;i<returnArray.length;i++) {
      if (returnArray[i] == 0) {
        returnArray.splice(returnArray[i], 1);
        i--;
      }
    }
there!
its not immediately obvious to me why its doing that, and sorry for the spam code! Any ideas?
Stephen James
@sjames1958gm
Apr 11 2018 10:57
@leighhobson89 You are using the array element returnArray[i] in the splice when you should be using just i
Leigh Hobson
@leighhobson89
Apr 11 2018 10:57
hi Stephen, you know, the penny dropped just as you said, oh I have headache!! Thanks @sjames1958gm
CamperBot
@camperbot
Apr 11 2018 10:57
leighhobson89 sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 9191 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Stephen James
@sjames1958gm
Apr 11 2018 10:57
You are doing splice(0,1) and not splice(4, 1)
:)
:+1:
Leigh Hobson
@leighhobson89
Apr 11 2018 10:58
i'm dreaming in 0's and 1's these days! :D
That feeling of so close... lol
image.png
Stephen James
@sjames1958gm
Apr 11 2018 11:01
@leighhobson89 I have those dreams all the time :)
Leigh Hobson
@leighhobson89
Apr 11 2018 11:01
haha
its always the 'should be obvious' things that slow you down the most isnt it
Stephen James
@sjames1958gm
Apr 11 2018 11:05
Yes. My first rule of debugging. I had to do something stupid I have called myself "dumba**" more times than I want to think about
Leigh Hobson
@leighhobson89
Apr 11 2018 11:41
exactly haha - I have learnt now that those 3 hours spent sat there way past bedtime 'just trying to finish something' can be condensed into 10 minutes when you walk away, sleep on it, and look at it again in the morning!

the hugely overcoded finished article (unrefactored as yet!)

function checkCashRegister(price, cash, cid) {

var returnArray = [];

function convertFloats(arr, flag) {
  if (flag == 1) {
    for (var i=0;i<arr.length;i++) {
      arr[i][1] = parseInt(arr[i][1] * 100);
    }
  }
  else { 
    for (var j=0;j<arr.length;j++) {
      arr[j][1] /= 100;
      arr[j][1].toFixed(2);
    }
  }
  return arr;
}

function sumInTill(sum) {
  var newArr = [];
  for (var i=0;i<sum.length;i++) {
  newArr.push(sum[i][1]); 
  }  
  var result = newArr.reduce(function(a,b) {return a+b;});
  return result;
}

function amountOfEachCoinOrBill(arr,denominations) {
  var newArr = [];
  for (var i=0;i<arr.length;i++) {
    var result = arr[i][1] / denominations[i].value;
    result = parseInt(result);
    newArr.push(result);
  }
  return newArr;
}
 // -------------------------------------------------------------------
  cash *= 100;
  price *= 100;
  cid.reverse();
  var denominations = [
  { name: 'ONE HUNDRED', value: 10000},
  { name: 'TWENTY', value: 2000},
  { name: 'TEN', value: 1000},
  { name: 'FIVE', value: 500},
  { name: 'ONE', value: 100},
  { name: 'QUARTER', value: 25},
  { name: 'DIME', value: 10},
  { name: 'NICKEL', value: 5},
  { name: 'PENNY', value: 1}
];
  cid = convertFloats(cid,1);

  var changeDue = cash - price;
  var numberOfDenominations = amountOfEachCoinOrBill(cid,denominations);
  var cashInTill = sumInTill(cid);
  var notesGiven;

  for (var i=0;i<cid.length;i++) {
    notesGiven = 0;
    if (denominations[i].value > changeDue) {
      returnArray[i] = 0;
      continue;
    }

    while (numberOfDenominations[i] > 0) {

      if (denominations[i].value <= changeDue) {
        cashInTill -= (denominations[i].value);
        numberOfDenominations[i]--;
        changeDue -= (denominations[i].value);
        notesGiven++;
      }
      else {
        returnArray[i] = 0;
        break;
      }
    }
    if (notesGiven > 0) {
      returnArray[i] = [];
      returnArray[i][0] = denominations[i].name;
      returnArray[i][1] = (denominations[i].value * notesGiven);
    }
  }
  console.log(returnArray);

  if (changeDue > cashInTill || i === cid.length && changeDue > 0) {
    return "Insufficient Funds";
  }
  else if (changeDue === cashInTill) { //closed
    return "Closed";
  }
  else {
    for (i=0;i<returnArray.length;i++) {
      if (returnArray[i] == 0) {
        returnArray.splice(i, 1);
        i--;
      }
    }

      returnArray = convertFloats(returnArray, 0);
      return returnArray;
  }
}

checkCashRegister(19.50, 20.00, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.10], ["QUARTER", 4.25], ["ONE", 90.00], ["FIVE", 55.00], ["TEN", 20.00], ["TWENTY", 60.00], ["ONE HUNDRED", 100.00]]);

only thirteen hours on that beast :/

Markus Kiili
@Masd925
Apr 11 2018 11:47
@leighhobson89 Ok. Now do it in 1 line.
Martin Aarhus Gregersen
@gregersen12
Apr 11 2018 12:08

Heya! I've been struggling with the basic algoritm for factorializing a number, for a few days. Can anyone help me out?

I simply can't figure out the right approach.

Markus Kiili
@Masd925
Apr 11 2018 12:09
@gregersen12 What have you done so far?
How would I solve it with pen and paper is usually a decent algorithm you could implement in the code.
Daniel Romero
@Ranacode
Apr 11 2018 12:12
Hey guys I have a challenge for you
I'm trying to refactor this in a elegant way
private function handleInternalCounter($providingFundID)
    {
        $zeros = null;
        if ($providingFundID < 10) {
            $zeros = "000";
        } else if ($providingFundID > 9) {
            $zeros = "00";
        } else if ($providingFundID > 99) {
            $zeros = "0";
        } else {
            $zeros = "";
        }
        return [
            'value' => "{$zeros}{$providingFundID}",
            'required' => true,
            'element' => 'text',
        ];
    }
Any ideas?
Martin Aarhus Gregersen
@gregersen12
Apr 11 2018 12:14

Alright so, my thought was: Initialize something that could serve as an iterator (i), and as long as it is not the same value as [input], just add the two together, and save it.
Currently looking like this:

function factorialize(num) {
  var res;
  for (i = 1; i == num; i++) {
    res = num * i;
  }
  return res;
}

@Masd925

@Ranacode use s switch? Should reduce some clutter :) Or a ternary operator
Markus Kiili
@Masd925
Apr 11 2018 12:16
@gregersen12 You need to initialize the res variable to 1. Then multiply it with res = res * i inside the loop.
for (var i=2; i<=num; i++)
Martin Aarhus Gregersen
@gregersen12
Apr 11 2018 12:16
But doesn't that totally exclude num?
Markus Kiili
@Masd925
Apr 11 2018 12:17
num is the upper limit of the iteration.
If you calculate factorial of 5, you loop numbers 2,3,4,5 and multiply them.
Martin Aarhus Gregersen
@gregersen12
Apr 11 2018 12:17
Wow! Solved it with setting i <= num. I can't figure out why that made a massive difference over ==
Markus Kiili
@Masd925
Apr 11 2018 12:18
@gregersen12 Loop block is only executed if the condition is true. Your loop stops at the first test because the condition is false.
Martin Aarhus Gregersen
@gregersen12
Apr 11 2018 12:19
What makes it go false? I tried rubber ducking it already, but couldn't find a reason
i doesn't get bigger than num right?
or equal to I mean
Markus Kiili
@Masd925
Apr 11 2018 12:22
@gregersen12 If you calculate the factorial of 5, then num is 5 and on the first loop cycle i is 1 and the condition i==num is 1==5 is false.
Martin Aarhus Gregersen
@gregersen12
Apr 11 2018 12:26
Ah. Ofcourse. So it would only continue running, as long as that was true, which ofcourse it wouldn't be. What a slip-up!
So the same conditions would've worked if I used a while loop?
Markus Kiili
@Masd925
Apr 11 2018 12:28
@gregersen12 No.
Martin Aarhus Gregersen
@gregersen12
Apr 11 2018 12:30
Alright. Well thanks either way, it was a very nice spot :) totally didn't see it myself
Leigh Hobson
@leighhobson89
Apr 11 2018 12:36
@Masd925 - haha that really gets me when I pour over things for hours and then I look at the advanced solution afterwards and some guys done it in 3 lines or something or thats normally the case using all the prebuilt methods etc and just generally knowing everything. I guess were here to learn though!
Markus Kiili
@Masd925
Apr 11 2018 12:37
@leighhobson89 Yes. I was mostly joking, even thought it can be stuffed in one line.
Leigh Hobson
@leighhobson89
Apr 11 2018 12:38
yeah minifier.org can help with that :D lol
image.png
:D :D :D :clap:
Markus Kiili
@Masd925
Apr 11 2018 12:41
@leighhobson89 Not really into one-liners, but that would not count because you have several expressions there.
Leigh Hobson
@leighhobson89
Apr 11 2018 12:42
da-dum-tschh! - quite good that one actually! :D
Leigh Hobson
@leighhobson89
Apr 11 2018 13:25
In my brain, which doesn't understand objects, the following code is designed to see if the VALUE of the property is the same in the two items being compared. Can someone tell me the correct syntax to do this? I know I can use hasOwnProperty to find out IF the property exists, but for my intents and purposes I know for sure it will, I just want to know if theres a way to loop through and find out basically IF the item in array 2 is already in array 1, thus: (wrong code incoming):
  for (i=0;i<arr2.length;i++) {
    var exist = updatedInventory.hasOwnProperty(arr2[i].description);
  }
by the the item, i mean the value of the common property, in this case 'description'.
var exist = updatedInventory.hasSameValueSomewhereInArrayAsTheFollowingPropertyInTheFollowingArray(arr2[i].description) would be another way to write what i want
Leigh Hobson
@leighhobson89
Apr 11 2018 13:33
its just to see if theres a way avoid writing a nested loop to compare each item
Nate Mallison
@NJM8
Apr 11 2018 14:27
@leighhobson89 are you checking if something exists in an array or object?
I think object as I reread. You can use Object.keys()
let myObj = {
  'one': 1,
  'two': 2,
  'three': 3
}

let myKeys = Object.keys(myObj);
console.log(myKeys);
// ['one', 'two', 'three']

console.log(myKeys.includes('one'));
// true
Moisés Man
@moigithub
Apr 11 2018 14:30
for in u can use
to iterate objects
Leigh Hobson
@leighhobson89
Apr 11 2018 14:31

for example if i have an object like this:

obj =[ {quantity: 8, description: loaves},{quantity: 19, description: eggs},{quantity: 12, description: bananas},{quantity: 6, description: apples} ]

and an array like this:

[ [2, "eggs"], [7, "plums"], [12, "apples"], [3, "pineapples"] ]

i effectively wanna check if the array description values are present in the properties of the object and if they are i will add the number to it, if not I will add the property, number and description, effectively merging them

thanks, would it be suitable for this?
console.log(obj) would then give:
obj =[ {quantity: 8, description: loaves},{quantity: 21, description: eggs},{quantity: 12, description: bananas},{quantity: 18, description: apples},{quantity: 7, description: plums},{quantity: 3, description: pineapples}  ]
Moisés Man
@moigithub
Apr 11 2018 14:35
CamperBot
@camperbot
Apr 11 2018 14:35
find method
nothing found
Moisés Man
@moigithub
Apr 11 2018 14:37
that would return the first element found... and since arrays elements are objects.. u can modify the "reference" of the value returned and it will update the array of Objects
ie:
eggs = obj.find( elem => elem.description === 'eggs' )
console.log( eggs.quantity );
eggs.quantity += 10;
console.log( eggs.quantity );
console.log ( obj );
Nate Mallison
@NJM8
Apr 11 2018 15:02
@leighhobson89 I would reduce it
you will see towards the end he does exactly what you are doing, turns an array of quantities and names to an object of names and quantities. Instead of starting the reduce with an empty object though you can start with your existing ebject
Jason Luboff
@JLuboff
Apr 11 2018 15:08
Morning
Charlie Taylor
@chazmcgrill
Apr 11 2018 15:09
think you want: “key” in obj
if (“key” in obj) { }
Prateek Gogia
@reeversedev
Apr 11 2018 15:19
Hey Guys! It's been long time since I've been here
Jason Luboff
@JLuboff
Apr 11 2018 15:19
Hello
Prateek Gogia
@reeversedev
Apr 11 2018 15:20
I wanted to discuss an idea for a project using complete javascript technologies
@JLuboff Hey man!
Jason Luboff
@JLuboff
Apr 11 2018 15:21
Discuss all you'd like, don't know if I'll have anything to contribute, but someone else might :D
Prateek Gogia
@reeversedev
Apr 11 2018 15:22
Sure. I was looking to build a social network for one of my projects.
I know Sockets would be used in that but I am unable to understand the logic behind notification stuff
Jason Luboff
@JLuboff
Apr 11 2018 15:23
Notifications in regards to I send a message to User B, and they get a notification they have a new message?
Prateek Gogia
@reeversedev
Apr 11 2018 15:24
I can easily manage the messages but handling friend request and stuff is quite complex
Like how do i achieve this thing? I am so curious to build this
Jason Luboff
@JLuboff
Apr 11 2018 15:26
Hmmm..Full disclosure, I have no experience with something of that magnitude.. But I would think you would want to work with your databse and when a request is sent, place it into your database and link it to both users (requester and requestee)
I agree that ultimately it will be quite complex
Prateek Gogia
@reeversedev
Apr 11 2018 15:27
@JLuboff What's your twitter man? Would love to connect and discuss further!
Jason Luboff
@JLuboff
Apr 11 2018 15:30
@reeversedev Don't have one (Well, I do, but I only created it for the pinterest app haha)
Prateek Gogia
@reeversedev
Apr 11 2018 15:32
Haha
No issues. Would connect you on Instagram then!
Jason Luboff
@JLuboff
Apr 11 2018 15:36
Generally don't give out that info, but it also probably wouldn't be too difficult to find me :joy:
Prateek Gogia
@reeversedev
Apr 11 2018 15:36
@JLuboff Your account is public. Just followed you. Lol.
Christopher McCormack
@cmccormack
Apr 11 2018 15:37
If only you had some kind of social networking app, you could use that to send @JLuboff a friend request @reeversedev !
Prateek Gogia
@reeversedev
Apr 11 2018 15:37
@cmccormack That's a clever comeback! Haha
Jason Luboff
@JLuboff
Apr 11 2018 15:39
@cmccormack Ya like that social networking app that stole all our data! (oh wait..all of them do that)
Christopher McCormack
@cmccormack
Apr 11 2018 15:40
To be fair, we gave them the data, but what they did with it is what's questionable
Prateek Gogia
@reeversedev
Apr 11 2018 15:40
Stealing data is actually a necessity for them. Ultimately data is being sold for some amount, otherwise how are they going to earn anything?
Christopher McCormack
@cmccormack
Apr 11 2018 15:42
I kinda question anyone that signed up that thought everything they did was only seen by them and who they might talk to. It's like standing in a large room full of people with a megaphone and believing only the person you're talking to can hear you
Christopher McCormack
@cmccormack
Apr 11 2018 15:47
Should be interesting to see what kind of legislation is passed in the wake of recent events
Leigh Hobson
@leighhobson89
Apr 11 2018 15:54
Thanks guys I was offline, I will read about your suggestions and give it another go! :) thanks @moigithub thanks @NJM8
CamperBot
@camperbot
Apr 11 2018 15:54
leighhobson89 sends brownie points to @moigithub and @njm8 :sparkles: :thumbsup: :sparkles:
:cookie: 395 | @njm8 |http://www.freecodecamp.org/njm8
:star2: 3740 | @moigithub |http://www.freecodecamp.org/moigithub
Jason Luboff
@JLuboff
Apr 11 2018 16:15
@cmccormack Thats always been my outlook...what've I post online, if someone is determined enough they'll access it. It's just the nature of it.
Christopher McCormack
@cmccormack
Apr 11 2018 16:19
yup. Thankfully my parents and grandparents are now on social media so my willingness to share dropped to about 0 anyway
:D
Jason Luboff
@JLuboff
Apr 11 2018 16:26
:joy:
I don't post a ton. More so on instagram and at this point its mainly just pictures/stories involving my son
Christopher McCormack
@cmccormack
Apr 11 2018 16:30
Your son wants privacy too man!
Jason Luboff
@JLuboff
Apr 11 2018 16:31
He doesn't know what he wants!
Christopher McCormack
@cmccormack
Apr 11 2018 16:33
Then he isn't able to consent!
:D
@JLuboff you almost done with that work app?
Jason Luboff
@JLuboff
Apr 11 2018 16:48
@cmccormack Psh... who needs consent? :P
Christopher McCormack
@cmccormack
Apr 11 2018 16:48
oh jeeze
Jason Luboff
@JLuboff
Apr 11 2018 16:48
And probably in the 60-70% complete area?
The front end is done for the most part and the general functionality. Need a few more queries.
Next I need to get all the emailing setup and then the cron job stuff
Christopher McCormack
@cmccormack
Apr 11 2018 17:03
@JLuboff that's great man keep at it
seems like a really fun project
Jason Luboff
@JLuboff
Apr 11 2018 17:05
At times lol
Sometimes its frustrating but its coming along
Christopher McCormack
@cmccormack
Apr 11 2018 17:07
yeah but it's a great bunch of work to add to your belt for later
Jason Luboff
@JLuboff
Apr 11 2018 17:09
Absolutely
Christopher McCormack
@cmccormack
Apr 11 2018 17:09
Then you can learn React with us :p
Jason Luboff
@JLuboff
Apr 11 2018 17:09
Yes, I would like to do that
Christopher McCormack
@cmccormack
Apr 11 2018 17:31
@JLuboff I've been working on a little app the past few days to go over some of the general concepts of React, adding comments and additional functionality as I think of it, maybe check it out over lunch :)
Brad
@bradtaniguchi
Apr 11 2018 17:38
@cmccormack Cool, Ill look into it as well (I was lurking), I always wanted to learn more about what react offers
Christopher McCormack
@cmccormack
Apr 11 2018 17:38
@bradtaniguchi awesome let me know what you think and if I can make anything more clear
Brad
@bradtaniguchi
Apr 11 2018 17:41
@cmccormack Care to enlighten me with {name} then the double {{backgroundColor: bgColor}}whats the idea behind using different number of {brackets?. Also Is it common practice to have stateless functions for each component? Instead of having the functions in the component itself (is that even a thing? too)
Christopher McCormack
@cmccormack
Apr 11 2018 17:43
Sure which {name} are you referring to?
In React, when you are assigning attributes (in JSX) you use the format attribute={someValue}
JSX is meant to look similar to HTML which is probably why it's so easy to work with
Jason Luboff
@JLuboff
Apr 11 2018 17:44
@cmccormack Cool, I'll take a look!
Christopher McCormack
@cmccormack
Apr 11 2018 17:44
@bradtaniguchi the double {{}} is simply passing an Object to the attribute
Nazar
@IsaakNazar
Apr 11 2018 17:45
@cmccormack hi Chris, can you pls check handleChange function, do I need to fix that?
codepen
Jason Luboff
@JLuboff
Apr 11 2018 17:45
Ugh... making a company Org chart in Visio is annoying
Brad
@bradtaniguchi
Apr 11 2018 17:45
@cmccormack Ah I understand now haha
Christopher McCormack
@cmccormack
Apr 11 2018 17:46
As for stateless functions I'm not sure I understand the question, but basically React doesn't have to do as much with stateless functions, so they're great for simple components, like what I used here to simply add a className to a div
const Title = ({ title }) => <div className="title">{title}</div>
When you want to use that it's as simple as rendering
<Title title="some title" />
Notice I didn't use { } for title, Strings don't need to be in curly braces
@IsaakNazar for which part specifically?
Nazar
@IsaakNazar
Apr 11 2018 17:50
@cmccormack when I click edit or add recipe the input form filled up with all recipe names, cant understand how to fix that
Christopher McCormack
@cmccormack
Apr 11 2018 17:55

Hmm it seems like that is intentional though... @IsaakNazar you are passing

const listOfTitle = this.state.recipes.map(recipe=>recipe.title);

to your modal:

val={listOfTitle}/>

then in your modal Render you are using val:

<input type="text" name="recipeName" placeholder="recipe name" value={this.props.val}
              onChange={this.props.handleChange}/>

as your value

jusgoose
@gusd773
Apr 11 2018 17:55
anyone here PHP fluent? I am getting an error when trying to "run all outstanding migrations" aka
blob
Christopher McCormack
@cmccormack
Apr 11 2018 17:56
@gusd773 I heard @JLuboff is :)
Ronique Ricketts
@RoniqueRicketts
Apr 11 2018 17:56
Screen Shot 2018-04-11 at 12.54.18 PM.png
jusgoose
@gusd773
Apr 11 2018 17:56
it's the last step to check if my laravel installation went smoothly but I keep getting this error when running "php artisan migrate" @jluboff
Ronique Ricketts
@RoniqueRicketts
Apr 11 2018 17:56
How do I make my component password protected?
jusgoose
@gusd773
Apr 11 2018 17:56
@cmccormack thanks
CamperBot
@camperbot
Apr 11 2018 17:56
gusd773 sends brownie points to @cmccormack :sparkles: :thumbsup: :sparkles:
:star2: 1408 | @cmccormack |http://www.freecodecamp.org/cmccormack
Ronique Ricketts
@RoniqueRicketts
Apr 11 2018 17:56
Hello ladies and gents
Christopher McCormack
@cmccormack
Apr 11 2018 17:57
@gusd773 did you google the error?
Nazar
@IsaakNazar
Apr 11 2018 17:57
@cmccormack when I click edit there should be only the name of the recipe which i clicked. Instead I got all list of recipe names
Christopher McCormack
@cmccormack
Apr 11 2018 17:57
@RoniqueRicketts do you want it actually secure or just "secure" for that user
Ronique Ricketts
@RoniqueRicketts
Apr 11 2018 17:57
@cmccormack secure it so that you have to log in to view the data on this route
Christopher McCormack
@cmccormack
Apr 11 2018 17:58
@RoniqueRicketts also be wary that without a Switch you may be rendering more than one exact match there
@RoniqueRicketts do you have a backend?
or a service?
Jason Luboff
@JLuboff
Apr 11 2018 17:58
@gusd773 You see, @cmccormack is just being a jerk :P I only know basic PHP aka only what I absolutely need to know and nothing more
jusgoose
@gusd773
Apr 11 2018 17:58
@cmccormack I didn't even know what to google I usually do
Ronique Ricketts
@RoniqueRicketts
Apr 11 2018 17:58
@cmccormack haven't build up the backend as yet
jusgoose
@gusd773
Apr 11 2018 17:59
@JLuboff I am trying to get to basic PHP but I am taking this course and that's the last step to check if my installation was done correctly but it isn't
Ronique Ricketts
@RoniqueRicketts
Apr 11 2018 18:00
@cmccormack So should I place the routes in a switch statements?
Jason Luboff
@JLuboff
Apr 11 2018 18:00
I'm sorry, I can't help. I've only installed PHP within IIS and WAMP
Christopher McCormack
@cmccormack
Apr 11 2018 18:02
@IsaakNazar you only have a single modal - you're populating the model fields with data from Recipe when Recipe renders your modal, but you aren't changing that data in your edit handler
@IsaakNazar you have several options - one is to generate a new modal when edit is clicked instead of using the existing modal
Another would be to fully populate the different fields in the modal on your edit handler
The former is probably safer
@RoniqueRicketts I would suggest it, but it depends on what you are trying to do
@RoniqueRicketts if you only want one of those to display then yes wrap in a Switch
Nazar
@IsaakNazar
Apr 11 2018 18:05
@cmccormack so the safer choice would be if I create modal for each Ingredient list, right?
Christopher McCormack
@cmccormack
Apr 11 2018 18:05
@RoniqueRicketts without some sort of authentication system login isn't going to be viable
@IsaakNazar That is a way to do it, yes
@IsaakNazar I would suggest you break down your app into smaller pieces as well, you don't want to have some giant components when you could break that out
@IsaakNazar I would suggest a little reading:
http://americanexpress.io/clean-code-dirty-code/ this was written by a colleague at my company and has some great suggestions,
https://reactjs.org/docs/thinking-in-react.html straight from the source and some great info
Nazar
@IsaakNazar
Apr 11 2018 18:07
@cmccormack yes , I'm going to split it into small ones when I finish the project,
@cmccormack thank you
CamperBot
@camperbot
Apr 11 2018 18:08
isaaknazar sends brownie points to @cmccormack :sparkles: :thumbsup: :sparkles:
:star2: 1409 | @cmccormack |http://www.freecodecamp.org/cmccormack
Christopher McCormack
@cmccormack
Apr 11 2018 18:08
@IsaakNazar np
@RoniqueRicketts What I did on my project was create a backend endpoint to check against for authorization - if that user was authenticated (they logged in, or just registered and were automatically logged in) their backend session (express-session) would list them as authorized, so I could just poll the backend from the frontend to see if that session is authorized or not
Christopher McCormack
@cmccormack
Apr 11 2018 18:18
@RoniqueRicketts then I created a component called PrivateRoute that wrapped a react router Route and forced that check each time a user tried to go to a page that requires auth
Ronique Ricketts
@RoniqueRicketts
Apr 11 2018 18:47
@cmccormack ok So I guess I will have to set up the backend services then abd hook up the autherntication
Christopher McCormack
@cmccormack
Apr 11 2018 18:48
yeah probably
There are online auth tools as well
Ronique Ricketts
@RoniqueRicketts
Apr 11 2018 19:10
@cmccormack thanks bruv. I will make up the backend
CamperBot
@camperbot
Apr 11 2018 19:10
roniquericketts sends brownie points to @cmccormack :sparkles: :thumbsup: :sparkles:
:star2: 1410 | @cmccormack |http://www.freecodecamp.org/cmccormack
Joseph
@revisualize
Apr 11 2018 19:16
Hey.
NikolaNbgd
@NikolaNbgd
Apr 11 2018 19:34
Hello guys, does anyone know how can I clear all these intervals? http://jsfiddle.net/W9YU5/243/ I want when all divs are shown, after 2s to start again
Ronique Ricketts
@RoniqueRicketts
Apr 11 2018 19:37
  • @NikolaNbgd save setinterval in a variable and whereever u want to clear it you can use clearInterval( NAME OF TIMER );

@RoniqueRicketts

second</div>
<div id="div2" style="visibility: hidden">Reveal Div 2 after 2 seconds</div>
<div id="div3" style="visibility: hidden">Reveal Div 3 after 3 seconds</div>
<div id="div4" style="visibility: hidden">Reveal Div 4 after 4 seconds</div>

<script type="text/javascript">
function showIt() {
  document.getElementById("div1").style.visibility = "visible";
}
var setTimerone = setTimeout("showIt()", 1000); // after 1 sec

function showIt2() {
  document.getElementById("div2").style.visibility = "visible";
}
var setTimerTwo = setTimeout("showIt2()", 2000); // after 2 secs

function showI3() {
  document.getElementById("div3").style.visibility = "visible";
}
setTimeout("showI3()", 3000); // after 3 sec
clearInterval(setTimerone);
clearIntercal(setTimerTwo );

example

NikolaNbgd
@NikolaNbgd
Apr 11 2018 19:43
@RoniqueRicketts nothing happens, divs aren't showing up
Ronique Ricketts
@RoniqueRicketts
Apr 11 2018 19:47
@NikolaNbgd well I didn't test the code lol you asked how to clear the interval hahaha
@NikolaNbgd try moving around the clearInterval
@NikolaNbgd try it like this
function showIt() { document.getElementById("div1").style.visibility = "visible"; clearInterval(setTime); } var setTime = setTimeout("showIt()", 1000);\
so you are clearing the interval inside the program.
NikolaNbgd
@NikolaNbgd
Apr 11 2018 19:58
@RoniqueRicketts but you clearInterval(setTime) does not do anything
Christopher McCormack
@cmccormack
Apr 11 2018 19:58
@NikolaNbgd setTimeout takes a callback as it's first argument, but you are invoking the function so it's going to be calling the setTimeout with "visible" I believe
NikolaNbgd
@NikolaNbgd
Apr 11 2018 20:00
@cmccormack yes, thats right, that is why divs arent hidden agan after they all are shown. could we figure out how to put all setTimeouts in one clearInterval function
Christopher McCormack
@cmccormack
Apr 11 2018 20:02
@NikolaNbgd probably easier to push all your intervals values into an array and when you want to clear all of them just iterate over the array and do something like clearInterval(item)
Whenever you find yourself making 3 of something that does basically the same thing, try to figure out how to just make a single version that you can reuse
Christopher McCormack
@cmccormack
Apr 11 2018 20:13
Or maybe use clearInterval.apply(null, [array of interval ids]) instead of a loop
NikolaNbgd
@NikolaNbgd
Apr 11 2018 20:16
@cmccormack I tried something like this
@cmccormack but it seems that something is not ok
Christopher McCormack
@cmccormack
Apr 11 2018 20:18
@NikolaNbgd what is this supposed to do?
var id = window.setTimeout(null,0);
    while (id--) 
    {
        window.clearTimeout(id);
    }
are you getting the latest interval ID from window?
I don't think you can call setTimeout with null, try an empty anon function instead
Easier to just iterate over your array you created though, don't over complicate it
NikolaNbgd
@NikolaNbgd
Apr 11 2018 20:22
@cmccormack http://jsfiddle.net/W9YU5/268/ I tried what you suggested
to clear timeouts
Christopher McCormack
@cmccormack
Apr 11 2018 20:23
I didn't say to make a weird while loop no sir
Jason Luboff
@JLuboff
Apr 11 2018 20:23
I didn't say to make a weird while loop no sir :joy:
NikolaNbgd
@NikolaNbgd
Apr 11 2018 20:24
@cmccormack hahaha, you got the point :D
Christopher McCormack
@cmccormack
Apr 11 2018 20:24
that won't even work though, first argument should be a callback function
and it's not a simple value either
NikolaNbgd
@NikolaNbgd
Apr 11 2018 20:25
can you edit the script?
Christopher McCormack
@cmccormack
Apr 11 2018 20:26
I will!
in fact, I'll do exactly what I suggested above :point_up: April 11, 2018 1:02 PM
function stopAllTimeouts()
{
    for (item in timeouts) {
      clearInterval(timeouts[item])
    }
}
oops
one sec bug in that
try that
NikolaNbgd
@NikolaNbgd
Apr 11 2018 20:31
first three divs are showing up, and then everything stops
Christopher McCormack
@cmccormack
Apr 11 2018 20:33
Not sure why I thought you could use apply on clearTimeout haha
@NikolaNbgd using the latest code above?
NikolaNbgd
@NikolaNbgd
Apr 11 2018 20:33
yes
run
you will see
Christopher McCormack
@cmccormack
Apr 11 2018 20:34
gotta call your function
NikolaNbgd
@NikolaNbgd
Apr 11 2018 20:34
then nothing is shown :D
Christopher McCormack
@cmccormack
Apr 11 2018 20:35
Wasn't that the goal?
NikolaNbgd
@NikolaNbgd
Apr 11 2018 20:35
noup
the goal is
each div should be shown in one second after all divs are shown, then after 2s they should returned to the starting position
and just to repeat showing
Christopher McCormack
@cmccormack
Apr 11 2018 20:38
If you are repeating work you'll need to use setInterval, which will invoke the callback every second argument milliseconds
jusgoose
@gusd773
Apr 11 2018 20:39
can anybody tell me why my list isn't centered ? not trying to make it in line yet just center it.
body{
    font-family: arial;
    padding: 0;
    margin: 0;
}
.hell{
    width: 100%;
    height: 100vh;
    float: left;
    background-color: #2e2e2e;
}

.heaven{
    max-width: 940px;
    margin: 0 auto;
    width: 100%;
    display: table;
    margin-top: 25vh;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Youtube Tutorial Uno</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="hell">
        <div class="heaven">
            <ul class="hover">
                <li>
                    <img src="hell.jpg" alt="fire as fuck">
                    <h2>Fuegoooool</h2>
                    <span class="h1"></span>
                    <span class="h2"></span>
                    <span class="h3"></span>
                </li>
                    <li>
                    <img src="earth.jpg" alt="dirty as fuck">
                    <h2>Actualy On Dirt</h2>
                    <span class="h1"></span>
                    <span class="h2"></span>
                    <span class="h3"></span>
                </li>
                    <li>
                    <img src="ice.jpg" alt="cold as fuck">
                    <h2>Ice Ice Baby</h2>
                    <span class="h1"></span>
                    <span class="h2"></span>
                    <span class="h3"></span>
                </li>                
            </ul>
        </div>    
    </div> 
</body>
</html>
blob
Christopher McCormack
@cmccormack
Apr 11 2018 20:41
@gusd773 you don't have any css centering it do you?
jusgoose
@gusd773
Apr 11 2018 20:42
@cmccormack shouldn't " margin: auto; / margin: 0 auto; " do that? In my heaven class
Christopher McCormack
@cmccormack
Apr 11 2018 20:43
ah didn't see it
can you pop this over in codepen or something? Much easier to help when you aren't just guessing
jusgoose
@gusd773
Apr 11 2018 20:46
@cmccormack I am rendering it via exlporer and it's aligned left
Christopher McCormack
@cmccormack
Apr 11 2018 20:47
look at my pen, I just updated it a bit
jusgoose
@gusd773
Apr 11 2018 20:47
blob
Christopher McCormack
@cmccormack
Apr 11 2018 20:47
I added some fun CSS that lets you see your different elements
jusgoose
@gusd773
Apr 11 2018 20:49
@cmccormack the pics aren't centered tho, thanks I appreciate it
CamperBot
@camperbot
Apr 11 2018 20:49
gusd773 sends brownie points to @cmccormack :sparkles: :thumbsup: :sparkles:
:star2: 1411 | @cmccormack |http://www.freecodecamp.org/cmccormack
Christopher McCormack
@cmccormack
Apr 11 2018 20:50
@gusd773 yeah man, I didn't fix it for you, just showing you what it looks like
from there you can work on centering it properly within the container
@gusd773 you could try
li {
  text-align: center;
}
jusgoose
@gusd773
Apr 11 2018 20:52
@cmccormack I'm only confused b/c somebody else did this code and had it centered without the text-align
Christopher McCormack
@cmccormack
Apr 11 2018 20:56
@gusd773 do you have their code?
lots of ways to center things
jusgoose
@gusd773
Apr 11 2018 20:57
@cmccormack nope but I saw their tutorial and typed it line by line I am just decyphering why mines won't do what his does
Christopher McCormack
@cmccormack
Apr 11 2018 21:10
hmm in my pen it's centered but not in your screen shot
Im wondering if there is a bug in your local code that you didn't copy over
Brad
@bradtaniguchi
Apr 11 2018 21:59
muhaha, I am finding the benefits usings tests so happy XD
Gjermund Wiggen
@Wiggen94
Apr 11 2018 23:13
Hello all, I need some help to understand why "arr1.every(v => v === arr2);" is always false? When arr1 have some equal values as arr2
Jason Luboff
@JLuboff
Apr 11 2018 23:14
@Wiggen94 becuase you're comparing a single element to an entire array
Gjermund Wiggen
@Wiggen94
Apr 11 2018 23:15
Oh okay, I see
Do you have any suggestion for a better way to do it?
Jason Luboff
@JLuboff
Apr 11 2018 23:15
Well... what are you trying to accomplish?
Gjermund Wiggen
@Wiggen94
Apr 11 2018 23:16
I'm trying to get true if an element in an array exists in an another array
Gulsvi
@gulsvi
Apr 11 2018 23:16
@Wiggen94 That code compares each item in arr1 to the entire arr2 array
Jason Luboff
@JLuboff
Apr 11 2018 23:16
@Wiggen94 perhaps you want to use indexOf to search for the element within the second array?
That would be one method
Gulsvi
@gulsvi
Apr 11 2018 23:16
So, if arr1 = [1,2,3]; and arr2 = [1,2,3], it's checking that 1 === [1,2,3]
Brad
@bradtaniguchi
Apr 11 2018 23:18
findor indexOf is the way to go.
Gjermund Wiggen
@Wiggen94
Apr 11 2018 23:18
so how would I use that without defining everything in the array
Jason Luboff
@JLuboff
Apr 11 2018 23:19
In your every you could use indexOf arr1.every(v => arr2.indexOf(v) >= 0)
Gulsvi
@gulsvi
Apr 11 2018 23:19
var arr1 = [1, 2, 3];
var arr2 = [1, 2, 3];

console.log(arr1.every((v, i) => v === arr2[i])); // true
console.log(arr1.every(v => v === arr2)) // false
Brad
@bradtaniguchi
Apr 11 2018 23:19
There's also includes
Jason Luboff
@JLuboff
Apr 11 2018 23:19
@gulsvi Hmm but that would only check the same index wouldn't it?
Gjermund Wiggen
@Wiggen94
Apr 11 2018 23:20
@JLuboff yeah that might work! I'll try it
Yeah, it worked like a charm! Thank you!
Jason Luboff
@JLuboff
Apr 11 2018 23:21
:+1:
Gulsvi
@gulsvi
Apr 11 2018 23:28
Thank you @JLuboff - do you know why it doesn't check the same index if I break it out into a function?
const ARR1 = [1, 2, 3]; 
const ARR2 = [1, 2, 3]; 

function compareElements(element, index) {
  console.log(index);
  return element === ARR2[index];
}

const ANSWER = ARR1.every(compareElements); 
console.log(ANSWER); // 0, 1, 2, true
CamperBot
@camperbot
Apr 11 2018 23:28
gulsvi sends brownie points to @jluboff :sparkles: :thumbsup: :sparkles:
:star2: 2397 | @jluboff |http://www.freecodecamp.org/jluboff
Gulsvi
@gulsvi
Apr 11 2018 23:32
That's one of those methods I hardly ever use... always using forEach, filter, map, reduce - need to keep practicing with the others to stay sharp
Jason Luboff
@JLuboff
Apr 11 2018 23:39
I don't think I've really used every either, i think it was introduced in ES6
But it's still checking the same index
Element 1 corresponds to index 0, element 2 corresponds to index 1, etc
So it doesn't cycle through the indeces of ARR2, so whenever you're checking the element at index 1, you're also only checking index 1 of ARR2
Brad
@bradtaniguchi
Apr 11 2018 23:47
every has its time and place, its handy if your doing manual validation in some cases
There's also the ghetto usage of every as a forEach with a "break"
const arr = [1, 2, 3, 4, 5, 6 , 7,  8, 9]
arr.every((el) => {
  if (el > 5) {
    return false; // ghetto break 
  }
  console.log(el);
  return true;
});