In my code I typed the full functionality logic in my code & finally I was able to make it Functioning as it was told. But user-story#13 is so terrifying I tried many times but all my effort went on vain. I passed all 15 test except the 13th one. Please help me for my code . Your help is much to me. I’m building it with React so it might be a little confusing for those who doesn’t know it…But Even if you are unfamilier with React don’t hasitate to give me the answer with jQuery or Vanilla JS. I will convert it to React…
My Code
class App extends React.Component{
constructor(props){
super(props);
this.state = {
currentNumber: '0',
decimalFlag: false,
operatorFlag: false,
limitFlag: false
}
this.handleClick = this.handleClick.bind(this);
}
handleClick(event){
let buttonName = event.target.value
let {currentNumber, operatorFlag, decimalFlag} = this.state
switch(true){
case buttonName === "0" ||
buttonName === "1" || //Handling all the click event with a
buttonName === "2" || //Sing Event Handler
buttonName === "3" ||
buttonName === "4" ||
buttonName === "5" ||
buttonName === "6" || //Checking input if it 's a number or not
buttonName === "7" ||
buttonName === "8" ||
buttonName === "9" :
if(this.state.currentNumber!=="0"){
currentNumber += buttonName
operatorFlag = false
}else{
currentNumber = buttonName
}
break
case buttonName === "+" ||
buttonName === "-" || //Checking the operator
buttonName === "*" ||
buttonName === "/" :
if(!this.state.operatorFlag){
currentNumber += buttonName
operatorFlag = true
decimalFlag = false
}else{
let replacer = currentNumber.slice(0, currentNumber.length-1);
currentNumber = replacer;
currentNumber += buttonName
}
break
case buttonName === ".":
if(!this.state.decimalFlag){ //Triggering the Value Of Decimal if Decimal is false then append it to
currentNumber += buttonName; //the Display or current Number & soon after that make it true so it will
decimalFlag = true; //not get added after clicking it for the first time😎😎
}
break
case buttonName === "clear":
currentNumber = '0' //All Clear Button for removing every
operatorFlag = false; //thing
decimalFlag = false
break
case buttonName === '=': //All operation with one single eval function
currentNumber = eval(this.state.currentNumber)
operatorFlag = false;
decimalFlag = true;
break
}
this.setState({decimalFlag})
this.setState({operatorFlag}) //Changing the State
this.setState({currentNumber})
}
render(){
return (
<div className="bg"> //For background color
<div className="wrapper">
//Input element used as Display
<input type="text" id="display" value={this.state.currentNumber}/>
//container div for Grid
<div className="gridContainer">
//All button element
<button id="clear" value="clear" onClick={this.handleClick} className="operator">AC</button>
<button id="divide" value="/" onClick={this.handleClick} className="number logic">/</button>
<button id="multiply" value="*" onClick={this.handleClick} className="number logic">x</button>
<br/>
<button id="seven" value="7" onClick={this.handleClick} className="number">7</button>
<button id="eight" value="8" onClick={this.handleClick} className="number">8</button>
<button id="nine" value="9" onClick={this.handleClick} className="number">9</button>
<button id="subtract" value="-" onClick={this.handleClick} className="number logic">-</button>
<br/>
<button id="four" value="4" onClick={this.handleClick} className="number">4</button>
<button id="five" value="5" onClick={this.handleClick} className="number">5</button>
<button id="six" value="6" onClick={this.handleClick} className="number">6</button>
<button id="add" value="+" onClick={this.handleClick} className="number logic">+</button>
<br/>
<button id="one" value="1" onClick={this.handleClick} className="number">1</button>
<button id="two" value="2" onClick={this.handleClick} className="number">2</button>
<button id="three" value="3" onClick={this.handleClick} className="number">3</button>
<button id="backspace" onClick={this.handleClick} className="number logic">C</button>
<br/>
<button id="zero" value="0" onClick={this.handleClick} className="operator">0</button>
<button id="decimal" value="." onClick={this.handleClick} className="number">.</button>
<button id="equals" value="=" onClick={this.handleClick} className="number">=</button>
</div>
</div>
</div>
)
}
}
export default App;
You Can Also Check my CalculatorApp in GithubPages
Calculator App
Challenge: Build a JavaScript Calculator
Link to the challenge: