These are chat archives for FreeCodeCamp/HelpFrontEnd

15th
Jun 2018
Kingsley
@Kingwindie
Jun 15 2018 00:00
@sjames1958gm thanks bud
Dhaval Vira
@dhavalveera
Jun 15 2018 02:01
Hello
how to create a Tree in HTML
Stephen
@stephepush
Jun 15 2018 03:22
@dhavalveera its probably easier to think of HTML as a family tree than a regular tree… You have parent elements and sibling elements. Parent elements hold/contain other elements, and those nest elements themselves can be parents and/or siblings of eachother. Sibling elements are of the same hierarchy, meaning they get the same indentation as other elements immediately below a parent element.

Can anyone help me with my attempt to solve Profile Lookup? I can’t seem to think of a better solution even though I know these arent doing what I need them to do:

var contacts = [
    {
        "firstName": "Akira",
        "lastName": "Laine",
        "number": "0543236543",
        "likes": ["Pizza", "Coding", "Brownie Points"]
    },
    {
        "firstName": "Harry",
        "lastName": "Potter",
        "number": "0994372684",
        "likes": ["Hogwarts", "Magic", "Hagrid"]
    },
    {
        "firstName": "Sherlock",
        "lastName": "Holmes",
        "number": "0487345643",
        "likes": ["Intriguing Cases", "Violin"]
    },
    {
        "firstName": "Kristian",
        "lastName": "Vos",
        "number": "unknown",
        "likes": ["JavaScript", "Gaming", "Foxes"]
    }
];


