These are chat archives for FreeCodeCamp/HelpFrontEnd

1st
Jun 2018
TonyRednil
@TonyRednil
Jun 01 2018 00:21
@gulsvi Here's my code. Sorry I was afk
https://codepen.io/TonyRednil/pen/NMByMV?editors=0010
lcassettai
@lcassettai
Jun 01 2018 00:52
@TonyRednil so what’s your question about?
James
@jamesjk92_gitlab
Jun 01 2018 00:52
<!DOCTYPE html>
<html>
  <title>The best page ever</title>

  <h1>The best page ever</h1>
  <p>Cat ipsum dolor sit amet, jump launch to pounce upon little yarn mouse, bare fangs at toy run hide in litter box until treats are fed. Go into a room to decide you didn't want to be in there anyway. I like big cats and i can not lie kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Meow i could pee on this if i had the energy for slap owner's face at 5am until human fills food dish yet scamper. Knock dish off table head butt cant eat out of my own dish scratch the furniture. Make meme, make cute face. Sleep in the bathroom sink chase laser but pee in the shoe. Paw at your fat belly licks your face and eat grass, throw it back up kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
my head element needs to wrap around the title element, any help?
abraham anak agung
@padunk
Jun 01 2018 00:54
@jamesjk92_gitlab
<html>
  <head>
    <title></title>
  </head>
  <body>
    // your content goes here
  </body>
</html>
TonyRednil
@TonyRednil
Jun 01 2018 00:55

@lcassettai Why when I use

document.getElementById("button").innerHTML="to Farenheit";

It does nothing but when I use

$("#button").html("to Fahrenheit");

It works, cause aren't they the same thing. Just one is in jQuery and the other Javascript?

abraham anak agung
@padunk
Jun 01 2018 00:55
just wrap your title around head element
James
@jamesjk92_gitlab
Jun 01 2018 00:56
thanks @padunk
abraham anak agung
@padunk
Jun 01 2018 00:58
@TonyRednil it work, just change the string name and you'll see it worked
Brad
@bradtaniguchi
Jun 01 2018 00:59
Damn just had to deal with filtering in place, great interview question haha
TonyRednil
@TonyRednil
Jun 01 2018 00:59
@padunk What do you mean change the string name?
Jefferson Oliveira
@jefferson2z
Jun 01 2018 00:59

hey guys! I'm facing a bug on the webpage after it was updated, I wanted to check here if anyone faces it, and wether I should or not report the bug

When I submit a passing challenge, and the page opens, if I click in curriculum the pages gets blank. After I refresh the page and click it again it works

abraham anak agung
@padunk
Jun 01 2018 01:01
@TonyRednil you have this $("#button").html("to Fahrenheit"); as a start and this when you click the button document.getElementById("button").innerHTML="to Fahrenheit"; so you can't see the difference.
change it like document.getElementById("button").innerHTML="to Celsius";
@bradtaniguchi what was the question ? curious :smile:
Brad
@bradtaniguchi
Jun 01 2018 01:05

Here's the question, filter an array, without changing the reference to the original array. Heres a test case:

const arr = [2, 4, 7, 5,8,9];
filterEvensInPlace(arr); 
expect(arr).toEqual([2,4,7,8]);

Since its more about filtering you can use this code to "do the logic" of what to filter or not.
5 % 2 === 0 where 5 can be the number, this expression returns true for evens :)

