These are chat archives for FreeCodeCamp/Help

29th
Jan 2018
Darren
@DarrenfJ
Jan 29 2018 00:50
@Janimede I'm not sure.. best plan would be to check the list of issues, and if you don't see it, add it.. gimme a second and I'll grab the link
yangxia605
@yangxia605
Jan 29 2018 04:18
https://beta.freecodecamp.org/en/challenges/react/add-event-listeners I don't know how to resolve this question after tried several times.
Kyle Holm
@thekholm80
Jan 29 2018 04:25
@yangxia605 what have you tried?
yangxia605
@yangxia605
Jan 29 2018 04:33
js class MyComponent extends React.Component { constructor(props) { super(props); this.state = { message: '' }; this.handleEnter = this.handleEnter.bind(this); this.handleKeyPress = this.handleKeyPress.bind(this); } // change code below this line componentDidMount() { document.addEventListener("keydown",this.handleKeyPress) } componentWillUnmount() { document.removeEventListener("keydown",this.handleKeyPress) } // change code above this line handleEnter() { this.setState({ message: this.state.message + 'You pressed the enter key! ' }); } handleKeyPress(event) { if (event.keyCode === 13) { this.handleEnter(); } } render() { return ( <div> <h1>{this.state.message}</h1> </div> ); } }; I forgot to add "this" when use the function.Now that's ok.
Kyle Holm
@thekholm80
Jan 29 2018 04:34
so you're good then?
yangxia605
@yangxia605
Jan 29 2018 04:38
@thekholm80 yes,I suddenly understood.And I remembered that error was happened before.[PS:the keywords "this" in the javascript is a little hard to understand for me]
Kyle Holm
@thekholm80
Jan 29 2018 04:38
this is a pain to learn, but pretty handy when you get the hang of it
yangxia605
@yangxia605
Jan 29 2018 04:42
@thekholm80 Thanks for your reply.maybe I should work hard for my coding.I 've been studying code for months.
CamperBot
@camperbot
Jan 29 2018 04:42
yangxia605 sends brownie points to @thekholm80 :sparkles: :thumbsup: :sparkles:
:star2: 1676 | @thekholm80 |http://www.freecodecamp.org/thekholm80
Kyle Holm
@thekholm80
Jan 29 2018 04:43
best of luck on your coding journey. it's a lot of fun
aRtoo
@artoodeeto
Jan 29 2018 05:10
hey bros i redo my simon game. i want to change the JS to a module pattern . im starting right not but i have this error.
heres the pen https://codepen.io/artoo/pen/xYKvKX
but  this example i made i dont have an error

let modPat = (function() {

    "use strict";
    // console.log(this);
    // let btn; //working get the DOM elem first then before adding a event
    let a = 2; //this is working
    let b = 3; //this is working

    return {
        init: function (){
            console.log(this);
            this.cacheDOM();
            this.bindEvents();
          },
          cacheDOM: function(){
           let btn = document.getElementById('btn'); //you can put let here too
         },
          bindEvents: function(){
            btn.addEventListener('click', this.displayLog);
          },
          displayLog: function(){
            console.log('yes you made it', a + b);
          }
    }

  }());

  modPat.init();
Darren
@DarrenfJ
Jan 29 2018 06:52
evening fCc
Claudio Restifo
@Marmiz
Jan 29 2018 07:24
@DarrenfJ :wave:
Eric Miller
@ericmiller777
Jan 29 2018 08:17
hey guys
I thought i had it
const INCREMENT = "INCREMENT"
const DECREMENT = "DECREMENT"

const defaultState = {
    count: 0
};

const counterReducer = (state = defaultState, action) => {

    switch(action.type) {

      case INCREMENT:
        return {
          count: count + 1
    }
      case DECREMENT:
        return {
          count: count - 1
    }
    default:
    return state;
}
};
const incAction = () => {
return {
  type: INCREMENT
}
};

const decAction = () => {
return {
  type: DECREMENT
}
};

const store = Redux.createStore(counterReducer);
what am i missing
Eric Miller
@ericmiller777
Jan 29 2018 08:23
oh i think i might see it
it doesnt want me to create a default state const i think
weird if i make stae = 0 instead of default state
that one goes green
but then how can i increment or decrement with no object to increment or decrement
Claudio Restifo
@Marmiz
Jan 29 2018 08:28
@ericmiller777 return state + 1 ?
Eric Miller
@ericmiller777
Jan 29 2018 08:31
@Marmiz yea, thank you
CamperBot
@camperbot
Jan 29 2018 08:31
ericmiller777 sends brownie points to @marmiz :sparkles: :thumbsup: :sparkles:
:star2: 1135 | @marmiz |http://www.freecodecamp.org/marmiz
Eric Miller
@ericmiller777
Jan 29 2018 08:31
im suprised it didnt work with state++; breal;
break
@Marmiz you ever do a chingu cohorts?
Claudio Restifo
@Marmiz
Jan 29 2018 08:36
@ericmiller777 ? what?
I have no idea what that is
Eric Miller
@ericmiller777
Jan 29 2018 08:38
@Marmiz https://chingu-cohorts.github.io/chingu-directory/ I was accepted for february
@Marmiz You build somthing with a group over 5 weeks
Claudio Restifo
@Marmiz
Jan 29 2018 08:39
@ericmiller777 Doubt I have the time with a full time job :)
Eric Miller
@ericmiller777
Jan 29 2018 08:39
@Marmiz cool, maybe i can get one soon :(
lol
Claudio Restifo
@Marmiz
Jan 29 2018 08:40

anyway the reason why state++ won't work is the variable is incremented after the value is assigned,

you could have return ++state if you wanted to

Eric Miller
@ericmiller777
Jan 29 2018 08:40
@Marmiz i see, il have to keep that in mind, thank you
CamperBot
@camperbot
Jan 29 2018 08:40
ericmiller777 sends brownie points to @marmiz :sparkles: :thumbsup: :sparkles:
api offline
Claudio Restifo
@Marmiz
Jan 29 2018 08:41
@ericmiller777 keep improving in your skills and you'll find a job soon ^^
:+1:
Eric Miller
@ericmiller777
Jan 29 2018 08:42
thank you
yangxia605
@yangxia605
Jan 29 2018 09:19
https://beta.freecodecamp.org/en/challenges/react/manage-updates-with-lifecycle-methods . I'm confused that the 'nextProps' how to invoke the componentWillUpdate.
Claudio Restifo
@Marmiz
Jan 29 2018 09:25
@yangxia605 componentWillreceiveProps(nextProps) will be called before a component receive new props, before re-rendering.
example:
componentWillreceiveProps(nextProps) {
  if (nextProps.value !== this.props.value) {
     console.log('we have a new prop') 
  }
}
Claudio Restifo
@Marmiz
Jan 29 2018 09:31

@yangxia605 sorry you were talking about componentWillUpdate.
That is used right before a re-render.

As far as my experience goes it is useful manly to start animations, since you cannot change state or props at this stage unless you want an infinite loop

more about component lifecycle on the official React Docs
yangxia605
@yangxia605
Jan 29 2018 09:37
@Marmiz thanks for your reply.your answer is right.maybe i should read the question more times.[ps:my English is poor]
CamperBot
@camperbot
Jan 29 2018 09:37
yangxia605 sends brownie points to @marmiz :sparkles: :thumbsup: :sparkles:
:star2: 1136 | @marmiz |http://www.freecodecamp.org/marmiz
const immutableReducer = (state = todos, action) => {
  switch(action.type) {
    case ADD_TO_DO:
      // don't mutate state here or the tests will fail
      return state.concat(action.todo);
    default:
      return state;
  }
};
is that actully an acceptable way of doing it?
yangxia605
@yangxia605
Jan 29 2018 09:46
@Marmiz maybe the question is that why the onClick doesn't invoke the changeMessage function.So the state doesn't change.
Claudio Restifo
@Marmiz
Jan 29 2018 09:49
@yangxia605 that challenge apparently want you to write a componentWillReceiveProps and a componenDidUpdate methods that will log into the console :)
EDIT: componentDidUpdate
@ericmiller777 yes it is, as long as you always return a copy and never the original you are keeping it immutable :+1:
Eric Miller
@ericmiller777
Jan 29 2018 09:52
@Marmiz thanks
CamperBot
@camperbot
Jan 29 2018 09:52
ericmiller777 sends brownie points to @marmiz :sparkles: :thumbsup: :sparkles:
:star2: 1137 | @marmiz |http://www.freecodecamp.org/marmiz
yangxia605
@yangxia605
Jan 29 2018 09:54