function lookUpProfile(name, prop){
// Only change code below this line
    for(var i = 0; i < contacts.length; i++){
        if (contacts[i]["firstName"] === name && contacts[i][prop]){
              return contacts[i][prop];
        } else if (!contacts[i]["firstName"]) {
              return "No such contact";
        } 
    }

And also this:

var contacts = [
    {
        "firstName": "Akira",
        "lastName": "Laine",
        "number": "0543236543",
        "likes": ["Pizza", "Coding", "Brownie Points"]
    },
    {
        "firstName": "Harry",
        "lastName": "Potter",
        "number": "0994372684",
        "likes": ["Hogwarts", "Magic", "Hagrid"]
    },
    {
        "firstName": "Sherlock",
        "lastName": "Holmes",
        "number": "0487345643",
        "likes": ["Intriguing Cases", "Violin"]
    },
    {
        "firstName": "Kristian",
        "lastName": "Vos",
        "number": "unknown",
        "likes": ["JavaScript", "Gaming", "Foxes"]
    }
];

//console.log(contacts[3]["lastName"]);



function lookUpProfile(name, prop){
// Only change code below this line
    for(var i = 0; i < contacts.length; i++){
        if (contacts[i]["firstName"] === name) {
          if (contacts[i][prop] === true){
            return contacts[i][prop];
          } else {
            return "No such property";
          }
        } 

    } 

// Only change code above this line
}
Brad
@bradtaniguchi
Jun 15 2018 03:46
holy code batman
niknows
@niknows
Jun 15 2018 03:46
@bradtaniguchi hahahahahaha
Brad
@bradtaniguchi
Jun 15 2018 03:49
@stephepush Let me see if I can re-do it real quick
Stephen
@stephepush
Jun 15 2018 03:49
lol alright
Brad
@bradtaniguchi
Jun 15 2018 03:51
alright, so for starters dont post the entire code, since its rather large, just your function code
Stephen
@stephepush
Jun 15 2018 03:52
yeah I figured I’d put the objects in just for easy copying and pasting
Brad
@bradtaniguchi
Jun 15 2018 03:52
Second this logic isn't correct: contacts[i][prop] === true wont work since your checking if the value of the prop is actually just true
your also not handling if you don't find the user with the same firstName, your code just leaves the function
Yea, but since its large some people might think its spamming :P
So those are 2 issues with the code as of right now that I see :D
Stephen
@stephepush
Jun 15 2018 03:54
Handling… what do you mean by that?
Brad
@bradtaniguchi
Jun 15 2018 03:55
If I asked you what does the code do if the first if statement is never true? What would you tell me would happen?
Stephen
@stephepush
Jun 15 2018 03:56
The output would be undefined?
Brad
@bradtaniguchi
Jun 15 2018 03:57
Yea, which isn't correct, if the contact isn't found in the list you need to return "No contact found"
Stephen
@stephepush
Jun 15 2018 03:58
Well, I’m just working on trying to get “No such property” returned when the last Akira scenario is passed
I get funny outputs when I try and change things in this code… everything but Bob passes or everything comes back as No such property
Brad
@bradtaniguchi
Jun 15 2018 03:59
Yea, the code you posted should return that statement for most cases, which isn't correct except the ones that expect "No such property" to come back
Claudio Restifo
@Marmiz
Jun 15 2018 03:59

@stephepush mind this condition:

(contacts[i][prop] === true)

this will work only if the property is actually true. Won't work for all the other cases

Brad
@bradtaniguchi
Jun 15 2018 04:00
The second if statement will be "false" most of the time
^ yes
Claudio Restifo
@Marmiz
Jun 15 2018 04:04

@stephepush you can use hasOwnProperty for example, to know if a property exist in an object.

or a in statement

Stephen
@stephepush
Jun 15 2018 04:07
@Marmiz: yes yes, sure… 🤔

The second if statement will be "false" most of the time

Yeah, I was wondering if the iterations were incorrectly throwing the false even though whatever was being passed was true… get what I’m saying, @bradtaniguchi ?

Brad
@bradtaniguchi
Jun 15 2018 04:08
Or theres a dirt simple solution :P
@stephepush I wouldn't worry to much about what is currently being returned, since half the code doesn't execute as expected, thus some tests are bound to fail
Stephen
@stephepush
Jun 15 2018 04:09
yeah
any hints RE the dirt simple solutions, since I obviously am not thinking of it?
Brad
@bradtaniguchi
Jun 15 2018 04:10
All you need to know is if the attribute exists
soooo
Stephen
@stephepush
Jun 15 2018 04:10
indeed… lol
Brad
@bradtaniguchi
Jun 15 2018 04:10
you can just check if the property is "truthy" with
if(contacts[i][prop]) {
...
Stephen
@stephepush
Jun 15 2018 04:10
yes
Alright, don’t spoil it, I’ll see what I come up with
Brad
@bradtaniguchi
Jun 15 2018 04:11
This works in this case, but in the real world you can run into some issues if your not careful
Stephen
@stephepush
Jun 15 2018 04:11
Also, thanks @Marmiz and @bradtaniguchi
Brad
@bradtaniguchi
Jun 15 2018 04:11
np :D
roxxlen
@roxxlen
Jun 15 2018 09:13
class MyApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: 'CamperBot'
    }
  }
  render() {
    return (
       <div>
         <Navbar props={this.state.name} />
       </div>
    );
  }
};

class Navbar extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
    <div>
      <h1>Hello, my name is: {this.props} </h1>
    </div>
    );
  }
};
how to Pass State as Props to Child Components
abraham anak agung
@padunk
Jun 15 2018 09:29
@roxxlen
<Navbar name={this.state.name} />

// in Navbar component access it like
{this.props.name}
if you pass the props as props than you have to access it like {this.props.props} it will get confusing somehow
Claudio Restifo
@Marmiz
Jun 15 2018 09:30

@roxxlen
this:

<Navbar props={this.state.name} />

means that you are passing a prop named props to Navbar.

To extend with an example:

<Navbar name="coolComponent" cool={true} instances={3} withObj={{a: b}} andArray={[1,2,3]}/>

Means that Navbar will have as props

name: String === "coolComponent
cool: Boolean === true
instances: Number === 3
withObj: Object === {a: b}
andArray: Array === [1,2,3]

That I can reference

