-
Notifications
You must be signed in to change notification settings - Fork 0
/
index_3.js
57 lines (50 loc) · 1.42 KB
/
index_3.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import registerServiceWorker from './registerServiceWorker';
class Keypad extends Component{
constructor(){
super();
this.state = {
present: '',
operator: '',
output: ''
};
}
_clickData(value){
let store = this.state;
if( Number.isInteger( value ) ){
if( this.state.present && this.state.operator ){
var operators = {
'+': function(a, b) { return a + b },
'-': function(a, b) { return a - b },
'*': function(a, b) { return a * b },
'/': function(a, b) { return a / b },
};
store.output = operators[this.state.operator]( store.present, value )
store.present = store.output
}else{
store.present = value;
}
}else{
store.operator = value
}
this.setState( store )
}
render(){
const keypad = [ 0,1,2,3,4,5,6,7,8,9,'+', '-', '*', '/' ];
return(
<div className='warp-keypad'>
<h1>Sample Calculator</h1>
{
keypad.map((value,index)=>{
return <button key={index} onClick={() => this._clickData(value)} >{value}</button>
})
}
<br/>Present={this.state.present}
<br/>Operator={this.state.operator}
<br/>Output={this.state.output}
</div>
)
}
}
ReactDOM.render( <Keypad/>, document.getElementById('root') );