@Marmiz class Dialog extends React.Component {
constructor(props) {
super(props);
}
componentWillUpdate(nextProps) {
console.log('Component is about to update...');
}
// change code below this line
componentWillReceiveProps(nextProps) {
console.log(this.props);
console.log(nextProps(nextProps));
}
componentDidlUpdate() {
console.log('Component is didUpdate...');
}
// change code above this line
render() {
return <h1>{this.props.message}</h1>
}
};

class Controller extends React.Component {
constructor(props) {
super(props);
this.state = {
message: 'First Message'
};
this.changeMessage = this.changeMessage.bind(this);
}
changeMessage() {
this.setState({
message: 'Second Message'
});
}
render() {
return (
<div>
<button onClick={this.changeMessage}>Update</button>
<Dialog message={this.state.message}/>
</div>
);
}
};

Claudio Restifo
@Marmiz
Jan 29 2018 09:58

@yangxia605

console.log(nextProps(nextProps))

what kind of function is this?

also

componentDidlUpdate()

mind the spelling

Eric Miller
@ericmiller777
Jan 29 2018 10:21
so for the next one i had to look up more about the spread operator
return [...state.slice(0, action.index), ...state.slice(action.index + 1)];
i understand the first part makes a copy, slice at 0, and index
but what is the second part doing
adding index+1?
Claudio Restifo
@Marmiz
Jan 29 2018 10:27

