UPDATE: Currently at 15/16
Couldn’t quite figure out this:
If 2 or more operators are entered consecutively, the operation performed should be the last operator entered (excluding the negative (-) sign.
UPDATE: Currently at 14/16
I’ve restarted probly 5 times. 2 of which, I followed tutorials on Youtube. Although I liked their code better because it looked much cleaner, their finished projects don’t really solve the user stories to pass the FCC project. 3 times I restarted, because I was just stuck, with too many line of code ( 300+). Changing one line will solve one problem but introduce another.
Almost on my 4th week on this, I’m hoping this is my last attempt and will finally pass all challenges. Because now, I am asking for help. It just felt that I could do it, those last 5 times. But now, I accept defeat, well not really… I accept that I need help. 
Maybe every developer does, or did at some point right?
So here’s the current code:
export default class Calculator extends React.Component {
constructor(props) {
super(props);
this.state = {
previousOperand: "0",
currentOperand: "0",
isOperational: false,
isPositive: true,
isDefault: true
};
}
handleClear = () => {
this.setState({
previousOperand: "0",
currentOperand: "0",
isOperational: false,
isPositive: true,
isDefault: true
});
};
handleDel = () => {
this.setState({
currentOperand: this.state.currentOperand.slice(
0,
this.state.currentOperand.length - 1
)
});
};
handleEquals = () => {
if (this.state.isOperational === false) return;
this.setState({
previousOperand: math.evaluate(this.state.previousOperand),
currentOperand: "0",
isPositive: true
});
};
handleDecimal = e => {
if (this.state.currentOperand.includes(".")) return;
this.setState({
currentOperand: this.state.currentOperand + e.target.value,
previousOperand: this.state.currentOperand + e.target.value
});
};
handleNumbers = e => {
const value = e.target.value;
switch (value) {
case "0":
this.handleZero(value);
break;
default:
this.handleInput(value);
break;
}
};
handleOperations = e => {
if (
(this.state.previousOperand === "" &&
this.state.currentOperand === "0") ||
this.state.currentOperand === "0."
) {
console.log(`returning because this is empty`);
return;
}
else if (
(this.state.previousOperand === "" &&
this.state.currentOperand !== "0") ||
(this.state.previousOperand === "" && this.state.currentOperand !== ".")
) {
this.setState({
previousOperand: this.state.currentOperand + e.target.value,
currentOperand: "0",
isPositive: true,
isOperational: true
});
}
/* IS THIS BREAKING MY APP????
else if (this.state.currentOperand.endsWith(".")) {
const replaced = this.state.currentOperand.replace(".", "");
this.setState({
previousOperand: replaced + e.target.value,
currentOperand: "0",
isPositive: true,
isOperational: true
});
}
*/
else {
this.setState({
previousOperand: this.state.previousOperand + e.target.value,
currentOperand: 0,
isPositive: true,
isOperational: true
});
}
};
handleZero = input => {
//handlezero
if (input === "0") {
if (this.state.currentOperand === "0") {
return;
} else {
this.handleInput(input);
}
}
};
handleInput = input => {
if (
this.state.currentOperand === "0" &&
this.state.previousOperand === "0"
) {
this.setState({
currentOperand: input,
previousOperand: input,
isDefault: false
});
} else {
this.setState({
currentOperand: this.state.currentOperand + input,
previousOperand: this.state.previousOperand + input
});
}
};
render() {
return (
<div className="calc-wrapper">
<Display
isDefault={this.state.isDefault}
previousOperand={this.state.previousOperand}
currentOperand={this.state.currentOperand}
/>
<Buttons
handleNumbers={this.handleNumbers}
handleClear={this.handleClear}
handleEquals={this.handleEquals}
handleDel={this.handleDel}
handleDecimal={this.handleDecimal}
handleOperations={this.handleOperations}
/>
</div>
);
}
}
So some of my thoughts at the moment:
-
I included a (±) button to handle negative values, and a state of
isPositive, but i realized it might still not pass the challenge, because it wants the actual “subtraction” key to do that. So I might actually omit that part. -
I’m using mathjs btw, all the other times I didn’t, I think this just helps lessen my code by a few lines. Although manual coding +, -, *, /, weren’t really hard. I just wanted to give this a try and seems to work nicely (when it was workin – before I added more lines of code – lol).
-
Do I need a polyfill for
endsWith()? because it’s breaking the app. If I keep that part ofelse ifit breaks, and commenting it out, I don’t get any error. I don’t even know how to add polyfill. Haha!