TonyRednil
@TonyRednil
Jun 01 2018 01:05
@padunk You lost me. My problem is that when I use document.getElementById("button").innerHTML="to Fahrenheit"; in line ten it does nothing. But when I put $("#button").html("to Fahrenheit"); in line ten it changes the label on the button to "to Fahrenheit" like I want. That's what I don't understand.
abraham anak agung
@padunk
Jun 01 2018 01:06
@TonyRednil idk, try to close your tab and reopen it? it worked here :smile:
TonyRednil
@TonyRednil
Jun 01 2018 01:08
@padunk And wouldn't you know it now it's working.... I swear sometimes computers just wanna make me look like an idiot...
abraham anak agung
@padunk
Jun 01 2018 01:09
@bradtaniguchi you you have to filter based on index and element's value?
Brad
@bradtaniguchi
Jun 01 2018 01:10
Uh you just need to remove the odd numbers from the array, WITHOUT changing the reference to the original array (the function doesn't return anything)
Aditya
@ezioda004
Jun 01 2018 01:29
@bradtaniguchi So basically just modify the parameter of the function? Since objects are passed by reference, the parameter will point to same array in memory and therefore you'll be modifying the original array.
Brad
@bradtaniguchi
Jun 01 2018 01:30
yes, so how do you "filter" through values in the same array? I ran into this problem an hour or so ago and found it pretty interesting (the solution I found is pretty trippy too)
ehutchllew
@ehutchllew
Jun 01 2018 01:31
@bradtaniguchi What do you mean by in the same array?:
Brad
@bradtaniguchi
Jun 01 2018 01:32
You can't do this for example:
function filterEvensInPlace(arr) {
   return arr.filter((num) => num % 2 === 0);
}
Since its not "in place" or its not the same arr reference that is returned
Aditya
@ezioda004
Jun 01 2018 01:34
@bradtaniguchi Basically loop through the array, find the match, remove it, and so on.
Brad
@bradtaniguchi
Jun 01 2018 01:35
sooooo whats the code to do as such?
The issue is if your removing items in the array, the loop might trip up since the length of the array changes
Aditya
@ezioda004
Jun 01 2018 01:49
@bradtaniguchi Something like this?
function filterEvensInPlace(arr){
    let filterCount = 0;
    for (let i = 0; i < arr.length; i++){
        if (arr[i] === 5 || arr[i] === 9){
            filterCount++;
            for (let j = i; j < arr.length; j++){
                arr[j] = arr[j+1];
            }    
        }
    }

    for (let j = 0; j < filterCount; j++){
        arr.pop();
    }
    return arr;
}
I didnt understand the condition though, so I used placeholder condition to get the output. Not sure if helper methods are allowed but if they were you can also use .splice() since it mutates the array.
Brad
@bradtaniguchi
Jun 01 2018 01:59
The function is to just remove odd numbers from an array in place
Aditya
@ezioda004
Jun 01 2018 02:01
Oh, but your example didnt remove 7 so I thought there was something else.
In that case you can simply do if (arr[i] % 2 !== 0)
James
@jamesjk92_gitlab
Jun 01 2018 02:07
<style>
  h4 {
    text-align: center;
    height: 25px;
  }
  p {
    text-align: justify;
  }
  .links {
    text-align: left;
    color: black;
  }
  .fullCard {
    width: 245px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin: 10px 5px;
    padding: 4px;
  }
  .cardContent {
    padding: 10px;
  }
  .cardText {
    margin-bottom: 30px;
  }
</style>
<div class="fullCard">
  <div class="cardContent">
    <div class="cardText">
      <h4>Google</h4>
      <p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>
    </div>
    <div class="cardLinks">
      <a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
      <a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
    </div>
  </div>
</div>
strong tag should wrap around the words "Stanford University".
any help?
mstellaluna
@mstellaluna
Jun 01 2018 02:09
@jamesjk92_gitlab <strong> </strong> tags need to go around Standford University
Brad
@bradtaniguchi
Jun 01 2018 02:11
@ezioda004 Yea I musta forgot to remove that one haha
Aditya
@ezioda004
Jun 01 2018 02:14
@bradtaniguchi Yeah lol, Whats the solution you found?
James
@jamesjk92_gitlab
Jun 01 2018 02:15
<p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at  </strong> Stanford University </strong>  .</p>
didnt work @mstellaluna
Dhaval Vira
@dhavalveera
Jun 01 2018 02:15
<strong> </strong>
this is the correct keyword
<p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at <strong> Stanford University </strong> .</p>
@jamesjk92_gitlab
it will be like this
you have typed incorrect way
<p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at </strong> Stanford University </strong> .</p>
this is Correct on
James
@jamesjk92_gitlab
Jun 01 2018 02:17
thanks @dhavalveera
Dhaval Vira
@dhavalveera
Jun 01 2018 02:17
your welcome
James
@jamesjk92_gitlab
Jun 01 2018 02:27
<style>
  h4 {

    padding: 10px;
    text-align: center;



  }
  p {
    text-align: justify;
  }
  .links {
    text-align: left;
    color: black;
  }
  .fullCard {
    width: 245px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin: 10px 5px;
    padding: 4px;
  }
  .cardContent {
    padding: 10px;
  }
  .cardText {
    margin-bottom: 30px;
  }
</style>
<div class="fullCard">
  <div class="cardContent">
    <div class="cardText">
      <h4>Alphabet</h4>
      <hr>
      <em><p>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</p></em>
    </div>
    <div class="cardLinks">
      <a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
      <a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
    </div>
  </div>
</div>
Your code should add a background-color property to the h4 element set to rgba(45, 45, 45, 0.1).
any help?
i got it
Dhaval Vira
@dhavalveera
Jun 01 2018 02:47
what is your query exactly
@jamesjk92_gitlab
abraham anak agung
@padunk
Jun 01 2018 02:57
@bradtaniguchi interesting question, i found the answer is kind of trippy too :smile:
zootechdrum
@zootechdrum
Jun 01 2018 03:18
what is up everyone
am i on the right track with cash in register challenge
    function checkCashRegister(price, cash, cid) {
var cashAvailable = 0;
var changeOwed = cash-price;
var change = {
    'One-Hundred':100,
    'Twenty':20,
    'Ten':10,
     'Five':5,
     'Dollar':1,
     'Quarter':0.25,
     'Dime':0.1,
     'Nickel':0.05,
     'penny':0.01
}

var noFunds = {
    status:"INSUFFICIENT_FUNDS",
    change: []
    };


var closed = {
    status:"CLOSED",
    change:cid
    };


var flatt = cid.reduce(
    function(acc, curr){
    return acc.concat(curr);
    })

for(var i = 0; i<flatt.length; i++){
    if(typeof flatt[i] === "number"){
        cashAvailable += flatt[i];
    }
}
cashAvailable = Math.round(100*cashAvailable)/100

    if(cashAvailable < changeOwed){
    return noFunds;
        }else if(cashAvailable === changeOwed){
        return closed;
        }
for(const prop in change){
        console.log(`${prop}`);
    }
}
checkCashRegister(19.5, 20, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]]);
abraham anak agung
@padunk
Jun 01 2018 03:48
@zootechdrum you can use var cashAvailable = cid.reduce(...) so no need for flatt.
Depends on your logic in for-in loops, i think you are ok
zootechdrum
@zootechdrum
Jun 01 2018 03:57
@padunk thanks man
Rajat
@rajataudichya
Jun 01 2018 06:37
Hey there everyone , I am facing an issue with the new layout , even if I complete a challenge its not showing as done in the curriculum
markclynch
@markclynch
Jun 01 2018 06:46
Anyone help me with React and Javascript, I can't figure out how to put functions into react.
lol, I mean I'm doing this all on vsCode but it's not working out.
Aditya
@ezioda004
Jun 01 2018 06:59
@markclynch What do you mean by "how to put functions into react"?
abraham anak agung
@padunk
Jun 01 2018 07:02
@markclynch you mean stateless component ?
function Greenhouse () {
  \\ do something
}
you don't have to export default in codepen
Jefferson
@jeffersonnnn
Jun 01 2018 08:56
hi guys, can i ask a quick question.
Dhaval Vira
@dhavalveera
Jun 01 2018 09:30
Yeah Sure @jeffersonnnn
Jefferson
@jeffersonnnn
Jun 01 2018 09:48

So here goes: i am using jquery to take information (a list of contacts) from an api and present them in a format readable by the user but i can't get it to show. Now i know that i am already targeting an id, but i inherited this codebase and i am looking to tweak it. What can i do to get this to work. Here is the jQuery

