These are chat archives for FreeCodeCamp/Help

5th
Jan 2019
Anand Potukuchi
@anandpotukchi
Jan 05 05:08
hi
Anand Potukuchi
@anandpotukchi
Jan 05 05:20
anyone online
psyperl
@psyperl
Jan 05 05:23
anybody home?
I am online, just trying to debug some code @anandpotukchi
Anand Potukuchi
@anandpotukchi
Jan 05 05:25
i'm bored
psyperl
@psyperl
Jan 05 05:25
maybe do some freeCodeCamp challenges?
Anand Potukuchi
@anandpotukchi
Jan 05 05:29
nah
Aditya
@ezioda004
Jan 05 06:45
:pencil:
Anand Potukuchi
@anandpotukchi
Jan 05 06:52
@ezioda004 can you help me with a little project
or are you at work
Aditya
@ezioda004
Jan 05 06:53
Probably not - I have a lot of work today
Anand Potukuchi
@anandpotukchi
Jan 05 06:54
its just a a small question
anyone else here know express
Aditya
@ezioda004
Jan 05 06:54
What in express?
Anand Potukuchi
@anandpotukchi
Jan 05 06:54
express js
Aditya
@ezioda004
Jan 05 06:55
Just ask the question
this is the repo
tried improting to glitch
so the question is
i have a toodo app
and there's a table of tasks
and there's a edit icon - on click opnes modal
Aditya
@ezioda004
Jan 05 06:56
Gitignore your .env file
Anand Potukuchi
@anandpotukchi
Jan 05 06:57
now - i wanr to display the currrent vakue o each field
based on row
like each item
Aditya
@ezioda004
Jan 05 06:58
Ok and
Anand Potukuchi
@anandpotukchi
Jan 05 06:59
tried using {{ each }}
just put it in the same block as the items display
Aditya
@ezioda004
Jan 05 06:59
Whats that? Handlebars?
Anand Potukuchi
@anandpotukchi
Jan 05 06:59
isnt working
yeah
Aditya
@ezioda004
Jan 05 07:00
Idk handlebars, sorry
Anand Potukuchi
@anandpotukchi
Jan 05 07:00
..................
Kranti Nebhwani
@darkphotonKN
Jan 05 07:22

@ezioda004 hey man, trying to get a counter to work in one of my projects written in react, I abstracted the timer to show you the issue here:

import React, { Component } from 'react';

class App extends Component {
  state = {};

  componentDidMount() {
    this.count(); // start date counter
  }

  getTime = () => {
    let hours, mins, secs;
    const date = new Date();

    hours = date.getHours();
    mins = date.getMinutes() < 10 ? `0${date.getMinutes()}` : date.getMinutes();
    secs = date.getSeconds() < 10 ? `0${date.getSeconds()}` : date.getSeconds();

    return `${hours}:${mins}:${secs}`;
  };

  count = () => {
    setInterval(() => {
      this.setState({
        time: this.getTime()
      });
    }, 1000);
  };

  render() {
    console.log('second past', this.state.time);
    return (
      <div className="app">
        <div className="hub-title">{this.state.time}</div>
      </div>
    );
  }
}

export default App;

Right now the timer appears and counts as I set a new state every interval second with the current time hours, minutes and seconds, but the problem is right now the very first second it is undefined and hence the timer doesn't show. How do I get the timer to show the instant the page loads?

So the page is empty for a second, then the timer appears and starts counting
Aditya
@ezioda004
Jan 05 07:28
@darkphotonKN Initialise the state with some time?
Kranti Nebhwani
@darkphotonKN
Jan 05 07:29
@ezioda004 that's the only way?
Aditya
@ezioda004
Jan 05 07:29
@darkphotonKN Thats the easiest way :D
Kranti Nebhwani
@darkphotonKN
Jan 05 07:30
@ezioda004 haha ok ill stick to that for now, thanks
Aditya
@ezioda004
Jan 05 07:32
Anyone good with math and paperjs?
Kranti Nebhwani
@darkphotonKN
Jan 05 07:35
@ezioda004 hmm but i need to do date = new Date() then date.getMinutes etc before I set the current time in state, how can i do that as the initial state before component even mounts
@ezioda004 usually it;s just state = { someState: 'x' } where 'x' is the initial value or i set the initial via componentDidMount but i haven't met this situation where i need to instantiate a new object and run some functions before setting initial state
Aditya
@ezioda004
Jan 05 07:37
@darkphotonKN Have getTime before state then you can do
state =  {
  time: this.getTime()
};
Kranti Nebhwani
@darkphotonKN
Jan 05 07:38
@ezioda004 ok, but that feels like a bad practice having functions before state = {}, or am i wrong
yep it works if i put getTime above, it was undefined before and I knew that would be a fix but it felt ''wrong'' lol
putting getTime in a seperate js file and importing it :D?
Aditya
@ezioda004
Jan 05 07:39
Why'd that be a bad practice? Previously we used to initialize state like:
class X {
  constructor(props){
    this.someDepedency;
    this.state = {};
  }
}
Its just syntactic sugar for this only
Kranti Nebhwani
@darkphotonKN
Jan 05 07:40
hmm i don't know, usually state has been the first thing in my react class components, i guess you're right
Aditya
@ezioda004
Jan 05 07:40
I guess you can import that
Just make sure the imported arrow function doesnt have this
Kranti Nebhwani
@darkphotonKN
Jan 05 07:41
ok cool thx bro
Aditya
@ezioda004
Jan 05 07:41
Or...you can use a static field!
Kranti Nebhwani
@darkphotonKN
Jan 05 07:42
@ezioda004 like static getTime = () => {}?
Aditya
@ezioda004
Jan 05 07:42
Exactly, as its not something each instances need
Kranti Nebhwani
@darkphotonKN
Jan 05 07:43
@ezioda004 and do you think it's bad what im doign with setting the state every second with a new time found with date.getMinutes(), date.getSeconds etc?
Aditya
@ezioda004
Jan 05 07:45
@darkphotonKN Nah, I think its fine, just make sure you dont leak memory
Since you arent not clearing the interval
Kranti Nebhwani
@darkphotonKN
Jan 05 07:46
@ezioda004 cool, the double negation there got me confused at first but i gotcha
Aditya
@ezioda004
Jan 05 07:54
@darkphotonKN FYI - this is how you'd do it with static fields:
import React, { Component } from 'react';

