Tell us what’s happening:
Hi all,
I’m working on the calculator assignment, and my test #7 is failing when I try to set the state “0” to my “operations” variable.
The error I’m getting is:
SyntaxError: “0”-prefixed octal literals are deprecated; use the “0o” prefix instead
As far as I know I’m not using any octal literals anywhere in my code? Is it related to the eval function call?
Any help would be greatly appreciated.
Here’s my pen: https://codepen.io/double-dash-dino/pen/NWvORWN?editors=0111
Your code so far
Here’s my JS file:
import React, {
useState,
useEffect
} from "https://cdn.skypack.dev/react@17.0.1";
import ReactDOM from "https://cdn.skypack.dev/react-dom@17.0.1";
const Calculator = () => {
const [operations, setOperations] = useState("");
const [result, setResult] = useState("0");
const clearHandler = () => {
setOperations("0");
setResult("0");
};
const reOperators = /\+|\-|\*|\//;
const numberClickHandler = (event) => {
if (!reOperators.test(operations)) {
setResult(operations);
}
if (
// Check for mutliple zeros at the start of an number
operations.length !== 0 &&
operations[operations.length - 1] === "0" &&
operations[operations.length - 2] === ("+" || "-" || "*" || "/")
) {
setOperations(operations.slice(0, -1) + event.target.value);
} else if (
operations.length !== 0 &&
operations[operations.length - 1] === "." &&
event.target.value === "."
) {
setOperations(operations);
} else {
setOperations(operations + event.target.value);
}
};
const equalsHandler = () => {
setResult(operations);
};
return (
<div className="App">
<div className="calculator-card">
<div className="calculator-screen">
<div className="calculator-operations" id="display">
{operations}
</div>
<div className="calculator-result">{eval(result)}</div>
</div>
<div className="calculator-pad">
<div className="calculator-numbers">
<button
className="number-button"
id="seven"
value="7"
onClick={numberClickHandler}
>
7
</button>
<button
className="number-button"
id="eight"
value="8"
onClick={numberClickHandler}
>
8
</button>
<button
className="number-button"
id="nine"
value="9"
onClick={numberClickHandler}
>
9
</button>
<button
className="number-button"
id="four"
value="4"
onClick={numberClickHandler}
>
4
</button>
<button
className="number-button"
id="five"
value="5"
onClick={numberClickHandler}
>
5
</button>
<button
className="number-button"
id="six"
value="6"
onClick={numberClickHandler}
>
6
</button>
<button
className="number-button"
id="one"
value="1"
onClick={numberClickHandler}
>
1
</button>
<button
className="number-button"
id="two"
value="2"
onClick={numberClickHandler}
>
2
</button>
<button
className="number-button"
id="three"
value="3"
onClick={numberClickHandler}
>
3
</button>
<button
className="number-button"
id="zero"
value="0"
onClick={numberClickHandler}
>
0
</button>
<button
className="number-button"
id="decimal"
value="."
onClick={numberClickHandler}
>
.
</button>
</div>
<div className="calculator-operators">
<button
className="operator-button"
id="add"
value="+"
onClick={numberClickHandler}
>
+
</button>
<button
className="operator-button"
id="subtract"
value="-"
onClick={numberClickHandler}
>
-
</button>
<button
className="operator-button"
id="multiply"
value="*"
onClick={numberClickHandler}
>
x
</button>
<button
className="operator-button"
id="divide"
value="/"
onClick={numberClickHandler}
>
/
</button>
</div>
<div className="calculator-controls">
<button
className="control-button"
id="clear"
onClick={clearHandler}
>
A/C
</button>
<button
className="control-button"
id="equals"
onClick={equalsHandler}
>
=
</button>
</div>
</div>
</div>
</div>
);
};
ReactDOM.render(<Calculator />, document.getElementById("root"));
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:94.0) Gecko/20100101 Firefox/94.0
Challenge: Build a JavaScript Calculator
Link to the challenge: