Calculator project- can't figure out how to limit multiple decimal and operators

Hello,

I am working on this calculator for a while but can’t figure out how to limit multiple decimal and operators.
I tried to use regular expression or if statement but I am not sure how to apply those on my current code. I almost feel like I should re-do it from the beginning (delete the current code and start from scratch again).

But before I do that, I wanted to here some advice.
Is there any way to fix this current code? or should I start over since this is messy?

Here is my codepen: https://codepen.io/eriko87/pen/agGKgR?editors=0011

1 Like

Actually, one small change makes the decimal thing work as you want.

Take a look at line 71. You are checking

if (this.state.currentNum === "."){...

which says “is currentNum ONLY a decimal point?” That may not be what you want to check. Instead, maybe, consider “does currentNum contain a decimal point?”

To check that, maybe consider checking the value of `this.state.currentNum.indexOf(".") against… something. What do you think that something should be?

Now, as to the multiple operators thing, it isn’t that you want to limit them - instead, you want to keep only the last one, if more than one is entered.

Another option to what @snowmonkey posted, is includes. Pretty sure most browsers support this now.

const email = "someone@gmail.com";

email.includes("@") //? true because it does
email.includes("$") //? false cause it does not

String.includes() returns a boolean of true if the value in parens is inside the string.

includes is also avaible for arrays.

1 Like

They definitely do. I’m just old-school. :wink:

ie 11 does not support .includes() … so you would need to use a polyfill.
Internet explorer is the just not good… at all.

I think IE is all but dead now. Microsoft seems to really push Edge in Windows 10 and even that is going to be based on Chrome soon.

Believe it or not, but I have many customers who still use IE8 on Windows 7 machines. Their machines can not even run Edge.

1 Like

I wish that was the case. For business users, most will use what is installed on their computers, which is IE and edge. IE seems to work better in a lot of circumstances.

Thank you everyone! I was able to fix the problem without starting from scratch.
I wanted to make the code simpler but this is my best for now…

updeted codepen: https://codepen.io/eriko87/pen/agGKgR?editors=0011
original code:

let operators= /[*/+-]/
let decimal= /[*/+-]/

class Calculator extends React.Component {
  constructor(props){
    super(props);
    this.state={
      formulaDisplay:"",
      currentFormula:"",
      numDisplay:"0",
      currentNum:"",
    };
    this.numbersClick=this.numbersClick.bind(this);
    this.operatorsClick=this.operatorsClick.bind(this);
    this.displayHandlar=this.displayHandlar.bind(this);
    this.operateHandlar=this.operateHandlar.bind(this);
    this.decimalHandlar=this.decimalHandlar.bind(this);
    this.equalsHandlar=this.equalsHandlar.bind(this);
    this.clearHandlar=this.clearHandlar.bind(this);
  }
  
  numbersClick(event){
    this.displayHandlar(event, event.target.value);
  }
  
  operatorsClick(event){
    this.displayHandlar(event, event.target.value);
    this.operateHandlar(event);
  }
  
  displayHandlar(event, num){ 
    if(this.state.currentNum==="0"){
      this.setState({
        formulaDisplay: num,
        currentFormula:"",
        numDisplay: num,   
        currentNum: ""
      })
      
    } else {
      let currentformla = this.state.currentFormula.concat(num)  
    let currentdisplay = this.state.currentNum.concat(num)  
    this.setState({
      formulaDisplay: currentformla,   
      currentFormula:currentformla,
      numDisplay: currentdisplay,   
      currentNum: currentdisplay
    }); 
    }      
  }
   
  operateHandlar(event){
    this.setState({
      numDisplay: event.target.value,   
      currentNum: ""
    })
  }
   
  equalsHandlar(event, num){
    let sum = eval(this.state.formulaDisplay)
    let formuladisplay = this.state.currentFormula.concat("="+sum)  
    this.setState({
      numDisplay: sum,
      formulaDisplay:formuladisplay,
      currentFormula:sum.toString()
    })
  }
  
  decimalHandlar(event){
    console.log(this.state.currentNum)
    if(this.state.currentNum==="."){
      this.setState({
        formulaDisplay: num,
        currentFormula:"",
        numDisplay: num,   
        currentNum: ""
      })} else{ if (operators.test(this.state.currentNum)===false){
        
      }
        let currentformla = this.state.currentFormula.concat(event.target.value)
        let currentdisplay = this.state.currentNum.concat(event.target.value)  
        this.setState({
      formulaDisplay: currentformla,   
      currentFormula:currentformla,
      numDisplay: currentdisplay,   
      currentNum: currentdisplay
    }); 
      }
    
  };    
  
  clearHandlar(event){
    this.setState({
      formulaDisplay:"",
      currentFormula:"",
      numDisplay:"0",
      currentNum: ""
    })
  };    
  
  render() {
    return (
      <div className="calculator">
        <h1>Ericio</h1>
        <Display 
          formula={this.state.formulaDisplay} 
          display={this.state.numDisplay} 
          />
        <Buttons 
          clicked={this.numbersClick}
          operators={this.operatorsClick}
          decimal={this.decimalHandlar} 
          calculate={this.formlaDisplayHandlar}
          equals={this.equalsHandlar}
          clear={this.clearHandlar}
          />
      </div>
    );
  }
}

class Buttons extends React.Component {
  render(){
    return(
    <div className="buttons">
        <button id="clear" value="" className="large" onClick={this.props.clear}>AC</button>
        <button id="divide" value="/" className="calc" onClick={this.props.operators}>/</button>
        <button id="multiply" value="*" className="calc" onClick={this.props.operators}>x</button>
        <button id="seven" value="7" className="button" onClick={this.props.clicked}>7</button>
        <button id="eight" value="8" className="button" onClick={this.props.clicked}>8</button>      
        <button id="nine" value="9" className="button" onClick={this.props.clicked}>9</button>
        <button id="subtract" value="-" className="calc" onClick={this.props.operators}>-</button>
        <button id="four" value="4" className="button" onClick={this.props.clicked}>4</button>
        <button id="five" value="5" className="button" onClick={this.props.clicked}>5</button>
        <button id="six" value="6" className="button" onClick={this.props.clicked}>6</button>
        <button id="add" value="+" className="calc" onClick={this.props.operators}>+</button>
        <button id="one" value="1" className="button" onClick={this.props.clicked}>1</button>
        <button id="two" value="2" className="button" onClick={this.props.clicked}>2</button>
        <button id="three" value="3" className="button" onClick={this.props.clicked}>3</button>
        <button id="equals" value="=" className="calc" onClick={this.props.equals}>=</button>
        <button id="zero" value="0" className="button" onClick={this.props.clicked}>0</button>
        <button id="decimal" value="." className="calc" onClick={this.props.decimal}>.</button>
      </div>)
  }
}

class Display extends React.Component{
  render(){ 
    return(
    <div id="displaywindow">
        <h3 id="displayformula">{this.props.formula}</h3>
        <h3 id="display">{this.props.display}</h3>
      </div>
    );
  };
}




  ReactDOM.render(
    <Calculator />,
    document.getElementById('root')
  );