These are chat archives for FreeCodeCamp/HelpJavaScript

11th
Feb 2018
Long Nguyen
@longnt80
Feb 11 2018 02:10 UTC

anyone encouter this problem:

$('#theButton').on('click', function() {
    $(this).removeClass('is--visible');
    asyncFunc();
});

when I clicked the button element, the class is--visible is removed but the element did not disappear right away. Instead, it waited for the asyncFunc to finish then disappear

Adam Faraj
@adamfaraj
Feb 11 2018 02:18 UTC
where is asyncFunc() being called?
@longnt80
on another note, i need help refactoring a block of code
i want to refactor this:
    $modalInput[0].addEventListener('keyup', function() {
            if($modalInput[0].checkValidity() == true){
                $modalForm[0].setAttribute("src", 'src/images/checkmark-circle.png');

            } else {
                $modalForm[0].setAttribute("src", 'src/images/circle-form.png');
            };

        })

        // //check if user entered a phone number
        $modalInput[1].addEventListener('keyup', function() {
            if($modalInput[1].checkValidity() == true && $modalInput[1].value.length == 10){
                $modalForm[1].setAttribute("src", 'src/images/checkmark-circle.png');
            } else {
                $modalForm[1].setAttribute("src", 'src/images/circle-form.png');
            };

        })

        // //check if user entered an email
        $modalInput[2].addEventListener('keyup', function() {
            if($modalInput[2].checkValidity() == true){
                $modalForm[2].setAttribute("src", 'src/images/checkmark-circle.png');
            } else {
                $modalForm[2].setAttribute("src", 'src/images/circle-form.png');
            };

        })
into a smaller chunk
Long Nguyen
@longnt80
Feb 11 2018 02:21 UTC
@adamfaraj what do you mean? It is called inside the callback above
Adam Faraj
@adamfaraj
Feb 11 2018 02:21 UTC
i tried:
    for (var i = 0; i < $modalInput.length; i++) {
            $modalInput[i].addEventListener('keyup', function() {
                if($modalInput[i].checkValidity() == true) {
                    for (var j = 0; j < $modalForm.length; j++) {
                        $modalForm[j].setAttribute('src', 'src/images/checkmark-circle.png');
                    }
                } else {
                    $modalForm[j].setAttribute('src', 'src/images/circle-form/png');
                }
            })
        }
but it doesn't take
@longnt80 i don't see it
abraham anak agung
@padunk
Feb 11 2018 02:32 UTC
@longnt80 what is asyncFunc() code is?
Long Nguyen
@longnt80
Feb 11 2018 02:33 UTC
asyncFunc has some ajax calls inside
abraham anak agung
@padunk
Feb 11 2018 02:36 UTC
Never encounter it before, try to call asyncFunc in another function maybe?
Long Nguyen
@longnt80
Feb 11 2018 02:38 UTC
yeah, that's what I did using setTimeout
$('#theButton').on('click', function() {
    $(this).removeClass('is--visible');
    setTimeout(asyncFunc, 100);
});
this fixed the problem
however, I don't feel good about this solution
abraham anak agung
@padunk
Feb 11 2018 02:39 UTC
:thumbsup:
@adamfaraj you don't need two loops
Adam Faraj
@adamfaraj
Feb 11 2018 02:41 UTC
@padunk
<div class="modal__form-input-title">
    <span class="modal_spans modal_form-name-span">First and Last Name</span>
    <img src="src/images/circle-form.png" class="modal__form--invalid">
</div>
<input type="text" id="modalName" name="name" class="modal__input modal_form-container-name form-control form-control-success" required>
<div class="modal__form-input-title" id="modal__form-input-phone">
        <span class="modal_spans modal_form-phone-span">Phone number</span>
       <img src="src/images/circle-form.png" class="modal__form--invalid">
</div>
<input type="tel" name="phoneNumber" class="modal__input modal_form-container-phone" maxlength = "10" required>
<div class="modal__form-input-title">
    <span class="modal_spans modal_form-email-span">Email address</span>
    <img src="src/images/circle-form.png" class="modal__form--invalid">
</div>
<input type="email" name="email" class="modal__input modal_form-container-email form-control form-control-success" required>
but i have two arrays i need to loop through?
or maybe i dont
haha
idk
var $modalInput = $('.modal__input');
        var $modalForm = $('.modal__form--invalid');
abraham anak agung
@padunk
Feb 11 2018 02:42 UTC
They have same length? @adamfaraj
Adam Faraj
@adamfaraj
Feb 11 2018 02:44 UTC
@padunk yeah
i think so
Grant Clark
@kwdzr3
Feb 11 2018 03:13 UTC
A good 15 minutes research into switches finally led me to the solution -- all my answer strings were capitalized when they weren't supposed to be. just another day coding friends
Amit Patel
@AmitP88
Feb 11 2018 06:53 UTC

