Calculator - React

calculator-react.markdown

Calculator - React

A Pen by Vasilii V on CodePen.

License.

index.html

<div id="root">

</div>

script.babel

const btns = {one: 1,two: 2,three: 3,four: 4,five: 5,six: 6, seven: 7, eight: 8, nine :9, zero: 0,subtract: '-', add: '+', multiply: '*', divide: '/', equals: '=', decimal: '.', clear: 'C'};
let counter = 0;

class Display extends React.Component {
  render() {
    return (
      <div id='display'>
        
        {this.props.numToDisplay}
       
      </div>
    );
  }
}

class Buttons extends React.Component {
 

  handleClick = event => {
    this.props.num(event.target.value);      
  };
   
  handleKeyPress = event => {
  Object.values(btns).forEach(e => {
    if(e == event.key && event.key !== 'Enter') {
    this.props.num(e);
  }})
  
}
 
  render() {
    return (
      <div className="grid-container">
        {Object.entries(btns).map(e => (
          
          
          <button className="grid-item" type="button" value={e[1]} key ={e} id={e[0]} onClick = { this.handleClick} onKeyPress={this.handleKeyPress} tabIndex={0}>{e[1]}</button>))}
        </div>
    )
  }
}

class Calc extends React.Component {
  constructor(props) {
 super(props);

 this.state = { num: ['0'] };
}
  recieveNum = num => {
    //alert(this.state.num);
    if (num === 'C') {
      counter = 0;
 this.setState({
  num: ['0']
}) 
}
else if (num === '=') {
  counter = 0;
  let arrjoin = this.state.num.join('');
  let reone = /([0-9])([\*\-\+\/]+)([\*\+\/])([0-9])/g;
  let retwo = /([0-9])([\*\-\+\/]+)([\*\-\+\/])(\-)([0-9])/g;
  let rep = arrjoin.replace(reone, '$1$3$4');
  let reptwo = rep.replace(retwo, '$1$3$4$5');
  
   
   let res = eval(reptwo);
  
   this.setState({
  num: [res]
})
  }
 else {
    
    
   
   
   if (this.state.num[0] == '0' && num!='.') {
     this.setState({
       num: [this.state.num.shift()]
     })
   }
   
  if (num == '.') {
    counter++;
  }
   if (num == '.' && this.state.num[0] == '0') {
     this.setState({
       num: ['0', '.'] //wtf?
     })
   }
   if (num == '+' || num == '-' || num == '*' || num == '/') {
     counter = 0;
   }
   if (counter>1 && num == '.') {
     this.setState({
       num: [...this.state.num, this.state.num.slice(this.state.num.length-1, 1)]
     })
   }
   else {
    this.setState({
  num: [...this.state.num, num]
})
   }
  }
  
   
  }
  
  render() {
    return (
      <div>
        <Display numToDisplay = {this.state.num} />
        <Buttons num = {this.recieveNum} />
       
      </div>
    );
  }
}
ReactDOM.render(<Calc />, document.getElementById('root'))

scripts

<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.4.1/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-popper/2.2.3/index.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/1.1.0-rc.0/react-bootstrap.min.js"></script>
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

style.css

body {
 background: linear-gradient(to right, green, white);
}

.grid-container {
  display: grid;
  width: 50vw;
  height: 50vh;
  grid-template-columns: auto auto auto;
  padding: 10px;
 }
#root {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50vw;
}

button {
  height: 60px;
  background-color: #fff;
  border-radius: 3px;
  border: 1px solid #c4c4c4;
  background-color: transparent;
  font-size: 2rem;
  color: #333;
  background-image: linear-gradient(to bottom,transparent,transparent 50%,rgba(0,0,0,.04));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), inset 0 1px 0 0 rgba(255,255,255,.45), inset 0 -1px 0 0 rgba(255,255,255,.15), 0 1px 0 0 rgba(255,255,255,.15);
  text-shadow: 0 1px rgba(255,255,255,.4);
}

button:hover {
  background-color: #eaeaea;
}

#display {
width: 50vw;
  border-radius: 25px;
  font-size: 5rem;
  height: 80px;
  border: none;
  background-color: #252525;
  color: #fff;
  text-align: right;
  padding-right: 20px;
  padding-left: 10px;
}
#clear {
 grid-area: auto / 2 / auto / 4
}