These are chat archives for FreeCodeCamp/HelpJavaScript

16th
Apr 2018
jusgoose
@gusd773
Apr 16 2018 00:53
can somebody tell me why my .input.active css won't work? it's supposed to display the search box width from 0-350
<!DOCTYPE html>
    <html>
        <head>
            <title> WikiPageViewer</title>
            <meta charset="utf-8">
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 
            <link rel="stylesheet" href="wikipage.css">
            <script src="wikipage.js"></script>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        </head>

<body>
<div class="container">
<div class="mainText"><a target="_blank" href="https://en.wikipedia.org/wiki/Special:Random"> CLICK ME FOR A RANDOM ARTICLE
  </a>
</div>

 <div class="wrapper">
  <div class="searchBox">
    <input class="input" type="text" placeholder="Search">
    <div class="btn">
      <i class="fa fa-search" aria-hidden="true"></i>
     </div>
  </div>
 </div>
</div>
</body>


    </html>

      *{
  padding:0;
  margin:0;
  user-select:none;
}


.container{
  justify-content:center;
  align-items:center;
  position: absolute;
  left:60%;
  top: 60%;
  transform: translate(-50%,-50%);
}

body{
  margin: 0;
  padding: 0;
  background-color:midnightblue;

}
.mainText{

  justify-content:center;
  margin-bottom: 20px;
  margin-left:-39px
}
a{

  text-decoration:none;
  font-family:Georgia;
  color:white;
}

.wrapper{
  postion:absolute;
  top:50%;
  left:50%;

}

.searchBox{
  width:450px;
  height: 100px;
  position: relative;
}

.input{
  position: absolute;
  top:20px;
  right:50px;
  box-sizing: border-box;
  width:0px;
  height: 63px;
  border: 3px solid white;
  border-radius: 50px;
  padding: 0 15px;
  font-size: 17px;
  transition: all 0.8s ease;
  outline: none;
 }

.input.active{
  width:350px;
  right:100px;

}

.btn{
  cursor: pointer;
  position: absolute;
  width: 80px;
  height: 80px;
  background:#fff;
  border-radius: 50%;
  top: 10px;
  right:45px;    
  text-align: center;
  line-height: 80px;
  transition: all 0.8s ease;
}

.btn.animate {
  transform: rotate(-360deg);
  right: 100px;
}

$(document).ready(function(){
    $(".btn").click(function(){
          $(".input").toggleClass("active").focus();
              $(this).toggleClass("animate");
                  $(".input").val("");
});
});
iso
@iso1048
Apr 16 2018 01:17
@gusd773 .input:active
jusgoose
@gusd773
Apr 16 2018 01:18
@user-ap negative
Nate Mallison
@NJM8
Apr 16 2018 02:13
@gusd773 What does .focus() do? I'm not sure if that is why the input .active class isn't working but .focus() as a function call should be calling some event listener that you specified
it looks like you are trying to give that element focus maybe?
also have you looked at the element tree to make sure your active class is being added?
Ayush Bahuguna
@relentless-coder
Apr 16 2018 05:14
I have a signin presentational component, is it okay to have a class method that extracts data from the form and passes it on to the prop method to initiate the process?
Claudio Restifo
@Marmiz
Apr 16 2018 05:19
@relentless-coder I had a similar pattern once, I created a HOC to pass the data as props:
was something like:
withFormData(form1)(MyComponentA)
withFormData(form2)(MyComponentB)
Dhaval Vira
@dhavalveera
Apr 16 2018 05:20
Claudio Restifo
@Marmiz
Apr 16 2018 05:20
pretty much what redux's mapStateToProps deos
*does
Ayush Bahuguna
@relentless-coder
Apr 16 2018 05:35
@Marmiz could you expand upon that? I want to pass the form data to the prop method received via container.
Claudio Restifo
@Marmiz
Apr 16 2018 05:37

I want to pass the form data to the prop method received via container.

what?

