These are chat archives for FreeCodeCamp/Help

6th
Mar 2019
Kaylee
@kaymonlee
Mar 06 03:37
@cmccormack thank you!
笨蛋音速君
@sonicbaka
Mar 06 04:02
...
nsonhouse
@nsonhouse
Mar 06 04:23
Can someone advise me on WTH I am doing wrong? I am trying to add an event listener to the input field and make it equivalent to an onclick.
<script>             
        document.getElementById("btn").addEventListener("click", isLeap);

        const input = document.getElementById("leap-year");
        input.addEventListener('keyup', function(e){
            e.preventDefault();
            if(e.keyCode === 13)  {
                document.getElementById("btn").addEventListener("click", isLeap);
            }
        });

        const outputDiv = document.getElementById("output");      
        let count = 0;
        function isLeap() {
            let year = document.getElementById("leap-year").value;  
            var p = document.createElement("p");         

            if( (year % 4) === 0){
                p.textContent = year + " is a leap year.";
                outputDiv.appendChild(p);
            }
            else{
                p.textContent = year + " is not a leap year.";
                outputDiv.appendChild(p);
            }  
            count++;
            if (count === 5){
                outputDiv.innerHTML = "";
                count == 0;
            }        
        }
    </script>
Kaz Baig
@kbaig
Mar 06 04:33
@nsonhouse somewhat unrelated to your question, but you should prob do form onsubmit rather than on pressing enter
I would check in dev tools whether or not the listener is being applied
inspect element -> elements tab -> event listeners subtab
kinopotato
@kinopotato
Mar 06 04:51
hello people. any good resource you can recommend regarding coding patterns for JS? a full tutorial would be nice even if paid :D
Henry
@GitHub-Henry
Mar 06 04:58
There are many patterns out there, what are you looking to do?
kinopotato
@kinopotato
Mar 06 04:59
just improve my overall coding? it's currently spaghetti
nsonhouse
@nsonhouse
Mar 06 05:01
@kbaig I am in the tab. At the bottom it says No event listeners.
Henry
@GitHub-Henry
Mar 06 05:01
@kinopotato perhaps something like this may be of interest https://addyosmani.com/resources/essentialjsdesignpatterns/book/
kinopotato
@kinopotato
Mar 06 05:02
thanks mate! 8D I'll read this for sure
Kaz Baig
@kbaig
Mar 06 05:08
@nsonhouse can you provide the markup
nsonhouse
@nsonhouse
Mar 06 05:10
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Leap Year</title>
</head>
<body>   

    <div id="ly-area">
          <p>Is it a leap year?</p>    
        <form>
              Enter a year:<br>
              <input type="number" id="leap-year"><br>               
        </form>
    </div>
    <br>

    <div id="button-area">
        <button id="btn">LEAP</button>
    </div>
    <br>

    <div id="output"></div>

    <script>             
        document.getElementById("btn").addEventListener("click", isLeap);

        //error in script
        //enter key not triggering function

        const input = document.getElementById("leap-year");
        input.addEventListener('keyup', function(e){
            e.preventDefault();
            if(e.keyCode === 13)  {
                document.getElementById("btn").addEventListener("click", isLeap);
            }
        });


        const outputDiv = document.getElementById("output");      
        let count = 0;
        function isLeap() {
            let year = document.getElementById("leap-year").value;  
            var p = document.createElement("p");         

            if( (year % 4) === 0){
                p.textContent = year + " is a leap year.";
                outputDiv.appendChild(p);
            }
            else{
                p.textContent = year + " is not a leap year.";
                outputDiv.appendChild(p);
            }  
            count++;
            if (count === 5){
                outputDiv.innerHTML = "";
                count == 0;
            }        
        }
    </script>

</body>
</html>
Kranti Nebhwani
@darkphotonKN
Mar 06 05:15