hey all, I need a little help with my Local Weather App. I'm nearly done, but I'm having trouble getting the F to C function to work right. It'll switch F to C just fine, but it won't switch back on the 2nd click. I can't figure out what I'm doing wrong, and I've been at it for a few hours now. Any help will be highly appreciated

https://codepen.io/AmitP88/pen/QQpNKp?editors=0010

Stephen James
@sjames1958gm
Feb 11 2018 11:38 UTC
@AmitP88 Looks like you got it working :+1:
hanhuiqing
@newsuperman2018
Feb 11 2018 13:36 UTC
Stand in Line
Gulsvi
@gulsvi
Feb 11 2018 17:24 UTC

@AmitP88 You got it, but one suggestion: It's an anti-pattern to check if a variable is true/false with ===. Just do if(celsius) and that will return true/false. And, no need to do an else if, just use else since there are only two possible values.

  if (celsius) {
    temperature.innerHTML = F;
    celsius = false;
  } else {
    temperature.innerHTML = C;
    celsius = true;
  }

Also, since you're using jQuery, use it :) instead of .innerHTML, use .html()

Amit Patel
@AmitP88
Feb 11 2018 18:57 UTC
@gulsvi thanks for the suggestions :)
CamperBot
@camperbot
Feb 11 2018 18:57 UTC
amitp88 sends brownie points to @gulsvi :sparkles: :thumbsup: :sparkles:
:star2: 2600 | @gulsvi |http://www.freecodecamp.org/gulsvi
Tiago Correia
@tiagocorreiaalmeida
Feb 11 2018 19:34 UTC
            async (username, password, done) => {
                try {
                    let user = await User.findOne({ email: username });
                    if (
                        user &&
                        bcrypt.compareSync(password, user.password) &&
                        user.active
                    ) {
                        delete user.password;
                        delete user.active;
                        delete user.activatekey;
                        done(null, user);
                    } else if (user && !user.active) {
                        done(null, "inactive");
                    } else {
                        done(null, false);
                    }
                } catch (e) {
                    res.error(500, "unexpected-error", e);
                }
            }
any idea why delet isnt working in here?
Mr. Frosty
@BinaryKing
Feb 11 2018 19:42 UTC
I have never seen the async used
DistinctWolf
@DistinctWolf
Feb 11 2018 20:41 UTC
anyone here that can help me with redux
Tiago Correia
@tiagocorreiaalmeida
Feb 11 2018 20:44 UTC
@FlashHero sure
DistinctWolf
@DistinctWolf
Feb 11 2018 20:46 UTC
@tiagocorreiaalmeida I have this code and when I console.log nothings shows up
import React, { Component } from 'react';
import {connect} from 'react-redux'

export class App extends Component {
    render() {
        return <h1>REACT REDUX APP{console.log(this.props)}</h1>
    }
}

const mapStateToProps = (state) => {
    return {
        user: state.sport
    };
};

const mapDispatchToProps=(dispatch)=>{
    return ({
        setName:()=>{
            dispatch({type:"CHANGE_NAME",payload:'FLASH'})
        }

    })
}
connect(
    mapStateToProps,
    mapDispatchToProps
  )(App)