this.props.cool   // true
abraham anak agung
@padunk
Jun 15 2018 09:31
@Marmiz :wave: nice example. Do you use typescript with react?
Claudio Restifo
@Marmiz
Jun 15 2018 09:32
not everywhere, in the "core" components or HOC I do.
stateless ang general layout not yet (in favour of speed)
also :wave: @padunk
abraham anak agung
@padunk
Jun 15 2018 09:40
@Marmiz Oh, does it effect speed?
Claudio Restifo
@Marmiz
Jun 15 2018 09:45
@padunk I meant speed of coding. Typing types and interfaces is more verbose that's all
abraham anak agung
@padunk
Jun 15 2018 09:49
@Marmiz ah yes, off course :+1:
Amir Saleem
@amirsaleem96
Jun 15 2018 10:03
Hi all
roxxlen
@roxxlen
Jun 15 2018 10:19
Thanks you guys
AlbertoGiambone
@AlbertoGiambone
Jun 15 2018 10:49
hello!!!
I need to Increase the size of the element with the id of ball2 to 1.5 times its original size.
I wrote this, but is not working:

ball2 {

left: 65;
transform: scale(1.5);
}
mpmaan
@mpmaan
Jun 15 2018 11:33
Any improvements or suggestions for this product landing page ?
except for the temporary text
@AlbertoGiambone you need to change left to 65%
mpmaan
@mpmaan
Jun 15 2018 11:39
also use #ball2 instead of ball2
AlbertoGiambone
@AlbertoGiambone
Jun 15 2018 11:39
@mpmaan great!!! is working!! Thank's!!!
Phil
@mremotoo
Jun 15 2018 12:29
@mremotoo
I want to fade in and fade out each h1s one at a time, however, I'm not achieving it. Can you help?
Here's the code:
https://codepen.io/mremoto/pen/GGMrMp
I basically want to show the h1 one at a time and center on the page and not simultaneously animate
Simon Cordova
@gbsimon87
Jun 15 2018 13:44
@mremotoo Use transtion-delay on one element and then use transition duration for both
you should be able to get the desired effect
John Su
@JSN190
Jun 15 2018 14:25
Is there any way to have webpack compile my sass files into individual files (e.g. index.scss -> index.css, page1.scss -> page1.css)? Right now, I use mini-css-extract-plugin but it throws everything into one main.css file
Christopher McCormack
@cmccormack
Jun 15 2018 15:28
@JSN190 what does your loader configuration for css look like?
John Su
@JSN190
Jun 15 2018 15:36
@cmccormack I current have this
 module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
       // Precompile to CSS in production mode
       process.env.NODE_ENV !== "production" ? 'style-loader' : MiniCssExtractPlugin.loader,
       { loader: 'css-loader', options: { minimize: true }},
       "sass-loader"
        ]
      }
    ]
  },
and then just import "../css/index.scss"; in my app.js, which is my entry point
and for plugins
plugins: [
  new MiniCssExtractPlugin({
    filename: "css/[name].css",
})
],
Christopher McCormack
@cmccormack
Jun 15 2018 15:43
Maybe try
{
  test: /\.s?[ac]ss$/i,
  use: [
    process.env.NODE_ENV !== 'production' ? MiniCssExtractPlugin.loader : "style-loader",
    "css-loader",
    "sass-loader",
  ],
},
does webpack still support the loader method? can't remember
but yours is pretty close to mine - you've tested this in production right?
John Su
@JSN190
Jun 15 2018 16:05
It still seems to compile it to main.css
I running webpack with NODE_ENV=production
Christopher McCormack
@cmccormack
Jun 15 2018 16:23
@JSN190 you may want to log NODE_ENV to make sure it's a string - iirc it may be an object but I do mine a bit different
John Su
@JSN190
Jun 15 2018 17:29
I managed to accomplish what I needed with webpack code splitting
separate entry points for each page
and a global one
Christopher McCormack
@cmccormack
Jun 15 2018 17:29
That's odd shouldn't have had to do that