Skip to content

Instantly share code, notes, and snippets.

@kshitijpurwar
Last active June 14, 2017 08:11
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save kshitijpurwar/5d51f01e9eff91eecba9544420d2feff to your computer and use it in GitHub Desktop.
Save kshitijpurwar/5d51f01e9eff91eecba9544420d2feff to your computer and use it in GitHub Desktop.
Bit counter JS
class Button extends React.Component{
state = { switch: 0 };
onClickHandle = () => {
if( this.state.switch === 1){
this.props.onclickFunction(-1 * this.props.changeValue);
this.setState({ switch : 0});
}
else{
this.props.onclickFunction(this.props.changeValue);
this.setState({ switch : 1}) ;
}
}
render(){
return (
<div className="bit" onClick={ this.onClickHandle }>
<p>{this.state.switch}</p>
<p>{this.props.changeValue}</p>
</div>
);
};
}
// <button >
// {(this.state.switch === 1) ?"-":"+"}{this.props.changeValue}
// </button>
const Result = function(props){
return (
<div>
{props.result}
</div>
)
}
class App extends React.Component{
state = { counter: 0 };
control = (changeValue) => {
this.setState((prevState) => {
return { counter : prevState.counter + changeValue }
})
}
render(){
return (
<div>
<Button changeValue={256} onclickFunction={this.control} />
<Button changeValue={128} onclickFunction={this.control} />
<Button changeValue={64} onclickFunction={this.control} />
<Button changeValue={32} onclickFunction={this.control} />
<Button changeValue={16} onclickFunction={this.control} />
<Button changeValue={8} onclickFunction={this.control} />
<Button changeValue={4} onclickFunction={this.control} />
<Button changeValue={2} onclickFunction={this.control} />
<Button changeValue={1} onclickFunction={this.control} />
<p>=</p>
<Result result={this.state.counter} />
</div>
);
};
}
ReactDOM.render(<App />, mountNode);
// CSS styling
#mountNode {
color: #000;
}
#mountNode div {
display: flex;
justify-content: space-between;
align-items: baseline;
}
#mountNode div.bit{
flex-direction: column;
justify-content: center;
align-items: center;
user-select: none;
border: 1px solid #000;
text-align: center;
min-width: 40px;
}
.bit p{
margin-top: 5px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment