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. 
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.
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')
);