1) what's a prop method,
2) via which container
Markus Kiili
@Masd925
Apr 16 2018 05:38
Morning.
Ayush Bahuguna
@relentless-coder
Apr 16 2018 05:39
@Marmiz
export class Login extends React.Component {
    render() {
        return (
            <div className="login_wrapper">               
 <form onSubmit={(e)=> {e.preventDefault(); handleSigin();}} className="login_form">      
                    <input type="email" name="email" value={this.state.email}
                        onChange={this.handleChange} className="login_email" placeholder="Your Email"/>  
                    <input type="password" name="password" value={this.state.password}
                        onChange={this.handleChange} className="login_password" placeholder="Your Password"/>
                    <input type="submit" className="login_submit" value={this.state.submit_text}/>
                </form>
            </div>);
    }
}
and this my container
```
import { connect } from 'react-redux'; 
import { userSignin, userSigninSuccess, userSigninError } from '../actions/action_users.js';

const mapDispatchToProps = dispatch => {
    return {                   
        sigin: (data, token)=>{
            return dispatch(userSignin(data, token));
        },
        onSigninSuccess: (response)=>{  
            return dispatch(userSigninSuccess(response.payload.data));
        },
        onSigninError: (response)=>{    
            return dispatch(userSigninError(response.payload.data));
        }   
    };
};

const mapStateToProps = (state, routerProps) => {
    return {
        user: state.user,      
        router: routerProps    
    };
};
so, I have some prop methods, for example, signin, so what should be my strategy to pass form data to the signin prop method from the signin component? @Marmiz
Claudio Restifo
@Marmiz
Apr 16 2018 05:43
@relentless-coder since you are using Redux you can simply connect Loginto this methods you just described
export connect(mapStateToProps, mapDispatchToProps)(Login)
Ayush Bahuguna
@relentless-coder
Apr 16 2018 05:44
yes, that i'll do but how do I extract data in the signin component and pass it to the signin method?
wait let me explain
Claudio Restifo
@Marmiz
Apr 16 2018 05:45
@relentless-coder well I don't know what handleSigin() does, but it could be a this.props.sign(data, token)
handleSignin = data => {
 const token = SOME_TOKEN;
 this.props.sign(data, token);
}

<form onSubmit={(e)=> {e.preventDefault(); handleSigin(data);}} className="login_form">
Ayush Bahuguna
@relentless-coder
Apr 16 2018 05:48
export class Login extends React.Component {
   constructor(props){
      super(props);
      this.state = {
         email: '',
         password: ''
      }
   }
   handleSignin(e){
        e.preventDefault():
        this.props.signin(this.state, window.sessionStorage.token)
   }
   handleChange(e){
       this.setState({
          [e.target.name]: e.target.value
     })
   }
    render() {
        return (
            <div className="login_wrapper">               
 <form onSubmit={(e)=> {e.preventDefault(); handleSigin();}} className="login_form">      
                    <input type="email" name="email" value={this.state.email}
                        onChange={this.handleChange} className="login_email" placeholder="Your Email"/>  
                    <input type="password" name="password" value={this.state.password}
                        onChange={this.handleChange} className="login_password" placeholder="Your Password"/>
                    <input type="submit" className="login_submit" value={this.state.submit_text}/>
                </form>
            </div>);
    }
}
@Marmiz would this be a sane thing to do keeping in mind that I am using redux's architecture?
excuse the missing this I am just trying to convey the idea
Claudio Restifo
@Marmiz
Apr 16 2018 05:49
yep, that's how you do it (besides the double preventDefault)
Ayush Bahuguna
@relentless-coder
Apr 16 2018 05:50
cool, I thought I had to keep the presentational component barren :D
Claudio Restifo
@Marmiz
Apr 16 2018 05:50
p.s. you are not passing the event e to handleSignin
Ayush Bahuguna
@relentless-coder
Apr 16 2018 05:50
@Marmiz yes, I know that, I was just trying to convey the idea, so I typed the code in here
Claudio Restifo
@Marmiz
Apr 16 2018 05:53

@relentless-coder you can spit up the concern if you want:

class container {
 onSubmit  = () => // calls the redux dispatch

 render(
  <Content handleSubmit={this.onSubmit} />
)
}


class Content {
 render (
  <form onSubmit={() => this.props.handleSubmit(this.state)}
)
}

in case you want to split the form component to the container form

Ayush Bahuguna
@relentless-coder
Apr 16 2018 05:55
cool, thanks for the input @Marmiz
CamperBot
@camperbot
Apr 16 2018 05:55
relentless-coder sends brownie points to @marmiz :sparkles: :thumbsup: :sparkles:
:star2: 1208 | @marmiz |http://www.freecodecamp.org/marmiz
Ayush Bahuguna
@relentless-coder
Apr 16 2018 06:25
@camperbot hey what are your thoughts on nested components? How do you go about structuring them? Say, I need to include a ForgotPassword component inside the Signin component, so how do I involve redux in this?
Ayobami
@purpose50
Apr 16 2018 06:40
@relentless-coder your question is quite abstract since I don't know what your workflow is, but from I understood from the question, create a separate component called ForgotPassword and another component called Signin , nest the ForgotPassword component inside the Signin Component and map the state of the signin component to props, if your ForgotPassword component needs any data from the Signin component pass the data in as a prop to the ForgotPassword component
Ayush Bahuguna
@relentless-coder
Apr 16 2018 06:42
@purpose50 okay, cool. Thanks
CamperBot
@camperbot
Apr 16 2018 06:42
relentless-coder sends brownie points to @purpose50 :sparkles: :thumbsup: :sparkles:
:cookie: 305 | @purpose50 |http://www.freecodecamp.org/purpose50
Jason Luboff
@JLuboff
Apr 16 2018 15:57
:ghost:
Nazar
@IsaakNazar
Apr 16 2018 16:31
@JLuboff :wave:
Jason Luboff
@JLuboff
Apr 16 2018 16:36
@IsaakNazar Good morning
Nazar
@IsaakNazar
Apr 16 2018 16:38
@JLuboff :smile: good night
Jason Luboff
@JLuboff
Apr 16 2018 16:39
That too :P
Nazar
@IsaakNazar
Apr 16 2018 16:39
@JLuboff monday morning?
Jason Luboff
@JLuboff
Apr 16 2018 16:39
Yup
9:40 AM
Nazar
@IsaakNazar
Apr 16 2018 16:39
@JLuboff ah, 10:40 PM
@JLuboff you are on the other side of the Earth :smile:
Jason Luboff
@JLuboff
Apr 16 2018 16:41
It would appear so :D
Ahmedur Rahman Shovon
@arsho
Apr 16 2018 16:43
@IsaakNazar Bangladesh?
Nazar
@IsaakNazar
Apr 16 2018 16:45
@arsho Central Asia
Ahmedur Rahman Shovon
@arsho
Apr 16 2018 16:45
Great! I thought we are from same country as the time is same. Same continent at least :D
Nazar
@IsaakNazar
Apr 16 2018 16:46
@arsho same Planet :smile:
Ahmedur Rahman Shovon
@arsho
Apr 16 2018 16:47
:P
Nazar
@IsaakNazar
Apr 16 2018 16:49
@arsho did you finish all FCC projects?
Ahmedur Rahman Shovon
@arsho
Apr 16 2018 16:50
Only the frontend. Did some D3 years ago. And this year trying to do react projects
Nazar
@IsaakNazar
Apr 16 2018 16:51
@arsho I'm stuck on Pomodoro project
can implement the Break timer
Ahmedur Rahman Shovon
@arsho
Apr 16 2018 16:52
can you share your code?
Nazar
@IsaakNazar
Apr 16 2018 16:54
@arsho link
so, when the Session timer hits 00:00,the Break timer should replace it and continue counting down
Ahmedur Rahman Shovon
@arsho
Apr 16 2018 16:55
yeah
you did not code for the break timer yet?
1Mher1
@1Mher1
Apr 16 2018 17:00
how can I js:how to capitalize first and last letter
Ahmedur Rahman Shovon
@arsho
Apr 16 2018 17:00
you have done the main thing, I see. The session timer and break timer do the same functionalities. Just create a method eg timer and pass the time; for both the session and break one after another. Also change the text "session" to "break" when you are executing the break timer portion
1Mher1
@1Mher1
Apr 16 2018 17:01
in string
Nazar
@IsaakNazar
Apr 16 2018 17:01
@arsho I should create another function for break timer right?
Ahmedur Rahman Shovon
@arsho
Apr 16 2018 17:04
@1Mher1
var test = "test string";
test = test.toLowerCase();
console.log(test[0].toUpperCase()+test.slice(1,test.length-1)+test[test.length-1].toUpperCase());
yeah, do it first. Then you will see some redundant code. Remove them and you are all good :D @IsaakNazar
Nazar
@IsaakNazar
Apr 16 2018 17:08
@arsho :smile: thanx man :+1:
CamperBot
@camperbot
Apr 16 2018 17:08
isaaknazar sends brownie points to @arsho :sparkles: :thumbsup: :sparkles:
:cookie: 489 | @arsho |http://www.freecodecamp.org/arsho
Ahmedur Rahman Shovon
@arsho
Apr 16 2018 17:09
NP. We are inhabitant of same old earth :D
1Mher1
@1Mher1
Apr 16 2018 17:12

@arsho look this document.getElementById("btn2").onclick=function(){
var text = document.getElementById("txt2").value;

text = text.toLowerCase();
console.log(text[0].toUpperCase()+text.slice(1,text.length-1)+text[text.length-1].toUpperCase());

}

they worked only first letter
last letter dont capitalized
Ahmedur Rahman Shovon
@arsho
Apr 16 2018 17:19
@1Mher1 , I am checking

@1Mher1 ,

<input id="txt2" type="text" value="hello World"/>
<button id="btn2">Convert</button>
<script>
    window.onload = function(){
        document.getElementById("btn2").onclick=function(){
            var text = document.getElementById("txt2").value;            
            text = text.toLowerCase();
            alert(text[0].toUpperCase()+text.slice(1,text.length-1)+text[text.length-1].toUpperCase());
        }
    }
</script>

It is working smoothly.

2b0x
@2b0x
Apr 16 2018 18:03
any body in here?
Ken Haduch
@khaduch
Apr 16 2018 18:05
@2b0x - some folks hang around or check in now and then... I have an eye on the chat room.
2b0x
@2b0x
Apr 16 2018 18:07
what time in your city...QAQ so,now is working time?
Ken Haduch
@khaduch
Apr 16 2018 18:09
I live in Massachusetts - east coast USA time.
Brad
@bradtaniguchi
Apr 16 2018 18:13
I'm on the west-coast US, so Its only 11AM here
2b0x
@2b0x
Apr 16 2018 18:14
ohoh~im chinese, my city in the deep nightヽ(°◇° )ノ
2.15am...
Razvan Jackson
@RazvanJackson
Apr 16 2018 18:16
Romania 9pm here
2b0x
@2b0x
Apr 16 2018 18:17
good morning man...
Ayobami
@purpose50
Apr 16 2018 18:44
Nigeria 7:43pm
Jason Luboff
@JLuboff
Apr 16 2018 18:45
@bradtaniguchi West coast represent
Tiago Correia
@tiagocorreiaalmeida
Apr 16 2018 18:59
hello world
Jason Luboff
@JLuboff
Apr 16 2018 19:02
:wave:
Brad
@bradtaniguchi
Apr 16 2018 19:04
Dang the classic 'someText' + someNumber + someOffset got me
Jason Luboff
@JLuboff
Apr 16 2018 19:05
@bradtaniguchi Number converted to string?
Brad
@bradtaniguchi
Apr 16 2018 19:05
Yup, then adding the offset to said string
Jason Luboff
@JLuboff
Apr 16 2018 19:05
hehe
Tiago Correia
@tiagocorreiaalmeida
Apr 16 2018 19:07
what css framework do you find easier to integrate with react?
Jason Luboff
@JLuboff
Apr 16 2018 19:08
If I knew, I'd tell you
Tiago Correia
@tiagocorreiaalmeida
Apr 16 2018 19:09
I know ahah :D just askingto see if anyone points something :D
Jason Luboff
@JLuboff
Apr 16 2018 19:09
I know, I just didn't want to leave you hanging haha
Brad
@bradtaniguchi
Apr 16 2018 19:25
Same here, Idk any react haha
SnowTurtle96
@SnowTurtle96
Apr 16 2018 19:47
Hey
Bjorn van de Peut
@bjorno43
Apr 16 2018 19:48
Hello
SnowTurtle96
@SnowTurtle96
Apr 16 2018 19:48
What's this chat for?
Christopher McCormack
@cmccormack
Apr 16 2018 19:51
@SnowTurtle96 heya it's to discuss or ask questions about Javascript or Web Frameworks
Bjorn van de Peut
@bjorno43
Apr 16 2018 19:52
This is one of the chat channels that are part of FreeCodeCamp where our members follow free courses on a number of different scripting and programming languages. This specific room is for Javascript related questions, usually involving one of the challanges provided by the FCC curriculum. However, it's not against our rules to talk about non-related code in general or even talk about off topic subjects
Christopher McCormack
@cmccormack
Apr 16 2018 19:52
Kind of a general purpose coding channel as well
SnowTurtle96
@SnowTurtle96
Apr 16 2018 19:53
Ah my bad. My first time on gitter. I was reading an article on why freecodecamp left slack and what they thought of it. Got a good few rooms here I'll be sure to check the other ones out.
Bjorn van de Peut
@bjorno43
Apr 16 2018 19:54
@SnowTurtle96 It's ok. Welcome to our community over here :)
Stephen James
@sjames1958gm
Apr 16 2018 19:59
@tiagocorreiaalmeida to be honest, your react components shouldn't care about the framework
Tiago Correia
@tiagocorreiaalmeida
Apr 16 2018 20:16
depends if we are using stuff like modal's and all of that, in this case I would like to avoid the maximal need to write code for those things and some frameworks have a few issues, but yeah I got the idea @sjames1958gm
Stephen James
@sjames1958gm
Apr 16 2018 20:16
@tiagocorreiaalmeida True.
Jason Luboff
@JLuboff
Apr 16 2018 20:22
@cmccormack :wave:
Christopher McCormack
@cmccormack
Apr 16 2018 20:22
@JLuboff hey buddy how goes it
Jason Luboff
@JLuboff
Apr 16 2018 20:23
@cmccormack Its going! You?
Christopher McCormack
@cmccormack
Apr 16 2018 20:24
good man busy work day!
get to meet with some colleagues I haven't met
Jason Luboff
@JLuboff
Apr 16 2018 20:30
@cmccormack That's cool, have a good weekend?
Christopher McCormack
@cmccormack
Apr 16 2018 21:08
@JLuboff yeah man had friends in from out of town, took em out to Old Town Scottsdale. Yourself?
Jason Luboff
@JLuboff
Apr 16 2018 21:09
@cmccormack Ya had a pretty good one. Went to Santa Monica for the day on Saturday and had a good time. The kid was really good, makes us more confident for our road trip in a few weeks haha
Christopher McCormack
@cmccormack
Apr 16 2018 21:10
@JLuboff he's just biding his time until a full on public freakout :)
Jason Luboff
@JLuboff
Apr 16 2018 21:10
Sweet. Just figured out how to uncomment a bunch of lines in Atom (when commenting with //)
@cmccormack Oh...I'
m sur ehe is
Christopher McCormack
@cmccormack
Apr 16 2018 21:11
CMD + /?
or ctrl or whatever
Jason Luboff
@JLuboff
Apr 16 2018 21:11
Ya... I knew that CTRL+ / would comment it...but didn't know I could hit that again to uncomment :joy:
Christopher McCormack
@cmccormack
Apr 16 2018 21:11
oh man you just halved your workload!
Jason Luboff
@JLuboff
Apr 16 2018 21:11
Yup!
Playing with HTML Datalist right now
Christopher McCormack
@cmccormack
Apr 16 2018 21:12
I just learned the other day you can use Ctrl/CMD + X to delete a whole line if nothing selected
at least in some apps, maybe not windows
what you using it for?
Jason Luboff
@JLuboff
Apr 16 2018 21:12
Ctrl+X worked in Atom
Christopher McCormack
@cmccormack
Apr 16 2018 21:12
hah Mondays should be What did you learn recently day
Josh Queen
@Kohota107
Apr 16 2018 21:13
Evening guys
Brad
@bradtaniguchi
Apr 16 2018 21:13
Damn never knew about ctrl+X, only dd :trollface:
Jason Luboff
@JLuboff
Apr 16 2018 21:14
@cmccormack For my app, there is an action items page where users will go to upload files and add comments, etc. There are 15 for sures on there, but there might be other action items that may only apply to that particular project. So the coordinator wants the ability to add additional action items. So I'm using a datalist so that if its an action thats been used before, they can select it fromn the list, otherwise they can still type in the input field a new item
@Kohota107 Hello
Christopher McCormack
@cmccormack
Apr 16 2018 21:14
@bradtaniguchi right? ONe less reason to use VI
@Kohota107 heya
Josh Queen
@Kohota107
Apr 16 2018 21:15
I was hoping if somebody may be able to give me a basic maths lesson?
Brad
@bradtaniguchi
Apr 16 2018 21:15
I mean dd saves me what, 1 key press? (shift+end+delete)
Christopher McCormack
@cmccormack
Apr 16 2018 21:15
only if at beginning of line
Brad
@bradtaniguchi
Apr 16 2018 21:15
@Kohota107 How basic are we talkinga bout
Josh Queen
@Kohota107
Apr 16 2018 21:16
I'm running through some codewars kata and I have a task to check if a number is a perfect square
Brad
@bradtaniguchi
Apr 16 2018 21:16
Fine fine, 2 more key presses
Christopher McCormack
@cmccormack
Apr 16 2018 21:16
haha
Jason Luboff
@JLuboff
Apr 16 2018 21:16
@Kohota107 Oh, someone else did that recently and I think I gave them the answe rhaha
Josh Queen
@Kohota107
Apr 16 2018 21:16
Sweet!
I don't want the code as I want to figure it out myself, but is there a simple algebraic expression as to how to do that?
(I realise they're are going to be similar in any case... aha)
Jason Luboff
@JLuboff
Apr 16 2018 21:17
@Kohota107 essentially use Math.sqrt(number) and then what I did was use % to check if the number was even
Josh Queen
@Kohota107
Apr 16 2018 21:18
Ahhh, I was hoping to code the method myself o_0
But I'm probably getting ahead of myself...
aha
Thanks for the pointer
Jason Luboff
@JLuboff
Apr 16 2018 21:18
:+1:
Christopher McCormack
@cmccormack
Apr 16 2018 21:20
what's the actual problem you have to solve?
just see if it's perfect square?
Jason Luboff
@JLuboff
Apr 16 2018 21:21
(from what I remember of the other user) yes
Josh Queen
@Kohota107
Apr 16 2018 21:25
Yes
I realise now that almost every other solution also uses the Math.sqrt() method
I was clearly ambitious in wanting to code all of the rules myself!
Anyway, that's enough maths for one evening... thanks guys
Keggatron
@Keggatron
Apr 16 2018 21:46
Hi guys, I'm having issues displaying .svg images in my app. Here's the code to the component:
const WeatherGrid = (props) => {

  return (

    <ul className='grid'>

      {props.forecast.list.map((data) => {

      const imgUri = `../../public/images/weather-icons/${data.weather[0].icon}.svg`

        return(
          <li key={data.dt}>
            <img src= {imgUri}/>
          </li>
        )
      })}
    </ul>

  )
}
All that it returns are a bunch of broken images
I've tried adding one of the images to the components folder and used it as a source to make sure my file path was correct but the image was still broken
Kudzu
@czhower
Apr 16 2018 21:47
View source on your output and see hwat the full path is that you are emitting in the final html.
Keggatron
@Keggatron
Apr 16 2018 21:51
ok I looked into the network tab
saw that the css file that loaded up didn't have the public part in the file path so I took it out of my imgUri and the files load now
thanks for helping me look into that