Guest User

JS Calculator

a guest
Jul 30th, 2019
129
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. // Main component:
  2. /* eslint no-eval: 0 */
  3. import React from 'react';
  4. import ReactDOM from 'react-dom';
  5. import './index.css';
  6. import Display from './components/display';
  7. import Keypad from './components/keypad';
  8.  
  9. class App extends React.Component {
  10.     constructor(props) {
  11.         super(props);
  12.         this.state = {
  13.             displayText: 0,
  14.             toClear: true,
  15.             onlyOneDecimal: false,
  16.             noZero: true,
  17.         };
  18.         this.handleClick = this.handleClick.bind(this);
  19.         this.handleText = this.handleText.bind(this);
  20.         this.clear = this.clear.bind(this);
  21.         this.operation = this.operation.bind(this);
  22.     }
  23.  
  24.     clear() {
  25.         this.setState({
  26.             displayText: 0,
  27.             toClear:true,
  28.         })
  29.     }
  30.  
  31.     operation() {
  32.         this.setState({
  33.             displayText: eval(this.state.displayText),
  34.             toClear:true,
  35.             onlyOneDecimal: false,
  36.             noZero: true,
  37.         })
  38.     }
  39.  
  40.     handleText(event) {
  41.         this.setState({
  42.             displayText: event.target.value,
  43.         })
  44.     }
  45.  
  46.     handleClick(event) {
  47.         if(!this.state.displayText && event.target.className === "sign"
  48.         || this.state.noZero && event.target.id === "zero") {
  49.             return;
  50.         }
  51.  
  52.         if (event.target.id !== "zero") {
  53.             this.setState({noZero: false});
  54.         }
  55.  
  56.         if(event.target.name === "." ) {
  57.             if (this.state.onlyOneDecimal) {
  58.                 return;
  59.             }
  60.  
  61.             this.setState({onlyOneDecimal:true});
  62.         }
  63.  
  64.         if (event.target.className === "sign") {
  65.             this.setState({
  66.                 noZero: true,
  67.                 onlyOneDecimal: false,
  68.             });
  69.             if ("+-*/".includes(this.state.displayText[this.state.displayText.length-1])){
  70.                 this.setState({
  71.                     displayText: this.state.displayText.slice(0,this.state.displayText.length-1)+event.target.name,
  72.                 });
  73.                 return;
  74.             }
  75.         }
  76.         this.setState({
  77.             displayText: (this.state.toClear && event.target.className !== "sign") ? "" + event.target.name : this.state.displayText + event.target.name,
  78.             toClear:false,
  79.         })
  80.     }
  81.  
  82.     render() {
  83.         return(
  84.             <div className="calculadora">
  85.                 <Display text={this.state.displayText} textHandler={this.handleText}/>
  86.                 <Keypad operation={this.operation} clickHandler={this.handleClick} clear={this.clear}/>
  87.             </div>
  88.         )
  89.     }
  90. }
  91.  
  92. ReactDOM.render(<App />, document.getElementById('root'));
  93.  
  94. //Display component:
  95. import React from 'react';
  96.  
  97. const Display = props => {
  98.  
  99.         return(
  100.             <div className="displayBox">
  101.                 <input id="display" value={props.text} onChange={props.textHandler} readOnly />
  102.             </div>
  103.         )
  104. }
  105.  
  106. export default Display;
  107.  
  108. //Keypad component:
  109. import React from 'react';
  110.  
  111. const Keypad = props => {
  112.     return(
  113.         <div className="keyContainer">
  114.             <table>
  115.                 <tbody>
  116.                     <tr>
  117.                         <td><button onClick={props.clickHandler} name="1" id="one">1</button></td>
  118.                         <td><button onClick={props.clickHandler} name="2" id="two">2</button></td>
  119.                         <td><button onClick={props.clickHandler} name="3" id="three">3</button></td>
  120.                         <td><button onClick={props.clickHandler} className="sign" id="add" name="+">+</button></td>
  121.                     </tr>
  122.                     <tr>
  123.                         <td><button onClick={props.clickHandler} name="4" id="four">4</button></td>
  124.                         <td><button onClick={props.clickHandler} name="5" id="five">5</button></td>
  125.                         <td><button onClick={props.clickHandler} name="6" id="six">6</button></td>
  126.                         <td><button onClick={props.clickHandler} className="sign" id="subtract" name="-">-</button></td>
  127.                     </tr>
  128.                     <tr>
  129.                         <td><button onClick={props.clickHandler} name="7" id="seven">7</button></td>
  130.                         <td><button onClick={props.clickHandler} name="8" id="eight">8</button></td>
  131.                         <td><button onClick={props.clickHandler} name="9" id="nine">9</button></td>
  132.                         <td><button onClick={props.clickHandler} className="sign" id="multiply" name="*">*</button></td>
  133.                     </tr>
  134.                     <tr>
  135.                         <td><button onClick={props.clickHandler} name="." id="decimal">.</button></td>
  136.                         <td><button onClick={props.clickHandler} name="0" id="zero">0</button></td>
  137.                         <td><button onClick={props.operation} id="equals">=</button></td>
  138.                         <td><button onClick={props.clickHandler} className="sign" id="divide" name="/">/</button></td>
  139.                     </tr>
  140.                     <tr>
  141.                         <td></td>  
  142.                         <td></td>  
  143.                         <td></td>  
  144.                         <td><button onClick={props.clear} id="clear">C</button></td>
  145.                     </tr>
  146.                 </tbody>
  147.             </table>
  148.         </div>
  149.     )
  150. }
  151.  
  152. export default Keypad;
RAW Paste Data