@ericmiller777 creating a copy from the original array starting from position index + 1.
this is a common way of deleting data into a specific position.

it basically is: " give me the copy of everything up to the index and everything after that"

or in other words, remove that index :)
it's often used filter as well for this kind of operation
Eric Miller
@ericmiller777
Jan 29 2018 10:40
@Marmiz thanks
CamperBot
@camperbot
Jan 29 2018 10:40
api offline
ericmiller777 sends brownie points to @marmiz :sparkles: :thumbsup: :sparkles:
Chris Cullen
@123xylem
Jan 29 2018 13:50

its just Quick API QUestion:
How do i pull data from etherscan api and use it in a dynamically rendered webpage?

When i use render("page",{data:dataFrom API}
It doesnt work as the new page doesnt know what data is?

Georgia
@georgiawang5332
Jan 29 2018 14:55
const y=10;
y=y+5;
console.log(y); //why error
Ken Haduch
@khaduch
Jan 29 2018 15:03
@georgiawang5332 - if you declare a const, then you cannot modify it, that's probably the reason (although you are not showing what error you are getting.)
@georgiawang5332 - when I try it I see this error in the console: TypeError: invalid assignment to consty'`
Georgia
@georgiawang5332
Jan 29 2018 15:08
ok...
Kyle Holm
@thekholm80
Jan 29 2018 15:17
good morning coders
Ken Haduch
@khaduch
Jan 29 2018 15:18
@thekholm80 - good morning Kyle... and a good Monday to everyone out there!
Georgia
@georgiawang5332
Jan 29 2018 15:18
const y=10;
console.log(y); //ans:10 (right?)
Ken Haduch
@khaduch
Jan 29 2018 15:18
@georgiawang5332 - yes that is what you should see for that code.
Kyle Holm
@thekholm80
Jan 29 2018 15:19
also, if you want to modify the value you could use
let y = 10;
y = y + 5;
console.log(y); // 15
Georgia
@georgiawang5332
Jan 29 2018 15:22
I have to study。i just started es6, my thinking may turn a bit, so I courage to ask, thank you for your advice (grateful
Ken Haduch
@khaduch
Jan 29 2018 15:22
@georgiawang5332 - this is the place to get help, you're welcome and ask any time!
Georgia
@georgiawang5332
Jan 29 2018 15:23
thx :)

const x=100;
console.log(x);

const y=10;
console.log(y);

let z = 10;
z = z + 5;
console.log(z); // 15 // I know how to use, thank you for your advice XD

Din
@DinShpati
Jan 29 2018 15:45
@sorinr Ill' try thanks for your help bro
CamperBot
@camperbot
Jan 29 2018 15:45
dinshpati sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1396 | @sorinr |http://www.freecodecamp.org/sorinr
Din
@DinShpati
Jan 29 2018 15:46
lol
Sorin Ruse
@sorinr
Jan 29 2018 16:08
@DinShpati think your brownie points were not intended to me :)
Darren
@DarrenfJ
Jan 29 2018 16:34
@Marmiz @ericmiller777 :wave:
@ericmiller777 glad to see yer chugging through the beta..
Ghost
@ghost~5a3ac208d73408ce4f843d6a
Jan 29 2018 17:39
How do I turn a project on my computer into a git repo?
Kaz Baig
@kbaig
Jan 29 2018 17:45
@WebDevDeja you create git repos using git, which you can download here https://git-scm.com/downloads
From the command line, you can navigate to your folder and enter git init
Ghost
@ghost~5a3ac208d73408ce4f843d6a
Jan 29 2018 17:47
Ah, so I have to do it via cmd
Darren
@DarrenfJ
Jan 29 2018 18:44
@WebDevDeja i htink there's a way to do it form github too.. but you need the desktop app.. I've used the desktop app and tbh once you get used to the cmd it's easier to do everything from there
@WebDevDeja and you can do it from GitHub via the web.. https://help.github.com/articles/importing-a-repository-with-github-importer/
Juli Cheng
@julicheng
Jan 29 2018 20:54
const LOCAL_FORECAST = {
  today: { min: 72, max: 83 },
  tomorrow: { min: 73.3, max: 84.6 }
};