anyone familiar with Redux (for react or otherwise, don't think it matters in this case) can help me, this is my reducer code:

const todoList = [];

export default (state = todoList, action) => {
  switch (action.type) {
    case 'GET_LIST':
      return todoList;

    case 'ADD_TODO':
      todoList.push(action.payload);

      return todoList;

    case 'DELETE_TODO':
      console.log(todoList);
      const todo = todoList.find((todo) => todo.name === action.payload.name);

      const index = todoList.indexOf(todo);

      if (index) return todoList.slice(index, index + 1);
      else return todoList;

    default:
      return state;
  }
};

I'm using a local array to act as the DB for now as i get the redux process down, so the array is todoList at the top. The GET_LIST, and ADD_TODO works in this reducer but DELETE_TODO is not working for some reason.

Kaz Baig
@kbaig
Mar 06 05:33
@darkphotonKN you need to treat your reducer as a pure function. So instead return toDoList, you need to do return state. Instead of toDolist.push(action.payload);, you need to return [...state, action.payload] etc
You need to return your new full state every time the reducer is called. You don't need to have something like a local datastore. Redux manages the state changes for you
So you need to make a similar change as the ones I suggested above for case 'DELETE_TODO'
BuntyBru
@BuntyBru
Mar 06 05:39
Hi guys,
I am currently working as a front end developer
and now i am looking to switching my job due to 'x' reasons

I have started my preparations, But still I am not confident over things
any points from your side regarding preparation would help 

Thanks
Kranti Nebhwani
@darkphotonKN
Mar 06 05:43
@kbaig ah ok so where is this local datastore?
Aditya
@ezioda004
Mar 06 05:43
@BuntyBru You got this man, good luck with the search!
Kaz Baig
@kbaig
Mar 06 05:43
@darkphotonKN the 'local datastore' is created and handled by redux
Kranti Nebhwani
@darkphotonKN
Mar 06 05:43
@ezioda004 been a while man you doing ok?
Aditya
@ezioda004
Mar 06 05:44
@darkphotonKN Hey, yeah I'm alright - just dont get a lot of time to spend here. How are you?
Kranti Nebhwani
@darkphotonKN
Mar 06 05:46
@kbaig so i could for example in the reducer return state without ever specifying what state is or has and it would work and just be empty?
Kaz Baig
@kbaig
Mar 06 05:46
@darkphotonKN you already specified that it would be an empty array when you defined the function with the default value for state
Kranti Nebhwani
@darkphotonKN
Mar 06 05:47
@ezioda004 thats good man, need some time for yourself though or you'll go crazy man. Our small team at work got this pretty cool nextjs application going, you shoudl check out nextjs, server side rendered react its pretty awesome and extremely easy to set up
Aditya
@ezioda004
Mar 06 05:48
@darkphotonKN Thats great! We're also planning to use next.js to migrate bunch of old codebases from jsp to node
Kranti Nebhwani
@darkphotonKN
Mar 06 05:48
@kbaig so do i need to return the entire state after doing stuff in any certain switch case or I could return part of the state
Kaz Baig
@kbaig
Mar 06 05:49
@darkphotonKN always return the whole new state
Kranti Nebhwani
@darkphotonKN
Mar 06 05:49
@kbaig so what if i wanted to just fetch one item from the redux store state
Aditya
@ezioda004
Mar 06 05:50
The most confusing part of redux is people often get confused with state and store, state is a subset of store, each reducer handles only one state
Kaz Baig
@kbaig
Mar 06 05:50
Redux should give you access to state without having to dispatch an action
Kranti Nebhwani
@darkphotonKN
Mar 06 05:50
lol yeah im really confused right now just started learning it
@kbaig its just for learning my friend
@kbaig but say if for example you needed to dispatch and action before fetching a single state property because what yoou fetched depended on some logic, what then?
when you dispatch and action you always update and return the entire state in some way in your reducer?
Aditya
@ezioda004
Mar 06 05:52
@darkphotonKN Do you just want to read the state?
Kaz Baig
@kbaig
Mar 06 05:52
yes, an action is only to modify state in some way
if you just want to read the state, you should have it as a prop to your component by subscribing to the store
Aditya
@ezioda004
Mar 06 05:53
^^
Kaz Baig
@kbaig
Mar 06 05:53
@ezioda004 I presume you use redux so help me out pls if you see that I'm wrong
I don't use it
Kranti Nebhwani
@darkphotonKN
Mar 06 05:54

@ezioda004 after learning it for about 20 mins i came up with a test app and this is what i got in my reducer:

const todoList = [];

export default (state = todoList, action) => {
  switch (action.type) {
    case 'GET_LIST':
      return todoList;

    case 'ADD_TODO':
      return [action.payload, ...todoList];

    case 'DELETE_TODO':
      console.log(todoList);
      const todo = todoList.find((todo) => todo.name === action.payload.name);

      const index = todoList.indexOf(todo);

      if (index) return todoList.slice(index, index + 1);
      else return todoList;

    default:
      return state;
  }
};

kbaig has pointed out that i dont put a local state todoList even if its just for testing purposes, so I should return state instead of return todoList

Aditya
@ezioda004
Mar 06 05:54
@kbaig Nah, you're absolutely correct
Kranti Nebhwani
@darkphotonKN
Mar 06 05:55
@ezioda004 @kbaig so i shouldnt have that GET_LIST in any application to return the state?
yeah i did connect to state actually, and i can access it with this.props.todoList currently
Aditya
@ezioda004
Mar 06 05:56
@darkphotonKN You shouldnt be using GET_LIST, think of redux store as a database, you can access state in your component by using mapStateToProps
Kranti Nebhwani
@darkphotonKN
Mar 06 05:56
yep i did that
Kaz Baig
@kbaig
Mar 06 05:57
reading props is how you access state
Kranti Nebhwani
@darkphotonKN
Mar 06 05:57
now i can access with this.props.todoList. so dispatching an action, and using reducer to do something is just to change state
Kaz Baig
@kbaig
Mar 06 05:58
you shouldn't ever be doing const x = dispatch({type: 'ADD_TODO', 'hello world' });
calling dispatch would mean the state will change automatically, so props will change, so rendered output will change
Kranti Nebhwani
@darkphotonKN
Mar 06 05:58
ok yeah im doing this.props.deleteTodo('Test')
so i just need to fix how my DELETE_TODO works
@kbaig so in my DELETE_TODO case i treat state like an immutable property, and return the entire state once done
Kaz Baig
@kbaig
Mar 06 06:00
correct
Kranti Nebhwani
@darkphotonKN
Mar 06 06:01
in a tutorial i saw instead of returning state - where he does in one of the cases - he returned action.payload in a case where he fetched data from an api with redux thunk
whats this special case then
Kaz Baig
@kbaig
Mar 06 06:01
must be that action.payload is the whole new state, because he probably doing a refresh data action
Kranti Nebhwani
@darkphotonKN
Mar 06 06:02
export default (state = [], action) => {
  // if matches 'FETCH_POSTS' we got the response data from //json api
  switch (action.type) {
    case 'FETCH_POSTS':
      return action.payload; // becomes new state

    // else default is just returning current state
    default:
      return state;


  }
};
so the data here is coming from an external api
Kaz Baig
@kbaig
Mar 06 06:02
they must be fetching the data once the component mounts
Kranti Nebhwani
@darkphotonKN
Mar 06 06:04
yep i think, action is:
export const fetchPosts = () => async (dispatch, getState) => {
  const response = await jsonPlaceholder.get('/posts');



  dispatch({ type: 'FETCH_POSTS', payload: response });
};
Aditya
@ezioda004
Mar 06 06:04
@darkphotonKN That is fine to do, there are two patterns, sometimes people directly send new data from the component, example: this.props.fetchPosts([...this.props.getFetchPosts, "new data"]). Other way is doing this pure function logic inside the reducer
Kranti Nebhwani
@darkphotonKN
Mar 06 06:05
@ezioda004 aahhhhh ok
sweet ok its starting to click alread
its also kinda confusing without seeing my state written out somewhere like usual
Kaz Baig
@kbaig
Mar 06 06:06
you'd really only do the dispatching fetchPosts thing if you're relying in a side effect for your state
Aditya
@ezioda004
Mar 06 06:07
@darkphotonKN Highly recommend installing redux dev tools, you can see all the states there
Other primitive way is to do store.getStates(); but I wont recommend that
Kranti Nebhwani
@darkphotonKN
Mar 06 06:13
@ezioda004 done! thanks
@kbaig thanks a lot too man i got it
@ezioda004 not gonna lie my debugging and progress has waned a little since you stopped being here all the time haha
Aditya
@ezioda004
Mar 06 06:15
@darkphotonKN Thats another reason to visit often then :D
Kranti Nebhwani
@darkphotonKN
Mar 06 06:21
haha yep
Kranti Nebhwani
@darkphotonKN
Mar 06 06:38
@kbaig i changed the todo.push(action.payload)then return todoList in my ADD_TODO to simply: return [action.payload, ...todoList]; but now its returning one item short each time
Kranti Nebhwani
@darkphotonKN
Mar 06 06:44
e.g. if i add 3 items via the action, and my list is rendering the this.props.todoList that i got from store (which I have connected to redux store correctly), it renders one item short
    case 'ADD_TODO':
      return state.push(action.payload);
Won't be render one short, but obviously we shouldnt use .push if it's supposed to be immuteable
BuntyBru
@BuntyBru
Mar 06 07:12
@ezioda004
any tips
I would love to have some mock interviews
and what are the questions asked these days
Henry
@GitHub-Henry
Mar 06 07:37
@BuntyBru perhaps https://www.hackerrank.com/ could help you prepare for coding interviews
BuntyBru
@BuntyBru
Mar 06 08:43
@GitHub-Henry
working on it already
Eunice Park
@eunicode
Mar 06 17:11
@ezioda004 I've mostly been in discord servers (SpeakJS, Reactiflux, Programming Discussions), and it looks like you're busy now, and won't be here often :disappointed: do you have a twitter at least where I could follow you?
BuntyBru
@BuntyBru
Mar 06 18:18
@GitHub-Henry thanks
Engjell Bislimi
@Engjell00
Mar 06 19:20
image.png
I have an issue with this drop-down menu and I can go up to the second row but if i try to select the third one it disappears
Aditya
@ezioda004
Mar 06 19:29
@BuntyBru The interview varies from company to company, but I'd expect basic knowledge of DSA and good grasp over JS fundamental to be a good start for a frontend position
@eunicode Hi, I dont have twitter sorry but I'll try to be here more often from now on. By the looks of it, this room is barely active tho
Eunice Park
@eunicode
Mar 06 20:12

@ezioda004 Hi!! I highly recommend you join Reactiflux on Discord
https://www.reactiflux.com/
it's a huge React community with over 50,000 members. And they have Q&A's with famous developers like Dan Abramov. In fact, Kent C. Dodds will be doing a Q&A this month.
https://www.reactiflux.com/schedule/

I also recommend SpeakJS and Programming Discussions. They are also active communities.
https://discordapp.com/invite/dAF4F28 (from reddit.com/r/javascript)
https://discordapp.com/invite/9zT7NHP (from reddit.com/r/learnprogramming)
(I hope those links are right, if they're not, you can just google "discord ___")

Maybe I can see you and other folks in Discord, at least.
I already miss so many people like Sky.

Christopher McCormack
@cmccormack
Mar 06 20:14
Reactiflux is alright but their conversations usually aren't that compelling, I drop in and out once in a while.
Eunice Park
@eunicode
Mar 06 20:16
Well, tbh I only go there to ask Javascript/React questions; since there are so many members, one of them will usually have the answer
Aditya
@ezioda004
Mar 06 20:17
@eunicode Havent used discord in a long time but may start using it again. Thanks for the links!
Eunice Park
@eunicode
Mar 06 20:21

@ezioda004 No problem! There's also an active Discord server called CS Career Hackers for job advice that's related to reddit.com/r/cscareerquestions

And there are also communities on Slack such as Learn Teach Code, Interview Cake, Wes Bos, and CodeNewbie.

Aditya
@ezioda004
Mar 06 20:23
Thats a lot of communities, but none like fcc :disappointed:
Eunice Park
@eunicode
Mar 06 20:27
I love this FCC community, you guys helped me so much when I was just beginning to learn to code. In fact this was the first community I joined and I was so surprised there were people that would volunteer their time to answer questions. This community is smaller so it feels more like family, and it makes me sad when people disappear. But I'm guilty of that too. It's a shame FCC doesn't promote gitter anymore.
Christopher McCormack
@cmccormack
Mar 06 20:29
I like it small, sometimes it's too small but you should have seen it before they moved the gitter link, it was basically the same questions constantly flooding the channels
people had bots or good copy/paste scripts to answer questions without really even having to look at them because they were always the same issue
Eunice Park
@eunicode
Mar 06 20:33
I've been here since 2017, but I usually only popped in to ask questions. I can imagine it must have been wild and chaotic. But now I feel like this place is slowly dying? Once people get jobs, they'll be busy and visit less, and there needs to be new people to join and take up those roles
Aditya
@ezioda004
Mar 06 20:33
Still I never felt like it was too "big" or something, but yes it sucks that fcc doesnt promote gitter and I still think being a part of an active community plays a huge role while learning
While I get why they'd promote forums, its far different from something like gitter/slack/discord.
Oh yes, it used to be wild and chaotic but it wasnt that bad (maybe I'm forgetting something :sweat_smile:)
Kaz Baig
@kbaig
Mar 06 20:36
it was fun
Eunice Park
@eunicode
Mar 06 20:36
I guess live chatting mediums like gitter would be harder to moderate. But I'm an impatient person, so I always preferred asking questions on gitter to forums
Christopher McCormack
@cmccormack
Mar 06 20:38
honestly if the conversation was much more lively I wouldn't be able to get much work done during the day :) Helps to be in several channels if you want to find conversation though
Aditya
@ezioda004
Mar 06 20:41
Thats better than nothing!
Eunice Park
@eunicode
Mar 06 20:49
Eh, I guess I'm being uselessly nostalgic. I just have good memories associated with certain avatars. Even if I only popped in here once in a blue moon.
Aditya
@ezioda004
Mar 06 20:53
I feel ya, it was fun while it lasted
Christopher McCormack
@cmccormack
Mar 06 21:03
I mean, it's not like it's gone :)