function Screen(props) {
return (<div className="screen">
<div className="screenRow text-right">{props.operation} {!props.result ? "" : props.result}
</div>
<div className="screenRow text-right">{props.function}{!props.result ? "" : "=" + props.result}
</div>
</div>
);
}
class CalcButton extends React.Component {
render() {
return(
<button type="button" onClick={this.props.operation} className="btn btn-secondary btnNormal">{this.props.operatorImg}</button>
)
};
}
class Calculator extends React.Component {
constructor(props){
super(props);
this.state= {
operation: "0",
function: "",
result: "",
digitsLimit: 20
};
}
lastCharacterIsNumber(func) {
if(!Number(func.toString().substr(func.length - 1)))
{
return true;
}
return false;
}
validateOperationNumber(operation:string, element: string) {
if(operation.length >= this.state.digitsLimit)
{
return "0";
}
if(Number(operation) === 0)
{
return element;
}
return operation.toString() + element.toString();
}
validateFunctionNumber(func:string, result: string, element: string) {
if(result )
{
return element;
}
if(func.length >= this.state.digitsLimit)
{
return "";
}
if(Number(func) === 0)
{
return element;
}
return func.toString() + element.toString();
}
validateOperationOperator(operation:string, element: string) {
if(operation.length === 0)
{
return "";
}
if(this.lastCharacterIsNumber(operation))
{
return operation;
}
return operation.toString() + element.toString();
}
validateFunctionOperator(func:string, result: string, element: string) {
if(func.length === 0)
{
return "";
}
if(this.lastCharacterIsNumber(func))
{
return func;
}
if(result)
{
return result.toString() + element;
}
return func.toString() + element.toString();
}
addNumber(element){
this.setState((prevState, props) => {
let operation = this.validateOperationNumber(prevState.operation, element);
let func = this.validateFunctionNumber(prevState.function, prevState.result, element);
return {
operation: operation,
function: func,
result: !prevState.result ? prevState.result : ""
};
});
}
addOperator(element){
this.setState((prevState, props) => {
let operation = this.validateOperationOperator(prevState.operation, element);
let func = this.validateFunctionOperator(prevState.function, prevState.result, element);
return {
operation: operation,
function: func,
result: !prevState.result ? prevState.result : ""
};
});
}
getResult(){
let result = math.eval(this.state.function);
this.setState({result: result, operation: ""});
}
delete(){
this.setState({operation: "0",
result: this.state.result && "",
function: this.state.result && ""});
}
deleteAll(){
this.setState({operation:"0", function: "", result: ""});
}
render() {
return (<div className="calculator">
<div className="">
<Screen operation = {this.state.operation} function= {this.state.function} result ={this.state.result}> </Screen>
</div>
<div className="btnContainer btn-group">
<CalcButton operation={() => this.deleteAll()} operatorImg="AC"></CalcButton>
<CalcButton operation={() => this.delete()} operatorImg="CE"></CalcButton>
<CalcButton operation={() => this.addOperator("/")} operatorImg="/"></CalcButton>
<CalcButton operation={() => this.addOperator("*")} operatorImg="*"></CalcButton>
</div>
<div className="btnContainer btn-group">
<CalcButton operation={() => this.addNumber(7)} operatorImg="7"></CalcButton>
<CalcButton operation={() => this.addNumber(8)} operatorImg="8"></CalcButton>
<CalcButton operation={() => this.addNumber(9)} operatorImg="9"></CalcButton>
<CalcButton operation={() => this.addOperator("-")} operatorImg="-"></CalcButton>
</div>
<div className="btnContainer btn-group">
<CalcButton operation={() => this.addNumber(4)} operatorImg="4"></CalcButton>
<CalcButton operation={() => this.addNumber(5)} operatorImg="5"></CalcButton>
<CalcButton operation={() => this.addNumber(6)} operatorImg="6"></CalcButton>
<CalcButton operation={() => this.addOperator("+")} operatorImg="+"></CalcButton>
</div>
<div className="btnContainer btn-group">
<CalcButton operation={() => this.addNumber(1)} operatorImg="1"></CalcButton>
<CalcButton operation={() => this.addNumber(2)} operatorImg="2"></CalcButton>
<CalcButton operation={() => this.addNumber(3)} operatorImg="3"></CalcButton>
<CalcButton operation={() => this.getResult()} operatorImg="="></CalcButton>
</div>
<div className="btnContainerFill btn-group">
<CalcButton operation={() => this.addNumber(0)} operatorImg="0"></CalcButton>
<CalcButton operation={() => this.addNumber(".")} operatorImg="."></CalcButton>
<button className="btn btnLarge " disabled></button>
</div>
</div>
);
}
}
ReactDOM.render(<div className="flexcontainer text-center"><Calculator></Calculator></div>,
document.getElementById("root"));
View Compiled