class App extends Component {

  static getTime = () => {
    let hours, mins, secs;
    const date = new Date();

    hours = date.getHours();
    mins = date.getMinutes() < 10 ? `0${date.getMinutes()}` : date.getMinutes();
    secs = date.getSeconds() < 10 ? `0${date.getSeconds()}` : date.getSeconds();

    return `${hours}:${mins}:${secs}`;
  };

  state = {
    time: App.getTime()
  };

  componentDidMount() {
    this.count(); // start date counter
  }


  count = () => {
    setInterval(() => {
      this.setState({
        time: App.getTime()
      });
    }, 1000);
  };
Notice the App.getTime(), sadly theres no "dynamic" way to get the static fields
I guess theres no reason to use fields, you can just method:
 static getTime() {

}
Kranti Nebhwani
@darkphotonKN
Jan 05 07:57
@ezioda004 awesome!! ill use it this way
and speaking of clearing stuff to prevent memory leaks, ive only had to clear event listeners in componentWillUnmount (or componentDidUnmount, forgot which), what are other situations I should do it? you seem to know this stuff
Aditya
@ezioda004
Jan 05 08:03
@darkphotonKN If you're adding event listeners on window object then yeah clear those in componentWillUnmount and setInterval is another that should be cleared, aside from that if you have any async subscription then you can clear those there too
Kranti Nebhwani
@darkphotonKN
Jan 05 08:08
@ezioda004 :thumbsup:
Anand Potukuchi
@anandpotukchi
Jan 05 12:42
@cmccormack are you online
anybody good with BOTH express and handlebars
Anand Potukuchi
@anandpotukchi
Jan 05 14:03
?
toto220
@toto220
Jan 05 15:38
hey
<div class="fullCard" id="thumbnail">
<div class="fullCard" id="thumbnail"> i should add "box-shadow" property to this code, how can i do this?
anybody there
May Kittens Devour Your Soul
@diomed
Jan 05 15:50
@toto220 add it as second class, I guess
or add it in css under
#thumbnail {box-shadow: ....}
or under
.fullCard {box-shadow: ...}
depends what you like it to look like
toto220
@toto220
Jan 05 15:53
@diomed tnx, but in this challenge i dont have any value to put on 'box-shadow'
i think your soulotion is wrong
but tnx a lot man
May Kittens Devour Your Soul
@diomed
Jan 05 15:58
@toto220 can you link me to your challenge
I didnt know it was specific challenge
Kshitiz
@kshtzsharma48
Jan 05 16:01
Which one should I learn first es5 or es6 or es I am very much confused
Es7
@diomed tnx bro for your answer, if you can help me pls
Kshitiz
@kshtzsharma48
Jan 05 16:03
Can u please help me also
I don't know which one should I learn first es5 or es6 or es7
toto220
@toto220
Jan 05 16:04
@kshtzsharma48 what is es?
Kshitiz
@kshtzsharma48
Jan 05 16:04
Evam script
Evam script
Ecma script
toto220
@toto220
Jan 05 16:05
@kshtzsharma48 i have no idea about this
Kshitiz
@kshtzsharma48
Jan 05 16:05
Ok
toto220
@toto220
Jan 05 16:05
@kshtzsharma48 wish u find your best way man
Kshitiz
@kshtzsharma48
Jan 05 16:06
I don't know which one should I learn first es5 or es6 or es7
May Kittens Devour Your Soul
@diomed
Jan 05 16:07
@toto220 The element now has an id of thumbnail. With this selector, use the example CSS values above to place a box-shadow on the card.
do you know how to write id in style?
psyperl
@psyperl
Jan 05 16:10
@kshtzsharma48 maybe this video could help? https://www.youtube.com/watch?v=nZ1DMMsyVyI
Niraj Nandish
@Nirajn2311
Jan 05 16:10
@diomed whats with the fangs :cat:
May Kittens Devour Your Soul
@diomed
Jan 05 16:12
@Nirajn2311 it's not the fangs that matter, it's the eyes
they're looking @ vue ;)
May Kittens Devour Your Soul
@diomed
Jan 05 16:29
@Nirajn2311 do you wanna play hangman?
Niraj Nandish
@Nirajn2311
Jan 05 17:35
@diomed yes
alpox
@alpox
Jan 05 17:54
@kshtzsharma48 es5 first. Learn the new features of es6 and es7 later
toto220
@toto220
Jan 05 21:30
@diomed tnx a lot bro, i solved this challenge
@diomed """#thumbnail {box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);}"""