This is beta version, with some flaws, such as unfinished interface. But I launch tests
and noticed that there is a bug that I can not understand or fix, it is related to eval().
You also can run launch tests on this link.
Code
import logo from './logo.svg';
import './App.css';
import React from 'react';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
display: '',
displayFormula: '0',
isEqual: '0'
};
this.charHandler = this.charHandler.bind(this);
this.acHandler = this.acHandler.bind(this);
this.equalHandler = this.equalHandler.bind(this);
}
charHandler(event) {
if (/\d/.test(event.target.value)) {
this.setState({
display: Number(event.target.value)
});
} else {
this.setState({
display: event.target.value
});
}
console.log(this.state.display);
console.log(event.target.value);
console.log(this.state.displayFormula);
if (this.state.displayFormula === '0' && this.state.displayFormula.length === 1) {
console.log('0');
if (event.target.value === '.') {
this.setState({
displayFormula: this.state.displayFormula + event.target.value
})
} else if (/\d|\-/.test(event.target.value)) {
this.setState({
displayFormula: event.target.value
})
}
} else if (this.state.displayFormula.length >= 1) {
if (/^\-$/.test(this.state.displayFormula)) {
if (/\d/.test(event.target.value)) {
this.setState({
displayFormula: this.state.displayFormula + event.target.value
})
} else {
this.setState({
displayFormula: this.state.displayFormula
})
}
} else if (/[^\.\d]\d+\.+\d+$|^\d+\.+\d+$/.test(this.state.displayFormula)) {
console.log('1');
if (this.state.isEqual === '0') {
if (/\d|[^\.\d]/.test(event.target.value)){
this.setState({
displayFormula: this.state.displayFormula + event.target.value
})
} else {
this.setState({
displayFormula: this.state.displayFormula
})
}
} else {
if (/\d/.test(event.target.value)) {
this.setState({
displayFormula: event.target.value,
isEqual: '0'
})
} else {
this.setState({
displayFormula: this.state.displayFormula + event.target.value,
isEqual: '0'
})
}
}
} else if (/[^\.\d]\d+\.+$|^\d+\.+$/.test(this.state.displayFormula)) {
console.log('1.1');
if (/\d/.test(event.target.value)) {
this.setState({
displayFormula: this.state.displayFormula + event.target.value
})
} else {
this.setState({
displayFormula: this.state.displayFormula
})
}
} else if (/[^\.\d]\d+$|^\d+$/.test(this.state.displayFormula)) {
console.log('2');
if (this.state.isEqual === '0') {
if (/[^\.\d]0$/.test(this.state.displayFormula)) {
if (/0/.test(event.target.value)) {
this.setState({
displayFormula: this.state.displayFormula
})
} else if (/[1-9]/.test(event.target.value)) {
this.setState({
displayFormula: this.state.displayFormula.replace(/.$/, event.target.value)
})
} else {
this.setState({
displayFormula: this.state.displayFormula + event.target.value
})
}
} else {
this.setState({
displayFormula: this.state.displayFormula + event.target.value
})
}
} else {
if (/\d/.test(event.target.value)) {
this.setState({
displayFormula: event.target.value,
isEqual: '0'
})
} else {
this.setState({
displayFormula: this.state.displayFormula + event.target.value,
isEqual: '0'
})
}
}
} else if (/[^\.\d]\d+\.+\d+\D+$|^\d+\.+\d+\D+$|[^\.\d]\d+\D+$|^\d+\D+$/.test(this.state.displayFormula)) {
console.log('3');
if (/[^\d\.\-]/.test(event.target.value)) {
this.setState({
displayFormula: this.state.displayFormula
})
} else if (/\-/.test(event.target.value) && !/\D{2}$/.test(this.state.displayFormula)) {
this.setState({
displayFormula: this.state.displayFormula + event.target.value
})
} else if (/\d/.test(event.target.value)) {
this.setState({
displayFormula: this.state.displayFormula + event.target.value
})
}
}
}
}
acHandler() {
this.setState({
displayFormula: '',
display: ''
})
setTimeout(() => this.setState({
displayFormula: '0',
display: '0'
}), 200)
}
equalHandler() {
let result = Number(eval(this.state.displayFormula).toFixed(10)).toString();
this.setState({
displayFormula: result,
display: Number(result),
isEqual: '1'
})
}
render () {
return (
<div className='App'>
<img src={logo} className='App-logo' alt='logo' />
<div id='calculator'>
<div id='displayFormula'>{this.state.displayFormula}</div>
<div id='display'>{this.state.display}</div>
<div className='buttons'>
<button value='AC' onClick={this.acHandler} id='clear'>AC</button>
<button value='/' onClick={this.charHandler} id='divide'>/</button>
<button value='*' onClick={this.charHandler} id='multiply'>x</button>
<button value='7' onClick={this.charHandler} id='seven'>7</button>
<button value='8' onClick={this.charHandler} id='eight'>8</button>
<button value='9' onClick={this.charHandler} id='nine'>9</button>
<button value='-' onClick={this.charHandler} id='subtract'>-</button>
<button value='4' onClick={this.charHandler} id='four'>4</button>
<button value='5' onClick={this.charHandler} id='five'>5</button>
<button value='6' onClick={this.charHandler} id='six'>6</button>
<button value='+' onClick={this.charHandler} id='add'>+</button>
<button value='1' onClick={this.charHandler} id='one'>1</button>
<button value='2' onClick={this.charHandler} id='two'>2</button>
<button value='3' onClick={this.charHandler} id='three'>3</button>
<button value='=' onClick={this.equalHandler} id='equals'>=</button>
<button value='0' onClick={this.charHandler} id='zero'>0</button>
<button value='.' onClick={this.charHandler} id='decimal'>.</button>
</div>
</div>
</div>
);
}
}
export default App;