and there's no error in the console
Tiago Correia
@tiagocorreiaalmeida
Feb 11 2018 20:47 UTC
on the place you call the stor
store.subscribe(() => {
    console.log(store.getState());
});
to see if you have anything on the store
when you get to the place you need it
DistinctWolf
@DistinctWolf
Feb 11 2018 20:49 UTC
@tiagocorreiaalmeida there's nothing there
Tiago Correia
@tiagocorreiaalmeida
Feb 11 2018 20:49 UTC
well if there's nothing it isnt supposed to log anything ?
DistinctWolf
@DistinctWolf
Feb 11 2018 20:51 UTC
@tiagocorreiaalmeida yes, I used redux-logger and it logs other dispatches and they don't use the redux connect or anything they're seperated, but dispatch({type:"CHANGE_NAME",payload:'FLASH'}) doesn't show up on the console
Tiago Correia
@tiagocorreiaalmeida
Feb 11 2018 20:53 UTC
can you see if setname is being called?
add a console log before the dispatch
btw if you are using arrow functions
and you wanna return an object only you dont need to do { return {
you can do directly ({
since its an arrow function and oyu just wanna return the object
const dispatchToProps = dispatch => ({
    updateNavbar: changes => dispatch(updateNavbar())
});
like this
can I see your reducer @FlashHero ?
DistinctWolf
@DistinctWolf
Feb 11 2018 20:57 UTC
@tiagocorreiaalmeida the console.log doesn't show up on the console so I think there's something wrong with the whole dispatch thing and here's my reducer
import {combineReducers} from 'redux';
const data={
  name:'Unknown',
  age:'100',
  sport:'soccer'
}
var nameReducer=(state=data,action)=>{
  switch(action.type){
    case 'CHANGE_NAME':
    return {...state, name:action.payload}
    default:
    return state;
  }
}
var ageReducer=(state=data,action)=>{
  switch(action.type){
    case "CHANGE_AGE":
    return {...state, age: action.payload}
    default:
    return state;
  }
}
export default combineReducers({
  name:nameReducer,
  age:ageReducer
});
Tiago Correia
@tiagocorreiaalmeida
Feb 11 2018 21:01 UTC
@FlashHero try this way, since I never log on the component render I dont know
        render() {
            console.log(this.props)
            return <h1>REACT REDUX APP</h1>
        }
console.log("props",this.props);
this way if you dont mind
DistinctWolf
@DistinctWolf
Feb 11 2018 21:03 UTC
@tiagocorreiaalmeida it's empty object
Tiago Correia
@tiagocorreiaalmeida
Feb 11 2018 21:05 UTC
tell me are you importing the component above to use on another component?
you need to export as default the connect()()
@FlashHero is there any repository for this code we have above?
DistinctWolf
@DistinctWolf
Feb 11 2018 21:06 UTC
@tiagocorreiaalmeida hold up I'll push it to github
DistinctWolf
@DistinctWolf
Feb 11 2018 21:16 UTC
@tiagocorreiaalmeida here's the github link https://github.com/FlashHero/react_redux
Tiago Correia
@tiagocorreiaalmeida
Feb 11 2018 21:18 UTC
give me just a few minutes trying to solve an issue I have on my code and then will clone it and find out why is not working
DistinctWolf
@DistinctWolf
Feb 11 2018 21:18 UTC
@tiagocorreiaalmeida ok
Tiago Correia
@tiagocorreiaalmeida
Feb 11 2018 21:28 UTC
will give it a look now @FlashHero any progress ?
DistinctWolf
@DistinctWolf
Feb 11 2018 21:34 UTC
@tiagocorreiaalmeida nope still looking
Tiago Correia
@tiagocorreiaalmeida
Feb 11 2018 21:39 UTC
I told you above what was the issue @FlashHero
image.png
if you are using connect on the component to get the redux state you need to export the connect and not the component it self
export default connect(mapStateToProps, mapDispatchToProps)(App);
import App from "./Components/main.js";
DistinctWolf
@DistinctWolf
Feb 11 2018 21:42 UTC
@tiagocorreiaalmeida wait where did you require App
Tiago Correia
@tiagocorreiaalmeida
Feb 11 2018 21:42 UTC
on index.js
instead of importing as a normal export I imported it as default export by removing the {} you had
DistinctWolf
@DistinctWolf
Feb 11 2018 21:44 UTC
@tiagocorreiaalmeida what's the difference between {} and without
Tiago Correia
@tiagocorreiaalmeida
Feb 11 2018 21:45 UTC
{} you used to import any named export when you just import directly import name from
means that's the default export
imagine
you had this export
export class App extends Component {
    render() {
        console.log("props", this.props);
        return <h1>REACT REDUX APP</h1>;
    }
}
its a named export called app
if you wanted to import it you had to write down import {app} from...
now if you had this
export default class App extends Component {
    render() {
        console.log("props", this.props);
        return <h1>REACT REDUX APP</h1>;
    }
}
you could import it as
import somnething from ...
oyu can only have one default export per file and many named exports as you would like to
hoep I wasnt confusing
DistinctWolf
@DistinctWolf
Feb 11 2018 21:48 UTC
@tiagocorreiaalmeida oh that was a silly mistake. thank you for your time man really appreciated it
CamperBot
@camperbot
Feb 11 2018 21:48 UTC
flashhero sends brownie points to @tiagocorreiaalmeida :sparkles: :thumbsup: :sparkles:
:cookie: 497 | @tiagocorreiaalmeida |http://www.freecodecamp.org/tiagocorreiaalmeida
Tiago Correia
@tiagocorreiaalmeida
Feb 11 2018 21:58 UTC
@FlashHero no worries anything just ask if Im around Will try to help
DistinctWolf
@DistinctWolf
Feb 11 2018 21:58 UTC
@tiagocorreiaalmeida :smile:
@tiagocorreiaalmeida btw did you clone my repository or how did you run it because I didn't push my package.json and other stuff
I thought that was suppose to take a lot of time to set up with packages installing and stuff
Lean Junio
@leanjunio
Feb 11 2018 22:11 UTC
has anybody tried to debug using vs code?
Tiago Correia
@tiagocorreiaalmeida
Feb 11 2018 22:48 UTC
the package.json was there @FlashHero
DistinctWolf
@DistinctWolf
Feb 11 2018 22:52 UTC
@tiagocorreiaalmeida oh lol didn't even see that