Tell us what’s happening:
All tests are passing except #13 - if 2 or more operators are entered the last should be evaluated except the minus sign. Please assist if possible I been stuck for over 2 weeks
Your code so far
class MyJavaScriptCalculator extends React.Component {
constructor(props){
super(props)
this.clearDisplayDiv = this.clearDisplayDiv.bind(this);
this.getNumbers = this.getNumbers.bind(this);
this.getOperators = this.getOperators.bind(this);
this.calculateResult = this.calculateResult.bind(this);
this.dot = this.dot.bind(this);
this.state={
display:"0",
current:"",
expression:"",
evaluat:false,
}
}
dot(e){
let lasti =this.state.expression.slice(-1);
let lastCharTestReg= /[*-+/\/]/;
if(!lastCharTestReg.test(lasti) && !this.state.current.includes(".") && this.state.evaluat==false){
this.setState({
expression:this.state.expression + ".",
current:this.state.current + ".",
display:this.state.display + "."
})
}
}
getOperators = (e) => {
let last =this.state.expression.[this.state.expression.length-1];
let lastCharTestReg= /[+\-*\/]/;
if(!lastCharTestReg.test(last)){
this.setState({
current:"",
expression:this.state.expression + e.target.textContent
})
}else{
if(last !=="-" && e.target.textContent=="-"){
this.setState({
expression:this.state.expression + e.target.textContent
})
}else if(e.target.textContent!=="-" && last=="-"){
this.setState({
current:"",
expresion: this.state.expression.slice(0,-2) + e.target.textContent
})
}else{
this.setState({
expression:this.state.expression.slice(0,-1) + e.target.textContent
})
}
}
}
calculateResult(e){
if (this.state.expression !== "") {
let answer=math.evaluate(this.state.expression);
this.setState({
display:answer,
expression:answer,
evaluat:true
})
}
}
getNumbers = (e) => {
if(this .state.current[0]==="0" && e.target.textContent==="0"){
this.setState({
current : this.state.current
})
} else{
if(this.state.evaluat && typeof this.state.expression=="number"){
this.setState({
expression:e.target.textContent,
current:e.target.textContent,
evaluat:false,
display:e.target.textContent
})
} else if(this.state.evaluat && typeof this.state.expression=="string"){
this.setState({
expression:this.state.expression + e.target.textContent,
current:e.target.textContent,
evaluat:false,
display:e.target.textContent
})
} else {
this.setState({
expression:this.state.expression + e.target.textContent,
current:this.state.current + e.target.textContent,
evaluat:false,
display:this.state.current + e.target.textContent
})
}
}
}
clearDisplayDiv(){
this.setState({
current: "",
expression: "",
currentOperator: "",
evaluat: "",
display: "0"
})
}
render() {
return (
<div class="container">
<div class="display" id="display">
{this.state.display }
</div>
<div class="calculator">
<button id="add" onClick={this.getOperators} >+</button>
<button id="subtract" onClick={this.getOperators}>-</button>
<button id="multiply" onClick={this.getOperators}>*</button>
<button id="divide" onClick={this.getOperators}>/</button>
<button id="one" onClick={this.getNumbers} >1</button>
<button id="two" onClick={this.getNumbers}>2</button>
<button id="three" onClick={this.getNumbers}>3</button>
<button id="four" onClick={this.getNumbers}>4</button>
<button id="five" onClick={this.getNumbers}>5</button>
<button id="six" onClick={this.getNumbers}>6</button>
<button id="seven" onClick={this.getNumbers}>7</button>
<button id="eight" onClick={this.getNumbers}>8</button>
<button id="nine" onClick={this.getNumbers}>9</button>
<button id="zero" onClick={this.getNumbers}>0</button>
<button id="decimal" onClick={this.dot}>.</button>
<button id="clear" onClick={this.clearDisplayDiv}>A/C</button>
</div>
<button id="equals" class="equals" onClick={this.calculateResult} value="=">=</button>
</div>
)
}
}
ReactDOM.render(< MyJavaScriptCalculator />, document.getElementById("calculatorChallengeNode"));
The html code
<h1>MY JAVASCRIPT CALCULATOR</h1>
<div id="calculatorChallengeNode"></div>
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Safari/537.36 Edg/127.0.0.0
Challenge Information:
Front End Development Libraries Projects - Build a JavaScript Calculator