function getMaxOfTmrw(forecast) {
  "use strict";
  // change code below this line
  const { tomorrow : { min : minOfTomorrow, max : maxOfTomorrow }} = LOCAL_FORECAST; // change this line
  // change code above this line
  return maxOfTomorrow;
}

console.log(getMaxOfTmrw(LOCAL_FORECAST)); // should be 84.6
I'm on "ES6: Use Destructuring Assignment to Assign Variables from Nested Objects" in beta mode. why isn't this working? it says nested destructing wasnt used? Where am I going wrong?
Coy Sanders
@coymeetsworld
Jan 29 2018 20:59
@julicheng the syntax for declaring const doesn’t look right
Stephen James
@sjames1958gm
Jan 29 2018 21:01
@julicheng Use the function parameter not the global
Kyle Holm
@thekholm80
Jan 29 2018 21:14
@coymeetsworld that's the es6 nested destructuring. it's kind of ugly but it works
Ghost
@ghost~5a3ac208d73408ce4f843d6a
Jan 29 2018 21:20
Thanks @DarrenfJ and @kbaig I did it via import
CamperBot
@camperbot
Jan 29 2018 21:20
webdevdeja sends brownie points to @darrenfj and @kbaig :sparkles: :thumbsup: :sparkles:
:cookie: 562 | @kbaig |http://www.freecodecamp.org/kbaig
:star2: 2365 | @darrenfj |http://www.freecodecamp.org/darrenfj
Juli Cheng
@julicheng
Jan 29 2018 21:21
@coymeetsworld hi what do you mean it doesn't look right?
Ghost
@ghost~5a3ac208d73408ce4f843d6a
Jan 29 2018 21:21
I have another question about atom
Juli Cheng
@julicheng
Jan 29 2018 21:21
@sjames1958gm i've changed the line to
const { tomorrow : { min : minOfTomorrow, max : maxOfTomorrow }} = forecast;
Kyle Holm
@thekholm80
Jan 29 2018 21:22
@julicheng i think if you take out the min: minOfTomorrow, you should be good
Juli Cheng
@julicheng
Jan 29 2018 21:22
@thekholm80 thank you! it works now :smile:
CamperBot
@camperbot
Jan 29 2018 21:22
julicheng sends brownie points to @thekholm80 :sparkles: :thumbsup: :sparkles:
:star2: 1677 | @thekholm80 |http://www.freecodecamp.org/thekholm80
Kyle Holm
@thekholm80
Jan 29 2018 21:22
@julicheng :+1:
Juli Cheng
@julicheng
Jan 29 2018 21:23
@thekholm80 is it because the question only asked for max not min?
Kyle Holm
@thekholm80
Jan 29 2018 21:23
yep
you created a variable called minOfTomorrow that wasn't needed
Juli Cheng
@julicheng
Jan 29 2018 21:24
@thekholm80 ok thanks for clarification :clap:
CamperBot
@camperbot
Jan 29 2018 21:24
julicheng sends brownie points to @thekholm80 :sparkles: :thumbsup: :sparkles:
api offline
Ghost
@ghost~5a3ac208d73408ce4f843d6a
Jan 29 2018 21:25
there is a horizontal line going down the editor, why and how do i get rid of it?
Kyle Holm
@thekholm80
Jan 29 2018 21:35
@WebDevDeja can you take a screen shot so I can see what you're referring to?
seemotions
@seemotions
Jan 29 2018 21:35
I'm sorry if this is stupid question but may i ask how do i post my bit of code here?
Kyle Holm
@thekholm80
Jan 29 2018 21:35
`` inline code `` looks like inline code
```
block of code
```
looks like
block of code
Stephen James
@sjames1958gm
Jan 29 2018 21:36
seemotions
@seemotions
Jan 29 2018 21:36
""
ups
Stephen James
@sjames1958gm
Jan 29 2018 21:37
@seemotions three backticks (on their own line) ` these are backticks not ' or "
seemotions
@seemotions
Jan 29 2018 21:38
<script> $(document).ready(function) ( { } ); </script>
Kyle Holm
@thekholm80
Jan 29 2018 21:39
there you go
seemotions
@seemotions
Jan 29 2018 21:39
:D thanks
so where is my mistake
Kyle Holm
@thekholm80
Jan 29 2018 21:39
function) ( should be function ()
seemotions
@seemotions
Jan 29 2018 21:41
Oh I'm really sorry for wasting you time and thanks!
Kyle Holm
@thekholm80
Jan 29 2018 21:41
@seemotions not wasting time, learning
seemotions
@seemotions
Jan 29 2018 21:41
@thekholm80 even bigger thanks then
CamperBot
@camperbot
Jan 29 2018 21:41
seemotions sends brownie points to @thekholm80 :sparkles: :thumbsup: :sparkles:
:star2: 1678 | @thekholm80 |http://www.freecodecamp.org/thekholm80
swoonvin
@swoonvin
Jan 29 2018 23:07
im stuck on this portfolio challenge. Can anyone give me a hint on what I'm doing wrong here? I'm having trouble with navbar and functioning it to go down to the designated page.
Alexander Jarman
@HeinousTugboat
Jan 29 2018 23:10
@swoonvin Here you go. You need to set up an id on the section and then link to it.
swoonvin
@swoonvin
Jan 29 2018 23:14
I did. But the portfolio section is not working. I tried <div class="container-fluid bg-3 text-center" id= "Portfoilio"> but does not work. About section works fine.
Alexander Jarman
@HeinousTugboat
Jan 29 2018 23:15
<a id="Portfolio" href="#">Portfolio</a>
The id should be on the element you're linking to, and then the href should be #Portfolio.
Darren
@DarrenfJ
Jan 29 2018 23:19
@WebDevDeja late reply on my end but virtual high five right on
Bjorn van de Peut
@bjorno43
Jan 29 2018 23:22
@DarrenfJ :wave: Just sent you a PM