Can someone help me with how to remove the leading zero in my js calculator code. I have tried a number of ways such a parseFloat on the currentOperand but then the code will not accept further zeros within the numberstring.
Also I am battling with which code I should use for changing the state variables.
What I am trying to do is build up a number string for the currentOperand with no leading zeros unless it is of the form 0.12 etc and then put it into the formula string when I select an operator and then add the second operand etc.
Am I using the right way to update the state?
Are conditionals using the number string which I am using ok .
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
currentOperand: "0",
previousOperand: "",
formula: "",
evaluated: false,
};
this.handleNumber = this.handleNumber.bind(this);
this.handleClear = this.handleClear.bind(this);
this.handleDecimal = this.handleDecimal.bind(this);
}
handleNumber(e) {
const value = e.target.innerText;
// prevent more than one leading zero
if(value === '0' && this.state.currentOperand === '0') {
return this.state;
}
if (value >= '0' && value <= '9') {
this.setState((state) => {
return { currentOperand: state.currentOperand + value }
});
}
}
handleDecimal(e) {
const value = e.target.innerText;
// stops more than one decimal point being added
if(value === '.' && this.state.currentOperand.includes('.')) {
return this.state;
}
if( value === '.'){
this.setState((state) => {
return {currentOperand: state.currentOperand + value }
});
}
}
handleClear = ()=> {
this.setState({
currentOperand: '0',
previousOperand: '',
formula: '',
evaluated: false,
});
}
render() {
return (
<div className="calculator-grid">
<div className="output">
<div className="prev-operand" id="formula">
{ this.state.formula }
</div>
<div className="curr-operand" id="display">
{this.state.currentOperand}
</div>
</div>
<button className="clear" id="clear" onClick={this.handleClear}>AC</button>
<button id="delete" className="btn">DEL</button>
<button id="divide" className="btn">รท</button>
<button id="seven" className="btn" onClick={this.handleNumber}>7</button>
<button id="eight" className="btn" onClick={this.handleNumber}>8</button>
<button id="nine" className="btn" onClick={this.handleNumber}>9</button>
<button id="multiply" className="btn">*</button>
<button id="four" className="btn" onClick={this.handleNumber}>4</button>
<button id="five" className="btn" onClick={this.handleNumber}>5</button>
<button id="six" className="btn" onClick={this.handleNumber}>6</button>
<button id="subtract" className="btn">-</button>
<button id="one" className="btn" onClick={this.handleNumber}>1</button>
<button id="two" className="btn" onClick={this.handleNumber}>2</button>
<button id="three" className="btn" onClick={this.handleNumber}>3</button>
<button id="add" className="btn">+</button>
<button id="zero" className="btn" onClick={this.handleNumber}>0</button>
<button id="decimal" className="btn" onClick={this.handleDecimal}>.</button>
<button id="equals" className="equals">=</button>
</div>
);
}
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);