$('#mnu_contact').on('click', function () {
    curSelPage = "contacts";
    $('#nav_title').text('Contacts');
    showMainMenu(false);
    $.get( SERVER_URL+'/contacts.json', function(r_data) {
        var contacts = r_data;
        for (i in contacts) {
           $('#ul_sub_menu').append('<li><a href="#" class="item-link" onclick="selContact('+contacts[i]['id']+')"><div class="item-content">'+contacts[i]['name']+'</div></a></li>');
        } 
    });

and herer is the html table i am trying to get my output on

<div class="page" data-page="page-contact">
    <div class="page-content">
        <div style="text-align: right;padding:20px;">
            <a href="#" onclick="onClickContactEdit({{contact['id']})">Edit</a>  &nbsp;
            <a href="#" onclick="onDeleteContact({{contact['id']})">Delete</a>                  
        </div>
        <div>
            <div class="row center"><h2>{{contact['name']}}</h2></div>
            <div class="center">{{contact['company']}}</div>
            <div class="">Phones</div>
            <div class="">{{contact['phones']}}</div>
            <div class="">Emails</div>
            <div class="">{{contact['emails']}}</div>
            <div class="">Addresses</div>
            <div class="">{{contact['physical_addresses']}}</div>
        </div>
Aita Kane
@aita-kane
Jun 01 2018 11:28
hello who knows an onlide code editor like sublime text but online where you can create folders and code and if you share the link they can see your work ?
Ashwin
@ashwins93
Jun 01 2018 11:47
@aita-kane try https://codeanywhere.com/
abraham anak agung
@padunk
Jun 01 2018 12:07
@aita-kane
If u using react try codesandbox.io or general language try cloud 9.
Aita Kane
@aita-kane
Jun 01 2018 12:55
@ashwins93 @padunk thanks
KingKongg
@KingKongg
Jun 01 2018 14:05
Hi , can anyone help me with my random quote generator. Whenever i press the Get Quote button, I am able to see the randomization of the quotes visibly. How do i correct it?
alpox
@alpox
Jun 01 2018 14:18
@KingKongg You don't see the randomization visibly, but you see as many quotes rolling through as you clicked on the Get Quote button :D
You register a new click event to the button everytime you click on the button - and they get stacked
so when you click on the button 2 times, you registered 2 event handlers - which means that getQuote gets called 2 times when you press the button a third time
Just take out the click event registration from the getQuote function
KingKongg
@KingKongg
Jun 01 2018 14:36
@alpox Hi, Thank you very much! I went to do a search and I tried this method.
$("#quoteButton").off("click").on("click",function(){
getQuote();
});
@alpox It works but may I know what you mean by removing the click event registration?
alpox
@alpox
Jun 01 2018 14:37
@KingKongg That works too but it would be easier to just take it outside of the function
So you do the click event registration only once

That means taking this code:

$("#quoteButton").on("click",function(){
      getQuote();
      });

And put it outside of the function getQuote

Instead of inside
KingKongg
@KingKongg
Jun 01 2018 14:39
@alpox Sorry for the trouble. You mean converting it to this?
$("#quoteButton").click(function(){
getQuote();
});
alpox
@alpox
Jun 01 2018 14:39
It doesn't matter if you use .click or .on("click" they both do the same
What i am trying to tell you is that you should move that code to another place
such that it is not inside of:
function getQuote() {
...
}
KingKongg
@KingKongg
Jun 01 2018 14:45
@alpox Thank you! I get what you mean.
alpox
@alpox
Jun 01 2018 14:47
@KingKongg You can now also remove the .off("click") ;)
Aita Kane
@aita-kane
Jun 01 2018 15:04

Hello everybody. I coded a MVC from scratch but nothing appears when i go to localhost/globe/. when I reload the page
What i want to have is that:

  • First of all it checks if the Session::set('logged_in', true); if true redirect to Home.php
  • else make the login page appear

I add two .htaccess files and I use a frontcontroller.

I also post a picture so you can see my GLOBE folder structure
ANd thanks for taking your time to help me.

Here is a link so you can see my folder structure:

https://drive.google.com/drive/folders/1JYvO8wK4nXePy48pg7FovGGinZ2IC5Nd?usp=sharing

PS: I'm a beginner in PHP.

DMCooper
@SilentGamelan
Jun 01 2018 15:06
Hello! Just posted in another room, but realised it might be more appropriate in here.
Can anyone tell me if I need to chain .filter() and .map() together to get this work correctly, at the moment filter appears to be ignoring the change I want to make to the returned value:
const squaredIntegers = arr.filter(num => {
    if(num > 0 && (num % 1 === 0)) {
      return num * num;
    }
KingKongg
@KingKongg
Jun 01 2018 15:25
@alpox Okay! Thank you very much!
DMCooper
@SilentGamelan
Jun 01 2018 15:26

in case it helps anyone, I figured it out:
.filter() only returns the original array value or not, based on the condition you set.
.map() will iterate through your array and allow you to return altered values

so to do both you have to do something like
arr.filter( x => conditions_go_here).map(x => alterations_go_here)

abraham anak agung
@padunk
Jun 01 2018 15:27
@SilentGamelan filter and map both will return new array, so the original array is not mutate.
DMCooper
@SilentGamelan
Jun 01 2018 15:37
@padunk Thanks for clarifying
Gulsvi
@gulsvi
Jun 01 2018 16:44
@SilentGamelan This is a good read on those higher order functions: https://medium.freecodecamp.org/higher-order-functions-in-javascript-d9101f9cf528
DMCooper
@SilentGamelan
Jun 01 2018 16:44
ah sweet, cheers @gulsvi
Gulsvi
@gulsvi
Jun 01 2018 16:45
Helps to see them as for loops to get an idea of what they do - at least it helped me figure them out
DMCooper
@SilentGamelan
Jun 01 2018 16:56
:+1:
Brad
@bradtaniguchi
Jun 01 2018 17:41

@ezioda004 @padunk Totally late, but heres the solution for an inplace filter

arr.splice(0, arr.length, ...arr.filter(num=> num % 2 === 0));

Basically they used splice to select the first index (0) to the length of the array (arr.length) to remove, then replace those indexes with the filtered array values, (using the spread operator and filter) pretty smart haha. I have 0 idea what sort of performance this is getting tho haha

Gulsvi
@gulsvi
Jun 01 2018 17:44
You could also do:
arr.forEach((num, i) => arr[i] % 2 && arr.splice(i, 1));
Brad
@bradtaniguchi
Jun 01 2018 17:46
@gulsvi Does that always work tho when you start removing stuff?
Gulsvi
@gulsvi
Jun 01 2018 17:47
@bradtaniguchi It should
Not sure where it would fail - as long as we only have integers in the array
Brad
@bradtaniguchi
Jun 01 2018 17:47
@gulsvi Removing items in the forEach loop wont trip it up?
Gulsvi
@gulsvi
Jun 01 2018 17:48
Ahhh good point, it definitely would with a for loop
For Each, apparently not
Brad
@bradtaniguchi
Jun 01 2018 17:48
>.> what is this magic
Steve Warren
@interactivenyc
Jun 01 2018 17:54
Hey folks - I'm looking at the FCC project Build A Drum Machine. Is anyone familiar with that one?
Gulsvi
@gulsvi
Jun 01 2018 17:54
I built one a while back, from the javascript30 series, not the FCC version. Maybe I can help though
@bradtaniguchi Not sure what the magic is, but there are some other alternatives listed here including the example you gave above: https://stackoverflow.com/questions/37318808/what-is-the-in-place-alternative-to-array-prototype-filter
Steve Warren
@interactivenyc
Jun 01 2018 17:55
I was just wondering - the example completed project they show on codepen is super slow, and not very satisfying... Did your project turn out more responsive than that?
Gulsvi
@gulsvi
Jun 01 2018 17:56
@interactivenyc If the one you're referring to is this one, it doesn't lag for me at all: https://codepen.io/freeCodeCamp/pen/MJyNMd
Brad
@bradtaniguchi
Jun 01 2018 17:56
@interactivenyc That's the exact SO post I ran into, all the solutions are rather verbose compared to the one I picked. Its a very small use case (under 10 items) so performance doesn't matter, and a 1 line solution is pretty good :D
Steve Warren
@interactivenyc
Jun 01 2018 17:58
Actually, I was running it in Safari where it lags a lot. I just tried it in Chrome and it's WAY better!
Brad
@bradtaniguchi
Jun 01 2018 18:15
Darn my new ram and old ram weren't compatible :/ guess Ill have to buy more new ram then haha
Kaz Baig
@kbaig
Jun 01 2018 18:16
@bradtaniguchi usually just want to buy the same 2x bundle as before
Brad
@bradtaniguchi
Jun 01 2018 18:16
Yea but I was cheap, with just the new ram I'm at 16gb which was double of what I had before so I can live ;P
Kaz Baig
@kbaig
Jun 01 2018 18:16
It's pretty annoying to find compatible sticks otherwise
markclynch
@markclynch
Jun 01 2018 18:17
@ezioda004 Sorry, fell asleep :) If your still awake, I'm getting so lost in React
Kaz Baig
@kbaig
Jun 01 2018 18:17
@markclynch feel free to ask if you need help with something specific :)
markclynch
@markclynch
Jun 01 2018 18:19
@kbaig I'm trying to figure out where to place function calls. I have just 2 components right now. Main App.js and Greenhouse.js
Kaz Baig
@kbaig
Jun 01 2018 18:19
post code?
but that's not really great
I'm doing it in vsCode
DMCooper
@SilentGamelan
Jun 01 2018 18:20
@bradtaniguchi @gulsvi Cheers for those in-place filtering ideas, although it appears to be breaking my mind understanding them ahah. I'll have to look at them again when I'm more together
markclynch
@markclynch
Jun 01 2018 18:20
so I have an App.js, Greenhouse.js file for components
can't figure out exactly how to smush them together in codepen
@kbaig I tried to put a function called doSomething just as a test but it wasn't working.
Brad
@bradtaniguchi
Jun 01 2018 18:22
@SilentGamelan The key is understanding how the splice function works, the spread operator and obviously how the normal filter method on arrays works
Definantly deepend my unsterstanding of splice, since I usually just use it like this:
arr.splice(indexOfItemToRemove, 1)
Kaz Baig
@kbaig
Jun 01 2018 18:22
@markclynch you mean here?
export default ({ id, name, temp, humidity, light, soil, doSomething }) => (
  <div className="greenhouse" onClick={this.doSomething}>
    <div className="wrapper">
      <button className="btn name">{name}</button>
      <button className="btn temp">Temp: {temp}</button>
      <button className="btn humidity">Hum: {humidity}</button>
      <button className="btn light">Light: {light}</button>
      <button className="btn soil">Moisture: {soil}</button>
    </div>
  </div>
);
markclynch
@markclynch
Jun 01 2018 18:23
Yeah, that's in it's own file called Greenhouse.js
import React, { Component } from 'react'; at top
Brad
@bradtaniguchi
Jun 01 2018 18:23
I'm not going to lie, after spending like months wrapping my head around observables, I see the freaken light with these things. So powerful XD
DMCooper
@SilentGamelan
Jun 01 2018 18:24
@bradtaniguchi righto - just done the spread operator, so I'll have to set aside some time to play around with .splice and .filter properly!
markclynch
@markclynch
Jun 01 2018 18:24
I mean the 6 dummy greenhouses are loading from my map iterator in the main App.js render
Brad
@bradtaniguchi
Jun 01 2018 18:25
@SilentGamelan filter/reduce/find/map/forEach are all very powerful, I'd use them for most use cases, and I use splice to remove stuff from arrays haha
markclynch
@markclynch
Jun 01 2018 18:25
image.png
@kbaig That's what output looks like, after some simple css. But I can't get any functions to work. Trying just to get some console.log stuff out.
Kaz Baig
@kbaig
Jun 01 2018 18:27
@markclynch you're not passing the Greenhouses a property called doSomething
render() {
    const { elements } = this.state;
    return (
      <div className="App">
        {elements.map(element => (
          <Greenhouse
            key={element.id}
            name={element.name}
            temp={element.temp}
            humidity={element.humidity}
            light={element.light}
            soil={element.soil}
          />
        ))}
      </div>
    );
  }
markclynch
@markclynch
Jun 01 2018 18:28
oh, that needs to be there as well!
doSomething={element.doSomething}
so like that?
Kaz Baig
@kbaig
Jun 01 2018 18:29
yeah since in your arrow function you declared that the prop would be called doSomething
markclynch
@markclynch
Jun 01 2018 18:30
ok, still not working though.
What else is wrong? Do I need a prob binder?
(not sure if that's the word.
Kaz Baig
@kbaig
Jun 01 2018 18:31
Does each element have a property called doSomething
markclynch
@markclynch
Jun 01 2018 18:31
this.doSomething = this.doSomething.bind(this);
No there's no prop for that
this.state = {
      elements: [{
        id: 1,
        name: 'Greenhouse-1',
        temp: 78,
        humidity: 50,
        light: 4,
        soil: 30
      },
Kaz Baig
@kbaig
Jun 01 2018 18:31
So you're just passing undefined as the doSomething property to each Greenhouse
markclynch
@markclynch
Jun 01 2018 18:32
But I really need the state to have that also?
Kaz Baig
@kbaig
Jun 01 2018 18:32
Not enough info here to know what to do
What does this function do?
markclynch
@markclynch
Jun 01 2018 18:32
lol, sorry
Kaz Baig
@kbaig
Jun 01 2018 18:32
Is it the exact same function to be called by any Greenhouse?
markclynch
@markclynch
Jun 01 2018 18:32
I literally just want it to do something.
yeah, I want it to just console.log something
Kaz Baig
@kbaig
Jun 01 2018 18:33
give your App a method
and then pass each Greenhouse doSomething={ this.method }
markclynch
@markclynch
Jun 01 2018 18:34
Hmmm
So I set that up inside the render() or it needs to be in Greenhouse.js and App.js render()?
Kaz Baig
@kbaig
Jun 01 2018 18:35
It should probably be a method belonging to Greenhouse
markclynch
@markclynch
Jun 01 2018 18:36
onClick={this.doSomething}>
Kaz Baig
@kbaig
Jun 01 2018 18:36
unless it is meant to handle something up the component tree
markclynch
@markclynch
Jun 01 2018 18:36
isn't that sufficient?
Kaz Baig
@kbaig
Jun 01 2018 18:36
this in the context of an arrow function refers to the outer scope
arrow functions don't have their own context
markclynch
@markclynch
Jun 01 2018 18:36
OH!
See I'm just learning ES6 along with React
Kaz Baig
@kbaig
Jun 01 2018 18:37
Which is why you need to bind arrow function properties of classes
markclynch
@markclynch
Jun 01 2018 18:37
understood
But still not sure how to process that information into a solution
:)
I may be out of my league here
Kaz Baig
@kbaig
Jun 01 2018 18:38
Perhaps it would be easier to help if you made a functioning pen
And then explained exactly what you want to do with this function
markclynch
@markclynch
Jun 01 2018 18:38
but I've been tasked with writing and iterating 80 lines of code in React for a technical interview for an internship
buiphuking
@buiphuking
Jun 01 2018 18:39
hi guys, can i ask something
i want to create a small database in a web and connect it with javacript, how can i do that?
markclynch
@markclynch
Jun 01 2018 18:39
I think the problem in Codepen is everything I've learned I've learned by components being in smaller files.
help me
markclynch
@markclynch
Jun 01 2018 18:40
@kbaig I don't even know how react would work inside Codepen. How to structure everything
I'm using create-react-app now
Kaz Baig
@kbaig
Jun 01 2018 18:41
@markclynch You don't need to move the whole project, just a minimum working example of what you have
So we know what you're trying exactly so we can fix it
markclynch
@markclynch
Jun 01 2018 18:42
Okay, I'll try
Kaz Baig
@kbaig
Jun 01 2018 18:42
on codepen, you have to imagine that at the top, there's import React from 'react'; and import ReactDOM from 'react-dom';
So you need to rework Component to React.component etc
markclynch
@markclynch
Jun 01 2018 18:44
So how do I setup the HTML file, since I'll be missing my index.js file which links to the index.html 'root' as this
```
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
and like this
class App extends React.component {
  constructor(props) {
    super(props);
Kaz Baig
@kbaig
Jun 01 2018 18:46
just copy-paste the ReactDOM.render call to the bottom of your JS and your HTML file literally just needs to be <div id="root"></div>
and then in your JS, copy-paste the two components
(assuming there is nothing else going on here)
ok so that's me doing I think what you asked. But my Greenhouse arrow function isn't rendering anything to screen
Gulsvi
@gulsvi
Jun 01 2018 18:49
@bradtaniguchi You're right, don't do that .forEach lol, the only magic was that all the input arrays I used were immune to the splicing issue lol
for (let i = arr.length - 1; i >= 0; i--) arr[i] % 2 && arr.splice(i, 1);
That works better ^^
markclynch
@markclynch
Jun 01 2018 18:51
@kbaig Thanks by the way, you're taking a lot of time with my simple questions.
Kaz Baig
@kbaig
Jun 01 2018 18:53
@markclynch More like this
@markclynch np that's what we're here for
markclynch
@markclynch
Jun 01 2018 18:54
@kbaig Okay, so you basically refactored the arrow function to a constructor function for greenhouse
Was the arrow function unnecessary? Serving no purpose?
See the Greenhouse component now
And then try clicking on a Greenhouse
@markclynch If you don't need state or lifecycle hooks, you should use stateless functional components (arrow function components)
If you need either, use classes
markclynch
@markclynch
Jun 01 2018 18:56
Ah
So after watching me flounder do you think I'm in over my head?
Kaz Baig
@kbaig
Jun 01 2018 18:57
I think you need to learn ES6 first
ES6 at a minimum
Let alone 7/8/9
markclynch
@markclynch
Jun 01 2018 18:57
My project plan is to develop a User Interface for a farm of greenhouses
that shows Graphically those buttons of information, can expand to each individual greenhouse.
Kaz Baig
@kbaig
Jun 01 2018 18:58
React seems intimidating mostly because writing it cleanly relies on ES6 features
markclynch
@markclynch
Jun 01 2018 18:58
@kbaig What's the best way to get caught up on ES6?
Kaz Baig
@kbaig
Jun 01 2018 18:58
Have you done the ES6 section here?
markclynch
@markclynch
Jun 01 2018 18:58
It wasn't available when I did the classes previously
Kaz Baig
@kbaig
Jun 01 2018 18:59
Check it out
markclynch
@markclynch
Jun 01 2018 18:59
Okay. So basically my JS isn't up to the task of tackling react lol :)
that's so bad
Kaz Baig
@kbaig
Jun 01 2018 18:59
Not bad, just not suuuper up to date
markclynch
@markclynch
Jun 01 2018 18:59
I was once a formidable C++ programmer in 1999 :) haha. Never used it
Just started learning JS but old JS, now so confusing to update JS to ES6
Kaz Baig
@kbaig
Jun 01 2018 19:00
It's best to not think of ES6 as something separate from JS
Or 'on top of' JS
markclynch
@markclynch
Jun 01 2018 19:01
How long do you imagine it should take someone to get through the ES6 program.
there's 7/8/9 already?!?!?
damnit
Kaz Baig
@kbaig
Jun 01 2018 19:01
ES6 -> 2015
markclynch
@markclynch
Jun 01 2018 19:01
I know
Kaz Baig
@kbaig
Jun 01 2018 19:01
One update every summer since
markclynch
@markclynch
Jun 01 2018 19:01
but 7/8/9 isn't huge updates correct?
the ES6 was massive though correct?
Kaz Baig
@kbaig
Jun 01 2018 19:01
They're smaller but pretty impactful
markclynch
@markclynch
Jun 01 2018 19:02
So think of these new ES#'s as better ways of implementing js?
not new languages
Kaz Baig
@kbaig
Jun 01 2018 19:02
It's all JS
markclynch
@markclynch
Jun 01 2018 19:02
I know
Kaz Baig
@kbaig
Jun 01 2018 19:02
It's just adding convenience features
markclynch
@markclynch
Jun 01 2018 19:02
hasn't been that convenient for me !!!
Kaz Baig
@kbaig
Jun 01 2018 19:02
Once it clicks, it's much more satisfying to write JS
Brad
@bradtaniguchi
Jun 01 2018 19:03
@gulsvi Looks better, but reminds me of C like code shudders
I mean thats the issue with JS, its evolves but must be backwards compatible, and the rate at which it evolves is pretty intense
markclynch
@markclynch
Jun 01 2018 19:05
@kbaig having trouble finding the ES6 lessons
nevermind
DOH!
@kbaig Wow, FCC looks so much different
Brad
@bradtaniguchi
Jun 01 2018 19:06
Yea updated earlier this week haha
I still need to check it out and get back on track to claim my cert :P
markclynch
@markclynch
Jun 01 2018 19:07
awesome, much cleaner, still sort of miss the black screen for coding :)
Brad
@bradtaniguchi
Jun 01 2018 19:07
There isn't a dark theme D_8
Gulsvi
@gulsvi
Jun 01 2018 19:07
I can't find many of my old solutions...they just got wiped out
markclynch
@markclynch
Jun 01 2018 19:10
@kbaig Think I can figure this stuff out over the weekend?
I would like to get my react 80 lines of code working by Monday afternoon
the Technical Interviewer is giving a presentation at a local JS meetup and I want to give it to him before that on Monday :)
Kaz Baig
@kbaig
Jun 01 2018 19:18
@bradtaniguchi dark theme?!?! Looks like I'm about to steamroll through the project then lol
@markclynch how much time you got?
markclynch
@markclynch
Jun 01 2018 19:19
I need 6 hours a day to sleep
Kaz Baig
@kbaig
Jun 01 2018 19:19
Is this for a React gig btw?
markclynch
@markclynch
Jun 01 2018 19:19
Yeah, it's a React internship though
Kaz Baig
@kbaig
Jun 01 2018 19:19
gotcha
markclynch
@markclynch
Jun 01 2018 19:19
I'm not expected to be good, just teachable
Kaz Baig
@kbaig
Jun 01 2018 19:19
If you got all weekend, go for it
you can do it
markclynch
@markclynch
Jun 01 2018 19:20
@kbaig You've been a great help, I knew I was missing something but didn't know what!
Dan Malone
@danmalone89
Jun 01 2018 19:20
@markclynch are you talking about learning react in a single weekend?
markclynch
@markclynch
Jun 01 2018 19:20
@danmalone89 No, learning ES6 in a single weekend, then being able to write 60 - 80 lines of code in React and iterating it a few times to give to my interviewer prior to meeting
Dan Malone
@danmalone89
Jun 01 2018 19:21
Gotcha.
Have you done the ES6 challenges at fcc?
markclynch
@markclynch
Jun 01 2018 19:21
then I'll go in and he'll ask me to tweak things, then give me hints if I get stuck and see how well I can learn on the fly
working on them now
should be done by tonight I imagine.
Dan Malone
@danmalone89
Jun 01 2018 19:21
Right on, good luck to you!
markclynch
@markclynch
Jun 01 2018 19:21
I have a ballpark idea of some of it
just from all the React tutorials I was doing.
but lack the fundamentals in a serious way lol
never been so happy for a minimum wage job for 3 months!
lol, we all have to start somewhere
Dan Malone
@danmalone89
Jun 01 2018 19:22
very true
Brad
@bradtaniguchi
Jun 01 2018 19:22
Just do your best, and learn to impress ;P
markclynch
@markclynch
Jun 01 2018 19:23
but one of the founder's of this startup was Employee #6 at Amazon, so I imagine I'll learn a ton, and if I get the full time gig as junior developer it'll be with stock options ;)
Dan Malone
@danmalone89
Jun 01 2018 19:23
Usually what I do when I get stuck on a project, is go back to learning and doing challenges to build of confidence and fundamental knowledge. Then go back to the project until I hit the next ceiling
Brad
@bradtaniguchi
Jun 01 2018 19:24
@danmalone89 Good approach :)
markclynch
@markclynch
Jun 01 2018 19:25
now if I could stop typing ctrl + s everytime i finish one of these FCC challenges :P
save me a lot of escaping out of saving the html file. So use to my vscode
Brad
@bradtaniguchi
Jun 01 2018 19:25
hehe
gggaaaaahhh I spent like an hour wondering why my linter was complaing about: formControl.valueChanges() saying "cannot invoke expression blah blah call signature"..... simple, its just formControl.valueChanges
markclynch
@markclynch
Jun 01 2018 19:29
function printManyTimes(str) {
  "use strict";

  // change code below this line

  const sentence = str + " is cool!";
  for(let i = 0; i < str.length; i+=2) {
    console.log(str);
  }

  // change code above this line

}
printManyTimes("freeCodeCamp");
is this broken?
Brad
@bradtaniguchi
Jun 01 2018 19:30
yes
markclynch
@markclynch
Jun 01 2018 19:30
the hint for not passing says SENTENCE should be a constant using const
Brad
@bradtaniguchi
Jun 01 2018 19:31
@markclynch What happens if str.length = 1?
markclynch
@markclynch
Jun 01 2018 19:31
I've definitely done that
never prints
Brad
@bradtaniguchi
Jun 01 2018 19:31
Wait...
It might be fine, but not for the reason I'm thinking, i just was thinking that if you inrecment by 2, it blows up but it shouldn't nevermind :{
markclynch
@markclynch
Jun 01 2018 19:32
nah, they gave the 2
Brad
@bradtaniguchi
Jun 01 2018 19:32
Yea should be fine hehe
markclynch
@markclynch
Jun 01 2018 19:32
it's just first const lesson, i swapped var for const and that should be it
ES6 - Declare a Read-Only Variable with the const Keyword
I meant is the lesson broken
OOPS
it said rename variables in all caps
I should really read the whole question. Is that for realz though? ES6 naming convention for const variables is all caps? I haven't seen that
Brad
@bradtaniguchi
Jun 01 2018 19:35
In most languages const's are ALL_CAPS, but i don't see it much in JS
Gulsvi
@gulsvi
Jun 01 2018 19:35
Google's style guide recommends all caps for const: https://google.github.io/styleguide/javascriptguide.xml#Constants
markclynch
@markclynch
Jun 01 2018 19:36
screw google, they took out their mandate to not do evil
If they don't plan to be evil, why do that?
Gulsvi
@gulsvi
Jun 01 2018 19:37
I don't know where you heard that - it's still a part of their values
Gulsvi
@gulsvi
Jun 01 2018 19:39

@markclynch https://abc.xyz/investor/other/google-code-of-conduct.html

And remember… don’t be evil, and if you see something that you think isn’t right – speak up!

markclynch
@markclynch
Jun 01 2018 19:40
ah so they pulled it, then reincorporated it
good
Gulsvi
@gulsvi
Jun 01 2018 19:40
That Time article is a little misleading. They removed it from the preface and made it the concluding statement
markclynch
@markclynch
Jun 01 2018 19:40
love google again
FAKE NEWS!
Gulsvi
@gulsvi
Jun 01 2018 19:41
Yeah, gets more clicks :)
markclynch
@markclynch
Jun 01 2018 19:42
that's TIME magazine though, i thought I could hold them to a higher standard
Kaz Baig
@kbaig
Jun 01 2018 20:07
@markclynch I've only seen variable names of strings declared as const to be all-caps in Redux so far in the JS world
markclynch
@markclynch
Jun 01 2018 20:07
@kbaig Thanks!
Kaz Baig
@kbaig
Jun 01 2018 20:07
(so it might come up during your internship)
markclynch
@markclynch
Jun 01 2018 20:07
@kbaig How long have you been working with React for? Do you use it professionally?
Kaz Baig
@kbaig
Jun 01 2018 20:08
I started coding with freecodecamp jan '17. Did the React course from the beta in Aug/Sept
I use it at work when I have a front end component to a proof of concept, but that doesn't happen very often. The technical side of my job is mostly to do with our own programming language
markclynch
@markclynch
Jun 01 2018 20:09
proprietary language?
Kaz Baig
@kbaig
Jun 01 2018 20:09
Wolfram Language
proprietary but public
Brad
@bradtaniguchi
Jun 01 2018 20:10
you work at wolfram?
Kaz Baig
@kbaig
Jun 01 2018 20:10
yes
Brad
@bradtaniguchi
Jun 01 2018 20:11
nice, helped me with my homework all the time :P
Kaz Baig
@kbaig
Jun 01 2018 20:11
Alpha?
or Mathematica
Brad
@bradtaniguchi
Jun 01 2018 20:11
alpha, I had access to use mathematica in a class, but had no time to study/practice to I didn't use to much
Kaz Baig
@kbaig
Jun 01 2018 20:13
Yeah there's a learning curve with M- at first but it gets quite powerful quite fast :) (especially if you're into FP)
Brad
@bradtaniguchi
Jun 01 2018 20:14
Yea at the time I was more worried about passing and figuring out my profs notes, (learning wasn't important in his class it was all memorization of HIS crap)
markclynch
@markclynch
Jun 01 2018 20:14
this one is giving me some greif
const realNumberArray = [4, 5.6, -9.8, 3.14, 42, 6, 8.34];
const squareList = (arr) => {
  "use strict";
  // change code below this line
  const squaredIntegers = arr;
  // change code above this line
  return squaredIntegers;
};
// test your code
const squaredIntegers = squareList(realNumberArray);
console.log(squaredIntegers);
trying to make an arrow function to square only the integers
Brad
@bradtaniguchi
Jun 01 2018 20:15
filter -> map, OR reduce + if
Kaz Baig
@kbaig
Jun 01 2018 20:15
I hear ya. The prof of a close friend required him to write out for loops instead of using map functions etc all semester. So frustrating to have to focus on learning how a prof's brain works rather than the material
markclynch
@markclynch
Jun 01 2018 20:15
that's what I was thinking
Let me chop at it a few times more, kept failing
Brad
@bradtaniguchi
Jun 01 2018 20:16
I endedup re-taking the class with another prof learned a lot more and had a much better understanding and walked out with a A-
markclynch
@markclynch
Jun 01 2018 20:16
should I be using the if (Number.isInteger) {}?
Kaz Baig
@kbaig
Jun 01 2018 20:17
@markclynch if you type js right after your ``` it'll be formatted a bit better btw
Brad
@bradtaniguchi
Jun 01 2018 20:17
Yea that should be fine
Kaz Baig
@kbaig
Jun 01 2018 20:18
@bradtaniguchi I would just do a map with a ternary inside
Brad
@bradtaniguchi
Jun 01 2018 20:18
ah yea no need for filter if you need to return the stuff inside
markclynch
@markclynch
Jun 01 2018 20:21
const realNumberArray = [4, 5.6, -9.8, 3.14, 42, 6, 8.34];
const squareList = (arr) => {
  "use strict";
  // change code below this line
  const squaredIntegers = arr.map(num => {
    if (Number.isInteger(arr)) {
      return num*num;
    }
  }) ;
  // change code above this line
  return squaredIntegers;
};
// test your code
const squaredIntegers = squareList(realNumberArray);
console.log(squaredIntegers);
so THAT didn't work lol
Kaz Baig
@kbaig
Jun 01 2018 20:21
@markclynch your callback needs to always return a value
you're only returning something right now if it's an integer
markclynch
@markclynch
Jun 01 2018 20:22
but that's all I'm wanting
Kaz Baig
@kbaig
Jun 01 2018 20:22
else {
  return num;
}
just add that to the callback
map means replace every value with a different value, but you're not providing a value to replace the non-integers with
markclynch
@markclynch
Jun 01 2018 20:23
I want to exclude those. So can I return an empty number?
Brad
@bradtaniguchi
Jun 01 2018 20:23
>.>
markclynch
@markclynch
Jun 01 2018 20:24
I'm tasked to exclude non-integers
Brad
@bradtaniguchi
Jun 01 2018 20:24
Dont you have example results of what should happen?
markclynch
@markclynch
Jun 01 2018 20:24
Yeah I do
// running test
squaredIntegers should be [16, 1764, 36]
// tests completed
Brad
@bradtaniguchi
Jun 01 2018 20:24
Do the arrays length change from the input to the output?
markclynch
@markclynch
Jun 01 2018 20:24
but it's not console.logging anything
yeah array length needs to change, cause it is only squaring the integers, not the floats
Brad
@bradtaniguchi
Jun 01 2018 20:25
oh wait
Number.isInteger(arr)
markclynch
@markclynch
Jun 01 2018 20:25
ah
Brad
@bradtaniguchi
Jun 01 2018 20:25
Yea it must of crashed if nothing is printingout
markclynch
@markclynch
Jun 01 2018 20:26
yeah, can't really debug inside this
Kaz Baig
@kbaig
Jun 01 2018 20:26
@markclynch oh then just filter the non-integers out and then map over each and return the square in the callback
Alexandar B
@ace1122sp
Jun 01 2018 20:26
hi :wave:
any idea why i get undefined for element.name, where element is div in dom..
Kaz Baig
@kbaig
Jun 01 2018 20:27
@ace1122sp how are you capturing the element?
Alexandar B
@ace1122sp
Jun 01 2018 20:27
and i can see in browser that div has attribute name
with e.target.parentNode
and i can get an id of the element without any problem
Kaz Baig
@kbaig
Jun 01 2018 20:28
@ace1122sp wait you said the div has a name attribute?
Alexandar B
@ace1122sp
Jun 01 2018 20:28
yeah...
Kaz Baig
@kbaig
Jun 01 2018 20:29
That is not valid
You can't have a name attr on divs
Alexandar B
@ace1122sp
Jun 01 2018 20:29
oh...
Kaz Baig
@kbaig
Jun 01 2018 20:30
@ace1122sp you can prefix the attr name with "data-". See Using data attributes
Alexandar B
@ace1122sp
Jun 01 2018 20:30
@kbaig ok thanks :+1:
yeah, that's what i needed.. it works.. :satisfied:
Kaz Baig
@kbaig
Jun 01 2018 20:39
:)
markclynch
@markclynch
Jun 01 2018 20:51
@kbaig So => functions are mostly used in callbacks?
Kaz Baig
@kbaig
Jun 01 2018 20:53
@markclynch no they can be used anywhere that you don't need this or function methods
Function.call, Function.bind etc
markclynch
@markclynch
Jun 01 2018 20:54
I think I may still need somework on my basic map, reduce, filter :)
basic js lol
Brad
@bradtaniguchi
Jun 01 2018 20:54
learning those guys was one of the best things I learned about JS haha
markclynch
@markclynch
Jun 01 2018 20:54
@bradtaniguchi those guys?
Brad
@bradtaniguchi
Jun 01 2018 20:55
the array operators
markclynch
@markclynch
Jun 01 2018 20:55
ah yeah
I mean I knew them, but I don't Know them now :)
ended up using reduce instead to not over iterate
reduce = god of array operators
"sometimes"
Kaz Baig
@kbaig
Jun 01 2018 20:56
yeah changed the way I thought in JS for sure
Brad
@bradtaniguchi
Jun 01 2018 20:57
I think reduce can impliment all the other operators, BUT find/every performance
markclynch
@markclynch
Jun 01 2018 20:57
yeah
Kaz Baig
@kbaig
Jun 01 2018 20:57
you can use reduce for that, but it's not quite semantically what you want I think
I think of reduce as take a collection of values and perform an operation to return one value
Brad
@bradtaniguchi
Jun 01 2018 20:58
you can, but reduce will run over the rest of the array no matter what haha
markclynch
@markclynch
Jun 01 2018 20:58
Yeah, but I used reduce so it did the test for integer and performed the square in one pass
Alexandar B
@ace1122sp
Jun 01 2018 20:59
i knew that there is a good reason why I almost never use while loop... it's because it often comes in pair with infinite loop lol :satisfied:
Kaz Baig
@kbaig
Jun 01 2018 20:59
That's fine, but in the realm of writing readable (and perhaps self-documenting in this case) code, I think filter -> map would be much better
If you really want to do both pieces of logic in one loop, I'd say use a for-loop instead of reduce
markclynch
@markclynch
Jun 01 2018 21:00
yeah, i think that's a good case, unless I'm doing something with huge dataset
Kaz Baig
@kbaig
Jun 01 2018 21:00
If you're working with huge datasets, one might argue you shouldn't be working in JS at all ;)
Brad
@bradtaniguchi
Jun 01 2018 21:00
I hate the idea of using map+filter for "readability", you might not care about performance, but geezus at least try
ehutchllew
@ehutchllew
Jun 01 2018 21:01
@ace1122sp I can't remember the last time I used a while loop in production code.
Brad
@bradtaniguchi
Jun 01 2018 21:04
I mean if you use reduce, its just as readable
arr.reduce((arr, el) => {
    if(isElWhatever(el)) {
        arr.push(mapMyEl(el));
    }
    return arr;
}, []);
Not all 1 line coolness, but were talking no-trivial code still hehe
ehutchllew
@ehutchllew
Jun 01 2018 21:05
I would probably use a filter instead.
Brad
@bradtaniguchi
Jun 01 2018 21:06
Yea in that case, but in the cases were you need filter+map(I forgot that aspect of my example hehe)
there fixed :P
Kaz Baig
@kbaig
Jun 01 2018 21:08
This still makes me happy
const squareIntegers = arr => arr.filter(Number.isInteger).map(n => n ** 2);
Brad
@bradtaniguchi
Jun 01 2018 21:09
falls to knees nooooooooooooo
Alexandar B
@ace1122sp
Jun 01 2018 21:12
@ehutchllew yeah, filter is a way better option.. but in this particular case i tried to delete all child nodes, but ... :smile:
markclynch
@markclynch
Jun 01 2018 21:14
god I like that one liner
but I didn't even know n ** 2 was a thing lol, that means n^2?
so n**3 would be cubed?
man I think I know .00000000001% of js now
and that might be being a little liberal
Kaz Baig
@kbaig
Jun 01 2018 21:15
@markclynch that's also a newer feature but yes it's n ** power
Brad
@bradtaniguchi
Jun 01 2018 21:15
meh Im over here grumbling about 1 liner solutions that push the algo's O(N) from to O(2n) for readability, even for the common case (all numbers are whole numbers)
Kaz Baig
@kbaig
Jun 01 2018 21:16
ES7
markclynch
@markclynch
Jun 01 2018 21:16
the power was introduced in ES7?
Kaz Baig
@kbaig
Jun 01 2018 21:16
The operator was
**
markclynch
@markclynch
Jun 01 2018 21:16
have you played at all with event pointers in new react?
gotcha
Kaz Baig
@kbaig
Jun 01 2018 21:17
Not sure what that is - event pointers in react
markclynch
@markclynch
Jun 01 2018 21:17
I'll have to say I am having fun being so dumb
pointer events sorry
it's about the only thing introduced
Brad
@bradtaniguchi
Jun 01 2018 21:18
I didn't even know about pointer events (in web dev) hehe
markclynch
@markclynch
Jun 01 2018 21:18
I know all the latest stuff, but have no idea of the middle :)
so basically I'm useless but great in js.trivia
time to take the kid to the park
markclynch
@markclynch
Jun 01 2018 21:24
@kbaig So the filter method requires a boolean.
Kaz Baig
@kbaig
Jun 01 2018 21:24
yes
markclynch
@markclynch
Jun 01 2018 21:24
and returns anything that satisfies true
Kaz Baig
@kbaig
Jun 01 2018 21:24
mhmm
markclynch
@markclynch
Jun 01 2018 21:25
I thought I was doing that, but kept messing up how to get it to interact with map
instead of doing filter(Number.isInteger).map i was trying to do filter((Number.isInteger => {
Brad
@bradtaniguchi
Jun 01 2018 21:25
Thats so close
markclynch
@markclynch
Jun 01 2018 21:26
yet so far away lol
Brad
@bradtaniguchi
Jun 01 2018 21:26
Thsi woulda worked aswell filter(Number.isInteger).map(() => {/*whatver*/});
or at least I think it would haha
markclynch
@markclynch
Jun 01 2018 21:26
actually i was trying arr.filter((Number.isInteger => so even worse
acualy not worse
just not right
I think I literally just need more hours of writing these things, they're not burned into my mind yet
Brad
@bradtaniguchi
Jun 01 2018 21:29
Yes, different approachs to see what happens too
markclynch
@markclynch
Jun 01 2018 21:29
@kbaig Is there some reason you are doing arr => arr.filter? Isn't that redundant?
Brad
@bradtaniguchi
Jun 01 2018 21:29
I learned the operators by grinding thru those coding challenge/games (codewars) to figure out all those one liner things
markclynch
@markclynch
Jun 01 2018 21:30
I just removed it because I didn't think of it when trying to remember the code without looking and it passed
const squaredIntegers = arr.filter(Number.isInteger).map(n => n**2);
no problems.
Brad
@bradtaniguchi
Jun 01 2018 21:31
:+1:
markclynch
@markclynch
Jun 01 2018 21:35
@bradtaniguchi how can you test for two conditions in a filter method. Like if I wanted to check if the number was an integer AND positive
I tried this
Brad
@bradtaniguchi
Jun 01 2018 21:35
yes, but not the way you did last
markclynch
@markclynch
Jun 01 2018 21:35
const squaredIntegers = arr.filter(num, Number.isInteger && num > 0).map(n => n**2);
filter can take two numbers right?
er two arguments
Brad
@bradtaniguchi
Jun 01 2018 21:36
youd have to use the arrow function, the filter method takes 1 function as an argument
so if you pass your own function, an arrow function, or some other function (like Number.isInteger)
Kaz Baig
@kbaig
Jun 01 2018 21:36
@markclynch I was declaring a function that takes in an array and returns only the integers squared
Brad
@bradtaniguchi
Jun 01 2018 21:37
if you wanated to check two things, you have to pass 1 function that returns what you want (the 2 things check)
filter((num) => Number.isInteger(num) && num > 0)
markclynch
@markclynch
Jun 01 2018 21:37
gotcha
man all this is crazy
how many different cases of all of this is there gonna be fore me to learn :(
Brad
@bradtaniguchi
Jun 01 2018 21:42
More than you ever could learn hehe
no offence, now that I read it it sounds kinda messed up haha, I mean they add more stuff everyday, so everyones gotta keep learning
markclynch
@markclynch
Jun 01 2018 21:43
I'm fine with that
but how does a noob like me catch up "enough" to be relavent
like if I wanted to break down what your statement is doing so I could change things and understand the thought process I'm not sure I get it
Brad
@bradtaniguchi
Jun 01 2018 21:44
You learn on the fly. The most important skill to develop is being able to learn. Since there so much to learn, you learn what you need/can/want
markclynch
@markclynch
Jun 01 2018 21:44
filter((num) => Number.isInteger(num) && num > 0)
Brad
@bradtaniguchi
Jun 01 2018 21:44
Well knowing how the JS goes through the expressions i a good starting point, anything you don't get (like wtf is an arrow function for example) is what you go look into, and keep going until you understand the expressions
Obviously you should know how JS "reads" it aswell. Like this statement:
true || false || false || console.log('wtf') || 5 returns true, since JS forgets about everything else in the expression. (this is a very simple example, but important)
markclynch
@markclynch
Jun 01 2018 21:47
yeah, I get that, cause one thing is true and the or operator's don't really matter
and even if you cut the true, console.log('wtf') and 5 would return as true also correct?
false || false || console.log('wtf') || 5 would return true also.
Brad
@bradtaniguchi
Jun 01 2018 21:51
depends when you say returns in this case tho, the console log would fire and print out (which is a side effect) then it checks 5, which is (truthy) so yea its technically true, but not really
markclynch
@markclynch
Jun 01 2018 21:52
okay
Brad
@bradtaniguchi
Jun 01 2018 21:52
if (false || console.log('side effect') || 5) {
    console.log('it was true');
}
would print out side effect, then it was true, since 5 is "truthy"
markclynch
@markclynch
Jun 01 2018 21:52
and if there was no 5?
would it be false?
Brad
@bradtaniguchi
Jun 01 2018 21:52
It still prints to the console, with side effect, but console.log('whatever') returns undefined, thus its false
markclynch
@markclynch
Jun 01 2018 21:53
cool
Brad
@bradtaniguchi
Jun 01 2018 21:53
if you go into a node instance and run console.log youll see the undefined
markclynch
@markclynch
Jun 01 2018 21:53
ok, so sorta as i expected
Brad
@bradtaniguchi
Jun 01 2018 21:53
Yea haha, I didn't understand why undefined always showed up until I thought about it
markclynch
@markclynch
Jun 01 2018 21:53
so funny, I think I skipped over the javascript stuff I need and moved onto node and react too fast lol
i'm missing basic logic
Brad
@bradtaniguchi
Jun 01 2018 21:54
Yes definantly, you need that base, otherwise everything seems like magic haha
markclynch
@markclynch
Jun 01 2018 21:55
I think it's tougher going back now for me though. lol
I understand peices
I guess this ES6 course will kick my butt a bit and I'll figure things out
Brad
@bradtaniguchi
Jun 01 2018 21:56
probably, especially when you run into issues that es6 sort "fixes", like things dealing with this and other "magic"
markclynch
@markclynch
Jun 01 2018 21:59
while I 'sorta' understand this, it still seems like magic
I've watched tutorials on this, didn't stick
I'm a learn by doing, but I don't know what I need to "do"
Brad
@bradtaniguchi
Jun 01 2018 22:03
If you need to get down to fundamentals, I recommend one of the programming challenge websites, you can solve the challenges to get your brain working, and check out other answers to get an idea of whats the "best" way to approach the problem. Its were I learned a lot of es6 methods for solved using older methods
markclynch
@markclynch
Jun 01 2018 22:04
new FCC doesn't really console.log things for you though :P grrr
it just tells me what it should be
Brad
@bradtaniguchi
Jun 01 2018 22:05
You can check your browser console, unless they changed that
Gulsvi
@gulsvi
Jun 01 2018 23:14
@aita-kane a height of 100% means it is 100% the height of the containing element. So, you need to specify the height of the container
Whoops, deleted
Here's the example I prepared for you @aita-kane https://s.codepen.io/anon/pen/VdvzLW?editors=1100
Aita Kane
@aita-kane
Jun 01 2018 23:15
@gulsvi yes thank you actually i found out the solution but thanks anyway
@gulsvi how to make the padding on top, right , left work for the bottom please?
Gulsvi
@gulsvi
Jun 01 2018 23:22
@aita-kane The padding will need to be applied to the .landing container. In Bootstrap, it's pb-1, pb-2, pb-3...pb-5 classes for padding bottom
Aita Kane
@aita-kane
Jun 01 2018 23:24
@gulsvi thanks for all , I will show you when I'm done my landing so I can receive some reviews
Gulsvi
@gulsvi
Jun 01 2018 23:24
Sounds good! Have fun :)